@leafer-draw/worker 1.0.0-rc.25 → 1.0.0-rc.27

package/dist/worker.module.js

@@ -1,4 +1,12 @@
 const Platform = {
+    toURL(text, fileType) {
+        let url = encodeURIComponent(text);
+        if (fileType === 'text')
+            url = 'data:text/plain;charset=utf-8,' + url;
+        else if (fileType === 'svg')
+            url = 'data:image/svg+xml,' + url;
+        return url;
+    },
     image: {
         hitCanvasSize: 100,
         maxCacheSize: 2560 * 1600,
@@ -956,6 +964,9 @@ const BoundsHelper = {
         points.forEach((point, index) => index === 0 ? setPoint$3(tempPointBounds$1, point.x, point.y) : addPoint$3(tempPointBounds$1, point.x, point.y));
         toBounds$4(tempPointBounds$1, t);
     },
+    setPoint(t, point) {
+        B.set(t, point.x, point.y);
+    },
     addPoint(t, point) {
         add$1(t, point, true);
     },
@@ -1104,6 +1115,10 @@ class Bounds {
         BoundsHelper.setListWithFn(this, list, boundsDataFn);
         return this;
     }
+    setPoint(point) {
+        BoundsHelper.setPoint(this, point);
+        return this;
+    }
     setPoints(points) {
         BoundsHelper.setPoints(this, points);
         return this;
@@ -1207,10 +1222,10 @@ directionData.forEach(item => item.type = 'percent');
 const AroundHelper = {
     directionData,
     tempPoint: {},
-    get: get$5,
+    get: get$4,
     toPoint(around, bounds, to, onlySize, pointBounds) {
         to || (to = {});
-        const point = get$5(around);
+        const point = get$4(around);
         to.x = point.x;
         to.y = point.y;
         if (point.type === 'percent') {
@@ -1231,7 +1246,7 @@ const AroundHelper = {
         }
     }
 };
-function get$5(around) {
+function get$4(around) {
     return typeof around === 'string' ? directionData[Direction9[around]] : around;
 }
 
@@ -3808,6 +3823,7 @@ function hitType(defaultValue) {
     return decorateLeafAttr(defaultValue, (key) => attr({
         set(value) {
             if (this.__setAttr(key, value)) {
+                this.__layout.hitCanvasChanged = true;
                 if (Debug.showHitView) {
                     this.__layout.surfaceChanged || this.__layout.surfaceChange();
                 }
@@ -3950,7 +3966,7 @@ function registerUIEvent() {
     };
 }
 
-const { copy: copy$6, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+const { copy: copy$6, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
 const matrix = {};
 const LeafHelper = {
     updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
@@ -4036,7 +4052,7 @@ const LeafHelper = {
     },
     zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
         copy$6(matrix, t.__localMatrix);
-        scaleOfOuter$3(matrix, origin, scaleX, scaleY);
+        scaleOfOuter$2(matrix, origin, scaleX, scaleY);
         moveByMatrix(t, matrix);
         t.scaleResize(scaleX, scaleY, resize !== true);
     },
@@ -4045,7 +4061,7 @@ const LeafHelper = {
     },
     rotateOfLocal(t, origin, angle) {
         copy$6(matrix, t.__localMatrix);
-        rotateOfOuter$3(matrix, origin, angle);
+        rotateOfOuter$2(matrix, origin, angle);
         moveByMatrix(t, matrix);
         t.rotation = MathHelper.formatRotation(t.rotation + angle);
     },
@@ -4072,11 +4088,24 @@ const LeafHelper = {
     setTransform(t, transform, resize) {
         const layout = getLayout(transform);
         if (resize) {
-            t.scaleResize(layout.scaleX / t.scaleX, layout.scaleY / t.scaleY, resize !== true);
+            const scaleX = layout.scaleX / t.scaleX;
+            const scaleY = layout.scaleY / t.scaleY;
             delete layout.scaleX;
             delete layout.scaleY;
+            t.set(layout);
+            t.scaleResize(scaleX, scaleY, resize !== true);
         }
-        t.set(layout);
+        else {
+            t.set(layout);
+        }
+    },
+    getLocalOrigin(t, origin) {
+        return PointHelper.tempToOuterOf(L.getInnerOrigin(t, origin), t.localTransform);
+    },
+    getInnerOrigin(t, origin) {
+        if (typeof origin === 'string')
+            AroundHelper.toPoint(origin, t.boxBounds, origin = {});
+        return origin;
     },
     getRelativeWorld(t, relative, temp) {
         copy$6(matrix, t.worldTransform);
@@ -5072,8 +5101,8 @@ const BranchRender = {
 const { LEAF, create } = IncrementId;
 const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
 const { toOuterOf } = BoundsHelper;
-const { tempToOuterOf, copy: copy$3 } = PointHelper;
-const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getRelativeWorld, drop } = LeafHelper;
+const { copy: copy$3 } = PointHelper;
+const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
 let Leaf = class Leaf {
     get tag() { return this.__tag; }
     set tag(_value) { }
@@ -5160,12 +5189,18 @@ let Leaf = class Leaf {
     }
     set(_data) { }
     get(_name) { return undefined; }
+    setAttr(name, value) { this[name] = value; }
+    getAttr(name) { return this[name]; }
+    getComputedAttr(name) { return this.__[name]; }
     toJSON() {
         return this.__.__getInputData();
     }
     toString() {
         return JSON.stringify(this.toJSON());
     }
+    toSVG() { return undefined; }
+    __SVG(_data) { }
+    toHTML() { return undefined; }
     __setAttr(_attrName, _newValue) { return true; }
     __getAttr(_attrName) { return undefined; }
     setProxyAttr(_attrName, _newValue) { }
@@ -5331,13 +5366,13 @@ let Leaf = class Leaf {
         moveLocal(this, x, y);
     }
     scaleOf(origin, scaleX, scaleY, resize) {
-        zoomOfLocal(this, tempToOuterOf(origin, this.localTransform), scaleX, scaleY, resize);
+        zoomOfLocal(this, getLocalOrigin(this, origin), scaleX, scaleY, resize);
     }
     rotateOf(origin, rotation) {
-        rotateOfLocal(this, tempToOuterOf(origin, this.localTransform), rotation);
+        rotateOfLocal(this, getLocalOrigin(this, origin), rotation);
     }
     skewOf(origin, skewX, skewY, resize) {
-        skewOfLocal(this, tempToOuterOf(origin, this.localTransform), skewX, skewY, resize);
+        skewOfLocal(this, getLocalOrigin(this, origin), skewX, skewY, resize);
     }
     transformWorld(worldTransform, resize) {
         transformWorld(this, worldTransform, resize);
@@ -5359,6 +5394,14 @@ let Leaf = class Leaf {
         this.scaleY *= scaleY;
     }
     __scaleResize(_scaleX, _scaleY) { }
+    resizeWidth(width) {
+        const scale = width / this.__localBoxBounds.width;
+        this.scaleResize(scale, this.__.lockRatio ? scale : 1);
+    }
+    resizeHeight(height) {
+        const scale = height / this.__localBoxBounds.height;
+        this.scaleResize(this.__.lockRatio ? scale : 1, scale);
+    }
     __hitWorld(_point) { return true; }
     __hit(_local) { return true; }
     __hitFill(_inner) { return true; }
@@ -5709,7 +5752,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.0.0-rc.25";
+const version = "1.0.0-rc.27";
 const inviteCode = {};
 
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6779,6 +6822,8 @@ const UIRender = {
             this.__drawRenderPath(canvas);
             if (fill && !ignoreFill)
                 this.__.__pixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
+            if (this.__.__isCanvas)
+                this.__drawAfterFill(canvas, options);
             if (stroke && !ignoreStroke)
                 this.__.__pixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
         }
@@ -6983,7 +7028,7 @@ __decorate([
     stateType(false)
 ], UI.prototype, "disabled", void 0);
 __decorate([
-    dataType(false)
+    surfaceType(false)
 ], UI.prototype, "locked", void 0);
 __decorate([
     sortType(0)
@@ -7081,6 +7126,9 @@ __decorate([
 __decorate([
     boundsType()
 ], UI.prototype, "autoHeight", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "lockRatio", void 0);
 __decorate([
     boundsType()
 ], UI.prototype, "autoBox", void 0);
@@ -7198,6 +7246,9 @@ __decorate([
 __decorate([
     dataType()
 ], UI.prototype, "disabledStyle", void 0);
+__decorate([
+    dataType({})
+], UI.prototype, "data", void 0);
 __decorate([
     rewrite(Leaf.prototype.reset)
 ], UI.prototype, "reset", null);
@@ -7670,9 +7721,9 @@ let Box = class Box extends Group {
                 if (!data.__autoSize) {
                     const b = this.__layout.boxBounds;
                     if (!data.__autoWidth)
-                        b.x = 0, b.width = data.width;
+                        b.height += b.y, b.width = data.width, b.x = b.y = 0;
                     if (!data.__autoHeight)
-                        b.y = 0, b.height = data.height;
+                        b.width += b.x, b.height = data.height, b.y = b.x = 0;
                 }
             }
             else {
@@ -7742,6 +7793,9 @@ let Box = class Box extends Group {
 __decorate([
     dataProcessor(BoxData)
 ], Box.prototype, "__", void 0);
+__decorate([
+    dataType(false)
+], Box.prototype, "resizeChildren", void 0);
 __decorate([
     affectRenderBoundsType('show')
 ], Box.prototype, "overflow", void 0);
@@ -7851,7 +7905,7 @@ Ellipse = __decorate([
 ], Ellipse);
 
 const { moveTo: moveTo$2, lineTo: lineTo$2, drawPoints: drawPoints$1 } = PathCommandDataHelper;
-const { rotate: rotate$1, getAngle: getAngle$2, getDistance: getDistance$2, defaultPoint } = PointHelper;
+const { rotate: rotate$1, getAngle: getAngle$1, getDistance: getDistance$2, defaultPoint } = PointHelper;
 const { toBounds: toBounds$1 } = PathBounds;
 let Line = class Line extends UI {
     get __tag() { return 'Line'; }
@@ -7866,7 +7920,7 @@ let Line = class Line extends UI {
     }
     set toPoint(value) {
         this.width = getDistance$2(defaultPoint, value);
-        this.rotation = getAngle$2(defaultPoint, value);
+        this.rotation = getAngle$1(defaultPoint, value);
         if (this.height)
             this.height = 0;
     }
@@ -8037,7 +8091,7 @@ let Canvas = class Canvas extends Rect {
         super(data);
         this.canvas = Creator.canvas(this.__);
         this.context = this.canvas.context;
-        this.__.__drawAfterFill = true;
+        this.__.__isCanvas = this.__.__drawAfterFill = true;
     }
     draw(ui, offset, scale, rotation) {
         ui.__layout.update();
@@ -8105,9 +8159,6 @@ __decorate([
 __decorate([
     resizeType()
 ], Canvas.prototype, "contextSettings", void 0);
-__decorate([
-    hitType('all')
-], Canvas.prototype, "hitFill", void 0);
 Canvas = __decorate([
     registerUI()
 ], Canvas);
@@ -8213,6 +8264,9 @@ __decorate([
 __decorate([
     boundsType(0)
 ], Text.prototype, "height", void 0);
+__decorate([
+    dataType(false)
+], Text.prototype, "resizeFontSize", void 0);
 __decorate([
     surfaceType('#000000')
 ], Text.prototype, "fill", void 0);
@@ -8625,7 +8679,7 @@ function getLeafPaint(attrName, paint, ui) {
         case 'angular':
             return PaintGradient.conicGradient(paint, boxBounds);
         default:
-            return paint.r ? { type: 'solid', style: ColorConvert.string(paint) } : undefined;
+            return paint.r !== undefined ? { type: 'solid', style: ColorConvert.string(paint) } : undefined;
     }
 }
 
@@ -8642,17 +8696,17 @@ const PaintModule = {
 };
 
 let origin = {};
-const { get: get$4, rotateOfOuter: rotateOfOuter$2, translate: translate$1, scaleOfOuter: scaleOfOuter$2, scale: scaleHelper, rotate } = MatrixHelper;
+const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate } = MatrixHelper;
 function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
-    const transform = get$4();
+    const transform = get$3();
     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);
+        rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
     data.transform = transform;
 }
 function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
-    const transform = get$4();
+    const transform = get$3();
     translate$1(transform, box.x + x, box.y + y);
     if (scaleX)
         scaleHelper(transform, scaleX, scaleY);
@@ -8661,10 +8715,10 @@ function clipMode(data, box, x, y, scaleX, scaleY, rotation) {
     data.transform = transform;
 }
 function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
-    const transform = get$4();
+    const transform = get$3();
     if (rotation) {
         if (align === 'center') {
-            rotateOfOuter$2(transform, { x: width / 2, y: height / 2 }, rotation);
+            rotateOfOuter$1(transform, { x: width / 2, y: height / 2 }, rotation);
         }
         else {
             rotate(transform, rotation);
@@ -8685,22 +8739,26 @@ function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, al
     origin.y = box.y + y;
     translate$1(transform, origin.x, origin.y);
     if (scaleX)
-        scaleOfOuter$2(transform, origin, scaleX, scaleY);
+        scaleOfOuter$1(transform, origin, scaleX, scaleY);
     data.transform = transform;
 }
 
-const { get: get$3, translate } = MatrixHelper;
+const { get: get$2, translate } = MatrixHelper;
 const tempBox = new Bounds();
 const tempPoint = {};
 function createData(leafPaint, image, paint, box) {
+    const { blendMode } = paint;
+    if (blendMode)
+        leafPaint.blendMode = blendMode;
+    leafPaint.data = getPatternData(paint, box, image);
+}
+function getPatternData(paint, box, image) {
     let { width, height } = image;
     if (paint.padding)
         box = tempBox.set(box).shrink(paint.padding);
-    const { opacity, mode, align, offset, scale, size, rotation, blendMode, repeat } = paint;
+    const { opacity, mode, align, offset, scale, size, rotation, repeat } = paint;
     const sameBox = box.width === width && box.height === height;
-    if (blendMode)
-        leafPaint.blendMode = blendMode;
-    const data = leafPaint.data = { mode };
+    const data = { mode };
     const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
     const swapWidth = swapSize ? height : width, swapHeight = swapSize ? width : height;
     let x = 0, y = 0, scaleX, scaleY;
@@ -8752,7 +8810,7 @@ function createData(leafPaint, image, paint, box) {
     }
     if (!data.transform) {
         if (box.x || box.y) {
-            data.transform = get$3();
+            data.transform = get$2();
             translate(data.transform, box.x, box.y);
         }
     }
@@ -8766,6 +8824,7 @@ function createData(leafPaint, image, paint, box) {
         data.opacity = opacity;
     if (repeat)
         data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat';
+    return data;
 }
 
 let cache, box = new Bounds();
@@ -8855,7 +8914,7 @@ function ignoreRender(ui, value) {
         leafer.renderer.ignore = value;
 }
 
-const { get: get$2, scale, copy: copy$1 } = MatrixHelper;
+const { get: get$1, scale, copy: copy$1 } = MatrixHelper;
 const { ceil, abs: abs$1 } = Math;
 function createPattern(ui, paint, pixelRatio) {
     let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
@@ -8866,7 +8925,7 @@ function createPattern(ui, paint, pixelRatio) {
         const { image, data } = paint;
         let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, opacity, transform, repeat } = data;
         if (sx) {
-            imageMatrix = get$2();
+            imageMatrix = get$1();
             copy$1(imageMatrix, transform);
             scale(imageMatrix, 1 / sx, 1 / sy);
             scaleX *= sx;
@@ -8901,7 +8960,7 @@ function createPattern(ui, paint, pixelRatio) {
         }
         if (transform || scaleX !== 1 || scaleY !== 1) {
             if (!imageMatrix) {
-                imageMatrix = get$2();
+                imageMatrix = get$1();
                 if (transform)
                     copy$1(imageMatrix, transform);
             }
@@ -9002,13 +9061,14 @@ function recycleImage(attrName, data) {
 
 const PaintImageModule = {
     image,
+    checkImage,
+    createPattern,
+    recycleImage,
     createData,
+    getPatternData,
     fillOrFitMode,
     clipMode,
-    repeatMode,
-    createPattern,
-    checkImage,
-    recycleImage
+    repeatMode
 };
 
 const { toPoint: toPoint$2 } = AroundHelper;
@@ -9038,8 +9098,8 @@ function applyStops(gradient, stops, opacity) {
     }
 }
 
-const { getAngle: getAngle$1, getDistance: getDistance$1 } = PointHelper;
-const { get: get$1, rotateOfOuter: rotateOfOuter$1, scaleOfOuter: scaleOfOuter$1 } = MatrixHelper;
+const { getAngle, getDistance: getDistance$1 } = PointHelper;
+const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper;
 const { toPoint: toPoint$1 } = AroundHelper;
 const realFrom$1 = {};
 const realTo$1 = {};
@@ -9047,23 +9107,35 @@ function radialGradient(paint, box) {
     let { from, to, type, opacity, blendMode, stretch } = paint;
     toPoint$1(from || 'center', box, realFrom$1);
     toPoint$1(to || 'bottom', box, realTo$1);
-    const { width, height } = box;
-    let transform;
-    if (width !== height || stretch) {
-        transform = get$1();
-        scaleOfOuter$1(transform, realFrom$1, width / height * (stretch || 1), 1);
-        rotateOfOuter$1(transform, realFrom$1, getAngle$1(realFrom$1, realTo$1) + 90);
-    }
     const style = Platform.canvas.createRadialGradient(realFrom$1.x, realFrom$1.y, 0, realFrom$1.x, realFrom$1.y, getDistance$1(realFrom$1, realTo$1));
     applyStops(style, paint.stops, opacity);
-    const data = { type, style, transform };
+    const data = { type, style };
+    const transform = getTransform(box, realFrom$1, realTo$1, stretch, true);
+    if (transform)
+        data.transform = transform;
     if (blendMode)
         data.blendMode = blendMode;
     return data;
 }
+function getTransform(box, from, to, stretch, rotate90) {
+    let transform;
+    const { width, height } = box;
+    if (width !== height || stretch) {
+        const angle = getAngle(from, to);
+        transform = get();
+        if (rotate90) {
+            scaleOfOuter(transform, from, width / height * (stretch || 1), 1);
+            rotateOfOuter(transform, from, angle + 90);
+        }
+        else {
+            scaleOfOuter(transform, from, 1, width / height * (stretch || 1));
+            rotateOfOuter(transform, from, angle);
+        }
+    }
+    return transform;
+}
 
-const { getAngle, getDistance } = PointHelper;
-const { get, rotateOfOuter, scaleOfOuter } = MatrixHelper;
+const { getDistance } = PointHelper;
 const { toPoint } = AroundHelper;
 const realFrom = {};
 const realTo = {};
@@ -9071,20 +9143,12 @@ function conicGradient(paint, box) {
     let { from, to, type, opacity, blendMode, stretch } = paint;
     toPoint(from || 'center', box, realFrom);
     toPoint(to || 'bottom', box, realTo);
-    const { width, height } = box;
-    const transform = get();
-    const angle = getAngle(realFrom, realTo);
-    if (Platform.conicGradientRotate90) {
-        scaleOfOuter(transform, realFrom, width / height * (stretch || 1), 1);
-        rotateOfOuter(transform, realFrom, angle + 90);
-    }
-    else {
-        scaleOfOuter(transform, realFrom, 1, width / height * (stretch || 1));
-        rotateOfOuter(transform, realFrom, angle);
-    }
     const style = Platform.conicGradientSupport ? Platform.canvas.createConicGradient(0, realFrom.x, realFrom.y) : Platform.canvas.createRadialGradient(realFrom.x, realFrom.y, 0, realFrom.x, realFrom.y, getDistance(realFrom, realTo));
     applyStops(style, paint.stops, opacity);
-    const data = { type, style, transform };
+    const data = { type, style };
+    const transform = getTransform(box, realFrom, realTo, stretch || 1, Platform.conicGradientRotate90);
+    if (transform)
+        data.transform = transform;
     if (blendMode)
         data.blendMode = blendMode;
     return data;
@@ -9093,7 +9157,8 @@ function conicGradient(paint, box) {
 const PaintGradientModule = {
     linearGradient,
     radialGradient,
-    conicGradient
+    conicGradient,
+    getTransform
 };
 
 const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
@@ -9819,11 +9884,21 @@ const ExportModule = {
                 resolve();
                 this.running = false;
             };
+            const { toURL } = Platform;
+            const { download } = Platform.origin;
+            const fileType = FileHelper.fileType(filename);
             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);
+            else if (fileType === 'json') {
+                download(toURL(JSON.stringify(leaf.toJSON()), 'text'), filename);
+                return over({ data: true });
+            }
+            if (filename === 'svg') {
+                return over({ data: leaf.toSVG() });
+            }
+            else if (fileType === 'svg') {
+                download(toURL(leaf.toSVG(), 'svg'), filename);
                 return over({ data: true });
             }
             const { leafer } = leaf;