@leafer/worker 1.9.4 → 1.9.6

package/dist/worker.js

@@ -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;
@@ -341,7 +344,7 @@ var LeaferUI = function(exports) {
         };
     }
     const {sin: sin$6, cos: cos$6, acos: acos, sqrt: sqrt$5} = Math;
-    const {float: float$2} = MathHelper;
+    const {float: float$3} = MathHelper;
     const tempPoint$4 = {};
     function getWorld() {
         return Object.assign(Object.assign(Object.assign({}, getMatrixData()), getBoundsData()), {
@@ -580,12 +583,12 @@ var LeaferUI = function(exports) {
                     const cosR = c / scaleY;
                     rotation = PI_2 - (d > 0 ? acos(-cosR) : -acos(cosR));
                 }
-                const cosR = float$2(cos$6(rotation));
+                const cosR = float$3(cos$6(rotation));
                 const sinR = sin$6(rotation);
-                scaleX = float$2(scaleX), scaleY = float$2(scaleY);
-                skewX = cosR ? float$2((c / scaleY + sinR) / cosR / OneRadian, 9) : 0;
-                skewY = cosR ? float$2((b / scaleX - sinR) / cosR / OneRadian, 9) : 0;
-                rotation = float$2(rotation / OneRadian);
+                scaleX = float$3(scaleX), scaleY = float$3(scaleY);
+                skewX = cosR ? float$3((c / scaleY + sinR) / cosR / OneRadian, 9) : 0;
+                skewY = cosR ? float$3((b / scaleX - sinR) / cosR / OneRadian, 9) : 0;
+                rotation = float$3(rotation / OneRadian);
             } else {
                 scaleX = a;
                 scaleY = d;
@@ -1080,10 +1083,10 @@ var LeaferUI = function(exports) {
             toPoint$6(align, box, to, onlyBoxSize, content, onlyContentSize);
         }
     };
-    const {tempPointBounds: tempPointBounds$1, setPoint: setPoint$5, addPoint: addPoint$3, toBounds: toBounds$4} = TwoPointBoundsHelper;
+    const {tempPointBounds: tempPointBounds$1, setPoint: setPoint$5, addPoint: addPoint$3, toBounds: toBounds$3} = TwoPointBoundsHelper;
     const {toOuterPoint: toOuterPoint$2} = MatrixHelper;
-    const {float: float$1, fourNumber: fourNumber$1} = MathHelper;
-    const {floor: floor$3, ceil: ceil$2} = Math;
+    const {float: float$2, fourNumber: fourNumber$1} = MathHelper;
+    const {floor: floor$3, ceil: ceil$3} = Math;
     let right$4, bottom$3, boundsRight, boundsBottom;
     const point$2 = {};
     const toPoint$5 = {};
@@ -1207,7 +1210,7 @@ var LeaferUI = function(exports) {
                 point$2.x = t.x;
                 toOuterPoint$2(matrix, point$2, toPoint$5);
                 addPoint$3(tempPointBounds$1, toPoint$5.x, toPoint$5.y);
-                toBounds$4(tempPointBounds$1, to);
+                toBounds$3(tempPointBounds$1, to);
             }
         },
         toInnerOf(t, matrix, to) {
@@ -1245,8 +1248,8 @@ var LeaferUI = function(exports) {
             const {x: x, y: y} = t;
             t.x = floor$3(t.x);
             t.y = floor$3(t.y);
-            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);
+            t.width = x > t.x ? ceil$3(t.width + x - t.x) : ceil$3(t.width);
+            t.height = y > t.y ? ceil$3(t.height + y - t.y) : ceil$3(t.height);
         },
         unsign(t) {
             if (t.width < 0) {
@@ -1259,10 +1262,10 @@ var LeaferUI = function(exports) {
             }
         },
         float(t, maxLength) {
-            t.x = float$1(t.x, maxLength);
-            t.y = float$1(t.y, maxLength);
-            t.width = float$1(t.width, maxLength);
-            t.height = float$1(t.height, maxLength);
+            t.x = float$2(t.x, maxLength);
+            t.y = float$2(t.y, maxLength);
+            t.width = float$2(t.width, maxLength);
+            t.height = float$2(t.height, maxLength);
         },
         add(t, bounds, isPoint) {
             right$4 = t.x + t.width;
@@ -1306,7 +1309,7 @@ var LeaferUI = function(exports) {
         },
         setPoints(t, points) {
             points.forEach((point, index) => index === 0 ? setPoint$5(tempPointBounds$1, point.x, point.y) : addPoint$3(tempPointBounds$1, point.x, point.y));
-            toBounds$4(tempPointBounds$1, t);
+            toBounds$3(tempPointBounds$1, t);
         },
         setPoint(t, point) {
             B.set(t, point.x, point.y);
@@ -2063,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() {}
@@ -2372,7 +2375,7 @@ var LeaferUI = function(exports) {
             data[0] ? drawer.arcTo(x, y, right, y, data[0]) : drawer.lineTo(x, y);
         }
     };
-    const {sin: sin$4, cos: cos$4, atan2: atan2$1, ceil: ceil$1, abs: abs$6, PI: PI$3, sqrt: sqrt$3, pow: pow$1} = Math;
+    const {sin: sin$4, cos: cos$4, hypot: hypot, atan2: atan2$1, ceil: ceil$2, abs: abs$6, PI: PI$3, sqrt: sqrt$3, pow: pow$1} = Math;
     const {setPoint: setPoint$4, addPoint: addPoint$2} = TwoPointBoundsHelper;
     const {set: set, toNumberPoints: toNumberPoints$1} = PointHelper;
     const {M: M$9, L: L$a, C: C$8, Q: Q$7, Z: Z$8} = PathCommandMap;
@@ -2438,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$3 || abs$6(BAx + BAy) < 1e-12 || abs$6(CBx + CBy) < 1e-12) {
+            if (lenBA < 1e-12 || lenCB < 1e-12 || totalRadian < 1e-12 || abs$6(totalRadian - PI$3) < 1e-12) {
                 if (data) data.push(L$a, x1, y1);
                 if (setPointBounds) {
                     setPoint$4(setPointBounds, fromX, fromY);
@@ -2473,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$1(abs$6(totalRadian / PI_2));
+            const parts = ceil$2(abs$6(totalRadian / PI_2));
             const partRadian = totalRadian / parts;
             const partRadian4Sin = sin$4(partRadian / 4);
             const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$4(partRadian / 2);
@@ -3013,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() {
@@ -3179,7 +3180,7 @@ var LeaferUI = function(exports) {
     };
     const {M: M$5, L: L$6, C: C$4, Q: Q$3, Z: Z$4, N: N$2, D: D$3, X: X$2, G: G$2, F: F$3, O: O$3, P: P$2, U: U$2} = PathCommandMap;
     const {toTwoPointBounds: toTwoPointBounds, toTwoPointBoundsByQuadraticCurve: toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc: arc, ellipse: ellipse$1} = BezierHelper;
-    const {addPointBounds: addPointBounds, copy: copy$a, addPoint: addPoint$1, setPoint: setPoint$3, addBounds: addBounds, toBounds: toBounds$3} = TwoPointBoundsHelper;
+    const {addPointBounds: addPointBounds, copy: copy$a, addPoint: addPoint$1, setPoint: setPoint$3, addBounds: addBounds, toBounds: toBounds$2} = TwoPointBoundsHelper;
     const debug$d = Debug.get("PathBounds");
     let radius, radiusX, radiusY;
     const tempPointBounds = {};
@@ -3188,7 +3189,7 @@ var LeaferUI = function(exports) {
     const PathBounds = {
         toBounds(data, setBounds) {
             PathBounds.toTwoPointBounds(data, setPointBounds);
-            toBounds$3(setPointBounds, setBounds);
+            toBounds$2(setPointBounds, setBounds);
         },
         toTwoPointBounds(data, setPointBounds) {
             if (!data || !data.length) return setPoint$3(setPointBounds, 0, 0);
@@ -3370,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) {
@@ -3726,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;
@@ -3816,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) {
@@ -3832,6 +3836,7 @@ var LeaferUI = function(exports) {
             const canvas = Platform.origin.createCanvas(max$2(floor$2(width + (xGap || 0)), 1), max$2(floor$2(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,
@@ -4431,8 +4436,9 @@ var LeaferUI = function(exports) {
     };
     const L$4 = LeafHelper;
     const {updateAllMatrix: updateAllMatrix$4, updateMatrix: updateMatrix$4, updateAllWorldOpacity: updateAllWorldOpacity, updateAllChange: updateAllChange$1, updateChange: updateChange$1} = L$4;
-    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) {
@@ -5099,6 +5105,7 @@ var LeaferUI = function(exports) {
     LeaferEvent.STOP = "leafer.stop";
     LeaferEvent.RESTART = "leafer.restart";
     LeaferEvent.END = "leafer.end";
+    LeaferEvent.UPDATE_MODE = "leafer.update_mode";
     LeaferEvent.TRANSFORM = "leafer.transform";
     LeaferEvent.MOVE = "leafer.move";
     LeaferEvent.SCALE = "leafer.scale";
@@ -5357,7 +5364,7 @@ var LeaferUI = function(exports) {
     const {updateMatrix: updateMatrix$3, updateAllMatrix: updateAllMatrix$3} = LeafHelper;
     const {updateBounds: updateBounds$2} = BranchHelper;
     const {toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$2, copy: copy$7} = BoundsHelper;
-    const {toBounds: toBounds$2} = PathBounds;
+    const {toBounds: toBounds$1} = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
             const layout = this.__layout;
@@ -5428,8 +5435,8 @@ var LeaferUI = function(exports) {
         __updateBoxBounds(_secondLayout, _bounds) {
             const b = this.__layout.boxBounds;
             const data = this.__;
-            if (data.__pathInputed) {
-                toBounds$2(data.path, b);
+            if (data.__usePathBox) {
+                toBounds$1(data.path, b);
             } else {
                 b.x = 0;
                 b.y = 0;
@@ -6344,7 +6351,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "1.9.4";
+    const version = "1.9.6";
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() {
             return true;
@@ -6740,7 +6747,7 @@ var LeaferUI = function(exports) {
             this.times = 0;
             this.config = {
                 usePartRender: true,
-                maxFPS: 60
+                maxFPS: 120
             };
             this.target = target;
             this.canvas = canvas;
@@ -6895,11 +6902,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;
@@ -6942,7 +6953,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;
             }
         }
     }
@@ -7035,7 +7047,7 @@ var LeaferUI = function(exports) {
                 item = path.list[i];
                 if (!item.__.hittable) break;
                 hittablePath.addAt(item, 0);
-                if (!item.__.hitChildren) break;
+                if (!item.__.hitChildren || item.isLeafer && item.mode === "draw") break;
             }
             return hittablePath;
         }
@@ -7399,7 +7411,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;
@@ -7410,7 +7426,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() {
@@ -7449,8 +7465,6 @@ var LeaferUI = function(exports) {
                 if (!boxStyle) box.parent = t, box.__world = t.__world, boxLayout.boxBounds = layout.boxBounds;
                 box.set(value);
                 if (boxLayout.strokeChanged) layout.strokeChange();
-                if (boxLayout.renderChanged) layout.renderChange();
-                box.__updateChange();
             } else if (box) {
                 t.__box = box.parent = null;
                 box.destroy();
@@ -7517,7 +7531,7 @@ var LeaferUI = function(exports) {
         __updateRenderSpread() {
             let width = 0;
             const {shadow: shadow, innerShadow: innerShadow, blur: blur, backgroundBlur: backgroundBlur, filter: filter, renderSpread: renderSpread} = this.__;
-            if (shadow) shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
+            if (shadow) width = Effect.getShadowSpread(this, shadow);
             if (blur) width = Math.max(width, blur);
             if (filter) width += Filter.getSpread(filter);
             if (renderSpread) width += renderSpread;
@@ -7529,36 +7543,67 @@ var LeaferUI = function(exports) {
             return this.__box ? Math.max(this.__box.__updateRenderSpread(), width) : width;
         }
     };
+    const {float: float$1} = MathHelper;
+    const tempContent = new Bounds, tempMerge = new Bounds, tempIntersect = new Bounds;
     const DragBoundsHelper = {
+        limitMove(leaf, move) {
+            const {dragBounds: dragBounds, dragBoundsType: dragBoundsType} = leaf;
+            if (dragBounds) D$2.getValidMove(leaf.__localBoxBounds, D$2.getDragBounds(leaf), dragBoundsType, move, true);
+            D$2.axisMove(leaf, move);
+        },
+        limitScaleOf(leaf, origin, scale) {
+            const {dragBounds: dragBounds, dragBoundsType: dragBoundsType} = leaf;
+            if (dragBounds) D$2.getValidScaleOf(leaf.__localBoxBounds, D$2.getDragBounds(leaf), dragBoundsType, leaf.getLocalPointByInner(leaf.getInnerPointByBox(origin)), scale, true);
+        },
+        axisMove(leaf, move) {
+            const {draggable: draggable} = leaf;
+            if (draggable === "x") move.y = 0;
+            if (draggable === "y") move.x = 0;
+        },
+        getDragBounds(leaf) {
+            const {dragBounds: dragBounds} = leaf;
+            return dragBounds === "parent" ? leaf.parent.boxBounds : dragBounds;
+        },
+        isInnerMode(content, dragBounds, dragBoundsType, sideType) {
+            return dragBoundsType === "inner" || dragBoundsType === "auto" && content[sideType] > dragBounds[sideType];
+        },
         getValidMove(content, dragBounds, dragBoundsType, move, change) {
             const x = content.x + move.x, y = content.y + move.y, right = x + content.width, bottom = y + content.height;
             const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
             if (!change) move = Object.assign({}, move);
-            const isBiggerWidth = content.width > dragBounds.width;
-            const isBiggerHeight = content.height > dragBounds.height;
-            if (isBiggerWidth && dragBoundsType !== "outer") {
+            if (D$2.isInnerMode(content, dragBounds, dragBoundsType, "width")) {
                 if (x > dragBounds.x) move.x += dragBounds.x - x; else if (right < boundsRight) move.x += boundsRight - right;
             } else {
                 if (x < dragBounds.x) move.x += dragBounds.x - x; else if (right > boundsRight) move.x += boundsRight - right;
             }
-            if (isBiggerHeight && dragBoundsType !== "outer") {
+            if (D$2.isInnerMode(content, dragBounds, dragBoundsType, "height")) {
                 if (y > dragBounds.y) move.y += dragBounds.y - y; else if (bottom < boundsBottom) move.y += boundsBottom - bottom;
             } else {
                 if (y < dragBounds.y) move.y += dragBounds.y - y; else if (bottom > boundsBottom) move.y += boundsBottom - bottom;
             }
-            move.x = MathHelper.float(move.x);
-            move.y = MathHelper.float(move.y);
+            move.x = float$1(move.x);
+            move.y = float$1(move.y);
             return move;
         },
-        axisMove(leaf, move) {
-            const {draggable: draggable} = leaf;
-            if (draggable === "x") move.y = 0;
-            if (draggable === "y") move.x = 0;
-        },
-        limitMove(leaf, move) {
-            const {dragBounds: dragBounds, dragBoundsType: dragBoundsType} = leaf;
-            if (dragBounds) D$2.getValidMove(leaf.__localBoxBounds, dragBounds === "parent" ? leaf.parent.boxBounds : dragBounds, dragBoundsType, move, true);
-            D$2.axisMove(leaf, move);
+        getValidScaleOf(content, dragBounds, dragBoundsType, origin, scale, change) {
+            if (!change) scale = Object.assign({}, scale);
+            let fitScaleX, fitScaleY;
+            tempContent.set(content).scaleOf(origin, scale.x, scale.y).unsign();
+            tempMerge.set(tempContent).add(dragBounds);
+            tempIntersect.set(tempContent).intersect(dragBounds);
+            if (D$2.isInnerMode(content, dragBounds, dragBoundsType, "width")) {
+                fitScaleX = tempMerge.width / tempContent.width;
+            } else {
+                fitScaleX = tempIntersect.width / tempContent.width;
+            }
+            if (D$2.isInnerMode(content, dragBounds, dragBoundsType, "height")) {
+                fitScaleY = tempMerge.height / tempContent.height;
+            } else {
+                fitScaleY = tempIntersect.height / tempContent.height;
+            }
+            scale.x = float$1(tempIntersect.width) ? scale.x * fitScaleX : 1;
+            scale.y = float$1(tempIntersect.height) ? scale.y * fitScaleY : 1;
+            return scale;
         }
     };
     const D$2 = DragBoundsHelper;
@@ -7573,7 +7618,7 @@ var LeaferUI = function(exports) {
             }
             if (data.__useEffect) {
                 const {shadow: shadow, fill: fill, stroke: stroke} = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
-                stintSet$1(data, "__isFastShadow", shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && fill && !data.__isTransparentFill && !(isArray(fill) && fill.length > 1) && (this.useFastShadow || !stroke || stroke && data.strokeAlign === "inside"));
+                stintSet$1(data, "__isFastShadow", shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !Effect.isTransformShadow(shadow[0]) && fill && !data.__isTransparentFill && !(isArray(fill) && fill.length > 1) && (this.useFastShadow || !stroke || stroke && data.strokeAlign === "inside"));
                 data.__useEffect = !!(shadow || otherEffect);
             }
             data.__checkSingle();
@@ -7704,20 +7749,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);
@@ -7763,7 +7797,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) {
@@ -7787,7 +7821,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) {}
@@ -7901,9 +7936,6 @@ var LeaferUI = function(exports) {
         get isBranch() {
             return true;
         }
-        constructor(data) {
-            super(data);
-        }
         reset(data) {
             this.__setBranch();
             super.reset(data);
@@ -8021,7 +8053,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);
@@ -8120,7 +8152,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));
@@ -8137,7 +8170,9 @@ var LeaferUI = function(exports) {
                 } else if (attrName === "zIndex") {
                     this.canvas.zIndex = newValue;
                     setTimeout(() => this.parent && this.parent.__updateSortChildren());
-                }
+                } else if (attrName === "mode") this.emit(LeaferEvent.UPDATE_MODE, {
+                    mode: newValue
+                });
             }
             return super.__setAttr(attrName, newValue);
         }
@@ -8146,9 +8181,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) {
@@ -8295,9 +8331,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();
@@ -8315,14 +8351,12 @@ var LeaferUI = function(exports) {
     exports.Leafer.list = new LeafList;
     __decorate([ dataProcessor(LeaferData) ], exports.Leafer.prototype, "__", void 0);
     __decorate([ boundsType() ], exports.Leafer.prototype, "pixelRatio", void 0);
+    __decorate([ dataType("normal") ], exports.Leafer.prototype, "mode", void 0);
     exports.Leafer = Leafer_1 = __decorate([ registerUI() ], exports.Leafer);
     exports.Rect = class Rect extends exports.UI {
         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);
@@ -8434,9 +8468,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);
@@ -8447,9 +8478,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;
@@ -8483,108 +8511,46 @@ var LeaferUI = function(exports) {
     __decorate([ pathType(0) ], exports.Ellipse.prototype, "startAngle", void 0);
     __decorate([ pathType(0) ], exports.Ellipse.prototype, "endAngle", void 0);
     exports.Ellipse = __decorate([ registerUI() ], exports.Ellipse);
-    const {moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1} = PathCommandDataHelper;
-    const {rotate: rotate$3, getAngle: getAngle$2, getDistance: getDistance$3, defaultPoint: defaultPoint} = PointHelper;
-    const {toBounds: toBounds$1} = PathBounds;
-    exports.Line = class Line extends exports.UI {
-        get __tag() {
-            return "Line";
-        }
-        get toPoint() {
-            const {width: width, rotation: rotation} = this.__;
-            const to = getPointData();
-            if (width) to.x = width;
-            if (rotation) rotate$3(to, rotation);
-            return to;
-        }
-        set toPoint(value) {
-            this.width = getDistance$3(defaultPoint, value);
-            this.rotation = getAngle$2(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);
-            } 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$1(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);
-    __decorate([ boundsType(0) ], exports.Line.prototype, "height", void 0);
-    __decorate([ pathType() ], exports.Line.prototype, "points", void 0);
-    __decorate([ pathType(0) ], exports.Line.prototype, "curve", void 0);
-    __decorate([ pathType(false) ], exports.Line.prototype, "closed", void 0);
-    exports.Line = __decorate([ registerUI() ], exports.Line);
     const {sin: sin$2, cos: cos$2, PI: PI$2} = Math;
-    const {moveTo: moveTo$1, lineTo: lineTo$1, closePath: closePath$1, drawPoints: drawPoints} = PathCommandDataHelper;
-    const line = exports.Line.prototype;
+    const {moveTo: moveTo$2, lineTo: lineTo$2, closePath: closePath$1, drawPoints: drawPoints$1} = PathCommandDataHelper;
     exports.Polygon = class Polygon extends exports.UI {
         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$1(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);
+                moveTo$2(path, rx, 0);
                 for (let i = 1; i < sides; i++) {
-                    lineTo$1(path, rx + rx * sin$2(i * 2 * PI$2 / sides), ry - ry * cos$2(i * 2 * PI$2 / sides));
+                    lineTo$2(path, rx + rx * sin$2(i * 2 * PI$2 / sides), ry - ry * cos$2(i * 2 * PI$2 / sides));
                 }
                 closePath$1(path);
             }
         }
-        __updateRenderPath() {}
-        __updateBoxBounds() {}
     };
     __decorate([ dataProcessor(PolygonData) ], exports.Polygon.prototype, "__", void 0);
     __decorate([ pathType(3) ], exports.Polygon.prototype, "sides", void 0);
     __decorate([ pathType() ], exports.Polygon.prototype, "points", void 0);
     __decorate([ pathType(0) ], exports.Polygon.prototype, "curve", void 0);
-    __decorate([ rewrite(line.__updateRenderPath) ], exports.Polygon.prototype, "__updateRenderPath", null);
-    __decorate([ rewrite(line.__updateBoxBounds) ], exports.Polygon.prototype, "__updateBoxBounds", null);
     exports.Polygon = __decorate([ rewriteAble(), registerUI() ], exports.Polygon);
     const {sin: sin$1, cos: cos$1, PI: PI$1} = Math;
-    const {moveTo: moveTo, lineTo: lineTo, closePath: closePath} = PathCommandDataHelper;
+    const {moveTo: moveTo$1, lineTo: lineTo$1, closePath: closePath} = PathCommandDataHelper;
     exports.Star = class Star extends exports.UI {
         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;
             const path = this.__.path = [];
-            moveTo(path, rx, 0);
+            moveTo$1(path, rx, 0);
             for (let i = 1; i < corners * 2; i++) {
-                lineTo(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin$1(i * PI$1 / corners), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos$1(i * PI$1 / corners));
+                lineTo$1(path, rx + (i % 2 === 0 ? rx : rx * innerRadius) * sin$1(i * PI$1 / corners), ry - (i % 2 === 0 ? ry : ry * innerRadius) * cos$1(i * PI$1 / corners));
             }
             closePath(path);
         }
@@ -8593,6 +8559,42 @@ var LeaferUI = function(exports) {
     __decorate([ pathType(5) ], exports.Star.prototype, "corners", void 0);
     __decorate([ pathType(.382) ], exports.Star.prototype, "innerRadius", void 0);
     exports.Star = __decorate([ registerUI() ], exports.Star);
+    const {moveTo: moveTo, lineTo: lineTo, drawPoints: drawPoints} = PathCommandDataHelper;
+    const {rotate: rotate$3, getAngle: getAngle$2, getDistance: getDistance$3, defaultPoint: defaultPoint} = PointHelper;
+    exports.Line = class Line extends exports.UI {
+        get __tag() {
+            return "Line";
+        }
+        get toPoint() {
+            const {width: width, rotation: rotation} = this.__;
+            const to = getPointData();
+            if (width) to.x = width;
+            if (rotation) rotate$3(to, rotation);
+            return to;
+        }
+        set toPoint(value) {
+            this.width = getDistance$3(defaultPoint, value);
+            this.rotation = getAngle$2(defaultPoint, value);
+            if (this.height) this.height = 0;
+        }
+        __updatePath() {
+            const data = this.__;
+            const path = data.path = [];
+            if (data.points) {
+                drawPoints(path, data.points, data.curve, data.closed);
+            } else {
+                moveTo(path, 0, 0);
+                lineTo(path, this.width, 0);
+            }
+        }
+    };
+    __decorate([ dataProcessor(LineData) ], exports.Line.prototype, "__", void 0);
+    __decorate([ affectStrokeBoundsType("center") ], exports.Line.prototype, "strokeAlign", void 0);
+    __decorate([ boundsType(0) ], exports.Line.prototype, "height", void 0);
+    __decorate([ pathType() ], exports.Line.prototype, "points", void 0);
+    __decorate([ pathType(0) ], exports.Line.prototype, "curve", void 0);
+    __decorate([ pathType(false) ], exports.Line.prototype, "closed", void 0);
+    exports.Line = __decorate([ registerUI() ], exports.Line);
     exports.Image = class Image extends exports.Rect {
         get __tag() {
             return "Image";
@@ -8605,9 +8607,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);
@@ -8692,9 +8691,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;
@@ -8731,10 +8727,6 @@ var LeaferUI = function(exports) {
             DataHelper.stintSet(this, "isOverflow", !includes(b, contentBounds));
             if (this.isOverflow) setList(data.__textBoxBounds = {}, [ b, contentBounds ]), layout.renderChanged = true; else data.__textBoxBounds = b;
         }
-        __onUpdateSize() {
-            if (this.__box) this.__box.__onUpdateSize();
-            super.__onUpdateSize();
-        }
         __updateRenderSpread() {
             let width = super.__updateRenderSpread();
             if (!width) width = this.isOverflow ? 1 : 0;
@@ -8745,6 +8737,11 @@ var LeaferUI = function(exports) {
             copyAndSpread$1(renderBounds, this.__.__textBoxBounds, renderSpread);
             if (this.__box) this.__box.__layout.renderBounds = renderBounds;
         }
+        __updateChange() {
+            super.__updateChange();
+            const box = this.__box;
+            if (box) box.__onUpdateSize(), box.__updateChange();
+        }
         __drawRenderPath(canvas) {
             canvas.font = this.__.__font;
         }
@@ -8798,9 +8795,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);
@@ -8809,9 +8803,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;
@@ -10730,7 +10721,7 @@ var LeaferUI = function(exports) {
         if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
     }
     const {get: get$1, scale: scale$2, copy: copy$4} = MatrixHelper;
-    const {floor: floor$1, max: max$1, abs: abs$4} = Math;
+    const {floor: floor$1, ceil: ceil$1, max: max$1, abs: abs$4} = Math;
     function createPattern(ui, paint, pixelRatio) {
         let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
         const id = scaleX + "-" + scaleY + "-" + pixelRatio;
@@ -10739,8 +10730,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$4(sx);
                 sy = abs$4(sy);
@@ -10757,7 +10746,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$1(ws);
+            } else {
                 const imageSize = image.width * image.height;
                 if (maxSize > imageSize) maxSize = imageSize;
             }
@@ -10772,18 +10764,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$1(floor$1(canvasWidth), 1);
+                scaleY /= canvasHeight / max$1(floor$1(canvasHeight), 1);
                 if (!imageMatrix) {
                     imageMatrix = get$1();
                     if (transform) copy$4(imageMatrix, transform);
                 }
                 scale$2(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            if (imageMatrix) {
-                const canvasWidth = width + (xGap || 0), canvasHeight = height + (yGap || 0);
-                scale$2(imageMatrix, canvasWidth / max$1(floor$1(canvasWidth), 1), canvasHeight / max$1(floor$1(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;
@@ -10999,11 +10993,16 @@ var LeaferUI = function(exports) {
                 }
                 worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, "destination-out") : other.copyWorld(shape.canvas, shapeBounds, bounds, "destination-out");
             }
-            LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
+            if (Effect.isTransformShadow(item)) Effect.renderTransformShadow(ui, current, other, copyBounds, item); else LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
             if (end && index < end) other.clearWorld(copyBounds);
         });
         other.recycle(copyBounds);
     }
+    function getShadowSpread(_ui, shadow) {
+        let width = 0;
+        shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
+        return width;
+    }
     function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
         const {bounds: bounds, shapeBounds: shapeBounds} = shape;
         if (Platform.fullImageShadow) {
@@ -11075,7 +11074,11 @@ var LeaferUI = function(exports) {
         shadow: shadow$1,
         innerShadow: innerShadow,
         blur: blur,
-        backgroundBlur: backgroundBlur
+        backgroundBlur: backgroundBlur,
+        getShadowSpread: getShadowSpread,
+        isTransformShadow(_shadow) {
+            return undefined;
+        }
     };
     const {excludeRenderBounds: excludeRenderBounds} = LeafBoundsHelper;
     let usedGrayscaleAlpha;
@@ -11531,16 +11534,17 @@ var LeaferUI = function(exports) {
         row.data = null;
     }
     function decorationText(drawData, style) {
-        let type;
+        let type, offset = 0;
         const {fontSize: fontSize, textDecoration: textDecoration} = style;
         drawData.decorationHeight = fontSize / 11;
         if (isObject(textDecoration)) {
             type = textDecoration.type;
             if (textDecoration.color) drawData.decorationColor = ColorConvert.string(textDecoration.color);
+            if (textDecoration.offset) offset = Math.min(fontSize * .3, Math.max(textDecoration.offset, -fontSize * .15));
         } else type = textDecoration;
         switch (type) {
           case "under":
-            drawData.decorationY = [ fontSize * .15 ];
+            drawData.decorationY = [ fontSize * .15 + offset ];
             break;
 
           case "delete":
@@ -11548,7 +11552,7 @@ var LeaferUI = function(exports) {
             break;
 
           case "under-delete":
-            drawData.decorationY = [ fontSize * .15, -fontSize * .35 ];
+            drawData.decorationY = [ fontSize * .15 + offset, -fontSize * .35 ];
         }
     }
     const {top: top$2, right: right$3, bottom: bottom$2, left: left$3} = exports.Direction4;
@@ -11849,7 +11853,7 @@ var LeaferUI = function(exports) {
         }
         get running() {
             const {editor: editor} = this;
-            return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector;
+            return this.hittable && editor.visible && editor.hittable && editor.mergeConfig.selector && this.app.mode === "normal";
         }
         get isMoveMode() {
             return this.app && this.app.interaction.moveMode;
@@ -12147,17 +12151,13 @@ var LeaferUI = function(exports) {
             }
             toPoint(around || align, boxBounds, origin, true);
             if (dragBounds) {
-                const allowBounds = dragBounds === "parent" ? target.parent.boxBounds : dragBounds;
-                const childBounds = new Bounds(target.__localBoxBounds);
-                if (BoundsHelper.includes(new Bounds(allowBounds).spread(.1), childBounds)) {
-                    childBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY);
-                    if (!BoundsHelper.includes(allowBounds, childBounds)) {
-                        const realBounds = childBounds.getIntersect(allowBounds);
-                        const fitScaleX = realBounds.width / childBounds.width, fitScaleY = realBounds.height / childBounds.height;
-                        if (useScaleX) scaleX *= fitScaleX;
-                        if (useScaleY) scaleY *= fitScaleY;
-                    }
-                }
+                const scaleData = {
+                    x: scaleX,
+                    y: scaleY
+                };
+                DragBoundsHelper.limitScaleOf(target, origin, scaleData);
+                scaleX = scaleData.x;
+                scaleY = scaleData.y;
             }
             if (useScaleX && widthRange) {
                 const nowWidth = boxBounds.width * target.scaleX;
@@ -13661,7 +13661,9 @@ var LeaferUI = function(exports) {
         listenTargetEvents() {
             if (!this.targetEventIds.length) {
                 const {app: app, leafer: leafer, targetLeafer: targetLeafer, editMask: editMask} = this;
-                this.targetEventIds = [ leafer.on_(RenderEvent.START, this.onRenderStart, this), targetLeafer && targetLeafer.on_(PropertyEvent.SCROLL, this.onChildScroll, this), app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this) ];
+                this.targetEventIds = [ leafer.on_(RenderEvent.START, this.onRenderStart, this), targetLeafer && targetLeafer.on_(PropertyEvent.SCROLL, this.onChildScroll, this), app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this), app.on_(LeaferEvent.UPDATE_MODE, data => {
+                    if (data.mode && data.mode !== "normal") this.cancel();
+                }) ];
                 if (editMask.visible) editMask.forceRender();
             }
         }
@@ -14508,7 +14510,8 @@ var LeaferUI = function(exports) {
             if (zoom) {
                 zoomSpeed = within$2(zoomSpeed, 0, 1);
                 const min = event.deltaY ? config.delta.y : config.delta.x;
-                scale = within$2(1 - delta / (min * 4) * zoomSpeed, .5, 1.5);
+                const absScale = within$2(1 - abs$2(delta) / (min * 4) * zoomSpeed, .5, 2);
+                scale = delta > 0 ? absScale : 1 / absScale;
             }
             return scale;
         }
@@ -15021,6 +15024,9 @@ var LeaferUI = function(exports) {
             super(data);
             this.__.__useArrow = true;
         }
+        static registerArrow(name, data) {
+            PathArrow.register(name, data);
+        }
     };
     __decorate([ dataProcessor(ArrowData) ], exports.Arrow.prototype, "__", void 0);
     __decorate([ arrowType("angle") ], exports.Arrow.prototype, "endArrow", void 0);
@@ -15172,9 +15178,18 @@ var LeaferUI = function(exports) {
         "diamond-line": diamondLine,
         mark: mark
     };
-    function getArrowPath(ui, arrow, from, to, scale, connectOffset, hasDashPattern) {
+    function getArrowPath(ui, arrow, from, to, size, connectOffset, hasDashPattern) {
+        let pathData, scale;
         const {strokeCap: strokeCap, strokeJoin: strokeJoin} = ui.__;
-        const {offset: offset, connect: connect, path: path, dashPath: dashPath} = isObject(arrow) ? arrow : arrows[arrow];
+        if (isObject(arrow)) {
+            if (arrow.type) {
+                scale = arrow.scale;
+                pathData = arrows[arrow.type];
+            } else pathData = arrow;
+        } else {
+            pathData = arrows[arrow];
+        }
+        const {offset: offset, connect: connect, path: path, dashPath: dashPath} = pathData;
         let connectX = connect ? connect.x : 0;
         let offsetX = offset ? offset.x : 0;
         const data = [ ...path ];
@@ -15183,9 +15198,10 @@ var LeaferUI = function(exports) {
         if (offset) {
             if (strokeJoin === "round" && offset.roundJoin) offsetX += offset.roundJoin; else if (strokeJoin === "bevel" && offset.bevelJoin) offsetX += offset.bevelJoin;
         }
+        if (scale) layout$2(data, 0, 0, scale, scale);
         if (offsetX) layout$2(data, offsetX, 0);
-        layout$2(data, to.x, to.y, scale, scale, getAngle(from, to));
-        connectOffset.x = (connectX + offsetX) * scale;
+        layout$2(data, to.x, to.y, size, size, getAngle(from, to));
+        connectOffset.x = (connectX + offsetX) * size;
         return data;
     }
     const {M: M$1, L: L$1, C: C$1, Q: Q, Z: Z$1, N: N, D: D, X: X, G: G, F: F, O: O, P: P, U: U} = PathCommandMap;
@@ -15195,8 +15211,9 @@ var LeaferUI = function(exports) {
     const last = {}, now = {};
     const PathArrowModule = {
         list: arrows,
-        addArrows(ui, changeRenderPath) {
-            const {startArrow: startArrow, endArrow: endArrow, strokeWidth: strokeWidth, dashPattern: dashPattern, __pathForRender: data} = ui.__;
+        addArrows(ui) {
+            const {startArrow: startArrow, endArrow: endArrow, strokeWidth: strokeWidth, dashPattern: dashPattern, __pathForRender: data, cornerRadius: cornerRadius} = ui.__;
+            const clonePathForArrow = !cornerRadius;
             let command, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== "none";
             while (i < len) {
                 command = data[i];
@@ -15211,12 +15228,12 @@ var LeaferUI = function(exports) {
                     break;
 
                   case C$1:
-                    if (count === 1 || i + 7 === len) copyPoints(data, last, now, i + 3);
+                    if (count === 1 || i + 7 >= len - 3) copyPoints(data, last, now, i + 3);
                     i += 7;
                     break;
 
                   case Q:
-                    if (count === 1 || i + 5 === len) copyPoints(data, last, now, i + 1);
+                    if (count === 1 || i + 5 >= len - 3) copyPoints(data, last, now, i + 1);
                     i += 5;
                     break;
 
@@ -15252,7 +15269,13 @@ var LeaferUI = function(exports) {
                     break;
 
                   case U:
-                    if (count === 1 || i + 6 === len) copyPoints(data, last, now, i + 1);
+                    if (count === 1 || i + 6 >= len - 3) {
+                        copyPoints(data, last, now, i + 1);
+                        if (i + 6 !== len) {
+                            now.x -= (now.x - last.x) / 10;
+                            now.y -= (now.y - last.y) / 10;
+                        }
+                    }
                     i += 6;
                     break;
                 }
@@ -15260,7 +15283,7 @@ var LeaferUI = function(exports) {
                 if (count === 1 && command !== M$1) return;
                 if (count === 2 && useStartArrow) copy(second, command === L$1 ? now : last);
                 if (i === len) {
-                    const path = ui.__.__pathForRender = changeRenderPath ? [ ...data ] : data;
+                    const path = ui.__.__pathForRender = clonePathForArrow ? [ ...data ] : data;
                     const pathForArrow = ui.__.__pathForArrow = [];
                     if (useStartArrow) {
                         const startArrowPath = getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint, !!dashPattern);
@@ -15301,6 +15324,12 @@ var LeaferUI = function(exports) {
                     copy(last, now);
                 }
             }
+        },
+        register(name, data) {
+            this.list[name] = data;
+        },
+        get(name) {
+            return this.list[name];
         }
     };
     function copyPoints(data, from, to, startIndex) {
@@ -16727,6 +16756,17 @@ var LeaferUI = function(exports) {
     exports.UI.addAttr("animationOut", undefined, dataType);
     exports.UI.addAttr("transition", true, dataType);
     exports.UI.addAttr("transitionOut", undefined, dataType);
+    ui$3.set = function(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);
+        }
+    };
     ui$3.animate = function(keyframe, options, kill, isTemp) {
         if (isUndefined(keyframe)) return this.__animate;
         const isAnimationList = isArray(keyframe) && !options && kill;
@@ -17819,6 +17859,8 @@ var LeaferUI = function(exports) {
                         renderBounds: renderBounds,
                         trimBounds: trimBounds
                     };
+                    const app = leafer && leafer.app;
+                    if (app && app.canvasManager) app.canvasManager.clearRecycled();
                 }
             } catch (error) {
                 result = {
@@ -18118,6 +18160,7 @@ var LeaferUI = function(exports) {
     exports.motionPathType = motionPathType;
     exports.naturalBoundsType = naturalBoundsType;
     exports.opacityType = opacityType;
+    exports.path = path;
     exports.pathInputType = pathInputType;
     exports.pathType = pathType;
     exports.pen = pen;