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

package/dist/web.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$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) {
@@ -4036,7 +4052,7 @@ const LeafHelper = {
     },
     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);
     },
@@ -4045,7 +4061,7 @@ const LeafHelper = {
     },
     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);
     },
@@ -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$7(matrix$1, t.worldTransform);
@@ -5072,8 +5101,8 @@ const BranchRender = {
 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;
 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 = {};
 
 const debug$7 = Debug.get('LeaferCanvas');
@@ -5720,10 +5763,12 @@ class LeaferCanvas extends LeaferCanvasBase {
         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();
@@ -6620,8 +6665,12 @@ class Picker {
     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;
@@ -7178,6 +7227,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);
         }
@@ -7382,7 +7433,7 @@ __decorate([
     stateType(false)
 ], UI.prototype, "disabled", void 0);
 __decorate([
-    dataType(false)
+    surfaceType(false)
 ], UI.prototype, "locked", void 0);
 __decorate([
     sortType(0)
@@ -7480,6 +7531,9 @@ __decorate([
 __decorate([
     boundsType()
 ], UI.prototype, "autoHeight", void 0);
+__decorate([
+    boundsType()
+], UI.prototype, "lockRatio", void 0);
 __decorate([
     boundsType()
 ], UI.prototype, "autoBox", void 0);
@@ -7597,6 +7651,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);
@@ -8069,9 +8126,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 {
@@ -8141,6 +8198,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);
@@ -8250,7 +8310,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'; }
@@ -8265,7 +8325,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;
     }
@@ -8436,7 +8496,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();
@@ -8504,9 +8564,6 @@ __decorate([
 __decorate([
     resizeType()
 ], Canvas.prototype, "contextSettings", void 0);
-__decorate([
-    hitType('all')
-], Canvas.prototype, "hitFill", void 0);
 Canvas = __decorate([
     registerUI()
 ], Canvas);
@@ -8612,6 +8669,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);
@@ -8970,20 +9030,32 @@ let DragEvent = class DragEvent extends PointerEvent {
             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) {
@@ -9011,6 +9083,14 @@ let DragEvent = class DragEvent extends PointerEvent {
     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;
@@ -9627,7 +9707,8 @@ const config = {
         swipeDistance: 20,
         preventDefaultMenu: true
     },
-    cursor: {}
+    cursor: {},
+    keyEvent: true
 };
 
 const { pathHasEventType, getMoveEventData: getMoveEventData$1, getZoomEventData: getZoomEventData$1, getRotateEventData: getRotateEventData$1 } = InteractionHelper;
@@ -9777,6 +9858,8 @@ class InteractionBase {
         this.transformer.transformEnd();
     }
     keyDown(data) {
+        if (!this.config.keyEvent)
+            return;
         const { code } = data;
         if (!this.downKeyMap[code]) {
             this.downKeyMap[code] = true;
@@ -9790,6 +9873,8 @@ class InteractionBase {
         this.emit(KeyEvent.DOWN, data, this.defaultPath);
     }
     keyUp(data) {
+        if (!this.config.keyEvent)
+            return;
         const { code } = data;
         this.downKeyMap[code] = false;
         Keyboard.setUpCode(code);
@@ -10090,27 +10175,6 @@ class HitCanvasManager extends CanvasManager {
     }
 }
 
-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 = Leaf.prototype;
@@ -10147,7 +10211,7 @@ const matrix = new Matrix();
 const ui$2 = 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)
@@ -10179,11 +10243,11 @@ ui$2.__hit = function (inner) {
     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;
@@ -10215,8 +10279,10 @@ ui$2.__hit = function (inner) {
 const ui$1 = new UI();
 const rect = 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);
@@ -10236,6 +10302,27 @@ group.pick = function (hitPoint, options) {
     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);
@@ -10524,11 +10611,15 @@ class Interaction extends InteractionBase {
         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);
@@ -10542,6 +10633,8 @@ class Interaction extends InteractionBase {
         this.lastGestureRotation = e.rotation;
     }
     onGestureend(e) {
+        if (this.useMultiTouch)
+            return;
         this.preventDefaultWheel(e);
         this.transformEnd();
     }
@@ -10861,7 +10954,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;
     }
 }
 
@@ -10878,17 +10971,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);
@@ -10897,10 +10990,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);
@@ -10921,22 +11014,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;
@@ -10988,7 +11085,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);
         }
     }
@@ -11002,6 +11099,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();
@@ -11091,7 +11189,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;
@@ -11102,7 +11200,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;
@@ -11137,7 +11235,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);
             }
@@ -11238,13 +11336,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;
@@ -11274,8 +11373,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 = {};
@@ -11283,23 +11382,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 = {};
@@ -11307,20 +11418,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;
@@ -11329,7 +11432,8 @@ function conicGradient(paint, box) {
 const PaintGradientModule = {
     linearGradient,
     radialGradient,
-    conicGradient
+    conicGradient,
+    getTransform
 };
 
 const { copy, toOffsetOutBounds: toOffsetOutBounds$1 } = BoundsHelper;
@@ -12055,11 +12159,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;
@@ -12208,11 +12322,5 @@ Object.assign(Creator, {
     hitCanvasManager: () => new HitCanvasManager()
 });
 useCanvas();
-window.addEventListener('unload', () => {
-    const { list } = Leafer;
-    list.forEach(leafer => leafer.destroy(true));
-    list.destroy();
-    ImageManager.destroy();
-});
 
 export { AlignHelper, AnimateEvent, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragEvent, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Export, FileHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, LeaferTypeCreator, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MultiTouchHelper, 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, PointerButton, PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, 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, inviteCode, 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, visibleType, zoomLayerType };