Definable.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. var _core = require("../core");
  2. var createElement = _core.createElement;
  3. var zrUtil = require("../../core/util");
  4. var Path = require("../../graphic/Path");
  5. var ZImage = require("../../graphic/Image");
  6. var ZText = require("../../graphic/Text");
  7. var _graphic = require("../graphic");
  8. var svgPath = _graphic.path;
  9. var svgImage = _graphic.image;
  10. var svgText = _graphic.text;
  11. /**
  12. * @file Manages elements that can be defined in <defs> in SVG,
  13. * e.g., gradients, clip path, etc.
  14. * @author Zhang Wenli
  15. */
  16. var MARK_UNUSED = '0';
  17. var MARK_USED = '1';
  18. /**
  19. * Manages elements that can be defined in <defs> in SVG,
  20. * e.g., gradients, clip path, etc.
  21. *
  22. * @class
  23. * @param {SVGElement} svgRoot root of SVG document
  24. * @param {string|string[]} tagNames possible tag names
  25. * @param {string} markLabel label name to make if the element
  26. * is used
  27. */
  28. function Definable(svgRoot, tagNames, markLabel) {
  29. this._svgRoot = svgRoot;
  30. this._tagNames = typeof tagNames === 'string' ? [tagNames] : tagNames;
  31. this._markLabel = markLabel;
  32. this.nextId = 0;
  33. }
  34. Definable.prototype.createElement = createElement;
  35. /**
  36. * Get the <defs> tag for svgRoot; optionally creates one if not exists.
  37. *
  38. * @param {boolean} isForceCreating if need to create when not exists
  39. * @return {SVGDefsElement} SVG <defs> element, null if it doesn't
  40. * exist and isForceCreating is false
  41. */
  42. Definable.prototype.getDefs = function (isForceCreating) {
  43. var svgRoot = this._svgRoot;
  44. var defs = this._svgRoot.getElementsByTagName('defs');
  45. if (defs.length === 0) {
  46. // Not exist
  47. if (isForceCreating) {
  48. defs = svgRoot.insertBefore(this.createElement('defs'), // Create new tag
  49. svgRoot.firstChild // Insert in the front of svg
  50. );
  51. if (!defs.contains) {
  52. // IE doesn't support contains method
  53. defs.contains = function (el) {
  54. var children = defs.children;
  55. if (!children) {
  56. return false;
  57. }
  58. for (var i = children.length - 1; i >= 0; --i) {
  59. if (children[i] === el) {
  60. return true;
  61. }
  62. }
  63. return false;
  64. };
  65. }
  66. return defs;
  67. } else {
  68. return null;
  69. }
  70. } else {
  71. return defs[0];
  72. }
  73. };
  74. /**
  75. * Update DOM element if necessary.
  76. *
  77. * @param {Object|string} element style element. e.g., for gradient,
  78. * it may be '#ccc' or {type: 'linear', ...}
  79. * @param {Function|undefined} onUpdate update callback
  80. */
  81. Definable.prototype.update = function (element, onUpdate) {
  82. if (!element) {
  83. return;
  84. }
  85. var defs = this.getDefs(false);
  86. if (element._dom && defs.contains(element._dom)) {
  87. // Update DOM
  88. if (typeof onUpdate === 'function') {
  89. onUpdate();
  90. }
  91. } else {
  92. // No previous dom, create new
  93. var dom = this.add(element);
  94. if (dom) {
  95. element._dom = dom;
  96. }
  97. }
  98. };
  99. /**
  100. * Add gradient dom to defs
  101. *
  102. * @param {SVGElement} dom DOM to be added to <defs>
  103. */
  104. Definable.prototype.addDom = function (dom) {
  105. var defs = this.getDefs(true);
  106. defs.appendChild(dom);
  107. };
  108. /**
  109. * Remove DOM of a given element.
  110. *
  111. * @param {SVGElement} element element to remove dom
  112. */
  113. Definable.prototype.removeDom = function (element) {
  114. var defs = this.getDefs(false);
  115. defs.removeChild(element._dom);
  116. };
  117. /**
  118. * Get DOMs of this element.
  119. *
  120. * @return {HTMLDomElement} doms of this defineable elements in <defs>
  121. */
  122. Definable.prototype.getDoms = function () {
  123. var defs = this.getDefs(false);
  124. if (!defs) {
  125. // No dom when defs is not defined
  126. return [];
  127. }
  128. var doms = [];
  129. zrUtil.each(this._tagNames, function (tagName) {
  130. var tags = defs.getElementsByTagName(tagName); // Note that tags is HTMLCollection, which is array-like
  131. // rather than real array.
  132. // So `doms.concat(tags)` add tags as one object.
  133. doms = doms.concat([].slice.call(tags));
  134. });
  135. return doms;
  136. };
  137. /**
  138. * Mark DOMs to be unused before painting, and clear unused ones at the end
  139. * of the painting.
  140. */
  141. Definable.prototype.markAllUnused = function () {
  142. var doms = this.getDoms();
  143. var that = this;
  144. zrUtil.each(doms, function (dom) {
  145. dom[that._markLabel] = MARK_UNUSED;
  146. });
  147. };
  148. /**
  149. * Mark a single DOM to be used.
  150. *
  151. * @param {SVGElement} dom DOM to mark
  152. */
  153. Definable.prototype.markUsed = function (dom) {
  154. if (dom) {
  155. dom[this._markLabel] = MARK_USED;
  156. }
  157. };
  158. /**
  159. * Remove unused DOMs defined in <defs>
  160. */
  161. Definable.prototype.removeUnused = function () {
  162. var defs = this.getDefs(false);
  163. if (!defs) {
  164. // Nothing to remove
  165. return;
  166. }
  167. var doms = this.getDoms();
  168. var that = this;
  169. zrUtil.each(doms, function (dom) {
  170. if (dom[that._markLabel] !== MARK_USED) {
  171. // Remove gradient
  172. defs.removeChild(dom);
  173. }
  174. });
  175. };
  176. /**
  177. * Get SVG proxy.
  178. *
  179. * @param {Displayable} displayable displayable element
  180. * @return {Path|Image|Text} svg proxy of given element
  181. */
  182. Definable.prototype.getSvgProxy = function (displayable) {
  183. if (displayable instanceof Path) {
  184. return svgPath;
  185. } else if (displayable instanceof ZImage) {
  186. return svgImage;
  187. } else if (displayable instanceof ZText) {
  188. return svgText;
  189. } else {
  190. return svgPath;
  191. }
  192. };
  193. /**
  194. * Get text SVG element.
  195. *
  196. * @param {Displayable} displayable displayable element
  197. * @return {SVGElement} SVG element of text
  198. */
  199. Definable.prototype.getTextSvgElement = function (displayable) {
  200. return displayable.__textSvgEl;
  201. };
  202. /**
  203. * Get SVG element.
  204. *
  205. * @param {Displayable} displayable displayable element
  206. * @return {SVGElement} SVG element
  207. */
  208. Definable.prototype.getSvgElement = function (displayable) {
  209. return displayable.__svgEl;
  210. };
  211. var _default = Definable;
  212. module.exports = _default;