@leafer/core 1.0.0-rc.22 → 1.0.0-rc.24

package/lib/core.cjs

@@ -5,7 +5,7 @@ const Platform = {
         hitCanvasSize: 100,
         maxCacheSize: 2560 * 1600,
         maxPatternSize: 4096 * 2160,
-        suffix: 'leaf',
+        suffix: '',
         crossOrigin: 'anonymous'
     }
 };
@@ -35,24 +35,12 @@ const I$1 = IncrementId;
 const { round, pow: pow$1, PI: PI$2 } = Math;
 const MathHelper = {
     within(value, min, max) {
-        if (value < min)
+        if (min !== undefined && value < min)
             value = min;
-        if (value > max)
+        if (max !== undefined && value > max)
             value = max;
         return value;
     },
-    minus(value, isFourNumber) {
-        if (value instanceof Array) {
-            if (isFourNumber)
-                value = MathHelper.fourNumber(value, 0);
-            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) {
@@ -149,9 +137,11 @@ const MatrixHelper = {
         t.e += x;
         t.f += y;
     },
-    translateInner(t, x, y) {
+    translateInner(t, x, y, isMoveOrigin) {
         t.e += t.a * x + t.c * y;
         t.f += t.b * x + t.d * y;
+        if (isMoveOrigin)
+            t.e -= x, t.f -= y;
     },
     scale(t, scaleX, scaleY = scaleX) {
         t.a *= scaleX;
@@ -218,8 +208,10 @@ const MatrixHelper = {
         t.e = child.e * a + child.f * c + e;
         t.f = child.e * b + child.f * d + f;
     },
-    multiplyParent(t, parent, to, abcdChanged, childScaleData) {
-        const { e, f } = t;
+    multiplyParent(t, parent, to, abcdChanged, childScaleData, scrollData) {
+        let { e, f } = t;
+        if (scrollData)
+            e += scrollData.scrollX, f += scrollData.scrollY;
         to || (to = t);
         if (abcdChanged === undefined)
             abcdChanged = t.a !== 1 || t.b || t.c || t.d !== 1;
@@ -340,7 +332,7 @@ const MatrixHelper = {
         t.e = x;
         t.f = y;
         if (origin)
-            M$6.translateInner(t, -origin.x, -origin.y);
+            M$6.translateInner(t, -origin.x, -origin.y, true);
     },
     getLayout(t, origin, firstSkewY) {
         const { a, b, c, d, e, f } = t;
@@ -760,7 +752,7 @@ const { float, fourNumber } = MathHelper;
 const { floor, ceil: ceil$1 } = Math;
 let right, bottom, boundsRight, boundsBottom;
 const point = {};
-const toPoint$1 = {};
+const toPoint$2 = {};
 const BoundsHelper = {
     tempBounds: {},
     set(t, x = 0, y = 0, width = 0, height = 0) {
@@ -775,15 +767,17 @@ const BoundsHelper = {
         t.width = bounds.width;
         t.height = bounds.height;
     },
-    copyAndSpread(t, bounds, spreadX, spreadY) {
-        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]);
+    copyAndSpread(t, bounds, spread, isShrink) {
+        if (spread instanceof Array) {
+            const four = fourNumber(spread);
+            isShrink
+                ? B.set(t, bounds.x + four[3], bounds.y + four[0], bounds.width - four[1] - four[3], bounds.height - four[2] - four[0])
+                : 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);
+            if (isShrink)
+                spread = -spread;
+            B.set(t, bounds.x - spread, bounds.y - spread, bounds.width + spread * 2, bounds.height + spread * 2);
         }
     },
     minX(t) { return t.width > 0 ? t.x : t.x + t.width; },
@@ -860,17 +854,17 @@ const BoundsHelper = {
         else {
             point.x = t.x;
             point.y = t.y;
-            toOuterPoint$1(matrix, point, toPoint$1);
-            setPoint$2(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+            toOuterPoint$1(matrix, point, toPoint$2);
+            setPoint$2(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
             point.x = t.x + t.width;
-            toOuterPoint$1(matrix, point, toPoint$1);
-            addPoint$2(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+            toOuterPoint$1(matrix, point, toPoint$2);
+            addPoint$2(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
             point.y = t.y + t.height;
-            toOuterPoint$1(matrix, point, toPoint$1);
-            addPoint$2(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+            toOuterPoint$1(matrix, point, toPoint$2);
+            addPoint$2(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
             point.x = t.x;
-            toOuterPoint$1(matrix, point, toPoint$1);
-            addPoint$2(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+            toOuterPoint$1(matrix, point, toPoint$2);
+            addPoint$2(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
             toBounds$2(tempPointBounds$1, to);
         }
     },
@@ -883,13 +877,16 @@ const BoundsHelper = {
         const scale = Math.min(baseScale, Math.min(t.width / put.width, t.height / put.height));
         return new Matrix(scale, 0, 0, scale, -put.x * scale, -put.y * scale);
     },
-    getSpread(t, spreadX, spreadY) {
+    getSpread(t, spread) {
         const n = {};
-        B.copyAndSpread(n, t, spreadX, spreadY);
+        B.copyAndSpread(n, t, spread);
         return n;
     },
-    spread(t, spreadX, spreadY = spreadX) {
-        B.copyAndSpread(t, t, spreadX, spreadY);
+    spread(t, spread) {
+        B.copyAndSpread(t, t, spread);
+    },
+    shrink(t, shrink) {
+        B.copyAndSpread(t, t, shrink, true);
     },
     ceil(t) {
         const { x, y } = t;
@@ -1069,12 +1066,12 @@ class Bounds {
     getFitMatrix(put, baseScale) {
         return BoundsHelper.getFitMatrix(this, put, baseScale);
     }
-    spread(fourNumber, spreadY) {
-        BoundsHelper.spread(this, fourNumber, spreadY);
+    spread(fourNumber) {
+        BoundsHelper.spread(this, fourNumber);
         return this;
     }
     shrink(fourNumber) {
-        BoundsHelper.spread(this, MathHelper.minus(fourNumber, true));
+        BoundsHelper.shrink(this, fourNumber);
         return this;
     }
     ceil() {
@@ -1191,6 +1188,10 @@ exports.Direction9 = void 0;
     Direction9[Direction9["bottomLeft"] = 6] = "bottomLeft";
     Direction9[Direction9["left"] = 7] = "left";
     Direction9[Direction9["center"] = 8] = "center";
+    Direction9[Direction9["top-left"] = 0] = "top-left";
+    Direction9[Direction9["top-right"] = 2] = "top-right";
+    Direction9[Direction9["bottom-right"] = 4] = "bottom-right";
+    Direction9[Direction9["bottom-left"] = 6] = "bottom-left";
 })(exports.Direction9 || (exports.Direction9 = {}));
 
 const directionData = [
@@ -1204,6 +1205,7 @@ const directionData = [
     { x: 0, y: 0.5 },
     { x: 0.5, y: 0.5 }
 ];
+directionData.forEach(item => item.type = 'percent');
 const AroundHelper = {
     directionData,
     tempPoint: {},
@@ -1211,15 +1213,19 @@ const AroundHelper = {
     toPoint(around, bounds, to, onlySize, pointBounds) {
         to || (to = {});
         const point = get(around);
-        to.x = point.x * bounds.width;
-        to.y = point.y * bounds.height;
-        if (pointBounds) {
-            to.x -= pointBounds.x;
-            to.y -= pointBounds.y;
-            if (point.x)
-                to.x -= (point.x === 1) ? pointBounds.width : (point.x === 0.5 ? point.x * pointBounds.width : 0);
-            if (point.y)
-                to.y -= (point.y === 1) ? pointBounds.height : (point.y === 0.5 ? point.y * pointBounds.height : 0);
+        to.x = point.x;
+        to.y = point.y;
+        if (point.type === 'percent') {
+            to.x *= bounds.width;
+            to.y *= bounds.height;
+            if (pointBounds) {
+                to.x -= pointBounds.x;
+                to.y -= pointBounds.y;
+                if (point.x)
+                    to.x -= (point.x === 1) ? pointBounds.width : (point.x === 0.5 ? point.x * pointBounds.width : 0);
+                if (point.y)
+                    to.y -= (point.y === 1) ? pointBounds.height : (point.y === 0.5 ? point.y * pointBounds.height : 0);
+            }
         }
         if (!onlySize) {
             to.x += bounds.x;
@@ -1231,6 +1237,13 @@ function get(around) {
     return typeof around === 'string' ? directionData[exports.Direction9[around]] : around;
 }
 
+const { toPoint: toPoint$1 } = AroundHelper;
+const AlignHelper = {
+    toPoint(align, contentBounds, bounds, to, onlySize) {
+        toPoint$1(align, bounds, to, onlySize, contentBounds);
+    }
+};
+
 const StringNumberMap = {
     '0': 1,
     '1': 1,
@@ -1463,13 +1476,21 @@ const DataHelper = {
     },
     clone(data) {
         return JSON.parse(JSON.stringify(data));
+    },
+    toMap(list) {
+        const map = {};
+        for (let i = 0, len = list.length; i < len; i++)
+            map[list[i]] = true;
+        return map;
     }
 };
 const { assign } = DataHelper;
 
 class LeafData {
+    get __useNaturalRatio() { return true; }
+    get __isLinePath() { return this.path && this.path.length === 6; }
     get __blendMode() {
-        if (this.eraser)
+        if (this.eraser && this.eraser !== 'path')
             return 'destination-out';
         const { blendMode } = this;
         return blendMode === 'pass-through' ? null : blendMode;
@@ -1965,6 +1986,11 @@ class LeaferCanvasBase extends Canvas {
     }
     updateViewSize() { }
     updateClientBounds() { }
+    getClientBounds(update) {
+        if (update)
+            this.updateClientBounds();
+        return this.clientBounds || this.bounds;
+    }
     startAutoLayout(_autoBounds, _listener) { }
     stopAutoLayout() { }
     setCursor(_cursor) { }
@@ -2099,7 +2125,7 @@ class LeaferCanvasBase extends Canvas {
     }
     clear() {
         const { pixelRatio } = this;
-        this.clearRect(0, 0, this.width * pixelRatio, this.height * pixelRatio);
+        this.clearRect(0, 0, this.width * pixelRatio + 2, this.height * pixelRatio + 2);
     }
     isSameSize(size) {
         return this.width === size.width && this.height === size.height && this.pixelRatio === size.pixelRatio;
@@ -2513,11 +2539,15 @@ const PathConvert = {
             char = pathString[i];
             if (StringNumberMap[char]) {
                 if (char === '.') {
-                    current.dot++;
-                    if (current.dot > 1) {
+                    if (current.dot) {
                         pushData(data, num);
                         num = '';
                     }
+                    current.dot++;
+                }
+                if (num === '0' && char !== '.') {
+                    pushData(data, num);
+                    num = '';
                 }
                 num += char;
             }
@@ -3607,7 +3637,9 @@ class LeaferImage {
     }
 }
 
-function defineKey(target, key, descriptor) {
+function defineKey(target, key, descriptor, noConfigurable) {
+    if (!noConfigurable)
+        descriptor.configurable = descriptor.enumerable = true;
     Object.defineProperty(target, key, descriptor);
 }
 function getDescriptor(object, name) {
@@ -3626,9 +3658,7 @@ function attr(partDescriptor) {
 function defineLeafAttr(target, key, defaultValue, partDescriptor) {
     const defaultDescriptor = {
         get() { return this.__getAttr(key); },
-        set(value) { this.__setAttr(key, value); },
-        configurable: true,
-        enumerable: true
+        set(value) { this.__setAttr(key, value); }
     };
     defineKey(target, key, Object.assign(defaultDescriptor, partDescriptor || {}));
     defineDataProcessor(target, key, defaultValue);
@@ -3639,35 +3669,33 @@ function dataType(defaultValue) {
 function positionType(defaultValue, checkFiniteNumber) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value, checkFiniteNumber);
-            this.__layout.matrixChanged || this.__layout.matrixChange();
+            this.__setAttr(key, value, checkFiniteNumber) && (this.__layout.matrixChanged || this.__layout.matrixChange());
         }
     }));
 }
 function autoLayoutType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.__layout.matrixChanged || this.__layout.matrixChange();
-            this.__hasAutoLayout = !!value;
-            if (!this.__local)
-                this.__layout.createLocal();
+            if (this.__setAttr(key, value)) {
+                this.__layout.matrixChanged || this.__layout.matrixChange();
+                this.__hasAutoLayout = !!value;
+                if (!this.__local)
+                    this.__layout.createLocal();
+            }
         }
     }));
 }
 function scaleType(defaultValue, checkFiniteNumber) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value, checkFiniteNumber);
-            this.__layout.scaleChanged || this.__layout.scaleChange();
+            this.__setAttr(key, value, checkFiniteNumber) && (this.__layout.scaleChanged || this.__layout.scaleChange());
         }
     }));
 }
 function rotationType(defaultValue, checkFiniteNumber) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value, checkFiniteNumber);
-            this.__layout.rotationChanged || this.__layout.rotationChange();
+            this.__setAttr(key, value, checkFiniteNumber) && (this.__layout.rotationChanged || this.__layout.rotationChange());
         }
     }));
 }
@@ -3681,9 +3709,7 @@ function boundsType(defaultValue, checkFiniteNumber) {
 function naturalBoundsType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            doBoundsType(this);
-            this.__.__removeNaturalSize();
+            this.__setAttr(key, value) && (doBoundsType(this), this.__.__removeNaturalSize());
         }
     }));
 }
@@ -3695,8 +3721,11 @@ function doBoundsType(leaf) {
 function pathInputType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            if (this.__.__pathInputed !== 2)
-                this.__.__pathInputed = value ? 1 : 0;
+            const data = this.__;
+            if (data.__pathInputed !== 2)
+                data.__pathInputed = value ? 1 : 0;
+            if (!value)
+                data.__pathForRender = undefined;
             this.__setAttr(key, value);
             doBoundsType(this);
         }
@@ -3727,54 +3756,66 @@ function affectRenderBoundsType(defaultValue) {
 function surfaceType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.__layout.surfaceChanged || this.__layout.surfaceChange();
+            this.__setAttr(key, value) && (this.__layout.surfaceChanged || this.__layout.surfaceChange());
         }
     }));
 }
 function opacityType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.__layout.opacityChanged || this.__layout.opacityChange();
+            this.__setAttr(key, value) && (this.__layout.opacityChanged || this.__layout.opacityChange());
+        }
+    }));
+}
+function visibleType(defaultValue) {
+    return decorateLeafAttr(defaultValue, (key) => attr({
+        set(value) {
+            const oldValue = this.visible;
+            if (this.__setAttr(key, value)) {
+                this.__layout.opacityChanged || this.__layout.opacityChange();
+                if (oldValue === 0 || value === 0)
+                    doBoundsType(this);
+            }
         }
     }));
 }
 function sortType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.__layout.surfaceChanged || this.__layout.surfaceChange();
