leafer-ui 1.0.0-rc.21 → 1.0.0-rc.23

package/dist/web.module.js

@@ -3,7 +3,7 @@ const Platform = {
         hitCanvasSize: 100,
         maxCacheSize: 2560 * 1600,
         maxPatternSize: 4096 * 2160,
-        suffix: 'leaf',
+        suffix: '',
         crossOrigin: 'anonymous'
     }
 };
@@ -33,24 +33,12 @@ const I$2 = IncrementId;
 const { round, pow: pow$1, PI: PI$4 } = 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) {
@@ -117,7 +105,7 @@ function getMatrixData() { return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }; }
 
 const { sin: sin$5, cos: cos$5, acos, sqrt: sqrt$3 } = Math;
 const { float: float$1 } = MathHelper;
-const tempPoint$3 = {};
+const tempPoint$4 = {};
 function getWorld() {
     return Object.assign(Object.assign(Object.assign({}, getMatrixData()), getBoundsData()), { scaleX: 1, scaleY: 1, rotation: 0, skewX: 0, skewY: 0 });
 }
@@ -147,9 +135,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;
@@ -158,8 +148,8 @@ const MatrixHelper = {
         t.d *= scaleY;
     },
     scaleOfOuter(t, origin, scaleX, scaleY) {
-        M$6.toInnerPoint(t, origin, tempPoint$3);
-        M$6.scaleOfInner(t, tempPoint$3, scaleX, scaleY);
+        M$6.toInnerPoint(t, origin, tempPoint$4);
+        M$6.scaleOfInner(t, tempPoint$4, scaleX, scaleY);
     },
     scaleOfInner(t, origin, scaleX, scaleY = scaleX) {
         M$6.translateInner(t, origin.x, origin.y);
@@ -177,8 +167,8 @@ const MatrixHelper = {
         t.d = c * sinR + d * cosR;
     },
     rotateOfOuter(t, origin, rotation) {
-        M$6.toInnerPoint(t, origin, tempPoint$3);
-        M$6.rotateOfInner(t, tempPoint$3, rotation);
+        M$6.toInnerPoint(t, origin, tempPoint$4);
+        M$6.rotateOfInner(t, tempPoint$4, rotation);
     },
     rotateOfInner(t, origin, rotation) {
         M$6.translateInner(t, origin.x, origin.y);
@@ -199,8 +189,8 @@ const MatrixHelper = {
         }
     },
     skewOfOuter(t, origin, skewX, skewY) {
-        M$6.toInnerPoint(t, origin, tempPoint$3);
-        M$6.skewOfInner(t, tempPoint$3, skewX, skewY);
+        M$6.toInnerPoint(t, origin, tempPoint$4);
+        M$6.skewOfInner(t, tempPoint$4, skewX, skewY);
     },
     skewOfInner(t, origin, skewX, skewY = 0) {
         M$6.translateInner(t, origin.x, origin.y);
@@ -216,8 +206,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;
@@ -338,7 +330,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;
@@ -594,7 +586,7 @@ class Point {
         return this;
     }
 }
-const tempPoint$2 = new Point();
+const tempPoint$3 = new Point();
 
 class Matrix {
     constructor(a, b, c, d, e, f) {
@@ -758,7 +750,7 @@ const { float, fourNumber } = MathHelper;
 const { floor, ceil: ceil$2 } = Math;
 let right$1, bottom$1, boundsRight, boundsBottom;
 const point = {};
-const toPoint$1 = {};
+const toPoint$2 = {};
 const BoundsHelper = {
     tempBounds: {},
     set(t, x = 0, y = 0, width = 0, height = 0) {
@@ -773,15 +765,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; },
@@ -858,17 +852,17 @@ const BoundsHelper = {
         else {
             point.x = t.x;
             point.y = t.y;
-            toOuterPoint$1(matrix, point, toPoint$1);
-            setPoint$3(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+            toOuterPoint$1(matrix, point, toPoint$2);
+            setPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
             point.x = t.x + t.width;
-            toOuterPoint$1(matrix, point, toPoint$1);
-            addPoint$3(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+            toOuterPoint$1(matrix, point, toPoint$2);
+            addPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
             point.y = t.y + t.height;
-            toOuterPoint$1(matrix, point, toPoint$1);
-            addPoint$3(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+            toOuterPoint$1(matrix, point, toPoint$2);
+            addPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
             point.x = t.x;
-            toOuterPoint$1(matrix, point, toPoint$1);
-            addPoint$3(tempPointBounds$1, toPoint$1.x, toPoint$1.y);
+            toOuterPoint$1(matrix, point, toPoint$2);
+            addPoint$3(tempPointBounds$1, toPoint$2.x, toPoint$2.y);
             toBounds$4(tempPointBounds$1, to);
         }
     },
@@ -881,13 +875,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;
@@ -1067,12 +1064,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() {
@@ -1189,6 +1186,10 @@ var Direction9;
     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";
 })(Direction9 || (Direction9 = {}));
 
 const directionData = [
@@ -1202,15 +1203,28 @@ const directionData = [
     { x: 0, y: 0.5 },
     { x: 0.5, y: 0.5 }
 ];
+directionData.forEach(item => item.type = 'percent');
 const AroundHelper = {
     directionData,
     tempPoint: {},
     get: get$5,
-    toPoint(around, bounds, to, onlySize) {
+    toPoint(around, bounds, to, onlySize, pointBounds) {
         to || (to = {});
         const point = get$5(around);
-        to.x = point.x * bounds.width;
-        to.y = point.y * bounds.height;
+        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;
             to.y += bounds.y;
@@ -1221,6 +1235,13 @@ function get$5(around) {
     return typeof around === 'string' ? directionData[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,
@@ -1453,13 +1474,19 @@ 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 __blendMode() {
-        if (this.eraser)
+        if (this.eraser && this.eraser !== 'path')
             return 'destination-out';
         const { blendMode } = this;
         return blendMode === 'pass-through' ? null : blendMode;
@@ -2089,7 +2116,7 @@ class LeaferCanvasBase extends Canvas$1 {
     }
     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;
@@ -2208,7 +2235,7 @@ const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$3, PI: PI
 const { setPoint: setPoint$2, addPoint: addPoint$2 } = TwoPointBoundsHelper;
 const { set: set$2 } = PointHelper;
 const { M: M$5, L: L$6, C: C$5, Q: Q$4, Z: Z$5 } = PathCommandMap;
-const tempPoint$1 = {};
+const tempPoint$2 = {};
 const BezierHelper = {
     points(data, points, curve, close) {
         data.push(M$5, points[0], points[1]);
@@ -2398,8 +2425,8 @@ const BezierHelper = {
         addMode ? addPoint$2(pointBounds, fromX, fromY) : setPoint$2(pointBounds, fromX, fromY);
         addPoint$2(pointBounds, toX, toY);
         for (let i = 0, len = tList.length; i < len; i++) {
-            getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$1);
-            addPoint$2(pointBounds, tempPoint$1.x, tempPoint$1.y);
+            getPointAndSet(tList[i], fromX, fromY, x1, y1, x2, y2, toX, toY, tempPoint$2);
+            addPoint$2(pointBounds, tempPoint$2.x, tempPoint$2.y);
         }
     },
     getPointAndSet(t, fromX, fromY, x1, y1, x2, y2, toX, toY, setPoint) {
@@ -2469,7 +2496,7 @@ const EllipseHelper = {
 };
 
 const { M: M$4, m, L: L$5, l, H, h, V, v, C: C$4, c, S, s, Q: Q$3, q, T, t, A, a, Z: Z$4, z, N: N$3, D: D$3, X: X$3, G: G$3, F: F$4, O: O$3, P: P$3, U: U$3 } = PathCommandMap;
-const { rect: rect$2, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
+const { rect: rect$3, roundRect: roundRect$2, arcTo: arcTo$3, arc: arc$3, ellipse: ellipse$4, quadraticCurveTo: quadraticCurveTo$1 } = BezierHelper;
 const { ellipticalArc } = EllipseHelper;
 const debug$d = Debug.get('PathConvert');
 const setEndPoint$1 = {};
@@ -2662,7 +2689,7 @@ const PathConvert = {
                 case N$3:
                     x = old[i + 1];
                     y = old[i + 2];
-                    curveMode ? rect$2(data, x, y, old[i + 3], old[i + 4]) : copyData(data, old, i, 5);
+                    curveMode ? rect$3(data, x, y, old[i + 3], old[i + 4]) : copyData(data, old, i, 5);
                     i += 5;
                     break;
                 case D$3:
@@ -2819,7 +2846,7 @@ const PathCommandDataHelper = {
 };
 const { ellipse: ellipse$3, arc: arc$2 } = PathCommandDataHelper;
 
-const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$1, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
+const { moveTo: moveTo$4, lineTo: lineTo$3, quadraticCurveTo, bezierCurveTo, closePath: closePath$3, beginPath, rect: rect$2, roundRect: roundRect$1, ellipse: ellipse$2, arc: arc$1, arcTo: arcTo$2, drawEllipse, drawArc, drawPoints: drawPoints$2 } = PathCommandDataHelper;
 class PathCreator {
     set path(value) { this.__path = value; }
     get path() { return this.__path; }
@@ -2861,7 +2888,7 @@ class PathCreator {
         return this;
     }
     rect(x, y, width, height) {
-        rect$1(this.__path, x, y, width, height);
+        rect$2(this.__path, x, y, width, height);
         return this;
     }
     roundRect(x, y, width, height, cornerRadius) {
@@ -3745,6 +3772,8 @@ function maskType(defaultValue) {
             this.__setAttr(key, value);
             this.__layout.boxChanged || this.__layout.boxChange();
             this.waitParent(() => { this.parent.__updateMask(value); });
+            if (typeof value === 'string')
+                this.maskType = value;
         }
     }));
 }
@@ -3956,15 +3985,21 @@ const LeafHelper = {
         }
         return true;
     },
-    moveWorld(t, x, y) {
-        const local = { x, y };
+    moveWorld(t, x, y = 0) {
+        const local = typeof x === 'object' ? Object.assign({}, x) : { 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;
+        if (typeof x === 'object') {
+            t.x += x.x;
+            t.y += x.y;
+        }
+        else {
+            t.x += x;
+            t.y += y;
+        }
     },
     zoomOfWorld(t, origin, scaleX, scaleY, resize) {
         L.zoomOfLocal(t, getTempLocal(t, origin), scaleX, scaleY, resize);
@@ -4168,11 +4203,19 @@ const WaitHelper = {
 
 const { getRelativeWorld: getRelativeWorld$1 } = LeafHelper;
 const { toOuterOf: toOuterOf$2, getPoints, copy: copy$6 } = 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; }
@@ -4255,7 +4298,6 @@ class LeafLayout {
             case 'content':
                 if (this.contentBounds)
                     return this.contentBounds;
-            case 'margin':
             case 'box':
                 return this.boxBounds;
             case 'stroke':
@@ -4268,8 +4310,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;
         }
@@ -4278,15 +4321,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) {
@@ -4349,20 +4390,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;
@@ -4375,18 +4420,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();
@@ -4473,24 +4506,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)
@@ -4526,12 +4575,15 @@ const LeafEventer = {
                     break;
             }
         }
+        this.syncEventer && this.syncEventer.emitEvent(event, capture);
     },
     emitEvent(event, capture) {
         event.current = this;
         this.emit(event.type, event, capture);
     },
     hasEvent(type, capture) {
+        if (this.syncEventer && this.syncEventer.hasEvent(type, capture))
+            return true;
         const { __bubbleMap: b, __captureMap: c } = this;
         const hasB = b && b[type], hasC = c && c[type];
         return !!(capture === undefined ? (hasB || hasC) : (capture ? hasC : hasB));
@@ -4751,10 +4803,10 @@ const LeafDataProxy = {
 };
 
 const { setLayout, multiplyParent: multiplyParent$1, translateInner, defaultWorld } = MatrixHelper;
-const { toPoint, tempPoint } = AroundHelper;
+const { toPoint, tempPoint: tempPoint$1 } = 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) {
@@ -4765,11 +4817,11 @@ 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$1);
+                translateInner(local, -tempPoint$1.x, -tempPoint$1.y, data.origin);
             }
         }
         this.__layout.matrixChanged = false;
@@ -4875,6 +4927,8 @@ const LeafBounds = {
         if (this.isBranch) {
             if (this.leafer)
                 this.leafer.layouter.addExtra(this);
+            if (this.__.flow)
+                this.__updateFlowLayout();
             if (hasParentAutoLayout(this)) {
                 updateMatrix$1(this);
             }
@@ -4907,6 +4961,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) {
@@ -4949,6 +5005,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);
@@ -5088,7 +5146,9 @@ let 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)
@@ -5110,9 +5170,11 @@ let Leaf = class Leaf {
     __updateLocalStrokeBounds() { }
     __updateLocalRenderBounds() { }
     __updateBoxBounds() { }
+    __updateContentBounds() { }
     __updateStrokeBounds() { }
     __updateRenderBounds() { }
     __updateAutoLayout() { }
+    __updateFlowLayout() { }
     __updateNaturalSize() { }
     __updateStrokeSpread() { return 0; }
     __updateRenderSpread() { return 0; }
@@ -5120,6 +5182,13 @@ let 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);
     }
@@ -5300,8 +5369,8 @@ let 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)
@@ -5798,7 +5867,7 @@ function useCanvas(_canvasType, _power) {
                 }
                 img.onload = () => { resolve(img); };
                 img.onerror = (e) => { reject(e); };
-                if (!src.startsWith('data:') && !src.startsWith('blob:') && suffix)
+                if (suffix && !src.startsWith('data:') && !src.startsWith('blob:'))
                     src += (src.includes("?") ? "&" : "?") + suffix;
                 img.src = src;
             });
@@ -6360,8 +6429,11 @@ class Renderer {
             if (!bounds.includes(this.target.__world) || this.needFill || !e.samePixelRatio) {
                 this.addBlock(this.canvas.bounds);
                 this.target.forceUpdate('surface');
+                return;
             }
         }
+        this.addBlock(new Bounds(0, 0, 1, 1));
+        this.changed = true;
     }
     __onLayoutEnd(event) {
         if (event.data)
@@ -6420,32 +6492,38 @@ class Picker {
         const target = options.target || this.target;
         this.exclude = options.exclude || null;
         this.point = { x: hitPoint.x, y: hitPoint.y, radiusX: hitRadius, radiusY: hitRadius };
-        this.findList = options.findList || [];
+        this.findList = new LeafList(options.findList);
         if (!options.findList)
-            this.eachFind(target.children, target.__onlyHitMask);
-        const list = this.findList;
-        const leaf = this.getBestMatchLeaf();
+            this.hitBranch(target);
+        const { list } = this.findList;
+        const leaf = this.getBestMatchLeaf(list, options.bottomList, ignoreHittable);
         const path = ignoreHittable ? this.getPath(leaf) : this.getHitablePath(leaf);
         this.clear();
         return through ? { path, target: leaf, throughPath: list.length ? this.getThroughPath(list) : path } : { path, target: leaf };
     }
-    getBestMatchLeaf() {
-        const { findList: targets } = this;
-        if (targets.length > 1) {
+    getBestMatchLeaf(list, bottomList, ignoreHittable) {
+        if (list.length) {
             let find;
-            this.findList = [];
+            this.findList = new LeafList();
             const { x, y } = this.point;
             const point = { x, y, radiusX: 0, radiusY: 0 };
-            for (let i = 0, len = targets.length; i < len; i++) {
-                find = targets[i];
-                if (LeafHelper.worldHittable(find)) {
+            for (let i = 0, len = list.length; i < len; i++) {
+                find = list[i];
+                if (ignoreHittable || LeafHelper.worldHittable(find)) {
                     this.hitChild(find, point);
                     if (this.findList.length)
-                        return this.findList[0];
+                        return this.findList.list[0];
                 }
             }
         }
-        return targets[0];
+        if (bottomList) {
+            for (let i = 0, len = bottomList.length; i < len; i++) {
+                this.hitChild(bottomList[i].target, this.point, bottomList[i].proxy);
+                if (this.findList.length)
+                    return this.findList.list[0];
+            }
+        }
+        return list[0];
     }
     getPath(leaf) {
         const path = new LeafList();
@@ -6487,6 +6565,9 @@ class Picker {
         }
         return throughPath;
     }
+    hitBranch(branch) {
+        this.eachFind(branch.children, branch.__onlyHitMask);
+    }
     eachFind(children, hitMask) {
         let child, hit;
         const { point } = this, len = children.length;
@@ -6508,11 +6589,11 @@ class Picker {
             }
         }
     }
-    hitChild(child, point) {
+    hitChild(child, point, proxy) {
         if (this.exclude && this.exclude.has(child))
             return;
         if (child.__hitWorld(point))
-            this.findList.push(child);
+            this.findList.add(proxy || child);
     }
     clear() {
         this.point = null;
@@ -6525,6 +6606,7 @@ class Picker {
 }
 
 const { Yes, NoAndSkip, YesAndSkip } = Answer;
+const idCondition = {}, classNameCondition = {}, tagCondition = {};
 class Selector {
     constructor(target, userConfig) {
         this.config = {};
@@ -6534,7 +6616,8 @@ class Selector {
             id: (leaf, name) => leaf.id === name ? (this.idMap[name] = leaf, 1) : 0,
             innerId: (leaf, innerId) => leaf.innerId === innerId ? (this.innerIdMap[innerId] = leaf, 1) : 0,
             className: (leaf, name) => leaf.className === name ? 1 : 0,
-            tag: (leaf, name) => leaf.__tag === name ? 1 : 0
+            tag: (leaf, name) => leaf.__tag === name ? 1 : 0,
+            tags: (leaf, nameMap) => nameMap[leaf.__tag] ? 1 : 0
         };
         this.target = target;
         if (userConfig)
@@ -6550,12 +6633,25 @@ class Selector {
             case 'string':
                 switch (condition[0]) {
                     case '#':
-                        const leaf = this.getById(condition.substring(1), branch);
-                        return one ? leaf : (leaf ? [leaf] : []);
+                        idCondition.id = condition.substring(1), condition = idCondition;
+                        break;
                     case '.':
-                        return this.getByMethod(this.methods.className, branch, one, condition.substring(1));
+                        classNameCondition.className = condition.substring(1), condition = classNameCondition;
+                        break;
                     default:
-                        return this.getByMethod(this.methods.tag, branch, one, condition);
+                        tagCondition.tag = condition, condition = tagCondition;
+                }
+            case 'object':
+                if (condition.id !== undefined) {
+                    const leaf = this.getById(condition.id, branch);
+                    return one ? leaf : (leaf ? [leaf] : []);
+                }
+                else if (condition.tag) {
+                    const { tag } = condition, isArray = tag instanceof Array;
+                    return this.getByMethod(isArray ? this.methods.tags : this.methods.tag, branch, one, isArray ? DataHelper.toMap(tag) : tag);
+                }
+                else {
+                    return this.getByMethod(this.methods.className, branch, one, condition.className);
                 }
             case 'function':
                 return this.getByMethod(condition, branch, one, options);
@@ -6710,7 +6806,11 @@ function zoomLayerType() {
         defineKey(target, key, {
             set(value) { if (this.isLeafer)
                 this[privateKey] = value; },
-            get() { return this.isLeafer ? (this[privateKey] || this) : this.leafer && this.leafer.zoomLayer; }
+            get() {
+                return this.isApp
+                    ? this.tree.zoomLayer
+                    : (this.isLeafer ? (this[privateKey] || this) : this.leafer && this.leafer.zoomLayer);
+            }
         });
     };
 }
@@ -6850,7 +6950,7 @@ class UIData extends LeafData {
 const UnitConvert = {
     number(value, percentRefer) {
         if (typeof value === 'object')
-            return value.type === 'percent' ? value.value / 100 * percentRefer : value.value;
+            return value.type === 'percent' ? (value.value > 49 ? value.value / 100 : value.value) * percentRefer : value.value;
         return value;
     }
 };
@@ -7116,6 +7216,9 @@ let UI = UI_1 = class UI extends Leaf {
         pen.set(this.path = this.__.path || []);
         return pen;
     }
+    get editConfig() { return undefined; }
+    get editOuter() { return 'EditTool'; }
+    get editInner() { return 'PathEditor'; }
     constructor(data) {
         super(data);
     }
@@ -7128,7 +7231,9 @@ let UI = UI_1 = class UI extends Leaf {
     }
     createProxyData() { return undefined; }
     find(_condition, _options) { return undefined; }
+    findTag(tag) { return this.find({ tag }); }
     findOne(_condition, _options) { return undefined; }
+    findId(id) { return this.findOne({ id }); }
     getPath(curve, pathForRender) {
         this.__layout.update();
         let path = pathForRender ? this.__.__pathForRender : this.__.path;
@@ -7177,7 +7282,8 @@ let UI = UI_1 = class UI extends Leaf {
     __drawPathByBox(drawer) {
         const { x, y, width, height } = this.__layout.boxBounds;
         if (this.__.cornerRadius) {
-            drawer.roundRect(x, y, width, height, this.__.cornerRadius);
+            const { cornerRadius } = this.__;
+            drawer.roundRect(x, y, width, height, typeof cornerRadius === 'number' ? [cornerRadius] : cornerRadius);
         }
         else {
             drawer.rect(x, y, width, height);
@@ -7198,6 +7304,9 @@ let UI = UI_1 = class UI extends Leaf {
     static registerData(data) {
         dataProcessor(data)(this.prototype);
     }
+    static setEditConfig(_config) { }
+    static setEditOuter(_toolName) { }
+    static setEditInner(_editorName) { }
     destroy() {
         this.fill = this.stroke = null;
         super.destroy();
@@ -7275,21 +7384,84 @@ __decorate([
 __decorate([
     rotationType(0, true)
 ], UI.prototype, "skewY", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "offsetX", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "offsetY", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "scrollX", void 0);
+__decorate([
+    positionType(0, true)
+], UI.prototype, "scrollY", void 0);
+__decorate([
+    autoLayoutType()
+], UI.prototype, "origin", void 0);
 __decorate([
     autoLayoutType()
 ], UI.prototype, "around", void 0);
 __decorate([
     dataType(false)
-], UI.prototype, "draggable", void 0);
+], UI.prototype, "lazy", void 0);
 __decorate([
-    dataType(false)
-], UI.prototype, "editable", void 0);
+    naturalBoundsType(1)
+], UI.prototype, "pixelRatio", void 0);
+__decorate([
+    pathInputType()
+], UI.prototype, "path", void 0);
+__decorate([
+    pathType()
+], UI.prototype, "windingRule", void 0);
+__decorate([
+    pathType(true)
+], UI.prototype, "closed", void 0);
+__decorate([
+    autoLayoutType(false)
+], UI.prototype, "flow", void 0);
+__decorate([
+    boundsType(0)
+], UI.prototype, "padding", void 0);
+__decorate([
+    boundsType(0)
+], UI.prototype, "gap", void 0);
+__decorate([
+    boundsType('top-left')
+], UI.prototype, "align", void 0);
+__decorate([
+    boundsType(false)
+], UI.prototype, "wrap", void 0);
+__decorate([
+    boundsType('box')
+], UI.prototype, "itemBox", void 0);
 __decorate([
-    dataType('size')
-], UI.prototype, "editSize", void 0);
+    boundsType(true)
+], UI.prototype, "inFlow", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "autoWidth", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "autoHeight", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "autoBox", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "widthRange", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "heightRange", void 0);
+__decorate([
+    dataType(false)
+], UI.prototype, "draggable", void 0);
 __decorate([
     dataType()
-], UI.prototype, "editorStyle", void 0);
+], UI.prototype, "dragBounds", void 0);
+__decorate([
+    dataType(false)
+], UI.prototype, "editable", void 0);
 __decorate([
     hitType(true)
 ], UI.prototype, "hittable", void 0);
@@ -7344,21 +7516,6 @@ __decorate([
 __decorate([
     strokeType(10)
 ], UI.prototype, "miterLimit", void 0);
-__decorate([
-    dataType(false)
-], UI.prototype, "lazy", void 0);
-__decorate([
-    naturalBoundsType(1)
-], UI.prototype, "pixelRatio", void 0);
-__decorate([
-    pathInputType()
-], UI.prototype, "path", void 0);
-__decorate([
-    pathType()
-], UI.prototype, "windingRule", void 0);
-__decorate([
-    pathType(true)
-], UI.prototype, "closed", void 0);
 __decorate([
     arrowType('none')
 ], UI.prototype, "startArrow", void 0);
@@ -7481,7 +7638,6 @@ Group = __decorate([
 var Leafer_1;
 const debug$3 = Debug.get('Leafer');
 let Leafer = Leafer_1 = class Leafer extends Group {
-    static get version() { return '1.0.0-rc.21'; }
     get __tag() { return 'Leafer'; }
     get isApp() { return false; }
     get app() { return this.parent || this; }
@@ -7534,7 +7690,6 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         if (this.isApp)
             this.__setApp();
         this.__checkAutoLayout(config);
-        this.updateLazyBounds();
         this.view = canvas.view;
         if (parentApp) {
             this.__bindApp(parentApp);
@@ -7594,9 +7749,6 @@ let Leafer = Leafer_1 = class Leafer extends Group {
         const data = DataHelper.copyAttrs({}, size, canvasSizeAttrs);
         Object.keys(data).forEach(key => this[key] = data[key]);
     }
-    forceFullRender() {
-        this.forceRender();
-    }
     forceRender(bounds) {
         this.renderer.addBlock(bounds ? new Bounds(bounds) : this.canvas.bounds);
         if (this.viewReady)
@@ -7674,7 +7826,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             this.canvas.backgroundColor = newValue;
         }
         else {
-            this.forceFullRender();
+            this.forceRender();
         }
     }
     __onCreated() {
@@ -7778,6 +7930,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     __listenEvents() {
         const runId = Run.start('FirstCreate ' + this.innerName);
         this.once(LeaferEvent.START, () => Run.end(runId));
+        this.once(LayoutEvent.START, () => this.updateLazyBounds());
         this.once(LayoutEvent.END, () => this.__onReady());
         this.once(RenderEvent.START, () => this.__onCreated());
         this.once(RenderEvent.END, () => this.__onViewReady());
@@ -7848,8 +8001,8 @@ Rect = __decorate([
     registerUI()
 ], Rect);
 
-const rect = Rect.prototype;
-const group = Group.prototype;
+const rect$1 = Rect.prototype;
+const group$1 = Group.prototype;
 const bounds$1 = {};
 const { copy: copy$3, add } = BoundsHelper;
 let Box = class Box extends Group {
@@ -7884,6 +8037,8 @@ let Box = class Box extends Group {
         else {
             this.__updateRectBoxBounds();
         }
+        if (data.flow)
+            this.__updateContentBounds();
     }
     __updateStrokeBounds() { }
     __updateRenderBounds() {
@@ -7928,28 +8083,28 @@ __decorate([
     affectRenderBoundsType('show')
 ], Box.prototype, "overflow", void 0);
 __decorate([
-    rewrite(rect.__updateStrokeSpread)
+    rewrite(rect$1.__updateStrokeSpread)
 ], Box.prototype, "__updateStrokeSpread", null);
 __decorate([
-    rewrite(rect.__updateRenderSpread)
+    rewrite(rect$1.__updateRenderSpread)
 ], Box.prototype, "__updateRectRenderSpread", null);
 __decorate([
-    rewrite(rect.__updateBoxBounds)
+    rewrite(rect$1.__updateBoxBounds)
 ], Box.prototype, "__updateRectBoxBounds", null);
 __decorate([
-    rewrite(rect.__updateStrokeBounds)
+    rewrite(rect$1.__updateStrokeBounds)
 ], Box.prototype, "__updateStrokeBounds", null);
 __decorate([
-    rewrite(rect.__updateRenderBounds)
+    rewrite(rect$1.__updateRenderBounds)
 ], Box.prototype, "__updateRectRenderBounds", null);
 __decorate([
-    rewrite(rect.__updateChange)
+    rewrite(rect$1.__updateChange)
 ], Box.prototype, "__updateRectChange", null);
 __decorate([
-    rewrite(rect.__render)
+    rewrite(rect$1.__render)
 ], Box.prototype, "__renderRect", null);
 __decorate([
-    rewrite(group.__render)
+    rewrite(group$1.__render)
 ], Box.prototype, "__renderGroup", null);
 Box = __decorate([
     rewriteAble(),
@@ -8293,9 +8448,10 @@ Canvas = __decorate([
     registerUI()
 ], Canvas);
 
-const { copyAndSpread, includes, spread, setList } = BoundsHelper;
+const { copyAndSpread, includes, isSame: isSame$1, spread, setList } = BoundsHelper;
 let Text = class Text extends UI {
     get __tag() { return 'Text'; }
+    get editInner() { return 'TextEditor'; }
     get textDrawData() {
         this.__layout.update();
         return this.__.__textDrawData;
@@ -8365,7 +8521,7 @@ let Text = class Text extends UI {
         if (italic)
             b.width += fontSize * 0.16;
         const contentBounds = includes(b, bounds) ? b : bounds;
-        if (contentBounds !== layout.contentBounds) {
+        if (!isSame$1(contentBounds, layout.contentBounds)) {
             layout.contentBounds = contentBounds;
             layout.renderChanged = true;
             setList(data.__textBoxBounds = {}, [b, bounds]);
@@ -8393,9 +8549,6 @@ __decorate([
 __decorate([
     boundsType(0)
 ], Text.prototype, "height", void 0);
-__decorate([
-    boundsType(0)
-], Text.prototype, "padding", void 0);
 __decorate([
     surfaceType('#000000')
 ], Text.prototype, "fill", void 0);
@@ -8524,7 +8677,7 @@ function penPathType() {
     };
 }
 
-const version = "1.0.0-rc.21";
+const version = "1.0.0-rc.23";
 
 let App = class App extends Leafer {
     get __tag() { return 'App'; }
@@ -8618,7 +8771,10 @@ let App = class App extends Leafer {
             this.renderer.update();
     }
     __render(canvas, options) {
-        canvas.setWorld(options.matrix || this.__world);
+        if (options.matrix) {
+            const { a, b, c, d, e, f } = options.matrix;
+            canvas.setTransform(a, b, c, d, e, f);
+        }
         this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
     }
     __onResize(event) {
@@ -8740,6 +8896,35 @@ let DragEvent = class DragEvent extends PointerEvent {
     static setData(data) {
         this.data = data;
     }
+    static getValidMove(leaf, start, total) {
+        const { draggable, dragBounds, x, y } = leaf;
+        const move = leaf.getLocalPoint(total, null, true);
+        move.x += start.x - x;
+        move.y += start.y - y;
+        if (dragBounds)
+            this.getMoveInDragBounds(leaf.__local, dragBounds === 'parent' ? leaf.parent.boxBounds : dragBounds, move, true);
+        if (draggable === 'x')
+            move.y = 0;
+        if (draggable === 'y')
+            move.x = 0;
+        return move;
+    }
+    static getMoveInDragBounds(box, dragBounds, move, change) {
+        const x = box.x + move.x, y = box.y + move.y;
+        const right = x + box.width, bottom = y + box.height;
+        const boundsRight = dragBounds.x + dragBounds.width, boundsBottom = dragBounds.y + dragBounds.height;
+        if (!change)
+            move = Object.assign({}, move);
+        if (x < dragBounds.x)
+            move.x += dragBounds.x - x;
+        else if (right > boundsRight)
+            move.x += boundsRight - right;
+        if (y < dragBounds.y)
+            move.y += dragBounds.y - y;
+        else if (bottom > boundsBottom)
+            move.y += boundsBottom - bottom;
+        return move;
+    }
     getPageMove(total) {
         this.assignMove(total);
         return this.current.getPagePoint(move, null, true);
@@ -8849,9 +9034,7 @@ function addInteractionWindow(leafer) {
     if (leafer.isApp)
         return;
     leafer.__eventIds.push(leafer.on_(MoveEvent.BEFORE_MOVE, (e) => {
-        const { x, y } = leafer.getValidMove(e.moveX, e.moveY);
-        if (x || y)
-            leafer.zoomLayer.move(x, y);
+        leafer.zoomLayer.move(leafer.getValidMove(e.moveX, e.moveY));
     }), leafer.on_(ZoomEvent.BEFORE_ZOOM, (e) => {
         const { zoomLayer } = leafer;
         const changeScale = leafer.getValidScale(e.scale);
@@ -9120,9 +9303,14 @@ class Dragger {
             if (this.dragging) {
                 this.interaction.emit(DragEvent.START, this.dragData);
                 this.getDragableList(this.dragData.path);
+                this.setDragStartPoints(this.realDragableList = this.getList());
             }
         }
     }
+    setDragStartPoints(list) {
+        this.dragStartPoints = {};
+        list.forEach(leaf => this.dragStartPoints[leaf.innerId] = { x: leaf.x, y: leaf.y });
+    }
     getDragableList(path) {
         let leaf;
         for (let i = 0, len = path.length; i < len; i++) {
@@ -9152,10 +9340,10 @@ class Dragger {
     }
     dragReal() {
         const { running } = this.interaction;
-        const list = this.getList();
+        const list = this.realDragableList;
         if (list.length && running) {
-            const { moveX, moveY } = this.dragData;
-            list.forEach(leaf => leaf.draggable && leaf.moveWorld(moveX, moveY));
+            const { totalX, totalY } = this.dragData;
+            list.forEach(leaf => leaf.draggable && leaf.move(DragEvent.getValidMove(leaf, this.dragStartPoints[leaf.innerId], { x: totalX, y: totalY })));
         }
     }
     dragOverOrOut(data) {
@@ -9624,7 +9812,8 @@ class InteractionBase {
     }
     findPath(data, options) {
         const { hitRadius, through } = this.config.pointer;
-        const find = this.selector.getByPoint(data, hitRadius, options || { through });
+        const { bottomList } = this;
+        const find = this.selector.getByPoint(data, hitRadius, Object.assign({ bottomList, name: data.type }, (options || { through })));
         if (find.throughPath)
             data.throughPath = find.throughPath;
         data.path = find.path;
@@ -9637,7 +9826,7 @@ class InteractionBase {
         const app = this.target.app;
         if (!app || !app.isApp)
             return false;
-        return app.editor && (!data.path.has(app.editor) && data.path.has(app.tree));
+        return app.editor && (!data.path.has(app.editor) && data.path.has(app.tree) && !data.target.syncEventer);
     }
     checkPath(data, useDefaultPath) {
         if (useDefaultPath || this.canMove(data))
@@ -9703,7 +9892,7 @@ class InteractionBase {
         const { path } = data;
         for (let i = 0, len = path.length; i < len; i++) {
             leaf = path.list[i];
-            cursor = leaf.cursor;
+            cursor = leaf.syncEventer ? leaf.syncEventer.cursor : leaf.cursor;
             if (cursor)
                 break;
         }
@@ -9861,6 +10050,8 @@ const { toInnerRadiusPointOf, copy: copy$2, setRadius } = PointHelper;
 const inner = {};
 const leaf = Leaf.prototype;
 leaf.__hitWorld = function (point) {
+    if (!this.__.hitSelf)
+        return false;
     if (this.__.hitRadius) {
         copy$2(inner, point), point = inner;
         setRadius(point, this.__.hitRadius);
@@ -9888,8 +10079,8 @@ leaf.__drawHitPath = function (canvas) { if (canvas)
     this.__drawRenderPath(canvas); };
 
 const matrix = new Matrix();
-const ui$1 = UI.prototype;
-ui$1.__updateHitCanvas = function () {
+const ui$2 = UI.prototype;
+ui$2.__updateHitCanvas = function () {
     const data = this.__, { hitCanvasManager } = this.leafer;
     const isHitPixelFill = data.__pixelFill && data.hitFill === 'pixel';
     const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
@@ -9916,7 +10107,7 @@ ui$1.__updateHitCanvas = function () {
     this.__drawHitPath(h);
     h.setStrokeOptions(data);
 };
-ui$1.__hit = function (inner) {
+ui$2.__hit = function (inner) {
     if (Platform.name === 'miniapp')
         this.__drawHitPath(this.__hitCanvas);
     const data = this.__;
@@ -9956,22 +10147,24 @@ ui$1.__hit = function (inner) {
     return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
 };
 
-const ui = new UI();
-Rect.prototype.__updateHitCanvas = function () {
+const ui$1 = new UI();
+const rect = Rect.prototype;
+rect.__updateHitCanvas = function () {
     if (this.stroke || this.cornerRadius)
-        ui.__updateHitCanvas.call(this);
+        ui$1.__updateHitCanvas.call(this);
 };
-Rect.prototype.__hitFill = function (inner) {
-    return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
+rect.__hitFill = function (inner) {
+    return this.__hitCanvas ? ui$1.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
 };
 
-UI.prototype.find = function (condition, options) {
+const ui = UI.prototype, group = Group.prototype;
+ui.find = function (condition, options) {
     return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
 };
-UI.prototype.findOne = function (condition, options) {
+ui.findOne = function (condition, options) {
     return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
 };
-Group.prototype.pick = function (hitPoint, options) {
+group.pick = function (hitPoint, options) {
     this.__layout.update();
     if (!options)
         options = {};
@@ -10544,7 +10737,7 @@ function shape(ui, current, options) {
     }
     else {
         const { renderShapeSpread: spread } = ui.__layout;
-        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, spread * scaleX, spread * scaleY) : current.bounds, nowWorld);
+        const worldClipBounds = getIntersectData(spread ? getSpread(current.bounds, scaleX === scaleY ? spread * scaleX : [spread * scaleY, spread * scaleX]) : current.bounds, nowWorld);
         fitMatrix = current.bounds.getFitMatrix(worldClipBounds);
         let { a: fitScaleX, d: fitScaleY } = fitMatrix;
         if (fitMatrix.a < 1) {
@@ -10627,79 +10820,75 @@ const PaintModule = {
 
 let origin = {};
 const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper, rotate } = MatrixHelper;
-function fillOrFitMode(data, mode, box, width, height, rotation) {
+function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
     const transform = get$4();
-    const swap = rotation && rotation !== 180;
-    const sw = box.width / (swap ? height : width);
-    const sh = box.height / (swap ? width : height);
-    const scale = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
-    const x = box.x + (box.width - width * scale) / 2;
-    const y = box.y + (box.height - height * scale) / 2;
-    translate$1(transform, x, y);
-    scaleHelper(transform, scale);
+    translate$1(transform, box.x + x, box.y + y);
+    scaleHelper(transform, scaleX, scaleY);
     if (rotation)
         rotateOfOuter$2(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
-    data.scaleX = data.scaleY = scale;
     data.transform = transform;
 }
 function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
     const transform = get$4();
-    translate$1(transform, box.x, box.y);
-    if (x || y)
-        translate$1(transform, x, y);
-    if (scaleX) {
+    translate$1(transform, box.x + x, box.y + y);
+    if (scaleX)
         scaleHelper(transform, scaleX, scaleY);
-        data.scaleX = transform.a;
-        data.scaleY = transform.d;
-    }
     if (rotation)
         rotate(transform, rotation);
     data.transform = transform;
 }
-function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation) {
+function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
     const transform = get$4();
     if (rotation) {
-        rotate(transform, rotation);
-        switch (rotation) {
-            case 90:
-                translate$1(transform, height, 0);
-                break;
-            case 180:
-                translate$1(transform, width, height);
-                break;
-            case 270:
-                translate$1(transform, 0, width);
-                break;
+        if (align === 'center') {
+            rotateOfOuter$2(transform, { x: width / 2, y: height / 2 }, rotation);
+        }
+        else {
+            rotate(transform, rotation);
+            switch (rotation) {
+                case 90:
+                    translate$1(transform, height, 0);
+                    break;
+                case 180:
+                    translate$1(transform, width, height);
+                    break;
+                case 270:
+                    translate$1(transform, 0, width);
+                    break;
+            }
         }
     }
-    origin.x = box.x;
-    origin.y = box.y;
-    if (x || y)
-        origin.x += x, origin.y += y;
+    origin.x = box.x + x;
+    origin.y = box.y + y;
     translate$1(transform, origin.x, origin.y);
-    if (scaleX) {
+    if (scaleX)
         scaleOfOuter$2(transform, origin, scaleX, scaleY);
-        data.scaleX = scaleX;
-        data.scaleY = scaleY;
-    }
     data.transform = transform;
 }
 
 const { get: get$3, translate } = MatrixHelper;
 const tempBox = new Bounds();
+const tempPoint = {};
 function createData(leafPaint, image, paint, box) {
     let { width, height } = image;
     if (paint.padding)
         box = tempBox.set(box).shrink(paint.padding);
-    const { opacity, mode, offset, scale, size, rotation, blendMode, repeat } = paint;
+    const { opacity, mode, align, offset, scale, size, rotation, blendMode, repeat } = paint;
     const sameBox = box.width === width && box.height === height;
     if (blendMode)
         leafPaint.blendMode = blendMode;
     const data = leafPaint.data = { mode };
-    let x, y, scaleX, scaleY;
-    if (offset)
-        x = offset.x, y = offset.y;
-    if (size) {
+    const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
+    const swapWidth = swapSize ? height : width, swapHeight = swapSize ? width : height;
+    let x = 0, y = 0, scaleX, scaleY;
+    if (!mode || mode === 'cover' || mode === 'fit') {
+        if (!sameBox || rotation) {
+            const sw = box.width / swapWidth, sh = box.height / swapHeight;
+            scaleX = scaleY = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh);
+            x += (box.width - width * scaleX) / 2, y += (box.height - height * scaleY) / 2;
+        }
+    }
+    else if (size) {
         scaleX = (typeof size === 'number' ? size : size.width) / width;
         scaleY = (typeof size === 'number' ? size : size.height) / height;
     }
@@ -10707,26 +10896,36 @@ function createData(leafPaint, image, paint, box) {
         scaleX = typeof scale === 'number' ? scale : scale.x;
         scaleY = typeof scale === 'number' ? scale : scale.y;
     }
+    if (align) {
+        const imageBounds = { x, y, width: swapWidth, height: swapHeight };
+        if (scaleX)
+            imageBounds.width *= scaleX, imageBounds.height *= scaleY;
+        AlignHelper.toPoint(align, imageBounds, box, tempPoint, true);
+        x += tempPoint.x, y += tempPoint.y;
+    }
+    if (offset)
+        x += offset.x, y += offset.y;
     switch (mode) {
         case 'strench':
             if (!sameBox)
                 width = box.width, height = box.height;
             break;
+        case 'normal':
         case 'clip':
-            if (offset || scaleX || rotation)
+            if (x || y || scaleX || rotation)
                 clipMode(data, box, x, y, scaleX, scaleY, rotation);
             break;
         case 'repeat':
             if (!sameBox || scaleX || rotation)
-                repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation);
+                repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align);
             if (!repeat)
                 data.repeat = 'repeat';
             break;
         case 'fit':
         case 'cover':
         default:
-            if (!sameBox || rotation)
-                fillOrFitMode(data, mode, box, width, height, rotation);
+            if (scaleX)
+                fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation);
     }
     if (!data.transform) {
         if (box.x || box.y) {
@@ -10734,6 +10933,10 @@ function createData(leafPaint, image, paint, box) {
             translate(data.transform, box.x, box.y);
         }
     }
+    if (scaleX && mode !== 'strench') {
+        data.scaleX = scaleX;
+        data.scaleY = scaleY;
+    }
     data.width = width;
     data.height = height;
     if (opacity)
@@ -11631,11 +11834,13 @@ function clipText(drawData, style) {
     const { rows, overflow } = drawData;
     let { textOverflow } = style;
     rows.splice(overflow);
-    if (textOverflow !== 'hide') {
-        if (textOverflow === 'ellipsis')
+    if (textOverflow && textOverflow !== 'show') {
+        if (textOverflow === 'hide')
+            textOverflow = '';
+        else if (textOverflow === 'ellipsis')
             textOverflow = '...';
         let char, charRight;
-        const ellipsisWidth = Platform.canvas.measureText(textOverflow).width;
+        const ellipsisWidth = textOverflow ? Platform.canvas.measureText(textOverflow).width : 0;
         const right = style.x + style.width - ellipsisWidth;
         const list = style.textWrap === 'none' ? rows : [rows[overflow - 1]];
         list.forEach(row => {
@@ -11789,6 +11994,13 @@ const ExportModule = {
                 resolve();
                 this.running = false;
             };
+            if (filename === 'json') {
+                return over({ data: leaf.toJSON() });
+            }
+            else if (FileHelper.fileType(filename) === 'json') {
+                Platform.origin.download('data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(leaf.toJSON())), filename);
+                return over({ data: true });
+            }
             const { leafer } = leaf;
             if (leafer) {
                 leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
@@ -11796,8 +12008,12 @@ const ExportModule = {
                     let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
                     const { worldTransform, isLeafer, isFrame } = leaf;
                     const { slice, trim, onCanvas } = options;
-                    const scale = options.scale || 1;
-                    const pixelRatio = options.pixelRatio || 1;
+                    let scale = options.scale || 1;
+                    let pixelRatio = options.pixelRatio || 1;
+                    if (leaf.isApp) {
+                        scale *= pixelRatio;
+                        pixelRatio = leaf.app.pixelRatio;
+                    }
                     const screenshot = options.screenshot || leaf.isApp;
                     const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
                     const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
@@ -11938,4 +12154,4 @@ window.addEventListener('unload', () => {
     ImageManager.destroy();
 });
 
-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, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, 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, tempBounds$1 as tempBounds, tempMatrix, tempPoint$2 as tempPoint, useCanvas, useModule, version, zoomLayerType };
+export { AlignHelper, 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, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, 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, tempBounds$1 as tempBounds, tempMatrix, tempPoint$3 as tempPoint, useCanvas, useModule, version, zoomLayerType };