@leafer/worker 1.9.5 → 1.9.7

package/dist/worker.js

@@ -344,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()), {
@@ -392,6 +392,15 @@ var LeaferUI = function(exports) {
             t.c *= scaleY;
             t.d *= scaleY;
         },
+        pixelScale(t, pixelRatio, to) {
+            to || (to = t);
+            to.a = t.a * pixelRatio;
+            to.b = t.b * pixelRatio;
+            to.c = t.c * pixelRatio;
+            to.d = t.d * pixelRatio;
+            to.e = t.e * pixelRatio;
+            to.f = t.f * pixelRatio;
+        },
         scaleOfOuter(t, origin, scaleX, scaleY) {
             M$a.toInnerPoint(t, origin, tempPoint$4);
             M$a.scaleOfInner(t, tempPoint$4, scaleX, scaleY);
@@ -583,12 +592,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;
@@ -882,6 +891,10 @@ var LeaferUI = function(exports) {
             this.scaleY *= y || x;
             return this;
         }
+        pixelScale(pixelRatio) {
+            MatrixHelper.pixelScale(this, pixelRatio);
+            return this;
+        }
         scaleOfOuter(origin, x, y) {
             MatrixHelper.scaleOfOuter(this, origin, x, y);
             return this;
@@ -1085,7 +1098,7 @@ var LeaferUI = function(exports) {
     };
     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 {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 = {};
@@ -1262,10 +1275,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;
@@ -1991,7 +2004,7 @@ var LeaferUI = function(exports) {
     __decorate([ contextMethod() ], Canvas.prototype, "fillText", null);
     __decorate([ contextMethod() ], Canvas.prototype, "measureText", null);
     __decorate([ contextMethod() ], Canvas.prototype, "strokeText", null);
-    const {copy: copy$b, multiplyParent: multiplyParent$4} = MatrixHelper, {round: round$4} = Math, tempPixelBounds = new Bounds, tempPixelBounds2 = new Bounds;
+    const {copy: copy$b, multiplyParent: multiplyParent$4, pixelScale: pixelScale} = MatrixHelper, {round: round$4} = Math, tempPixelBounds = new Bounds, tempPixelBounds2 = new Bounds;
     const minSize = {
         width: 1,
         height: 1,
@@ -2089,12 +2102,7 @@ var LeaferUI = function(exports) {
         setWorld(matrix, parentMatrix) {
             const {pixelRatio: pixelRatio, pixelSnap: pixelSnap} = this, w = this.worldTransform;
             if (parentMatrix) multiplyParent$4(matrix, parentMatrix, w);
-            w.a = matrix.a * pixelRatio;
-            w.b = matrix.b * pixelRatio;
-            w.c = matrix.c * pixelRatio;
-            w.d = matrix.d * pixelRatio;
-            w.e = matrix.e * pixelRatio;
-            w.f = matrix.f * pixelRatio;
+            pixelScale(matrix, pixelRatio, w);
             if (pixelSnap) {
                 if (matrix.half && matrix.half * pixelRatio % 2) w.e = round$4(w.e - .5) + .5, w.f = round$4(w.f - .5) + .5; else w.e = round$4(w.e), 
                 w.f = round$4(w.f);
@@ -4008,6 +4016,17 @@ var LeaferUI = function(exports) {
             }
         }));
     }
+    function dimType(defaultValue) {
+        return decorateLeafAttr(defaultValue, key => attr({
+            set(value) {
+                if (this.__setAttr(key, value)) {
+                    const data = this.__;
+                    DataHelper.stintSet(data, "__useDim", data.dim || data.bright || data.dimskip);
+                    this.__layout.surfaceChange();
+                }
+            }
+        }));
+    }
     function opacityType(defaultValue) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
@@ -4048,7 +4067,7 @@ var LeaferUI = function(exports) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
                 if (this.__setAttr(key, value)) {
-                    this.__layout.surfaceChanged || this.__layout.surfaceChange();
+                    this.__layout.surfaceChange();
                     this.waitParent(() => {
                         this.parent.__layout.childrenSortChange();
                     });
@@ -4082,7 +4101,7 @@ var LeaferUI = function(exports) {
             set(value) {
                 if (this.__setAttr(key, value)) {
                     this.__layout.hitCanvasChanged = true;
-                    if (Debug.showBounds === "hit") this.__layout.surfaceChanged || this.__layout.surfaceChange();
+                    if (Debug.showBounds === "hit") this.__layout.surfaceChange();
                     if (this.leafer) this.leafer.updateCursor();
                 }
             }
@@ -5105,6 +5124,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";
@@ -5479,6 +5499,7 @@ var LeaferUI = function(exports) {
             if (options.shape) return this.__renderShape(canvas, options);
             if (this.__worldOpacity) {
                 const data = this.__;
+                if (data.bright && !options.topRendering) return options.topList.add(this);
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
                 canvas.opacity = options.dimOpacity && !data.dimskip ? data.opacity * options.dimOpacity : data.opacity;
                 if (this.__.__single) {
@@ -5525,7 +5546,9 @@ var LeaferUI = function(exports) {
             this.__nowWorld = this.__getNowWorld(options);
             if (this.__worldOpacity) {
                 const data = this.__;
-                if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
+                if (data.__useDim) {
+                    if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.bright && !options.topRendering) return options.topList.add(this); else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
+                }
                 if (data.__single && !this.isBranchLeaf) {
                     if (data.eraser === "path") return this.__renderEraser(canvas, options);
                     const tempCanvas = canvas.getSameCanvas(false, true);
@@ -6350,7 +6373,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "1.9.5";
+    const version = "1.9.7";
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() {
             return true;
@@ -6877,7 +6900,7 @@ var LeaferUI = function(exports) {
             };
             if (this.needFill) canvas.fillWorld(bounds, this.config.fill);
             if (Debug.showRepaint) Debug.drawRepaint(canvas, bounds);
-            this.target.__render(canvas, options);
+            Platform.render(this.target, canvas, options);
             this.renderBounds = realBounds = realBounds || bounds;
             this.renderOptions = options;
             this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
@@ -7046,7 +7069,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;
         }
@@ -7146,6 +7169,14 @@ var LeaferUI = function(exports) {
         selector: (target, options) => new Selector(target, options)
     });
     Platform.layout = Layouter.fullLayout;
+    Platform.render = function(target, canvas, options) {
+        const topOptions = Object.assign(Object.assign({}, options), {
+            topRendering: true
+        });
+        options.topList = new LeafList;
+        target.__render(canvas, options);
+        if (options.topList.length) options.topList.forEach(item => item.__render(canvas, topOptions));
+    };
     function effectType(defaultValue) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
@@ -7464,8 +7495,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();
@@ -7532,7 +7561,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;
@@ -7544,36 +7573,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;
@@ -7588,7 +7648,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();
@@ -7834,8 +7894,8 @@ var LeaferUI = function(exports) {
     __decorate([ opacityType(1) ], exports.UI.prototype, "opacity", void 0);
     __decorate([ visibleType(true) ], exports.UI.prototype, "visible", void 0);
     __decorate([ surfaceType(false) ], exports.UI.prototype, "locked", void 0);
-    __decorate([ surfaceType(false) ], exports.UI.prototype, "dim", void 0);
-    __decorate([ surfaceType(false) ], exports.UI.prototype, "dimskip", void 0);
+    __decorate([ dimType(false) ], exports.UI.prototype, "dim", void 0);
+    __decorate([ dimType(false) ], exports.UI.prototype, "dimskip", void 0);
     __decorate([ sortType(0) ], exports.UI.prototype, "zIndex", void 0);
     __decorate([ maskType(false) ], exports.UI.prototype, "mask", void 0);
     __decorate([ eraserType(false) ], exports.UI.prototype, "eraser", void 0);
@@ -8140,7 +8200,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);
         }
@@ -8319,6 +8381,7 @@ 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() {
@@ -8478,45 +8541,8 @@ 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;
-    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$1(path, data.points, data.curve, data.closed);
-            } else {
-                moveTo$2(path, 0, 0);
-                lineTo$2(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);
     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";
@@ -8525,29 +8551,25 @@ var LeaferUI = function(exports) {
             const data = this.__;
             const path = data.path = [];
             if (data.points) {
-                drawPoints(path, data.points, data.curve, true);
+                drawPoints$1(path, data.points, data.curve, true);
             } else {
                 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";
@@ -8556,9 +8578,9 @@ var LeaferUI = function(exports) {
             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);
         }
@@ -8567,6 +8589,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";
@@ -8699,10 +8757,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;
@@ -8713,6 +8767,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;
         }
@@ -10964,11 +11023,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) {
@@ -11040,7 +11104,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;
@@ -11496,16 +11564,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":
@@ -11513,7 +11582,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;
@@ -11631,12 +11700,15 @@ var LeaferUI = function(exports) {
                 set(value) {
                     const old = this[privateKey];
                     if (old !== value) {
-                        if (this.config) {
+                        const t = this;
+                        if (t.config) {
                             const isSelect = key === "target";
                             if (isSelect) {
+                                t.setDimOthers(false);
+                                t.setBright(false);
                                 if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
-                                if (this.single) this.element.syncEventer = null;
-                                const {beforeSelect: beforeSelect} = this.config;
+                                if (t.single) t.element.syncEventer = null;
+                                const {beforeSelect: beforeSelect} = t.config;
                                 if (beforeSelect) {
                                     const check = beforeSelect({
                                         target: value
@@ -11646,7 +11718,7 @@ var LeaferUI = function(exports) {
                             }
                             const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
                             if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, {
-                                editor: this,
+                                editor: t,
                                 value: value,
                                 oldValue: old
                             }));
@@ -11814,7 +11886,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;
@@ -12112,17 +12184,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;
@@ -12300,13 +12368,18 @@ var LeaferUI = function(exports) {
     function updatePointCursor(editBox, e) {
         const {enterPoint: point, dragging: dragging, skewing: skewing, resizing: resizing, flippedX: flippedX, flippedY: flippedY} = editBox;
         if (!point || !editBox.editor.editing || !editBox.canUse) return;
+        if (point.name === "rect") return updateMoveCursor(editBox);
         if (point.name === "circle") return;
-        if (point.pointType === "button") {
+        let {rotation: rotation} = editBox;
+        const {pointType: pointType} = point, {moveCursor: moveCursor, resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
+        if (pointType === "move") {
+            point.cursor = moveCursor;
+            if (!moveable) point.visible = false;
+            return;
+        } else if (pointType === "button") {
             if (!point.cursor) point.cursor = "pointer";
             return;
         }
-        let {rotation: rotation} = editBox;
-        const {pointType: pointType} = point, {resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
         let showResize = pointType.includes("resize");
         if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false;
         const showSkew = skewable && !showResize && (point.name === "resize-line" || pointType === "skew");
@@ -12382,7 +12455,7 @@ var LeaferUI = function(exports) {
         constructor(editor) {
             super();
             this.view = new exports.Group;
-            this.rect = new exports.Box({
+            this.rect = new EditPoint({
                 name: "rect",
                 hitFill: "all",
                 hitStroke: "none",
@@ -12444,12 +12517,13 @@ var LeaferUI = function(exports) {
                 this.listenPointEvents(resizePoint, "resize", i);
             }
             this.listenPointEvents(circle, "rotate", 2);
+            this.listenPointEvents(rect, "move", 8);
             view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
             this.add(view);
         }
         load() {
-            const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints} = this;
-            const {stroke: stroke, strokeWidth: strokeWidth} = mergeConfig;
+            const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints, resizeLines: resizeLines} = this;
+            const {stroke: stroke, strokeWidth: strokeWidth, resizeLine: resizeLine} = mergeConfig;
             const pointsStyle = this.getPointsStyle();
             const middlePointsStyle = this.getMiddlePointsStyle();
             this.visible = !target.locked;
@@ -12458,6 +12532,10 @@ var LeaferUI = function(exports) {
                 resizeP = resizePoints[i];
                 resizeP.set(this.getPointStyle(i % 2 ? middlePointsStyle[(i - 1) / 2 % middlePointsStyle.length] : pointsStyle[i / 2 % pointsStyle.length]));
                 resizeP.rotation = (i - (i % 2 ? 1 : 0)) / 2 * 90;
+                if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
+                    pointType: "resize",
+                    rotation: (i - 1) / 2 * 90
+                }, resizeLine || {}));
             }
             circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
             rect.set(Object.assign({
@@ -12502,10 +12580,12 @@ var LeaferUI = function(exports) {
             if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
         }
         updateBounds(bounds) {
-            const {editMask: editMask} = this.editor;
-            const {mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
-            const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
+            const {editor: editor, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
+            const {editMask: editMask} = editor;
+            const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, dimOthers: dimOthers, bright: bright, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
             editMask.visible = mask ? true : 0;
+            editor.setDimOthers(dimOthers);
+            editor.setBright(!!dimOthers || bright);
             if (spread) BoundsHelper.spread(bounds, spread);
             if (this.view.worldOpacity) {
                 const {width: width, height: height} = bounds;
@@ -12526,10 +12606,10 @@ var LeaferUI = function(exports) {
                         resizeL.visible = resizeP.visible && !hideResizeLines;
                         resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
                         if ((i + 1) / 2 % 2) {
-                            resizeL.width = width;
+                            resizeL.width = width + resizeL.height;
                             if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false;
                         } else {
-                            resizeL.height = height;
+                            resizeL.width = height + resizeL.height;
                             if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false;
                         }
                     }
@@ -12606,7 +12686,7 @@ var LeaferUI = function(exports) {
             this.dragging = true;
             const point = this.dragPoint = e.current, {pointType: pointType} = point;
             const {editor: editor, dragStartData: dragStartData} = this, {target: target} = this, {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable, hideOnMove: hideOnMove} = this.mergeConfig;
-            if (point.name === "rect") {
+            if (pointType === "move") {
                 moveable && (this.moving = true);
                 editor.opacity = hideOnMove ? 0 : 1;
             } else {
@@ -12631,23 +12711,22 @@ var LeaferUI = function(exports) {
             if (this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds) this.transformTool.onMove(e);
             this.dragPoint = null;
             this.resetDoing();
-            const {name: name, pointType: pointType} = e.current;
-            if (name === "rect") this.editor.opacity = 1;
+            const {pointType: pointType} = e.current;
+            if (pointType === "move") this.editor.opacity = 1;
             if (pointType && pointType.includes("resize")) ResizeEvent.resizingKeys = null;
         }
         onDrag(e) {
             const {transformTool: transformTool, moving: moving, resizing: resizing, rotating: rotating, skewing: skewing} = this;
             if (moving) {
                 transformTool.onMove(e);
-                updateMoveCursor(this);
             } else if (resizing || rotating || skewing) {
                 const point = e.current;
                 if (point.pointType) this.enterPoint = point;
                 if (rotating) transformTool.onRotate(e);
                 if (resizing) transformTool.onScale(e);
                 if (skewing) transformTool.onSkew(e);
-                updatePointCursor(this, e);
             }
+            updatePointCursor(this, e);
         }
         resetDoing() {
             if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
@@ -12743,17 +12822,15 @@ var LeaferUI = function(exports) {
         listenPointEvents(point, type, direction) {
             point.direction = direction;
             point.pointType = type;
-            const events = [ [ exports.DragEvent.START, this.onDragStart, this ], [ exports.DragEvent.DRAG, this.onDrag, this ], [ exports.DragEvent.END, this.onDragEnd, this ], [ exports.PointerEvent.LEAVE, () => {
-                this.enterPoint = null;
-            } ] ];
-            if (point.name !== "circle") events.push([ exports.PointerEvent.ENTER, e => {
+            this.__eventIds.push(point.on_([ [ exports.DragEvent.START, this.onDragStart, this ], [ exports.DragEvent.DRAG, this.onDrag, this ], [ exports.DragEvent.END, this.onDragEnd, this ], [ exports.PointerEvent.ENTER, e => {
                 this.enterPoint = point, updatePointCursor(this, e);
-            } ]);
-            this.__eventIds.push(point.on_(events));
+            } ], [ exports.PointerEvent.LEAVE, () => {
+                this.enterPoint = null;
+            } ] ]));
         }
         __listenEvents() {
             const {rect: rect, editor: editor, __eventIds: events} = this;
-            events.push(rect.on_([ [ exports.DragEvent.START, this.onDragStart, this ], [ exports.DragEvent.DRAG, this.onDrag, this ], [ exports.DragEvent.END, this.onDragEnd, this ], [ exports.PointerEvent.ENTER, () => updateMoveCursor(this) ], [ exports.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ exports.PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
+            events.push(rect.on_([ [ exports.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ exports.PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
             this.waitLeafer(() => {
                 events.push(editor.app.on_([ [ [ exports.KeyEvent.HOLD, exports.KeyEvent.UP ], this.onKey, this ], [ exports.KeyEvent.DOWN, this.onArrow, this ], [ exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ exports.MoveEvent.END, this.onMoveEnd, this ], [ exports.ZoomEvent.END, this.resetDoing, this ], [ exports.RotateEvent.END, this.resetDoing, this ] ]));
             });
@@ -13431,6 +13508,16 @@ var LeaferUI = function(exports) {
         shiftItem(item) {
             this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
         }
+        setDimOthers(value, attrName = "dim", list) {
+            if (!list) {
+                const {dimTarget: dimTarget, targetLeafer: targetLeafer} = this;
+                list = dimTarget ? isArray(dimTarget) ? dimTarget : [ dimTarget ] : [ targetLeafer ];
+            }
+            if (list[0] && list[0][attrName] !== (value || false)) list.forEach(item => DataHelper.stintSet(item, attrName, value));
+        }
+        setBright(value) {
+            this.setDimOthers(value, "bright", this.list);
+        }
         update() {
             if (this.editing) {
                 if (!this.element.parent) return this.cancel();
@@ -13626,7 +13713,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();
             }
         }
@@ -13649,8 +13738,8 @@ var LeaferUI = function(exports) {
         }
     };
     __decorate([ mergeConfigAttr() ], exports.Editor.prototype, "mergeConfig", void 0);
-    __decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
     __decorate([ targetAttr(onTarget) ], exports.Editor.prototype, "target", void 0);
+    __decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
     exports.Editor = __decorate([ useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], exports.Editor);
     class InnerEditor {
         static registerInnerEditor() {
@@ -17772,14 +17861,10 @@ var LeaferUI = function(exports) {
                         renderOptions.bounds = canvas.bounds;
                     }
                     canvas.save();
-                    if (isFrame && !isUndefined(fill)) {
-                        const oldFill = leaf.get("fill");
-                        leaf.fill = "";
-                        leaf.__render(canvas, renderOptions);
-                        leaf.fill = oldFill;
-                    } else {
-                        leaf.__render(canvas, renderOptions);
-                    }
+                    const igroneFill = isFrame && !isUndefined(fill), oldFill = leaf.get("fill");
+                    if (igroneFill) leaf.fill = "";
+                    Platform.render(leaf, canvas, renderOptions);
+                    if (igroneFill) leaf.fill = oldFill;
                     canvas.restore();
                     if (sliceLeaf) sliceLeaf.__updateWorldOpacity();
                     if (trim) {
@@ -17822,6 +17907,8 @@ var LeaferUI = function(exports) {
                         renderBounds: renderBounds,
                         trimBounds: trimBounds
                     };
+                    const app = leafer && leafer.app;
+                    if (app && app.canvasManager) app.canvasManager.clearRecycled();
                 }
             } catch (error) {
                 result = {
@@ -17923,6 +18010,8 @@ var LeaferUI = function(exports) {
             return width;
         }
     });
+    Plugin.add("bright");
+    exports.UI.addAttr("bright", false, dimType);
     exports.AlignHelper = AlignHelper;
     exports.AnimateEasing = AnimateEasing;
     exports.AnimateEvent = AnimateEvent;
@@ -18095,6 +18184,7 @@ var LeaferUI = function(exports) {
     exports.defineDataProcessor = defineDataProcessor;
     exports.defineKey = defineKey;
     exports.defineLeafAttr = defineLeafAttr;
+    exports.dimType = dimType;
     exports.doBoundsType = doBoundsType;
     exports.doStrokeType = doStrokeType;
     exports.effectType = effectType;