-            this.waitParent(() => { this.parent.__layout.childrenSortChange(); });
+            if (this.__setAttr(key, value)) {
+                this.__layout.surfaceChanged || this.__layout.surfaceChange();
+                this.waitParent(() => { this.parent.__layout.childrenSortChange(); });
+            }
         }
     }));
 }
 function maskType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.__layout.boxChanged || this.__layout.boxChange();
-            this.waitParent(() => { this.parent.__updateMask(value); });
+            if (this.__setAttr(key, value)) {
+                this.__layout.boxChanged || this.__layout.boxChange();
+                this.waitParent(() => { this.parent.__updateMask(value); });
+            }
         }
     }));
 }
 function eraserType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            this.waitParent(() => { this.parent.__updateEraser(value); });
+            this.__setAttr(key, value) && this.waitParent(() => { this.parent.__updateEraser(value); });
         }
     }));
 }
 function hitType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
-            this.__setAttr(key, value);
-            if (Debug.showHitView) {
-                this.__layout.surfaceChanged || this.__layout.surfaceChange();
+            if (this.__setAttr(key, value)) {
+                if (Debug.showHitView) {
+                    this.__layout.surfaceChanged || this.__layout.surfaceChange();
+                }
+                if (this.leafer)
+                    this.leafer.updateCursor();
             }
-            if (this.leafer)
-                this.leafer.updateCursor();
         }
     }));
 }
