leafer-ui 1.9.3 → 1.9.5

package/dist/web.js

@@ -49,7 +49,7 @@ var LeaferUI = function(exports) {
         return value === undefined;
     }
     function isNull(value) {
-        return value === undefined || value === null;
+        return value == null;
     }
     function isString(value) {
         return typeof value === "string";
@@ -119,6 +119,9 @@ var LeaferUI = function(exports) {
             const {path: path} = this;
             return path && path.length === 6 && path[0] === 1;
         }
+        get __usePathBox() {
+            return this.__pathInputed;
+        }
         get __blendMode() {
             if (this.eraser && this.eraser !== "path") return "destination-out";
             const {blendMode: blendMode} = this;
@@ -285,6 +288,9 @@ var LeaferUI = function(exports) {
             num = round$3(num * a) / a;
             return num === -0 ? 0 : num;
         },
+        sign(num) {
+            return num < 0 ? -1 : 1;
+        },
         getScaleData(scale, size, originSize, scaleData) {
             if (!scaleData) scaleData = {};
             if (size) {
@@ -1077,10 +1083,10 @@ var LeaferUI = function(exports) {
             toPoint$5(align, box, to, onlyBoxSize, content, onlyContentSize);
         }
     };
-    const {tempPointBounds: tempPointBounds$1, setPoint: setPoint$2, addPoint: addPoint$2, toBounds: toBounds$3} = TwoPointBoundsHelper;
+    const {tempPointBounds: tempPointBounds$1, setPoint: setPoint$2, addPoint: addPoint$2, toBounds: toBounds$2} = TwoPointBoundsHelper;
     const {toOuterPoint: toOuterPoint$2} = MatrixHelper;
     const {float: float, fourNumber: fourNumber} = MathHelper;
-    const {floor: floor$2, ceil: ceil$1} = Math;
+    const {floor: floor$2, ceil: ceil$2} = Math;
     let right$1, bottom$1, boundsRight, boundsBottom;
     const point = {};
     const toPoint$4 = {};
@@ -1204,7 +1210,7 @@ var LeaferUI = function(exports) {
                 point.x = t.x;
                 toOuterPoint$2(matrix, point, toPoint$4);
                 addPoint$2(tempPointBounds$1, toPoint$4.x, toPoint$4.y);
-                toBounds$3(tempPointBounds$1, to);
+                toBounds$2(tempPointBounds$1, to);
             }
         },
         toInnerOf(t, matrix, to) {
@@ -1242,8 +1248,8 @@ var LeaferUI = function(exports) {
             const {x: x, y: y} = t;
             t.x = floor$2(t.x);
             t.y = floor$2(t.y);
-            t.width = x > t.x ? ceil$1(t.width + x - t.x) : ceil$1(t.width);
-            t.height = y > t.y ? ceil$1(t.height + y - t.y) : ceil$1(t.height);
+            t.width = x > t.x ? ceil$2(t.width + x - t.x) : ceil$2(t.width);
+            t.height = y > t.y ? ceil$2(t.height + y - t.y) : ceil$2(t.height);
         },
         unsign(t) {
             if (t.width < 0) {
@@ -1303,7 +1309,7 @@ var LeaferUI = function(exports) {
         },
         setPoints(t, points) {
             points.forEach((point, index) => index === 0 ? setPoint$2(tempPointBounds$1, point.x, point.y) : addPoint$2(tempPointBounds$1, point.x, point.y));
-            toBounds$3(tempPointBounds$1, t);
+            toBounds$2(tempPointBounds$1, t);
         },
         setPoint(t, point) {
             B.set(t, point.x, point.y);
@@ -2060,15 +2066,15 @@ var LeaferUI = function(exports) {
             DataHelper.copyAttrs(s, size, canvasSizeAttrs);
             canvasSizeAttrs.forEach(key => s[key] || (s[key] = 1));
             this.bounds = new Bounds(0, 0, this.width, this.height);
-            if (this.context && !this.unreal) {
-                this.updateViewSize();
-                this.smooth = this.config.smooth;
-            }
+            this.updateViewSize();
             this.updateClientBounds();
-            if (this.context && !this.unreal && takeCanvas) {
-                this.clearWorld(takeCanvas.bounds);
-                this.copyWorld(takeCanvas);
-                takeCanvas.recycle();
+            if (this.context) {
+                this.smooth = this.config.smooth;
+                if (!this.unreal && takeCanvas) {
+                    this.clearWorld(takeCanvas.bounds);
+                    this.copyWorld(takeCanvas);
+                    takeCanvas.recycle();
+                }
             }
         }
         updateViewSize() {}
@@ -2369,7 +2375,7 @@ var LeaferUI = function(exports) {
             data[0] ? drawer.arcTo(x, y, right, y, data[0]) : drawer.lineTo(x, y);
         }
     };
-    const {sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil, abs: abs$2, PI: PI$2, sqrt: sqrt$1, pow: pow} = Math;
+    const {sin: sin$3, cos: cos$3, hypot: hypot, atan2: atan2$1, ceil: ceil$1, abs: abs$2, PI: PI$2, sqrt: sqrt$1, pow: pow} = Math;
     const {setPoint: setPoint$1, addPoint: addPoint$1} = TwoPointBoundsHelper;
     const {set: set, toNumberPoints: toNumberPoints} = PointHelper;
     const {M: M$5, L: L$6, C: C$4, Q: Q$4, Z: Z$5} = PathCommandMap;
@@ -2435,9 +2441,11 @@ var LeaferUI = function(exports) {
             const CBy = toY - y1;
             let startRadian = atan2$1(BAy, BAx);
             let endRadian = atan2$1(CBy, CBx);
+            const lenBA = hypot(BAx, BAy);
+            const lenCB = hypot(CBx, CBy);
             let totalRadian = endRadian - startRadian;
             if (totalRadian < 0) totalRadian += PI2;
-            if (totalRadian === PI$2 || abs$2(BAx + BAy) < 1e-12 || abs$2(CBx + CBy) < 1e-12) {
+            if (lenBA < 1e-12 || lenCB < 1e-12 || totalRadian < 1e-12 || abs$2(totalRadian - PI$2) < 1e-12) {
                 if (data) data.push(L$6, x1, y1);
                 if (setPointBounds) {
                     setPoint$1(setPointBounds, fromX, fromY);
@@ -2470,7 +2478,7 @@ var LeaferUI = function(exports) {
             let totalRadian = endRadian - startRadian;
             if (totalRadian < 0) totalRadian += PI2; else if (totalRadian > PI2) totalRadian -= PI2;
             if (anticlockwise) totalRadian -= PI2;
-            const parts = ceil(abs$2(totalRadian / PI_2));
+            const parts = ceil$1(abs$2(totalRadian / PI_2));
             const partRadian = totalRadian / parts;
             const partRadian4Sin = sin$3(partRadian / 4);
             const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$3(partRadian / 2);
@@ -3010,11 +3018,7 @@ var LeaferUI = function(exports) {
             this.set(path);
         }
         set(path) {
-            if (path) {
-                this.__path = isString(path) ? PathHelper.parse(path) : path;
-            } else {
-                this.__path = [];
-            }
+            this.__path = path ? isString(path) ? PathHelper.parse(path) : path : [];
             return this;
         }
         beginPath() {
@@ -3176,7 +3180,7 @@ var LeaferUI = function(exports) {
     };
     const {M: M$1, L: L$2, C: C, Q: Q, Z: Z$1, N: N, D: D$1, X: X, G: G, F: F$1, O: O, P: P, U: U} = PathCommandMap;
     const {toTwoPointBounds: toTwoPointBounds, toTwoPointBoundsByQuadraticCurve: toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc: arc, ellipse: ellipse$1} = BezierHelper;
-    const {addPointBounds: addPointBounds, copy: copy$7, addPoint: addPoint, setPoint: setPoint, addBounds: addBounds, toBounds: toBounds$2} = TwoPointBoundsHelper;
+    const {addPointBounds: addPointBounds, copy: copy$7, addPoint: addPoint, setPoint: setPoint, addBounds: addBounds, toBounds: toBounds$1} = TwoPointBoundsHelper;
     const debug$b = Debug.get("PathBounds");
     let radius, radiusX, radiusY;
     const tempPointBounds = {};
@@ -3185,7 +3189,7 @@ var LeaferUI = function(exports) {
     const PathBounds = {
         toBounds(data, setBounds) {
             PathBounds.toTwoPointBounds(data, setPointBounds);
-            toBounds$2(setPointBounds, setBounds);
+            toBounds$1(setPointBounds, setBounds);
         },
         toTwoPointBounds(data, setPointBounds) {
             if (!data || !data.length) return setPoint(setPointBounds, 0, 0);
@@ -3367,10 +3371,13 @@ var LeaferUI = function(exports) {
             return smooth;
         }
     };
-    PathHelper.creator = new PathCreator;
+    function path(path) {
+        return new PathCreator(path);
+    }
+    const pen = path();
+    PathHelper.creator = path();
     PathHelper.parse = PathConvert.parse;
     PathHelper.convertToCanvasData = PathConvert.toCanvasData;
-    const pen = new PathCreator;
     const {drawRoundRect: drawRoundRect} = RectHelper;
     function roundRect(drawer) {
         if (drawer && !drawer.roundRect) {
@@ -3723,7 +3730,7 @@ var LeaferUI = function(exports) {
             return FileHelper.alphaPixelTypes.some(item => I$1.isFormat(item, config));
         },
         isFormat(format, config) {
-            if (config.format === format) return true;
+            if (config.format) return config.format === format;
             const {url: url} = config;
             if (url.startsWith("data:")) {
                 if (url.startsWith("data:" + FileHelper.mineType(format))) return true;
@@ -3813,7 +3820,7 @@ var LeaferUI = function(exports) {
         getFull(_filters) {
             return this.view;
         }
-        getCanvas(width, height, opacity, _filters, xGap, yGap) {
+        getCanvas(width, height, opacity, _filters, xGap, yGap, smooth) {
             width || (width = this.width);
             height || (height = this.height);
             if (this.cache) {
@@ -3829,6 +3836,7 @@ var LeaferUI = function(exports) {
             const canvas = Platform.origin.createCanvas(max$1(floor$1(width + (xGap || 0)), 1), max$1(floor$1(height + (yGap || 0)), 1));
             const ctx = canvas.getContext("2d");
             if (opacity) ctx.globalAlpha = opacity;
+            ctx.imageSmoothingEnabled = smooth === false ? false : true;
             ctx.drawImage(this.view, 0, 0, width, height);
             this.cache = this.use > 1 ? {
                 data: canvas,
@@ -3867,7 +3875,7 @@ var LeaferUI = function(exports) {
         return {
             get() {
                 const v = this[privateKey];
-                return isUndefined(v) ? defaultValue : v;
+                return v == null ? defaultValue : v;
             },
             set(value) {
                 this[privateKey] = value;
@@ -4120,21 +4128,21 @@ var LeaferUI = function(exports) {
             };
         } else if (typeof defaultValue === "function") {
             property.get = function() {
-                let v = this[computedKey];
-                return v === undefined ? defaultValue(this.__leaf) : v;
+                const v = this[computedKey];
+                return v == null ? defaultValue(this.__leaf) : v;
             };
         } else if (isObject(defaultValue)) {
             const isEmpty = isEmptyData(defaultValue);
             property.get = function() {
-                let v = this[computedKey];
-                return v === undefined ? this[computedKey] = isEmpty ? {} : DataHelper.clone(defaultValue) : v;
+                const v = this[computedKey];
+                return v == null ? this[computedKey] = isEmpty ? {} : DataHelper.clone(defaultValue) : v;
             };
         }
         const isBox = target.isBranchLeaf;
         if (key === "width") {
             property.get = function() {
                 const v = this[computedKey];
-                if (v === undefined) {
+                if (v == null) {
                     const t = this, naturalWidth = t.__naturalWidth, leaf = t.__leaf;
                     if (!defaultValue || leaf.pathInputed) return leaf.boxBounds.width;
                     if (naturalWidth) return t._height && t.__useNaturalRatio ? t._height * naturalWidth / t.__naturalHeight : naturalWidth;
@@ -4144,7 +4152,7 @@ var LeaferUI = function(exports) {
         } else if (key === "height") {
             property.get = function() {
                 const v = this[computedKey];
-                if (v === undefined) {
+                if (v == null) {
                     const t = this, naturalHeight = t.__naturalHeight, leaf = t.__leaf;
                     if (!defaultValue || leaf.pathInputed) return leaf.boxBounds.height;
                     if (naturalHeight) return t._width && t.__useNaturalRatio ? t._width * naturalHeight / t.__naturalWidth : naturalHeight;
@@ -4428,8 +4436,9 @@ var LeaferUI = function(exports) {
     };
     const L = LeafHelper;
     const {updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity, updateAllChange: updateAllChange$1, updateChange: updateChange$1} = L;
-    function getTempLocal(t, world) {
-        return t.parent ? PointHelper.tempToInnerOf(world, t.parent.scrollWorldTransform) : world;
+    function getTempLocal(t, worldPoint) {
+        t.updateLayout();
+        return t.parent ? PointHelper.tempToInnerOf(worldPoint, t.parent.scrollWorldTransform) : worldPoint;
     }
     const LeafBoundsHelper = {
         worldBounds(target) {
@@ -4876,7 +4885,7 @@ var LeaferUI = function(exports) {
         }
         boxChange() {
             this.boxChanged = true;
-            this.localBoxChanged || this.localBoxChange();
+            this.localBoxChanged ? this.boundsChanged || (this.boundsChanged = true) : this.localBoxChange();
             this.hitCanvasChanged = true;
         }
         localBoxChange() {
@@ -4910,7 +4919,7 @@ var LeaferUI = function(exports) {
         }
         matrixChange() {
             this.matrixChanged = true;
-            this.localBoxChanged || this.localBoxChange();
+            this.localBoxChanged ? this.boundsChanged || (this.boundsChanged = true) : this.localBoxChange();
         }
         surfaceChange() {
             this.surfaceChanged = true;
@@ -5354,7 +5363,7 @@ var LeaferUI = function(exports) {
     const {updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2} = LeafHelper;
     const {updateBounds: updateBounds$1} = BranchHelper;
     const {toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$4} = BoundsHelper;
-    const {toBounds: toBounds$1} = PathBounds;
+    const {toBounds: toBounds} = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
             const layout = this.__layout;
@@ -5425,8 +5434,8 @@ var LeaferUI = function(exports) {
         __updateBoxBounds(_secondLayout, _bounds) {
             const b = this.__layout.boxBounds;
             const data = this.__;
-            if (data.__pathInputed) {
-                toBounds$1(data.path, b);
+            if (data.__usePathBox) {
+                toBounds(data.path, b);
             } else {
                 b.x = 0;
                 b.y = 0;
@@ -5884,10 +5893,10 @@ var LeaferUI = function(exports) {
                 relative.innerToWorld(world, to, distance);
                 world = to ? to : world;
             }
-            toInnerPoint(this.worldTransform, world, to, distance);
+            toInnerPoint(this.scrollWorldTransform, world, to, distance);
         }
         innerToWorld(inner, to, distance, relative) {
-            toOuterPoint(this.worldTransform, inner, to, distance);
+            toOuterPoint(this.scrollWorldTransform, inner, to, distance);
             if (relative) relative.worldToInner(to ? to : inner, null, distance);
         }
         getBoxPoint(world, relative, distance, change) {
@@ -6341,7 +6350,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "1.9.3";
+    const version = "1.9.5";
     const debug$5 = Debug.get("LeaferCanvas");
     class LeaferCanvas extends LeaferCanvasBase {
         set zIndex(zIndex) {
@@ -6430,10 +6439,22 @@ var LeaferUI = function(exports) {
         updateViewSize() {
             const {width: width, height: height, pixelRatio: pixelRatio} = this;
             const {style: style} = this.view;
-            style.width = width + "px";
-            style.height = height + "px";
-            this.view.width = Math.ceil(width * pixelRatio);
-            this.view.height = Math.ceil(height * pixelRatio);
+            if (this.unreal) {
+                const {config: config, autoWidthStr: autoWidthStr, autoHeightStr: autoHeightStr} = this;
+                if (config.width) {
+                    if (isUndefined(autoWidthStr)) this.autoWidthStr = style.width || "";
+                    style.width = config.width + "px";
+                } else if (!isUndefined(autoWidthStr)) style.width = autoWidthStr;
+                if (config.height) {
+                    if (isUndefined(autoHeightStr)) this.autoHeightStr = style.height || "";
+                    style.height = config.height + "px";
+                } else if (!isUndefined(autoHeightStr)) style.height = autoHeightStr;
+            } else {
+                style.width = width + "px";
+                style.height = height + "px";
+                this.view.width = Math.ceil(width * pixelRatio);
+                this.view.height = Math.ceil(height * pixelRatio);
+            }
         }
         updateClientBounds() {
             if (this.view.parentElement) this.clientBounds = this.view.getBoundingClientRect();
@@ -6442,6 +6463,7 @@ var LeaferUI = function(exports) {
             this.resizeListener = listener;
             if (autoBounds) {
                 this.autoBounds = autoBounds;
+                if (this.resizeObserver) return;
                 try {
                     this.resizeObserver = new ResizeObserver(entries => {
                         this.updateClientBounds();
@@ -6458,18 +6480,10 @@ var LeaferUI = function(exports) {
                 } catch (_a) {
                     this.imitateResizeObserver();
                 }
+                this.stopListenPixelRatio();
             } else {
-                window.addEventListener("resize", this.windowListener = () => {
-                    const pixelRatio = Platform.devicePixelRatio;
-                    if (!this.config.pixelRatio && this.pixelRatio !== pixelRatio) {
-                        const {width: width, height: height} = this;
-                        this.emitResize({
-                            width: width,
-                            height: height,
-                            pixelRatio: pixelRatio
-                        });
-                    }
-                });
+                this.listenPixelRatio();
+                if (this.unreal) this.updateViewSize();
             }
         }
         imitateResizeObserver() {
@@ -6478,6 +6492,25 @@ var LeaferUI = function(exports) {
                 Platform.requestRender(this.imitateResizeObserver.bind(this));
             }
         }
+        listenPixelRatio() {
+            if (!this.windowListener) window.addEventListener("resize", this.windowListener = () => {
+                const pixelRatio = Platform.devicePixelRatio;
+                if (!this.config.pixelRatio && this.pixelRatio !== pixelRatio) {
+                    const {width: width, height: height} = this;
+                    this.emitResize({
+                        width: width,
+                        height: height,
+                        pixelRatio: pixelRatio
+                    });
+                }
+            });
+        }
+        stopListenPixelRatio() {
+            if (this.windowListener) {
+                window.removeEventListener("resize", this.windowListener);
+                this.windowListener = null;
+            }
+        }
         checkAutoBounds(parentSize) {
             const view = this.view;
             const {x: x, y: y, width: width, height: height} = this.autoBounds.getBoundsFrom(parentSize);
@@ -6515,10 +6548,7 @@ var LeaferUI = function(exports) {
         destroy() {
             if (this.view) {
                 this.stopAutoLayout();
-                if (this.windowListener) {
-                    window.removeEventListener("resize", this.windowListener);
-                    this.windowListener = null;
-                }
+                this.stopListenPixelRatio();
                 if (!this.unreal) {
                     const view = this.view;
                     if (view.parentElement) view.remove();
@@ -6922,7 +6952,7 @@ var LeaferUI = function(exports) {
             this.times = 0;
             this.config = {
                 usePartRender: true,
-                maxFPS: 60
+                maxFPS: 120
             };
             this.target = target;
             this.canvas = canvas;
@@ -7077,11 +7107,15 @@ var LeaferUI = function(exports) {
             if (this.requestTime || !target) return;
             if (target.parentApp) return target.parentApp.requestRender(false);
             const requestTime = this.requestTime = Date.now();
-            Platform.requestRender(() => {
-                this.FPS = Math.min(60, Math.ceil(1e3 / (Date.now() - requestTime)));
+            const render = () => {
+                const nowFPS = 1e3 / (Date.now() - requestTime);
+                const {maxFPS: maxFPS} = this.config;
+                if (maxFPS && nowFPS > maxFPS - .5) return Platform.requestRender(render);
+                this.FPS = Math.min(120, Math.ceil(nowFPS));
                 this.requestTime = 0;
                 this.checkRender();
-            });
+            };
+            Platform.requestRender(render);
         }
         __onResize(e) {
             if (this.canvas.unreal) return;
@@ -7124,7 +7158,8 @@ var LeaferUI = function(exports) {
             if (this.target) {
                 this.stop();
                 this.__removeListenEvents();
-                this.target = this.canvas = this.config = null;
+                this.config = {};
+                this.target = this.canvas = null;
             }
         }
     }
@@ -7581,7 +7616,11 @@ var LeaferUI = function(exports) {
         }
     }
     class FrameData extends BoxData {}
-    class LineData extends UIData {}
+    class LineData extends UIData {
+        get __usePathBox() {
+            return this.points || this.__pathInputed;
+        }
+    }
     class RectData extends UIData {
         get __boxStroke() {
             return !this.__pathInputed;
@@ -7592,7 +7631,7 @@ var LeaferUI = function(exports) {
             return !this.__pathInputed;
         }
     }
-    class PolygonData extends UIData {}
+    class PolygonData extends LineData {}
     class StarData extends UIData {}
     class PathData extends UIData {
         get __pathInputed() {
@@ -7886,20 +7925,9 @@ var LeaferUI = function(exports) {
             if (!path) this.__drawPathByBox(pen);
             return pen;
         }
-        constructor(data) {
-            super(data);
-        }
         reset(_data) {}
-        set(data, transition) {
-            if (data) {
-                if (transition) {
-                    if (transition === "temp") {
-                        this.lockNormalStyle = true;
-                        Object.assign(this, data);
-                        this.lockNormalStyle = false;
-                    } else this.animate(data, transition);
-                } else Object.assign(this, data);
-            }
+        set(data, _transition) {
+            if (data) Object.assign(this, data);
         }
         get(name) {
             return isString(name) ? this.__.__getInput(name) : this.__.__getInputData(name);
@@ -7945,7 +7973,7 @@ var LeaferUI = function(exports) {
             const data = this.__;
             if (data.path) {
                 data.__pathForRender = data.cornerRadius ? PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path;
-                if (data.__useArrow) PathArrow.addArrows(this, !data.cornerRadius);
+                if (data.__useArrow) PathArrow.addArrows(this);
             } else data.__pathForRender && (data.__pathForRender = undefined);
         }
         __drawRenderPath(canvas) {
@@ -7969,7 +7997,8 @@ var LeaferUI = function(exports) {
         drawImagePlaceholder(canvas, _image) {
             Paint.fill(this.__.placeholderColor, this, canvas);
         }
-        animate(_keyframe, _options, _type, _isTemp) {
+        animate(keyframe, _options, _type, _isTemp) {
+            this.set(keyframe);
             return Plugin.need("animate");
         }
         killAnimate(_type, _nextStyle) {}
@@ -8083,9 +8112,6 @@ var LeaferUI = function(exports) {
         get isBranch() {
             return true;
         }
-        constructor(data) {
-            super(data);
-        }
         reset(data) {
             this.__setBranch();
             super.reset(data);
@@ -8203,7 +8229,7 @@ var LeaferUI = function(exports) {
             const canvas = this.canvas = Creator.canvas(config);
             this.__controllers.push(this.renderer = Creator.renderer(this, canvas, config), this.watcher = Creator.watcher(this, config), this.layouter = Creator.layouter(this, config));
             if (this.isApp) this.__setApp();
-            this.__checkAutoLayout(config, parentApp);
+            this.__checkAutoLayout();
             this.view = canvas.view;
             if (!parentApp) {
                 this.selector = Creator.selector(this);
@@ -8302,7 +8328,8 @@ var LeaferUI = function(exports) {
             this.leafer = leafer;
             this.__level = 1;
         }
-        __checkAutoLayout(config, parentApp) {
+        __checkAutoLayout() {
+            const {config: config, parentApp: parentApp} = this;
             if (!parentApp) {
                 if (!config.width || !config.height) this.autoLayout = new AutoBounds(config);
                 this.canvas.startAutoLayout(this.autoLayout, this.__onResize.bind(this));
@@ -8328,9 +8355,10 @@ var LeaferUI = function(exports) {
             return super.__getAttr(attrName);
         }
         __changeCanvasSize(attrName, newValue) {
-            const data = DataHelper.copyAttrs({}, this.canvas, canvasSizeAttrs);
-            data[attrName] = this.config[attrName] = newValue;
-            if (newValue) this.canvas.stopAutoLayout();
+            const {config: config, canvas: canvas} = this;
+            const data = DataHelper.copyAttrs({}, canvas, canvasSizeAttrs);
+            data[attrName] = config[attrName] = newValue;
+            config.width && config.height ? canvas.stopAutoLayout() : this.__checkAutoLayout();
             this.__doResize(data);
         }
         __changeFill(newValue) {
@@ -8477,9 +8505,9 @@ var LeaferUI = function(exports) {
                         if (!this.parent) {
                             if (this.selector) this.selector.destroy();
                             if (this.hitCanvasManager) this.hitCanvasManager.destroy();
-                            this.canvasManager.destroy();
+                            if (this.canvasManager) this.canvasManager.destroy();
                         }
-                        this.canvas.destroy();
+                        if (this.canvas) this.canvas.destroy();
                         this.config.view = this.view = this.parentApp = null;
                         if (this.userConfig) this.userConfig.view = null;
                         super.destroy();
@@ -8502,9 +8530,6 @@ var LeaferUI = function(exports) {
         get __tag() {
             return "Rect";
         }
-        constructor(data) {
-            super(data);
-        }
     };
     __decorate([ dataProcessor(RectData) ], exports.Rect.prototype, "__", void 0);
     exports.Rect = __decorate([ useModule(RectRender), rewriteAble(), registerUI() ], exports.Rect);
@@ -8553,29 +8578,24 @@ var LeaferUI = function(exports) {
         }
         __updateStrokeBounds() {}
         __updateRenderBounds() {
-            let isOverflow;
+            let isOverflow, isScrollMode;
             if (this.children.length) {
-                const data = this.__, layout = this.__layout, {renderBounds: renderBounds, boxBounds: boxBounds} = layout;
+                const data = this.__, layout = this.__layout, {renderBounds: renderBounds, boxBounds: boxBounds} = layout, {overflow: overflow} = data;
                 const childrenRenderBounds = layout.childrenRenderBounds || (layout.childrenRenderBounds = getBoundsData());
                 super.__updateRenderBounds(childrenRenderBounds);
-                if (data.overflow.includes("scroll")) {
+                if (isScrollMode = overflow.includes("scroll")) {
                     add(childrenRenderBounds, boxBounds);
                     scroll(childrenRenderBounds, data);
                 }
                 this.__updateRectRenderBounds();
                 isOverflow = !includes$1(boxBounds, childrenRenderBounds);
-                if (isOverflow && data.overflow === "show") add(renderBounds, childrenRenderBounds);
+                if (isOverflow && overflow === "show") add(renderBounds, childrenRenderBounds);
             } else this.__updateRectRenderBounds();
             DataHelper.stintSet(this, "isOverflow", isOverflow);
-            this.__checkScroll();
+            this.__checkScroll(isScrollMode);
         }
         __updateRectRenderBounds() {}
-        __updateWorldBounds() {
-            if (this.hasScroller) this.__updateScroll();
-            super.__updateWorldBounds();
-        }
-        __checkScroll() {}
-        __updateScroll() {}
+        __checkScroll(_isScrollMode) {}
         __updateRectChange() {}
         __updateChange() {
             super.__updateChange();
@@ -8621,9 +8641,6 @@ var LeaferUI = function(exports) {
         get isFrame() {
             return true;
         }
-        constructor(data) {
-            super(data);
-        }
     };
     __decorate([ dataProcessor(FrameData) ], exports.Frame.prototype, "__", void 0);
     __decorate([ surfaceType("#FFFFFF") ], exports.Frame.prototype, "fill", void 0);
@@ -8634,9 +8651,6 @@ var LeaferUI = function(exports) {
         get __tag() {
             return "Ellipse";
         }
-        constructor(data) {
-            super(data);
-        }
         __updatePath() {
             const {width: width, height: height, innerRadius: innerRadius, startAngle: startAngle, endAngle: endAngle} = this.__;
             const rx = width / 2, ry = height / 2;
@@ -8672,7 +8686,6 @@ var LeaferUI = function(exports) {
     exports.Ellipse = __decorate([ registerUI() ], exports.Ellipse);
     const {moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1} = PathCommandDataHelper;
     const {rotate: rotate$1, getAngle: getAngle$1, getDistance: getDistance$2, defaultPoint: defaultPoint} = PointHelper;
-    const {toBounds: toBounds} = PathBounds;
     exports.Line = class Line extends exports.UI {
         get __tag() {
             return "Line";
@@ -8689,31 +8702,16 @@ var LeaferUI = function(exports) {
             this.rotation = getAngle$1(defaultPoint, value);
             if (this.height) this.height = 0;
         }
-        constructor(data) {
-            super(data);
-        }
         __updatePath() {
             const data = this.__;
             const path = data.path = [];
             if (data.points) {
-                drawPoints$1(path, data.points, false, data.closed);
+                drawPoints$1(path, data.points, data.curve, data.closed);
             } else {
                 moveTo$2(path, 0, 0);
                 lineTo$2(path, this.width, 0);
             }
         }
-        __updateRenderPath() {
-            const data = this.__;
-            if (!this.pathInputed && data.points && data.curve) {
-                drawPoints$1(data.__pathForRender = [], data.points, data.curve, data.closed);
-                if (data.__useArrow) PathArrow.addArrows(this, false);
-            } else super.__updateRenderPath();
-        }
-        __updateBoxBounds() {
-            if (this.points) {
-                toBounds(this.__.__pathForRender, this.__layout.boxBounds);
-            } else super.__updateBoxBounds();
-        }
     };
     __decorate([ dataProcessor(LineData) ], exports.Line.prototype, "__", void 0);
     __decorate([ affectStrokeBoundsType("center") ], exports.Line.prototype, "strokeAlign", void 0);
@@ -8729,15 +8727,13 @@ var LeaferUI = function(exports) {
         get __tag() {
             return "Polygon";
         }
-        constructor(data) {
-            super(data);
-        }
         __updatePath() {
-            const path = this.__.path = [];
-            if (this.__.points) {
-                drawPoints(path, this.__.points, false, true);
+            const data = this.__;
+            const path = data.path = [];
+            if (data.points) {
+                drawPoints(path, data.points, data.curve, true);
             } else {
-                const {width: width, height: height, sides: sides} = this.__;
+                const {width: width, height: height, sides: sides} = data;
                 const rx = width / 2, ry = height / 2;
                 moveTo$1(path, rx, 0);
                 for (let i = 1; i < sides; i++) {
@@ -8762,9 +8758,6 @@ var LeaferUI = function(exports) {
         get __tag() {
             return "Star";
         }
-        constructor(data) {
-            super(data);
-        }
         __updatePath() {
             const {width: width, height: height, corners: corners, innerRadius: innerRadius} = this.__;
             const rx = width / 2, ry = height / 2;
@@ -8792,9 +8785,6 @@ var LeaferUI = function(exports) {
             const {fill: fill} = this.__;
             return isArray(fill) && fill[0].image;
         }
-        constructor(data) {
-            super(data);
-        }
     };
     __decorate([ dataProcessor(ImageData) ], exports.Image.prototype, "__", void 0);
     __decorate([ boundsType("") ], exports.Image.prototype, "url", void 0);
@@ -8879,9 +8869,6 @@ var LeaferUI = function(exports) {
             this.updateLayout();
             return this.__.__textDrawData;
         }
-        constructor(data) {
-            super(data);
-        }
         __updateTextDrawData() {
             const data = this.__;
             const {lineHeight: lineHeight, letterSpacing: letterSpacing, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, italic: italic, textCase: textCase, textOverflow: textOverflow, padding: padding} = data;
@@ -8985,9 +8972,6 @@ var LeaferUI = function(exports) {
         get __tag() {
             return "Path";
         }
-        constructor(data) {
-            super(data);
-        }
     };
     __decorate([ dataProcessor(PathData) ], exports.Path.prototype, "__", void 0);
     __decorate([ affectStrokeBoundsType("center") ], exports.Path.prototype, "strokeAlign", void 0);
@@ -8996,9 +8980,6 @@ var LeaferUI = function(exports) {
         get __tag() {
             return "Pen";
         }
-        constructor(data) {
-            super(data);
-        }
         setStyle(data) {
             const path = this.pathElement = new exports.Path(data);
             this.pathStyle = data;
@@ -11241,7 +11222,7 @@ var LeaferUI = function(exports) {
         if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
     }
     const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
-    const {floor: floor, max: max, abs: abs} = Math;
+    const {floor: floor, ceil: ceil, max: max, abs: abs} = Math;
     function createPattern(ui, paint, pixelRatio) {
         let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
         const id = scaleX + "-" + scaleY + "-" + pixelRatio;
@@ -11250,8 +11231,6 @@ var LeaferUI = function(exports) {
             let imageScale, imageMatrix, {width: width, height: height, scaleX: sx, scaleY: sy, transform: transform, repeat: repeat, gap: gap} = data;
             scaleX *= pixelRatio;
             scaleY *= pixelRatio;
-            const xGap = gap && gap.x * scaleX;
-            const yGap = gap && gap.y * scaleY;
             if (sx) {
                 sx = abs(sx);
                 sy = abs(sy);
@@ -11268,7 +11247,10 @@ var LeaferUI = function(exports) {
                 if (size > Platform.image.maxCacheSize) return false;
             }
             let maxSize = Platform.image.maxPatternSize;
-            if (!image.isSVG) {
+            if (image.isSVG) {
+                const ws = width / image.width;
+                if (ws > 1) imageScale = ws / ceil(ws);
+            } else {
                 const imageSize = image.width * image.height;
                 if (maxSize > imageSize) maxSize = imageSize;
             }
@@ -11283,18 +11265,20 @@ var LeaferUI = function(exports) {
                 scaleX /= sx;
                 scaleY /= sy;
             }
+            const xGap = gap && gap.x * scaleX;
+            const yGap = gap && gap.y * scaleY;
             if (transform || scaleX !== 1 || scaleY !== 1) {
+                const canvasWidth = width + (xGap || 0);
+                const canvasHeight = height + (yGap || 0);
+                scaleX /= canvasWidth / max(floor(canvasWidth), 1);
+                scaleY /= canvasHeight / max(floor(canvasHeight), 1);
                 if (!imageMatrix) {
                     imageMatrix = get$1();
                     if (transform) copy$1(imageMatrix, transform);
                 }
                 scale(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            if (imageMatrix) {
-                const canvasWidth = width + (xGap || 0), canvasHeight = height + (yGap || 0);
-                scale(imageMatrix, canvasWidth / max(floor(canvasWidth), 1), canvasHeight / max(floor(canvasHeight), 1));
-            }
-            const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap);
+            const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth);
             const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
             paint.style = pattern;
             paint.patternId = id;
@@ -12308,6 +12292,7 @@ var LeaferUI = function(exports) {
     exports.maskType = maskType;
     exports.naturalBoundsType = naturalBoundsType;
     exports.opacityType = opacityType;
+    exports.path = path;
     exports.pathInputType = pathInputType;
     exports.pathType = pathType;
     exports.pen = pen;