leafer-ui 1.0.0-rc.17 → 1.0.0-rc.19

package/dist/web.js

@@ -41,6 +41,18 @@ var LeaferUI = (function (exports) {
                 value = max;
             return value;
         },
+        minus(value, isFourNumber) {
+            if (value instanceof Array) {
+                if (isFourNumber)
+                    value = MathHelper.fourNumber(value);
+                for (let i = 0; i < value.length; i++)
+                    value[i] = -value[i];
+            }
+            else {
+                value = -value;
+            }
+            return value;
+        },
         fourNumber(num, maxValue) {
             let data;
             if (num instanceof Array) {
@@ -724,7 +736,7 @@ var LeaferUI = (function (exports) {
 
     const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$3, addPoint: addPoint$3, toBounds: toBounds$4 } = TwoPointBoundsHelper;
     const { toOuterPoint: toOuterPoint$1 } = MatrixHelper;
-    const { float } = MathHelper;
+    const { float, fourNumber } = MathHelper;
     const { floor, ceil: ceil$2 } = Math;
     let right$1, bottom$1, boundsRight, boundsBottom;
     const point = {};
@@ -744,9 +756,15 @@ var LeaferUI = (function (exports) {
             t.height = bounds.height;
         },
         copyAndSpread(t, bounds, spreadX, spreadY) {
-            if (!spreadY)
-                spreadY = spreadX;
-            B.set(t, bounds.x - spreadX, bounds.y - spreadY, bounds.width + spreadX * 2, bounds.height + spreadY * 2);
+            if (spreadX instanceof Array) {
+                const four = fourNumber(spreadX);
+                B.set(t, bounds.x - four[3], bounds.y - four[0], bounds.width + four[1] + four[3], bounds.height + four[2] + four[0]);
+            }
+            else {
+                if (!spreadY)
+                    spreadY = spreadX;
+                B.set(t, bounds.x - spreadX, bounds.y - spreadY, bounds.width + spreadX * 2, bounds.height + spreadY * 2);
+            }
         },
         minX(t) { return t.width > 0 ? t.x : t.x + t.width; },
         minY(t) { return t.height > 0 ? t.y : t.y + t.height; },
@@ -1024,8 +1042,12 @@ var LeaferUI = (function (exports) {
         getFitMatrix(put) {
             return BoundsHelper.getFitMatrix(this, put);
         }
-        spread(spreadX, spreadY) {
-            BoundsHelper.spread(this, spreadX, spreadY);
+        spread(fourNumber, spreadY) {
+            BoundsHelper.spread(this, fourNumber, spreadY);
+            return this;
+        }
+        shrink(fourNumber) {
+            BoundsHelper.spread(this, MathHelper.minus(fourNumber, true));
             return this;
         }
         ceil() {
@@ -1450,17 +1472,30 @@ var LeaferUI = (function (exports) {
             if (this.__input && this.__input[name] !== undefined)
                 this.__input[name] = undefined;
         }
-        __getInputData() {
-            const data = { tag: this.__leaf.tag }, { __input } = this;
-            let value, inputValue;
-            for (let key in this) {
-                if (key[0] !== '_') {
-                    value = this['_' + key];
-                    if (value !== undefined) {
-                        if (key === 'path' && !this.__pathInputed)
-                            continue;
-                        inputValue = __input ? __input[key] : undefined;
-                        data[key] = (inputValue === undefined) ? value : inputValue;
+        __getInputData(names) {
+            const data = {};
+            if (names) {
+                if (names instanceof Array) {
+                    for (let name of names)
+                        data[name] = this.__getInput(name);
+                }
+                else {
+                    for (let name in names)
+                        data[name] = this.__getInput(name);
+                }
+            }
+            else {
+                let value, inputValue, { __input } = this;
+                data.tag = this.__leaf.tag;
+                for (let key in this) {
+                    if (key[0] !== '_') {
+                        value = this['_' + key];
+                        if (value !== undefined) {
+                            if (key === 'path' && !this.__pathInputed)
+                                continue;
+                            inputValue = __input ? __input[key] : undefined;
+                            data[key] = (inputValue === undefined) ? value : inputValue;
+                        }
                     }
                 }
             }
@@ -2821,12 +2856,16 @@ var LeaferUI = (function (exports) {
         set path(value) { this.__path = value; }
         get path() { return this.__path; }
         constructor(path) {
+            this.set(path);
+        }
+        set(path) {
             if (path) {
                 this.__path = typeof path === 'string' ? PathHelper.parse(path) : path;
             }
             else {
                 this.__path = [];
             }
+            return this;
         }
         beginPath() {
             beginPath(this.__path);
@@ -3140,6 +3179,7 @@ var LeaferUI = (function (exports) {
     PathHelper.creator = new PathCreator();
     PathHelper.parse = PathConvert.parse;
     PathHelper.convertToCanvasData = PathConvert.toCanvasData;
+    const pen = new PathCreator();
 
     const { drawRoundRect } = RectHelper;
     function roundRect(drawer) {
@@ -3424,7 +3464,7 @@ var LeaferUI = (function (exports) {
         },
         clearRecycled() {
             const list = I$1.recycledList;
-            if (list.length) {
+            if (list.length > 100) {
                 list.forEach(image => {
                     if (!image.use && image.url) {
                         delete I$1.map[image.url];
@@ -3676,6 +3716,8 @@ var LeaferUI = (function (exports) {
     }
     function doStrokeType(leaf) {
         leaf.__layout.strokeChanged || leaf.__layout.strokeChange();
+        if (leaf.__.__useArrow)
+            doBoundsType(leaf);
     }
     const strokeType = affectStrokeBoundsType;
     function affectRenderBoundsType(defaultValue) {
@@ -3879,131 +3921,411 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    const tempMatrix = new Matrix();
-    const { toOuterOf: toOuterOf$2, getPoints, copy: copy$6 } = BoundsHelper;
-    class LeafLayout {
-        get strokeBounds() { return this._strokeBounds || this.boxBounds; }
-        get renderBounds() { return this._renderBounds || this.boxBounds; }
-        get localStrokeBounds() { return this._localStrokeBounds || this; }
-        get localRenderBounds() { return this._localRenderBounds || this; }
-        get a() { return 1; }
-        get b() { return 0; }
-        get c() { return 0; }
-        get d() { return 1; }
-        get e() { return this.leaf.__.x; }
-        get f() { return this.leaf.__.y; }
-        get x() { return this.e + this.boxBounds.x; }
-        get y() { return this.f + this.boxBounds.y; }
-        get width() { return this.boxBounds.width; }
-        get height() { return this.boxBounds.height; }
-        constructor(leaf) {
-            this.leaf = leaf;
-            this.boxBounds = { x: 0, y: 0, width: 0, height: 0 };
-            if (this.leaf.__local)
-                this._localRenderBounds = this._localStrokeBounds = this.leaf.__local;
-            this.boxChange();
-            this.matrixChange();
-        }
-        createLocal() {
-            const local = this.leaf.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
-            if (!this._localStrokeBounds)
-                this._localStrokeBounds = local;
-            if (!this._localRenderBounds)
-                this._localRenderBounds = local;
-        }
-        update() {
-            const { leafer } = this.leaf;
-            if (leafer) {
-                if (leafer.ready) {
-                    if (leafer.watcher.changed)
-                        leafer.layouter.layout();
+    const { copy: copy$6, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+    const matrix = {};
+    const LeafHelper = {
+        updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
+            if (checkAutoLayout && leaf.__hasAutoLayout && leaf.__layout.matrixChanged)
+                waitAutoLayout = true;
+            updateMatrix$2(leaf, checkAutoLayout, waitAutoLayout);
+            if (leaf.isBranch) {
+                const { children } = leaf;
+                for (let i = 0, len = children.length; i < len; i++) {
+                    updateAllMatrix$3(children[i], checkAutoLayout, waitAutoLayout);
                 }
-                else {
-                    leafer.start();
+            }
+        },
+        updateMatrix(leaf, checkAutoLayout, waitAutoLayout) {
+            const layout = leaf.__layout;
+            if (checkAutoLayout) {
+                if (waitAutoLayout) {
+                    layout.waitAutoLayout = true;
+                    if (leaf.__hasAutoLayout)
+                        layout.matrixChanged = false;
                 }
             }
-            else {
-                let root = this.leaf;
-                while (root.parent && !root.parent.leafer) {
-                    root = root.parent;
+            else if (layout.waitAutoLayout) {
+                layout.waitAutoLayout = false;
+            }
+            if (layout.matrixChanged)
+                leaf.__updateLocalMatrix();
+            if (!layout.waitAutoLayout)
+                leaf.__updateWorldMatrix();
+        },
+        updateBounds(leaf) {
+            const layout = leaf.__layout;
+            if (layout.boundsChanged)
+                leaf.__updateLocalBounds();
+            if (!layout.waitAutoLayout)
+                leaf.__updateWorldBounds();
+        },
+        updateAllWorldOpacity(leaf) {
+            leaf.__updateWorldOpacity();
+            if (leaf.isBranch) {
+                const { children } = leaf;
+                for (let i = 0, len = children.length; i < len; i++) {
+                    updateAllWorldOpacity$1(children[i]);
                 }
-                Platform.layout(root);
             }
-        }
-        getTransform(relative = 'world') {
-            this.update();
-            switch (relative) {
-                case 'world':
-                    return this.leaf.__world;
-                case 'local':
-                    return this.leaf.__localMatrix;
-                case 'inner':
-                    return MatrixHelper.defaultMatrix;
-                default:
-                    return new Matrix(this.leaf.__world).divideParent(relative.__world);
+        },
+        updateAllChange(leaf) {
+            updateAllWorldOpacity$1(leaf);
+            leaf.__updateChange();
+            if (leaf.isBranch) {
+                const { children } = leaf;
+                for (let i = 0, len = children.length; i < len; i++) {
+                    updateAllChange$1(children[i]);
+                }
             }
-        }
-        getBounds(type, relative = 'world') {
-            this.update();
-            switch (relative) {
-                case 'world':
-                    return this.getWorldBounds(type);
-                case 'local':
-                    return this.getLocalBounds(type);
-                case 'inner':
-                    return this.getInnerBounds(type);
-                default:
-                    return new Bounds(this.getInnerBounds(type)).toOuterOf(this.getTransform(relative));
+        },
+        worldHittable(t) {
+            while (t) {
+                if (!t.__.hittable)
+                    return false;
+                t = t.parent;
             }
-        }
-        getInnerBounds(type = 'box') {
-            switch (type) {
-                case 'render':
-                    return this.renderBounds;
-                case 'content':
-                    if (this.contentBounds)
-                        return this.contentBounds;
-                case 'margin':
-                case 'box':
-                    return this.boxBounds;
-                case 'stroke':
-                    return this.strokeBounds;
+            return true;
+        },
+        moveWorld(t, x, y) {
+            const local = { x, y };
+            if (t.parent)
+                toInnerPoint$1(t.parent.worldTransform, local, local, true);
+            L.moveLocal(t, local.x, local.y);
+        },
+        moveLocal(t, x, y = 0) {
+            t.x += x;
+            t.y += y;
+        },
+        zoomOfWorld(t, origin, scaleX, scaleY, resize) {
+            L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
+        },
+        zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
+            copy$6(matrix, t.__localMatrix);
+            scaleOfOuter$3(matrix, origin, scaleX, scaleY);
+            moveByMatrix(t, matrix);
+            t.scaleResize(scaleX, scaleY, resize !== true);
+        },
+        rotateOfWorld(t, origin, angle) {
+            L.rotateOfLocal(t, getTempLocal(t, origin), angle);
+        },
+        rotateOfLocal(t, origin, angle) {
+            copy$6(matrix, t.__localMatrix);
+            rotateOfOuter$3(matrix, origin, angle);
+            moveByMatrix(t, matrix);
+            t.rotation = MathHelper.formatRotation(t.rotation + angle);
+        },
+        skewOfWorld(t, origin, skewX, skewY, resize) {
+            L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
+        },
+        skewOfLocal(t, origin, skewX, skewY = 0, resize) {
+            copy$6(matrix, t.__localMatrix);
+            skewOfOuter(matrix, origin, skewX, skewY);
+            L.setTransform(t, matrix, resize);
+        },
+        transformWorld(t, transform, resize) {
+            copy$6(matrix, t.worldTransform);
+            multiplyParent$2(matrix, transform);
+            if (t.parent)
+                divideParent(matrix, t.parent.worldTransform);
+            L.setTransform(t, matrix, resize);
+        },
+        transform(t, transform, resize) {
+            copy$6(matrix, t.localTransform);
+            multiplyParent$2(matrix, transform);
+            L.setTransform(t, matrix, resize);
+        },
+        setTransform(t, transform, resize) {
+            const layout = getLayout(transform);
+            if (resize) {
+                t.scaleResize(layout.scaleX / t.scaleX, layout.scaleY / t.scaleY, resize !== true);
+                delete layout.scaleX;
+                delete layout.scaleY;
             }
-        }
-        getLocalBounds(type = 'box') {
-            switch (type) {
-                case 'render':
-                    return this.localRenderBounds;
-                case 'stroke':
-                    return this.localStrokeBounds;
-                case 'margin':
-                case 'content':
-                case 'box':
-                    return this.leaf.__localBoxBounds;
+            t.set(layout);
+        },
+        getRelativeWorld(t, relative, temp) {
+            copy$6(matrix, t.worldTransform);
+            divideParent(matrix, relative.worldTransform);
+            return temp ? matrix : Object.assign({}, matrix);
+        },
+        drop(t, parent, index, resize) {
+            t.setTransform(L.getRelativeWorld(t, parent, true), resize);
+            parent.add(t, index);
+        },
+        hasParent(p, parent) {
+            if (!parent)
+                return false;
+            while (p) {
+                if (parent === p)
+                    return true;
+                p = p.parent;
             }
-        }
-        getWorldBounds(type = 'box') {
-            switch (type) {
-                case 'render':
-                    return this.leaf.__world;
-                case 'content':
-                    if (this.contentBounds)
-                        return this.getWorldContentBounds();
-                case 'margin':
-                case 'box':
-                    return this.getWorldBoxBounds();
-                case 'margin':
-                case 'stroke':
-                    return this.getWorldStrokeBounds();
+        },
+        hasParentAutoLayout(p) {
+            while (p.parent) {
+                p = p.parent;
+                if (p.__hasAutoLayout)
+                    return true;
             }
         }
-        getLayoutBounds(type, relative = 'world', unscale) {
-            const { leaf } = this;
-            let point, matrix, bounds = this.getInnerBounds(type);
-            switch (relative) {
-                case 'world':
-                    point = leaf.getWorldPoint(bounds);
-                    matrix = leaf.__world;
+    };
+    const L = LeafHelper;
+    const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L;
+    function moveByMatrix(t, matrix) {
+        const { e, f } = t.__localMatrix;
+        t.x += matrix.e - e;
+        t.y += matrix.f - f;
+    }
+    function getTempLocal(t, world) {
+        t.__layout.update();
+        return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
+    }
+
+    const LeafBoundsHelper = {
+        worldBounds(target) {
+            return target.__world;
+        },
+        localBoxBounds(target) {
+            return target.__.eraser ? null : (target.__local || target.__layout);
+        },
+        localStrokeBounds(target) {
+            return target.__.eraser ? null : target.__layout.localStrokeBounds;
+        },
+        localRenderBounds(target) {
+            return target.__.eraser ? null : target.__layout.localRenderBounds;
+        },
+        maskLocalBoxBounds(target) {
+            return target.__.mask ? target.__localBoxBounds : null;
+        },
+        maskLocalStrokeBounds(target) {
+            return target.__.mask ? target.__layout.localStrokeBounds : null;
+        },
+        maskLocalRenderBounds(target) {
+            return target.__.mask ? target.__layout.localRenderBounds : null;
+        },
+        excludeRenderBounds(child, options) {
+            if (options.bounds && !options.bounds.hit(child.__world, options.matrix))
+                return true;
+            if (options.hideBounds && options.hideBounds.includes(child.__world, options.matrix))
+                return true;
+            return false;
+        }
+    };
+
+    const { updateBounds: updateBounds$2 } = LeafHelper;
+    const BranchHelper = {
+        sort(a, b) {
+            return (a.__.zIndex === b.__.zIndex) ? (a.__tempNumber - b.__tempNumber) : (a.__.zIndex - b.__.zIndex);
+        },
+        pushAllChildBranch(branch, leafList) {
+            branch.__tempNumber = 1;
+            if (branch.__.__childBranchNumber) {
+                const { children } = branch;
+                for (let i = 0, len = children.length; i < len; i++) {
+                    branch = children[i];
+                    if (branch.isBranch) {
+                        branch.__tempNumber = 1;
+                        leafList.add(branch);
+                        pushAllChildBranch$1(branch, leafList);
+                    }
+                }
+            }
+        },
+        pushAllParent(leaf, leafList) {
+            const { keys } = leafList;
+            if (keys) {
+                while (leaf.parent) {
+                    if (keys[leaf.parent.innerId] === undefined) {
+                        leafList.add(leaf.parent);
+                        leaf = leaf.parent;
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            else {
+                while (leaf.parent) {
+                    leafList.add(leaf.parent);
+                    leaf = leaf.parent;
+                }
+            }
+        },
+        pushAllBranchStack(branch, pushList) {
+            let start = pushList.length;
+            const { children } = branch;
+            for (let i = 0, len = children.length; i < len; i++) {
+                if (children[i].isBranch) {
+                    pushList.push(children[i]);
+                }
+            }
+            for (let i = start, len = pushList.length; i < len; i++) {
+                pushAllBranchStack(pushList[i], pushList);
+            }
+        },
+        updateBounds(branch, exclude) {
+            const branchStack = [branch];
+            pushAllBranchStack(branch, branchStack);
+            updateBoundsByBranchStack(branchStack, exclude);
+        },
+        updateBoundsByBranchStack(branchStack, exclude) {
+            let branch, children;
+            for (let i = branchStack.length - 1; i > -1; i--) {
+                branch = branchStack[i];
+                children = branch.children;
+                for (let j = 0, len = children.length; j < len; j++) {
+                    updateBounds$2(children[j]);
+                }
+                if (exclude && exclude === branch)
+                    continue;
+                updateBounds$2(branch);
+            }
+        }
+    };
+    const { pushAllChildBranch: pushAllChildBranch$1, pushAllBranchStack, updateBoundsByBranchStack } = BranchHelper;
+
+    const WaitHelper = {
+        run(wait) {
+            if (wait.length) {
+                const len = wait.length;
+                for (let i = 0; i < len; i++) {
+                    wait[i]();
+                }
+                wait.length === len ? wait.length = 0 : wait.splice(0, len);
+            }
+        }
+    };
+
+    const { getRelativeWorld: getRelativeWorld$1 } = LeafHelper;
+    const { toOuterOf: toOuterOf$2, getPoints, copy: copy$5 } = BoundsHelper;
+    class LeafLayout {
+        get strokeBounds() { return this._strokeBounds || this.boxBounds; }
+        get renderBounds() { return this._renderBounds || this.boxBounds; }
+        get localStrokeBounds() { return this._localStrokeBounds || this; }
+        get localRenderBounds() { return this._localRenderBounds || this; }
+        get a() { return 1; }
+        get b() { return 0; }
+        get c() { return 0; }
+        get d() { return 1; }
+        get e() { return this.leaf.__.x; }
+        get f() { return this.leaf.__.y; }
+        get x() { return this.e + this.boxBounds.x; }
+        get y() { return this.f + this.boxBounds.y; }
+        get width() { return this.boxBounds.width; }
+        get height() { return this.boxBounds.height; }
+        constructor(leaf) {
+            this.leaf = leaf;
+            this.boxBounds = { x: 0, y: 0, width: 0, height: 0 };
+            if (this.leaf.__local)
+                this._localRenderBounds = this._localStrokeBounds = this.leaf.__local;
+            this.boxChange();
+            this.matrixChange();
+        }
+        createLocal() {
+            const local = this.leaf.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
+            if (!this._localStrokeBounds)
+                this._localStrokeBounds = local;
+            if (!this._localRenderBounds)
+                this._localRenderBounds = local;
+        }
+        update() {
+            const { leafer } = this.leaf;
+            if (leafer) {
+                if (leafer.ready) {
+                    if (leafer.watcher.changed)
+                        leafer.layouter.layout();
+                }
+                else {
+                    leafer.start();
+                }
+            }
+            else {
+                let root = this.leaf;
+                while (root.parent && !root.parent.leafer) {
+                    root = root.parent;
+                }
+                Platform.layout(root);
+            }
+        }
+        getTransform(relative = 'world') {
+            this.update();
+            const { leaf } = this;
+            switch (relative) {
+                case 'world':
+                    return leaf.__world;
+                case 'local':
+                    return leaf.__localMatrix;
+                case 'inner':
+                    return MatrixHelper.defaultMatrix;
+                case 'page':
+                    relative = leaf.zoomLayer;
+                default:
+                    return getRelativeWorld$1(leaf, relative);
+            }
+        }
+        getBounds(type, relative = 'world') {
+            this.update();
+            switch (relative) {
+                case 'world':
+                    return this.getWorldBounds(type);
+                case 'local':
+                    return this.getLocalBounds(type);
+                case 'inner':
+                    return this.getInnerBounds(type);
+                case 'page':
+                    relative = this.leaf.zoomLayer;
+                default:
+                    return new Bounds(this.getInnerBounds(type)).toOuterOf(this.getTransform(relative));
+            }
+        }
+        getInnerBounds(type = 'box') {
+            switch (type) {
+                case 'render':
+                    return this.renderBounds;
+                case 'content':
+                    if (this.contentBounds)
+                        return this.contentBounds;
+                case 'margin':
+                case 'box':
+                    return this.boxBounds;
+                case 'stroke':
+                    return this.strokeBounds;
+            }
+        }
+        getLocalBounds(type = 'box') {
+            switch (type) {
+                case 'render':
+                    return this.localRenderBounds;
+                case 'stroke':
+                    return this.localStrokeBounds;
+                case 'margin':
+                case 'content':
+                case 'box':
+                    return this.leaf.__localBoxBounds;
+            }
+        }
+        getWorldBounds(type = 'box') {
+            switch (type) {
+                case 'render':
+                    return this.leaf.__world;
+                case 'content':
+                    if (this.contentBounds)
+                        return this.getWorldContentBounds();
+                case 'margin':
+                case 'box':
+                    return this.getWorldBoxBounds();
+                case 'margin':
+                case 'stroke':
+                    return this.getWorldStrokeBounds();
+            }
+        }
+        getLayoutBounds(type, relative = 'world', unscale) {
+            const { leaf } = this;
+            let point, matrix, bounds = this.getInnerBounds(type);
+            switch (relative) {
+                case 'world':
+                    point = leaf.getWorldPoint(bounds);
+                    matrix = leaf.__world;
                     break;
                 case 'local':
                     point = leaf.getLocalPointByInner(bounds);
@@ -4013,12 +4335,14 @@ var LeaferUI = (function (exports) {
                     point = bounds;
                     matrix = MatrixHelper.defaultMatrix;
                     break;
+                case 'page':
+                    relative = leaf.zoomLayer;
                 default:
                     point = leaf.getWorldPoint(bounds, relative);
-                    matrix = tempMatrix.set(leaf.__world).divideParent(relative.__world);
+                    matrix = getRelativeWorld$1(leaf, relative, true);
             }
             const layoutBounds = MatrixHelper.getLayout(matrix);
-            copy$6(layoutBounds, bounds);
+            copy$5(layoutBounds, bounds);
             PointHelper.copy(layoutBounds, point);
             if (unscale) {
                 const { scaleX, scaleY } = layoutBounds;
@@ -4046,6 +4370,8 @@ var LeaferUI = (function (exports) {
                     break;
                 case 'inner':
                     break;
+                case 'page':
+                    relative = leaf.zoomLayer;
                 default:
                     relativeLeaf = relative;
             }
@@ -4386,358 +4712,86 @@ var LeaferUI = (function (exports) {
             if (bounds) {
                 this.renderBounds = bounds;
                 this.renderOptions = options;
-            }
-        }
-    }
-    RenderEvent.REQUEST = 'render.request';
-    RenderEvent.START = 'render.start';
-    RenderEvent.BEFORE = 'render.before';
-    RenderEvent.RENDER = 'render';
-    RenderEvent.AFTER = 'render.after';
-    RenderEvent.AGAIN = 'render.again';
-    RenderEvent.END = 'render.end';
-    RenderEvent.NEXT = 'render.next';
-
-    class LeaferEvent extends Event {
-    }
-    LeaferEvent.START = 'leafer.start';
-    LeaferEvent.BEFORE_READY = 'leafer.before_ready';
-    LeaferEvent.READY = 'leafer.ready';
-    LeaferEvent.AFTER_READY = 'leafer.after_ready';
-    LeaferEvent.VIEW_READY = 'leafer.view_ready';
-    LeaferEvent.VIEW_COMPLETED = 'leafer.view_completed';
-    LeaferEvent.STOP = 'leafer.stop';
-    LeaferEvent.RESTART = 'leafer.restart';
-    LeaferEvent.END = 'leafer.end';
-
-    const LeafDataProxy = {
-        __setAttr(name, newValue) {
-            if (this.leafer && this.leafer.created) {
-                const oldValue = this.__.__getInput(name);
-                if (typeof newValue === 'object' || oldValue !== newValue) {
-                    this.__[name] = newValue;
-                    if (this.__proxyData)
-                        this.setProxyAttr(name, newValue);
-                    const { CHANGE } = PropertyEvent;
-                    const event = new PropertyEvent(CHANGE, this, name, oldValue, newValue);
-                    if (this.isLeafer) {
-                        this.emitEvent(new PropertyEvent(PropertyEvent.LEAFER_CHANGE, this, name, oldValue, newValue));
-                    }
-                    else {
-                        if (this.hasEvent(CHANGE))
-                            this.emitEvent(event);
-                    }
-                    this.leafer.emitEvent(event);
-                }
-            }
-            else {
-                this.__[name] = newValue;
-                if (this.__proxyData)
-                    this.setProxyAttr(name, newValue);
-            }
-        },
-        __getAttr(name) {
-            if (this.__proxyData)
-                return this.getProxyAttr(name);
-            return this.__.__get(name);
-        }
-    };
-
-    const { setLayout, multiplyParent: multiplyParent$2, translateInner, defaultWorld } = MatrixHelper;
-    const { toPoint, tempPoint } = AroundHelper;
-    const LeafMatrix = {
-        __updateWorldMatrix() {
-            multiplyParent$2(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__);
-        },
-        __updateLocalMatrix() {
-            if (this.__local) {
-                const layout = this.__layout, local = this.__local, data = this.__;
-                if (layout.affectScaleOrRotation) {
-                    if (layout.scaleChanged || layout.rotationChanged) {
-                        setLayout(local, data, null, layout.affectRotation);
-                        layout.scaleChanged = layout.rotationChanged = false;
-                    }
-                }
-                local.e = data.x;
-                local.f = data.y;
-                if (data.around) {
-                    toPoint(data.around, layout.boxBounds, tempPoint);
-                    translateInner(local, -tempPoint.x, -tempPoint.y);
-                }
-            }
-            this.__layout.matrixChanged = false;
-        }
-    };
-
-    const { copy: copy$5, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$1, divideParent, getLayout } = MatrixHelper;
-    const matrix = {};
-    const LeafHelper = {
-        updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
-            if (checkAutoLayout && leaf.__hasAutoLayout && leaf.__layout.matrixChanged)
-                waitAutoLayout = true;
-            updateMatrix$2(leaf, checkAutoLayout, waitAutoLayout);
-            if (leaf.isBranch) {
-                const { children } = leaf;
-                for (let i = 0, len = children.length; i < len; i++) {
-                    updateAllMatrix$3(children[i], checkAutoLayout, waitAutoLayout);
-                }
-            }
-        },
-        updateMatrix(leaf, checkAutoLayout, waitAutoLayout) {
-            const layout = leaf.__layout;
-            if (checkAutoLayout) {
-                if (waitAutoLayout) {
-                    layout.waitAutoLayout = true;
-                    if (leaf.__hasAutoLayout)
-                        layout.matrixChanged = false;
-                }
-            }
-            else if (layout.waitAutoLayout) {
-                layout.waitAutoLayout = false;
-            }
-            if (layout.matrixChanged)
-                leaf.__updateLocalMatrix();
-            if (!layout.waitAutoLayout)
-                leaf.__updateWorldMatrix();
-        },
-        updateBounds(leaf) {
-            const layout = leaf.__layout;
-            if (layout.boundsChanged)
-                leaf.__updateLocalBounds();
-            if (!layout.waitAutoLayout)
-                leaf.__updateWorldBounds();
-        },
-        updateAllWorldOpacity(leaf) {
-            leaf.__updateWorldOpacity();
-            if (leaf.isBranch) {
-                const { children } = leaf;
-                for (let i = 0, len = children.length; i < len; i++) {
-                    updateAllWorldOpacity$1(children[i]);
-                }
-            }
-        },
-        updateAllChange(leaf) {
-            updateAllWorldOpacity$1(leaf);
-            leaf.__updateChange();
-            if (leaf.isBranch) {
-                const { children } = leaf;
-                for (let i = 0, len = children.length; i < len; i++) {
-                    updateAllChange$1(children[i]);
-                }
-            }
-        },
-        worldHittable(t) {
-            while (t) {
-                if (!t.__.hittable)
-                    return false;
-                t = t.parent;
-            }
-            return true;
-        },
-        moveWorld(t, x, y) {
-            const local = { x, y };
-            if (t.parent)
-                toInnerPoint$1(t.parent.worldTransform, local, local, true);
-            L.moveLocal(t, local.x, local.y);
-        },
-        moveLocal(t, x, y = 0) {
-            t.x += x;
-            t.y += y;
-        },
-        zoomOfWorld(t, origin, scaleX, scaleY, resize) {
-            L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
-        },
-        zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
-            copy$5(matrix, t.__localMatrix);
-            scaleOfOuter$3(matrix, origin, scaleX, scaleY);
-            moveByMatrix(t, matrix);
-            t.scaleResize(scaleX, scaleY, resize !== true);
-        },
-        rotateOfWorld(t, origin, angle) {
-            L.rotateOfLocal(t, getTempLocal(t, origin), angle);
-        },
-        rotateOfLocal(t, origin, angle) {
-            copy$5(matrix, t.__localMatrix);
-            rotateOfOuter$3(matrix, origin, angle);
-            moveByMatrix(t, matrix);
-            t.rotation = MathHelper.formatRotation(t.rotation + angle);
-        },
-        skewOfWorld(t, origin, skewX, skewY, resize) {
-            L.skewOfLocal(t, getTempLocal(t, origin), skewX, skewY, resize);
-        },
-        skewOfLocal(t, origin, skewX, skewY = 0, resize) {
-            copy$5(matrix, t.__localMatrix);
-            skewOfOuter(matrix, origin, skewX, skewY);
-            L.setTransform(t, matrix, resize);
-        },
-        transformWorld(t, transform, resize) {
-            copy$5(matrix, t.worldTransform);
-            multiplyParent$1(matrix, transform);
-            if (t.parent)
-                divideParent(matrix, t.parent.worldTransform);
-            L.setTransform(t, matrix, resize);
-        },
-        transform(t, transform, resize) {
-            copy$5(matrix, t.localTransform);
-            multiplyParent$1(matrix, transform);
-            L.setTransform(t, matrix, resize);
-        },
-        setTransform(t, transform, resize) {
-            const layout = getLayout(transform);
-            if (resize) {
-                t.scaleResize(layout.scaleX / t.scaleX, layout.scaleY / t.scaleY, resize !== true);
-                delete layout.scaleX;
-                delete layout.scaleY;
-            }
-            t.set(layout);
-        },
-        drop(t, parent, index, resize) {
-            copy$5(matrix, t.worldTransform);
-            divideParent(matrix, parent.worldTransform);
-            t.setTransform(matrix, resize);
-            parent.add(t, index);
-        },
-        hasParent(p, parent) {
-            if (!parent)
-                return false;
-            while (p) {
-                if (parent === p)
-                    return true;
-                p = p.parent;
-            }
-        },
-        hasParentAutoLayout(p) {
-            while (p.parent) {
-                p = p.parent;
-                if (p.__hasAutoLayout)
-                    return true;
-            }
-        }
-    };
-    const L = LeafHelper;
-    const { updateAllMatrix: updateAllMatrix$3, updateMatrix: updateMatrix$2, updateAllWorldOpacity: updateAllWorldOpacity$1, updateAllChange: updateAllChange$1 } = L;
-    function moveByMatrix(t, matrix) {
-        const { e, f } = t.__localMatrix;
-        t.x += matrix.e - e;
-        t.y += matrix.f - f;
-    }
-    function getTempLocal(t, world) {
-        t.__layout.update();
-        return t.parent ? PointHelper.tempToInnerOf(world, t.parent.__world) : world;
-    }
-
-    const LeafBoundsHelper = {
-        worldBounds(target) {
-            return target.__world;
-        },
-        localBoxBounds(target) {
-            return target.__.eraser ? null : (target.__local || target.__layout);
-        },
-        localStrokeBounds(target) {
-            return target.__.eraser ? null : target.__layout.localStrokeBounds;
-        },
-        localRenderBounds(target) {
-            return target.__.eraser ? null : target.__layout.localRenderBounds;
-        },
-        maskLocalBoxBounds(target) {
-            return target.__.mask ? target.__localBoxBounds : null;
-        },
-        maskLocalStrokeBounds(target) {
-            return target.__.mask ? target.__layout.localStrokeBounds : null;
-        },
-        maskLocalRenderBounds(target) {
-            return target.__.mask ? target.__layout.localRenderBounds : null;
-        },
-        excludeRenderBounds(child, options) {
-            if (options.bounds && !options.bounds.hit(child.__world, options.matrix))
-                return true;
-            if (options.hideBounds && options.hideBounds.includes(child.__world, options.matrix))
-                return true;
-            return false;
+            }
         }
-    };
+    }
+    RenderEvent.REQUEST = 'render.request';
+    RenderEvent.START = 'render.start';
+    RenderEvent.BEFORE = 'render.before';
+    RenderEvent.RENDER = 'render';
+    RenderEvent.AFTER = 'render.after';
+    RenderEvent.AGAIN = 'render.again';
+    RenderEvent.END = 'render.end';
+    RenderEvent.NEXT = 'render.next';
 
-    const { updateBounds: updateBounds$2 } = LeafHelper;
-    const BranchHelper = {
-        sort(a, b) {
-            return (a.__.zIndex === b.__.zIndex) ? (a.__tempNumber - b.__tempNumber) : (a.__.zIndex - b.__.zIndex);
-        },
-        pushAllChildBranch(branch, leafList) {
-            branch.__tempNumber = 1;
-            if (branch.__.__childBranchNumber) {
-                const { children } = branch;
-                for (let i = 0, len = children.length; i < len; i++) {
-                    branch = children[i];
-                    if (branch.isBranch) {
-                        branch.__tempNumber = 1;
-                        leafList.add(branch);
-                        pushAllChildBranch$1(branch, leafList);
-                    }
-                }
-            }
-        },
-        pushAllParent(leaf, leafList) {
-            const { keys } = leafList;
-            if (keys) {
-                while (leaf.parent) {
-                    if (keys[leaf.parent.innerId] === undefined) {
-                        leafList.add(leaf.parent);
-                        leaf = leaf.parent;
+    class LeaferEvent extends Event {
+    }
+    LeaferEvent.START = 'leafer.start';
+    LeaferEvent.BEFORE_READY = 'leafer.before_ready';
+    LeaferEvent.READY = 'leafer.ready';
+    LeaferEvent.AFTER_READY = 'leafer.after_ready';
+    LeaferEvent.VIEW_READY = 'leafer.view_ready';
+    LeaferEvent.VIEW_COMPLETED = 'leafer.view_completed';
+    LeaferEvent.STOP = 'leafer.stop';
+    LeaferEvent.RESTART = 'leafer.restart';
+    LeaferEvent.END = 'leafer.end';
+
+    const LeafDataProxy = {
+        __setAttr(name, newValue) {
+            if (this.leafer && this.leafer.created) {
+                const oldValue = this.__.__getInput(name);
+                if (typeof newValue === 'object' || oldValue !== newValue) {
+                    this.__[name] = newValue;
+                    if (this.__proxyData)
+                        this.setProxyAttr(name, newValue);
+                    const { CHANGE } = PropertyEvent;
+                    const event = new PropertyEvent(CHANGE, this, name, oldValue, newValue);
+                    if (this.isLeafer) {
+                        this.emitEvent(new PropertyEvent(PropertyEvent.LEAFER_CHANGE, this, name, oldValue, newValue));
                     }
                     else {
-                        break;
+                        if (this.hasEvent(CHANGE))
+                            this.emitEvent(event);
                     }
+                    this.leafer.emitEvent(event);
                 }
             }
             else {
-                while (leaf.parent) {
-                    leafList.add(leaf.parent);
-                    leaf = leaf.parent;
-                }
-            }
-        },
-        pushAllBranchStack(branch, pushList) {
-            let start = pushList.length;
-            const { children } = branch;
-            for (let i = 0, len = children.length; i < len; i++) {
-                if (children[i].isBranch) {
-                    pushList.push(children[i]);
-                }
-            }
-            for (let i = start, len = pushList.length; i < len; i++) {
-                pushAllBranchStack(pushList[i], pushList);
+                this.__[name] = newValue;
+                if (this.__proxyData)
+                    this.setProxyAttr(name, newValue);
             }
         },
-        updateBounds(branch, exclude) {
-            const branchStack = [branch];
-            pushAllBranchStack(branch, branchStack);
-            updateBoundsByBranchStack(branchStack, exclude);
-        },
-        updateBoundsByBranchStack(branchStack, exclude) {
-            let branch, children;
-            for (let i = branchStack.length - 1; i > -1; i--) {
-                branch = branchStack[i];
-                children = branch.children;
-                for (let j = 0, len = children.length; j < len; j++) {
-                    updateBounds$2(children[j]);
-                }
-                if (exclude && exclude === branch)
-                    continue;
-                updateBounds$2(branch);
-            }
+        __getAttr(name) {
+            if (this.__proxyData)
+                return this.getProxyAttr(name);
+            return this.__.__get(name);
         }
     };
-    const { pushAllChildBranch: pushAllChildBranch$1, pushAllBranchStack, updateBoundsByBranchStack } = BranchHelper;
 
-    const WaitHelper = {
-        run(wait) {
-            if (wait.length) {
-                const len = wait.length;
-                for (let i = 0; i < len; i++) {
-                    wait[i]();
+    const { setLayout, multiplyParent: multiplyParent$1, translateInner, defaultWorld } = MatrixHelper;
+    const { toPoint, tempPoint } = AroundHelper;
+    const LeafMatrix = {
+        __updateWorldMatrix() {
+            multiplyParent$1(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__);
+        },
+        __updateLocalMatrix() {
+            if (this.__local) {
+                const layout = this.__layout, local = this.__local, data = this.__;
+                if (layout.affectScaleOrRotation) {
+                    if (layout.scaleChanged || layout.rotationChanged) {
+                        setLayout(local, data, null, layout.affectRotation);
+                        layout.scaleChanged = layout.rotationChanged = false;
+                    }
+                }
+                local.e = data.x;
+                local.f = data.y;
+                if (data.around) {
+                    toPoint(data.around, layout.boxBounds, tempPoint);
+                    translateInner(local, -tempPoint.x, -tempPoint.y);
                 }
-                wait.length === len ? wait.length = 0 : wait.splice(0, len);
             }
+            this.__layout.matrixChanged = false;
         }
     };
 
@@ -4954,7 +5008,7 @@ var LeaferUI = (function (exports) {
     const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
     const { toOuterOf } = BoundsHelper;
     const { tempToOuterOf, copy: copy$4 } = PointHelper;
-    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, transform, setTransform, drop } = LeafHelper;
+    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getRelativeWorld, drop } = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() { return this.__tag; }
         set tag(_value) { }
@@ -4992,21 +5046,31 @@ var LeaferUI = (function (exports) {
             this.__layout = new this.__LayoutProcessor(this);
             if (this.__level)
                 this.resetCustom();
-            if (data)
+            if (data) {
+                if (data.__)
+                    data = data.toJSON();
                 data.children ? this.set(data) : Object.assign(this, data);
+            }
         }
         resetCustom() {
             this.__hasMask = this.__hasEraser = null;
             this.forceUpdate();
         }
-        waitParent(item) {
+        waitParent(item, bind) {
+            if (bind)
+                item = item.bind(bind);
             this.parent ? item() : (this.__parentWait ? this.__parentWait.push(item) : this.__parentWait = [item]);
         }
-        waitLeafer(item) {
+        waitLeafer(item, bind) {
+            if (bind)
+                item = item.bind(bind);
             this.leafer ? item() : (this.__leaferWait ? this.__leaferWait.push(item) : this.__leaferWait = [item]);
         }
-        nextRender(item, off) {
-            this.leafer ? this.leafer.nextRender(item, off) : this.waitLeafer(() => this.leafer.nextRender(item, off));
+        nextRender(item, bind, off) {
+            this.leafer ? this.leafer.nextRender(item, bind, off) : this.waitLeafer(() => this.leafer.nextRender(item, bind, off));
+        }
+        removeNextRender(item) {
+            this.nextRender(item, null, 'off');
         }
         __bindLeafer(leafer) {
             if (this.isLeafer) {
@@ -5043,6 +5107,7 @@ var LeaferUI = (function (exports) {
         getProxyAttr(_attrName) { return undefined; }
         find(_condition, _options) { return undefined; }
         findOne(_condition, _options) { return undefined; }
+        focus(_value) { }
         forceUpdate(attrName) {
             if (attrName === undefined)
                 attrName = 'width';
@@ -5098,6 +5163,9 @@ var LeaferUI = (function (exports) {
                 return this.__world.f;
             return this.getLayoutBounds()[attrName];
         }
+        getTransform(relative) {
+            return this.__layout.getTransform(relative || 'local');
+        }
         getBounds(type, relative) {
             return this.__layout.getBounds(type, relative);
         }
@@ -5107,6 +5175,12 @@ var LeaferUI = (function (exports) {
         getLayoutPoints(type, relative) {
             return this.__layout.getLayoutPoints(type, relative);
         }
+        getWorldBounds(inner, relative, change) {
+            const matrix = relative ? getRelativeWorld(this, relative) : this.worldTransform;
+            const to = change ? inner : {};
+            toOuterOf(inner, matrix, to);
+            return to;
+        }
         worldToLocal(world, to, distance, relative) {
             if (this.parent) {
                 this.parent.worldToInner(world, to, distance, relative);
@@ -5189,6 +5263,21 @@ var LeaferUI = (function (exports) {
         skewOf(origin, skewX, skewY, resize) {
             skewOfLocal(this, tempToOuterOf(origin, this.localTransform), skewX, skewY, resize);
         }
+        transformWorld(worldTransform, resize) {
+            transformWorld(this, worldTransform, resize);
+        }
+        moveWorld(x, y) {
+            moveWorld(this, x, y);
+        }
+        scaleOfWorld(worldOrigin, scaleX, scaleY, resize) {
+            zoomOfWorld(this, worldOrigin, scaleX, scaleY, resize);
+        }
+        rotateOfWorld(worldOrigin, rotation) {
+            rotateOfWorld(this, worldOrigin, rotation);
+        }
+        skewOfWorld(worldOrigin, skewX, skewY, resize) {
+            skewOfWorld(this, worldOrigin, skewX, skewY, resize);
+        }
         scaleResize(scaleX, scaleY = scaleX, _noResize) {
             this.scaleX *= scaleX;
             this.scaleY *= scaleY;
@@ -5320,7 +5409,8 @@ var LeaferUI = (function (exports) {
             index === undefined ? this.children.push(child) : this.children.splice(index, 0, child);
             if (child.isBranch)
                 this.__.__childBranchNumber = (this.__.__childBranchNumber || 0) + 1;
-            child.__layout.boundsChanged || child.__layout.matrixChange();
+            child.__layout.boxChanged || child.__layout.boxChange();
+            child.__layout.matrixChanged || child.__layout.matrixChange();
             if (child.__parentWait)
                 WaitHelper.run(child.__parentWait);
             if (this.leafer) {
@@ -6180,6 +6270,10 @@ var LeaferUI = (function (exports) {
             }
             else {
                 this.requestLayout();
+                if (this.ignore) {
+                    this.ignore = this.rendering = false;
+                    return;
+                }
                 this.emitRender(RenderEvent.BEFORE);
                 if (this.config.usePartRender && this.totalTimes > 1) {
                     this.partRender();
@@ -6327,9 +6421,7 @@ var LeaferUI = (function (exports) {
             if (this.target) {
                 this.stop();
                 this.__removeListenEvents();
-                this.target = null;
-                this.canvas = null;
-                this.config = null;
+                this.target = this.canvas = this.config = null;
             }
         }
     }
@@ -6387,7 +6479,7 @@ var LeaferUI = (function (exports) {
             return path;
         }
         getHitablePath(leaf) {
-            const path = this.getPath(leaf);
+            const path = this.getPath(leaf && leaf.hittable ? leaf : null);
             let item, hittablePath = new LeafList();
             for (let i = path.list.length - 1; i > -1; i--) {
                 item = path.list[i];
@@ -6586,14 +6678,36 @@ var LeaferUI = (function (exports) {
     });
     Platform.layout = Layouter.fullLayout;
 
+    const TextConvert = {};
+    const ColorConvert = {};
+    const PathArrow = {};
+    const Paint = {};
+    const PaintImage = {};
+    const PaintGradient = {};
+    const Effect = {};
+    const Export = {};
+    const State = {};
+
+    function stateType(defaultValue) {
+        return (target, key) => {
+            const stateType = key + 'Style';
+            defineLeafAttr(target, key, defaultValue, {
+                set(value) {
+                    this.__setAttr(key, value);
+                    this.waitLeafer(() => { if (State.setStyle)
+                        State.setStyle(this, stateType, value); });
+                }
+            });
+        };
+    }
     function arrowType(defaultValue) {
         return (target, key) => {
             defineLeafAttr(target, key, defaultValue, {
                 set(value) {
                     this.__setAttr(key, value);
-                    doStrokeType(this);
                     const data = this.__;
                     data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
+                    doStrokeType(this);
                 }
             });
         };
@@ -6621,15 +6735,16 @@ var LeaferUI = (function (exports) {
             });
         };
     }
-
-    const TextConvert = {};
-    const ColorConvert = {};
-    const PathArrow = {};
-    const Paint = {};
-    const PaintImage = {};
-    const PaintGradient = {};
-    const Effect = {};
-    const Export = {};
+    function zoomLayerType() {
+        return (target, key) => {
+            const privateKey = '_' + key;
+            defineKey(target, key, {
+                set(value) { if (this.isLeafer)
+                    this[privateKey] = value; },
+                get() { return this.isLeafer ? (this[privateKey] || this) : this.leafer && this.leafer.zoomLayer; }
+            });
+        };
+    }
 
     const { parse } = PathConvert;
     const emptyPaint = {};
@@ -6638,7 +6753,7 @@ var LeaferUI = (function (exports) {
         get __strokeWidth() {
             const { strokeWidth, strokeWidthFixed } = this;
             if (strokeWidthFixed) {
-                let { scaleX } = this.__leaf.__world;
+                let { scaleX } = this.__leaf.__nowWorld;
                 if (scaleX < 0)
                     scaleX = -scaleX;
                 return scaleX > 1 ? strokeWidth / scaleX : strokeWidth;
@@ -6912,18 +7027,11 @@ var LeaferUI = (function (exports) {
             }
         },
         __drawFast(canvas, options) {
-            const { fill, stroke, __drawAfterFill } = this.__;
-            this.__drawRenderPath(canvas);
-            if (fill)
-                Paint.fill(fill, this, canvas);
-            if (__drawAfterFill)
-                this.__drawAfterFill(canvas, options);
-            if (stroke)
-                Paint.stroke(stroke, this, canvas);
+            drawFast(this, canvas, options);
         },
         __draw(canvas, options) {
-            if (this.__.__complex) {
-                const data = this.__;
+            const data = this.__;
+            if (data.__complex) {
                 if (data.__needComputePaint)
                     data.__computePaint();
                 const { fill, stroke, __drawAfterFill } = data;
@@ -6956,7 +7064,12 @@ var LeaferUI = (function (exports) {
                 }
             }
             else {
-                this.__drawFast(canvas, options);
+                if (data.__pathInputed) {
+                    drawFast(this, canvas, options);
+                }
+                else {
+                    this.__drawFast(canvas, options);
+                }
             }
         },
         __renderShape(canvas, options) {
@@ -6971,6 +7084,16 @@ var LeaferUI = (function (exports) {
             }
         }
     };
+    function drawFast(ui, canvas, options) {
+        const { fill, stroke, __drawAfterFill } = ui.__;
+        ui.__drawRenderPath(canvas);
+        if (fill)
+            Paint.fill(fill, ui, canvas);
+        if (__drawAfterFill)
+            ui.__drawAfterFill(canvas, options);
+        if (stroke)
+            Paint.stroke(stroke, ui, canvas);
+    }
 
     const RectRender = {
         __drawFast(canvas, options) {
@@ -7019,6 +7142,10 @@ var LeaferUI = (function (exports) {
             const { scaleX, scaleY } = this;
             return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX;
         }
+        get pen() {
+            pen.set(this.path = this.__.path || []);
+            return pen;
+        }
         constructor(data) {
             super(data);
         }
@@ -7027,7 +7154,7 @@ var LeaferUI = (function (exports) {
             Object.assign(this, data);
         }
         get(name) {
-            return name ? this.__.__getInput(name) : this.__.__getInputData();
+            return typeof name === 'string' ? this.__.__getInput(name) : this.__.__getInputData(name);
         }
         createProxyData() { return undefined; }
         find(_condition, _options) { return undefined; }
@@ -7036,10 +7163,11 @@ var LeaferUI = (function (exports) {
             this.__layout.update();
             let path = pathForRender ? this.__.__pathForRender : this.__.path;
             if (!path) {
-                path = [];
                 const { width, height } = this.boxBounds;
-                if (width || height)
-                    this.__drawPathByBox(new PathCreator(path));
+                if (width || height) {
+                    pen.set(path = []);
+                    this.__drawPathByBox(pen);
+                }
             }
             return curve ? PathConvert.toCanvasData(path, true) : path;
         }
@@ -7111,6 +7239,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataProcessor(UIData)
     ], exports.UI.prototype, "__", void 0);
+    __decorate([
+        zoomLayerType()
+    ], exports.UI.prototype, "zoomLayer", void 0);
     __decorate([
         dataType('')
     ], exports.UI.prototype, "id", void 0);
@@ -7129,6 +7260,12 @@ var LeaferUI = (function (exports) {
     __decorate([
         opacityType(true)
     ], exports.UI.prototype, "visible", void 0);
+    __decorate([
+        stateType(false)
+    ], exports.UI.prototype, "selected", void 0);
+    __decorate([
+        stateType(false)
+    ], exports.UI.prototype, "disabled", void 0);
     __decorate([
         dataType(false)
     ], exports.UI.prototype, "locked", void 0);
@@ -7276,6 +7413,24 @@ var LeaferUI = (function (exports) {
     __decorate([
         effectType()
     ], exports.UI.prototype, "grayscale", void 0);
+    __decorate([
+        dataType()
+    ], exports.UI.prototype, "normalStyle", void 0);
+    __decorate([
+        dataType()
+    ], exports.UI.prototype, "hoverStyle", void 0);
+    __decorate([
+        dataType()
+    ], exports.UI.prototype, "pressStyle", void 0);
+    __decorate([
+        dataType()
+    ], exports.UI.prototype, "focusStyle", void 0);
+    __decorate([
+        dataType()
+    ], exports.UI.prototype, "selectedStyle", void 0);
+    __decorate([
+        dataType()
+    ], exports.UI.prototype, "disabledStyle", void 0);
     __decorate([
         rewrite(exports.Leaf.prototype.reset)
     ], exports.UI.prototype, "reset", null);
@@ -7312,7 +7467,7 @@ var LeaferUI = (function (exports) {
                 super.set(data);
                 let child;
                 children.forEach(childData => {
-                    child = UICreator.get(childData.tag, childData);
+                    child = childData.__ ? childData : UICreator.get(childData.tag, childData);
                     this.add(child);
                 });
                 data.children = children;
@@ -7361,20 +7516,18 @@ var LeaferUI = (function (exports) {
         get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
         constructor(userConfig, data) {
             super(data);
-            this.zoomLayer = this;
             this.config = {
                 type: 'design',
                 start: true,
                 hittable: true,
                 smooth: true,
                 zoom: {
-                    min: 0.02,
+                    min: 0.01,
                     max: 256
                 },
                 move: {
                     holdSpaceKey: true,
                     holdMiddleKey: true,
-                    dragOut: true,
                     autoDistance: 2
                 }
             };
@@ -7505,9 +7658,6 @@ var LeaferUI = (function (exports) {
             this.leafer = leafer;
             this.__level = 1;
         }
-        setZoomLayer(zoomLayer) {
-            this.zoomLayer = zoomLayer;
-        }
         __checkAutoLayout(config) {
             if (!config.width || !config.height) {
                 this.autoLayout = new AutoBounds(config);
@@ -7593,13 +7743,19 @@ var LeaferUI = (function (exports) {
                 this.nextRender(() => this.interaction.updateCursor());
             }
         }
-        waitReady(item) {
+        waitReady(item, bind) {
+            if (bind)
+                item = item.bind(bind);
             this.ready ? item() : this.__readyWait.push(item);
         }
-        waitViewReady(item) {
+        waitViewReady(item, bind) {
+            if (bind)
+                item = item.bind(bind);
             this.viewReady ? item() : this.__viewReadyWait.push(item);
         }
-        waitViewCompleted(item) {
+        waitViewCompleted(item, bind) {
+            if (bind)
+                item = item.bind(bind);
             this.__viewCompletedWait.push(item);
             if (this.viewCompleted) {
                 this.__checkViewCompleted(false);
@@ -7609,7 +7765,9 @@ var LeaferUI = (function (exports) {
                     this.start();
             }
         }
-        nextRender(item, off) {
+        nextRender(item, bind, off) {
+            if (bind)
+                item = item.bind(bind);
             const list = this.__nextRenderWait;
             if (off) {
                 for (let i = 0; i < list.length; i++) {
@@ -7623,6 +7781,15 @@ var LeaferUI = (function (exports) {
                 list.push(item);
             }
         }
+        zoom(_zoomType, _padding, _fixedScale) { return undefined; }
+        validScale(changeScale) {
+            const { scaleX } = this.zoomLayer.__, { min, max } = this.app.config.zoom, absScale = Math.abs(scaleX * changeScale);
+            if (absScale < min)
+                changeScale = min / scaleX;
+            else if (absScale > max)
+                changeScale = max / scaleX;
+            return changeScale;
+        }
         __checkUpdateLayout() {
             this.__layout.update();
         }
@@ -8695,17 +8862,21 @@ var LeaferUI = (function (exports) {
     function design(leafer) {
         if (leafer.isApp)
             return;
-        leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => leafer.zoomLayer.move(e.moveX, e.moveY)), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
+        leafer.__eventIds.push(leafer.on_(exports.MoveEvent.BEFORE_MOVE, (e) => {
+            let { moveX, moveY } = e;
+            if (leafer.config.move.scroll) {
+                if (Math.abs(moveX) > Math.abs(moveY))
+                    moveY = 0;
+                else
+                    moveX = 0;
+            }
+            leafer.zoomLayer.move(moveX, moveY);
+        }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
             const { zoomLayer } = leafer;
-            const { scaleX } = zoomLayer.__, { min, max } = leafer.app.config.zoom;
-            let { scale } = e, absScale = Math.abs(scaleX * scale);
-            if (absScale < min)
-                scale = min / scaleX;
-            else if (absScale > max)
-                scale = max / scaleX;
-            if (scale !== 1) {
-                PointHelper.scaleOf(zoomLayer, e, scale);
-                zoomLayer.scale = scaleX * scale;
+            const changeScale = leafer.validScale(e.scale);
+            if (changeScale !== 1) {
+                PointHelper.scaleOf(zoomLayer, e, changeScale);
+                zoomLayer.scale = zoomLayer.__.scaleX * changeScale;
             }
         }));
     }
@@ -8749,6 +8920,7 @@ var LeaferUI = (function (exports) {
                 const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
                 data.path = path;
                 this.moveData = Object.assign(Object.assign({}, data), { moveX: 0, moveY: 0 });
+                interaction.cancelHover();
                 interaction.emit(exports.MoveEvent.START, this.moveData);
             }
             data.path = this.moveData.path;
@@ -8762,6 +8934,7 @@ var LeaferUI = (function (exports) {
                 const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
                 data.path = path;
                 this.zoomData = Object.assign(Object.assign({}, data), { scale: 1 });
+                interaction.cancelHover();
                 interaction.emit(exports.ZoomEvent.START, this.zoomData);
             }
             data.path = this.zoomData.path;
@@ -8775,6 +8948,7 @@ var LeaferUI = (function (exports) {
                 const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
                 data.path = path;
                 this.rotateData = Object.assign(Object.assign({}, data), { rotation: 0 });
+                interaction.cancelHover();
                 interaction.emit(exports.RotateEvent.START, this.rotateData);
             }
             data.path = this.rotateData.path;
@@ -8892,6 +9066,7 @@ var LeaferUI = (function (exports) {
                 this.dragEndReal();
             this.downData = this.interaction.downData;
             this.dragData = getDragEventData(data, data, data);
+            this.canAnimate = this.canDragOut = true;
         }
         getList() {
             const { proxy } = this.interaction.selector;
@@ -8904,11 +9079,8 @@ var LeaferUI = (function (exports) {
                 interaction.pointerCancel();
                 return;
             }
-            else {
-                this.canAnimate = true;
-            }
             if (!this.moving && canDrag) {
-                if (this.moving = interaction.moveMode || interaction.isHoldRightKey)
+                if (this.moving = interaction.canMove(this.downData) || interaction.isHoldRightKey)
                     interaction.emit(exports.MoveEvent.START, this.dragData);
             }
             if (!this.moving) {
@@ -8957,13 +9129,14 @@ var LeaferUI = (function (exports) {
             const list = this.getList();
             if (list.length && running) {
                 const { moveX, moveY } = this.dragData;
-                list.forEach(leaf => LeafHelper.moveWorld(leaf, moveX, moveY));
+                list.forEach(leaf => leaf.moveWorld(moveX, moveY));
             }
         }
         dragOverOrOut(data) {
             const { interaction } = this;
             const { dragOverPath } = this;
             const { path } = data;
+            this.dragOverPath = path;
             if (dragOverPath) {
                 if (path.indexAt(0) !== dragOverPath.indexAt(0)) {
                     interaction.emit(exports.DragEvent.OUT, data, dragOverPath);
@@ -8973,7 +9146,6 @@ var LeaferUI = (function (exports) {
             else {
                 interaction.emit(exports.DragEvent.OVER, data, path);
             }
-            this.dragOverPath = path;
         }
         dragEnterOrLeave(data) {
             const { interaction } = this;
@@ -8987,7 +9159,7 @@ var LeaferUI = (function (exports) {
             if (!this.dragData)
                 return;
             const { moveX, moveY } = this.dragData;
-            if (this.canAnimate && this.moving && (Math.abs(moveX) > 1 || Math.abs(moveY) > 1)) {
+            if (this.interaction.config.move.dragAnimate && this.canAnimate && this.moving && (Math.abs(moveX) > 1 || Math.abs(moveY) > 1)) {
                 data = Object.assign({}, data);
                 speed = (speed || (data.pointerType === 'touch' ? 2 : 1)) * 0.9;
                 PointHelper.move(data, moveX * speed, moveY * speed);
@@ -9021,12 +9193,11 @@ var LeaferUI = (function (exports) {
         animate(func, off) {
             const animateWait = func || this.animateWait;
             if (animateWait)
-                this.interaction.target.nextRender(animateWait, off);
+                this.interaction.target.nextRender(animateWait, null, off);
             this.animateWait = func;
         }
         swipe(data, endDragData) {
-            const { interaction } = this;
-            const { downData } = interaction;
+            const { interaction, downData } = this;
             if (PointHelper.getDistance(downData, data) > interaction.config.pointer.swipeDistance) {
                 const swipeData = getSwipeEventData(downData, this.dragData, endDragData);
                 this.interaction.emit(swipeData.type, swipeData);
@@ -9049,9 +9220,9 @@ var LeaferUI = (function (exports) {
                 this.autoMoveOnDragOut(data);
         }
         autoMoveOnDragOut(data) {
-            const { interaction, downData } = this;
+            const { interaction, downData, canDragOut } = this;
             const { autoDistance, dragOut } = interaction.config.move;
-            if (!dragOut || !autoDistance)
+            if (!dragOut || !canDragOut || !autoDistance)
                 return;
             const bounds = interaction.shrinkCanvasBounds;
             const { x, y } = bounds;
@@ -9127,12 +9298,16 @@ var LeaferUI = (function (exports) {
     function emitEvent(leaf, type, data, capture, excludePath) {
         if (leaf.destroyed)
             return true;
-        if (leaf.__.hitSelf && leaf.hasEvent(type, capture) && !exclude(leaf, excludePath)) {
-            data.phase = capture ? 1 : ((leaf === data.target) ? 2 : 3);
-            const event = EventCreator.get(type, data);
-            leaf.emitEvent(event, capture);
-            if (event.isStop)
-                return true;
+        if (leaf.__.hitSelf && !exclude(leaf, excludePath)) {
+            if (State.updateEventStyle)
+                State.updateEventStyle(leaf, type);
+            if (leaf.hasEvent(type, capture)) {
+                data.phase = capture ? 1 : ((leaf === data.target) ? 2 : 3);
+                const event = EventCreator.get(type, data);
+                leaf.emitEvent(event, capture);
+                if (event.isStop)
+                    return true;
+            }
         }
         return false;
     }
@@ -9157,7 +9332,6 @@ var LeaferUI = (function (exports) {
 
     const config = {
         wheel: {
-            zoomMode: false,
             zoomSpeed: 0.5,
             moveSpeed: 0.5,
             rotateSpeed: 0.5,
@@ -9166,14 +9340,12 @@ var LeaferUI = (function (exports) {
         },
         pointer: {
             hitRadius: 5,
-            through: false,
             tapTime: 120,
             longPressTime: 800,
             transformTime: 500,
             dragHover: true,
             dragDistance: 2,
             swipeDistance: 20,
-            ignoreMove: false,
             preventDefaultMenu: true
         },
         cursor: {}
@@ -9182,7 +9354,7 @@ var LeaferUI = (function (exports) {
     const { pathHasEventType, getMoveEventData: getMoveEventData$1, getZoomEventData: getZoomEventData$1, getRotateEventData: getRotateEventData$1 } = InteractionHelper;
     class InteractionBase {
         get dragging() { return this.dragger.dragging; }
-        get isDragEmpty() { return this.config.move.dragEmpty && (this.hoverData && this.hoverData.path.list[0].isLeafer) && (!this.downData || this.downData.path.list[0].isLeafer); }
+        get isDragEmpty() { return this.config.move.dragEmpty && this.isRootPath(this.hoverData) && (!this.downData || this.isRootPath(this.downData)); }
         get isHoldRightKey() { return this.config.move.holdRightKey && this.downData && PointerButton.right(this.downData); }
         get moveMode() { return this.config.move.drag || (this.config.move.holdSpaceKey && Keyboard.isHoldSpaceKey()) || (this.downData && ((this.config.move.holdMiddleKey && PointerButton.middle(this.downData)) || (this.isHoldRightKey && this.dragger.moving))) || this.isDragEmpty; }
         get hitRadius() { return this.config.pointer.hitRadius; }
@@ -9214,12 +9386,10 @@ var LeaferUI = (function (exports) {
                 return;
             PointerButton.defaultLeft(data);
             this.updateDownData(data);
-            if (useDefaultPath)
-                data.path = this.defaultPath;
+            this.checkPath(data, useDefaultPath);
+            this.downTime = Date.now();
             this.emit(exports.PointerEvent.BEFORE_DOWN, data);
             this.emit(exports.PointerEvent.DOWN, data);
-            this.downTime = Date.now();
-            this.dragger.setDragData(data);
             if (PointerButton.left(data)) {
                 this.tapWait();
                 this.longPressWait(data);
@@ -9227,6 +9397,7 @@ var LeaferUI = (function (exports) {
             else if (PointerButton.right(data)) {
                 this.waitMenuTap = true;
             }
+            this.dragger.setDragData(data);
             this.updateCursor(data);
         }
         pointerMove(data) {
@@ -9234,14 +9405,14 @@ var LeaferUI = (function (exports) {
                 data = this.hoverData;
             if (!data)
                 return;
-            if (this.downData)
+            const { downData } = this;
+            if (downData)
                 PointerButton.defaultLeft(data);
             const hit = this.canvas.bounds.hitPoint(data);
-            if (hit || this.downData) {
-                if (hit && !this.downData && PointerButton.left(data))
-                    this.pointerDown(data, true);
+            if (hit || downData) {
                 this.pointerMoveReal(data);
-                this.dragger.checkDragOut(data);
+                if (downData)
+                    this.dragger.checkDragOut(data);
             }
         }
         pointerMoveReal(data) {
@@ -9257,9 +9428,10 @@ var LeaferUI = (function (exports) {
             }
             if (!this.dragger.moving) {
                 this.updateHoverData(data);
+                this.checkPath(data);
                 this.emit(exports.PointerEvent.MOVE, data);
-                this.pointerOverOrOut(data);
-                this.pointerEnterOrLeave(data);
+                if (!(this.dragging && !this.config.pointer.dragHover))
+                    this.pointerHover(data);
                 if (this.dragger.dragging) {
                     this.dragger.dragOverOrOut(data);
                     this.dragger.dragEnterOrLeave(data);
@@ -9268,22 +9440,22 @@ var LeaferUI = (function (exports) {
             this.updateCursor(this.downData || data);
         }
         pointerUp(data) {
+            const { downData } = this;
             if (!data)
-                data = this.downData;
-            if (!this.downData)
+                data = downData;
+            if (!downData)
                 return;
             PointerButton.defaultLeft(data);
+            this.downData = null;
             this.findPath(data);
+            data.path.addList(downData.path.list);
+            this.checkPath(data);
             this.emit(exports.PointerEvent.BEFORE_UP, data);
             this.emit(exports.PointerEvent.UP, data);
-            if (this.oldDownData)
-                this.emit(exports.PointerEvent.UP, this.oldDownData, undefined, data.path);
-            this.emit(exports.PointerEvent.UP, this.downData, undefined, data.path);
             this.touchLeave(data);
             this.tap(data);
             this.menuTap(data);
             this.dragger.dragEnd(data);
-            this.downData = this.oldDownData = null;
             this.updateCursor(data);
         }
         pointerCancel() {
@@ -9321,8 +9493,10 @@ var LeaferUI = (function (exports) {
                 this.downKeyMap[code] = true;
                 Keyboard.setDownCode(code);
                 this.emit(exports.KeyEvent.HOLD, data, this.defaultPath);
-                if (this.moveMode)
+                if (this.moveMode) {
+                    this.cancelHover();
                     this.updateCursor();
+                }
             }
             this.emit(exports.KeyEvent.DOWN, data, this.defaultPath);
         }
@@ -9334,32 +9508,34 @@ var LeaferUI = (function (exports) {
             if (this.cursor === 'grab')
                 this.updateCursor();
         }
+        pointerHover(data) {
+            this.pointerOverOrOut(data);
+            this.pointerEnterOrLeave(data);
+        }
         pointerOverOrOut(data) {
-            if (this.dragger.moving)
-                return;
-            if (this.dragging && !this.config.pointer.dragHover)
-                return;
             const { path } = data;
-            if (this.overPath) {
-                if (path.indexAt(0) !== this.overPath.indexAt(0)) {
-                    this.emit(exports.PointerEvent.OUT, data, this.overPath);
+            const { overPath } = this;
+            this.overPath = path;
+            if (overPath) {
+                if (path.indexAt(0) !== overPath.indexAt(0)) {
+                    this.emit(exports.PointerEvent.OUT, data, overPath);
                     this.emit(exports.PointerEvent.OVER, data, path);
                 }
             }
             else {
                 this.emit(exports.PointerEvent.OVER, data, path);
             }
-            this.overPath = path;
         }
         pointerEnterOrLeave(data) {
-            if (this.dragger.moving)
-                return;
-            if (this.dragging && !this.config.pointer.dragHover)
-                return;
-            const { path } = data;
-            this.emit(exports.PointerEvent.LEAVE, data, this.enterPath, path);
-            this.emit(exports.PointerEvent.ENTER, data, path, this.enterPath);
+            let { path } = data;
+            if (this.downData && !this.moveMode) {
+                path = path.clone();
+                this.downData.path.forEach(leaf => path.add(leaf));
+            }
+            const { enterPath } = this;
             this.enterPath = path;
+            this.emit(exports.PointerEvent.LEAVE, data, enterPath, path);
+            this.emit(exports.PointerEvent.ENTER, data, path, enterPath);
         }
         touchLeave(data) {
             if (data.pointerType === 'touch') {
@@ -9412,17 +9588,44 @@ var LeaferUI = (function (exports) {
             data.path = find.path;
             return find.path;
         }
+        isRootPath(data) {
+            return data && data.path.list[0].isLeafer;
+        }
+        checkPath(data, useDefaultPath) {
+            if (useDefaultPath || this.canMove(data))
+                data.path = this.defaultPath;
+        }
+        canMove(data) {
+            return this.moveMode && data && data.path.list.every(item => !item.isOutside);
+        }
         isDrag(leaf) {
             return this.dragger.getList().has(leaf);
         }
-        updateDownData(data, options) {
+        isPress(leaf) {
+            return this.downData && this.downData.path.has(leaf);
+        }
+        isHover(leaf) {
+            return this.enterPath && this.enterPath.has(leaf);
+        }
+        isFocus(leaf) {
+            return this.focusData === leaf;
+        }
+        cancelHover() {
+            const { hoverData } = this;
+            if (hoverData) {
+                hoverData.path = this.defaultPath;
+                this.pointerHover(hoverData);
+            }
+        }
+        updateDownData(data, options, merge) {
             const { downData } = this;
             if (!data && downData)
-                data = Object.assign({}, downData);
+                data = downData;
             if (!data)
                 return;
-            this.oldDownData = downData;
             this.findPath(data, options);
+            if (merge && downData)
+                data.path.addList(downData.path.list);
             this.downData = data;
         }
         updateHoverData(data) {
@@ -9443,13 +9646,12 @@ var LeaferUI = (function (exports) {
             if (this.dragger.moving) {
                 return this.setCursor('grabbing');
             }
-            else if (this.moveMode) {
+            else if (this.canMove(data)) {
                 return this.setCursor(this.downData ? 'grabbing' : 'grab');
             }
             else if (!data)
                 return;
-            let leaf;
-            let cursor;
+            let leaf, cursor;
             const { path } = data;
             for (let i = 0, len = path.length; i < len; i++) {
                 leaf = path.list[i];
@@ -9584,7 +9786,8 @@ var LeaferUI = (function (exports) {
     exports.Leaf.prototype.__hitWorld = function (point) {
         if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
             this.__updateHitCanvas();
-            this.__layout.hitCanvasChanged = false;
+            if (!this.__layout.boundsChanged)
+                this.__layout.hitCanvasChanged = false;
         }
         if (this.__.hitRadius) {
             copy$2(inner, point), point = inner;
@@ -10393,10 +10596,6 @@ var LeaferUI = (function (exports) {
             case 'strench':
                 if (!sameBox)
                     width = box.width, height = box.height;
-                if (box.x || box.y) {
-                    data.transform = get$3();
-                    translate(data.transform, box.x, box.y);
-                }
                 break;
             case 'clip':
                 if (offset || scaleX || rotation)
@@ -10414,6 +10613,12 @@ var LeaferUI = (function (exports) {
                 if (!sameBox || rotation)
                     fillOrFitMode(data, mode, box, width, height, rotation);
         }
+        if (!data.transform) {
+            if (box.x || box.y) {
+                data.transform = get$3();
+                translate(data.transform, box.x, box.y);
+            }
+        }
         data.width = width;
         data.height = height;
         if (opacity)
@@ -10431,8 +10636,7 @@ var LeaferUI = (function (exports) {
             leafPaint = cache.leafPaint;
         }
         else {
-            leafPaint = { type: paint.type };
-            leafPaint.image = image;
+            leafPaint = { type: paint.type, image };
             cache = image.use > 1 ? { leafPaint, paint, boxBounds: box.set(boxBounds) } : null;
         }
         if (firstUse || image.loading)
@@ -10449,9 +10653,11 @@ var LeaferUI = (function (exports) {
                 onLoadError(ui, event, image.error);
         }
         else {
+            ignoreRender(ui, true);
             if (firstUse)
                 onLoad(ui, event);
             leafPaint.loadId = image.load(() => {
+                ignoreRender(ui, false);
                 if (!ui.destroyed) {
                     if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds))
                         ui.forceUpdate('surface');
@@ -10459,6 +10665,7 @@ var LeaferUI = (function (exports) {
                 }
                 leafPaint.loadId = null;
             }, (error) => {
+                ignoreRender(ui, false);
                 onLoadError(ui, event, error);
                 leafPaint.loadId = null;
             });
@@ -10498,11 +10705,16 @@ var LeaferUI = (function (exports) {
         if (ui.hasEvent(type))
             ui.emitEvent(new ImageEvent(type, data));
     }
+    function ignoreRender(ui, value) {
+        const { leafer } = ui;
+        if (leafer && leafer.viewReady)
+            leafer.renderer.ignore = value;
+    }
 
     const { get: get$2, scale, copy: copy$1 } = MatrixHelper;
     const { ceil, abs: abs$1 } = Math;
     function createPattern(ui, paint, pixelRatio) {
-        let { scaleX, scaleY } = ui.__world;
+        let { scaleX, scaleY } = ui.__nowWorld;
         const id = scaleX + '-' + scaleY;
         if (paint.patternId !== id && !ui.destroyed) {
             scaleX = abs$1(scaleX);
@@ -10564,7 +10776,7 @@ var LeaferUI = (function (exports) {
 
     const { abs } = Math;
     function checkImage(ui, canvas, paint, allowPaint) {
-        const { scaleX, scaleY } = ui.__world;
+        const { scaleX, scaleY } = ui.__nowWorld;
         if (!paint.data || paint.patternId === scaleX + '-' + scaleY) {
             return false;
         }
@@ -10606,7 +10818,7 @@ var LeaferUI = (function (exports) {
                     if (!paint.patternTask) {
                         paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function* () {
                             paint.patternTask = null;
-                            if (canvas.bounds.hit(ui.__world))
+                            if (canvas.bounds.hit(ui.__nowWorld))
                                 createPattern(ui, paint, canvas.pixelRatio);
                             ui.forceUpdate('surface');
                         }), 300);
@@ -10843,8 +11055,8 @@ var LeaferUI = (function (exports) {
 
     function blur(ui, current, origin) {
         const { blur } = ui.__;
-        origin.setWorldBlur(blur * ui.__world.a);
-        origin.copyWorldToInner(current, ui.__world, ui.__layout.renderBounds);
+        origin.setWorldBlur(blur * ui.__nowWorld.a);
+        origin.copyWorldToInner(current, ui.__nowWorld, ui.__layout.renderBounds);
         origin.filter = 'none';
     }
 
@@ -11475,10 +11687,10 @@ var LeaferUI = (function (exports) {
                             renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
                         }
                         else {
-                            const location = options.location || ((isLeafer || isFrame) ? 'inner' : 'local');
+                            let relative = options.relative || (isLeafer ? 'inner' : 'local');
                             scaleX = worldTransform.scaleX;
                             scaleY = worldTransform.scaleY;
-                            switch (location) {
+                            switch (relative) {
                                 case 'inner':
                                     matrix.set(worldTransform).invert();
                                     break;
@@ -11491,11 +11703,18 @@ var LeaferUI = (function (exports) {
                                     scaleX = 1;
                                     scaleY = 1;
                                     break;
+                                case 'page':
+                                    relative = leaf.leafer;
+                                default:
+                                    matrix.set(worldTransform).divide(leaf.getTransform(relative)).invert();
+                                    const l = relative.worldTransform;
+                                    scaleX /= scaleX / l.scaleX;
+                                    scaleY /= scaleY / l.scaleY;
                             }
-                            renderBounds = leaf.getBounds('render', location);
+                            renderBounds = leaf.getBounds('render', relative);
                         }
-                        const { x, y, width, height } = new Bounds(renderBounds).scale(scale).ceil();
-                        let canvas = Creator.canvas({ width, height, pixelRatio });
+                        const { x, y, width, height } = new Bounds(renderBounds).scale(scale);
+                        let canvas = Creator.canvas({ width: Math.round(width), height: Math.round(height), pixelRatio });
                         const renderOptions = { matrix: matrix.scale(scale).translate(-x, -y).withScale(1 / scaleX * scale, 1 / scaleY * scale) };
                         if (slice) {
                             leaf = leafer;
@@ -11651,6 +11870,7 @@ var LeaferUI = (function (exports) {
     exports.Run = Run;
     exports.Selector = Selector;
     exports.StarData = StarData;
+    exports.State = State;
     exports.StringNumberMap = StringNumberMap;
     exports.TaskItem = TaskItem;
     exports.TaskProcessor = TaskProcessor;
@@ -11694,6 +11914,7 @@ var LeaferUI = (function (exports) {
     exports.opacityType = opacityType;
     exports.pathInputType = pathInputType;
     exports.pathType = pathType;
+    exports.pen = pen;
     exports.positionType = positionType;
     exports.registerUI = registerUI;
     exports.registerUIEvent = registerUIEvent;
@@ -11703,10 +11924,12 @@ var LeaferUI = (function (exports) {
     exports.rotationType = rotationType;
     exports.scaleType = scaleType;
     exports.sortType = sortType;
+    exports.stateType = stateType;
     exports.strokeType = strokeType;
     exports.surfaceType = surfaceType;
     exports.useCanvas = useCanvas;
     exports.useModule = useModule;
+    exports.zoomLayerType = zoomLayerType;
 
     return exports;