leafer-ui 1.0.0-rc.25 → 1.0.0-rc.27

package/dist/web.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$7, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$3, rotateOfOuter: rotateOfOuter$3, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
+    const { copy: copy$7, toInnerPoint: toInnerPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
     const matrix$1 = {};
     const LeafHelper = {
         updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
@@ -4039,7 +4055,7 @@ var LeaferUI = (function (exports) {
         },
         zoomOfLocal(t, origin, scaleX, scaleY = scaleX, resize) {
             copy$7(matrix$1, t.__localMatrix);
-            scaleOfOuter$3(matrix$1, origin, scaleX, scaleY);
+            scaleOfOuter$2(matrix$1, origin, scaleX, scaleY);
             moveByMatrix(t, matrix$1);
             t.scaleResize(scaleX, scaleY, resize !== true);
         },
@@ -4048,7 +4064,7 @@ var LeaferUI = (function (exports) {
         },
         rotateOfLocal(t, origin, angle) {
             copy$7(matrix$1, t.__localMatrix);
-            rotateOfOuter$3(matrix$1, origin, angle);
+            rotateOfOuter$2(matrix$1, origin, angle);
             moveByMatrix(t, matrix$1);
             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$7(matrix$1, 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$4 } = PointHelper;
-    const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getRelativeWorld, drop } = LeafHelper;
+    const { copy: copy$4 } = 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 = {};
 
     const debug$7 = Debug.get('LeaferCanvas');
@@ -5723,10 +5766,12 @@ var LeaferUI = (function (exports) {
             const { style } = this.view;
             style.display || (style.display = 'block');
             this.parentView = this.view.parentElement;
-            if (this.parentView)
-                this.parentView.style.userSelect = 'none';
+            if (this.parentView) {
+                const pStyle = this.parentView.style;
+                pStyle.webkitUserSelect = pStyle.userSelect = 'none';
+            }
             if (Platform.syncDomFont && !this.parentView) {
-                this.view.style.display = 'none';
+                style.display = 'none';
                 document.body.appendChild(this.view);
             }
             this.__createContext();
@@ -6623,8 +6668,12 @@ var LeaferUI = (function (exports) {
         hitChild(child, point, proxy) {
             if (this.exclude && this.exclude.has(child))
                 return;
-            if (child.__hitWorld(point))
+            if (child.__hitWorld(point)) {
+                const { parent } = child;
+                if (parent && parent.__hasMask && !child.__.mask && !parent.children.some(item => item.__.mask && item.__hitWorld(point)))
+                    return;
                 this.findList.add(proxy || child);
+            }
         }
         clear() {
             this.point = null;
@@ -7181,6 +7230,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);
             }
@@ -7385,7 +7436,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)
@@ -7483,6 +7534,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);
@@ -7600,6 +7654,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);
@@ -8072,9 +8129,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 {
@@ -8144,6 +8201,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);
@@ -8253,7 +8313,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'; }
@@ -8268,7 +8328,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;
         }
@@ -8439,7 +8499,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();
@@ -8507,9 +8567,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);
@@ -8615,6 +8672,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);
@@ -8973,20 +9033,32 @@ var LeaferUI = (function (exports) {
                 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;
+        static getMoveInDragBounds(childBox, dragBounds, move, change) {
+            const x = childBox.x + move.x, y = childBox.y + move.y;
+            const right = x + childBox.width, bottom = y + childBox.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;
+            if (BoundsHelper.includes(childBox, dragBounds)) {
+                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;
+            }
+            else {
+                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) {
@@ -9014,6 +9086,14 @@ var LeaferUI = (function (exports) {
         getLocalTotal(relative) {
             return this.getLocalMove(relative, true);
         }
+        getPageBounds() {
+            const total = this.getPageTotal();
+            const start = this.getPage();
+            const bounds = {};
+            BoundsHelper.set(bounds, start.x - total.x, start.y - total.y, total.x, total.y);
+            BoundsHelper.unsign(bounds);
+            return bounds;
+        }
         assignMove(total) {
             move.x = total ? this.totalX : this.moveX;
             move.y = total ? this.totalY : this.moveY;
@@ -9630,7 +9710,8 @@ var LeaferUI = (function (exports) {
             swipeDistance: 20,
             preventDefaultMenu: true
         },
-        cursor: {}
+        cursor: {},
+        keyEvent: true
     };
 
     const { pathHasEventType, getMoveEventData: getMoveEventData$1, getZoomEventData: getZoomEventData$1, getRotateEventData: getRotateEventData$1 } = InteractionHelper;
@@ -9780,6 +9861,8 @@ var LeaferUI = (function (exports) {
             this.transformer.transformEnd();
         }
         keyDown(data) {
+            if (!this.config.keyEvent)
+                return;
             const { code } = data;
             if (!this.downKeyMap[code]) {
                 this.downKeyMap[code] = true;
@@ -9793,6 +9876,8 @@ var LeaferUI = (function (exports) {
             this.emit(exports.KeyEvent.DOWN, data, this.defaultPath);
         }
         keyUp(data) {
+            if (!this.config.keyEvent)
+                return;
             const { code } = data;
             this.downKeyMap[code] = false;
             Keyboard.setUpCode(code);
@@ -10093,27 +10178,6 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const canvas$1 = LeaferCanvasBase.prototype;
-    canvas$1.hitFill = function (point, fillRule) {
-        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
-    };
-    canvas$1.hitStroke = function (point, strokeWidth) {
-        this.strokeWidth = strokeWidth;
-        return this.context.isPointInStroke(point.x, point.y);
-    };
-    canvas$1.hitPixel = function (radiusPoint, offset, scale = 1) {
-        let { x, y, radiusX, radiusY } = radiusPoint;
-        if (offset)
-            x -= offset.x, y -= offset.y;
-        tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
-        const { data } = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width, tempBounds$1.height);
-        for (let i = 0, len = data.length; i < len; i += 4) {
-            if (data[i + 3] > 0)
-                return true;
-        }
-        return data[3] > 0;
-    };
-
     const { toInnerRadiusPointOf, copy: copy$2, setRadius } = PointHelper;
     const inner = {};
     const leaf = exports.Leaf.prototype;
@@ -10150,7 +10214,7 @@ var LeaferUI = (function (exports) {
     const ui$2 = exports.UI.prototype;
     ui$2.__updateHitCanvas = function () {
         const data = this.__, { hitCanvasManager } = this.leafer;
-        const isHitPixelFill = data.__pixelFill && data.hitFill === 'pixel';
+        const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel';
         const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
         const isHitPixel = isHitPixelFill || isHitPixelStroke;
         if (!this.__hitCanvas)
@@ -10182,11 +10246,11 @@ var LeaferUI = (function (exports) {
         if (data.__isHitPixel && this.__hitPixel(inner))
             return true;
         const { hitFill } = data;
-        const needHitFillPath = ((data.fill && hitFill == 'path') || hitFill === 'all');
+        const needHitFillPath = ((data.fill || data.__isCanvas) && (hitFill === 'path' || (hitFill === 'pixel' && !(data.__pixelFill || data.__isCanvas)))) || hitFill === 'all';
         if (needHitFillPath && this.__hitFill(inner))
             return true;
         const { hitStroke, __strokeWidth } = data;
-        const needHitStrokePath = ((data.stroke && hitStroke == 'path') || hitStroke === 'all');
+        const needHitStrokePath = (data.stroke && (hitStroke === 'path' || (hitStroke === 'pixel' && !data.__pixelStroke))) || hitStroke === 'all';
         if (!needHitFillPath && !needHitStrokePath)
             return false;
         const radiusWidth = inner.radiusX * 2;
@@ -10218,8 +10282,10 @@ var LeaferUI = (function (exports) {
     const ui$1 = new exports.UI();
     const rect = exports.Rect.prototype;
     rect.__updateHitCanvas = function () {
-        if (this.stroke || this.cornerRadius)
+        if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
             ui$1.__updateHitCanvas.call(this);
+        else if (this.__hitCanvas)
+            this.__hitCanvas = null;
     };
     rect.__hitFill = function (inner) {
         return this.__hitCanvas ? ui$1.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
@@ -10239,6 +10305,27 @@ var LeaferUI = (function (exports) {
         return this.leafer ? this.leafer.selector.getByPoint(hitPoint, options.hitRadius || 0, Object.assign(Object.assign({}, options), { target: this })) : null;
     };
 
+    const canvas$1 = LeaferCanvasBase.prototype;
+    canvas$1.hitFill = function (point, fillRule) {
+        return fillRule ? this.context.isPointInPath(point.x, point.y, fillRule) : this.context.isPointInPath(point.x, point.y);
+    };
+    canvas$1.hitStroke = function (point, strokeWidth) {
+        this.strokeWidth = strokeWidth;
+        return this.context.isPointInStroke(point.x, point.y);
+    };
+    canvas$1.hitPixel = function (radiusPoint, offset, scale = 1) {
+        let { x, y, radiusX, radiusY } = radiusPoint;
+        if (offset)
+            x -= offset.x, y -= offset.y;
+        tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
+        const { data } = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width || 1, tempBounds$1.height || 1);
+        for (let i = 0, len = data.length; i < len; i += 4) {
+            if (data[i + 3] > 0)
+                return true;
+        }
+        return data[3] > 0;
+    };
+
     const PointerEventHelper = {
         convert(e, local) {
             const base = InteractionHelper.getBase(e);
@@ -10527,11 +10614,15 @@ var LeaferUI = (function (exports) {
             scale !== 1 ? this.zoom(getZoomEventData(local, scale, eventBase)) : this.move(getMoveEventData(local, wheel.getMove ? wheel.getMove(e, wheel) : WheelEventHelper.getMove(e, wheel), eventBase));
         }
         onGesturestart(e) {
+            if (this.useMultiTouch)
+                return;
             this.preventDefaultWheel(e);
             this.lastGestureScale = 1;
             this.lastGestureRotation = 0;
         }
         onGesturechange(e) {
+            if (this.useMultiTouch)
+                return;
             this.preventDefaultWheel(e);
             const local = this.getLocal(e);
             const eventBase = InteractionHelper.getBase(e);
@@ -10545,6 +10636,8 @@ var LeaferUI = (function (exports) {
             this.lastGestureRotation = e.rotation;
         }
         onGestureend(e) {
+            if (this.useMultiTouch)
+                return;
             this.preventDefaultWheel(e);
             this.transformEnd();
         }
@@ -10864,7 +10957,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;
         }
     }
 
@@ -10881,17 +10974,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);
@@ -10900,10 +10993,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);
@@ -10924,22 +11017,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;
@@ -10991,7 +11088,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);
             }
         }
@@ -11005,6 +11102,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();
@@ -11094,7 +11192,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;
@@ -11105,7 +11203,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;
@@ -11140,7 +11238,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);
                 }
@@ -11241,13 +11339,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;
@@ -11277,8 +11376,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 = {};
@@ -11286,23 +11385,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 = {};
@@ -11310,20 +11421,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;
@@ -11332,7 +11435,8 @@ var LeaferUI = (function (exports) {
     const PaintGradientModule = {
         linearGradient,
         radialGradient,
-        conicGradient
+        conicGradient,
+        getTransform
     };
 
     const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
@@ -12058,11 +12162,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;
@@ -12211,12 +12325,6 @@ var LeaferUI = (function (exports) {
         hitCanvasManager: () => new HitCanvasManager()
     });
     useCanvas();
-    window.addEventListener('unload', () => {
-        const { list } = exports.Leafer;
-        list.forEach(leafer => leafer.destroy(true));
-        list.destroy();
-        ImageManager.destroy();
-    });
 
     exports.AlignHelper = AlignHelper;
     exports.AnimateEvent = AnimateEvent;