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

package/dist/web.module.js

@@ -38,6 +38,18 @@ const MathHelper = {
             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) {
@@ -721,7 +733,7 @@ const { addPoint: addPoint$4 } = TwoPointBoundsHelper;
 
 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 = {};
@@ -741,9 +753,15 @@ const BoundsHelper = {
         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; },
@@ -1021,8 +1039,12 @@ class Bounds {
     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() {
@@ -1447,17 +1469,30 @@ class LeafData {
         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;
+                    }
                 }
             }
         }
@@ -2818,12 +2853,16 @@ class PathCreator {
     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);
@@ -3137,6 +3176,7 @@ const PathCorner = {
 PathHelper.creator = new PathCreator();
 PathHelper.parse = PathConvert.parse;
 PathHelper.convertToCanvasData = PathConvert.toCanvasData;
+const pen = new PathCreator();
 
 const { drawRoundRect } = RectHelper;
 function roundRect(drawer) {
@@ -3421,7 +3461,7 @@ const ImageManager = {
     },
     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];
@@ -3673,6 +3713,8 @@ function affectStrokeBoundsType(defaultValue) {
 }
 function doStrokeType(leaf) {
     leaf.__layout.strokeChanged || leaf.__layout.strokeChange();
+    if (leaf.__.__useArrow)
+        doBoundsType(leaf);
 }
 const strokeType = affectStrokeBoundsType;
 function affectRenderBoundsType(defaultValue) {
@@ -3876,131 +3918,411 @@ function registerUIEvent() {
     };
 }
 
-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);
@@ -4010,12 +4332,14 @@ class LeafLayout {
                 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;
@@ -4043,6 +4367,8 @@ class LeafLayout {
                 break;
             case 'inner':
                 break;
+            case 'page':
+                relative = leaf.zoomLayer;
             default:
                 relativeLeaf = relative;
         }
@@ -4383,358 +4709,86 @@ class RenderEvent extends Event {
         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;
     }
 };
 
@@ -4951,7 +5005,7 @@ const { LEAF, create } = IncrementId;
 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;
 let Leaf = class Leaf {
     get tag() { return this.__tag; }
     set tag(_value) { }
@@ -4989,21 +5043,31 @@ let Leaf = class Leaf {
         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) {
@@ -5040,6 +5104,7 @@ let Leaf = class Leaf {
     getProxyAttr(_attrName) { return undefined; }
     find(_condition, _options) { return undefined; }
     findOne(_condition, _options) { return undefined; }
+    focus(_value) { }
     forceUpdate(attrName) {
         if (attrName === undefined)
             attrName = 'width';
@@ -5095,6 +5160,9 @@ let Leaf = class Leaf {
             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);
     }
@@ -5104,6 +5172,12 @@ let Leaf = class Leaf {
     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);
@@ -5186,6 +5260,21 @@ let Leaf = class Leaf {
     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;
@@ -5317,7 +5406,8 @@ let Branch = class Branch extends Leaf {
         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) {
@@ -6177,6 +6267,10 @@ class Renderer {
         }
         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();
@@ -6324,9 +6418,7 @@ class Renderer {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = null;
-            this.canvas = null;
-            this.config = null;
+            this.target = this.canvas = this.config = null;
         }
     }
 }
@@ -6384,7 +6476,7 @@ class Picker {
         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];
@@ -6583,14 +6675,36 @@ Object.assign(Creator, {
 });
 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);
             }
         });
     };
@@ -6618,15 +6732,16 @@ function resizeType(defaultValue) {
         });
     };
 }
-
-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 = {};
@@ -6635,7 +6750,7 @@ class UIData extends LeafData {
     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;
@@ -6909,18 +7024,11 @@ const UIRender = {
         }
     },
     __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;
@@ -6953,7 +7061,12 @@ const UIRender = {
             }
         }
         else {
-            this.__drawFast(canvas, options);
+            if (data.__pathInputed) {
+                drawFast(this, canvas, options);
+            }
+            else {
+                this.__drawFast(canvas, options);
+            }
         }
     },
     __renderShape(canvas, options) {
@@ -6968,6 +7081,16 @@ const UIRender = {
         }
     }
 };
+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) {
@@ -7016,6 +7139,10 @@ let UI = UI_1 = class UI extends Leaf {
         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);
     }
@@ -7024,7 +7151,7 @@ let UI = UI_1 = class UI extends Leaf {
         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; }
@@ -7033,10 +7160,11 @@ let UI = UI_1 = class UI extends Leaf {
         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;
     }
