123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292 |
- import { createElement, SVGNS, XLINKNS, XMLNS } from '../svg/core.js';
- import { normalizeColor } from '../svg/helper.js';
- import * as util from '../core/util.js';
- import Path from '../graphic/Path.js';
- import ZRImage from '../graphic/Image.js';
- import TSpan from '../graphic/TSpan.js';
- import arrayDiff from '../core/arrayDiff.js';
- import GradientManager from './helper/GradientManager.js';
- import PatternManager from './helper/PatternManager.js';
- import ClippathManager, { hasClipPath } from './helper/ClippathManager.js';
- import ShadowManager from './helper/ShadowManager.js';
- import { path as svgPath, image as svgImage, text as svgText } from './graphic.js';
- import { getSize } from '../canvas/helper.js';
- function getSvgProxy(el) {
- if (el instanceof Path) {
- return svgPath;
- }
- else if (el instanceof ZRImage) {
- return svgImage;
- }
- else if (el instanceof TSpan) {
- return svgText;
- }
- else {
- return svgPath;
- }
- }
- function checkParentAvailable(parent, child) {
- return child && parent && child.parentNode !== parent;
- }
- function insertAfter(parent, child, prevSibling) {
- if (checkParentAvailable(parent, child) && prevSibling) {
- var nextSibling = prevSibling.nextSibling;
- nextSibling ? parent.insertBefore(child, nextSibling)
- : parent.appendChild(child);
- }
- }
- function prepend(parent, child) {
- if (checkParentAvailable(parent, child)) {
- var firstChild = parent.firstChild;
- firstChild ? parent.insertBefore(child, firstChild)
- : parent.appendChild(child);
- }
- }
- function remove(parent, child) {
- if (child && parent && child.parentNode === parent) {
- parent.removeChild(child);
- }
- }
- function removeFromMyParent(child) {
- if (child && child.parentNode) {
- child.parentNode.removeChild(child);
- }
- }
- function getSvgElement(displayable) {
- return displayable.__svgEl;
- }
- var SVGPainter = (function () {
- function SVGPainter(root, storage, opts, zrId) {
- this.type = 'svg';
- this.refreshHover = createMethodNotSupport('refreshHover');
- this.configLayer = createMethodNotSupport('configLayer');
- this.root = root;
- this.storage = storage;
- this._opts = opts = util.extend({}, opts || {});
- var svgDom = createElement('svg');
- svgDom.setAttributeNS(XMLNS, 'xmlns', SVGNS);
- svgDom.setAttributeNS(XMLNS, 'xmlns:xlink', XLINKNS);
- svgDom.setAttribute('version', '1.1');
- svgDom.setAttribute('baseProfile', 'full');
- svgDom.style.cssText = 'user-select:none;position:absolute;left:0;top:0;';
- var bgRoot = createElement('g');
- svgDom.appendChild(bgRoot);
- var svgRoot = createElement('g');
- svgDom.appendChild(svgRoot);
- this._gradientManager = new GradientManager(zrId, svgRoot);
- this._patternManager = new PatternManager(zrId, svgRoot);
- this._clipPathManager = new ClippathManager(zrId, svgRoot);
- this._shadowManager = new ShadowManager(zrId, svgRoot);
- var viewport = document.createElement('div');
- viewport.style.cssText = 'overflow:hidden;position:relative';
- this._svgDom = svgDom;
- this._svgRoot = svgRoot;
- this._backgroundRoot = bgRoot;
- this._viewport = viewport;
- root.appendChild(viewport);
- viewport.appendChild(svgDom);
- this.resize(opts.width, opts.height);
- this._visibleList = [];
- }
- SVGPainter.prototype.getType = function () {
- return 'svg';
- };
- SVGPainter.prototype.getViewportRoot = function () {
- return this._viewport;
- };
- SVGPainter.prototype.getSvgDom = function () {
- return this._svgDom;
- };
- SVGPainter.prototype.getSvgRoot = function () {
- return this._svgRoot;
- };
- SVGPainter.prototype.getViewportRootOffset = function () {
- var viewportRoot = this.getViewportRoot();
- if (viewportRoot) {
- return {
- offsetLeft: viewportRoot.offsetLeft || 0,
- offsetTop: viewportRoot.offsetTop || 0
- };
- }
- };
- SVGPainter.prototype.refresh = function () {
- var list = this.storage.getDisplayList(true);
- this._paintList(list);
- };
- SVGPainter.prototype.setBackgroundColor = function (backgroundColor) {
- if (this._backgroundRoot && this._backgroundNode) {
- this._backgroundRoot.removeChild(this._backgroundNode);
- }
- var bgNode = createElement('rect');
- bgNode.setAttribute('width', this.getWidth());
- bgNode.setAttribute('height', this.getHeight());
- bgNode.setAttribute('x', 0);
- bgNode.setAttribute('y', 0);
- bgNode.setAttribute('id', 0);
- var _a = normalizeColor(backgroundColor), color = _a.color, opacity = _a.opacity;
- bgNode.setAttribute('fill', color);
- bgNode.setAttribute('fill-opacity', opacity);
- this._backgroundRoot.appendChild(bgNode);
- this._backgroundNode = bgNode;
- };
- SVGPainter.prototype.createSVGElement = function (tag) {
- return createElement(tag);
- };
- SVGPainter.prototype.paintOne = function (el) {
- var svgProxy = getSvgProxy(el);
- svgProxy && svgProxy.brush(el);
- return getSvgElement(el);
- };
- SVGPainter.prototype._paintList = function (list) {
- var gradientManager = this._gradientManager;
- var patternManager = this._patternManager;
- var clipPathManager = this._clipPathManager;
- var shadowManager = this._shadowManager;
- gradientManager.markAllUnused();
- patternManager.markAllUnused();
- clipPathManager.markAllUnused();
- shadowManager.markAllUnused();
- var svgRoot = this._svgRoot;
- var visibleList = this._visibleList;
- var listLen = list.length;
- var newVisibleList = [];
- for (var i = 0; i < listLen; i++) {
- var displayable = list[i];
- var svgProxy = getSvgProxy(displayable);
- var svgElement = getSvgElement(displayable);
- if (!displayable.invisible) {
- if (displayable.__dirty || !svgElement) {
- svgProxy && svgProxy.brush(displayable);
- svgElement = getSvgElement(displayable);
- if (svgElement && displayable.style) {
- gradientManager.update(displayable.style.fill);
- gradientManager.update(displayable.style.stroke);
- patternManager.update(displayable.style.fill);
- patternManager.update(displayable.style.stroke);
- shadowManager.update(svgElement, displayable);
- }
- displayable.__dirty = 0;
- }
- if (svgElement) {
- newVisibleList.push(displayable);
- }
- }
- }
- var diff = arrayDiff(visibleList, newVisibleList);
- var prevSvgElement;
- var topPrevSvgElement;
- for (var i = 0; i < diff.length; i++) {
- var item = diff[i];
- if (item.removed) {
- for (var k = 0; k < item.count; k++) {
- var displayable = visibleList[item.indices[k]];
- var svgElement = getSvgElement(displayable);
- hasClipPath(displayable) ? removeFromMyParent(svgElement)
- : remove(svgRoot, svgElement);
- }
- }
- }
- var prevDisplayable;
- var currentClipGroup;
- for (var i = 0; i < diff.length; i++) {
- var item = diff[i];
- if (item.removed) {
- continue;
- }
- for (var k = 0; k < item.count; k++) {
- var displayable = newVisibleList[item.indices[k]];
- var clipGroup = clipPathManager.update(displayable, prevDisplayable);
- if (clipGroup !== currentClipGroup) {
- prevSvgElement = topPrevSvgElement;
- if (clipGroup) {
- prevSvgElement ? insertAfter(svgRoot, clipGroup, prevSvgElement)
- : prepend(svgRoot, clipGroup);
- topPrevSvgElement = clipGroup;
- prevSvgElement = null;
- }
- currentClipGroup = clipGroup;
- }
- var svgElement = getSvgElement(displayable);
- prevSvgElement
- ? insertAfter(currentClipGroup || svgRoot, svgElement, prevSvgElement)
- : prepend(currentClipGroup || svgRoot, svgElement);
- prevSvgElement = svgElement || prevSvgElement;
- if (!currentClipGroup) {
- topPrevSvgElement = prevSvgElement;
- }
- gradientManager.markUsed(displayable);
- gradientManager.addWithoutUpdate(svgElement, displayable);
- patternManager.markUsed(displayable);
- patternManager.addWithoutUpdate(svgElement, displayable);
- clipPathManager.markUsed(displayable);
- prevDisplayable = displayable;
- }
- }
- gradientManager.removeUnused();
- patternManager.removeUnused();
- clipPathManager.removeUnused();
- shadowManager.removeUnused();
- this._visibleList = newVisibleList;
- };
- SVGPainter.prototype.resize = function (width, height) {
- var viewport = this._viewport;
- viewport.style.display = 'none';
- var opts = this._opts;
- width != null && (opts.width = width);
- height != null && (opts.height = height);
- width = getSize(this.root, 0, opts);
- height = getSize(this.root, 1, opts);
- viewport.style.display = '';
- if (this._width !== width || this._height !== height) {
- this._width = width;
- this._height = height;
- var viewportStyle = viewport.style;
- viewportStyle.width = width + 'px';
- viewportStyle.height = height + 'px';
- var svgRoot = this._svgDom;
- svgRoot.setAttribute('width', width + '');
- svgRoot.setAttribute('height', height + '');
- }
- if (this._backgroundNode) {
- this._backgroundNode.setAttribute('width', width);
- this._backgroundNode.setAttribute('height', height);
- }
- };
- SVGPainter.prototype.getWidth = function () {
- return this._width;
- };
- SVGPainter.prototype.getHeight = function () {
- return this._height;
- };
- SVGPainter.prototype.dispose = function () {
- this.root.innerHTML = '';
- this._svgRoot =
- this._backgroundRoot =
- this._svgDom =
- this._backgroundNode =
- this._viewport = this.storage = null;
- };
- SVGPainter.prototype.clear = function () {
- var viewportNode = this._viewport;
- if (viewportNode && viewportNode.parentNode) {
- viewportNode.parentNode.removeChild(viewportNode);
- }
- };
- SVGPainter.prototype.toDataURL = function () {
- this.refresh();
- var svgDom = this._svgDom;
- var outerHTML = svgDom.outerHTML
- || (svgDom.parentNode && svgDom.parentNode.innerHTML);
- var html = encodeURIComponent(outerHTML.replace(/></g, '>\n\r<'));
- return 'data:image/svg+xml;charset=UTF-8,' + html;
- };
- return SVGPainter;
- }());
- function createMethodNotSupport(method) {
- return function () {
- if (process.env.NODE_ENV !== 'production') {
- util.logError('In SVG mode painter not support method "' + method + '"');
- }
- };
- }
- export default SVGPainter;
|