Painter.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. import { createElement, SVGNS, XLINKNS, XMLNS } from '../svg/core.js';
  2. import { normalizeColor } from '../svg/helper.js';
  3. import * as util from '../core/util.js';
  4. import Path from '../graphic/Path.js';
  5. import ZRImage from '../graphic/Image.js';
  6. import TSpan from '../graphic/TSpan.js';
  7. import arrayDiff from '../core/arrayDiff.js';
  8. import GradientManager from './helper/GradientManager.js';
  9. import PatternManager from './helper/PatternManager.js';
  10. import ClippathManager, { hasClipPath } from './helper/ClippathManager.js';
  11. import ShadowManager from './helper/ShadowManager.js';
  12. import { path as svgPath, image as svgImage, text as svgText } from './graphic.js';
  13. import { getSize } from '../canvas/helper.js';
  14. function getSvgProxy(el) {
  15. if (el instanceof Path) {
  16. return svgPath;
  17. }
  18. else if (el instanceof ZRImage) {
  19. return svgImage;
  20. }
  21. else if (el instanceof TSpan) {
  22. return svgText;
  23. }
  24. else {
  25. return svgPath;
  26. }
  27. }
  28. function checkParentAvailable(parent, child) {
  29. return child && parent && child.parentNode !== parent;
  30. }
  31. function insertAfter(parent, child, prevSibling) {
  32. if (checkParentAvailable(parent, child) && prevSibling) {
  33. var nextSibling = prevSibling.nextSibling;
  34. nextSibling ? parent.insertBefore(child, nextSibling)
  35. : parent.appendChild(child);
  36. }
  37. }
  38. function prepend(parent, child) {
  39. if (checkParentAvailable(parent, child)) {
  40. var firstChild = parent.firstChild;
  41. firstChild ? parent.insertBefore(child, firstChild)
  42. : parent.appendChild(child);
  43. }
  44. }
  45. function remove(parent, child) {
  46. if (child && parent && child.parentNode === parent) {
  47. parent.removeChild(child);
  48. }
  49. }
  50. function removeFromMyParent(child) {
  51. if (child && child.parentNode) {
  52. child.parentNode.removeChild(child);
  53. }
  54. }
  55. function getSvgElement(displayable) {
  56. return displayable.__svgEl;
  57. }
  58. var SVGPainter = (function () {
  59. function SVGPainter(root, storage, opts, zrId) {
  60. this.type = 'svg';
  61. this.configLayer = createMethodNotSupport('configLayer');
  62. this.root = root;
  63. this.storage = storage;
  64. this._opts = opts = util.extend({}, opts || {});
  65. var svgDom = createElement('svg');
  66. svgDom.setAttributeNS(XMLNS, 'xmlns', SVGNS);
  67. svgDom.setAttributeNS(XMLNS, 'xmlns:xlink', XLINKNS);
  68. svgDom.setAttribute('version', '1.1');
  69. svgDom.setAttribute('baseProfile', 'full');
  70. svgDom.style.cssText = 'user-select:none;position:absolute;left:0;top:0;';
  71. var bgRoot = createElement('g');
  72. svgDom.appendChild(bgRoot);
  73. var svgRoot = createElement('g');
  74. svgDom.appendChild(svgRoot);
  75. this._gradientManager = new GradientManager(zrId, svgRoot);
  76. this._patternManager = new PatternManager(zrId, svgRoot);
  77. this._clipPathManager = new ClippathManager(zrId, svgRoot);
  78. this._shadowManager = new ShadowManager(zrId, svgRoot);
  79. var viewport = document.createElement('div');
  80. viewport.style.cssText = 'overflow:hidden;position:relative';
  81. this._svgDom = svgDom;
  82. this._svgRoot = svgRoot;
  83. this._backgroundRoot = bgRoot;
  84. this._viewport = viewport;
  85. root.appendChild(viewport);
  86. viewport.appendChild(svgDom);
  87. this.resize(opts.width, opts.height);
  88. this._visibleList = [];
  89. }
  90. SVGPainter.prototype.getType = function () {
  91. return 'svg';
  92. };
  93. SVGPainter.prototype.getViewportRoot = function () {
  94. return this._viewport;
  95. };
  96. SVGPainter.prototype.getSvgDom = function () {
  97. return this._svgDom;
  98. };
  99. SVGPainter.prototype.getSvgRoot = function () {
  100. return this._svgRoot;
  101. };
  102. SVGPainter.prototype.getViewportRootOffset = function () {
  103. var viewportRoot = this.getViewportRoot();
  104. if (viewportRoot) {
  105. return {
  106. offsetLeft: viewportRoot.offsetLeft || 0,
  107. offsetTop: viewportRoot.offsetTop || 0
  108. };
  109. }
  110. };
  111. SVGPainter.prototype.refresh = function () {
  112. var list = this.storage.getDisplayList(true);
  113. this._paintList(list);
  114. };
  115. SVGPainter.prototype.setBackgroundColor = function (backgroundColor) {
  116. if (this._backgroundRoot && this._backgroundNode) {
  117. this._backgroundRoot.removeChild(this._backgroundNode);
  118. }
  119. var bgNode = createElement('rect');
  120. bgNode.setAttribute('width', this.getWidth());
  121. bgNode.setAttribute('height', this.getHeight());
  122. bgNode.setAttribute('x', 0);
  123. bgNode.setAttribute('y', 0);
  124. bgNode.setAttribute('id', 0);
  125. var _a = normalizeColor(backgroundColor), color = _a.color, opacity = _a.opacity;
  126. bgNode.setAttribute('fill', color);
  127. bgNode.setAttribute('fill-opacity', opacity);
  128. this._backgroundRoot.appendChild(bgNode);
  129. this._backgroundNode = bgNode;
  130. };
  131. SVGPainter.prototype.createSVGElement = function (tag) {
  132. return createElement(tag);
  133. };
  134. SVGPainter.prototype.paintOne = function (el) {
  135. var svgProxy = getSvgProxy(el);
  136. svgProxy && svgProxy.brush(el);
  137. return getSvgElement(el);
  138. };
  139. SVGPainter.prototype._paintList = function (list) {
  140. var gradientManager = this._gradientManager;
  141. var patternManager = this._patternManager;
  142. var clipPathManager = this._clipPathManager;
  143. var shadowManager = this._shadowManager;
  144. gradientManager.markAllUnused();
  145. patternManager.markAllUnused();
  146. clipPathManager.markAllUnused();
  147. shadowManager.markAllUnused();
  148. var svgRoot = this._svgRoot;
  149. var visibleList = this._visibleList;
  150. var listLen = list.length;
  151. var newVisibleList = [];
  152. for (var i = 0; i < listLen; i++) {
  153. var displayable = list[i];
  154. var svgProxy = getSvgProxy(displayable);
  155. var svgElement = getSvgElement(displayable);
  156. if (!displayable.invisible) {
  157. if (displayable.__dirty || !svgElement) {
  158. svgProxy && svgProxy.brush(displayable);
  159. svgElement = getSvgElement(displayable);
  160. if (svgElement && displayable.style) {
  161. gradientManager.update(displayable.style.fill);
  162. gradientManager.update(displayable.style.stroke);
  163. patternManager.update(displayable.style.fill);
  164. patternManager.update(displayable.style.stroke);
  165. shadowManager.update(svgElement, displayable);
  166. }
  167. displayable.__dirty = 0;
  168. }
  169. if (svgElement) {
  170. newVisibleList.push(displayable);
  171. }
  172. }
  173. }
  174. var diff = arrayDiff(visibleList, newVisibleList);
  175. var prevSvgElement;
  176. var topPrevSvgElement;
  177. for (var i = 0; i < diff.length; i++) {
  178. var item = diff[i];
  179. if (item.removed) {
  180. for (var k = 0; k < item.count; k++) {
  181. var displayable = visibleList[item.indices[k]];
  182. var svgElement = getSvgElement(displayable);
  183. hasClipPath(displayable) ? removeFromMyParent(svgElement)
  184. : remove(svgRoot, svgElement);
  185. }
  186. }
  187. }
  188. var prevDisplayable;
  189. var currentClipGroup;
  190. for (var i = 0; i < diff.length; i++) {
  191. var item = diff[i];
  192. if (item.removed) {
  193. continue;
  194. }
  195. for (var k = 0; k < item.count; k++) {
  196. var displayable = newVisibleList[item.indices[k]];
  197. var clipGroup = clipPathManager.update(displayable, prevDisplayable);
  198. if (clipGroup !== currentClipGroup) {
  199. prevSvgElement = topPrevSvgElement;
  200. if (clipGroup) {
  201. prevSvgElement ? insertAfter(svgRoot, clipGroup, prevSvgElement)
  202. : prepend(svgRoot, clipGroup);
  203. topPrevSvgElement = clipGroup;
  204. prevSvgElement = null;
  205. }
  206. currentClipGroup = clipGroup;
  207. }
  208. var svgElement = getSvgElement(displayable);
  209. prevSvgElement
  210. ? insertAfter(currentClipGroup || svgRoot, svgElement, prevSvgElement)
  211. : prepend(currentClipGroup || svgRoot, svgElement);
  212. prevSvgElement = svgElement || prevSvgElement;
  213. if (!currentClipGroup) {
  214. topPrevSvgElement = prevSvgElement;
  215. }
  216. gradientManager.markUsed(displayable);
  217. gradientManager.addWithoutUpdate(svgElement, displayable);
  218. patternManager.markUsed(displayable);
  219. patternManager.addWithoutUpdate(svgElement, displayable);
  220. clipPathManager.markUsed(displayable);
  221. prevDisplayable = displayable;
  222. }
  223. }
  224. gradientManager.removeUnused();
  225. patternManager.removeUnused();
  226. clipPathManager.removeUnused();
  227. shadowManager.removeUnused();
  228. this._visibleList = newVisibleList;
  229. };
  230. SVGPainter.prototype.resize = function (width, height) {
  231. var viewport = this._viewport;
  232. viewport.style.display = 'none';
  233. var opts = this._opts;
  234. width != null && (opts.width = width);
  235. height != null && (opts.height = height);
  236. width = getSize(this.root, 0, opts);
  237. height = getSize(this.root, 1, opts);
  238. viewport.style.display = '';
  239. if (this._width !== width || this._height !== height) {
  240. this._width = width;
  241. this._height = height;
  242. var viewportStyle = viewport.style;
  243. viewportStyle.width = width + 'px';
  244. viewportStyle.height = height + 'px';
  245. var svgRoot = this._svgDom;
  246. svgRoot.setAttribute('width', width + '');
  247. svgRoot.setAttribute('height', height + '');
  248. }
  249. if (this._backgroundNode) {
  250. this._backgroundNode.setAttribute('width', width);
  251. this._backgroundNode.setAttribute('height', height);
  252. }
  253. };
  254. SVGPainter.prototype.getWidth = function () {
  255. return this._width;
  256. };
  257. SVGPainter.prototype.getHeight = function () {
  258. return this._height;
  259. };
  260. SVGPainter.prototype.dispose = function () {
  261. this.root.innerHTML = '';
  262. this._svgRoot =
  263. this._backgroundRoot =
  264. this._svgDom =
  265. this._backgroundNode =
  266. this._viewport = this.storage = null;
  267. };
  268. SVGPainter.prototype.clear = function () {
  269. var viewportNode = this._viewport;
  270. if (viewportNode && viewportNode.parentNode) {
  271. viewportNode.parentNode.removeChild(viewportNode);
  272. }
  273. };
  274. SVGPainter.prototype.toDataURL = function () {
  275. this.refresh();
  276. var svgDom = this._svgDom;
  277. var outerHTML = svgDom.outerHTML
  278. || (svgDom.parentNode && svgDom.parentNode.innerHTML);
  279. var html = encodeURIComponent(outerHTML.replace(/></g, '>\n\r<'));
  280. return 'data:image/svg+xml;charset=UTF-8,' + html;
  281. };
  282. return SVGPainter;
  283. }());
  284. function createMethodNotSupport(method) {
  285. return function () {
  286. if (process.env.NODE_ENV !== 'production') {
  287. util.logError('In SVG mode painter not support method "' + method + '"');
  288. }
  289. };
  290. }
  291. export default SVGPainter;