@leafer/worker 2.0.1 → 2.0.3

package/dist/worker.js

@@ -7,6 +7,42 @@ var LeaferUI = function(exports) {
         PathNodeHandleType[PathNodeHandleType["mirrorAngle"] = 3] = "mirrorAngle";
         PathNodeHandleType[PathNodeHandleType["mirror"] = 4] = "mirror";
     })(exports.PathNodeHandleType || (exports.PathNodeHandleType = {}));
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) {
+            return value instanceof P ? value : new P(function(resolve) {
+                resolve(value);
+            });
+        }
+        return new (P || (P = Promise))(function(resolve, reject) {
+            function fulfilled(value) {
+                try {
+                    step(generator.next(value));
+                } catch (e) {
+                    reject(e);
+                }
+            }
+            function rejected(value) {
+                try {
+                    step(generator["throw"](value));
+                } catch (e) {
+                    reject(e);
+                }
+            }
+            function step(result) {
+                result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+            }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
     exports.Answer = void 0;
     (function(Answer) {
         Answer[Answer["No"] = 0] = "No";
@@ -197,6 +233,7 @@ var LeaferUI = function(exports) {
         }
         destroy() {
             this.__input = this.__middle = null;
+            if (this.__complexData) this.__complexData.destroy();
         }
     }
     const IncrementId = {
@@ -287,6 +324,7 @@ var LeaferUI = function(exports) {
     };
     const {set: set$2, get: get$5, setTemp: setTemp, toTempAB: toTempAB} = FourNumberHelper;
     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;
@@ -330,6 +368,24 @@ var LeaferUI = function(exports) {
             } 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;
@@ -809,8 +865,8 @@ var LeaferUI = function(exports) {
             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);
@@ -882,8 +938,8 @@ var LeaferUI = function(exports) {
         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);
@@ -1127,9 +1183,9 @@ var LeaferUI = function(exports) {
             }
             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;
         }
     };
@@ -1384,6 +1440,9 @@ var LeaferUI = function(exports) {
                 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);
@@ -1552,6 +1611,9 @@ var LeaferUI = function(exports) {
         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);
         }
@@ -1803,7 +1865,10 @@ var LeaferUI = function(exports) {
             list$3[tag] = UI;
         },
         get(tag, data, x, y, width, height) {
-            if (!list$3[tag]) debug$h.error("not register " + tag);
+            if (!list$3[tag]) {
+                debug$h.warn("not register " + tag);
+                return undefined;
+            }
             const ui = new list$3[tag](data);
             if (!isUndefined(x)) {
                 ui.x = x;
@@ -1888,42 +1953,6 @@ var LeaferUI = function(exports) {
             this.clear();
         }
     }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) {
-            return value instanceof P ? value : new P(function(resolve) {
-                resolve(value);
-            });
-        }
-        return new (P || (P = Promise))(function(resolve, reject) {
-            function fulfilled(value) {
-                try {
-                    step(generator.next(value));
-                } catch (e) {
-                    reject(e);
-                }
-            }
-            function rejected(value) {
-                try {
-                    step(generator["throw"](value));
-                } catch (e) {
-                    reject(e);
-                }
-            }
-            function step(result) {
-                result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-            }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
     function contextAttr(realName) {
         return (target, key) => {
             if (!realName) realName = key;
@@ -3523,10 +3552,10 @@ var LeaferUI = function(exports) {
     const FileHelper = {
         alphaPixelTypes: [ "png", "webp", "svg" ],
         upperCaseTypeMap: {},
-        mineType(type) {
-            if (!type || type.startsWith("image")) return type;
+        mimeType(type, base = "image") {
+            if (!type || type.startsWith(base)) return type;
             if (type === "jpg") type = "jpeg";
-            return "image/" + type;
+            return base + "/" + type;
         },
         fileType(filename) {
             const l = filename.split(".");
@@ -3557,6 +3586,7 @@ var LeaferUI = function(exports) {
         }
     };
     const F$2 = FileHelper;
+    F$2.mineType = F$2.mimeType;
     F$2.alphaPixelTypes.forEach(type => F$2.upperCaseTypeMap[type] = type.toUpperCase());
     const debug$c = Debug.get("TaskProcessor");
     class TaskItem {
@@ -3796,6 +3826,9 @@ var LeaferUI = function(exports) {
     const debug$b = Debug.get("Resource");
     const Resource = {
         tasker: new TaskProcessor,
+        queue: new TaskProcessor({
+            parallel: 1
+        }),
         map: {},
         get isComplete() {
             return R.tasker.isComplete;
@@ -3832,6 +3865,12 @@ var LeaferUI = function(exports) {
             R.set(key, value);
             return value;
         },
+        loadFilm(_key, _format) {
+            return undefined;
+        },
+        loadVideo(_key, _format) {
+            return undefined;
+        },
         destroy() {
             R.map = {};
         }
@@ -3840,16 +3879,15 @@ var LeaferUI = function(exports) {
     const ImageManager = {
         maxRecycled: 10,
         recycledList: [],
-        patternTasker: new TaskProcessor({
-            parallel: 1
-        }),
-        get(config) {
+        patternTasker: Resource.queue,
+        get(config, type) {
             let image = Resource.get(config.url);
-            if (!image) Resource.set(config.url, image = Creator.image(config));
+            if (!image) Resource.set(config.url, image = type === "film" ? Creator.film(config) : Creator.image(config));
             image.use++;
             return image;
         },
         recycle(image) {
+            if (image.parent) image = image.parent;
             image.use--;
             setTimeout(() => {
                 if (!image.use) {
@@ -3880,7 +3918,7 @@ var LeaferUI = function(exports) {
             if (config.format) return config.format === format;
             const {url: url} = config;
             if (url.startsWith("data:")) {
-                if (url.startsWith("data:" + FileHelper.mineType(format))) return true;
+                if (url.startsWith("data:" + FileHelper.mimeType(format))) return true;
             } else {
                 if (url.includes("." + format) || url.includes("." + FileHelper.upperCaseTypeMap[format])) return true; else if (format === "png" && !url.includes(".")) return true;
             }
@@ -3893,6 +3931,9 @@ var LeaferUI = function(exports) {
     const I$1 = ImageManager;
     const {IMAGE: IMAGE, create: create$1} = IncrementId;
     class LeaferImage {
+        get tag() {
+            return "Image";
+        }
         get url() {
             return this.config.url;
         }
@@ -3921,7 +3962,7 @@ var LeaferUI = function(exports) {
             if (!this.loading) {
                 this.loading = true;
                 Resource.tasker.add(() => __awaiter(this, void 0, void 0, function*() {
-                    return yield Platform.origin.loadImage(this.getLoadUrl(thumbSize), this.crossOrigin, this).then(img => {
+                    return yield Platform.origin["load" + this.tag](this.getLoadUrl(thumbSize), this.crossOrigin, this).then(img => {
                         if (thumbSize) this.setThumbView(img);
                         this.setView(img);
                     }).catch(e => {
@@ -3995,6 +4036,9 @@ var LeaferUI = function(exports) {
             Platform.image.setPatternTransform(pattern, transform, paint);
             return pattern;
         }
+        render(canvas, x, y, width, height, _leaf, _paint, _imageScaleX, _imageScaleY) {
+            canvas.drawImage(this.view, x, y, width, height);
+        }
         getLoadUrl(_thumbSize) {
             return this.url;
         }
@@ -4009,8 +4053,10 @@ var LeaferUI = function(exports) {
             return undefined;
         }
         clearLevels(_checkUse) {}
+        destroyFilter() {}
         destroy() {
             this.clearLevels();
+            this.destroyFilter();
             const {view: view} = this;
             if (view && view.close) view.close();
             this.config = {
@@ -4020,6 +4066,16 @@ var LeaferUI = function(exports) {
             this.waitComplete.length = 0;
         }
     }
+    class LeaferFilm extends LeaferImage {
+        get tag() {
+            return "Film";
+        }
+    }
+    class LeaferVideo extends LeaferImage {
+        get tag() {
+            return "Video";
+        }
+    }
     function defineKey(target, key, descriptor, noConfigurable) {
         if (!noConfigurable) descriptor.configurable = descriptor.enumerable = true;
         Object.defineProperty(target, key, descriptor);
@@ -4171,7 +4227,6 @@ var LeaferUI = function(exports) {
                 if (this.__setAttr(key, value)) {
                     const data = this.__;
                     DataHelper.stintSet(data, "__useDim", data.dim || data.bright || data.dimskip);
-                    this.__layout.surfaceChange();
                 }
             }
         }));
@@ -4216,7 +4271,6 @@ var LeaferUI = function(exports) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
                 if (this.__setAttr(key, value)) {
-                    this.__layout.surfaceChange();
                     this.waitParent(() => {
                         this.parent.__layout.childrenSortChange();
                     });
@@ -4250,7 +4304,6 @@ var LeaferUI = function(exports) {
             set(value) {
                 if (this.__setAttr(key, value)) {
                     this.__layout.hitCanvasChanged = true;
-                    if (Debug.showBounds === "hit") this.__layout.surfaceChange();
                     if (this.leafer) this.leafer.updateCursor();
                 }
             }
@@ -4438,6 +4491,10 @@ var LeaferUI = function(exports) {
             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);
@@ -4462,6 +4519,9 @@ var LeaferUI = function(exports) {
             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,
@@ -4573,6 +4633,9 @@ var LeaferUI = function(exports) {
             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);
@@ -4619,7 +4682,8 @@ var LeaferUI = function(exports) {
             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;
@@ -4628,7 +4692,8 @@ var LeaferUI = function(exports) {
             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;
@@ -4748,11 +4813,11 @@ var LeaferUI = function(exports) {
                 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) {
             if (wait && wait.length) {
@@ -5137,7 +5202,6 @@ var LeaferUI = function(exports) {
         }
         opacityChange() {
             this.opacityChanged = true;
-            this.surfaceChanged || this.surfaceChange();
         }
         childrenSortChange() {
             if (!this.childrenSortChanged) {
@@ -5552,6 +5616,7 @@ var LeaferUI = function(exports) {
             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) {
@@ -5574,12 +5639,13 @@ var LeaferUI = function(exports) {
     };
     const {updateMatrix: updateMatrix$3, updateAllMatrix: updateAllMatrix$3} = LeafHelper;
     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;
     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);
@@ -5629,6 +5695,7 @@ var LeaferUI = function(exports) {
                 layout.renderChanged = undefined;
                 if (this.parent) this.parent.__layout.renderChange();
             }
+            if (layout.outerScale) LeafHelper.updateOuterBounds(this);
             layout.resized || (layout.resized = "local");
             layout.boundsChanged = undefined;
         },
@@ -5679,11 +5746,11 @@ var LeaferUI = function(exports) {
         },
         __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);
         }
     };
     const LeafRender = {
@@ -5694,7 +5761,7 @@ var LeaferUI = function(exports) {
                 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);
@@ -5746,7 +5813,7 @@ var LeaferUI = function(exports) {
                     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 {
@@ -5758,9 +5825,11 @@ var LeaferUI = function(exports) {
             if (this.__hasMask) {
                 this.__renderMask(canvas, options);
             } else {
+                let child;
                 const {children: children} = this;
                 for (let i = 0, len = children.length; i < len; i++) {
-                    excludeRenderBounds$1(children[i], options) || children[i].__render(canvas, options);
+                    child = children[i];
+                    excludeRenderBounds$1(child, options) || (child.__hasComplex ? LeafHelper.renderComplex(child, canvas, options) : child.__render(canvas, options));
                 }
             }
         },
@@ -5773,12 +5842,12 @@ var LeaferUI = function(exports) {
             }
         }
     };
-    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;
     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;
     exports.Leaf = class Leaf {
         get tag() {
@@ -5936,6 +6005,7 @@ var LeaferUI = function(exports) {
                 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);
             }
@@ -6053,8 +6123,8 @@ var LeaferUI = function(exports) {
                 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;
@@ -6065,13 +6135,8 @@ var LeaferUI = function(exports) {
             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");
@@ -6243,7 +6308,7 @@ var LeaferUI = function(exports) {
         __drawPath(_canvas) {}
         __drawRenderPath(_canvas) {}
         __updatePath() {}
-        __updateRenderPath() {}
+        __updateRenderPath(_updateCache) {}
         getMotionPathData() {
             return Plugin.need("path");
         }
@@ -6311,9 +6376,11 @@ var LeaferUI = function(exports) {
             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;
         }
@@ -6346,6 +6413,7 @@ var LeaferUI = function(exports) {
                     this.add(item, index);
                     noIndex || index++;
                 }); else child = UICreator.get(child.tag, child);
+                if (!child) return;
             }
             if (child.parent) child.parent.remove(child);
             child.parent = this;
@@ -6567,7 +6635,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "2.0.1";
+    const version = "2.0.3";
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() {
             return true;
@@ -6589,7 +6657,6 @@ var LeaferUI = function(exports) {
     }
     canvasPatch(OffscreenCanvasRenderingContext2D.prototype);
     canvasPatch(Path2D.prototype);
-    const {mineType: mineType} = FileHelper;
     Object.assign(Creator, {
         canvas: (options, manager) => new LeaferCanvas(options, manager),
         image: options => new LeaferImage(options)
@@ -6599,7 +6666,7 @@ var LeaferUI = function(exports) {
             createCanvas: (width, height) => new OffscreenCanvas(width, height),
             canvasToDataURL: (canvas, type, quality) => new Promise((resolve, reject) => {
                 canvas.convertToBlob({
-                    type: mineType(type),
+                    type: FileHelper.mimeType(type),
                     quality: quality
                 }).then(blob => {
                     var reader = new FileReader;
@@ -6611,14 +6678,14 @@ var LeaferUI = function(exports) {
                 });
             }),
             canvasToBolb: (canvas, type, quality) => canvas.convertToBlob({
-                type: mineType(type),
+                type: FileHelper.mimeType(type),
                 quality: quality
             }),
             canvasSaveAs: (_canvas, _filename, _quality) => new Promise(resolve => resolve()),
             download(_url, _filename) {
                 return undefined;
             },
-            loadImage(src) {
+            loadImage(src, _crossOrigin, _leaferImage) {
                 return new Promise((resolve, reject) => {
                     let req = new XMLHttpRequest;
                     req.open("GET", Platform.image.getRealURL(src), true);
@@ -6633,6 +6700,13 @@ var LeaferUI = function(exports) {
                     req.onerror = e => reject(e);
                     req.send();
                 });
+            },
+            loadContent(url_1) {
+                return __awaiter(this, arguments, void 0, function*(url, responseType = "text") {
+                    const response = yield fetch(url);
+                    if (!response.ok) throw new Error(`${response.status}`);
+                    return yield response[responseType]();
+                });
             }
         };
         Platform.canvas = Creator.canvas();
@@ -7111,7 +7185,7 @@ var LeaferUI = function(exports) {
         getCellList() {
             return undefined;
         }
-        addBlock(block) {
+        addBlock(block, _leafList) {
             if (!this.updateBlocks) this.updateBlocks = [];
             this.updateBlocks.push(block);
         }
@@ -7159,7 +7233,8 @@ var LeaferUI = function(exports) {
         __onLayoutEnd(event) {
             if (event.data) event.data.map(item => {
                 let empty;
-                if (item.updatedList) item.updatedList.list.some(leaf => {
+                const {updatedList: updatedList} = item;
+                if (updatedList) updatedList.list.some(leaf => {
                     empty = !leaf.__world.width || !leaf.__world.height;
                     if (empty) {
                         if (!leaf.isLeafer) debug$6.tip(leaf.innerName, ": empty");
@@ -7167,7 +7242,7 @@ var LeaferUI = function(exports) {
                     }
                     return empty;
                 });
-                this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+                this.addBlock(empty ? this.canvas.bounds : item.updatedBounds, updatedList);
             });
         }
         emitRender(type, bounds, options) {
@@ -7367,7 +7442,7 @@ var LeaferUI = function(exports) {
             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;
@@ -7405,7 +7480,9 @@ var LeaferUI = function(exports) {
             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();
             }
         }));
     }
@@ -7490,7 +7567,7 @@ var LeaferUI = function(exports) {
         }
     };
     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: {}
     };
@@ -7556,7 +7633,7 @@ var LeaferUI = function(exports) {
         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)) {
@@ -7565,7 +7642,7 @@ var LeaferUI = function(exports) {
         }
         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)) {
@@ -7598,15 +7675,16 @@ var LeaferUI = function(exports) {
             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 (strokeScaleFixed) {
+                const {scaleX: scaleX} = this.__leaf.getRenderScaleData(true, strokeScaleFixed, false);
+                if (scaleX !== 1) return strokeWidth * scaleX;
             }
-            if (strokeWidthFixed) {
-                const scale = this.__leaf.getClampRenderScale();
-                return scale > 1 ? strokeWidth / scale : strokeWidth;
-            } else return strokeWidth;
+            return strokeWidth;
         }
         __setPaint(attrName, value) {
             this.__setInput(attrName, value);
@@ -7623,11 +7701,11 @@ var LeaferUI = function(exports) {
             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;
             }
         }
@@ -7729,13 +7807,16 @@ var LeaferUI = function(exports) {
         }
     }
     class ImageData extends RectData {
+        get __urlType() {
+            return "image";
+        }
         setUrl(value) {
             this.__setImageFill(value);
             this._url = value;
         }
         __setImageFill(value) {
             this.fill = value ? {
-                type: "image",
+                type: this.__urlType,
                 mode: "stretch",
                 url: value
             } : undefined;
@@ -7771,7 +7852,7 @@ var LeaferUI = function(exports) {
             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);
@@ -7800,22 +7881,22 @@ var LeaferUI = function(exports) {
             return box ? max$4(box.__updateRenderSpread(), spread) : spread;
         }
     };
-    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);
@@ -7922,6 +8003,12 @@ var LeaferUI = function(exports) {
         get isFrame() {
             return false;
         }
+        set strokeWidthFixed(value) {
+            this.strokeScaleFixed = value;
+        }
+        get strokeWidthFixed() {
+            return this.strokeScaleFixed;
+        }
         set scale(value) {
             MathHelper.assignScale(this, value);
         }
@@ -7977,6 +8064,9 @@ var LeaferUI = function(exports) {
         getPathString(curve, pathForRender, floatLength) {
             return PathConvert.stringify(this.getPath(curve, pathForRender), floatLength);
         }
+        asPath(curve, pathForRender) {
+            this.path = this.getPath(curve, pathForRender);
+        }
         load() {
             this.__.__computePaint();
         }
@@ -7986,16 +8076,18 @@ var LeaferUI = function(exports) {
                 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();
@@ -8044,6 +8136,7 @@ var LeaferUI = function(exports) {
         static setEditOuter(_toolName) {}
         static setEditInner(_editorName) {}
         destroy() {
+            this.__.__willDestroy = true;
             this.fill = this.stroke = null;
             if (this.__animate) this.killAnimate();
             super.destroy();
@@ -8104,7 +8197,7 @@ var LeaferUI = function(exports) {
     __decorate([ strokeType(undefined, true) ], exports.UI.prototype, "stroke", void 0);
     __decorate([ strokeType("inside") ], exports.UI.prototype, "strokeAlign", void 0);
     __decorate([ strokeType(1, true) ], exports.UI.prototype, "strokeWidth", void 0);
-    __decorate([ strokeType(false) ], exports.UI.prototype, "strokeWidthFixed", void 0);
+    __decorate([ strokeType(false) ], exports.UI.prototype, "strokeScaleFixed", void 0);
     __decorate([ strokeType("none") ], exports.UI.prototype, "strokeCap", void 0);
     __decorate([ strokeType("miter") ], exports.UI.prototype, "strokeJoin", void 0);
     __decorate([ strokeType() ], exports.UI.prototype, "dashPattern", void 0);
@@ -8151,7 +8244,10 @@ var LeaferUI = function(exports) {
         }
         toJSON(options) {
             const data = super.toJSON(options);
-            if (!this.childlessJSON) data.children = this.children.map(child => child.toJSON(options));
+            if (!this.childlessJSON) {
+                const children = data.children = [];
+                this.children.forEach(child => child.skipJSON || children.push(child.toJSON(options)));
+            }
             return data;
         }
         pick(_hitPoint, _options) {
@@ -8293,12 +8389,12 @@ var LeaferUI = function(exports) {
                 this.emitLeafer(LeaferEvent.STOP);
             }
         }
-        unlockLayout() {
+        unlockLayout(updateLayout = true) {
             this.layouter.start();
-            this.updateLayout();
+            if (updateLayout) this.updateLayout();
         }
-        lockLayout() {
-            this.updateLayout();
+        lockLayout(updateLayout = true) {
+            if (updateLayout) this.updateLayout();
             this.layouter.stop();
         }
         resize(size) {
@@ -8675,9 +8771,9 @@ var LeaferUI = function(exports) {
             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) {
@@ -8699,7 +8795,7 @@ var LeaferUI = function(exports) {
                 }
             }
             if (!open) closePath$2(path);
-            if (Platform.ellipseToCurve) this.__.path = this.getPath(true);
+            if (Platform.ellipseToCurve || data.__useArrow) data.path = this.getPath(true);
         }
     };
     __decorate([ dataProcessor(EllipseData) ], exports.Ellipse.prototype, "__", void 0);
@@ -8878,7 +8974,7 @@ var LeaferUI = function(exports) {
     __decorate([ dataType(false) ], exports.Canvas.prototype, "safeResize", void 0);
     __decorate([ resizeType() ], exports.Canvas.prototype, "contextSettings", void 0);
     exports.Canvas = __decorate([ registerUI() ], exports.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;
     exports.Text = class Text extends exports.UI {
         get __tag() {
             return "Text";
@@ -8894,9 +8990,9 @@ var LeaferUI = function(exports) {
             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() {
@@ -8931,7 +9027,7 @@ var LeaferUI = function(exports) {
         }
         __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() {
@@ -9155,7 +9251,7 @@ var LeaferUI = function(exports) {
             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));
@@ -9877,6 +9973,7 @@ var LeaferUI = function(exports) {
             this.checkPath(data, useDefaultPath);
             this.downTime = Date.now();
             this.emit(exports.PointerEvent.BEFORE_DOWN, data);
+            if (data.path.needUpdate) this.updateDownData(data);
             this.emit(exports.PointerEvent.DOWN, data);
             if (PointerButton.left(data)) {
                 this.tapWait();
@@ -10470,8 +10567,8 @@ var LeaferUI = function(exports) {
                 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);
@@ -10629,13 +10726,13 @@ var LeaferUI = function(exports) {
             }
         }
     }
-    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 = {};
     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);
@@ -10689,7 +10786,7 @@ var LeaferUI = function(exports) {
         };
     }
     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 = [];
         let paints = data.__input[attrName], isAlphaPixel, isTransparent;
@@ -10712,12 +10809,12 @@ var LeaferUI = function(exports) {
                 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);
@@ -10726,11 +10823,14 @@ var LeaferUI = function(exports) {
     function getLeafPaint(attrName, paint, ui) {
         if (!isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined;
         let leafPaint;
-        const {boxBounds: boxBounds} = ui.__layout;
-        switch (paint.type) {
+        const {boxBounds: boxBounds} = ui.__layout, {type: type} = paint;
+        switch (type) {
           case "image":
+          case "film":
+          case "video":
             if (!paint.url) return undefined;
             leafPaint = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+            if (type !== "image") PaintImage[type](leafPaint);
             break;
 
           case "linear":
@@ -10746,7 +10846,7 @@ var LeaferUI = function(exports) {
             break;
 
           case "solid":
-            const {type: type, color: color, opacity: opacity} = paint;
+            const {color: color, opacity: opacity} = paint;
             leafPaint = {
                 type: type,
                 style: ColorConvert.string(color, opacity)
@@ -10783,11 +10883,11 @@ var LeaferUI = function(exports) {
         shape: shape
     };
     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);
-        if (cache$1 && paint === cache$1.paint && isSame(boxBounds, cache$1.boxBounds)) {
+        const image = ImageManager.get(paint, paint.type);
+        if (cache$1 && paint === cache$1.paint && isSame$1(boxBounds, cache$1.boxBounds)) {
             leafPaint = cache$1.leafPaint;
         } else {
             leafPaint = {
@@ -10846,8 +10946,8 @@ var LeaferUI = function(exports) {
         return leafPaint;
     }
     function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
-        if (attrName === "fill" && !ui.__.__naturalWidth) {
-            const data = ui.__;
+        const data = ui.__;
+        if (attrName === "fill" && !data.__naturalWidth) {
             data.__naturalWidth = image.width / data.pixelRatio;
             data.__naturalHeight = image.height / data.pixelRatio;
             if (data.__autoSide) {
@@ -10859,7 +10959,13 @@ var LeaferUI = function(exports) {
                 return false;
             }
         }
-        if (!leafPaint.data) PaintImage.createData(leafPaint, image, paint, boxBounds);
+        if (!leafPaint.data) {
+            PaintImage.createData(leafPaint, image, paint, boxBounds);
+            const {transform: transform} = leafPaint.data, {opacity: opacity, blendMode: blendMode} = paint;
+            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;
     }
     function onLoad(ui, event) {
@@ -10891,7 +10997,7 @@ var LeaferUI = function(exports) {
         if (paint.padding) box = tempBox.set(box).shrink(paint.padding);
         if (paint.mode === "strench") paint.mode = "stretch";
         const {width: width, height: height} = image;
-        const {opacity: opacity, mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, filters: filters, interlace: interlace} = paint;
+        const {mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, interlace: interlace} = paint;
         const sameBox = box.width === width && box.height === height;
         const data = {
             mode: mode
@@ -10954,8 +11060,6 @@ var LeaferUI = function(exports) {
             data.scaleX = scaleX;
             data.scaleY = scaleY;
         }
-        if (opacity && opacity < 1) data.opacity = opacity;
-        if (filters) data.filters = filters;
         if (repeat) data.repeat = isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
         if (interlace) data.interlace = isNumber(interlace) || interlace.type === "percent" ? {
             type: "x",
@@ -10981,7 +11085,7 @@ var LeaferUI = function(exports) {
     const {get: get$2, set: set, rotateOfOuter: rotateOfOuter$1, translate: translate, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate$2, skew: skewHelper} = MatrixHelper;
     function stretchMode(data, box, scaleX, scaleY) {
         const transform = get$2(), {x: x, y: y} = box;
-        if (x || y) translate(transform, x, y); else transform.onlyScale = true;
+        if (x || y) translate(transform, x, y); else if (scaleX > 0 && scaleY > 0) transform.onlyScale = true;
         scaleHelper(transform, scaleX, scaleY);
         data.transform = transform;
     }
@@ -11048,7 +11152,7 @@ var LeaferUI = function(exports) {
         if (scaleX) scaleHelper(transform, scaleX, scaleY);
         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;
     function createPatternTask(paint, ui, canvas, renderOptions) {
         if (!paint.patternTask) {
@@ -11062,10 +11166,10 @@ var LeaferUI = function(exports) {
         }
     }
     function createPattern(paint, ui, canvas, renderOptions) {
-        let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = scaleX + "-" + scaleY;
+        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, {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;
@@ -11079,9 +11183,9 @@ var LeaferUI = function(exports) {
                     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, data.opacity, data.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;
@@ -11100,15 +11204,15 @@ var LeaferUI = function(exports) {
         return fixScale;
     }
     function checkImage(paint, drawImage, ui, canvas, renderOptions) {
-        const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
+        const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
         const {image: image, data: data, originPaint: originPaint} = paint, {exporting: exporting, snapshot: snapshot} = renderOptions;
-        if (!data || paint.patternId === scaleX + "-" + scaleY && !exporting || snapshot) {
+        if (!data || paint.patternId === id && !exporting || snapshot) {
             return false;
         } else {
             if (drawImage) {
                 if (data.repeat) {
                     drawImage = false;
-                } else if (!(originPaint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
+                } else if (!(originPaint.changeful || paint.film || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
                     drawImage = Platform.image.isLarge(image, scaleX, scaleY) || image.width * scaleX > 8096 || image.height * scaleY > 8096;
                 }
             }
@@ -11125,20 +11229,21 @@ var LeaferUI = function(exports) {
             }
         }
     }
-    function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions) {
-        const {data: data, image: image} = paint, {blendMode: blendMode} = paint.originPaint, {opacity: opacity, transform: transform} = data, view = image.getFull(data.filters), u = ui.__;
-        let {width: width, height: height} = image, clipUI;
-        if ((clipUI = transform && !transform.onlyScale || u.path || u.cornerRadius) || opacity || blendMode) {
+    function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions) {
+        const {data: data, image: image, complex: complex} = paint;
+        let {width: width, height: height} = image;
+        if (complex) {
+            const {blendMode: blendMode, opacity: opacity} = paint.originPaint, {transform: transform} = data;
             canvas.save();
-            clipUI && canvas.clipUI(ui);
+            complex === 2 && canvas.clipUI(ui);
             blendMode && (canvas.blendMode = blendMode);
             opacity && (canvas.opacity *= opacity);
             transform && canvas.transform(transform);
-            canvas.drawImage(view, 0, 0, width, height);
+            image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
             canvas.restore();
         } else {
             if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
-            canvas.drawImage(view, 0, 0, width, height);
+            image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
         }
     }
     function getImageRenderScaleData(paint, ui, canvas, _renderOptions) {
@@ -11166,6 +11271,7 @@ var LeaferUI = function(exports) {
                     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] || [];
@@ -12021,8 +12127,11 @@ var LeaferUI = function(exports) {
                                     });
                                     if (isObject(check)) value = check; else if (check === false) return;
                                 }
-                                t.setDimOthers(false);
-                                t.setBright(false);
+                                const {dimOthers: dimOthers, bright: bright} = t.editBox.mergedConfig || t.config;
+                                if (!isUndefined(dimOthers) || !isUndefined(bright)) {
+                                    t.setDimOthers(false);
+                                    t.setBright(false);
+                                }
                                 if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
                                 if (t.single) {
                                     delete t.element.syncEventer;
@@ -12046,7 +12155,8 @@ var LeaferUI = function(exports) {
         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) {
@@ -12297,6 +12407,7 @@ var LeaferUI = function(exports) {
                     } else {
                         editor.target = find;
                     }
+                    e.path.needUpdate = true;
                 } else if (this.allow(e.target)) {
                     if (!this.isHoldMultipleSelectKey(e) && !this.editor.mergedConfig.selectKeep) editor.target = null;
                 }
@@ -12923,8 +13034,10 @@ var LeaferUI = function(exports) {
             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);
+            }
             if (spread) BoundsHelper.spread(bounds, spread);
             if (this.view.worldOpacity) {
                 const {width: width, height: height} = bounds;
@@ -12943,7 +13056,8 @@ var LeaferUI = function(exports) {
                         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;
@@ -13469,6 +13583,7 @@ var LeaferUI = function(exports) {
             this.checkChange = true;
             this.canChange = true;
             this.visible = this.hittable = false;
+            this.skipJSON = true;
             this.on(PropertyEvent.CHANGE, event => {
                 if (this.checkChange && checkMap[event.attrName]) {
                     const {attrName: attrName, newValue: newValue, oldValue: oldValue} = event;
@@ -14644,6 +14759,8 @@ var LeaferUI = function(exports) {
                 break;
 
               case "image":
+              case "film":
+              case "video":
                 break;
 
               case "linear":
@@ -14857,9 +14974,14 @@ var LeaferUI = function(exports) {
         }), leafer.on_(exports.MoveEvent.END, e => {
             LeafHelper.animateMove(leafer.zoomLayer, leafer.getValidMove(e.moveX, e.moveY));
         }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, e => {
-            const {zoomLayer: zoomLayer} = leafer;
+            const {zoomLayer: zoomLayer, layouter: layouter} = leafer;
             const changeScale = leafer.getValidScale(e.scale);
-            if (changeScale !== 1) zoomLayer.scaleOfWorld(e, changeScale);
+            if (changeScale !== 1) {
+                layouter.stop();
+                LeafHelper.updateMatrix(leafer);
+                zoomLayer.scaleOfWorld(e, changeScale);
+                layouter.start();
+            }
         }));
     }
     function addViewportConfig(leafer, mergeConfig) {
@@ -15720,7 +15842,7 @@ var LeaferUI = function(exports) {
     __decorate([ arrowType("angle") ], exports.Arrow.prototype, "endArrow", void 0);
     exports.Arrow = __decorate([ registerUI() ], exports.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 = {};
     const PathMatrixHelper = {
         layout(data, x, y, scaleX, scaleY, rotation, origin) {
@@ -15764,17 +15886,19 @@ var LeaferUI = function(exports) {
     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;
     }
     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,
@@ -15792,61 +15916,83 @@ var LeaferUI = function(exports) {
         path: [ 1, -3, -3, 2, 0, 0, 2, -1, 0 ]
     };
     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 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 ]
+    const triangle = DataHelper.clone(triangleFill);
+    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 = {
         offset: half,
@@ -15866,19 +16012,33 @@ var LeaferUI = function(exports) {
         "diamond-line": diamondLine,
         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);
@@ -15886,22 +16046,31 @@ var LeaferUI = function(exports) {
         if (offset) {
             if (strokeJoin === "round" && offset.roundJoin) offsetX += offset.roundJoin; else if (strokeJoin === "bevel" && offset.bevelJoin) offsetX += offset.bevelJoin;
         }
-        if (scale) layout$2(data, 0, 0, scale, scale);
+        if (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];
@@ -15909,6 +16078,7 @@ var LeaferUI = function(exports) {
                   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);
                     }
@@ -15916,12 +16086,18 @@ var LeaferUI = function(exports) {
                     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;
 
@@ -15959,6 +16135,7 @@ var LeaferUI = function(exports) {
                   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;
@@ -15969,13 +16146,13 @@ var LeaferUI = function(exports) {
                 }
                 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;
@@ -15983,8 +16160,10 @@ var LeaferUI = function(exports) {
                         }
                     }
                     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;
@@ -16011,10 +16190,21 @@ var LeaferUI = function(exports) {
                 } else {
                     copy(last, now);
                 }
+                stintSet$1(uData, "__startArrowPath", singleStartArrow && startArrowPath);
+                stintSet$1(uData, "__endArrowPath", singleEndArrow && endArrowPath);
+            }
+        },
+        updateArrow(ui) {
+            const data = ui.__;
+            if (data.strokeScaleFixed) {
+                if (data.__strokeWidthCache !== data.__strokeWidth) {
+                    ui.__updateRenderPath(true);
+                }
             }
         },
-        register(name, data) {
+        register(name, data, fillData) {
             this.list[name] = data;
+            if (fillData) this.fillList[name] = data;
         },
         get(name) {
             return this.list[name];
@@ -16033,12 +16223,26 @@ var LeaferUI = function(exports) {
     exports.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();
+                }
             }
         }
     });
@@ -16451,7 +16655,7 @@ var LeaferUI = function(exports) {
     exports.UI.addAttr("autoWidth", undefined, autoBoundsType);
     exports.UI.addAttr("autoHeight", undefined, autoBoundsType);
     exports.UI.addAttr("autoBox", undefined, boundsType);
-    const {copyAndSpread: copyAndSpread} = BoundsHelper;
+    const {copyAndSpread: copyAndSpread$1} = BoundsHelper;
     box$1.__updateFlowLayout = function() {
         const {leaferIsCreated: leaferIsCreated, flow: flow} = this;
         if (leaferIsCreated) this.leafer.created = false;
@@ -16481,7 +16685,7 @@ var LeaferUI = function(exports) {
         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();
         }
@@ -16502,7 +16706,7 @@ var LeaferUI = function(exports) {
                         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();
@@ -18190,6 +18394,9 @@ var LeaferUI = function(exports) {
         constructor(data) {
             super(data);
         }
+        togglePlay() {
+            this.running ? this.pause() : this.play();
+        }
         play() {
             this.running = true;
         }
@@ -18302,9 +18509,7 @@ var LeaferUI = function(exports) {
     const {Yes: Yes, NoAndSkip: NoAndSkip, YesAndSkip: YesAndSkip} = exports.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,
@@ -18314,6 +18519,13 @@ var LeaferUI = function(exports) {
                 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) {
@@ -18434,8 +18646,13 @@ var LeaferUI = function(exports) {
         return getSelector(this).getBy(condition, this, true, 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;
     function getTrimBounds(canvas) {
@@ -18707,7 +18924,7 @@ var LeaferUI = function(exports) {
         style: {
             dragBoundsType: "outer",
             strokeAlign: "center",
-            strokeWidthFixed: "zoom-in",
+            strokeScaleFixed: "zoom-in",
             width: 6,
             height: 6,
             opacity: .5,
@@ -18944,6 +19161,41 @@ var LeaferUI = function(exports) {
             fill: "white"
         }
     });
+    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");
+    exports.UI.addAttr("scaleFixed", undefined, scaleFixedType);
     exports.AlignHelper = AlignHelper;
     exports.AnimateEasing = AnimateEasing;
     exports.AnimateEvent = AnimateEvent;
@@ -19023,8 +19275,10 @@ var LeaferUI = function(exports) {
     exports.LeaferCanvasBase = LeaferCanvasBase;
     exports.LeaferData = LeaferData;
     exports.LeaferEvent = LeaferEvent;
+    exports.LeaferFilm = LeaferFilm;
     exports.LeaferImage = LeaferImage;
     exports.LeaferTypeCreator = LeaferTypeCreator;
+    exports.LeaferVideo = LeaferVideo;
     exports.LineData = LineData;
     exports.MathHelper = MathHelper;
     exports.Matrix = Matrix;