@@ -3815,9 +3856,7 @@ function defineDataProcessor(target, key, defaultValue) {
         },
         set(value) {
             this[computedKey] = value;
-        },
-        configurable: true,
-        enumerable: true
+        }
     };
     if (defaultValue === undefined) {
         property.get = function () { return this[computedKey]; };
@@ -3825,13 +3864,25 @@ function defineDataProcessor(target, key, defaultValue) {
     else if (key === 'width') {
         property.get = function () {
             const v = this[computedKey];
-            return v === undefined ? (this.__naturalWidth || defaultValue) : v;
+            if (v === undefined) {
+                const t = this;
+                return t._height && t.__naturalWidth && t.__useNaturalRatio ? t._height * t.__naturalWidth / t.__naturalHeight : t.__naturalWidth || defaultValue;
+            }
+            else {
+                return v;
+            }
         };
     }
     else if (key === 'height') {
         property.get = function () {
             const v = this[computedKey];
-            return v === undefined ? (this.__naturalHeight || defaultValue) : v;
+            if (v === undefined) {
+                const t = this;
+                return t._width && t.__naturalHeight && t.__useNaturalRatio ? t._width * t.__naturalHeight / t.__naturalWidth : t.__naturalHeight || defaultValue;
+            }
+            else {
+                return v;
+            }
         };
     }
     let descriptor, find = data;
@@ -3845,7 +3896,7 @@ function defineDataProcessor(target, key, defaultValue) {
         property.set = data[setMethodName];
         delete data[setMethodName];
     }
-    Object.defineProperty(data, key, property);
+    defineKey(data, key, property);
 }
 
 const debug$1 = new Debug('rewrite');
@@ -4046,13 +4097,6 @@ const LeafHelper = {
                 return true;
             p = p.parent;
         }
-    },
-    hasParentAutoLayout(p) {
-        while (p.parent) {
-            p = p.parent;
-            if (p.__hasAutoLayout)
-                return true;
-        }
     }
 };
 const L = LeafHelper;
