Definable.js 5.9 KB

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