npm - @leafer/miniapp - Versions diffs - 2.0.2 → 2.0.4 - Mend

@leafer/miniapp 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/miniapp.cjs +22 -0
package/dist/miniapp.esm.js +4 -0
package/dist/miniapp.esm.min.js +1 -1
package/dist/miniapp.esm.min.js.map +1 -1
package/dist/miniapp.min.cjs +1 -1
package/dist/miniapp.min.cjs.map +1 -1
package/dist/miniapp.module.js +564 -185
package/dist/miniapp.module.min.js +1 -1
package/dist/miniapp.module.min.js.map +1 -1
package/package.json +24 -22
package/src/index.ts +3 -0
package/types/index.d.ts +2 -0

package/dist/miniapp.module.js CHANGED Viewed

@@ -213,6 +213,7 @@ class LeafData {
     }
     destroy() {
         this.__input = this.__middle = null;
+        if (this.__complexData) this.__complexData.destroy();
     }
 }
@@ -311,6 +312,8 @@ const {set: set$2, get: get$5, setTemp: setTemp, toTempAB: toTempAB} = FourNumbe
 const {round: round$6, pow: pow$2, max: max$6, floor: floor$3, PI: PI$4} = Math;
+const tempScaleData$1 = {};
 const MathHelper = {
     within(value, min, max) {
         if (isObject(min)) max = min.max, min = min.min;
@@ -354,6 +357,24 @@ const MathHelper = {
         } else if (scale) MathHelper.assignScale(scaleData, scale);
         return scaleData;
     },
+    getScaleFixedData(worldScaleData, scaleFixed, unscale, abs, _localScaleData) {
+        let {scaleX: scaleX, scaleY: scaleY} = worldScaleData;
+        if (abs || scaleFixed) scaleX < 0 && (scaleX = -scaleX), scaleY < 0 && (scaleY = -scaleY);
+        if (scaleFixed) {
+            if (scaleFixed === true) {
+                scaleX = scaleY = unscale ? 1 : 1 / scaleX;
+            } else {
+                let minScale;
+                if (isNumber(scaleFixed)) minScale = scaleFixed; else if (scaleFixed === "zoom-in") minScale = 1;
+                if (minScale) {
+                    if (scaleX > minScale || scaleY > minScale) scaleX = scaleY = unscale ? 1 : 1 / scaleX; else scaleX = scaleY = unscale ? 1 : 1 / minScale;
+                }
+            }
+        }
+        tempScaleData$1.scaleX = scaleX;
+        tempScaleData$1.scaleY = scaleY;
+        return tempScaleData$1;
+    },
     assignScale(scaleData, scale) {
         if (isNumber(scale)) {
             scaleData.scaleX = scaleData.scaleY = scale;
@@ -850,8 +871,8 @@ const PointHelper = {
         if (isObject(originPoints[0])) points = [], originPoints.forEach(p => points.push(p.x, p.y));
         return points;
     },
-    isSame(t, point) {
-        return float$5(t.x) === float$5(point.x) && float$5(t.y) === float$5(point.y);
+    isSame(t, point, quick) {
+        return quick ? t.x === point.x && t.y === point.y : float$5(t.x) === float$5(point.x) && float$5(t.y) === float$5(point.y);
     },
     reset(t) {
         P$7.reset(t);
@@ -926,8 +947,8 @@ class Point {
     getAtan2(to) {
         return PointHelper.getAtan2(this, to);
     }
-    isSame(point) {
-        return PointHelper.isSame(this, point);
+    isSame(point, quick) {
+        return PointHelper.isSame(this, point, quick);
     }
     reset() {
         PointHelper.reset(this);
@@ -1183,9 +1204,9 @@ const AroundHelper = {
         }
         if (!onlyBoxSize) to.x += box.x, to.y += box.y;
     },
-    getPoint(around, box, to) {
+    getPoint(around, box, to, onlyBoxSize = true) {
         if (!to) to = {};
-        AroundHelper.toPoint(around, box, to, true);
+        AroundHelper.toPoint(around, box, to, onlyBoxSize);
         return to;
     }
 };
@@ -1452,6 +1473,9 @@ const BoundsHelper = {
             y: y + height
         } ];
     },
+    getPoint(t, around, onlyBoxSize = false, to) {
+        return AroundHelper.getPoint(around, t, to, onlyBoxSize);
+    },
     hitRadiusPoint(t, point, pointMatrix) {
         if (pointMatrix) point = PointHelper.tempToInnerRadiusPointOf(point, pointMatrix);
         return point.x >= t.x - point.radiusX && point.x <= t.x + t.width + point.radiusX && (point.y >= t.y - point.radiusY && point.y <= t.y + t.height + point.radiusY);
@@ -1623,6 +1647,9 @@ class Bounds {
     getPoints() {
         return BoundsHelper.getPoints(this);
     }
+    getPoint(around, onlyBoxSize, to) {
+        return BoundsHelper.getPoint(this, around, onlyBoxSize, to);
+    }
     hitPoint(point, pointMatrix) {
         return BoundsHelper.hitPoint(this, point, pointMatrix);
     }
@@ -2767,10 +2794,10 @@ const BezierHelper = {
         const centerY = y1 + c * sin$4(startRadian + totalRadian / 2 + PI_2 * sign);
         startRadian -= PI_2 * sign;
         endRadian -= PI_2 * sign;
-        return ellipse$6(data, centerX, centerY, radius, radius, 0, startRadian / OneRadian, endRadian / OneRadian, anticlockwise, setPointBounds, setEndPoint, setStartPoint);
+        return ellipse$8(data, centerX, centerY, radius, radius, 0, startRadian / OneRadian, endRadian / OneRadian, anticlockwise, setPointBounds, setEndPoint, setStartPoint);
     },
     arc(data, x, y, radius, startAngle, endAngle, anticlockwise, setPointBounds, setEndPoint, setStartPoint) {
-        return ellipse$6(data, x, y, radius, radius, 0, startAngle, endAngle, anticlockwise, setPointBounds, setEndPoint, setStartPoint);
+        return ellipse$8(data, x, y, radius, radius, 0, startAngle, endAngle, anticlockwise, setPointBounds, setEndPoint, setStartPoint);
     },
     ellipse(data, cx, cy, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise, setPointBounds, setEndPoint, setStartPoint) {
         const rotationRadian = rotation * OneRadian;
@@ -2872,11 +2899,11 @@ const BezierHelper = {
     }
 };
-const {getPointAndSet: getPointAndSet, toTwoPointBounds: toTwoPointBounds$1, ellipse: ellipse$6} = BezierHelper;
+const {getPointAndSet: getPointAndSet, toTwoPointBounds: toTwoPointBounds$1, ellipse: ellipse$8} = BezierHelper;
 const {sin: sin$3, cos: cos$3, sqrt: sqrt$2, atan2: atan2} = Math;
-const {ellipse: ellipse$5} = BezierHelper;
+const {ellipse: ellipse$7} = BezierHelper;
 const EllipseHelper = {
     ellipticalArc(data, fromX, fromY, radiusX, radiusY, rotation, largeFlag, sweepFlag, toX, toY, curveMode) {
@@ -2914,7 +2941,7 @@ const EllipseHelper = {
         const centerY = fromY + halfY + rotationSin * cx + rotationCos * cy;
         const anticlockwise = totalRadian < 0 ? 1 : 0;
         if (curveMode || Platform.ellipseToCurve) {
-            ellipse$5(data, centerX, centerY, radiusX, radiusY, rotation, startRadian / OneRadian, endRadian / OneRadian, anticlockwise);
+            ellipse$7(data, centerX, centerY, radiusX, radiusY, rotation, startRadian / OneRadian, endRadian / OneRadian, anticlockwise);
         } else {
             if (radiusX === radiusY && !rotation) {
                 data.push(PathCommandMap.O, centerX, centerY, radiusX, startRadian / OneRadian, endRadian / OneRadian, anticlockwise);
@@ -2936,7 +2963,7 @@ const PathCommandNodeHelper = {
 const {M: M$9, m: m, L: L$9, l: l, H: H, h: h, V: V, v: v, C: C$7, c: c, S: S$1, s: s, Q: Q$6, q: q, T: T, t: t, A: A, a: a, Z: Z$7, z: z, N: N$5, D: D$6, X: X$5, G: G$5, F: F$6, O: O$6, P: P$5, U: U$5} = PathCommandMap;
-const {rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1} = BezierHelper;
+const {rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$6, quadraticCurveTo: quadraticCurveTo$1} = BezierHelper;
 const {ellipticalArc: ellipticalArc} = EllipseHelper;
@@ -3169,14 +3196,14 @@ const PathConvert = {
                 break;
               case G$5:
-                ellipse$4(curveMode ? data : copyData(data, old, i, 9), old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], old[i + 6], old[i + 7], old[i + 8], null, setEndPoint$1);
+                ellipse$6(curveMode ? data : copyData(data, old, i, 9), old[i + 1], old[i + 2], old[i + 3], old[i + 4], old[i + 5], old[i + 6], old[i + 7], old[i + 8], null, setEndPoint$1);
                 x = setEndPoint$1.x;
                 y = setEndPoint$1.y;
                 i += 9;
                 break;
               case F$6:
-                curveMode ? ellipse$4(data, old[i + 1], old[i + 2], old[i + 3], old[i + 4], 0, 0, 360, false) : copyData(data, old, i, 5);
+                curveMode ? ellipse$6(data, old[i + 1], old[i + 2], old[i + 3], old[i + 4], 0, 0, 360, false) : copyData(data, old, i, 5);
                 x = old[i + 1] + old[i + 3];
                 y = old[i + 2];
                 i += 5;
@@ -3330,7 +3357,7 @@ const PathCommandDataHelper = {
     drawEllipse(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
         BezierHelper.ellipse(null, x, y, radiusX, radiusY, isNull(rotation) ? 0 : rotation, isNull(startAngle) ? 0 : startAngle, isNull(endAngle) ? 360 : endAngle, anticlockwise, null, null, startPoint);
         data.push(M$8, startPoint.x, startPoint.y);
-        ellipse$3(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+        ellipse$5(data, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
     },
     drawArc(data, x, y, radius, startAngle, endAngle, anticlockwise) {
         BezierHelper.arc(null, x, y, radius, isNull(startAngle) ? 0 : startAngle, isNull(endAngle) ? 360 : endAngle, anticlockwise, null, null, startPoint);
@@ -3342,9 +3369,9 @@ const PathCommandDataHelper = {
     }
 };
-const {ellipse: ellipse$3, arc: arc$2} = PathCommandDataHelper;
+const {ellipse: ellipse$5, arc: arc$2} = PathCommandDataHelper;
-const {moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo: quadraticCurveTo, bezierCurveTo: bezierCurveTo, closePath: closePath$3, beginPath: beginPath, rect: rect$2, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse: drawEllipse, drawArc: drawArc, drawPoints: drawPoints$2} = PathCommandDataHelper;
+const {moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo: quadraticCurveTo, bezierCurveTo: bezierCurveTo, closePath: closePath$3, beginPath: beginPath, rect: rect$2, roundRect: roundRect$1, ellipse: ellipse$4, arc: arc$1, arcTo: arcTo$2, drawEllipse: drawEllipse, drawArc: drawArc, drawPoints: drawPoints$2} = PathCommandDataHelper;
 class PathCreator {
     set path(value) {
@@ -3401,7 +3428,7 @@ class PathCreator {
         return this;
     }
     ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
-        ellipse$2(this.__path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+        ellipse$4(this.__path, x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
         this.paint();
         return this;
     }
@@ -3523,7 +3550,7 @@ const PathDrawer = {
 const {M: M$6, 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 {toTwoPointBounds: toTwoPointBounds, toTwoPointBoundsByQuadraticCurve: toTwoPointBoundsByQuadraticCurve, arcTo: arcTo$1, arc: arc, ellipse: ellipse$3} = BezierHelper;
 const {addPointBounds: addPointBounds, copy: copy$9, addPoint: addPoint$1, setPoint: setPoint$3, addBounds: addBounds, toBounds: toBounds$2} = TwoPointBoundsHelper;
@@ -3606,7 +3633,7 @@ const PathBounds = {
                 break;
               case G$2:
-                ellipse$1(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], data[i + 7], data[i + 8], tempPointBounds, setEndPoint);
+                ellipse$3(null, data[i + 1], data[i + 2], data[i + 3], data[i + 4], data[i + 5], data[i + 6], data[i + 7], data[i + 8], tempPointBounds, setEndPoint);
                 i === 0 ? copy$9(setPointBounds, tempPointBounds) : addPointBounds(setPointBounds, tempPointBounds);
                 x = setEndPoint.x;
                 y = setEndPoint.y;
@@ -4102,6 +4129,7 @@ const ImageManager = {
         return image;
     },
     recycle(image) {
+        if (image.parent) image = image.parent;
         image.use--;
         setTimeout(() => {
             if (!image.use) {
@@ -4270,8 +4298,10 @@ class LeaferImage {
         return undefined;
     }
     clearLevels(_checkUse) {}
+    destroyFilter() {}
     destroy() {
         this.clearLevels();
+        this.destroyFilter();
         const {view: view} = this;
         if (view && view.close) view.close();
         this.config = {
@@ -4468,7 +4498,6 @@ function dimType(defaultValue) {
             if (this.__setAttr(key, value)) {
                 const data = this.__;
                 DataHelper.stintSet(data, "__useDim", data.dim || data.bright || data.dimskip);
-                this.__layout.surfaceChange();
             }
         }
     }));
@@ -4518,7 +4547,6 @@ function sortType(defaultValue) {
     return decorateLeafAttr(defaultValue, key => attr({
         set(value) {
             if (this.__setAttr(key, value)) {
-                this.__layout.surfaceChange();
                 this.waitParent(() => {
                     this.parent.__layout.childrenSortChange();
                 });
@@ -4555,7 +4583,6 @@ function hitType(defaultValue) {
         set(value) {
             if (this.__setAttr(key, value)) {
                 this.__layout.hitCanvasChanged = true;
-                if (Debug.showBounds === "hit") this.__layout.surfaceChange();
                 if (this.leafer) this.leafer.updateCursor();
             }
         }
@@ -4761,6 +4788,10 @@ const LeafHelper = {
         if (layout.stateStyleChanged) leaf.updateState();
         if (layout.opacityChanged) updateAllWorldOpacity(leaf);
         leaf.__updateChange();
+        if (layout.surfaceChanged) {
+            if (leaf.__hasComplex) L$4.updateComplex(leaf);
+            layout.surfaceChanged = false;
+        }
     },
     updateAllChange(leaf) {
         updateChange$1(leaf);
@@ -4785,6 +4816,9 @@ const LeafHelper = {
         if (!fromWorld) fromWorld = leaf.__nowWorld;
         if (leaf.__worldFlipped || Platform.fullImageShadow) currentCanvas.copyWorldByReset(fromCanvas, fromWorld, leaf.__nowWorld, blendMode, onlyResetTransform); else currentCanvas.copyWorldToInner(fromCanvas, fromWorld, leaf.__layout.renderBounds, blendMode);
     },
+    renderComplex(_leaf, _canvas, _options) {},
+    updateComplex(_leaf) {},
+    checkComplex(_leaf) {},
     moveWorld(t, x, y = 0, isInnerPoint, transition) {
         const local = isObject(x) ? Object.assign({}, x) : {
             x: x,
@@ -4896,6 +4930,9 @@ const LeafHelper = {
         divideParent(matrix$3, relative.scrollWorldTransform);
         return temp ? matrix$3 : Object.assign({}, matrix$3);
     },
+    updateScaleFixedWorld(_t) {},
+    updateOuterBounds(_t) {},
+    cacheId(_t) {},
     drop(t, parent, index, resize) {
         t.setTransform(L$4.getRelativeWorld(t, parent, true), resize);
         parent.add(t, index);
@@ -4946,7 +4983,8 @@ const LeafBoundsHelper = {
         return target.__.eraser || target.__.visible === 0 ? null : target.__layout.localStrokeBounds;
     },
     localRenderBounds(target) {
-        return target.__.eraser || target.__.visible === 0 ? null : target.__layout.localRenderBounds;
+        const {__: __, __layout: __layout} = target;
+        return __.eraser || __.visible === 0 ? null : __layout.localOuterBounds || __layout.localRenderBounds;
     },
     maskLocalBoxBounds(target, index) {
         return checkMask(target, index) && target.__localBoxBounds;
@@ -4955,7 +4993,8 @@ const LeafBoundsHelper = {
         return checkMask(target, index) && target.__layout.localStrokeBounds;
     },
     maskLocalRenderBounds(target, index) {
-        return checkMask(target, index) && target.__layout.localRenderBounds;
+        const {__layout: __layout} = target;
+        return checkMask(target, index) && (__layout.localOuterBounds || __layout.localRenderBounds);
     },
     excludeRenderBounds(child, options) {
         if (options.bounds && !options.bounds.hit(child.__world, options.matrix)) return true;
@@ -5079,12 +5118,12 @@ const BranchHelper = {
             w.height *= scaleY;
             w.scaleX *= scaleX;
             w.scaleY *= scaleY;
-            if (branch.isBranch) scale$2(branch, x, y, scaleX, scaleY, a, b);
+            if (branch.isBranch) scale$3(branch, x, y, scaleX, scaleY, a, b);
         }
     }
 };
-const {pushAllChildBranch: pushAllChildBranch$1, pushAllBranchStack: pushAllBranchStack, updateBoundsByBranchStack: updateBoundsByBranchStack, move: move$9, scale: scale$2} = BranchHelper;
+const {pushAllChildBranch: pushAllChildBranch$1, pushAllBranchStack: pushAllBranchStack, updateBoundsByBranchStack: updateBoundsByBranchStack, move: move$9, scale: scale$3} = BranchHelper;
 const WaitHelper = {
     run(wait) {
@@ -5475,7 +5514,6 @@ class LeafLayout {
     }
     opacityChange() {
         this.opacityChanged = true;
-        this.surfaceChanged || this.surfaceChange();
     }
     childrenSortChange() {
         if (!this.childrenSortChanged) {
@@ -5582,7 +5620,7 @@ class BoundsEvent extends Event {
         }
     }
     static emitWorld(leaf) {
-        if (leaf.leaferIsReady) leaf.emit(WORLD, this);
+        if (leaf.leaferIsReady) leaf.emit(WORLD, leaf);
     }
 }
@@ -5968,6 +6006,7 @@ const LeafMatrix = {
         const {parent: parent, __layout: __layout, __world: __world, __scrollWorld: __scrollWorld, __: __} = this;
         multiplyParent$2(this.__local || __layout, parent ? parent.__scrollWorld || parent.__world : defaultWorld, __world, !!__layout.affectScaleOrRotation, __);
         if (__scrollWorld) translateInner(Object.assign(__scrollWorld, __world), __.scrollX, __.scrollY);
+        if (__layout.scaleFixed) LeafHelper.updateScaleFixedWorld(this);
     },
     __updateLocalMatrix() {
         if (this.__local) {
@@ -5993,7 +6032,7 @@ const {updateMatrix: updateMatrix$3, updateAllMatrix: updateAllMatrix$3} = LeafH
 const {updateBounds: updateBounds$2} = BranchHelper;
-const {toOuterOf: toOuterOf$2, copyAndSpread: copyAndSpread$3, copy: copy$6} = BoundsHelper;
+const {toOuterOf: toOuterOf$2, copyAndSpread: copyAndSpread$4, copy: copy$6} = BoundsHelper;
 const {toBounds: toBounds$1} = PathBounds;
@@ -6001,6 +6040,7 @@ const LeafBounds = {
     __updateWorldBounds() {
         const {__layout: __layout, __world: __world} = this;
         toOuterOf$2(__layout.renderBounds, __world, __world);
+        if (this.__hasComplex) LeafHelper.checkComplex(this);
         if (__layout.resized) {
             if (__layout.resized === "inner") this.__onUpdateSize();
             if (this.__hasLocalEvent) BoundsEvent.emitLocal(this);
@@ -6050,6 +6090,7 @@ const LeafBounds = {
             layout.renderChanged = undefined;
             if (this.parent) this.parent.__layout.renderChange();
         }
+        if (layout.outerScale) LeafHelper.updateOuterBounds(this);
         layout.resized || (layout.resized = "local");
         layout.boundsChanged = undefined;
     },
@@ -6100,11 +6141,11 @@ const LeafBounds = {
     },
     __updateStrokeBounds(_bounds) {
         const layout = this.__layout;
-        copyAndSpread$3(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
+        copyAndSpread$4(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
     },
     __updateRenderBounds(_bounds) {
         const layout = this.__layout, {renderSpread: renderSpread} = layout;
-        isNumber(renderSpread) && renderSpread <= 0 ? copy$6(layout.renderBounds, layout.strokeBounds) : copyAndSpread$3(layout.renderBounds, layout.boxBounds, renderSpread);
+        isNumber(renderSpread) && renderSpread <= 0 ? copy$6(layout.renderBounds, layout.strokeBounds) : copyAndSpread$4(layout.renderBounds, layout.boxBounds, renderSpread);
     }
 };
@@ -6116,7 +6157,7 @@ const LeafRender = {
             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;
+            canvas.opacity = options.ignoreOpacity ? 1 : options.dimOpacity && !data.dimskip ? data.opacity * options.dimOpacity : data.opacity;
             if (this.__.__single) {
                 if (data.eraser === "path") return this.__renderEraser(canvas, options);
                 const tempCanvas = canvas.getSameCanvas(true, true);
@@ -6170,7 +6211,7 @@ const BranchRender = {
                 if (data.eraser === "path") return this.__renderEraser(canvas, options);
                 const tempCanvas = canvas.getSameCanvas(false, true);
                 this.__renderBranch(tempCanvas, options);
-                canvas.opacity = options.dimOpacity ? data.opacity * options.dimOpacity : data.opacity;
+                canvas.opacity = options.ignoreOpacity ? 1 : options.dimOpacity ? data.opacity * options.dimOpacity : data.opacity;
                 canvas.copyWorldByReset(tempCanvas, nowWorld, nowWorld, data.__blendMode, true);
                 tempCanvas.recycle(nowWorld);
             } else {
@@ -6186,7 +6227,7 @@ const BranchRender = {
             const {children: children} = this;
             for (let i = 0, len = children.length; i < len; i++) {
                 child = children[i];
-                excludeRenderBounds$1(child, options) || (child.__.complex ? child.__renderComplex(canvas, options) : child.__render(canvas, options));
+                excludeRenderBounds$1(child, options) || (child.__hasComplex ? LeafHelper.renderComplex(child, canvas, options) : child.__render(canvas, options));
             }
         }
     },
@@ -6200,11 +6241,9 @@ const BranchRender = {
     }
 };
-const tempScaleData$1 = {};
 const {LEAF: LEAF, create: create} = IncrementId;
-const {stintSet: stintSet$4} = DataHelper;
+const {stintSet: stintSet$6} = DataHelper;
 const {toInnerPoint: toInnerPoint, toOuterPoint: toOuterPoint, multiplyParent: multiplyParent$1} = MatrixHelper;
@@ -6212,6 +6251,8 @@ const {toOuterOf: toOuterOf$1} = BoundsHelper;
 const {copy: copy$5, move: move$8} = PointHelper;
+const {getScaleFixedData: getScaleFixedData$1} = MathHelper;
 const {moveLocal: moveLocal, zoomOfLocal: zoomOfLocal, rotateOfLocal: rotateOfLocal, skewOfLocal: skewOfLocal, moveWorld: moveWorld, zoomOfWorld: zoomOfWorld, rotateOfWorld: rotateOfWorld, skewOfWorld: skewOfWorld, transform: transform, transformWorld: transformWorld, setTransform: setTransform, getFlipTransform: getFlipTransform, getLocalOrigin: getLocalOrigin, getRelativeWorld: getRelativeWorld, drop: drop} = LeafHelper;
 let Leaf = class Leaf {
@@ -6370,6 +6411,7 @@ let Leaf = class Leaf {
             this.__level = this.parent ? this.parent.__level + 1 : 1;
             if (this.animation) this.__runAnimation("in");
             if (this.__bubbleMap) this.__emitLifeEvent(ChildEvent.MOUNTED);
+            if (leafer.cacheId) LeafHelper.cacheId(this);
         } else {
             this.__emitLifeEvent(ChildEvent.UNMOUNTED);
         }
@@ -6487,8 +6529,8 @@ let Leaf = class Leaf {
             const cameraWorld = this.__cameraWorld, world = this.__world;
             multiplyParent$1(world, options.matrix, cameraWorld, undefined, world);
             toOuterOf$1(this.__layout.renderBounds, cameraWorld, cameraWorld);
-            stintSet$4(cameraWorld, "half", world.half);
-            stintSet$4(cameraWorld, "ignorePixelSnap", world.ignorePixelSnap);
+            stintSet$6(cameraWorld, "half", world.half);
+            stintSet$6(cameraWorld, "ignorePixelSnap", world.ignorePixelSnap);
             return cameraWorld;
         } else {
             return this.__world;
@@ -6499,13 +6541,8 @@ let Leaf = class Leaf {
         if (scaleX < 0) scaleX = -scaleX;
         return scaleX > 1 ? scaleX : 1;
     }
-    getRenderScaleData(abs, scaleFixed) {
-        let {scaleX: scaleX, scaleY: scaleY} = ImageManager.patternLocked ? this.__world : this.__nowWorld;
-        if (abs) scaleX < 0 && (scaleX = -scaleX), scaleY < 0 && (scaleY = -scaleY);
-        if (scaleFixed === true || scaleFixed === "zoom-in" && scaleX > 1 && scaleY > 1) scaleX = scaleY = 1;
-        tempScaleData$1.scaleX = scaleX;
-        tempScaleData$1.scaleY = scaleY;
-        return tempScaleData$1;
+    getRenderScaleData(abs, scaleFixed, unscale = true) {
+        return getScaleFixedData$1(ImageManager.patternLocked ? this.__world : this.__nowWorld || this.__world, scaleFixed, unscale, abs);
     }
     getTransform(relative) {
         return this.__layout.getTransform(relative || "local");
@@ -6544,14 +6581,16 @@ let Leaf = class Leaf {
             relative.innerToWorld(world, to, distance);
             world = to ? to : world;
         }
-        toInnerPoint(this.scrollWorldTransform, world, to, distance);
+        toInnerPoint(this.worldTransform, world, to, distance);
     }
     innerToWorld(inner, to, distance, relative) {
-        toOuterPoint(this.scrollWorldTransform, inner, to, distance);
+        toOuterPoint(this.worldTransform, inner, to, distance);
         if (relative) relative.worldToInner(to ? to : inner, null, distance);
     }
     getBoxPoint(world, relative, distance, change) {
-        return this.getBoxPointByInner(this.getInnerPoint(world, relative, distance, change), null, null, true);
+        const inner = this.getInnerPoint(world, relative, distance, change);
+        if (distance) return inner;
+        return this.getBoxPointByInner(inner, null, null, true);
     }
     getBoxPointByInner(inner, _relative, _distance, change) {
         const point = change ? inner : Object.assign({}, inner), {x: x, y: y} = this.boxBounds;
@@ -6667,7 +6706,6 @@ let Leaf = class Leaf {
     __drawHitPath(_canvas) {}
     __updateHitCanvas() {}
     __render(_canvas, _options) {}
-    __renderComplex(_canvas, _options) {}
     __drawFast(_canvas, _options) {}
     __draw(_canvas, _options, _originCanvas) {}
     __clip(_canvas, _options) {}
@@ -6678,7 +6716,7 @@ let Leaf = class Leaf {
     __drawPath(_canvas) {}
     __drawRenderPath(_canvas) {}
     __updatePath() {}
-    __updateRenderPath() {}
+    __updateRenderPath(_updateCache) {}
     getMotionPathData() {
         return Plugin.need("path");
     }
@@ -6752,9 +6790,11 @@ let Branch = class Branch extends Leaf {
         return 0;
     }
     __updateRenderSpread() {
+        let layout;
         const {children: children} = this;
         for (let i = 0, len = children.length; i < len; i++) {
-            if (children[i].__layout.renderSpread) return 1;
+            layout = children[i].__layout;
+            if (layout.renderSpread || layout.localOuterBounds) return 1;
         }
         return 0;
     }
@@ -7013,7 +7053,7 @@ class LeafLevelList {
     }
 }
-const version = "2.0.2";
+const version = "2.0.4";
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() {
@@ -8006,7 +8046,7 @@ class Selector {
         this.config = {};
         if (userConfig) this.config = DataHelper.default(userConfig, this.config);
         this.picker = new Picker(this.target = target, this);
-        this.finder = Creator.finder && Creator.finder();
+        this.finder = Creator.finder && Creator.finder(target, this.config);
     }
     getByPoint(hitPoint, hitRadius, options) {
         const {target: target, picker: picker} = this;
@@ -8048,7 +8088,9 @@ function effectType(defaultValue) {
         set(value) {
             this.__setAttr(key, value);
             if (value) this.__.__useEffect = true;
-            this.__layout.renderChanged || this.__layout.renderChange();
+            const layout = this.__layout;
+            layout.renderChanged || layout.renderChange();
+            layout.surfaceChange();
         }
     }));
 }
@@ -8151,7 +8193,7 @@ const Transition = {
 const {parse: parse, objectToCanvasData: objectToCanvasData} = PathConvert;
-const {stintSet: stintSet$3} = DataHelper, {hasTransparent: hasTransparent$2} = ColorConvert;
+const {stintSet: stintSet$5} = DataHelper, {hasTransparent: hasTransparent$2} = ColorConvert;
 const emptyPaint = {
     originPaint: {}
@@ -8220,7 +8262,7 @@ class UIData extends LeafData {
     setFill(value) {
         if (this.__naturalWidth) this.__removeNaturalSize();
         if (isString(value) || !value) {
-            stintSet$3(this, "__isTransparentFill", hasTransparent$2(value));
+            stintSet$5(this, "__isTransparentFill", hasTransparent$2(value));
             this.__isFills && this.__removePaint("fill", true);
             this._fill = value;
         } else if (isObject(value)) {
@@ -8229,7 +8271,7 @@ class UIData extends LeafData {
     }
     setStroke(value) {
         if (isString(value) || !value) {
-            stintSet$3(this, "__isTransparentStroke", hasTransparent$2(value));
+            stintSet$5(this, "__isTransparentStroke", hasTransparent$2(value));
             this.__isStrokes && this.__removePaint("stroke", true);
             this._stroke = value;
         } else if (isObject(value)) {
@@ -8262,15 +8304,16 @@ class UIData extends LeafData {
         this.__needComputePaint = undefined;
     }
     __getRealStrokeWidth(childStyle) {
-        let {strokeWidth: strokeWidth, strokeWidthFixed: strokeWidthFixed} = this;
+        let {strokeWidth: strokeWidth, strokeScaleFixed: strokeScaleFixed} = this;
         if (childStyle) {
             if (childStyle.strokeWidth) strokeWidth = childStyle.strokeWidth;
-            if (!isUndefined(childStyle.strokeWidthFixed)) strokeWidthFixed = childStyle.strokeWidthFixed;
+            if (!isUndefined(childStyle.strokeScaleFixed)) strokeScaleFixed = childStyle.strokeScaleFixed;
         }
-        if (strokeWidthFixed) {
-            const scale = this.__leaf.getClampRenderScale();
-            return scale > 1 ? strokeWidth / scale : strokeWidth;
-        } else return strokeWidth;
+        if (strokeScaleFixed) {
+            const {scaleX: scaleX} = this.__leaf.getRenderScaleData(true, strokeScaleFixed, false);
+            if (scaleX !== 1) return strokeWidth * scaleX;
+        }
+        return strokeWidth;
     }
     __setPaint(attrName, value) {
         this.__setInput(attrName, value);
@@ -8287,11 +8330,11 @@ class UIData extends LeafData {
         if (removeInput) this.__removeInput(attrName);
         PaintImage.recycleImage(attrName, this);
         if (attrName === "fill") {
-            stintSet$3(this, "__isAlphaPixelFill", undefined);
+            stintSet$5(this, "__isAlphaPixelFill", undefined);
             this._fill = this.__isFills = undefined;
         } else {
-            stintSet$3(this, "__isAlphaPixelStroke", undefined);
-            stintSet$3(this, "__hasMultiStrokeStyle", undefined);
+            stintSet$5(this, "__isAlphaPixelStroke", undefined);
+            stintSet$5(this, "__hasMultiStrokeStyle", undefined);
             this._stroke = this.__isStrokes = undefined;
         }
     }
@@ -8352,7 +8395,11 @@ class EllipseData extends UIData {
 class PolygonData extends LineData {}
-class StarData extends UIData {}
+class StarData extends UIData {
+    get __boxStroke() {
+        return !this.__pathInputed;
+    }
+}
 class PathData extends UIData {
     get __pathInputed() {
@@ -8456,7 +8503,7 @@ const UIBounds = {
         const data = this.__, {strokeAlign: strokeAlign, __maxStrokeWidth: strokeWidth} = data, box = this.__box;
         if ((data.stroke || data.hitStroke === "all") && strokeWidth && strokeAlign !== "inside") {
             boxSpread = spread = strokeAlign === "center" ? strokeWidth / 2 : strokeWidth;
-            if (!data.__boxStroke) {
+            if (!data.__boxStroke || data.__useArrow) {
                 const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * spread;
                 const storkeCapAddWidth = data.strokeCap === "none" ? 0 : strokeWidth;
                 spread += Math.max(miterLimitAddWidth, storkeCapAddWidth);
@@ -8486,23 +8533,23 @@ const UIBounds = {
     }
 };
-const {stintSet: stintSet$2} = DataHelper;
+const {stintSet: stintSet$4} = DataHelper;
 const UIRender = {
     __updateChange() {
         const data = this.__;
         if (data.__useStroke) {
             const useStroke = data.__useStroke = !!(data.stroke && data.strokeWidth);
-            stintSet$2(this.__world, "half", useStroke && data.strokeAlign === "center" && data.strokeWidth % 2);
-            stintSet$2(data, "__fillAfterStroke", useStroke && data.strokeAlign === "outside" && data.fill && !data.__isTransparentFill);
+            stintSet$4(this.__world, "half", useStroke && data.strokeAlign === "center" && data.strokeWidth % 2);
+            stintSet$4(data, "__fillAfterStroke", useStroke && data.strokeAlign === "outside" && data.fill && !data.__isTransparentFill);
         }
         if (data.__useEffect) {
             const {shadow: shadow, fill: fill, stroke: stroke} = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
-            stintSet$2(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"));
+            stintSet$4(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();
-        stintSet$2(data, "__complex", data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
+        stintSet$4(data, "__complex", data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
     },
     __drawFast(canvas, options) {
         drawFast(this, canvas, options);
@@ -8613,6 +8660,12 @@ let UI = UI_1 = class UI extends Leaf {
     get isFrame() {
         return false;
     }
+    set strokeWidthFixed(value) {
+        this.strokeScaleFixed = value;
+    }
+    get strokeWidthFixed() {
+        return this.strokeScaleFixed;
+    }
     set scale(value) {
         MathHelper.assignScale(this, value);
     }
@@ -8668,6 +8721,9 @@ let UI = UI_1 = class UI extends Leaf {
     getPathString(curve, pathForRender, floatLength) {
         return PathConvert.stringify(this.getPath(curve, pathForRender), floatLength);
     }
+    asPath(curve, pathForRender) {
+        this.path = this.getPath(curve, pathForRender);
+    }
     load() {
         this.__.__computePaint();
     }
@@ -8677,16 +8733,18 @@ let UI = UI_1 = class UI extends Leaf {
             data.lazy && !this.__inLazyBounds && !Export.running ? data.__needComputePaint = true : data.__computePaint();
         }
     }
-    __updateRenderPath() {
+    __updateRenderPath(updateCache) {
         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);
+            if (data.__useArrow) PathArrow.addArrows(this, updateCache);
         } else data.__pathForRender && (data.__pathForRender = undefined);
     }
     __drawRenderPath(canvas) {
+        const data = this.__;
         canvas.beginPath();
-        this.__drawPathByData(canvas, this.__.__pathForRender);
+        if (data.__useArrow) PathArrow.updateArrow(this);
+        this.__drawPathByData(canvas, data.__pathForRender);
     }
     __drawPath(canvas) {
         canvas.beginPath();
@@ -8735,6 +8793,7 @@ let UI = UI_1 = class UI extends Leaf {
     static setEditOuter(_toolName) {}
     static setEditInner(_editorName) {}
     destroy() {
+        this.__.__willDestroy = true;
         this.fill = this.stroke = null;
         if (this.__animate) this.killAnimate();
         super.destroy();
@@ -8851,7 +8910,7 @@ __decorate([ strokeType("inside") ], UI.prototype, "strokeAlign", void 0);
 __decorate([ strokeType(1, true) ], UI.prototype, "strokeWidth", void 0);
-__decorate([ strokeType(false) ], UI.prototype, "strokeWidthFixed", void 0);
+__decorate([ strokeType(false) ], UI.prototype, "strokeScaleFixed", void 0);
 __decorate([ strokeType("none") ], UI.prototype, "strokeCap", void 0);
@@ -9352,6 +9411,9 @@ let Box = class Box extends Group {
     get isBranchLeaf() {
         return true;
     }
+    get __useSelfBox() {
+        return this.pathInputed;
+    }
     constructor(data) {
         super(data);
         this.__layout.renderChanged || this.__layout.renderChange();
@@ -9367,7 +9429,7 @@ let Box = class Box extends Group {
     }
     __updateRectBoxBounds() {}
     __updateBoxBounds(_secondLayout) {
-        if (this.children.length && !this.pathInputed) {
+        if (this.children.length && !this.__useSelfBox) {
             const data = this.__;
             if (data.__autoSide) {
                 if (data.__hasSurface) this.__extraUpdate();
@@ -9476,38 +9538,38 @@ __decorate([ affectRenderBoundsType("hide") ], Frame.prototype, "overflow", void
 Frame = __decorate([ registerUI() ], Frame);
-const {moveTo: moveTo$3, closePath: closePath$2, ellipse: ellipse} = PathCommandDataHelper;
+const {moveTo: moveTo$3, closePath: closePath$2, ellipse: ellipse$2} = PathCommandDataHelper;
 let Ellipse = class Ellipse extends UI {
     get __tag() {
         return "Ellipse";
     }
     __updatePath() {
-        const {width: width, height: height, innerRadius: innerRadius, startAngle: startAngle, endAngle: endAngle} = this.__;
+        const data = this.__, {width: width, height: height, innerRadius: innerRadius, startAngle: startAngle, endAngle: endAngle} = data;
         const rx = width / 2, ry = height / 2;
-        const path = this.__.path = [];
+        const path = data.path = [];
         let open;
         if (innerRadius) {
             if (startAngle || endAngle) {
-                if (innerRadius < 1) ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius, 0, startAngle, endAngle, false); else open = true;
-                ellipse(path, rx, ry, rx, ry, 0, endAngle, startAngle, true);
+                if (innerRadius < 1) ellipse$2(path, rx, ry, rx * innerRadius, ry * innerRadius, 0, startAngle, endAngle, false); else open = true;
+                ellipse$2(path, rx, ry, rx, ry, 0, endAngle, startAngle, true);
             } else {
                 if (innerRadius < 1) {
-                    ellipse(path, rx, ry, rx * innerRadius, ry * innerRadius);
+                    ellipse$2(path, rx, ry, rx * innerRadius, ry * innerRadius);
                     moveTo$3(path, width, ry);
                 }
-                ellipse(path, rx, ry, rx, ry, 0, 360, 0, true);
+                ellipse$2(path, rx, ry, rx, ry, 0, 360, 0, true);
             }
         } else {
             if (startAngle || endAngle) {
                 moveTo$3(path, rx, ry);
-                ellipse(path, rx, ry, rx, ry, 0, startAngle, endAngle, false);
+                ellipse$2(path, rx, ry, rx, ry, 0, startAngle, endAngle, false);
             } else {
-                ellipse(path, rx, ry, rx, ry);
+                ellipse$2(path, rx, ry, rx, ry);
             }
         }
         if (!open) closePath$2(path);
-        if (Platform.ellipseToCurve) this.__.path = this.getPath(true);
+        if (Platform.ellipseToCurve || data.__useArrow) data.path = this.getPath(true);
     }
 };
@@ -9731,7 +9793,7 @@ __decorate([ resizeType() ], Canvas.prototype, "contextSettings", void 0);
 Canvas = __decorate([ registerUI() ], Canvas);
-const {copyAndSpread: copyAndSpread$2, includes: includes, spread: spread, setList: setList} = BoundsHelper, {stintSet: stintSet$1} = DataHelper;
+const {copyAndSpread: copyAndSpread$3, includes: includes, spread: spread, setList: setList} = BoundsHelper, {stintSet: stintSet$3} = DataHelper;
 let Text = class Text extends UI {
     get __tag() {
@@ -9748,9 +9810,9 @@ let Text = class Text extends UI {
         data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
         data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * .7) / 2;
         data.__font = `${italic ? "italic " : ""}${textCase === "small-caps" ? "small-caps " : ""}${fontWeight !== "normal" ? fontWeight + " " : ""}${fontSize || 12}px ${fontFamily || "caption"}`;
-        stintSet$1(data, "__padding", padding && MathHelper.fourNumber(padding));
-        stintSet$1(data, "__clipText", textOverflow !== "show" && !data.__autoSize);
-        stintSet$1(data, "__isCharMode", width || height || data.__letterSpacing || textCase !== "none");
+        stintSet$3(data, "__padding", padding && MathHelper.fourNumber(padding));
+        stintSet$3(data, "__clipText", textOverflow !== "show" && !data.__autoSize);
+        stintSet$3(data, "__isCharMode", width || height || data.__letterSpacing || textCase !== "none");
         data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === "") ? data.placeholder : data.text, this.__);
     }
     __updateBoxBounds() {
@@ -9785,7 +9847,7 @@ let Text = class Text extends UI {
     }
     __updateRenderBounds() {
         const {renderBounds: renderBounds, renderSpread: renderSpread} = this.__layout;
-        copyAndSpread$2(renderBounds, this.__.__textBoxBounds, renderSpread);
+        copyAndSpread$3(renderBounds, this.__.__textBoxBounds, renderSpread);
         if (this.__box) this.__box.__layout.renderBounds = renderBounds;
     }
     __updateChange() {
@@ -10047,7 +10109,7 @@ let App = class App extends Leafer {
         if (this.viewReady) this.renderer.update();
     }
     __render(canvas, options) {
-        if (canvas.context) this.forEach(leafer => options.matrix ? leafer.__render(canvas, options) : canvas.copyWorld(leafer.canvas, options.bounds));
+        if (canvas.context) this.forEach(leafer => options.matrix ? leafer.__render(canvas, options) : canvas.copyWorld(leafer.canvas, options.bounds, undefined, undefined, true));
     }
     __onResize(event) {
         this.forEach(leafer => leafer.resize(event));
@@ -11099,6 +11161,14 @@ class InteractionBase {
     stopDragAnimate() {
         this.dragger.stopAnimate();
     }
+    replaceDownTarget(target) {
+        const {downData: downData} = this;
+        if (downData && target) {
+            const {path: path} = downData;
+            path.remove(path.list[0]);
+            path.addAt(target, 0);
+        }
+    }
     updateDownData(data, options, merge) {
         const {downData: downData} = this;
         if (!data && downData) data = downData;
@@ -11602,8 +11672,8 @@ function fills(fills, ui, canvas, renderOptions) {
             canvas.save();
             if (item.transform) canvas.transform(item.transform);
             if (originPaint.scaleFixed) {
-                const {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true);
-                if (originPaint.scaleFixed === true || originPaint.scaleFixed === "zoom-in" && scaleX > 1 && scaleY > 1) canvas.scale(1 / scaleX, 1 / scaleY);
+                const {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, originPaint.scaleFixed, false);
+                if (scaleX !== 1) canvas.scale(scaleX, scaleY);
             }
             if (originPaint.blendMode) canvas.blendMode = originPaint.blendMode;
             fillPathOrText(ui, canvas, renderOptions);
@@ -11774,7 +11844,7 @@ function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas, renderO
     }
 }
-const {getSpread: getSpread, copyAndSpread: copyAndSpread$1, toOuterOf: toOuterOf, getOuterOf: getOuterOf, getByMove: getByMove, move: move$7, getIntersectData: getIntersectData} = BoundsHelper;
+const {getSpread: getSpread, copyAndSpread: copyAndSpread$2, toOuterOf: toOuterOf, getOuterOf: getOuterOf, getByMove: getByMove, move: move$7, getIntersectData: getIntersectData} = BoundsHelper;
 const tempBounds$2 = {};
@@ -11782,7 +11852,7 @@ function shape(ui, current, options) {
     const canvas = current.getSameCanvas();
     const currentBounds = current.bounds, nowWorld = ui.__nowWorld, layout = ui.__layout;
     const nowWorldShapeBounds = ui.__nowWorldShapeBounds || (ui.__nowWorldShapeBounds = {});
-    toOuterOf(layout.strokeSpread ? (copyAndSpread$1(tempBounds$2, layout.boxBounds, layout.strokeSpread),
+    toOuterOf(layout.strokeSpread ? (copyAndSpread$2(tempBounds$2, layout.boxBounds, layout.strokeSpread),
     tempBounds$2) : layout.boxBounds, nowWorld, nowWorldShapeBounds);
     let bounds, renderBounds, matrix, fitMatrix, shapeBounds, worldCanvas;
     let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true);
@@ -11838,7 +11908,7 @@ function shape(ui, current, options) {
 let recycleMap;
-const {stintSet: stintSet} = DataHelper, {hasTransparent: hasTransparent$1} = ColorConvert;
+const {stintSet: stintSet$2} = DataHelper, {hasTransparent: hasTransparent$1} = ColorConvert;
 function compute(attrName, ui) {
     const data = ui.__, leafPaints = [];
@@ -11862,12 +11932,12 @@ function compute(attrName, ui) {
             isTransparent = true;
         }
         if (attrName === "fill") {
-            stintSet(data, "__isAlphaPixelFill", isAlphaPixel);
-            stintSet(data, "__isTransparentFill", isTransparent);
+            stintSet$2(data, "__isAlphaPixelFill", isAlphaPixel);
+            stintSet$2(data, "__isTransparentFill", isTransparent);
         } else {
-            stintSet(data, "__isAlphaPixelStroke", isAlphaPixel);
-            stintSet(data, "__isTransparentStroke", isTransparent);
-            stintSet(data, "__hasMultiStrokeStyle", maxChildStrokeWidth);
+            stintSet$2(data, "__isAlphaPixelStroke", isAlphaPixel);
+            stintSet$2(data, "__isTransparentStroke", isTransparent);
+            stintSet$2(data, "__hasMultiStrokeStyle", maxChildStrokeWidth);
         }
     } else {
         data.__removePaint(attrName, false);
@@ -11940,12 +12010,12 @@ const PaintModule = {
 let cache$1, box$2 = new Bounds;
-const {isSame: isSame} = BoundsHelper;
+const {isSame: isSame$1} = BoundsHelper;
 function image(ui, attrName, paint, boxBounds, firstUse) {
     let leafPaint, event;
     const image = ImageManager.get(paint, paint.type);
-    if (cache$1 && paint === cache$1.paint && isSame(boxBounds, cache$1.boxBounds)) {
+    if (cache$1 && paint === cache$1.paint && isSame$1(boxBounds, cache$1.boxBounds)) {
         leafPaint = cache$1.leafPaint;
     } else {
         leafPaint = {
@@ -12024,6 +12094,7 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
         const clip = transform && !transform.onlyScale || data.path || data.cornerRadius;
         if (clip || opacity && opacity < 1 || blendMode) leafPaint.complex = clip ? 2 : true;
     }
+    if (paint.filter) PaintImage.applyFilter(leafPaint, image, paint.filter, ui);
     return true;
 }
@@ -12231,7 +12302,7 @@ function layout$3(transform, box, x, y, scaleX, scaleY, rotation, skew) {
     translate(transform, box.x + x, box.y + y);
 }
-const {get: get$1, scale: scale$1, copy: copy$4} = MatrixHelper;
+const {get: get$1, scale: scale$2, copy: copy$4} = MatrixHelper;
 const {getFloorScale: getFloorScale} = MathHelper, {abs: abs$6} = Math;
@@ -12251,7 +12322,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
     let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     if (paint.patternId !== id && !ui.destroyed) {
         if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
-            const {image: image, data: data} = paint, {opacity: opacity, filters: filters} = paint.originPaint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
+            const {image: image, data: data} = paint, {opacity: opacity} = paint.originPaint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
             let imageMatrix, xGap, yGap, {width: width, height: height} = image;
             if (fixScale) scaleX *= fixScale, scaleY *= fixScale;
             width *= scaleX;
@@ -12265,9 +12336,9 @@ function createPattern(paint, ui, canvas, renderOptions) {
                 scaleY *= getFloorScale(height + (yGap || 0));
                 imageMatrix = get$1();
                 if (transform) copy$4(imageMatrix, transform);
-                scale$1(imageMatrix, 1 / scaleX, 1 / scaleY);
+                scale$2(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            const imageCanvas = image.getCanvas(width, height, opacity, filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
+            const imageCanvas = image.getCanvas(width, height, opacity, undefined, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
             const pattern = image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
             paint.style = pattern;
             paint.patternId = id;
@@ -12296,7 +12367,7 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
         if (drawImage) {
             if (data.repeat) {
                 drawImage = false;
-            } else if (!(originPaint.changeful || paint.film || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
+            } else if (!(originPaint.changeful || paint.film || Platform.name === "miniapp" || exporting)) {
                 drawImage = Platform.image.isLarge(image, scaleX, scaleY) || image.width * scaleX > 8096 || image.height * scaleY > 8096;
             }
         }
@@ -12358,6 +12429,7 @@ function recycleImage(attrName, data) {
                 if (!recycleMap) recycleMap = {};
                 recycleMap[url] = true;
                 ImageManager.recyclePaint(paint);
+                if (data.__willDestroy && image.parent) PaintImage.recycleFilter(image, data.__leaf);
                 if (image.loading) {
                     if (!input) {
                         input = data.__input && data.__input[attrName] || [];
@@ -12848,7 +12920,7 @@ function createRows(drawData, content, style) {
         }, row = {
             words: []
         };
-        if (__letterSpacing) content = [ ...content ];
+        content = [ ...content ];
         for (let i = 0, len = content.length; i < len; i++) {
             char = content[i];
             if (char === "\n") {
@@ -13327,8 +13399,11 @@ function targetAttr(fn) {
                                 });
                                 if (isObject(check)) value = check; else if (check === false) return;
                             }
-                            t.setDimOthers(false);
-                            t.setBright(false);
+                            if (t.hasDimOthers) {
+                                t.setDimOthers(false);
+                                t.setBright(false);
+                                t.hasDimOthers = undefined;
+                            }
                             if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
                             if (t.single) {
                                 delete t.element.syncEventer;
@@ -13353,7 +13428,8 @@ function mergeConfigAttr() {
     return (target, key) => {
         defineKey(target, key, {
             get() {
-                const {config: config, element: element, dragPoint: dragPoint, editBox: editBox, app: app} = this, mergeConfig = Object.assign({}, config);
+                const {config: config, element: element, dragPoint: dragPoint, editBox: editBox, editTool: editTool, innerEditor: innerEditor, app: app} = this, mergeConfig = Object.assign({}, config);
+                if (innerEditor) innerEditor.editConfig && Object.assign(mergeConfig, innerEditor.editConfig); else if (editTool) editTool.editConfig && Object.assign(mergeConfig, editTool.editConfig);
                 if (element && element.editConfig) {
                     let {editConfig: editConfig} = element;
                     if (editConfig.hover || editConfig.hoverStyle) {
@@ -14256,8 +14332,11 @@ class EditBox extends Group {
         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 (!isUndefined(dimOthers) || !isUndefined(bright)) {
+            editor.setDimOthers(dimOthers);
+            editor.setBright(!!dimOthers || bright);
+            editor.hasDimOthers = true;
+        }
         if (spread) BoundsHelper.spread(bounds, spread);
         if (this.view.worldOpacity) {
             const {width: width, height: height} = bounds;
@@ -14276,7 +14355,8 @@ class EditBox extends Group {
                     resizeL = resizeLines[(i - 1) / 2];
                     resizeL.set(point);
                     resizeL.visible = resizeP.visible && !hideResizeLines;
-                    resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
+                    if (resizeP.visible) resizeP.visible = !!middlePoint;
+                    if (rotateP.visible) rotateP.visible = !!middlePoint;
                     if ((i + 1) / 2 % 2) {
                         resizeL.width = width + resizeL.height;
                         if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false;
@@ -14362,8 +14442,9 @@ class EditBox extends Group {
     onDragStart(e) {
         this.dragging = true;
         const point = this.dragPoint = e.current, {pointType: pointType} = point;
-        const {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = this.mergeConfig;
+        const {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable, onCopy: onCopy} = this.mergeConfig;
         if (pointType === "move") {
+            if (e.altKey && onCopy && onCopy() && this.editor.single) this.app.interaction.replaceDownTarget(this.target);
             moveable && (this.moving = true);
         } else {
             if (pointType.includes("rotate") || this.isHoldRotateKey(e) || !resizeable) {
@@ -14482,26 +14563,31 @@ class EditBox extends Group {
         updatePointCursor(this, e);
     }
     onArrow(e) {
-        if (this.canUse && this.mergeConfig.keyEvent) {
+        if (this.canUse) {
             let x = 0, y = 0;
-            const distance = e.shiftKey ? 10 : 1;
             switch (e.code) {
               case "ArrowDown":
-                y = distance;
+                y = 1;
                 break;
               case "ArrowUp":
-                y = -distance;
+                y = -1;
                 break;
               case "ArrowLeft":
-                x = -distance;
+                x = -1;
                 break;
               case "ArrowRight":
-                x = distance;
+                x = 1;
+            }
+            if (x || y) {
+                const {keyEvent: keyEvent, arrowStep: arrowStep, arrowFastStep: arrowFastStep} = this.mergeConfig;
+                if (keyEvent) {
+                    const step = e.shiftKey ? arrowFastStep : arrowStep;
+                    this.transformTool.move(x * step, y * step);
+                }
             }
-            if (x || y) this.transformTool.move(x, y);
         }
     }
     onDoubleTap(e) {
@@ -14613,6 +14699,8 @@ const config$1 = {
     pointSize: 10,
     pointRadius: 16,
     rotateGap: 45,
+    arrowStep: 1,
+    arrowFastStep: 10,
     buttonsDirection: "bottom",
     buttonsMargin: 12,
     hideOnSmall: true,
@@ -16835,7 +16923,7 @@ Arrow = __decorate([ registerUI() ], Arrow);
 const {M: M$2, L: L$2, C: C$2, Q: Q$1, O: O$1} = PathCommandMap;
-const {rotate: rotate$1, copyFrom: copyFrom$1, scale: scale} = PointHelper;
+const {rotate: rotate$1, copyFrom: copyFrom$1, scale: scale$1} = PointHelper;
 const point$1 = {};
@@ -16882,7 +16970,7 @@ const PathMatrixHelper = {
 function setPoint$2(data, startIndex, x, y, scaleX, scaleY, rotation, origin) {
     copyFrom$1(point$1, data[startIndex], data[startIndex + 1]);
     if (rotation) rotate$1(point$1, rotation, origin);
-    if (scaleX) scale(point$1, scaleX, scaleY);
+    if (scaleX) scale$1(point$1, scaleX, scaleY);
     data[startIndex] = x + point$1.x;
     data[startIndex + 1] = y + point$1.y;
 }
@@ -16891,12 +16979,14 @@ const {layout: layout$2, rotate: rotate} = PathMatrixHelper;
 const {getAngle: getAngle} = PointHelper;
-const half = {
+const zero = {
+    x: 0
+}, half = {
     x: -.5
 };
 const angle = {
-    connect: half,
+    connect: zero,
     offset: {
         x: -.71,
         bevelJoin: .36,
@@ -16917,73 +17007,110 @@ const angleSide = {
 const triangleLinePath = [ 1, -3, 0, 2, -3, -2, 2, 0, 0, 2, -3, 2, 2, -3, 0 ];
-const triangle = {
-    connect: half,
+const triangleFill = {
+    connect: zero,
     offset: {
         x: -.9,
         bevelJoin: .624,
         roundJoin: .4
     },
-    path: [ ...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1 ],
-    dashPath: [ 1, -2, 0, 2, -.5, 0 ]
+    path: [ ...triangleLinePath ]
 };
-const arrowLinePath = [ 1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0 ];
+const triangle = DataHelper.clone(triangleFill);
-const arrow = {
-    connect: half,
-    offset: {
-        x: -1.1,
-        bevelJoin: .872,
-        roundJoin: .6
-    },
-    path: [ ...arrowLinePath, 1, -2.25, .95, 2, -2.25, -.95 ],
-    dashPath: [ 1, -3, 0, 2, -.5, 0 ]
+triangle.path = [ ...triangleLinePath, 1, -2.05, 1.1, 2, -2.05, -1.1 ];
+triangle.dashPath = [ 1, -2, 0, 2, -.5, 0 ];
+const triangleFlipFill = {
+    connect: zero,
+    offset: half,
+    path: [ ...triangleFill.path ]
 };
 const triangleFlip = {
+    connect: zero,
     offset: half,
     path: [ ...triangle.path ],
     dashPath: [ 1, -2.5, 0, 2, -1, 0 ]
 };
+rotate(triangleFlipFill.path, 180, {
+    x: -1.5,
+    y: 0
+});
 rotate(triangleFlip.path, 180, {
     x: -1.5,
     y: 0
 });
+const arrowLinePath = [ 1, -3, 0, 2, -3.5, -1.8, 2, 0, 0, 2, -3.5, 1.8, 2, -3, 0 ];
+const arrowFill = {
+    connect: zero,
+    offset: {
+        x: -1.1,
+        bevelJoin: .872,
+        roundJoin: .6
+    },
+    path: [ ...arrowLinePath ]
+};
+const arrow = DataHelper.clone(arrowFill);
+arrow.path = [ ...arrowLinePath, 1, -2.25, .95, 2, -2.25, -.95 ];
+arrow.dashPath = [ 1, -3, 0, 2, -.5, 0 ];
 const circleLine = {
     connect: {
-        x: -1.3
+        x: -1.8
     },
     path: [ 1, 1.8, -.1, 2, 1.8, 0, 26, 0, 0, 1.8, 0, 359, 0 ]
 };
-const circle = {
+const circleFill = {
     connect: {
         x: .5
     },
-    path: [ ...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0 ],
-    dashPath: [ 1, -.5, 0, 2, .5, 0 ]
+    path: [ ...circleLine.path ]
 };
+const circle = DataHelper.clone(circleFill);
+circle.path = [ ...circleLine.path, 1, 0, 0, 26, 0, 0, 1, 0, 360, 0 ];
+circle.dashPath = [ 1, -.5, 0, 2, .5, 0 ];
 const squareLine = {
     connect: {
-        x: -1.3
+        x: -1.4
     },
     path: [ 1, -1.4, 0, 2, -1.4, -1.4, 2, 1.4, -1.4, 2, 1.4, 1.4, 2, -1.4, 1.4, 2, -1.4, 0 ]
 };
+const squareFill = {
+    path: [ ...squareLine.path ]
+};
 const square = {
     path: [ ...squareLine.path, 2, -1.4, -.49, 2, 1, -.49, 1, -1.4, .49, 2, 1, .49 ]
 };
 const diamondLine = DataHelper.clone(squareLine);
+diamondLine.connect.x = -1.9;
+const diamondFill = DataHelper.clone(squareFill);
 const diamond = DataHelper.clone(square);
 rotate(diamondLine.path, 45);
+rotate(diamondFill.path, 45);
 rotate(diamond.path, 45);
 const mark = {
@@ -17006,19 +17133,34 @@ const arrows = {
     mark: mark
 };
+const fillArrows = {
+    triangle: triangleFill,
+    "triangle-flip": triangleFlipFill,
+    arrow: arrowFill,
+    circle: circleFill,
+    square: squareFill,
+    diamond: diamondFill
+};
 function getArrowPath(ui, arrow, from, to, size, connectOffset, hasDashPattern) {
-    let pathData, scale;
+    let pathData, scale = 1, rotation = 0, fill;
     const {strokeCap: strokeCap, strokeJoin: strokeJoin} = ui.__;
     if (isObject(arrow)) {
         if (arrow.type) {
-            scale = arrow.scale;
+            scale = arrow.scale || 1;
+            rotation = arrow.rotation || 0;
             pathData = arrows[arrow.type];
+            if (scale > 1) {
+                const fillData = fillArrows[arrow.type];
+                if (fillData) pathData = fillData, fill = true;
+            }
         } else pathData = arrow;
     } else {
         pathData = arrows[arrow];
     }
+    if (!fill) fill = pathData.fill;
     const {offset: offset, connect: connect, path: path, dashPath: dashPath} = pathData;
-    let connectX = connect ? connect.x : 0;
+    let connectX = connect ? connect.x * scale : 0;
     let offsetX = offset ? offset.x : 0;
     const data = [ ...path ];
     if (hasDashPattern && dashPath) data.push(...dashPath);
@@ -17026,28 +17168,38 @@ function getArrowPath(ui, arrow, from, to, size, connectOffset, hasDashPattern)
     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 (scale !== 1) layout$2(data, 0, 0, scale, scale);
     if (offsetX) layout$2(data, offsetX, 0);
-    layout$2(data, to.x, to.y, size, size, getAngle(from, to));
+    layout$2(data, to.x, to.y, size, size, getAngle(from, to) + rotation);
     connectOffset.x = (connectX + offsetX) * size;
-    return data;
+    const arrowData = {
+        data: data
+    };
+    if (fill) arrowData.fill = fill;
+    return arrowData;
 }
 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;
-const {copy: copy, copyFrom: copyFrom, getDistancePoint: getDistancePoint} = PointHelper;
+const {copy: copy, copyFrom: copyFrom, getDistancePoint: getDistancePoint, isSame: isSame} = PointHelper;
+const {stintSet: stintSet$1} = DataHelper;
 const connectPoint = {};
 const first = {}, second = {};
-const last = {}, now = {};
+const old = {}, last = {}, now = {};
 const PathArrowModule = {
     list: arrows,
-    addArrows(ui) {
-        const {startArrow: startArrow, endArrow: endArrow, strokeWidth: strokeWidth, dashPattern: dashPattern, __pathForRender: data, cornerRadius: cornerRadius} = ui.__;
+    fillList: fillArrows,
+    addArrows(ui, updateCache) {
+        const uData = ui.__;
+        const {startArrow: startArrow, endArrow: endArrow, __strokeWidth: strokeWidth, dashPattern: dashPattern, __pathForRender: data, cornerRadius: cornerRadius} = uData;
         const clonePathForArrow = !cornerRadius;
+        if (!updateCache) uData.__strokeWidthCache = strokeWidth;
+        let startArrowPath, singleStartArrow, endArrowPath, singleEndArrow;
         let command, i = 0, len = data.length, count = 0, useStartArrow = startArrow && startArrow !== "none";
         while (i < len) {
             command = data[i];
@@ -17055,6 +17207,7 @@ const PathArrowModule = {
               case M$1:
               case L$1:
                 if (count < 2 || i + 6 >= len) {
+                    copy(old, now);
                     copyFrom(now, data[i + 1], data[i + 2]);
                     if (!count && useStartArrow) copy(first, now);
                 }
@@ -17062,12 +17215,18 @@ const PathArrowModule = {
                 break;
               case C$1:
-                if (count === 1 || i + 7 >= len - 3) copyPoints(data, last, now, i + 3);
+                if (count === 1 || i + 7 >= len - 3) {
+                    copyPoints(data, last, now, i + 3);
+                    old.x = data[i + 1], old.y = data[i + 2];
+                }
                 i += 7;
                 break;
               case Q:
-                if (count === 1 || i + 5 >= len - 3) copyPoints(data, last, now, i + 1);
+                if (count === 1 || i + 5 >= len - 3) {
+                    copyPoints(data, last, now, i + 1);
+                    copy(old, last);
+                }
                 i += 5;
                 break;
@@ -17105,6 +17264,7 @@ const PathArrowModule = {
               case U:
                 if (count === 1 || i + 6 >= len - 3) {
                     copyPoints(data, last, now, i + 1);
+                    copy(old, last);
                     if (i + 6 !== len) {
                         now.x -= (now.x - last.x) / 10;
                         now.y -= (now.y - last.y) / 10;
@@ -17115,13 +17275,13 @@ const PathArrowModule = {
             }
             count++;
             if (count === 1 && command !== M$1) return;
-            if (count === 2 && useStartArrow) copy(second, command === L$1 ? now : last);
+            if (count === 2 && useStartArrow) copy(second, command === L$1 ? now : isSame(old, first) ? last : old);
             if (i === len) {
-                const path = ui.__.__pathForRender = clonePathForArrow ? [ ...data ] : data;
-                const pathForArrow = ui.__.__pathForArrow = [];
+                const path = uData.__pathForRender = clonePathForArrow ? [ ...data ] : data;
                 if (useStartArrow) {
-                    const startArrowPath = getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint, !!dashPattern);
-                    dashPattern ? pathForArrow.push(...startArrowPath) : path.push(...startArrowPath);
+                    startArrowPath = getArrowPath(ui, startArrow, second, first, strokeWidth, connectPoint, !!dashPattern);
+                    singleStartArrow = startArrowPath.fill || dashPattern;
+                    if (!singleStartArrow) path.push(...startArrowPath.data);
                     if (connectPoint.x) {
                         getDistancePoint(first, second, -connectPoint.x, true);
                         path[1] = second.x;
@@ -17129,8 +17289,10 @@ const PathArrowModule = {
                     }
                 }
                 if (endArrow && endArrow !== "none") {
-                    const endArrowPath = getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint, !!dashPattern);
-                    dashPattern ? pathForArrow.push(...endArrowPath) : path.push(...endArrowPath);
+                    if (isSame(last, now)) copy(last, old);
+                    endArrowPath = getArrowPath(ui, endArrow, last, now, strokeWidth, connectPoint, !!dashPattern);
+                    singleEndArrow = endArrowPath.fill || dashPattern;
+                    if (!singleEndArrow) path.push(...endArrowPath.data);
                     if (connectPoint.x) {
                         getDistancePoint(now, last, -connectPoint.x, true);
                         let index;
@@ -17157,10 +17319,21 @@ const PathArrowModule = {
             } else {
                 copy(last, now);
             }
+            stintSet$1(uData, "__startArrowPath", singleStartArrow && startArrowPath);
+            stintSet$1(uData, "__endArrowPath", singleEndArrow && endArrowPath);
         }
     },
-    register(name, data) {
+    updateArrow(ui) {
+        const data = ui.__;
+        if (data.strokeScaleFixed) {
+            if (data.__strokeWidthCache !== data.__strokeWidth) {
+                ui.__updateRenderPath(true);
+            }
+        }
+    },
+    register(name, data, fillData) {
         this.list[name] = data;
+        if (fillData) this.fillList[name] = data;
     },
     get(name) {
         return this.list[name];
@@ -17186,12 +17359,26 @@ UI.addAttr("endArrow", "none", arrowType);
 Object.assign(PathArrow, PathArrowModule);
 Object.assign(Paint, {
-    strokeArrow(_stroke, ui, canvas, _renderOptions) {
-        if (ui.__.dashPattern) {
+    strokeArrow(stroke, ui, canvas, _renderOptions) {
+        const {__startArrowPath: __startArrowPath, __endArrowPath: __endArrowPath, dashPattern: dashPattern} = ui.__;
+        if (dashPattern) canvas.dashPattern = null;
+        if (__startArrowPath) {
+            canvas.beginPath();
+            ui.__drawPathByData(canvas, __startArrowPath.data);
+            canvas.stroke();
+            if (__startArrowPath.fill) {
+                canvas.fillStyle = stroke;
+                canvas.fill();
+            }
+        }
+        if (__endArrowPath) {
             canvas.beginPath();
-            ui.__drawPathByData(canvas, ui.__.__pathForArrow);
-            canvas.dashPattern = null;
+            ui.__drawPathByData(canvas, __endArrowPath.data);
             canvas.stroke();
+            if (__endArrowPath.fill) {
+                canvas.fillStyle = stroke;
+                canvas.fill();
+            }
         }
     }
 });
@@ -17653,7 +17840,7 @@ UI.addAttr("autoHeight", undefined, autoBoundsType);
 UI.addAttr("autoBox", undefined, boundsType);
-const {copyAndSpread: copyAndSpread} = BoundsHelper;
+const {copyAndSpread: copyAndSpread$1} = BoundsHelper;
 box$1.__updateFlowLayout = function() {
     const {leaferIsCreated: leaferIsCreated, flow: flow} = this;
@@ -17685,7 +17872,7 @@ box$1.__updateContentBounds = function() {
     const same = layout.contentBounds === layout.boxBounds;
     if (padding) {
         if (same) layout.shrinkContent();
-        copyAndSpread(layout.contentBounds, layout.boxBounds, padding, true);
+        copyAndSpread$1(layout.contentBounds, layout.boxBounds, padding, true);
     } else {
         if (!same) layout.shrinkContentCancel();
     }
@@ -17707,7 +17894,7 @@ box$1.__updateBoxBounds = function(secondLayout) {
                     boxBounds.width = data.width, boxBounds.x = 0;
                 }
             }
-            flow && secondLayout && data.padding && copyAndSpread(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : data.__autoWidth ? "width" : "height");
+            flow && secondLayout && data.padding && copyAndSpread$1(boxBounds, boxBounds, data.padding, false, data.__autoSize ? null : data.__autoWidth ? "width" : "height");
             this.__updateNaturalSize();
         } else {
             this.__updateRectBoxBounds();
@@ -19691,9 +19878,7 @@ const {Yes: Yes, NoAndSkip: NoAndSkip, YesAndSkip: YesAndSkip} = Answer;
 const idCondition = {}, classNameCondition = {}, tagCondition = {};
 class Finder {
-    constructor(target) {
-        this.innerIdMap = {};
-        this.idMap = {};
+    constructor(target, _config) {
         this.methods = {
             id: (leaf, name) => leaf.id === name ? (this.target && (this.idMap[name] = leaf),
             1) : 0,
@@ -19703,6 +19888,13 @@ class Finder {
             tag: (leaf, name) => leaf.__tag === name ? 1 : 0,
             tags: (leaf, nameMap) => nameMap[leaf.__tag] ? 1 : 0
         };
+        this.idMap = {};
+        this.innerIdMap = {};
+        const app = target && target.app;
+        if (app) {
+            app.idMap ? this.idMap = app.idMap : app.idMap = this.idMap;
+            app.innerIdMap ? this.innerIdMap = app.innerIdMap : app.innerIdMap = this.innerIdMap;
+        }
         if (this.target = target) this.__listenEvents();
     }
     getBy(condition, branch, one, options) {
@@ -19829,8 +20021,14 @@ ui.findOne = function(condition, options) {
 Plugin.add("find");
-Creator.finder = function(target) {
-    return new Finder(target);
+Creator.finder = function(target, config) {
+    return new Finder(target, config);
+};
+LeafHelper.cacheId = function(t) {
+    const {leafer: leafer, id: id} = t;
+    if (id) leafer.app.idMap[id] = t;
+    if (leafer.cacheInnerId) leafer.app.innerIdMap[t.innerId] = t;
 };
 const {setPoint: setPoint, addPoint: addPoint, toBounds: toBounds} = TwoPointBoundsHelper;
@@ -20123,7 +20321,7 @@ const config = {
     style: {
         dragBoundsType: "outer",
         strokeAlign: "center",
-        strokeWidthFixed: "zoom-in",
+        strokeScaleFixed: "zoom-in",
         width: 6,
         height: 6,
         opacity: .5,
@@ -20372,4 +20570,185 @@ Scroller.registerTheme("dark", {
     }
 });
-export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Flow, FourNumberHelper, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferFilm, LeaferImage, LeaferTypeCreator, LeaferVideo, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Robot, RobotData, RotateEvent, Run, ScrollBar, Scroller, SelectArea, Selector, Star, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TouchEvent, TransformTool, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite$1 as isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, motionPathType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, scrollType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$3 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$4 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };
+const {stintSet: stintSet} = DataHelper;
+function scaleFixedType(defaultValue) {
+    return decorateLeafAttr(defaultValue, key => attr({
+        set(value) {
+            if (this.__setAttr(key, value)) {
+                const layout = this.__layout;
+                doBoundsType(this);
+                if (!isNumber(value)) value = value ? 1 : 0;
+                stintSet(layout, "scaleFixed", value);
+                stintSet(layout, "outerScale", value ? 1 / value : 0);
+                if (!layout.outerScale && layout.localOuterBounds) layout.localOuterBounds = undefined;
+            }
+        }
+    }));
+}
+const {scale: scale} = MatrixHelper;
+const {copyAndSpread: copyAndSpread} = BoundsHelper;
+const {getScaleFixedData: getScaleFixedData} = MathHelper;
+LeafHelper.updateScaleFixedWorld = function(t) {
+    const {__world: __world, __: __} = t, {scaleX: scaleX, scaleY: scaleY} = getScaleFixedData(__world, __.scaleFixed);
+    if (scaleX !== 1) {
+        scale(__world, scaleX, scaleY);
+        __world.scaleX *= scaleX, __world.scaleY *= scaleY;
+    }
+};
+LeafHelper.updateOuterBounds = function(t) {
+    const layout = t.__layout, {localRenderBounds: localRenderBounds} = layout;
+    const localOuterBounds = layout.localOuterBounds || (layout.localOuterBounds = {});
+    const {width: width, height: height} = localRenderBounds;
+    const scale = layout.outerScale - 1;
+    copyAndSpread(localOuterBounds, localRenderBounds, [ height * scale, width * scale ]);
+    if (t.parent) t.parent.__layout.renderChange();
+};
+Plugin.add("scale-fixed");
+UI.addAttr("scaleFixed", undefined, scaleFixedType);
+class EllipseBoxData extends BoxData {}
+const ellipse$1 = Ellipse.prototype;
+let EllipseBox = class EllipseBox extends Box {
+    get __tag() {
+        return "EllipseBox";
+    }
+    __updatePath() {}
+};
+__decorate([ dataProcessor(EllipseBoxData) ], EllipseBox.prototype, "__", void 0);
+__decorate([ pathType(0) ], EllipseBox.prototype, "innerRadius", void 0);
+__decorate([ pathType(0) ], EllipseBox.prototype, "startAngle", void 0);
+__decorate([ pathType(0) ], EllipseBox.prototype, "endAngle", void 0);
+__decorate([ rewrite(ellipse$1.__updatePath) ], EllipseBox.prototype, "__updatePath", null);
+EllipseBox = __decorate([ rewriteAble(), registerUI() ], EllipseBox);
+class PolygonBoxData extends BoxData {
+    get __usePathBox() {
+        return this.points || this.__pathInputed;
+    }
+}
+const polygon = Polygon.prototype;
+let PolygonBox = class PolygonBox extends Box {
+    get __tag() {
+        return "PolygonBox";
+    }
+    __updatePath() {}
+};
+__decorate([ dataProcessor(PolygonBoxData) ], PolygonBox.prototype, "__", void 0);
+__decorate([ pathType(3) ], PolygonBox.prototype, "sides", void 0);
+__decorate([ pathType() ], PolygonBox.prototype, "points", void 0);
+__decorate([ pathType(0) ], PolygonBox.prototype, "curve", void 0);
+__decorate([ rewrite(polygon.__updatePath) ], PolygonBox.prototype, "__updatePath", null);
+PolygonBox = __decorate([ rewriteAble(), registerUI() ], PolygonBox);
+class StarBoxData extends BoxData {}
+const ellipse = Star.prototype;
+let StarBox = class StarBox extends Box {
+    get __tag() {
+        return "StarBox";
+    }
+    __updatePath() {}
+};
+__decorate([ pathType(5) ], StarBox.prototype, "corners", void 0);
+__decorate([ pathType(.382) ], StarBox.prototype, "innerRadius", void 0);
+__decorate([ dataProcessor(StarBoxData) ], StarBox.prototype, "__", void 0);
+__decorate([ rewrite(ellipse.__updatePath) ], StarBox.prototype, "__updatePath", null);
+StarBox = __decorate([ rewriteAble(), registerUI() ], StarBox);
+class PathBoxData extends BoxData {}
+let PathBox = class PathBox extends Box {
+    get __tag() {
+        return "PathBox";
+    }
+};
+__decorate([ dataProcessor(PathBoxData) ], PathBox.prototype, "__", void 0);
+__decorate([ affectStrokeBoundsType("center") ], PathBox.prototype, "strokeAlign", void 0);
+PathBox = __decorate([ registerUI() ], PathBox);
+class ImageBoxData extends BoxData {
+    get __urlType() {
+        return "image";
+    }
+    setUrl(value) {
+        this.__setImageFill(value);
+        this._url = value;
+    }
+    __setImageFill(value) {
+        this.fill = value ? {
+            type: this.__urlType,
+            mode: "stretch",
+            url: value
+        } : undefined;
+    }
+    __getData() {
+        const data = super.__getData();
+        if (data.url) delete data.fill;
+        return data;
+    }
+    __getInputData(names, options) {
+        const data = super.__getInputData(names, options);
+        if (data.url) delete data.fill;
+        return data;
+    }
+}
+let ImageBox = class ImageBox extends Box {
+    get __tag() {
+        return "ImageBox";
+    }
+    get ready() {
+        const {image: image} = this;
+        return image && image.ready;
+    }
+    get image() {
+        const {fill: fill} = this.__;
+        return isArray(fill) && fill[0].image;
+    }
+    get __useSelfBox() {
+        return true;
+    }
+};
+__decorate([ dataProcessor(ImageBoxData) ], ImageBox.prototype, "__", void 0);
+__decorate([ boundsType("") ], ImageBox.prototype, "url", void 0);
+ImageBox = __decorate([ registerUI() ], ImageBox);
+Plugin.add("box");
+export { AlignHelper, Animate, AnimateEasing, AnimateEvent, AnimateList, Answer, App, AroundHelper, Arrow, ArrowData, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent, Dragger, DropEvent, EditBox, EditDataHelper, EditPoint, EditSelect, EditSelectHelper, EditTool, EditToolCreator, Editor, EditorEvent, EditorGroupEvent, EditorHelper, EditorMoveEvent, EditorRotateEvent, EditorScaleEvent, EditorSkewEvent, Effect, Ellipse, EllipseBox, EllipseBoxData, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Finder, Flow, FourNumberHelper, Frame, FrameData, Group, GroupData, HighBezierHelper, HighCurveHelper, HitCanvasManager, Image, ImageBox, ImageBoxData, ImageData, ImageEvent, ImageManager, IncrementId, InnerEditor, InnerEditorEvent, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferFilm, LeaferImage, LeaferTypeCreator, LeaferVideo, Line, LineData, LineEditTool, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, MyDragEvent, MyImage, MyPointerEvent, MyTouchEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathArrowModule, PathBounds, PathBox, PathBoxData, PathCommandDataHelper, PathCommandMap, PathCommandNodeHelper, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathMatrixHelper, PathNodeHandleType, PathNumberCommandLengthMap, PathNumberCommandMap, PathScaler, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonBox, PolygonBoxData, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, Robot, RobotData, RotateEvent, Run, ScrollBar, Scroller, SelectArea, Selector, Star, StarBox, StarBoxData, StarData, State, StringNumberMap, Stroker, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TouchEvent, TransformTool, Transformer, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, UnitConvertHelper, WaitHelper, WatchEvent, Watcher, WheelEventHelper, ZoomEvent, addViewport, addViewportConfig, affectRenderBoundsType, affectStrokeBoundsType, arrowType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite$1 as isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, motionPathType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerEditTool, registerInnerEditor, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleResize, scaleResizeFontSize, scaleResizeGroup, scaleResizePath, scaleResizePoints, scaleType, scrollType, sortType, stateStyleType, stateType, strokeType, surfaceType, tempBounds$3 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$4 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };