@leafer/core 1.0.0-rc.16 → 1.0.0-rc.18

package/lib/core.cjs

@@ -40,6 +40,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) {
@@ -723,7 +735,7 @@ const { addPoint: addPoint$3 } = TwoPointBoundsHelper;
 
 const { tempPointBounds: tempPointBounds$1, setPoint: setPoint$2, addPoint: addPoint$2, toBounds: toBounds$2 } = TwoPointBoundsHelper;
 const { toOuterPoint: toOuterPoint$1 } = MatrixHelper;
-const { float } = MathHelper;
+const { float, fourNumber } = MathHelper;
 const { floor, ceil: ceil$1 } = Math;
 let right, bottom, boundsRight, boundsBottom;
 const point = {};
@@ -743,9 +755,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; },
@@ -1023,8 +1041,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() {
@@ -1449,17 +1471,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;
+                    }
                 }
             }
         }
@@ -2820,12 +2855,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);
@@ -3139,6 +3178,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) {
@@ -3423,7 +3463,7 @@ const ImageManager = {
     },
     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];
@@ -3675,6 +3715,8 @@ function affectStrokeBoundsType(defaultValue) {
 }
 function doStrokeType(leaf) {
     leaf.__layout.strokeChanged || leaf.__layout.strokeChange();
+    if (leaf.__.__useArrow)
+        doBoundsType(leaf);
 }
 const strokeType = affectStrokeBoundsType;
 function affectRenderBoundsType(defaultValue) {
@@ -3878,133 +3920,413 @@ function registerUIEvent() {
     };
 }
 
