@leafer-draw/miniapp 1.0.0-rc.21 → 1.0.0-rc.22

package/dist/miniapp.module.js

@@ -117,7 +117,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 });
 }
@@ -158,8 +158,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 +177,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 +199,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);
@@ -594,7 +594,7 @@ class Point {
         return this;
     }
 }
-const tempPoint$2 = new Point();
+const tempPoint$3 = new Point();
 
 class Matrix {
     constructor(a, b, c, d, e, f) {
@@ -1206,11 +1206,19 @@ 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;
+        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;
@@ -2208,7 +2216,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 +2406,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) {
@@ -3956,15 +3964,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);
@@ -4526,12 +4540,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,7 +4768,7 @@ 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.__);
@@ -4768,8 +4785,8 @@ const LeafMatrix = {
             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;
@@ -6454,7 +6471,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);
+            }
         });
     };
 }
@@ -6860,6 +6881,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);
     }
@@ -6921,7 +6945,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);
@@ -6942,6 +6967,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();
@@ -7025,15 +7053,15 @@ __decorate([
 __decorate([
     dataType(false)
 ], UI.prototype, "draggable", void 0);
+__decorate([
+    dataType()
+], UI.prototype, "dragBounds", void 0);
 __decorate([
     dataType(false)
 ], UI.prototype, "editable", void 0);
 __decorate([
     dataType('size')
 ], UI.prototype, "editSize", void 0);
-__decorate([
-    dataType()
-], UI.prototype, "editorStyle", void 0);
 __decorate([
     hitType(true)
 ], UI.prototype, "hittable", void 0);
@@ -7225,7 +7253,6 @@ Group = __decorate([
 var Leafer_1;
 const debug$1 = 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; }
@@ -7278,7 +7305,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);
@@ -7522,6 +7548,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());
@@ -8040,6 +8067,7 @@ Canvas = __decorate([
 const { copyAndSpread, includes, 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;
@@ -8572,79 +8600,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, 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;
     }
@@ -8652,26 +8676,36 @@ function createData(leafPaint, image, paint, box) {
         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) {
@@ -8679,6 +8713,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)
@@ -9734,6 +9772,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* () {
@@ -9875,4 +9920,4 @@ try {
 }
 catch (_a) { }
 
-export { AnimateEvent, Answer, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, DataHelper, Debug, Direction4, Direction9, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, Image, ImageData, ImageEvent, ImageManager, IncrementId, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, 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, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Run, Star, StarData, State, StringNumberMap, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, 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 { AnimateEvent, Answer, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, DataHelper, Debug, Direction4, Direction9, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, Image, ImageData, ImageEvent, ImageManager, IncrementId, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, 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, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Run, Star, StarData, State, StringNumberMap, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, 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 };