zrender-nightly 5.5.0-dev.20221018 → 5.5.0-dev.20221020

package/lib/canvas/Layer.js

@@ -246,7 +246,10 @@ var Layer = (function (_super) {
             if (clearColor && clearColor !== 'transparent') {
                 var clearColorGradientOrPattern = void 0;
                 if (util.isGradientObject(clearColor)) {
-                    clearColorGradientOrPattern = clearColor.__canvasGradient
+                    var shouldCache = clearColor.global || (clearColor.__width === width
+                        && clearColor.__height === height);
+                    clearColorGradientOrPattern = shouldCache
+                        && clearColor.__canvasGradient
                         || getCanvasGradient(ctx, clearColor, {
                             x: 0,
                             y: 0,
@@ -254,6 +257,8 @@ var Layer = (function (_super) {
                             height: height
                         });
                     clearColor.__canvasGradient = clearColorGradientOrPattern;
+                    clearColor.__width = width;
+                    clearColor.__height = height;
                 }
                 else if (util.isImagePatternObject(clearColor)) {
                     clearColor.scaleX = clearColor.scaleX || dpr;

package/lib/graphic/Gradient.d.ts

@@ -6,6 +6,8 @@ export interface GradientObject {
 }
 export interface InnerGradientObject extends GradientObject {
     __canvasGradient: CanvasGradient;
+    __width: number;
+    __height: number;
 }
 export interface GradientColorStop {
     offset: number;

package/lib/svg/Painter.d.ts

@@ -2,11 +2,14 @@ import Displayable from '../graphic/Displayable';
 import Storage from '../Storage';
 import { PainterBase } from '../PainterBase';
 import { SVGVNode, BrushScope } from './core';
+import { GradientObject } from '../graphic/Gradient';
+import { PatternObject } from '../graphic/Pattern';
 interface SVGPainterOption {
     width?: number;
     height?: number;
     ssr?: boolean;
 }
+declare type SVGPainterBackgroundColor = string | GradientObject | PatternObject;
 declare class SVGPainter implements PainterBase {
     type: string;
     storage: Storage;
@@ -41,7 +44,7 @@ declare class SVGPainter implements PainterBase {
         cssAnimation?: boolean;
         useViewBox?: boolean;
     }): string;
-    setBackgroundColor(backgroundColor: string): void;
+    setBackgroundColor(backgroundColor: SVGPainterBackgroundColor): void;
     getSvgRoot(): SVGElement;
     _paintList(list: Displayable[], scope: BrushScope, out?: SVGVNode[]): void;
     resize(width: number, height: number): void;

package/lib/svg/Painter.js

@@ -1,7 +1,7 @@
-import { brush, setClipPath } from './graphic.js';
+import { brush, setClipPath, setGradient, setPattern } from './graphic.js';
 import { createElement, createVNode, vNodeToString, getCssString, createBrushScope, createSVGVNode } from './core.js';
-import { normalizeColor, encodeBase64 } from './helper.js';
-import { extend, keys, logError, map, retrieve2 } from '../core/util.js';
+import { normalizeColor, encodeBase64, isGradient, isPattern } from './helper.js';
+import { extend, keys, logError, map, noop, retrieve2 } from '../core/util.js';
 import patch, { updateAttrs } from './patch.js';
 import { getSize } from '../canvas/helper.js';
 var svgId = 0;
@@ -59,7 +59,6 @@ var SVGPainter = (function () {
     SVGPainter.prototype.renderToVNode = function (opts) {
         opts = opts || {};
         var list = this.storage.getDisplayList(true);
-        var bgColor = this._backgroundColor;
         var width = this._width;
         var height = this._height;
         var scope = createBrushScope(this._id);
@@ -67,22 +66,8 @@ var SVGPainter = (function () {
         scope.willUpdate = opts.willUpdate;
         scope.compress = opts.compress;
         var children = [];
-        if (bgColor && bgColor !== 'none') {
-            var _a = normalizeColor(bgColor), color = _a.color, opacity = _a.opacity;
-            this._bgVNode = createVNode('rect', 'bg', {
-                width: width,
-                height: height,
-                x: '0',
-                y: '0',
-                id: '0',
-                fill: color,
-                'fill-opacity': opacity
-            });
-            children.push(this._bgVNode);
-        }
-        else {
-            this._bgVNode = null;
-        }
+        var bgVNode = this._bgVNode = createBackgroundVNode(width, height, this._backgroundColor, scope);
+        bgVNode && children.push(bgVNode);
         var mainVNode = !opts.compress
             ? (this._mainVNode = createVNode('g', 'main', {}, [])) : null;
         this._paintList(list, scope, mainVNode ? mainVNode.children : children);
@@ -111,14 +96,6 @@ var SVGPainter = (function () {
     };
     SVGPainter.prototype.setBackgroundColor = function (backgroundColor) {
         this._backgroundColor = backgroundColor;
-        var bgVNode = this._bgVNode;
-        if (bgVNode && bgVNode.elm) {
-            var _a = normalizeColor(backgroundColor), color = _a.color, opacity = _a.opacity;
-            bgVNode.elm.setAttribute('fill', color);
-            if (opacity < 1) {
-                bgVNode.elm.setAttribute('fill-opacity', opacity);
-            }
-        }
     };
     SVGPainter.prototype.getSvgRoot = function () {
         return this._mainVNode && this._mainVNode.elm;
@@ -183,10 +160,20 @@ var SVGPainter = (function () {
                 viewportStyle.width = width + 'px';
                 viewportStyle.height = height + 'px';
             }
-            var svgDom = this._svgDom;
-            if (svgDom) {
-                svgDom.setAttribute('width', width);
-                svgDom.setAttribute('height', height);
+            if (!isPattern(this._backgroundColor)) {
+                var svgDom = this._svgDom;
+                if (svgDom) {
+                    svgDom.setAttribute('width', width);
+                    svgDom.setAttribute('height', height);
+                }
+                var bgEl = this._bgVNode && this._bgVNode.elm;
+                if (bgEl) {
+                    bgEl.setAttribute('width', width);
+                    bgEl.setAttribute('height', height);
+                }
+            }
+            else {
+                this.refresh();
             }
         }
     };
@@ -214,13 +201,13 @@ var SVGPainter = (function () {
         this._oldVNode = null;
     };
     SVGPainter.prototype.toDataURL = function (base64) {
-        var str = encodeURIComponent(this.renderToString());
+        var str = this.renderToString();
         var prefix = 'data:image/svg+xml;';
         if (base64) {
             str = encodeBase64(str);
             return str && prefix + 'base64,' + str;
         }
-        return prefix + 'charset=UTF-8,' + str;
+        return prefix + 'charset=UTF-8,' + encodeURIComponent(str);
     };
     return SVGPainter;
 }());
@@ -231,4 +218,34 @@ function createMethodNotSupport(method) {
         }
     };
 }
+function createBackgroundVNode(width, height, backgroundColor, scope) {
+    var bgVNode;
+    if (backgroundColor && backgroundColor !== 'none') {
+        bgVNode = createVNode('rect', 'bg', {
+            width: width,
+            height: height,
+            x: '0',
+            y: '0',
+            id: '0'
+        });
+        if (isGradient(backgroundColor)) {
+            setGradient({ fill: backgroundColor }, bgVNode.attrs, 'fill', scope);
+        }
+        else if (isPattern(backgroundColor)) {
+            setPattern({
+                style: {
+                    fill: backgroundColor
+                },
+                dirty: noop,
+                getBoundingRect: function () { return ({ width: width, height: height }); }
+            }, bgVNode.attrs, 'fill', scope);
+        }
+        else {
+            var _a = normalizeColor(backgroundColor), color = _a.color, opacity = _a.opacity;
+            bgVNode.attrs.fill = color;
+            opacity < 1 && (bgVNode.attrs.fillOpacity = opacity);
+        }
+    }
+    return bgVNode;
+}
 export default SVGPainter;

package/lib/svg/graphic.d.ts

@@ -1,4 +1,4 @@
-import Path from '../graphic/Path';
+import Path, { PathStyleProps } from '../graphic/Path';
 import ZRImage from '../graphic/Image';
 import TSpan from '../graphic/TSpan';
 import { SVGVNodeAttrs, SVGVNode, BrushScope } from './core';
@@ -7,4 +7,6 @@ export declare function brushSVGPath(el: Path, scope: BrushScope): SVGVNode;
 export declare function brushSVGImage(el: ZRImage, scope: BrushScope): SVGVNode;
 export declare function brushSVGTSpan(el: TSpan, scope: BrushScope): SVGVNode;
 export declare function brush(el: Displayable, scope: BrushScope): SVGVNode;
+export declare function setGradient(style: PathStyleProps, attrs: SVGVNodeAttrs, target: 'fill' | 'stroke', scope: BrushScope): void;
+export declare function setPattern(el: Displayable, attrs: SVGVNodeAttrs, target: 'fill' | 'stroke', scope: BrushScope): void;
 export declare function setClipPath(clipPath: Path, attrs: SVGVNodeAttrs, scope: BrushScope): void;

package/lib/svg/graphic.js

@@ -75,7 +75,7 @@ function createAttrsConvert(desc) {
         }
     };
 }
-var buitinShapesDef = {
+var builtinShapesDef = {
     circle: [createAttrsConvert(['cx', 'cy', 'r'])],
     polyline: [convertPolyShape, validatePolyShape],
     polygon: [convertPolyShape, validatePolyShape]
@@ -92,7 +92,7 @@ function hasShapeAnimation(el) {
 export function brushSVGPath(el, scope) {
     var style = el.style;
     var shape = el.shape;
-    var builtinShpDef = buitinShapesDef[el.type];
+    var builtinShpDef = builtinShapesDef[el.type];
     var attrs = {};
     var needsAnimate = scope.animation;
     var svgElType = 'path';
@@ -277,7 +277,7 @@ function setShadow(el, attrs, scope) {
         attrs.filter = getIdURL(shadowId);
     }
 }
-function setGradient(style, attrs, target, scope) {
+export function setGradient(style, attrs, target, scope) {
     var val = style[target];
     var gradientTag;
     var gradientAttrs = {
@@ -331,11 +331,14 @@ function setGradient(style, attrs, target, scope) {
     }
     attrs[target] = getIdURL(gradientId);
 }
-function setPattern(el, attrs, target, scope) {
+export function setPattern(el, attrs, target, scope) {
     var val = el.style[target];
-    var patternAttrs = {
-        'patternUnits': 'userSpaceOnUse'
-    };
+    var boundingRect = el.getBoundingRect();
+    var patternAttrs = {};
+    var repeat = val.repeat;
+    var noRepeat = repeat === 'no-repeat';
+    var repeatX = repeat === 'repeat-x';
+    var repeatY = repeat === 'repeat-y';
     var child;
     if (isImagePattern(val)) {
         var imageWidth_1 = val.imageWidth;
@@ -360,8 +363,20 @@ function setPattern(el, attrs, target, scope) {
             var setSizeToVNode_1 = function (vNode, img) {
                 if (vNode) {
                     var svgEl = vNode.elm;
-                    var width = (vNode.attrs.width = imageWidth_1 || img.width);
-                    var height = (vNode.attrs.height = imageHeight_1 || img.height);
+                    var width = imageWidth_1 || img.width;
+                    var height = imageHeight_1 || img.height;
+                    if (vNode.tag === 'pattern') {
+                        if (repeatX) {
+                            height = 1;
+                            width /= boundingRect.width;
+                        }
+                        else if (repeatY) {
+                            width = 1;
+                            height /= boundingRect.height;
+                        }
+                    }
+                    vNode.attrs.width = width;
+                    vNode.attrs.height = height;
                     if (svgEl) {
                         svgEl.setAttribute('width', width);
                         svgEl.setAttribute('height', height);
@@ -369,7 +384,7 @@ function setPattern(el, attrs, target, scope) {
                 }
             };
             var createdImage = createOrUpdateImage(imageSrc, null, el, function (img) {
-                setSizeToVNode_1(patternVNode, img);
+                noRepeat || setSizeToVNode_1(patternVNode, img);
                 setSizeToVNode_1(child, img);
             });
             if (createdImage && createdImage.width && createdImage.height) {
@@ -393,7 +408,30 @@ function setPattern(el, attrs, target, scope) {
     if (!child) {
         return;
     }
-    patternAttrs.patternTransform = getSRTTransformString(val);
+    var patternWidth;
+    var patternHeight;
+    if (noRepeat) {
+        patternWidth = patternHeight = 1;
+    }
+    else if (repeatX) {
+        patternHeight = 1;
+        patternWidth = patternAttrs.width / boundingRect.width;
+    }
+    else if (repeatY) {
+        patternWidth = 1;
+        patternHeight = patternAttrs.height / boundingRect.height;
+    }
+    else {
+        patternAttrs.patternUnits = 'userSpaceOnUse';
+    }
+    if (patternWidth != null && !isNaN(patternWidth)) {
+        patternAttrs.width = patternWidth;
+    }
+    if (patternHeight != null && !isNaN(patternHeight)) {
+        patternAttrs.height = patternHeight;
+    }
+    var patternTransform = getSRTTransformString(val);
+    patternTransform && (patternAttrs.patternTransform = patternTransform);
     var patternVNode = createVNode('pattern', '', patternAttrs, [child]);
     var patternKey = vNodeToString(patternVNode);
     var patternCache = scope.patternCache;

package/lib/svg/helper.js

@@ -136,7 +136,7 @@ export function getSRTTransformString(transform) {
 export var encodeBase64 = (function () {
     if (env.hasGlobalWindow && isFunction(window.btoa)) {
         return function (str) {
-            return window.btoa(unescape(str));
+            return window.btoa(unescape(encodeURIComponent(str)));
         };
     }
     if (typeof Buffer !== 'undefined') {

package/lib/zrender.d.ts

@@ -84,7 +84,7 @@ export declare function dispose(zr: ZRender): void;
 export declare function disposeAll(): void;
 export declare function getInstance(id: number): ZRender;
 export declare function registerPainter(name: string, Ctor: PainterBaseCtor): void;
-export declare const version = "5.4.0";
+export declare const version = "5.5.0-dev.20221020";
 export interface ZRenderType extends ZRender {
 }
 export {};

package/lib/zrender.js

@@ -261,5 +261,5 @@ export function getInstance(id) {
 export function registerPainter(name, Ctor) {
     painterCtors[name] = Ctor;
 }
-export var version = '5.4.0';
+export var version = '5.5.0-dev.20221020';
 ;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zrender-nightly",
-  "version": "5.5.0-dev.20221018",
+  "version": "5.5.0-dev.20221020",
   "description": "A lightweight graphic library providing 2d draw for Apache ECharts",
   "keywords": [
     "canvas",
@@ -58,4 +58,4 @@
     "typescript": "^4.4.3",
     "uglify-js": "^3.10.0"
   }
-}
+}

package/src/canvas/Layer.ts

@@ -422,8 +422,14 @@ export default class Layer extends Eventful {
                 let clearColorGradientOrPattern;
                 // Gradient
                 if (util.isGradientObject(clearColor)) {
+                    // shouldn't cache when clearColor is not global and size changed
+                    const shouldCache = clearColor.global || (
+                        (clearColor as InnerGradientObject).__width === width
+                        && (clearColor as InnerGradientObject).__height === height
+                    );
                     // Cache canvas gradient
-                    clearColorGradientOrPattern = (clearColor as InnerGradientObject).__canvasGradient
+                    clearColorGradientOrPattern = shouldCache
+                        && (clearColor as InnerGradientObject).__canvasGradient
                         || getCanvasGradient(ctx, clearColor, {
                             x: 0,
                             y: 0,
@@ -432,6 +438,8 @@ export default class Layer extends Eventful {
                         });
 
                     (clearColor as InnerGradientObject).__canvasGradient = clearColorGradientOrPattern;
+                    (clearColor as InnerGradientObject).__width = width;
+                    (clearColor as InnerGradientObject).__height = height;
                 }
                 // Pattern
                 else if (util.isImagePatternObject(clearColor)) {

package/src/graphic/Gradient.ts

@@ -12,6 +12,8 @@ export interface GradientObject {
 
 export interface InnerGradientObject extends GradientObject {
     __canvasGradient: CanvasGradient
+    __width: number
+    __height: number
 }
 
 export interface GradientColorStop {

package/src/svg/Painter.ts

@@ -3,7 +3,10 @@
  */
 
 import {
-    brush, setClipPath
+    brush,
+    setClipPath,
+    setGradient,
+    setPattern
 } from './graphic';
 import Displayable from '../graphic/Displayable';
 import Storage from '../Storage';
@@ -19,11 +22,13 @@ import {
     createBrushScope,
     createSVGVNode
 } from './core';
-import { normalizeColor, encodeBase64 } from './helper';
-import { extend, keys, logError, map, retrieve2 } from '../core/util';
+import { normalizeColor, encodeBase64, isGradient, isPattern } from './helper';
+import { extend, keys, logError, map, noop, retrieve2 } from '../core/util';
 import Path from '../graphic/Path';
 import patch, { updateAttrs } from './patch';
 import { getSize } from '../canvas/helper';
+import { GradientObject } from '../graphic/Gradient';
+import { PatternObject } from '../graphic/Pattern';
 
 let svgId = 0;
 
@@ -33,6 +38,8 @@ interface SVGPainterOption {
     ssr?: boolean
 }
 
+type SVGPainterBackgroundColor = string | GradientObject | PatternObject;
+
 class SVGPainter implements PainterBase {
 
     type = 'svg'
@@ -53,7 +60,7 @@ class SVGPainter implements PainterBase {
     private _width: number
     private _height: number
 
-    private _backgroundColor: string
+    private _backgroundColor: SVGPainterBackgroundColor
 
     private _id: string
 
@@ -126,7 +133,6 @@ class SVGPainter implements PainterBase {
         opts = opts || {};
 
         const list = this.storage.getDisplayList(true);
-        const bgColor = this._backgroundColor;
         const width = this._width;
         const height = this._height;
 
@@ -137,26 +143,8 @@ class SVGPainter implements PainterBase {
 
         const children: SVGVNode[] = [];
 
-        if (bgColor && bgColor !== 'none') {
-            const { color, opacity } = normalizeColor(bgColor);
-            this._bgVNode = createVNode(
-                'rect',
-                'bg',
-                {
-                    width: width,
-                    height: height,
-                    x: '0',
-                    y: '0',
-                    id: '0',
-                    fill: color,
-                    'fill-opacity': opacity
-                }
-            );
-            children.push(this._bgVNode);
-        }
-        else {
-            this._bgVNode = null;
-        }
+        const bgVNode = this._bgVNode = createBackgroundVNode(width, height, this._backgroundColor, scope);
+        bgVNode && children.push(bgVNode);
 
         // Ignore the root g if wan't the output to be more tight.
         const mainVNode = !opts.compress
@@ -201,16 +189,8 @@ class SVGPainter implements PainterBase {
         }), { newline: true });
     }
 
-    setBackgroundColor(backgroundColor: string) {
+    setBackgroundColor(backgroundColor: SVGPainterBackgroundColor) {
         this._backgroundColor = backgroundColor;
-        const bgVNode = this._bgVNode;
-        if (bgVNode && bgVNode.elm) {
-            const { color, opacity } = normalizeColor(backgroundColor);
-            (bgVNode.elm as SVGElement).setAttribute('fill', color);
-            if (opacity < 1) {
-                (bgVNode.elm as SVGElement).setAttribute('fill-opacity', opacity as any);
-            }
-        }
     }
 
     getSvgRoot() {
@@ -302,11 +282,23 @@ class SVGPainter implements PainterBase {
                 viewportStyle.height = height + 'px';
             }
 
-            const svgDom = this._svgDom;
-            if (svgDom) {
-                // Set width by 'svgRoot.width = width' is invalid
-                svgDom.setAttribute('width', width as any);
-                svgDom.setAttribute('height', height as any);
+            if (!isPattern(this._backgroundColor)) {
+                const svgDom = this._svgDom;
+                if (svgDom) {
+                    // Set width by 'svgRoot.width = width' is invalid
+                    svgDom.setAttribute('width', width as any);
+                    svgDom.setAttribute('height', height as any);
+                }
+
+                const bgEl = this._bgVNode && this._bgVNode.elm as SVGElement;
+                if (bgEl) {
+                    bgEl.setAttribute('width', width as any);
+                    bgEl.setAttribute('height', height as any);
+                }
+            }
+            else {
+                // pattern backgroundColor requires a full refresh
+                this.refresh();
             }
         }
     }
@@ -344,13 +336,13 @@ class SVGPainter implements PainterBase {
         this._oldVNode = null;
     }
     toDataURL(base64?: boolean) {
-        let str = encodeURIComponent(this.renderToString());
+        let str = this.renderToString();
         const prefix = 'data:image/svg+xml;';
         if (base64) {
             str = encodeBase64(str);
             return str && prefix + 'base64,' + str;
         }
-        return prefix + 'charset=UTF-8,' + str;
+        return prefix + 'charset=UTF-8,' + encodeURIComponent(str);
     }
 
     refreshHover = createMethodNotSupport('refreshHover') as PainterBase['refreshHover'];
@@ -367,5 +359,44 @@ function createMethodNotSupport(method: string): any {
     };
 }
 
+function createBackgroundVNode(
+    width: number,
+    height: number,
+    backgroundColor: SVGPainterBackgroundColor,
+    scope: BrushScope
+) {
+    let bgVNode;
+    if (backgroundColor && backgroundColor !== 'none') {
+        bgVNode = createVNode(
+            'rect',
+            'bg',
+            {
+                width,
+                height,
+                x: '0',
+                y: '0',
+                id: '0'
+            }
+        );
+        if (isGradient(backgroundColor)) {
+            setGradient({ fill: backgroundColor as any }, bgVNode.attrs, 'fill', scope);
+        }
+        else if (isPattern(backgroundColor)) {
+            setPattern({
+                style: {
+                    fill: backgroundColor
+                },
+                dirty: noop,
+                getBoundingRect: () => ({ width, height })
+            } as any, bgVNode.attrs, 'fill', scope);
+        }
+        else {
+            const { color, opacity } = normalizeColor(backgroundColor);
+            bgVNode.attrs.fill = color;
+            opacity < 1 && (bgVNode.attrs.fillOpacity = opacity);
+        }
+    }
+    return bgVNode;
+}
 
 export default SVGPainter;