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

package/build/prepareNightly.js

@@ -1,4 +1,6 @@
 const fs = require('fs');
+const { execSync } = require('child_process');
+
 const packageJsonPath = __dirname + '/../package.json';
 const nightlyPackageName = 'zrender-nightly';
 
@@ -33,6 +35,14 @@ function updateVersion(version) {
 
 const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
 packageJson.name = nightlyPackageName;
-packageJson.version = updateVersion(packageJson.version);
+const version = updateVersion(packageJson.version);
+
+fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf-8');
+
+// Update version in package.json and package-lock.json
+execSync(`npm version ${version} --git-tag-version=false`);
 
-fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf-8');
+const entryPath = __dirname + '/../src/zrender.ts';
+const entryFile = fs.readFileSync(entryPath, 'utf-8')
+    .replace(/export const version = '\S+'/, `export const version = '${version}'`);
+fs.writeFileSync(entryPath, entryFile, 'utf-8');

package/dist/zrender.js

@@ -4149,7 +4149,7 @@
     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') {
@@ -7196,7 +7196,7 @@
     function registerPainter(name, Ctor) {
         painterCtors[name] = Ctor;
     }
-    var version = '5.4.0';
+    var version = '5.5.0-dev.20221020';
 
     var STYLE_MAGIC_KEY = '__zr_style_' + Math.round((Math.random() * 10));
     var DEFAULT_COMMON_STYLE = {
@@ -14959,7 +14959,10 @@
                 if (clearColor && clearColor !== 'transparent') {
                     var clearColorGradientOrPattern = void 0;
                     if (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,
@@ -14967,6 +14970,8 @@
                                 height: height
                             });
                         clearColor.__canvasGradient = clearColorGradientOrPattern;
+                        clearColor.__width = width;
+                        clearColor.__height = height;
                     }
                     else if (isImagePatternObject(clearColor)) {
                         clearColor.scaleX = clearColor.scaleX || dpr;
@@ -16247,7 +16252,7 @@
             }
         };
     }
-    var buitinShapesDef = {
+    var builtinShapesDef = {
         circle: [createAttrsConvert(['cx', 'cy', 'r'])],
         polyline: [convertPolyShape, validatePolyShape],
         polygon: [convertPolyShape, validatePolyShape]
@@ -16264,7 +16269,7 @@
     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';
@@ -16504,9 +16509,12 @@
     }
     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;
@@ -16531,8 +16539,20 @@
                 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);
@@ -16540,7 +16560,7 @@
                     }
                 };
                 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) {
@@ -16564,7 +16584,30 @@
         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;
@@ -16916,7 +16959,6 @@
         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);
@@ -16924,22 +16966,8 @@
             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);
@@ -16968,14 +16996,6 @@
         };
         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;
@@ -17040,10 +17060,20 @@
                     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();
                 }
             }
         };
@@ -17071,13 +17101,13 @@
             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;
     }());
@@ -17087,6 +17117,36 @@
                 logError('In SVG mode painter not support method "' + 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;
     }
 
     registerPainter('canvas', CanvasPainter);