@leafer-draw/worker 1.0.0-rc.17 → 1.0.0-rc.18

package/dist/worker.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.recycledList;
-            if (list.length) {
+            if (list.length > 100) {
                 list.forEach(image => {
                     if (!image.use && image.url) {
                         delete I.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$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();
+    const { copy: copy$5, 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$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$2(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$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$5(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$4 } = 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$5(layoutBounds, bounds);
+            copy$4(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;
             }
@@ -4381,363 +4707,91 @@ var LeaferUI = (function (exports) {
     class RenderEvent extends Event {
         constructor(type, times, bounds, options) {
             super(type);
-            if (times)
-                this.times = times;
-            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$4, 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$4(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$4(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$4(matrix, t.__localMatrix);
-            skewOfOuter(matrix, origin, skewX, skewY);
-            L.setTransform(t, matrix, resize);
-        },
-        transformWorld(t, transform, resize) {
-            copy$4(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$4(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$4(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;
+            if (times)
+                this.times = times;
+            if (bounds) {
+                this.renderBounds = bounds;
+                this.renderOptions = options;
             }
         }
-    };
-    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;
     }
+    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 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;
-        }
-    };
+    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 { 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;
+    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$3 } = 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) {
@@ -6051,6 +6141,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();
@@ -6198,9 +6292,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;
             }
         }
     }
@@ -6214,14 +6306,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);
                 }
             });
         };
@@ -6249,15 +6363,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 = {};
@@ -6266,7 +6381,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;
@@ -6540,18 +6655,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;
@@ -6584,7 +6692,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) {
@@ -6599,6 +6712,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) {
@@ -6647,6 +6770,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);
         }
@@ -6655,7 +6782,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; }
@@ -6664,10 +6791,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;
         }
@@ -6739,6 +6867,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);
@@ -6757,6 +6888,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);
@@ -6904,6 +7041,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);
@@ -6940,7 +7095,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;
@@ -6989,7 +7144,6 @@ 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,
@@ -7002,7 +7156,6 @@ var LeaferUI = (function (exports) {
                 move: {
                     holdSpaceKey: true,
                     holdMiddleKey: true,
-                    dragOut: true,
                     autoDistance: 2
                 }
             };
@@ -7133,9 +7286,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);
@@ -7221,13 +7371,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);
@@ -7237,7 +7393,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++) {
@@ -7251,6 +7409,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();
         }
@@ -8380,10 +8547,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)
@@ -8401,6 +8564,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)
@@ -8418,8 +8587,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)
@@ -8436,9 +8604,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');
@@ -8446,6 +8616,7 @@ var LeaferUI = (function (exports) {
                 }
                 leafPaint.loadId = null;
             }, (error) => {
+                ignoreRender(ui, false);
                 onLoadError(ui, event, error);
                 leafPaint.loadId = null;
             });
@@ -8485,11 +8656,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);
@@ -8551,7 +8727,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;
         }
@@ -8593,7 +8769,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);
@@ -8830,8 +9006,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';
     }
 
@@ -9462,10 +9638,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;
@@ -9478,11 +9654,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;
@@ -9623,6 +9806,7 @@ var LeaferUI = (function (exports) {
     exports.ResizeEvent = ResizeEvent;
     exports.Run = Run;
     exports.StarData = StarData;
+    exports.State = State;
     exports.StringNumberMap = StringNumberMap;
     exports.TaskItem = TaskItem;
     exports.TaskProcessor = TaskProcessor;
@@ -9665,6 +9849,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;
@@ -9674,10 +9859,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;