@@ -7108,6 +7236,9 @@ let UI = UI_1 = class UI extends Leaf {
 __decorate([
     dataProcessor(UIData)
 ], UI.prototype, "__", void 0);
+__decorate([
+    zoomLayerType()
+], UI.prototype, "zoomLayer", void 0);
 __decorate([
     dataType('')
 ], UI.prototype, "id", void 0);
@@ -7126,6 +7257,12 @@ __decorate([
 __decorate([
     opacityType(true)
 ], UI.prototype, "visible", void 0);
+__decorate([
+    stateType(false)
+], UI.prototype, "selected", void 0);
+__decorate([
+    stateType(false)
+], UI.prototype, "disabled", void 0);
 __decorate([
     dataType(false)
 ], UI.prototype, "locked", void 0);
@@ -7273,6 +7410,24 @@ __decorate([
 __decorate([
     effectType()
 ], UI.prototype, "grayscale", void 0);
+__decorate([
+    dataType()
+], UI.prototype, "normalStyle", void 0);
+__decorate([
+    dataType()
+], UI.prototype, "hoverStyle", void 0);
+__decorate([
+    dataType()
+], UI.prototype, "pressStyle", void 0);
+__decorate([
+    dataType()
+], UI.prototype, "focusStyle", void 0);
+__decorate([
+    dataType()
+], UI.prototype, "selectedStyle", void 0);
+__decorate([
+    dataType()
+], UI.prototype, "disabledStyle", void 0);
 __decorate([
     rewrite(Leaf.prototype.reset)
 ], UI.prototype, "reset", null);
@@ -7309,7 +7464,7 @@ let Group = class Group extends UI {
             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;
@@ -7358,20 +7513,18 @@ let Leafer = class Leafer extends Group {
     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
             }
         };
@@ -7502,9 +7655,6 @@ let Leafer = class Leafer extends Group {
         this.leafer = leafer;
         this.__level = 1;
     }
-    setZoomLayer(zoomLayer) {
-        this.zoomLayer = zoomLayer;
-    }
     __checkAutoLayout(config) {
         if (!config.width || !config.height) {
             this.autoLayout = new AutoBounds(config);
@@ -7590,13 +7740,19 @@ let Leafer = class Leafer extends Group {
             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);
@@ -7606,7 +7762,9 @@ let Leafer = class Leafer extends Group {
                 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++) {
@@ -7620,6 +7778,15 @@ let Leafer = class Leafer extends Group {
             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();
     }
@@ -8692,17 +8859,21 @@ KeyEvent = __decorate([
 function design(leafer) {
     if (leafer.isApp)
         return;
-    leafer.__eventIds.push(leafer.on_(MoveEvent.BEFORE_MOVE, (e) => leafer.zoomLayer.move(e.moveX, e.moveY)), leafer.on_(ZoomEvent.BEFORE_ZOOM, (e) => {
+    leafer.__eventIds.push(leafer.on_(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_(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;
         }
     }));
 }
@@ -8746,6 +8917,7 @@ class Transformer {
             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(MoveEvent.START, this.moveData);
         }
         data.path = this.moveData.path;
@@ -8759,6 +8931,7 @@ class Transformer {
             const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
             data.path = path;
             this.zoomData = Object.assign(Object.assign({}, data), { scale: 1 });
+            interaction.cancelHover();
             interaction.emit(ZoomEvent.START, this.zoomData);
         }
         data.path = this.zoomData.path;
@@ -8772,6 +8945,7 @@ class Transformer {
             const { path } = interaction.selector.getByPoint(data, interaction.hitRadius);
             data.path = path;
             this.rotateData = Object.assign(Object.assign({}, data), { rotation: 0 });
+            interaction.cancelHover();
             interaction.emit(RotateEvent.START, this.rotateData);
         }
         data.path = this.rotateData.path;
@@ -8889,6 +9063,7 @@ class Dragger {
             this.dragEndReal();
         this.downData = this.interaction.downData;
         this.dragData = getDragEventData(data, data, data);
+        this.canAnimate = this.canDragOut = true;
     }
     getList() {
         const { proxy } = this.interaction.selector;
@@ -8901,11 +9076,8 @@ class Dragger {
             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(MoveEvent.START, this.dragData);
         }
         if (!this.moving) {
@@ -8954,13 +9126,14 @@ class Dragger {
         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(DragEvent.OUT, data, dragOverPath);
@@ -8970,7 +9143,6 @@ class Dragger {
         else {
             interaction.emit(DragEvent.OVER, data, path);
         }
-        this.dragOverPath = path;
     }
     dragEnterOrLeave(data) {
         const { interaction } = this;
@@ -8984,7 +9156,7 @@ class Dragger {
         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);
@@ -9018,12 +9190,11 @@ class Dragger {
     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);
@@ -9046,9 +9217,9 @@ class Dragger {
             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;
@@ -9124,12 +9295,16 @@ function emitAppChildren(leaf, type, data, capture, excludePath) {
 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;
 }
@@ -9154,7 +9329,6 @@ const MultiTouchHelper = {
 
 const config = {
     wheel: {
-        zoomMode: false,
         zoomSpeed: 0.5,
         moveSpeed: 0.5,
         rotateSpeed: 0.5,
@@ -9163,14 +9337,12 @@ const config = {
     },
     pointer: {
         hitRadius: 5,
-        through: false,
         tapTime: 120,
         longPressTime: 800,
         transformTime: 500,
         dragHover: true,
         dragDistance: 2,
         swipeDistance: 20,
-        ignoreMove: false,
         preventDefaultMenu: true
     },
     cursor: {}
@@ -9179,7 +9351,7 @@ const config = {
 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; }
@@ -9211,12 +9383,10 @@ class InteractionBase {
             return;
         PointerButton.defaultLeft(data);
         this.updateDownData(data);
-        if (useDefaultPath)
-            data.path = this.defaultPath;
+        this.checkPath(data, useDefaultPath);
+        this.downTime = Date.now();
         this.emit(PointerEvent.BEFORE_DOWN, data);
         this.emit(PointerEvent.DOWN, data);
-        this.downTime = Date.now();
-        this.dragger.setDragData(data);
         if (PointerButton.left(data)) {
             this.tapWait();
             this.longPressWait(data);
@@ -9224,6 +9394,7 @@ class InteractionBase {
         else if (PointerButton.right(data)) {
             this.waitMenuTap = true;
         }
+        this.dragger.setDragData(data);
         this.updateCursor(data);
     }
     pointerMove(data) {
@@ -9231,14 +9402,14 @@ class InteractionBase {
             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) {
@@ -9254,9 +9425,10 @@ class InteractionBase {
         }
         if (!this.dragger.moving) {
             this.updateHoverData(data);
+            this.checkPath(data);
             this.emit(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);
@@ -9265,22 +9437,22 @@ class InteractionBase {
         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(PointerEvent.BEFORE_UP, data);
         this.emit(PointerEvent.UP, data);
-        if (this.oldDownData)
-            this.emit(PointerEvent.UP, this.oldDownData, undefined, data.path);
-        this.emit(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() {
@@ -9318,8 +9490,10 @@ class InteractionBase {
             this.downKeyMap[code] = true;
             Keyboard.setDownCode(code);
             this.emit(KeyEvent.HOLD, data, this.defaultPath);
-            if (this.moveMode)
+            if (this.moveMode) {
+                this.cancelHover();
                 this.updateCursor();
+            }
         }
         this.emit(KeyEvent.DOWN, data, this.defaultPath);
     }
@@ -9331,32 +9505,34 @@ class InteractionBase {
         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(PointerEvent.OUT, data, this.overPath);
+        const { overPath } = this;
+        this.overPath = path;
+        if (overPath) {
+            if (path.indexAt(0) !== overPath.indexAt(0)) {
+                this.emit(PointerEvent.OUT, data, overPath);
                 this.emit(PointerEvent.OVER, data, path);
             }
         }
         else {
             this.emit(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(PointerEvent.LEAVE, data, this.enterPath, path);
-        this.emit(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(PointerEvent.LEAVE, data, enterPath, path);
+        this.emit(PointerEvent.ENTER, data, path, enterPath);
     }
     touchLeave(data) {
         if (data.pointerType === 'touch') {
@@ -9409,17 +9585,44 @@ class InteractionBase {
         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) {
@@ -9440,13 +9643,12 @@ class InteractionBase {
         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];
@@ -9581,7 +9783,8 @@ const inner = {};
 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;
@@ -10390,10 +10593,6 @@ function createData(leafPaint, image, paint, box) {
         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)
@@ -10411,6 +10610,12 @@ function createData(leafPaint, image, paint, box) {
             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)
@@ -10428,8 +10633,7 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
         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)
@@ -10446,9 +10650,11 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             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');
@@ -10456,6 +10662,7 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
             }
             leafPaint.loadId = null;
         }, (error) => {
+            ignoreRender(ui, false);
             onLoadError(ui, event, error);
             leafPaint.loadId = null;
         });
@@ -10495,11 +10702,16 @@ function emit(ui, type, data) {
     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);
@@ -10561,7 +10773,7 @@ function createPattern(ui, paint, pixelRatio) {
 
 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;
     }
@@ -10603,7 +10815,7 @@ function checkImage(ui, canvas, paint, allowPaint) {
                 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);
@@ -10840,8 +11052,8 @@ function innerShadow(ui, current, shape) {
 
 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';
 }
 
@@ -11472,10 +11684,10 @@ const ExportModule = {
                         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;
@@ -11488,11 +11700,18 @@ const ExportModule = {
                                 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;
@@ -11554,4 +11773,4 @@ Object.assign(Creator, {
 });
 useCanvas();
 
-export { AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, arrowType, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, strokeType, surfaceType, useCanvas, useModule };
+export { AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Platform, Point, PointHelper, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, arrowType, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, eraserType, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, layoutProcessor, maskType, naturalBoundsType, opacityType, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, sortType, stateType, strokeType, surfaceType, useCanvas, useModule, zoomLayerType };