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

package/dist/worker.js

@@ -2,6 +2,14 @@ var LeaferUI = (function (exports) {
     'use strict';
 
     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,
@@ -959,6 +967,9 @@ var LeaferUI = (function (exports) {
             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);
         },
@@ -1107,6 +1118,10 @@ var LeaferUI = (function (exports) {
             BoundsHelper.setListWithFn(this, list, boundsDataFn);
             return this;
         }
+        setPoint(point) {
+            BoundsHelper.setPoint(this, point);
+            return this;
+        }
         setPoints(points) {
             BoundsHelper.setPoints(this, points);
             return this;
@@ -1210,10 +1225,10 @@ var LeaferUI = (function (exports) {
     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') {
@@ -1234,7 +1249,7 @@ var LeaferUI = (function (exports) {
             }
         }
     };
-    function get$5(around) {
+    function get$4(around) {
         return typeof around === 'string' ? directionData[exports.Direction9[around]] : around;
     }
 
@@ -3811,6 +3826,7 @@ var LeaferUI = (function (exports) {
         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();
                     }
@@ -3953,7 +3969,7 @@ var LeaferUI = (function (exports) {
         };
     }
 
-    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) {
@@ -4039,7 +4055,7 @@ var LeaferUI = (function (exports) {
         },
         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);
         },
@@ -4048,7 +4064,7 @@ var LeaferUI = (function (exports) {
         },
         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);
         },
@@ -4075,11 +4091,24 @@ var LeaferUI = (function (exports) {
         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);
@@ -5075,8 +5104,8 @@ var LeaferUI = (function (exports) {
     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;
     exports.Leaf = class Leaf {
         get tag() { return this.__tag; }
         set tag(_value) { }
@@ -5163,12 +5192,18 @@ var LeaferUI = (function (exports) {
         }
         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) { }
@@ -5334,13 +5369,13 @@ var LeaferUI = (function (exports) {
             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);
@@ -5362,6 +5397,14 @@ var LeaferUI = (function (exports) {
             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; }
@@ -5712,7 +5755,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.0.0-rc.25";
+    const version = "1.0.0-rc.27";
     const inviteCode = {};
 
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6782,6 +6825,8 @@ var LeaferUI = (function (exports) {
                 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);
             }
@@ -6986,7 +7031,7 @@ var LeaferUI = (function (exports) {
         stateType(false)
     ], exports.UI.prototype, "disabled", void 0);
     __decorate([
-        dataType(false)
+        surfaceType(false)
     ], exports.UI.prototype, "locked", void 0);
     __decorate([
         sortType(0)
@@ -7084,6 +7129,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType()
     ], exports.UI.prototype, "autoHeight", void 0);
+    __decorate([
+        boundsType()
+    ], exports.UI.prototype, "lockRatio", void 0);
     __decorate([
         boundsType()
     ], exports.UI.prototype, "autoBox", void 0);
@@ -7201,6 +7249,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataType()
     ], exports.UI.prototype, "disabledStyle", void 0);
+    __decorate([
+        dataType({})
+    ], exports.UI.prototype, "data", void 0);
     __decorate([
         rewrite(exports.Leaf.prototype.reset)
     ], exports.UI.prototype, "reset", null);
@@ -7673,9 +7724,9 @@ var LeaferUI = (function (exports) {
                     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 {
@@ -7745,6 +7796,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         dataProcessor(BoxData)
     ], exports.Box.prototype, "__", void 0);
+    __decorate([
+        dataType(false)
+    ], exports.Box.prototype, "resizeChildren", void 0);
     __decorate([
         affectRenderBoundsType('show')
     ], exports.Box.prototype, "overflow", void 0);
@@ -7854,7 +7908,7 @@ var LeaferUI = (function (exports) {
     ], exports.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;
     exports.Line = class Line extends exports.UI {
         get __tag() { return 'Line'; }
@@ -7869,7 +7923,7 @@ var LeaferUI = (function (exports) {
         }
         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;
         }
@@ -8040,7 +8094,7 @@ var LeaferUI = (function (exports) {
             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();
@@ -8108,9 +8162,6 @@ var LeaferUI = (function (exports) {
     __decorate([
         resizeType()
     ], exports.Canvas.prototype, "contextSettings", void 0);
-    __decorate([
-        hitType('all')
-    ], exports.Canvas.prototype, "hitFill", void 0);
     exports.Canvas = __decorate([
         registerUI()
     ], exports.Canvas);
@@ -8216,6 +8267,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType(0)
     ], exports.Text.prototype, "height", void 0);
+    __decorate([
+        dataType(false)
+    ], exports.Text.prototype, "resizeFontSize", void 0);
     __decorate([
         surfaceType('#000000')
     ], exports.Text.prototype, "fill", void 0);
@@ -8628,7 +8682,7 @@ var LeaferUI = (function (exports) {
             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;
         }
     }
 
@@ -8645,17 +8699,17 @@ var LeaferUI = (function (exports) {
     };
 
     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);
@@ -8664,10 +8718,10 @@ var LeaferUI = (function (exports) {
         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);
@@ -8688,22 +8742,26 @@ var LeaferUI = (function (exports) {
         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;
@@ -8755,7 +8813,7 @@ var LeaferUI = (function (exports) {
         }
         if (!data.transform) {
             if (box.x || box.y) {
-                data.transform = get$3();
+                data.transform = get$2();
                 translate(data.transform, box.x, box.y);
             }
         }
@@ -8769,6 +8827,7 @@ var LeaferUI = (function (exports) {
             data.opacity = opacity;
         if (repeat)
             data.repeat = typeof repeat === 'string' ? (repeat === 'x' ? 'repeat-x' : 'repeat-y') : 'repeat';
+        return data;
     }
 
     let cache, box = new Bounds();
@@ -8858,7 +8917,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -8869,7 +8928,7 @@ var LeaferUI = (function (exports) {
             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;
@@ -8904,7 +8963,7 @@ var LeaferUI = (function (exports) {
             }
             if (transform || scaleX !== 1 || scaleY !== 1) {
                 if (!imageMatrix) {
-                    imageMatrix = get$2();
+                    imageMatrix = get$1();
                     if (transform)
                         copy$1(imageMatrix, transform);
                 }
@@ -9005,13 +9064,14 @@ var LeaferUI = (function (exports) {
 
     const PaintImageModule = {
         image,
+        checkImage,
+        createPattern,
+        recycleImage,
         createData,
+        getPatternData,
         fillOrFitMode,
         clipMode,
-        repeatMode,
-        createPattern,
-        checkImage,
-        recycleImage
+        repeatMode
     };
 
     const { toPoint: toPoint$2 } = AroundHelper;
@@ -9041,8 +9101,8 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    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 = {};
@@ -9050,23 +9110,35 @@ var LeaferUI = (function (exports) {
         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 = {};
@@ -9074,20 +9146,12 @@ var LeaferUI = (function (exports) {
         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;
@@ -9096,7 +9160,8 @@ var LeaferUI = (function (exports) {
     const PaintGradientModule = {
         linearGradient,
         radialGradient,
-        conicGradient
+        conicGradient,
+        getTransform
     };
 
     const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
@@ -9822,11 +9887,21 @@ var LeaferUI = (function (exports) {
                     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;