Painter.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. import { brush, setClipPath } from './graphic.js';
  2. import { createElement, createVNode, vNodeToString, getCssString, createBrushScope, createSVGVNode } from './core.js';
  3. import { normalizeColor, encodeBase64 } from './helper.js';
  4. import { extend, keys, logError, map, 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 bgColor = this._backgroundColor;
  63. var width = this._width;
  64. var height = this._height;
  65. var scope = createBrushScope(this._id);
  66. scope.animation = opts.animation;
  67. scope.willUpdate = opts.willUpdate;
  68. scope.compress = opts.compress;
  69. var children = [];
  70. if (bgColor && bgColor !== 'none') {
  71. var _a = normalizeColor(bgColor), color = _a.color, opacity = _a.opacity;
  72. this._bgVNode = createVNode('rect', 'bg', {
  73. width: width,
  74. height: height,
  75. x: '0',
  76. y: '0',
  77. id: '0',
  78. fill: color,
  79. 'fill-opacity': opacity
  80. });
  81. children.push(this._bgVNode);
  82. }
  83. else {
  84. this._bgVNode = null;
  85. }
  86. var mainVNode = !opts.compress
  87. ? (this._mainVNode = createVNode('g', 'main', {}, [])) : null;
  88. this._paintList(list, scope, mainVNode ? mainVNode.children : children);
  89. mainVNode && children.push(mainVNode);
  90. var defs = map(keys(scope.defs), function (id) { return scope.defs[id]; });
  91. if (defs.length) {
  92. children.push(createVNode('defs', 'defs', {}, defs));
  93. }
  94. if (opts.animation) {
  95. var animationCssStr = getCssString(scope.cssNodes, scope.cssAnims, { newline: true });
  96. if (animationCssStr) {
  97. var styleNode = createVNode('style', 'stl', {}, [], animationCssStr);
  98. children.push(styleNode);
  99. }
  100. }
  101. return createSVGVNode(width, height, children, opts.useViewBox);
  102. };
  103. SVGPainter.prototype.renderToString = function (opts) {
  104. opts = opts || {};
  105. return vNodeToString(this.renderToVNode({
  106. animation: retrieve2(opts.cssAnimation, true),
  107. willUpdate: false,
  108. compress: true,
  109. useViewBox: retrieve2(opts.useViewBox, true)
  110. }), { newline: true });
  111. };
  112. SVGPainter.prototype.setBackgroundColor = function (backgroundColor) {
  113. this._backgroundColor = backgroundColor;
  114. var bgVNode = this._bgVNode;
  115. if (bgVNode && bgVNode.elm) {
  116. var _a = normalizeColor(backgroundColor), color = _a.color, opacity = _a.opacity;
  117. bgVNode.elm.setAttribute('fill', color);
  118. if (opacity < 1) {
  119. bgVNode.elm.setAttribute('fill-opacity', opacity);
  120. }
  121. }
  122. };
  123. SVGPainter.prototype.getSvgRoot = function () {
  124. return this._mainVNode && this._mainVNode.elm;
  125. };
  126. SVGPainter.prototype._paintList = function (list, scope, out) {
  127. var listLen = list.length;
  128. var clipPathsGroupsStack = [];
  129. var clipPathsGroupsStackDepth = 0;
  130. var currentClipPathGroup;
  131. var prevClipPaths;
  132. var clipGroupNodeIdx = 0;
  133. for (var i = 0; i < listLen; i++) {
  134. var displayable = list[i];
  135. if (!displayable.invisible) {
  136. var clipPaths = displayable.__clipPaths;
  137. var len = clipPaths && clipPaths.length || 0;
  138. var prevLen = prevClipPaths && prevClipPaths.length || 0;
  139. var lca = void 0;
  140. for (lca = Math.max(len - 1, prevLen - 1); lca >= 0; lca--) {
  141. if (clipPaths && prevClipPaths
  142. && clipPaths[lca] === prevClipPaths[lca]) {
  143. break;
  144. }
  145. }
  146. for (var i_1 = prevLen - 1; i_1 > lca; i_1--) {
  147. clipPathsGroupsStackDepth--;
  148. currentClipPathGroup = clipPathsGroupsStack[clipPathsGroupsStackDepth - 1];
  149. }
  150. for (var i_2 = lca + 1; i_2 < len; i_2++) {
  151. var groupAttrs = {};
  152. setClipPath(clipPaths[i_2], groupAttrs, scope);
  153. var g = createVNode('g', 'clip-g-' + clipGroupNodeIdx++, groupAttrs, []);
  154. (currentClipPathGroup ? currentClipPathGroup.children : out).push(g);
  155. clipPathsGroupsStack[clipPathsGroupsStackDepth++] = g;
  156. currentClipPathGroup = g;
  157. }
  158. prevClipPaths = clipPaths;
  159. var ret = brush(displayable, scope);
  160. if (ret) {
  161. (currentClipPathGroup ? currentClipPathGroup.children : out).push(ret);
  162. }
  163. }
  164. }
  165. };
  166. SVGPainter.prototype.resize = function (width, height) {
  167. var opts = this._opts;
  168. var root = this.root;
  169. var viewport = this._viewport;
  170. width != null && (opts.width = width);
  171. height != null && (opts.height = height);
  172. if (root && viewport) {
  173. viewport.style.display = 'none';
  174. width = getSize(root, 0, opts);
  175. height = getSize(root, 1, opts);
  176. viewport.style.display = '';
  177. }
  178. if (this._width !== width || this._height !== height) {
  179. this._width = width;
  180. this._height = height;
  181. if (viewport) {
  182. var viewportStyle = viewport.style;
  183. viewportStyle.width = width + 'px';
  184. viewportStyle.height = height + 'px';
  185. }
  186. var svgDom = this._svgDom;
  187. if (svgDom) {
  188. svgDom.setAttribute('width', width);
  189. svgDom.setAttribute('height', height);
  190. }
  191. }
  192. };
  193. SVGPainter.prototype.getWidth = function () {
  194. return this._width;
  195. };
  196. SVGPainter.prototype.getHeight = function () {
  197. return this._height;
  198. };
  199. SVGPainter.prototype.dispose = function () {
  200. if (this.root) {
  201. this.root.innerHTML = '';
  202. }
  203. this._svgDom =
  204. this._viewport =
  205. this.storage =
  206. this._oldVNode =
  207. this._bgVNode =
  208. this._mainVNode = null;
  209. };
  210. SVGPainter.prototype.clear = function () {
  211. if (this._svgDom) {
  212. this._svgDom.innerHTML = null;
  213. }
  214. this._oldVNode = null;
  215. };
  216. SVGPainter.prototype.toDataURL = function (base64) {
  217. var str = encodeURIComponent(this.renderToString());
  218. var prefix = 'data:image/svg+xml;';
  219. if (base64) {
  220. str = encodeBase64(str);
  221. return str && prefix + 'base64,' + str;
  222. }
  223. return prefix + 'charset=UTF-8,' + str;
  224. };
  225. return SVGPainter;
  226. }());
  227. function createMethodNotSupport(method) {
  228. return function () {
  229. if (process.env.NODE_ENV !== 'production') {
  230. logError('In SVG mode painter not support method "' + method + '"');
  231. }
  232. };
  233. }
  234. export default SVGPainter;