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

package/dist/web.js

@@ -120,7 +120,7 @@ var LeaferUI = (function (exports) {
 
     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 });
     }
@@ -161,8 +161,8 @@ var LeaferUI = (function (exports) {
             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);
@@ -180,8 +180,8 @@ var LeaferUI = (function (exports) {
             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);
@@ -202,8 +202,8 @@ var LeaferUI = (function (exports) {
             }
         },
         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);
@@ -597,7 +597,7 @@ var LeaferUI = (function (exports) {
             return this;
         }
     }
-    const tempPoint$2 = new Point();
+    const tempPoint$3 = new Point();
 
     class Matrix {
         constructor(a, b, c, d, e, f) {
@@ -1209,11 +1209,19 @@ var LeaferUI = (function (exports) {
         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;
+            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;
@@ -2211,7 +2219,7 @@ var LeaferUI = (function (exports) {
     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]);
@@ -2401,8 +2409,8 @@ var LeaferUI = (function (exports) {
             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) {
@@ -2472,7 +2480,7 @@ var LeaferUI = (function (exports) {
     };
 
     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 = {};
@@ -2665,7 +2673,7 @@ var LeaferUI = (function (exports) {
                     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:
@@ -2822,7 +2830,7 @@ var LeaferUI = (function (exports) {
     };
     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; }
@@ -2864,7 +2872,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -3959,15 +3967,21 @@ var LeaferUI = (function (exports) {
             }
             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);
@@ -4529,12 +4543,15 @@ var LeaferUI = (function (exports) {
                         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));
@@ -4754,7 +4771,7 @@ var LeaferUI = (function (exports) {
     };
 
     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.__);
@@ -4771,8 +4788,8 @@ var LeaferUI = (function (exports) {
                 local.e = data.x;
                 local.f = data.y;
                 if (data.around) {
-                    toPoint(data.around, layout.boxBounds, tempPoint);
-                    translateInner(local, -tempPoint.x, -tempPoint.y);
+                    toPoint(data.around, layout.boxBounds, tempPoint$1);
+                    translateInner(local, -tempPoint$1.x, -tempPoint$1.y);
                 }
             }
             this.__layout.matrixChanged = false;
@@ -6423,32 +6440,38 @@ var LeaferUI = (function (exports) {
             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();
@@ -6490,6 +6513,9 @@ var LeaferUI = (function (exports) {
             }
             return throughPath;
         }
+        hitBranch(branch) {
+            this.eachFind(branch.children, branch.__onlyHitMask);
+        }
         eachFind(children, hitMask) {
             let child, hit;
             const { point } = this, len = children.length;
@@ -6511,11 +6537,11 @@ var LeaferUI = (function (exports) {
                 }
             }
         }
-        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;
@@ -6713,7 +6739,11 @@ var LeaferUI = (function (exports) {
             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);
+                }
             });
         };
     }
@@ -7119,6 +7149,9 @@ var LeaferUI = (function (exports) {
             pen.set(this.path = this.__.path || []);
             return pen;
         }
+        get editConfig() { return undefined; }
+        get editOuter() { return 'EditTool'; }
+        get editInner() { return 'PathEditor'; }
         constructor(data) {
             super(data);
         }
@@ -7180,7 +7213,8 @@ var LeaferUI = (function (exports) {
         __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);
@@ -7201,6 +7235,9 @@ var LeaferUI = (function (exports) {
         static registerData(data) {
             dataProcessor(data)(this.prototype);
         }
+        static setEditConfig(_config) { }
+        static setEditOuter(_toolName) { }
+        static setEditInner(_editorName) { }
         destroy() {
             this.fill = this.stroke = null;
             super.destroy();
@@ -7284,15 +7321,15 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataType(false)
     ], exports.UI.prototype, "draggable", void 0);
+    __decorate([
+        dataType()
+    ], exports.UI.prototype, "dragBounds", void 0);
     __decorate([
         dataType(false)
     ], exports.UI.prototype, "editable", void 0);
     __decorate([
         dataType('size')
     ], exports.UI.prototype, "editSize", void 0);
-    __decorate([
-        dataType()
-    ], exports.UI.prototype, "editorStyle", void 0);
     __decorate([
         hitType(true)
     ], exports.UI.prototype, "hittable", void 0);
@@ -7484,7 +7521,6 @@ var LeaferUI = (function (exports) {
     var Leafer_1;
     const debug$3 = Debug.get('Leafer');
     exports.Leafer = Leafer_1 = class Leafer extends exports.Group {
-        static get version() { return '1.0.0-rc.21'; }
         get __tag() { return 'Leafer'; }
         get isApp() { return false; }
         get app() { return this.parent || this; }
@@ -7537,7 +7573,6 @@ var LeaferUI = (function (exports) {
             if (this.isApp)
                 this.__setApp();
             this.__checkAutoLayout(config);
-            this.updateLazyBounds();
             this.view = canvas.view;
             if (parentApp) {
                 this.__bindApp(parentApp);
@@ -7781,6 +7816,7 @@ var LeaferUI = (function (exports) {
         __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());
@@ -7851,8 +7887,8 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Rect);
 
-    const rect = exports.Rect.prototype;
-    const group = exports.Group.prototype;
+    const rect$1 = exports.Rect.prototype;
+    const group$1 = exports.Group.prototype;
     const bounds$1 = {};
     const { copy: copy$3, add } = BoundsHelper;
     exports.Box = class Box extends exports.Group {
@@ -7931,28 +7967,28 @@ var LeaferUI = (function (exports) {
         affectRenderBoundsType('show')
     ], exports.Box.prototype, "overflow", void 0);
     __decorate([
-        rewrite(rect.__updateStrokeSpread)
+        rewrite(rect$1.__updateStrokeSpread)
     ], exports.Box.prototype, "__updateStrokeSpread", null);
     __decorate([
-        rewrite(rect.__updateRenderSpread)
+        rewrite(rect$1.__updateRenderSpread)
     ], exports.Box.prototype, "__updateRectRenderSpread", null);
     __decorate([
-        rewrite(rect.__updateBoxBounds)
+        rewrite(rect$1.__updateBoxBounds)
     ], exports.Box.prototype, "__updateRectBoxBounds", null);
     __decorate([
-        rewrite(rect.__updateStrokeBounds)
+        rewrite(rect$1.__updateStrokeBounds)
     ], exports.Box.prototype, "__updateStrokeBounds", null);
     __decorate([
-        rewrite(rect.__updateRenderBounds)
+        rewrite(rect$1.__updateRenderBounds)
     ], exports.Box.prototype, "__updateRectRenderBounds", null);
     __decorate([
-        rewrite(rect.__updateChange)
+        rewrite(rect$1.__updateChange)
     ], exports.Box.prototype, "__updateRectChange", null);
     __decorate([
-        rewrite(rect.__render)
+        rewrite(rect$1.__render)
     ], exports.Box.prototype, "__renderRect", null);
     __decorate([
-        rewrite(group.__render)
+        rewrite(group$1.__render)
     ], exports.Box.prototype, "__renderGroup", null);
     exports.Box = __decorate([
         rewriteAble(),
@@ -8299,6 +8335,7 @@ var LeaferUI = (function (exports) {
     const { copyAndSpread, includes, spread, setList } = BoundsHelper;
     exports.Text = class Text extends exports.UI {
         get __tag() { return 'Text'; }
+        get editInner() { return 'TextEditor'; }
         get textDrawData() {
             this.__layout.update();
             return this.__.__textDrawData;
@@ -8621,7 +8658,8 @@ var LeaferUI = (function (exports) {
                 this.renderer.update();
         }
         __render(canvas, options) {
-            canvas.setWorld(options.matrix || this.__world);
+            if (options.matrix)
+                canvas.setWorld(options.matrix);
             this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
         }
         __onResize(event) {
@@ -8743,6 +8781,35 @@ var LeaferUI = (function (exports) {
         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);
@@ -8852,9 +8919,7 @@ var LeaferUI = (function (exports) {
         if (leafer.isApp)
             return;
         leafer.__eventIds.push(leafer.on_(exports.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_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
             const { zoomLayer } = leafer;
             const changeScale = leafer.getValidScale(e.scale);
@@ -9123,9 +9188,14 @@ var LeaferUI = (function (exports) {
                 if (this.dragging) {
                     this.interaction.emit(exports.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++) {
@@ -9155,10 +9225,10 @@ var LeaferUI = (function (exports) {
         }
         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(exports.DragEvent.getValidMove(leaf, this.dragStartPoints[leaf.innerId], { x: totalX, y: totalY })));
             }
         }
         dragOverOrOut(data) {
@@ -9627,7 +9697,8 @@ var LeaferUI = (function (exports) {
         }
         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;
@@ -9640,7 +9711,7 @@ var LeaferUI = (function (exports) {
             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))
@@ -9706,7 +9777,7 @@ var LeaferUI = (function (exports) {
             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;
             }
@@ -9864,6 +9935,8 @@ var LeaferUI = (function (exports) {
     const inner = {};
     const leaf = exports.Leaf.prototype;
     leaf.__hitWorld = function (point) {
+        if (!this.__.hitSelf)
+            return false;
         if (this.__.hitRadius) {
             copy$2(inner, point), point = inner;
             setRadius(point, this.__.hitRadius);
@@ -9891,8 +9964,8 @@ var LeaferUI = (function (exports) {
         this.__drawRenderPath(canvas); };
 
     const matrix = new Matrix();
-    const ui$1 = exports.UI.prototype;
-    ui$1.__updateHitCanvas = function () {
+    const ui$2 = exports.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';
@@ -9919,7 +9992,7 @@ var LeaferUI = (function (exports) {
         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.__;
@@ -9959,22 +10032,24 @@ var LeaferUI = (function (exports) {
         return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
     };
 
-    const ui = new exports.UI();
-    exports.Rect.prototype.__updateHitCanvas = function () {
+    const ui$1 = new exports.UI();
+    const rect = exports.Rect.prototype;
+    rect.__updateHitCanvas = function () {
         if (this.stroke || this.cornerRadius)
-            ui.__updateHitCanvas.call(this);
+            ui$1.__updateHitCanvas.call(this);
     };
-    exports.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);
     };
 
-    exports.UI.prototype.find = function (condition, options) {
+    const ui = exports.UI.prototype, group = exports.Group.prototype;
+    ui.find = function (condition, options) {
         return this.leafer ? this.leafer.selector.getBy(condition, this, false, options) : [];
     };
-    exports.UI.prototype.findOne = function (condition, options) {
+    ui.findOne = function (condition, options) {
         return this.leafer ? this.leafer.selector.getBy(condition, this, true, options) : null;
     };
-    exports.Group.prototype.pick = function (hitPoint, options) {
+    group.pick = function (hitPoint, options) {
         this.__layout.update();
         if (!options)
             options = {};
@@ -10630,79 +10705,75 @@ var LeaferUI = (function (exports) {
 
     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, around) {
         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 (around === '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, around, 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 = around !== '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;
         }
@@ -10710,26 +10781,36 @@ var LeaferUI = (function (exports) {
             scaleX = typeof scale === 'number' ? scale : scale.x;
             scaleY = typeof scale === 'number' ? scale : scale.y;
         }
+        if (around) {
+            const imageBounds = { x, y, width: swapWidth, height: swapHeight };
+            if (scaleX)
+                imageBounds.width *= scaleX, imageBounds.height *= scaleY;
+            AroundHelper.toPoint(around, box, tempPoint, true, imageBounds);
+            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, around);
                 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) {
@@ -10737,6 +10818,10 @@ var LeaferUI = (function (exports) {
                 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)
@@ -11792,6 +11877,13 @@ var LeaferUI = (function (exports) {
                     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* () {
@@ -12097,7 +12189,7 @@ var LeaferUI = (function (exports) {
     exports.surfaceType = surfaceType;
     exports.tempBounds = tempBounds$1;
     exports.tempMatrix = tempMatrix;
-    exports.tempPoint = tempPoint$2;
+    exports.tempPoint = tempPoint$3;
     exports.useCanvas = useCanvas;
     exports.useModule = useModule;
     exports.version = version;