@@ -4072,13 +4116,13 @@ const LeafBoundsHelper = {
         return target.__world;
     },
     localBoxBounds(target) {
-        return target.__.eraser ? null : (target.__local || target.__layout);
+        return target.__.eraser || target.__.visible === 0 ? null : (target.__local || target.__layout);
     },
     localStrokeBounds(target) {
-        return target.__.eraser ? null : target.__layout.localStrokeBounds;
+        return target.__.eraser || target.__.visible === 0 ? null : target.__layout.localStrokeBounds;
     },
     localRenderBounds(target) {
-        return target.__.eraser ? null : target.__layout.localRenderBounds;
+        return target.__.eraser || target.__.visible === 0 ? null : target.__layout.localRenderBounds;
     },
     maskLocalBoxBounds(target) {
         return target.__.mask ? target.__localBoxBounds : null;
@@ -4184,11 +4228,19 @@ const WaitHelper = {
 
 const { getRelativeWorld: getRelativeWorld$1 } = LeafHelper;
 const { toOuterOf: toOuterOf$2, getPoints, copy: copy$2 } = BoundsHelper;
+const localContent = '_localContentBounds';
+const worldContent = '_worldContentBounds', worldBox = '_worldBoxBounds', worldStroke = '_worldStrokeBounds';
 class LeafLayout {
+    get contentBounds() { return this._contentBounds || this.boxBounds; }
+    set contentBounds(bounds) { this._contentBounds = bounds; }
     get strokeBounds() { return this._strokeBounds || this.boxBounds; }
     get renderBounds() { return this._renderBounds || this.boxBounds; }
+    get localContentBounds() { toOuterOf$2(this.contentBounds, this.leaf.__localMatrix, this[localContent] || (this[localContent] = {})); return this[localContent]; }
     get localStrokeBounds() { return this._localStrokeBounds || this; }
     get localRenderBounds() { return this._localRenderBounds || this; }
+    get worldContentBounds() { toOuterOf$2(this.contentBounds, this.leaf.__world, this[worldContent] || (this[worldContent] = {})); return this[worldContent]; }
+    get worldBoxBounds() { toOuterOf$2(this.boxBounds, this.leaf.__world, this[worldBox] || (this[worldBox] = {})); return this[worldBox]; }
+    get worldStrokeBounds() { toOuterOf$2(this.strokeBounds, this.leaf.__world, this[worldStroke] || (this[worldStroke] = {})); return this[worldStroke]; }
     get a() { return 1; }
     get b() { return 0; }
     get c() { return 0; }
@@ -4271,7 +4323,6 @@ class LeafLayout {
             case 'content':
                 if (this.contentBounds)
                     return this.contentBounds;
-            case 'margin':
             case 'box':
                 return this.boxBounds;
             case 'stroke':
@@ -4284,8 +4335,9 @@ class LeafLayout {
                 return this.localRenderBounds;
             case 'stroke':
                 return this.localStrokeBounds;
-            case 'margin':
             case 'content':
+                if (this.contentBounds)
+                    return this.localContentBounds;
             case 'box':
                 return this.leaf.__localBoxBounds;
         }
@@ -4294,15 +4346,13 @@ class LeafLayout {
         switch (type) {
             case 'render':
                 return this.leaf.__world;
+            case 'stroke':
+                return this.worldStrokeBounds;
             case 'content':
                 if (this.contentBounds)
-                    return this.getWorldContentBounds();
-            case 'margin':
+                    return this.worldContentBounds;
             case 'box':
-                return this.getWorldBoxBounds();
-            case 'margin':
-            case 'stroke':
-                return this.getWorldStrokeBounds();
+                return this.worldBoxBounds;
         }
     }
     getLayoutBounds(type, relative = 'world', unscale) {
@@ -4365,20 +4415,24 @@ class LeafLayout {
             points.forEach(point => leaf.innerToWorld(point, null, false, relativeLeaf));
         return points;
     }
-    getWorldContentBounds() {
-        this._worldContentBounds || (this._worldContentBounds = {});
-        toOuterOf$2(this.contentBounds, this.leaf.__world, this._worldContentBounds);
-        return this._worldContentBounds;
+    shrinkContent() {
+        const { x, y, width, height } = this.boxBounds;
+        this._contentBounds = { x, y, width, height };
+    }
+    spreadStroke() {
+        const { x, y, width, height } = this.strokeBounds;
+        this._strokeBounds = { x, y, width, height };
+        this._localStrokeBounds = { x, y, width, height };
+        if (!this.renderSpread)
+            this.spreadRenderCancel();
     }
-    getWorldBoxBounds() {
-        this._worldBoxBounds || (this._worldBoxBounds = {});
-        toOuterOf$2(this.boxBounds, this.leaf.__world, this._worldBoxBounds);
-        return this._worldBoxBounds;
+    spreadRender() {
+        const { x, y, width, height } = this.renderBounds;
+        this._renderBounds = { x, y, width, height };
+        this._localRenderBounds = { x, y, width, height };
     }
-    getWorldStrokeBounds() {
-        this._worldStrokeBounds || (this._worldStrokeBounds = {});
-        toOuterOf$2(this.strokeBounds, this.leaf.__world, this._worldStrokeBounds);
-        return this._worldStrokeBounds;
+    shrinkContentCancel() {
+        this._contentBounds = undefined;
     }
     spreadStrokeCancel() {
         const same = this.renderBounds === this.strokeBounds;
@@ -4391,18 +4445,6 @@ class LeafLayout {
         this._renderBounds = this._strokeBounds;
         this._localRenderBounds = this._localStrokeBounds;
     }
-    spreadStroke() {
-        const { x, y, width, height } = this.strokeBounds;
-        this._strokeBounds = { x, y, width, height };
-        this._localStrokeBounds = { x, y, width, height };
-        if (!this.renderSpread)
-            this.spreadRenderCancel();
-    }
-    spreadRender() {
-        const { x, y, width, height } = this.renderBounds;
-        this._renderBounds = { x, y, width, height };
-        this._localRenderBounds = { x, y, width, height };
-    }
     boxChange() {
         this.boxChanged = true;
         this.localBoxChanged || this.localBoxChange();
@@ -4489,24 +4531,40 @@ const LeafEventer = {
         });
     },
     off(type, listener, options) {
-        let capture;
-        if (options)
-            capture = typeof options === 'boolean' ? options : options.capture;
-        let events, index;
-        const map = __getListenerMap(this, capture);
-        const typeList = typeof type === 'string' ? type.split(' ') : type;
-        typeList.forEach(type => {
-            if (type) {
-                events = map[type];
-                if (events) {
-                    index = events.findIndex(item => item.listener === listener);
-                    if (index > -1)
-                        events.splice(index, 1);
-                    if (!events.length)
-                        delete map[type];
-                }
+        if (type) {
+            const typeList = typeof type === 'string' ? type.split(' ') : type;
+            if (listener) {
+                let capture;
+                if (options)
+                    capture = typeof options === 'boolean' ? options : options.capture;
+                let events, index;
+                const map = __getListenerMap(this, capture);
+                typeList.forEach(type => {
+                    if (type) {
+                        events = map[type];
+                        if (events) {
+                            index = events.findIndex(item => item.listener === listener);
+                            if (index > -1)
+                                events.splice(index, 1);
+                            if (!events.length)
+                                delete map[type];
+                        }
+                    }
+                });
             }
-        });
+            else {
+                const { __bubbleMap: b, __captureMap: c } = this;
+                typeList.forEach(type => {
+                    if (b)
+                        delete b[type];
+                    if (c)
+                        delete c[type];
+                });
+            }
+        }
+        else {
+            this.__bubbleMap = this.__captureMap = undefined;
+        }
     },
     on_(type, listener, bind, options) {
         if (bind)
@@ -4773,7 +4831,7 @@ const { setLayout, multiplyParent: multiplyParent$1, translateInner, defaultWorl
 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.__);
+        multiplyParent$1(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__, this.parent && this.parent.__);
     },
     __updateLocalMatrix() {
         if (this.__local) {
@@ -4784,18 +4842,18 @@ const LeafMatrix = {
                     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);
+            local.e = data.x + data.offsetX;
+            local.f = data.y + data.offsetY;
+            if (data.around || data.origin) {
+                toPoint(data.around || data.origin, layout.boxBounds, tempPoint);
+                translateInner(local, -tempPoint.x, -tempPoint.y, data.origin);
             }
         }
         this.__layout.matrixChanged = false;
     }
 };
 
-const { updateMatrix, updateAllMatrix, hasParentAutoLayout } = LeafHelper;
+const { updateMatrix, updateAllMatrix } = LeafHelper;
 const { updateBounds } = BranchHelper;
 const { toOuterOf: toOuterOf$1, copyAndSpread, copy: copy$1 } = BoundsHelper;
 const { toBounds } = PathBounds;
@@ -4814,7 +4872,6 @@ const LeafBounds = {
                 this.__updatePath();
             this.__updateRenderPath();
             this.__updateBoxBounds();
-            layout.boxChanged = false;
             layout.resized = true;
         }
         if (layout.localBoxChanged) {
@@ -4828,12 +4885,12 @@ const LeafBounds = {
             if (this.parent)
                 this.parent.__layout.boxChange();
         }
+        layout.boxChanged = false;
         if (layout.strokeChanged) {
             layout.strokeSpread = this.__updateStrokeSpread();
             if (layout.strokeSpread) {
-                if (layout.strokeBounds === layout.boxBounds) {
+                if (layout.strokeBounds === layout.boxBounds)
                     layout.spreadStroke();
-                }
                 this.__updateStrokeBounds();
                 this.__updateLocalStrokeBounds();
             }
@@ -4841,7 +4898,7 @@ const LeafBounds = {
                 layout.spreadStrokeCancel();
             }
             layout.strokeChanged = false;
-            if (layout.renderSpread)
+            if (layout.renderSpread || layout.strokeSpread !== layout.strokeBoxSpread)
                 layout.renderChanged = true;
             if (this.parent)
                 this.parent.__layout.strokeChange();
@@ -4850,9 +4907,8 @@ const LeafBounds = {
         if (layout.renderChanged) {
             layout.renderSpread = this.__updateRenderSpread();
             if (layout.renderSpread) {
-                if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.strokeBounds) {
+                if (layout.renderBounds === layout.boxBounds || layout.renderBounds === layout.strokeBounds)
                     layout.spreadRender();
-                }
                 this.__updateRenderBounds();
                 this.__updateLocalRenderBounds();
             }
@@ -4892,10 +4948,15 @@ const LeafBounds = {
     __updateAutoLayout() {
         this.__layout.matrixChanged = true;
         if (this.isBranch) {
-            if (this.leafer)
+            if (this.leafer && this.leafer.ready)
                 this.leafer.layouter.addExtra(this);
-            if (hasParentAutoLayout(this)) {
-                updateMatrix(this);
+            if (this.__.flow) {
+                if (this.__layout.boxChanged)
+                    this.__updateFlowLayout();
+                updateAllMatrix(this);
+                updateBounds(this, this);
+                if (this.__.__autoSide)
+                    this.__updateBoxBounds();
             }
             else {
                 updateAllMatrix(this);
@@ -4912,12 +4973,13 @@ const LeafBounds = {
         data.__naturalHeight = layout.boxBounds.height;
     },
     __updateStrokeBounds() {
-        copyAndSpread(this.__layout.strokeBounds, this.__layout.boxBounds, this.__layout.strokeSpread);
+        const layout = this.__layout;
+        copyAndSpread(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
     },
     __updateRenderBounds() {
-        const { renderSpread, strokeBounds, renderBounds } = this.__layout;
-        renderSpread > 0 ? copyAndSpread(renderBounds, strokeBounds, renderSpread) : copy$1(renderBounds, strokeBounds);
-    },
+        const layout = this.__layout;
+        layout.renderSpread > 0 ? copyAndSpread(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$1(layout.renderBounds, layout.strokeBounds);
+    }
 };
 
 const LeafRender = {
@@ -4926,6 +4988,8 @@ const LeafRender = {
             canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
             canvas.opacity = this.__.opacity;
             if (this.__.__single) {
+                if (this.__.eraser === 'path')
+                    return this.__renderEraser(canvas, options);
                 const tempCanvas = canvas.getSameCanvas(true, true);
                 this.__draw(tempCanvas, options);
                 if (this.__worldFlipped) {
@@ -4968,6 +5032,8 @@ const BranchRender = {
     __render(canvas, options) {
         if (this.__worldOpacity) {
             if (this.__.__single) {
+                if (this.__.eraser === 'path')
+                    return this.__renderEraser(canvas, options);
                 const tempCanvas = canvas.getSameCanvas(false, true);
                 this.__renderBranch(tempCanvas, options);
                 const nowWorld = this.__getNowWorld(options);
@@ -5033,7 +5099,7 @@ exports.Leaf = class Leaf {
     get __worldFlipped() { return this.__world.scaleX < 0 || this.__world.scaleY < 0; }
     get __onlyHitMask() { return this.__hasMask && !this.__.hitChildren; }
     get __ignoreHitWorld() { return (this.__hasMask || this.__hasEraser) && this.__.hitChildren; }
-    get pathInputed() { return !!this.__.__pathInputed; }
+    get pathInputed() { return this.__.__pathInputed; }
     constructor(data) {
         this.innerId = create(LEAF);
         this.reset(data);
@@ -5107,7 +5173,9 @@ exports.Leaf = class Leaf {
     setProxyAttr(_attrName, _newValue) { }
     getProxyAttr(_attrName) { return undefined; }
     find(_condition, _options) { return undefined; }
+    findTag(_tag) { return undefined; }
     findOne(_condition, _options) { return undefined; }
+    findId(_id) { return undefined; }
     focus(_value) { }
     forceUpdate(attrName) {
         if (attrName === undefined)
@@ -5129,9 +5197,11 @@ exports.Leaf = class Leaf {
     __updateLocalStrokeBounds() { }
     __updateLocalRenderBounds() { }
     __updateBoxBounds() { }
+    __updateContentBounds() { }
     __updateStrokeBounds() { }
     __updateRenderBounds() { }
     __updateAutoLayout() { }
+    __updateFlowLayout() { }
     __updateNaturalSize() { }
     __updateStrokeSpread() { return 0; }
     __updateRenderSpread() { return 0; }
@@ -5139,6 +5209,13 @@ exports.Leaf = class Leaf {
     __updateEraser(value) {
         this.__hasEraser = value ? true : this.children.some(item => item.__.eraser);
     }
+    __renderEraser(canvas, options) {
+        canvas.save();
+        this.__clip(canvas, options);
+        const { renderBounds: r } = this.__layout;
+        canvas.clearRect(r.x, r.y, r.width, r.height);
+        canvas.restore();
+    }
     __updateMask(value) {
         this.__hasMask = value ? true : this.children.some(item => item.__.mask);
     }
@@ -5319,8 +5396,8 @@ exports.Leaf = class Leaf {
     emit(_type, _event, _capture) { }
     emitEvent(_event, _capture) { }
     hasEvent(_type, _capture) { return false; }
-    static changeAttr(attrName, defaultValue) {
-        defineDataProcessor(this.prototype, attrName, defaultValue);
+    static changeAttr(attrName, defaultValue, fn) {
+        fn ? this.addAttr(attrName, defaultValue, fn) : defineDataProcessor(this.prototype, attrName, defaultValue);
     }
     static addAttr(attrName, defaultValue, fn) {
         if (!fn)
@@ -5634,6 +5711,10 @@ class LeafLevelList {
     }
 }
 
+const version = "1.0.0-rc.24";
+const inviteCode = {};
+
+exports.AlignHelper = AlignHelper;
 exports.AnimateEvent = AnimateEvent;
 exports.AroundHelper = AroundHelper;
 exports.AutoBounds = AutoBounds;
@@ -5724,6 +5805,7 @@ exports.getDescriptor = getDescriptor;
 exports.getMatrixData = getMatrixData;
 exports.getPointData = getPointData;
 exports.hitType = hitType;
+exports.inviteCode = inviteCode;
 exports.layoutProcessor = layoutProcessor;
 exports.maskType = maskType;
 exports.naturalBoundsType = naturalBoundsType;
@@ -5745,3 +5827,5 @@ exports.tempBounds = tempBounds;
 exports.tempMatrix = tempMatrix;
 exports.tempPoint = tempPoint$2;
 exports.useModule = useModule;
+exports.version = version;
+exports.visibleType = visibleType;