Painter.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. import { brush, setClipPath, setGradient, setPattern } from './graphic.js';
  2. import { createElement, createVNode, vNodeToString, getCssString, createBrushScope, createSVGVNode } from './core.js';
  3. import { normalizeColor, encodeBase64, isGradient, isPattern } from './helper.js';
  4. import { extend, keys, logError, map, noop, retrieve2 } from '../core/util.js';
  5. import patch, { updateAttrs } from './patch.js';
  6. import { getSize } from '../canvas/helper.js';
  7. var svgId = 0;
  8. var SVGPainter = (function () {
  9. function SVGPainter(root, storage, opts) {
  10. this.type = 'svg';
  11. this.refreshHover = createMethodNotSupport('refreshHover');
  12. this.configLayer = createMethodNotSupport('configLayer');
  13. this.storage = storage;
  14. this._opts = opts = extend({}, opts);
  15. this.root = root;
  16. this._id = 'zr' + svgId++;
  17. this._oldVNode = createSVGVNode(opts.width, opts.height);
  18. if (root && !opts.ssr) {
  19. var viewport = this._viewport = document.createElement('div');
  20. viewport.style.cssText = 'position:relative;overflow:hidden';
  21. var svgDom = this._svgDom = this._oldVNode.elm = createElement('svg');
  22. updateAttrs(null, this._oldVNode);
  23. viewport.appendChild(svgDom);
  24. root.appendChild(viewport);
  25. }
  26. this.resize(opts.width, opts.height);
  27. }
  28. SVGPainter.prototype.getType = function () {
  29. return this.type;
  30. };
  31. SVGPainter.prototype.getViewportRoot = function () {
  32. return this._viewport;
  33. };
  34. SVGPainter.prototype.getViewportRootOffset = function () {
  35. var viewportRoot = this.getViewportRoot();
  36. if (viewportRoot) {
  37. return {
  38. offsetLeft: viewportRoot.offsetLeft || 0,
  39. offsetTop: viewportRoot.offsetTop || 0
  40. };
  41. }
  42. };
  43. SVGPainter.prototype.getSvgDom = function () {
  44. return this._svgDom;
  45. };
  46. SVGPainter.prototype.refresh = function () {
  47. if (this.root) {
  48. var vnode = this.renderToVNode({
  49. willUpdate: true
  50. });
  51. vnode.attrs.style = 'position:absolute;left:0;top:0;user-select:none';
  52. patch(this._oldVNode, vnode);
  53. this._oldVNode = vnode;
  54. }
  55. };
  56. SVGPainter.prototype.renderOneToVNode = function (el) {
  57. return brush(el, createBrushScope(this._id));
  58. };
  59. SVGPainter.prototype.renderToVNode = function (opts) {
  60. opts = opts || {};
  61. var list = this.storage.getDisplayList(true);
  62. var width = this._width;
  63. var height = this._height;
  64. var scope = createBrushScope(this._id);
  65. scope.animation = opts.animation;
  66. scope.willUpdate = opts.willUpdate;
  67. scope.compress = opts.compress;
  68. scope.emphasis = opts.emphasis;
  69. scope.ssr = this._opts.ssr;
  70. var children = [];
  71. var bgVNode = this._bgVNode = createBackgroundVNode(width, height, this._backgroundColor, scope);
  72. bgVNode && children.push(bgVNode);
  73. var mainVNode = !opts.compress
  74. ? (this._mainVNode = createVNode('g', 'main', {}, [])) : null;
  75. this._paintList(list, scope, mainVNode ? mainVNode.children : children);
  76. mainVNode && children.push(mainVNode);
  77. var defs = map(keys(scope.defs), function (id) { return scope.defs[id]; });
  78. if (defs.length) {
  79. children.push(createVNode('defs', 'defs', {}, defs));
  80. }
  81. if (opts.animation) {
  82. var animationCssStr = getCssString(scope.cssNodes, scope.cssAnims, { newline: true });
  83. if (animationCssStr) {
  84. var styleNode = createVNode('style', 'stl', {}, [], animationCssStr);
  85. children.push(styleNode);
  86. }
  87. }
  88. return createSVGVNode(width, height, children, opts.useViewBox);
  89. };
  90. SVGPainter.prototype.renderToString = function (opts) {
  91. opts = opts || {};
  92. return vNodeToString(this.renderToVNode({
  93. animation: retrieve2(opts.cssAnimation, true),
  94. emphasis: retrieve2(opts.cssEmphasis, true),
  95. willUpdate: false,
  96. compress: true,
  97. useViewBox: retrieve2(opts.useViewBox, true)
  98. }), { newline: true });
  99. };
  100. SVGPainter.prototype.setBackgroundColor = function (backgroundColor) {
  101. this._backgroundColor = backgroundColor;
  102. };
  103. SVGPainter.prototype.getSvgRoot = function () {
  104. return this._mainVNode && this._mainVNode.elm;
  105. };
  106. SVGPainter.prototype._paintList = function (list, scope, out) {
  107. var listLen = list.length;
  108. var clipPathsGroupsStack = [];
  109. var clipPathsGroupsStackDepth = 0;
  110. var currentClipPathGroup;
  111. var prevClipPaths;
  112. var clipGroupNodeIdx = 0;
  113. for (var i = 0; i < listLen; i++) {
  114. var displayable = list[i];
  115. if (!displayable.invisible) {
  116. var clipPaths = displayable.__clipPaths;
  117. var len = clipPaths && clipPaths.length || 0;
  118. var prevLen = prevClipPaths && prevClipPaths.length || 0;
  119. var lca = void 0;
  120. for (lca = Math.max(len - 1, prevLen - 1); lca >= 0; lca--) {
  121. if (clipPaths && prevClipPaths
  122. && clipPaths[lca] === prevClipPaths[lca]) {
  123. break;
  124. }
  125. }
  126. for (var i_1 = prevLen - 1; i_1 > lca; i_1--) {
  127. clipPathsGroupsStackDepth--;
  128. currentClipPathGroup = clipPathsGroupsStack[clipPathsGroupsStackDepth - 1];
  129. }
  130. for (var i_2 = lca + 1; i_2 < len; i_2++) {
  131. var groupAttrs = {};
  132. setClipPath(clipPaths[i_2], groupAttrs, scope);
  133. var g = createVNode('g', 'clip-g-' + clipGroupNodeIdx++, groupAttrs, []);
  134. (currentClipPathGroup ? currentClipPathGroup.children : out).push(g);
  135. clipPathsGroupsStack[clipPathsGroupsStackDepth++] = g;
  136. currentClipPathGroup = g;
  137. }
  138. prevClipPaths = clipPaths;
  139. var ret = brush(displayable, scope);
  140. if (ret) {
  141. (currentClipPathGroup ? currentClipPathGroup.children : out).push(ret);
  142. }
  143. }
  144. }
  145. };
  146. SVGPainter.prototype.resize = function (width, height) {
  147. var opts = this._opts;
  148. var root = this.root;
  149. var viewport = this._viewport;
  150. width != null && (opts.width = width);
  151. height != null && (opts.height = height);
  152. if (root && viewport) {
  153. viewport.style.display = 'none';
  154. width = getSize(root, 0, opts);
  155. height = getSize(root, 1, opts);
  156. viewport.style.display = '';
  157. }
  158. if (this._width !== width || this._height !== height) {
  159. this._width = width;
  160. this._height = height;
  161. if (viewport) {
  162. var viewportStyle = viewport.style;
  163. viewportStyle.width = width + 'px';
  164. viewportStyle.height = height + 'px';
  165. }
  166. if (!isPattern(this._backgroundColor)) {
  167. var svgDom = this._svgDom;
  168. if (svgDom) {
  169. svgDom.setAttribute('width', width);
  170. svgDom.setAttribute('height', height);
  171. }
  172. var bgEl = this._bgVNode && this._bgVNode.elm;
  173. if (bgEl) {
  174. bgEl.setAttribute('width', width);
  175. bgEl.setAttribute('height', height);
  176. }
  177. }
  178. else {
  179. this.refresh();
  180. }
  181. }
  182. };
  183. SVGPainter.prototype.getWidth = function () {
  184. return this._width;
  185. };
  186. SVGPainter.prototype.getHeight = function () {
  187. return this._height;
  188. };
  189. SVGPainter.prototype.dispose = function () {
  190. if (this.root) {
  191. this.root.innerHTML = '';
  192. }
  193. this._svgDom =
  194. this._viewport =
  195. this.storage =
  196. this._oldVNode =
  197. this._bgVNode =
  198. this._mainVNode = null;
  199. };
  200. SVGPainter.prototype.clear = function () {
  201. if (this._svgDom) {
  202. this._svgDom.innerHTML = null;
  203. }
  204. this._oldVNode = null;
  205. };
  206. SVGPainter.prototype.toDataURL = function (base64) {
  207. var str = this.renderToString();
  208. var prefix = 'data:image/svg+xml;';
  209. if (base64) {
  210. str = encodeBase64(str);
  211. return str && prefix + 'base64,' + str;
  212. }
  213. return prefix + 'charset=UTF-8,' + encodeURIComponent(str);
  214. };
  215. return SVGPainter;
  216. }());
  217. function createMethodNotSupport(method) {
  218. return function () {
  219. if (process.env.NODE_ENV !== 'production') {
  220. logError('In SVG mode painter not support method "' + method + '"');
  221. }
  222. };
  223. }
  224. function createBackgroundVNode(width, height, backgroundColor, scope) {
  225. var bgVNode;
  226. if (backgroundColor && backgroundColor !== 'none') {
  227. bgVNode = createVNode('rect', 'bg', {
  228. width: width,
  229. height: height,
  230. x: '0',
  231. y: '0'
  232. });
  233. if (isGradient(backgroundColor)) {
  234. setGradient({ fill: backgroundColor }, bgVNode.attrs, 'fill', scope);
  235. }
  236. else if (isPattern(backgroundColor)) {
  237. setPattern({
  238. style: {
  239. fill: backgroundColor
  240. },
  241. dirty: noop,
  242. getBoundingRect: function () { return ({ width: width, height: height }); }
  243. }, bgVNode.attrs, 'fill', scope);
  244. }
  245. else {
  246. var _a = normalizeColor(backgroundColor), color = _a.color, opacity = _a.opacity;
  247. bgVNode.attrs.fill = color;
  248. opacity < 1 && (bgVNode.attrs['fill-opacity'] = opacity);
  249. }
  250. }
  251. return bgVNode;
  252. }
  253. export default SVGPainter;