-const tempMatrix = new Matrix();
-const { toOuterOf: toOuterOf$2, getPoints, copy: copy$2 } = 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$2, toInnerPoint: toInnerPoint$1, scaleOfOuter, rotateOfOuter, 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$1(leaf, checkAutoLayout, waitAutoLayout);
+        if (leaf.isBranch) {
+            const { children } = leaf;
+            for (let i = 0, len = children.length; i < len; i++) {
+                updateAllMatrix$1(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(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(leaf);
+        leaf.__updateChange();
+        if (leaf.isBranch) {
+            const { children } = leaf;
+            for (let i = 0, len = children.length; i < len; i++) {
+                updateAllChange(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$2(matrix, t.__localMatrix);
+        scaleOfOuter(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$2(matrix, t.__localMatrix);
+        rotateOfOuter(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$2(matrix, t.__localMatrix);
+        skewOfOuter(matrix, origin, skewX, skewY);
+        L.setTransform(t, matrix, resize);
+    },
+    transformWorld(t, transform, resize) {
+        copy$2(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$2(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$2(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;
-                break;
-            case 'local':
+};
+const L = LeafHelper;
+const { updateAllMatrix: updateAllMatrix$1, updateMatrix: updateMatrix$1, updateAllWorldOpacity, updateAllChange } = 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$1 } = 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(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$1(children[j]);
+            }
+            if (exclude && exclude === branch)
+                continue;
+            updateBounds$1(branch);
+        }
+    }
+};
+const { pushAllChildBranch, 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$1 } = 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);
                 matrix = leaf.__localMatrix;
                 break;
@@ -4012,12 +4334,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$2(layoutBounds, bounds);
+        copy$1(layoutBounds, bounds);
         PointHelper.copy(layoutBounds, point);
         if (unscale) {
             const { scaleX, scaleY } = layoutBounds;
@@ -4045,6 +4369,8 @@ class LeafLayout {
                 break;
             case 'inner':
                 break;
+            case 'page':
+                relative = leaf.zoomLayer;
             default:
                 relativeLeaf = relative;
         }
@@ -4305,438 +4631,166 @@ class PropertyEvent extends Event {
         this.newValue = newValue;
     }
 }
-PropertyEvent.CHANGE = 'property.change';
-PropertyEvent.LEAFER_CHANGE = 'property.leafer_change';
-
-class ImageEvent extends Event {
-    constructor(type, data) {
-        super(type);
-        Object.assign(this, data);
-    }
-}
-ImageEvent.LOAD = 'image.load';
-ImageEvent.LOADED = 'image.loaded';
-ImageEvent.ERROR = 'image.error';
-
-class ResizeEvent extends Event {
-    get bigger() {
-        if (!this.old)
-            return true;
-        const { width, height } = this.old;
-        return this.width >= width && this.height >= height;
-    }
-    get smaller() {
-        return !this.bigger;
-    }
-    get samePixelRatio() {
-        if (!this.old)
-            return true;
-        return this.pixelRatio === this.old.pixelRatio;
-    }
-    constructor(size, oldSize) {
-        if (typeof size === 'object') {
-            super(ResizeEvent.RESIZE);
-            Object.assign(this, size);
-        }
-        else {
-            super(size);
-        }
-        this.old = oldSize;
-    }
-}
-ResizeEvent.RESIZE = 'resize';
-
-class WatchEvent extends Event {
-    constructor(type, data) {
-        super(type);
-        this.data = data;
-    }
-}
-WatchEvent.REQUEST = 'watch.request';
-WatchEvent.DATA = 'watch.data';
-
-class LayoutEvent extends Event {
-    constructor(type, data, times) {
-        super(type);
-        if (data) {
-            this.data = data;
-            this.times = times;
-        }
-    }
-}
-LayoutEvent.CHECK_UPDATE = 'layout.check_update';
-LayoutEvent.REQUEST = 'layout.request';
-LayoutEvent.START = 'layout.start';
-LayoutEvent.BEFORE = 'layout.before';
-LayoutEvent.LAYOUT = 'layout';
-LayoutEvent.AFTER = 'layout.after';
-LayoutEvent.AGAIN = 'layout.again';
-LayoutEvent.END = 'layout.end';
-
-class AnimateEvent extends Event {
-}
-AnimateEvent.FRAME = 'animate.frame';
-
-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$1, toInnerPoint: toInnerPoint$1, scaleOfOuter, rotateOfOuter, 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$1(leaf, checkAutoLayout, waitAutoLayout);
-        if (leaf.isBranch) {
-            const { children } = leaf;
-            for (let i = 0, len = children.length; i < len; i++) {
-                updateAllMatrix$1(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(children[i]);
-            }
-        }
-    },
-    updateAllChange(leaf) {
-        updateAllWorldOpacity(leaf);
-        leaf.__updateChange();
-        if (leaf.isBranch) {
-            const { children } = leaf;
-            for (let i = 0, len = children.length; i < len; i++) {
-                updateAllChange(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$1(matrix, t.__localMatrix);
-        scaleOfOuter(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$1(matrix, t.__localMatrix);
-        rotateOfOuter(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$1(matrix, t.__localMatrix);
-        skewOfOuter(matrix, origin, skewX, skewY);
-        L.setTransform(t, matrix, resize);
-    },
-    transformWorld(t, transform, resize) {
-        copy$1(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$1(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$1(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$1, updateMatrix: updateMatrix$1, updateAllWorldOpacity, updateAllChange } = 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;
+PropertyEvent.CHANGE = 'property.change';
+PropertyEvent.LEAFER_CHANGE = 'property.leafer_change';
+
+class ImageEvent extends Event {
+    constructor(type, data) {
+        super(type);
+        Object.assign(this, data);
+    }
 }
+ImageEvent.LOAD = 'image.load';
+ImageEvent.LOADED = 'image.loaded';
+ImageEvent.ERROR = 'image.error';
 
-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))
+class ResizeEvent extends Event {
+    get bigger() {
+        if (!this.old)
             return true;
-        if (options.hideBounds && options.hideBounds.includes(child.__world, options.matrix))
+        const { width, height } = this.old;
+        return this.width >= width && this.height >= height;
+    }
+    get smaller() {
+        return !this.bigger;
+    }
+    get samePixelRatio() {
+        if (!this.old)
             return true;
-        return false;
+        return this.pixelRatio === this.old.pixelRatio;
     }
-};
+    constructor(size, oldSize) {
+        if (typeof size === 'object') {
+            super(ResizeEvent.RESIZE);
+            Object.assign(this, size);
+        }
+        else {
+            super(size);
+        }
+        this.old = oldSize;
+    }
+}
+ResizeEvent.RESIZE = 'resize';
 
-const { updateBounds: updateBounds$1 } = 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(branch, leafList);
-                }
-            }
+class WatchEvent extends Event {
+    constructor(type, data) {
+        super(type);
+        this.data = data;
+    }
+}
+WatchEvent.REQUEST = 'watch.request';
+WatchEvent.DATA = 'watch.data';
+
+class LayoutEvent extends Event {
+    constructor(type, data, times) {
+        super(type);
+        if (data) {
+            this.data = data;
+            this.times = times;
         }
-    },
-    pushAllParent(leaf, leafList) {
-        const { keys } = leafList;
-        if (keys) {
-            while (leaf.parent) {
-                if (keys[leaf.parent.innerId] === undefined) {
-                    leafList.add(leaf.parent);
-                    leaf = leaf.parent;
+    }
+}
+LayoutEvent.CHECK_UPDATE = 'layout.check_update';
+LayoutEvent.REQUEST = 'layout.request';
+LayoutEvent.START = 'layout.start';
+LayoutEvent.BEFORE = 'layout.before';
+LayoutEvent.LAYOUT = 'layout';
+LayoutEvent.AFTER = 'layout.after';
+LayoutEvent.AGAIN = 'layout.again';
+LayoutEvent.END = 'layout.end';
+
+class AnimateEvent extends Event {
+}
+AnimateEvent.FRAME = 'animate.frame';
+
+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 {
-                    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$1(children[j]);
-            }
-            if (exclude && exclude === branch)
-                continue;
-            updateBounds$1(branch);
-        }
+    __getAttr(name) {
+        if (this.__proxyData)
+            return this.getProxyAttr(name);
+        return this.__.__get(name);
     }
 };
-const { pushAllChildBranch, 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;
     }
 };
 
@@ -4953,7 +5007,7 @@ const { LEAF, create } = IncrementId;
 const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
 const { toOuterOf } = BoundsHelper;
 const { tempToOuterOf, copy } = 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) { }
@@ -4991,21 +5045,31 @@ exports.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) {
@@ -5042,6 +5106,7 @@ exports.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';
@@ -5097,6 +5162,9 @@ exports.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);
     }
@@ -5106,6 +5174,12 @@ exports.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);
@@ -5188,6 +5262,21 @@ exports.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;
@@ -5319,7 +5408,8 @@ exports.Branch = class Branch extends exports.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) {
@@ -5643,6 +5733,7 @@ exports.naturalBoundsType = naturalBoundsType;
 exports.opacityType = opacityType;
 exports.pathInputType = pathInputType;
 exports.pathType = pathType;
+exports.pen = pen;
 exports.positionType = positionType;
 exports.registerUI = registerUI;
 exports.registerUIEvent = registerUIEvent;