@leafer/worker 1.6.6 → 1.7.0

package/dist/worker.js

@@ -46,7 +46,7 @@ var LeaferUI = (function (exports) {
     };
     const I$2 = IncrementId;
 
-    const { round: round$6, pow: pow$2, PI: PI$5 } = Math;
+    const { round: round$6, pow: pow$2, PI: PI$4 } = Math;
     const MathHelper = {
         within(value, min, max) {
             if (typeof min === 'object')
@@ -142,9 +142,9 @@ var LeaferUI = (function (exports) {
     function randInt(num) {
         return Math.round(Math.random() * num);
     }
-    const OneRadian = PI$5 / 180;
-    const PI2 = PI$5 * 2;
-    const PI_2 = PI$5 / 2;
+    const OneRadian = PI$4 / 180;
+    const PI2 = PI$4 * 2;
+    const PI_2 = PI$4 / 2;
     function getPointData() { return { x: 0, y: 0 }; }
     function getBoundsData() { return { x: 0, y: 0, width: 0, height: 0 }; }
     function getMatrixData() { return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }; }
@@ -439,7 +439,7 @@ var LeaferUI = (function (exports) {
     const M$a = MatrixHelper;
 
     const { toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3 } = MatrixHelper;
-    const { sin: sin$5, cos: cos$5, abs: abs$7, sqrt: sqrt$4, atan2: atan2$2, min: min$1, round: round$5, PI: PI$4 } = Math;
+    const { sin: sin$5, cos: cos$5, abs: abs$7, sqrt: sqrt$4, atan2: atan2$2, min: min$1, round: round$5 } = Math;
     const PointHelper = {
         defaultPoint: getPointData(),
         tempPoint: {},
@@ -552,10 +552,11 @@ var LeaferUI = (function (exports) {
         getRadianFrom(fromX, fromY, originX, originY, toX, toY, toOriginX, toOriginY) {
             if (toOriginX === undefined)
                 toOriginX = originX, toOriginY = originY;
-            let fromAngle = atan2$2(fromY - originY, fromX - originX);
-            let toAngle = atan2$2(toY - toOriginY, toX - toOriginX);
-            const radian = toAngle - fromAngle;
-            return radian < -PI$4 ? radian + PI2 : radian;
+            const a = fromX - originX;
+            const b = fromY - originY;
+            const c = toX - toOriginX;
+            const d = toY - toOriginY;
+            return Math.atan2(a * d - b * c, a * c + b * d);
         },
         getAtan2(t, to) {
             return atan2$2(to.y - t.y, to.x - t.x);
@@ -3342,7 +3343,7 @@ var LeaferUI = (function (exports) {
     const { arcTo } = PathCommandDataHelper;
     const PathCorner = {
         smooth(data, cornerRadius, _cornerSmoothing) {
-            let command, commandLen;
+            let command, lastCommand, commandLen;
             let i = 0, x = 0, y = 0, startX = 0, startY = 0, secondX = 0, secondY = 0, lastX = 0, lastY = 0;
             const len = data.length;
             const smooth = [];
@@ -3380,8 +3381,10 @@ var LeaferUI = (function (exports) {
                         lastY = y;
                         break;
                     case Z$3:
-                        arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY);
-                        smooth.push(Z$3);
+                        if (lastCommand !== Z$3) {
+                            arcTo(smooth, startX, startY, secondX, secondY, cornerRadius, lastX, lastY);
+                            smooth.push(Z$3);
+                        }
                         i += 1;
                         break;
                     default:
@@ -3390,6 +3393,7 @@ var LeaferUI = (function (exports) {
                             smooth.push(data[i + j]);
                         i += commandLen;
                 }
+                lastCommand = command;
             }
             if (command !== Z$3) {
                 smooth[1] = startX;
@@ -3886,12 +3890,12 @@ var LeaferUI = (function (exports) {
             try {
                 if (transform && pattern.setTransform) {
                     pattern.setTransform(transform);
-                    transform = null;
+                    transform = undefined;
                 }
             }
             catch (_a) { }
             if (paint)
-                paint.transform = transform;
+                DataHelper.stintSet(paint, 'transform', transform);
             return pattern;
         }
         destroy() {
@@ -3996,10 +4000,14 @@ var LeaferUI = (function (exports) {
         }));
     }
     const pathType = boundsType;
-    function affectStrokeBoundsType(defaultValue) {
+    function affectStrokeBoundsType(defaultValue, useStroke) {
         return decorateLeafAttr(defaultValue, (key) => attr({
             set(value) {
-                this.__setAttr(key, value) && doStrokeType(this);
+                if (this.__setAttr(key, value)) {
+                    doStrokeType(this);
+                    if (useStroke)
+                        this.__.__useStroke = true;
+                }
             }
         }));
     }
@@ -5425,6 +5433,8 @@ var LeaferUI = (function (exports) {
 
     const LeafRender = {
         __render(canvas, options) {
+            if (options.shape)
+                return this.__renderShape(canvas, options);
             if (this.__worldOpacity) {
                 const data = this.__;
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
@@ -5434,12 +5444,10 @@ var LeaferUI = (function (exports) {
                         return this.__renderEraser(canvas, options);
                     const tempCanvas = canvas.getSameCanvas(true, true);
                     this.__draw(tempCanvas, options, canvas);
-                    if (this.__worldFlipped) {
+                    if (this.__worldFlipped)
                         canvas.copyWorldByReset(tempCanvas, this.__nowWorld, null, data.__blendMode, true);
-                    }
-                    else {
+                    else
                         canvas.copyWorldToInner(tempCanvas, this.__nowWorld, this.__layout.renderBounds, data.__blendMode);
-                    }
                     tempCanvas.recycle(this.__nowWorld);
                 }
                 else {
@@ -5449,6 +5457,12 @@ var LeaferUI = (function (exports) {
                     Debug.drawBounds(this, canvas, options);
             }
         },
+        __renderShape(canvas, options) {
+            if (this.__worldOpacity) {
+                canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
+                this.__drawShape(canvas, options);
+            }
+        },
         __clip(canvas, options) {
             if (this.__worldOpacity) {
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
@@ -5868,7 +5882,8 @@ var LeaferUI = (function (exports) {
         __drawFast(_canvas, _options) { }
         __draw(_canvas, _options, _originCanvas) { }
         __clip(_canvas, _options) { }
-        __renderShape(_canvas, _options, _ignoreFill, _ignoreStroke) { }
+        __renderShape(_canvas, _options) { }
+        __drawShape(_canvas, _options) { }
         __updateWorldOpacity() { }
         __updateChange() { }
         __drawPath(_canvas) { }
@@ -6236,7 +6251,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.6.6";
+    const version = "1.7.0";
 
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -7153,13 +7168,9 @@ var LeaferUI = (function (exports) {
             else
                 return strokeWidth;
         }
-        get __hasStroke() { return this.stroke && this.strokeWidth; }
-        get __hasHalf() { const t = this; return (t.stroke && t.strokeAlign === 'center' && t.strokeWidth % 2) || undefined; }
         get __hasMultiPaint() {
             const t = this;
-            if ((t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect)
-                return true;
-            return t.fill && this.__hasStroke;
+            return (t.fill && this.__useStroke) || (t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect;
         }
         get __clipAfterFill() { const t = this; return (t.cornerRadius || t.innerShadow || t.__pathInputed); }
         get __hasSurface() { const t = this; return (t.fill || t.stroke); }
@@ -7450,15 +7461,18 @@ var LeaferUI = (function (exports) {
     const UIRender = {
         __updateChange() {
             const data = this.__;
+            if (data.__useStroke) {
+                const useStroke = data.__useStroke = !!(data.stroke && data.strokeWidth);
+                stintSet$1(this.__world, 'half', useStroke && data.strokeAlign === 'center' && data.strokeWidth % 2);
+                stintSet$1(data, '__fillAfterStroke', useStroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
+            }
             if (data.__useEffect) {
                 const { shadow, fill, stroke } = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
                 stintSet$1(data, '__isFastShadow', shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !(shadow[0].box && data.__isTransparentFill) && fill && !(fill instanceof Array && fill.length > 1) && (this.useFastShadow || !stroke || (stroke && data.strokeAlign === 'inside')));
                 data.__useEffect = !!(shadow || otherEffect);
             }
-            stintSet$1(this.__world, 'half', data.__hasHalf);
-            stintSet$1(data, '__fillAfterStroke', data.stroke && data.strokeAlign === 'outside' && data.fill && !data.__isTransparentFill);
             data.__checkSingle();
-            stintSet$1(data, '__complex', data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
+            stintSet$1(data, '__complex', (data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect));
         },
         __drawFast(canvas, options) {
             drawFast(this, canvas, options);
@@ -7516,18 +7530,15 @@ var LeaferUI = (function (exports) {
                     this.__drawFast(canvas, options);
             }
         },
-        __renderShape(canvas, options, ignoreFill, ignoreStroke) {
-            if (this.__worldOpacity) {
-                canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
-                const { fill, stroke } = this.__;
-                this.__drawRenderPath(canvas);
-                if (fill && !ignoreFill)
-                    this.__.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
-                if (this.__.__isCanvas)
-                    this.__drawAfterFill(canvas, options);
-                if (stroke && !ignoreStroke)
-                    this.__.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
-            }
+        __drawShape(canvas, options) {
+            this.__drawRenderPath(canvas);
+            const data = this.__, { fill, stroke } = data;
+            if (fill && !options.ignoreFill)
+                data.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill('#000000', this, canvas);
+            if (data.__isCanvas)
+                this.__drawAfterFill(canvas, options);
+            if (stroke && !options.ignoreStroke)
+                data.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke('#000000', this, canvas);
         },
         __drawAfterFill(canvas, options) {
             if (this.__.__clipAfterFill) {
@@ -7652,12 +7663,14 @@ var LeaferUI = (function (exports) {
             }
         }
         __updateRenderPath() {
-            if (this.__.path) {
-                const data = this.__;
+            const data = this.__;
+            if (data.path) {
                 data.__pathForRender = data.cornerRadius ? PathCorner.smooth(data.path, data.cornerRadius, data.cornerSmoothing) : data.path;
                 if (data.__useArrow)
                     PathArrow.addArrows(this, !data.cornerRadius);
             }
+            else
+                data.__pathForRender && (data.__pathForRender = undefined);
         }
         __drawRenderPath(canvas) {
             canvas.beginPath();
@@ -7868,13 +7881,13 @@ var LeaferUI = (function (exports) {
         surfaceType()
     ], exports.UI.prototype, "fill", void 0);
     __decorate([
-        strokeType()
+        strokeType(undefined, true)
     ], exports.UI.prototype, "stroke", void 0);
     __decorate([
         strokeType('inside')
     ], exports.UI.prototype, "strokeAlign", void 0);
     __decorate([
-        strokeType(1)
+        strokeType(1, true)
     ], exports.UI.prototype, "strokeWidth", void 0);
     __decorate([
         strokeType(false)
@@ -8301,7 +8314,7 @@ var LeaferUI = (function (exports) {
                 list.push(item);
             this.requestRender();
         }
-        zoom(_zoomType, _padding, _fixedScale, _transition) {
+        zoom(_zoomType, _optionsOrPadding, _scroll, _transition) {
             return Plugin.need('view');
         }
         getValidMove(moveX, moveY) { return { x: moveX, y: moveY }; }
@@ -8346,7 +8359,7 @@ var LeaferUI = (function (exports) {
                     Leafer_1.list.remove(this);
                     try {
                         this.stop();
-                        this.emitEvent(new LeaferEvent(LeaferEvent.END, this));
+                        this.emitLeafer(LeaferEvent.END);
                         this.__removeListenEvents();
                         this.__controllers.forEach(item => !(this.parent && item === this.interaction) && item.destroy());
                         this.__controllers.length = 0;
@@ -8474,7 +8487,7 @@ var LeaferUI = (function (exports) {
         }
         __drawContent(canvas, options) {
             this.__renderGroup(canvas, options);
-            if (this.__.__hasStroke) {
+            if (this.__.__useStroke) {
                 canvas.setWorld(this.__nowWorld);
                 this.__drawRenderPath(canvas);
             }
@@ -8694,8 +8707,8 @@ var LeaferUI = (function (exports) {
                 for (let i = 1; i < sides; i++) {
                     lineTo$1(path, rx + rx * sin$2((i * 2 * PI$2) / sides), ry - ry * cos$2((i * 2 * PI$2) / sides));
                 }
+                closePath$1(path);
             }
-            closePath$1(path);
         }
         __updateRenderPath() { }
         __updateBoxBounds() { }
@@ -8929,10 +8942,15 @@ var LeaferUI = (function (exports) {
             const box = this.__box;
             if (box)
                 box.__nowWorld = this.__nowWorld, box.__draw(canvas, options, originCanvas);
-            if (this.textEditing && !Export.running)
+            if (this.textEditing && !options.exporting)
                 return;
             super.__draw(canvas, options, originCanvas);
         }
+        __drawShape(canvas, options) {
+            if (options.shape)
+                this.__box && this.__box.__drawShape(canvas, options);
+            super.__drawShape(canvas, options);
+        }
         destroy() {
             if (this.boxStyle)
                 this.boxStyle = null;
@@ -9754,6 +9772,7 @@ var LeaferUI = (function (exports) {
             delta: { x: 80 / 4, y: 8.0 },
         },
         pointer: {
+            type: 'pointer',
             snap: true,
             hitRadius: 5,
             tapTime: 120,
@@ -10297,7 +10316,7 @@ var LeaferUI = (function (exports) {
             h.resize({ width, height, pixelRatio: 1 });
             h.clear();
             ImageManager.patternLocked = true;
-            this.__renderShape(h, { matrix: matrix$2.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y) }, !isHitPixelFill, !isHitPixelStroke);
+            this.__renderShape(h, { matrix: matrix$2.setWith(this.__world).scaleWith(1 / scale).invertWith().translate(-x, -y), ignoreFill: !isHitPixelFill, ignoreStroke: !isHitPixelStroke });
             ImageManager.patternLocked = false;
             h.resetTransform();
             data.__isHitPixel = true;
@@ -10701,7 +10720,7 @@ var LeaferUI = (function (exports) {
     };
 
     let origin$1 = {};
-    const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate: rotate$2 } = MatrixHelper;
+    const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate: rotate$2, skew: skewHelper } = MatrixHelper;
     function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         const transform = get$3();
         translate$1(transform, box.x + x, box.y + y);
@@ -10710,13 +10729,15 @@ var LeaferUI = (function (exports) {
             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) {
+    function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
         const transform = get$3();
-        translate$1(transform, box.x + x, box.y + y);
-        if (scaleX)
-            scaleHelper(transform, scaleX, scaleY);
         if (rotation)
             rotate$2(transform, rotation);
+        if (skew)
+            skewHelper(transform, skew.x, skew.y);
+        if (scaleX)
+            scaleHelper(transform, scaleX, scaleY);
+        translate$1(transform, box.x + x, box.y + y);
         data.transform = transform;
     }
     function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
@@ -10753,11 +10774,13 @@ var LeaferUI = (function (exports) {
     const tempScaleData = {};
     const tempImage = {};
     function createData(leafPaint, image, paint, box) {
-        const { changeful, sync } = paint;
+        const { changeful, sync, editing } = paint;
         if (changeful)
             leafPaint.changeful = changeful;
         if (sync)
             leafPaint.sync = sync;
+        if (editing)
+            leafPaint.editing = editing;
         leafPaint.data = getPatternData(paint, box, image);
     }
     function getPatternData(paint, box, image) {
@@ -10766,7 +10789,7 @@ var LeaferUI = (function (exports) {
         if (paint.mode === 'strench')
             paint.mode = 'stretch';
         let { width, height } = image;
-        const { opacity, mode, align, offset, scale, size, rotation, repeat, filters } = paint;
+        const { opacity, mode, align, offset, scale, size, rotation, skew, repeat, filters } = paint;
         const sameBox = box.width === width && box.height === height;
         const data = { mode };
         const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
@@ -10800,8 +10823,8 @@ var LeaferUI = (function (exports) {
                 break;
             case 'normal':
             case 'clip':
-                if (tempImage.x || tempImage.y || scaleX || rotation)
-                    clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
+                if (tempImage.x || tempImage.y || scaleX || rotation || skew)
+                    clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew);
                 break;
             case 'repeat':
                 if (!sameBox || scaleX || rotation)
@@ -10878,11 +10901,11 @@ var LeaferUI = (function (exports) {
                     }
                     onLoadSuccess(ui, event);
                 }
-                leafPaint.loadId = null;
+                leafPaint.loadId = undefined;
             }, (error) => {
                 ignoreRender(ui, false);
                 onLoadError(ui, event, error);
-                leafPaint.loadId = null;
+                leafPaint.loadId = undefined;
             });
             if (ui.placeholderColor) {
                 if (!ui.placeholderDelay)
@@ -10948,6 +10971,8 @@ var LeaferUI = (function (exports) {
             const { image, data } = paint;
             let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
             if (sx) {
+                sx = abs$4(sx);
+                sy = abs$4(sy);
                 imageMatrix = get$1();
                 copy$4(imageMatrix, transform);
                 scale$2(imageMatrix, 1 / sx, 1 / sy);
@@ -11941,41 +11966,10 @@ var LeaferUI = (function (exports) {
     }
     EditorEvent.BEFORE_SELECT = 'editor.before_select';
     EditorEvent.SELECT = 'editor.select';
+    EditorEvent.AFTER_SELECT = 'editor.after_select';
     EditorEvent.BEFORE_HOVER = 'editor.before_hover';
     EditorEvent.HOVER = 'editor.hover';
 
-    class EditorMoveEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
-    EditorMoveEvent.MOVE = 'editor.move';
-
-    class EditorScaleEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
-    EditorScaleEvent.SCALE = 'editor.scale';
-
-    class EditorRotateEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
-    EditorRotateEvent.ROTATE = 'editor.rotate';
-
-    class EditorSkewEvent extends EditorEvent {
-        constructor(type, data) {
-            super(type, data);
-        }
-    }
-    EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
-    EditorSkewEvent.SKEW = 'editor.skew';
-
     function targetAttr(fn) {
         return (target, key) => {
             const privateKey = '_' + key;
@@ -12386,16 +12380,16 @@ var LeaferUI = (function (exports) {
     const { toPoint } = AroundHelper;
     const { within: within$2 } = MathHelper;
     const EditDataHelper = {
-        getScaleData(element, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
+        getScaleData(target, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
             let align, origin = {}, scaleX = 1, scaleY = 1;
-            const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = element;
+            const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = target;
             const { width, height } = startBounds;
             if (around) {
                 totalMove.x *= 2;
                 totalMove.y *= 2;
             }
-            const originChangedScaleX = element.scaleX / startBounds.scaleX;
-            const originChangedScaleY = element.scaleY / startBounds.scaleY;
+            const originChangedScaleX = target.scaleX / startBounds.scaleX;
+            const originChangedScaleY = target.scaleY / startBounds.scaleY;
             const signX = originChangedScaleX < 0 ? -1 : 1;
             const signY = originChangedScaleY < 0 ? -1 : 1;
             const changedScaleX = scaleMode ? originChangedScaleX : signX * boxBounds.width / width;
@@ -12471,7 +12465,7 @@ var LeaferUI = (function (exports) {
             if (useScaleY)
                 scaleY /= changedScaleY;
             if (!flipable) {
-                const { worldTransform } = element;
+                const { worldTransform } = target;
                 if (scaleX < 0)
                     scaleX = 1 / boxBounds.width / worldTransform.scaleX;
                 if (scaleY < 0)
@@ -12479,9 +12473,9 @@ var LeaferUI = (function (exports) {
             }
             toPoint(around || align, boxBounds, origin, true);
             if (dragBounds) {
-                const allowBounds = dragBounds === 'parent' ? element.parent.boxBounds : dragBounds;
-                const localBounds = new Bounds(element.__localBoxBounds);
-                localBounds.scaleOf(element.getLocalPointByInner(origin), scaleX, scaleY);
+                const allowBounds = dragBounds === 'parent' ? target.parent.boxBounds : dragBounds;
+                const localBounds = new Bounds(target.__localBoxBounds);
+                localBounds.scaleOf(target.getLocalPointByInner(origin), scaleX, scaleY);
                 if (!BoundsHelper.includes(allowBounds, localBounds)) {
                     const realBounds = localBounds.getIntersect(allowBounds);
                     const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height;
@@ -12492,11 +12486,11 @@ var LeaferUI = (function (exports) {
                 }
             }
             if (useScaleX && widthRange) {
-                const nowWidth = boxBounds.width * element.scaleX;
+                const nowWidth = boxBounds.width * target.scaleX;
                 scaleX = within$2(nowWidth * scaleX, widthRange) / nowWidth;
             }
             if (useScaleY && heightRange) {
-                const nowHeight = boxBounds.height * element.scaleY;
+                const nowHeight = boxBounds.height * target.scaleY;
                 scaleY = within$2(nowHeight * scaleY, heightRange) / nowHeight;
             }
             if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1)
@@ -12507,7 +12501,7 @@ var LeaferUI = (function (exports) {
                 scaleY = scaleX = Math.min(scaleX, scaleY);
             return { origin, scaleX, scaleY, direction, lockRatio, around };
         },
-        getRotateData(bounds, direction, current, last, around) {
+        getRotateData(target, direction, current, last, around) {
             let align, origin = {};
             switch (direction) {
                 case topLeft$1:
@@ -12525,8 +12519,8 @@ var LeaferUI = (function (exports) {
                 default:
                     align = 'center';
             }
-            toPoint(around || align, bounds, origin, true);
-            return { origin, rotation: PointHelper.getRotation(last, origin, current) };
+            toPoint(around || align, target.boxBounds, origin, true);
+            return { origin, rotation: PointHelper.getRotation(last, target.getWorldPointByBox(origin), current) };
         },
         getSkewData(bounds, direction, move, around) {
             let align, origin = {}, skewX = 0, skewY = 0;
@@ -12623,9 +12617,9 @@ var LeaferUI = (function (exports) {
     };
 
     const cacheCursors = {};
-    function updateCursor(editor, e) {
-        const { editBox } = editor, point = editBox.enterPoint;
-        if (!point || !editor.editing || !editBox.visible)
+    function updateCursor(editBox, e) {
+        const { enterPoint: point } = editBox;
+        if (!point || !editBox.editor.editing || !editBox.visible)
             return;
         if (point.name === 'circle')
             return;
@@ -12634,9 +12628,8 @@ var LeaferUI = (function (exports) {
                 point.cursor = 'pointer';
             return;
         }
-        let { rotation } = editBox;
-        const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig;
-        const { pointType } = point, { flippedX, flippedY } = editBox;
+        let { rotation, flippedX, flippedY } = editBox;
+        const { pointType } = point, { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editBox.mergeConfig;
         let showResize = pointType.includes('resize');
         if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
             showResize = false;
@@ -12653,9 +12646,9 @@ var LeaferUI = (function (exports) {
             cacheCursors[key] = point.cursor = { url: toDataURL(url, rotation), x, y };
         }
     }
-    function updateMoveCursor(editor) {
-        const { moveCursor, moveable } = editor.mergeConfig;
-        editor.editBox.rect.cursor = moveable ? moveCursor : undefined;
+    function updateMoveCursor(editBox) {
+        const { moveCursor, moveable } = editBox.mergeConfig;
+        editBox.rect.cursor = moveable ? moveCursor : undefined;
     }
     function toDataURL(svg, rotation) {
         return '"data:image/svg+xml,' + encodeURIComponent(svg.replace('{{rotation}}', rotation.toString())) + '"';
@@ -12670,6 +12663,15 @@ var LeaferUI = (function (exports) {
 
     const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig = undefined;
     class EditBox extends exports.Group {
+        get mergeConfig() {
+            const { config } = this, { mergeConfig } = this.editor;
+            return this.mergedConfig = config ? Object.assign(Object.assign({}, mergeConfig), config) : mergeConfig;
+        }
+        get target() { return this._target || this.editor.element; }
+        set target(target) { this._target = target; }
+        get single() { return !!this._target || this.editor.single; }
+        get transformTool() { return this._transformTool || this.editor; }
+        set transformTool(tool) { this._transformTool = tool; }
         get flipped() { return this.flippedX || this.flippedY; }
         get flippedX() { return this.scaleX < 0; }
         get flippedY() { return this.scaleY < 0; }
@@ -12712,8 +12714,7 @@ var LeaferUI = (function (exports) {
             this.add(view);
         }
         load() {
-            const { mergeConfig, element, single } = this.editor;
-            const { rect, circle, resizePoints } = this;
+            const { target, mergeConfig, single, rect, circle, resizePoints } = this;
             const { stroke, strokeWidth } = mergeConfig;
             const pointsStyle = this.getPointsStyle();
             const middlePointsStyle = this.getMiddlePointsStyle();
@@ -12726,18 +12727,26 @@ var LeaferUI = (function (exports) {
             }
             circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
             rect.set(Object.assign({ stroke, strokeWidth, editConfig }, (mergeConfig.rect || {})));
-            rect.hittable = !single;
-            rect.syncEventer = single && this.editor;
-            if (single) {
-                element.syncEventer = rect;
-                this.app.interaction.bottomList = [{ target: rect, proxy: element }];
+            const syncEventer = single && this.transformTool.editTool;
+            rect.hittable = !syncEventer;
+            rect.syncEventer = syncEventer && this.editor;
+            if (syncEventer) {
+                target.syncEventer = rect;
+                this.app.interaction.bottomList = [{ target: rect, proxy: target }];
             }
+            updateMoveCursor(this);
+        }
+        update() {
+            const { editor } = this;
+            const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = this.target.getLayoutBounds('box', editor, true);
+            this.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
+            this.updateBounds({ x: 0, y: 0, width, height });
         }
-        update(bounds) {
-            const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines, editor } = this;
-            const { mergeConfig, element, multiple, editMask } = editor;
+        updateBounds(bounds) {
+            const { editMask } = this.editor;
+            const { mergeConfig, single, rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
             const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig;
-            this.visible = !element.locked;
+            this.visible = !this.target.locked;
             editMask.visible = mask ? true : 0;
             if (this.view.worldOpacity) {
                 const { width, height } = bounds;
@@ -12771,25 +12780,25 @@ var LeaferUI = (function (exports) {
                 }
                 circle.visible = showPoints && rotateable && !!(mergeConfig.circle || mergeConfig.rotatePoint);
                 if (circle.visible)
-                    this.layoutCircle(mergeConfig);
+                    this.layoutCircle();
                 if (rect.path)
                     rect.path = null;
-                rect.set(Object.assign(Object.assign({}, bounds), { visible: multiple ? true : editBox }));
+                rect.set(Object.assign(Object.assign({}, bounds), { visible: single ? editBox : true }));
                 buttons.visible = showPoints && buttons.children.length > 0 || 0;
                 if (buttons.visible)
-                    this.layoutButtons(mergeConfig);
+                    this.layoutButtons();
             }
             else
                 rect.set(bounds);
         }
-        layoutCircle(config) {
-            const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config;
+        layoutCircle() {
+            const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = this.mergedConfig;
             const direction = fourDirection.indexOf(circleDirection || ((this.buttons.children.length && buttonsDirection === 'bottom') ? 'top' : 'bottom'));
             this.setButtonPosition(this.circle, direction, circleMargin || buttonsMargin, !!middlePoint);
         }
-        layoutButtons(config) {
+        layoutButtons() {
             const { buttons } = this;
-            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = config;
+            const { buttonsDirection, buttonsFixed, buttonsMargin, middlePoint } = this.mergedConfig;
             const { flippedX, flippedY } = this;
             let index = fourDirection.indexOf(buttonsDirection);
             if ((index % 2 && flippedX) || ((index + 1) % 2 && flippedY)) {
@@ -12822,16 +12831,16 @@ var LeaferUI = (function (exports) {
             this.visible = false;
         }
         getPointStyle(userStyle) {
-            const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.mergeConfig;
+            const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.mergedConfig;
             const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0, editConfig };
             return userStyle ? Object.assign(defaultStyle, userStyle) : defaultStyle;
         }
         getPointsStyle() {
-            const { point } = this.editor.mergeConfig;
+            const { point } = this.mergedConfig;
             return point instanceof Array ? point : [point];
         }
         getMiddlePointsStyle() {
-            const { middlePoint } = this.editor.mergeConfig;
+            const { middlePoint } = this.mergedConfig;
             return middlePoint instanceof Array ? middlePoint : (middlePoint ? [middlePoint] : this.getPointsStyle());
         }
         onSelect(e) {
@@ -12844,16 +12853,16 @@ var LeaferUI = (function (exports) {
         onDragStart(e) {
             this.dragging = true;
             const point = this.dragPoint = e.current, { pointType } = point;
-            const { editor, dragStartData } = this, { element } = editor;
+            const { editor, dragStartData } = this, { target } = this;
             if (point.name === 'rect') {
                 this.moving = true;
-                editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1;
+                editor.opacity = this.mergeConfig.hideOnMove ? 0 : 1;
             }
             dragStartData.x = e.x;
             dragStartData.y = e.y;
-            dragStartData.point = { x: element.x, y: element.y };
-            dragStartData.bounds = Object.assign({}, element.getLayoutBounds('box', 'local'));
-            dragStartData.rotation = element.rotation;
+            dragStartData.point = { x: target.x, y: target.y };
+            dragStartData.bounds = Object.assign({}, target.getLayoutBounds('box', 'local'));
+            dragStartData.rotation = target.rotation;
             if (pointType && pointType.includes('resize'))
                 ResizeEvent.resizingKeys = editor.leafList.keys;
         }
@@ -12868,22 +12877,31 @@ var LeaferUI = (function (exports) {
                 ResizeEvent.resizingKeys = null;
         }
         onDrag(e) {
-            const { editor } = this;
-            const { pointType } = this.enterPoint = e.current;
-            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
-                editor.onRotate(e);
-                if (pointType === 'resize-rotate')
-                    editor.onScale(e);
-            }
-            else if (pointType === 'resize')
-                editor.onScale(e);
-            if (pointType === 'skew')
-                editor.onSkew(e);
-            updateCursor(editor, e);
+            const { transformTool } = this, point = e.current;
+            if (point.name === 'rect') {
+                transformTool.onMove(e);
+                updateMoveCursor(this);
+            }
+            else {
+                const { pointType } = this.enterPoint = point;
+                if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !this.mergeConfig.resizeable) {
+                    transformTool.onRotate(e);
+                    if (pointType === 'resize-rotate')
+                        transformTool.onScale(e);
+                }
+                else if (pointType === 'resize')
+                    transformTool.onScale(e);
+                if (pointType === 'skew')
+                    transformTool.onSkew(e);
+                updateCursor(this, e);
+            }
+        }
+        onKey(e) {
+            updateCursor(this, e);
         }
         onArrow(e) {
             const { editor } = this;
-            if (editor.editing && editor.mergeConfig.keyEvent) {
+            if (editor.editing && this.mergeConfig.keyEvent) {
                 let x = 0, y = 0;
                 const distance = e.shiftKey ? 10 : 1;
                 switch (e.code) {
@@ -12904,27 +12922,28 @@ var LeaferUI = (function (exports) {
             }
         }
         onDoubleTap(e) {
-            if (this.editor.mergeConfig.openInner === 'double')
+            const { openInner, preventEditInner } = this.mergeConfig;
+            if (openInner === 'double' && !preventEditInner)
                 this.openInner(e);
         }
         onLongPress(e) {
-            if (this.editor.mergeConfig.openInner === 'long')
+            const { openInner, preventEditInner } = this.mergeConfig;
+            if (openInner === 'long' && preventEditInner)
                 this.openInner(e);
         }
         openInner(e) {
-            const { editor } = this;
-            if (editor.single) {
-                const { element } = editor;
-                if (element.locked)
+            const { editor, target } = this;
+            if (this.single) {
+                if (target.locked)
                     return;
-                if (element.isBranch && !element.editInner) {
-                    if (element.textBox) {
-                        const { children } = element;
+                if (target.isBranch && !target.editInner) {
+                    if (target.textBox) {
+                        const { children } = target;
                         const find = children.find(item => item.editable && item instanceof exports.Text) || children.find(item => item instanceof exports.Text);
                         if (find)
                             return editor.openInnerEditor(find);
                     }
-                    editor.openGroup(element);
+                    editor.openGroup(target);
                     editor.target = editor.selector.findDeepOne(e);
                 }
                 else {
@@ -12933,7 +12952,6 @@ var LeaferUI = (function (exports) {
             }
         }
         listenPointEvents(point, type, direction) {
-            const { editor } = this;
             point.direction = direction;
             point.pointType = type;
             const events = [
@@ -12943,19 +12961,25 @@ var LeaferUI = (function (exports) {
                 [exports.PointerEvent.LEAVE, () => { this.enterPoint = null; }],
             ];
             if (point.name !== 'circle')
-                events.push([exports.PointerEvent.ENTER, (e) => { this.enterPoint = point, updateCursor(editor, e); }]);
+                events.push([exports.PointerEvent.ENTER, (e) => { this.enterPoint = point, updateCursor(this, e); }]);
             this.__eventIds.push(point.on_(events));
         }
         __listenEvents() {
-            const { rect, editor } = this;
-            this.__eventIds.push(editor.on_(EditorEvent.SELECT, this.onSelect, this), rect.on_([
+            const { rect, editor, __eventIds: events } = this;
+            events.push(editor.on_(EditorEvent.SELECT, this.onSelect, this), rect.on_([
                 [exports.DragEvent.START, this.onDragStart, this],
-                [exports.DragEvent.DRAG, editor.onMove, editor],
+                [exports.DragEvent.DRAG, this.onDrag, this],
                 [exports.DragEvent.END, this.onDragEnd, this],
-                [exports.PointerEvent.ENTER, () => updateMoveCursor(editor)],
+                [exports.PointerEvent.ENTER, () => updateMoveCursor(this)],
                 [exports.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this],
                 [exports.PointerEvent.LONG_PRESS, this.onLongPress, this]
             ]));
+            this.waitLeafer(() => {
+                events.push(editor.app.on_([
+                    [[exports.KeyEvent.HOLD, exports.KeyEvent.UP], this.onKey, this],
+                    [exports.KeyEvent.DOWN, this.onArrow, this]
+                ]));
+            });
         }
         __removeListenEvents() {
             this.off_(this.__eventIds);
@@ -12986,11 +13010,12 @@ var LeaferUI = (function (exports) {
                 if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix))
                     return;
                 canvas.saveBlendMode('destination-out');
+                options = Object.assign(Object.assign({}, options), { shape: true });
                 editor.list.forEach(item => {
-                    item.__renderShape(canvas, options);
-                    const { __box, parent } = item;
-                    if ((item = __box) || ((item = parent) && parent.textBox))
-                        item.__renderShape(canvas, options);
+                    item.__render(canvas, options);
+                    const { parent } = item;
+                    if (parent && parent.textBox)
+                        parent.__renderShape(canvas, options);
                 });
                 canvas.restoreBlendMode();
             }
@@ -13085,7 +13110,7 @@ ${filterStyle$1}
     const bounds$1 = new Bounds();
     function simulate(editor) {
         const { simulateTarget, list } = editor;
-        const { zoomLayer } = list[0].leafer.zoomLayer;
+        const { zoomLayer } = list[0].leafer;
         simulateTarget.safeChange(() => {
             bounds$1.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page'));
             if (bounds$1.width === 0)
@@ -13107,15 +13132,14 @@ ${filterStyle$1}
         else {
             editor.simulateTarget.remove();
             editor.leafList.reset();
-            editor.closeInnerEditor();
         }
-        editor.emitEvent(new EditorEvent(EditorEvent.SELECT, { editor, value: target, oldValue }));
+        editor.closeInnerEditor();
+        const data = { editor, value: target, oldValue };
+        editor.emitEvent(new EditorEvent(EditorEvent.SELECT, data));
         editor.checkOpenedGroups();
         if (editor.editing) {
             editor.waitLeafer(() => {
-                updateMoveCursor(editor);
                 editor.updateEditTool();
-                editor.update();
                 editor.listenTargetEvents();
             });
         }
@@ -13123,6 +13147,7 @@ ${filterStyle$1}
             editor.updateEditTool();
             editor.removeTargetEvents();
         }
+        editor.emitEvent(new EditorEvent(EditorEvent.AFTER_SELECT, data));
     }
     function onHover(editor, oldValue) {
         editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }));
@@ -13294,93 +13319,45 @@ ${filterStyle$1}
         }
     }
 
-    class Editor extends exports.Group {
-        get list() { return this.leafList.list; }
-        get dragHoverExclude() { return [this.editBox.rect]; }
-        get editing() { return !!this.list.length; }
-        get groupOpening() { return !!this.openedGroupList.length; }
-        get multiple() { return this.list.length > 1; }
-        get single() { return this.list.length === 1; }
-        get dragging() { return this.editBox.dragging; }
-        get moving() { return this.editBox.moving; }
-        get dragPoint() { return this.editBox.dragPoint; }
-        get element() { return this.multiple ? this.simulateTarget : this.list[0]; }
-        get buttons() { return this.editBox.buttons; }
-        constructor(userConfig, data) {
-            super(data);
-            this.leafList = new LeafList();
-            this.openedGroupList = new LeafList();
-            this.simulateTarget = new SimulateElement(this);
-            this.editBox = new EditBox(this);
-            this.editToolList = {};
-            this.selector = new EditSelect(this);
-            this.editMask = new EditMask(this);
-            this.targetEventIds = [];
-            let mergedConfig = DataHelper.clone(config);
-            if (userConfig)
-                mergedConfig = DataHelper.default(userConfig, mergedConfig);
-            this.mergedConfig = this.config = mergedConfig;
-            this.addMany(this.editMask, this.selector, this.editBox);
-            if (!Plugin.has('resize'))
-                this.config.editSize = 'scale';
-        }
-        select(target) {
-            this.target = target;
-        }
-        cancel() {
-            this.target = null;
-        }
-        hasItem(item) {
-            return this.leafList.has(item);
-        }
-        addItem(item) {
-            if (!this.hasItem(item) && !item.locked)
-                this.leafList.add(item), this.target = this.leafList.list;
-        }
-        removeItem(item) {
-            if (this.hasItem(item))
-                this.leafList.remove(item), this.target = this.leafList.list;
-        }
-        shiftItem(item) {
-            this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
-        }
-        update() {
-            if (this.editing) {
-                if (!this.element.parent)
-                    return this.cancel();
-                if (this.innerEditing)
-                    this.innerEditor.update();
-                this.editTool.update();
-                this.selector.update();
-            }
+    class EditorMoveEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
-        updateEditBox() {
-            if (this.multiple)
-                simulate(this);
-            this.update();
+    }
+    EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
+    EditorMoveEvent.MOVE = 'editor.move';
+
+    class EditorScaleEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
-        updateEditTool() {
-            const tool = this.editTool;
-            if (tool) {
-                this.editBox.unload();
-                tool.unload();
-                this.editTool = null;
-            }
-            if (this.editing) {
-                const tag = this.single ? this.list[0].editOuter : 'EditTool';
-                this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this);
-                this.editBox.load();
-                this.editTool.load();
-            }
+    }
+    EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
+    EditorScaleEvent.SCALE = 'editor.scale';
+
+    class EditorRotateEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
-        getEditSize(_ui) {
-            return this.mergeConfig.editSize;
+    }
+    EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
+    EditorRotateEvent.ROTATE = 'editor.rotate';
+
+    class EditorSkewEvent extends EditorEvent {
+        constructor(type, data) {
+            super(type, data);
         }
+    }
+    EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
+    EditorSkewEvent.SKEW = 'editor.skew';
+
+    class TransformTool {
         onMove(e) {
+            const { target, mergeConfig, dragStartData } = this.editBox;
             if (e instanceof exports.MoveEvent) {
                 if (e.moveType !== 'drag') {
-                    const { moveable, resizeable } = this.mergeConfig;
-                    const move = e.getLocalMove(this.element);
+                    const { moveable, resizeable } = mergeConfig;
+                    const move = e.getLocalMove(target);
                     if (moveable === 'move')
                         e.stop(), this.move(move.x, move.y);
                     else if (resizeable === 'zoom')
@@ -13395,22 +13372,22 @@ ${filterStyle$1}
                     else
                         total.x = 0;
                 }
-                this.move(exports.DragEvent.getValidMove(this.element, this.editBox.dragStartData.point, total));
+                this.move(exports.DragEvent.getValidMove(target, dragStartData.point, total));
             }
         }
         onScale(e) {
-            const { element } = this;
-            let { around, lockRatio, resizeable, flipable, editSize } = this.mergeConfig;
+            const { target, mergeConfig, single, dragStartData } = this.editBox;
+            let { around, lockRatio, resizeable, flipable, editSize } = mergeConfig;
             if (e instanceof exports.ZoomEvent) {
                 if (resizeable === 'zoom')
-                    e.stop(), this.scaleOf(element.getBoxPoint(e), e.scale, e.scale);
+                    e.stop(), this.scaleOf(target.getBoxPoint(e), e.scale, e.scale);
             }
             else {
                 const { direction } = e.current;
-                if (e.shiftKey || element.lockRatio)
+                if (e.shiftKey || target.lockRatio)
                     lockRatio = true;
-                const data = EditDataHelper.getScaleData(element, this.editBox.dragStartData.bounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale');
-                if (this.editTool.onScaleWithDrag) {
+                const data = EditDataHelper.getScaleData(target, dragStartData.bounds, direction, e.getInnerTotal(target), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, !single || editSize === 'scale');
+                if (this.editTool && this.editTool.onScaleWithDrag) {
                     data.drag = e;
                     this.scaleWithDrag(data);
                 }
@@ -13420,38 +13397,38 @@ ${filterStyle$1}
             }
         }
         onRotate(e) {
-            const { skewable, rotateable, around, rotateGap } = this.mergeConfig;
+            const { target, mergeConfig, dragStartData } = this.editBox;
+            const { skewable, rotateable, around, rotateGap } = mergeConfig;
             const { direction, name } = e.current;
             if (skewable && name === 'resize-line')
                 return this.onSkew(e);
-            const { element } = this, { dragStartData } = this.editBox;
             let origin, rotation;
             if (e instanceof exports.RotateEvent) {
                 if (rotateable === 'rotate')
-                    e.stop(), rotation = e.rotation, origin = element.getBoxPoint(e);
+                    e.stop(), rotation = e.rotation, origin = target.getBoxPoint(e);
                 else
                     return;
-                if (element.scaleX * element.scaleY < 0)
+                if (target.scaleX * target.scaleY < 0)
                     rotation = -rotation;
             }
             else {
-                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(dragStartData), e.shiftKey ? null : (element.around || element.origin || around || 'center'));
+                const data = EditDataHelper.getRotateData(target, direction, e, dragStartData, e.shiftKey ? null : (target.around || target.origin || around || 'center'));
                 rotation = data.rotation;
                 origin = data.origin;
             }
-            if (element.scaleX * element.scaleY < 0)
+            if (target.scaleX * target.scaleY < 0)
                 rotation = -rotation;
             if (e instanceof exports.DragEvent)
-                rotation = dragStartData.rotation + rotation - element.rotation;
-            rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, element.rotation), 2);
+                rotation = dragStartData.rotation + rotation - target.rotation;
+            rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, target.rotation), 2);
             if (!rotation)
                 return;
             this.rotateOf(origin, rotation);
         }
         onSkew(e) {
-            const { element } = this;
-            const { around } = this.mergeConfig;
-            const { origin, skewX, skewY } = EditDataHelper.getSkewData(element.boxBounds, e.current.direction, e.getInnerMove(element), EditDataHelper.getAround(around, e.altKey));
+            const { target, mergeConfig } = this.editBox;
+            const { around } = mergeConfig;
+            const { origin, skewX, skewY } = EditDataHelper.getSkewData(target.boxBounds, e.current.direction, e.getInnerMove(target), EditDataHelper.getAround(around, e.altKey));
             if (!skewX && !skewY)
                 return;
             this.skewOf(origin, skewX, skewY);
@@ -13461,7 +13438,8 @@ ${filterStyle$1}
                 return;
             if (typeof x === 'object')
                 y = x.y, x = x.x;
-            const { element: target } = this, { beforeMove } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeMove } = mergeConfig;
             if (beforeMove) {
                 const check = beforeMove({ target, x, y });
                 if (typeof check === 'object')
@@ -13470,25 +13448,26 @@ ${filterStyle$1}
                     return;
             }
             const world = target.getWorldPointByLocal({ x, y }, null, true);
-            if (this.multiple)
+            if (!single)
                 target.safeChange(() => target.move(x, y));
-            const data = { target, editor: this, moveX: world.x, moveY: world.y };
+            const data = { target, editor, moveX: world.x, moveY: world.y };
             this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data));
             const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data);
-            this.editTool.onMove(event);
+            this.doMove(event);
             this.emitEvent(event);
         }
         scaleWithDrag(data) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element: target } = this, { beforeScale } = this.mergeConfig;
+            const { target, mergeConfig, editor } = this.editBox;
+            const { beforeScale } = mergeConfig;
             if (beforeScale) {
                 const { origin, scaleX, scaleY, drag } = data;
                 const check = beforeScale({ target, drag, origin, scaleX, scaleY });
                 if (check === false)
                     return;
             }
-            data = Object.assign(Object.assign({}, data), { target, editor: this, worldOrigin: target.getWorldPoint(data.origin) });
+            data = Object.assign(Object.assign({}, data), { target, editor, worldOrigin: target.getWorldPoint(data.origin) });
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScaleWithDrag(event);
@@ -13497,7 +13476,8 @@ ${filterStyle$1}
         scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element: target } = this, { beforeScale } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeScale } = mergeConfig;
             if (beforeScale) {
                 const check = beforeScale({ target, origin, scaleX, scaleY });
                 if (typeof check === 'object')
@@ -13506,29 +13486,30 @@ ${filterStyle$1}
                     return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)));
-            const data = { target, editor: this, worldOrigin, scaleX, scaleY, transform };
+            const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)));
+            const data = { target, editor, worldOrigin, scaleX, scaleY, transform };
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
-            this.editTool.onScale(event);
+            this.doScale(event);
             this.emitEvent(event);
         }
         flip(axis) {
             if (!this.checkTransform('resizeable'))
                 return;
-            const { element } = this;
+            const { target, single, editor } = this.editBox;
             const worldOrigin = this.getWorldOrigin('center');
-            const transform = this.multiple ? this.getChangedTransform(() => element.safeChange(() => element.flip(axis))) : new Matrix(LeafHelper.getFlipTransform(element, axis));
-            const data = { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform };
+            const transform = !single ? this.getChangedTransform(() => target.safeChange(() => target.flip(axis))) : new Matrix(LeafHelper.getFlipTransform(target, axis));
+            const data = { target, editor, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform };
             this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
             const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
-            this.editTool.onScale(event);
+            this.doScale(event);
             this.emitEvent(event);
         }
         rotateOf(origin, rotation) {
             if (!this.checkTransform('rotateable'))
                 return;
-            const { element: target } = this, { beforeRotate } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeRotate } = mergeConfig;
             if (beforeRotate) {
                 const check = beforeRotate({ target, origin, rotation });
                 if (typeof check === 'number')
@@ -13537,17 +13518,18 @@ ${filterStyle$1}
                     return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)));
-            const data = { target, editor: this, worldOrigin, rotation, transform };
+            const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)));
+            const data = { target, editor, worldOrigin, rotation, transform };
             this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data));
             const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data);
-            this.editTool.onRotate(event);
+            this.doRotate(event);
             this.emitEvent(event);
         }
         skewOf(origin, skewX, skewY = 0, _resize) {
             if (!this.checkTransform('skewable'))
                 return;
-            const { element: target } = this, { beforeSkew } = this.mergeConfig;
+            const { target, mergeConfig, single, editor } = this.editBox;
+            const { beforeSkew } = mergeConfig;
             if (beforeSkew) {
                 const check = beforeSkew({ target, origin, skewX, skewY });
                 if (typeof check === 'object')
@@ -13556,25 +13538,142 @@ ${filterStyle$1}
                     return;
             }
             const worldOrigin = this.getWorldOrigin(origin);
-            const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)));
-            const data = { target, editor: this, worldOrigin, skewX, skewY, transform };
+            const transform = !single && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)));
+            const data = { target, editor, worldOrigin, skewX, skewY, transform };
             this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data));
             const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data);
-            this.editTool.onSkew(event);
+            this.doSkew(event);
             this.emitEvent(event);
         }
-        checkTransform(type) { return this.element && !this.element.locked && this.mergeConfig[type]; }
+        doMove(event) {
+            this.editTool.onMove(event);
+        }
+        doScale(event) {
+            this.editTool.onScale(event);
+        }
+        doRotate(event) {
+            this.editTool.onRotate(event);
+        }
+        doSkew(event) {
+            this.editTool.onSkew(event);
+        }
+        checkTransform(type) {
+            const { target, mergeConfig } = this.editBox;
+            return target && !target.locked && mergeConfig[type];
+        }
         getWorldOrigin(origin) {
-            return this.element.getWorldPoint(LeafHelper.getInnerOrigin(this.element, origin));
+            const { target } = this.editBox;
+            return target.getWorldPoint(LeafHelper.getInnerOrigin(target, origin));
         }
         getChangedTransform(func) {
-            const { element } = this;
-            if (this.multiple && !element.canChange)
-                return element.changedTransform;
-            const oldMatrix = new Matrix(element.worldTransform);
+            const { target, single } = this.editBox;
+            if (!single && !target.canChange)
+                return target.changedTransform;
+            const oldMatrix = new Matrix(target.worldTransform);
             func();
-            return new Matrix(element.worldTransform).divide(oldMatrix);
+            return new Matrix(target.worldTransform).divide(oldMatrix);
+        }
+        emitEvent(event, capture) {
+            this.editBox.editor.emitEvent(event, capture);
+        }
+    }
+
+    exports.Editor = class Editor extends exports.Group {
+        get list() { return this.leafList.list; }
+        get dragHoverExclude() { return [this.editBox.rect]; }
+        get editing() { return !!this.list.length; }
+        get groupOpening() { return !!this.openedGroupList.length; }
+        get multiple() { return this.list.length > 1; }
+        get single() { return this.list.length === 1; }
+        get dragging() { return this.editBox.dragging; }
+        get moving() { return this.editBox.moving; }
+        get dragPoint() { return this.editBox.dragPoint; }
+        get element() { return this.multiple ? this.simulateTarget : this.list[0]; }
+        get buttons() { return this.editBox.buttons; }
+        constructor(userConfig, data) {
+            super(data);
+            this.leafList = new LeafList();
+            this.openedGroupList = new LeafList();
+            this.simulateTarget = new SimulateElement(this);
+            this.editBox = new EditBox(this);
+            this.editToolList = {};
+            this.selector = new EditSelect(this);
+            this.editMask = new EditMask(this);
+            this.targetEventIds = [];
+            let mergedConfig = DataHelper.clone(config);
+            if (userConfig)
+                mergedConfig = DataHelper.default(userConfig, mergedConfig);
+            this.mergedConfig = this.config = mergedConfig;
+            this.addMany(this.editMask, this.selector, this.editBox);
+            if (!Plugin.has('resize'))
+                this.config.editSize = 'scale';
+        }
+        select(target) {
+            this.target = target;
+        }
+        cancel() {
+            this.target = null;
+        }
+        hasItem(item) {
+            return this.leafList.has(item);
+        }
+        addItem(item) {
+            if (!this.hasItem(item) && !item.locked)
+                this.leafList.add(item), this.target = this.leafList.list;
+        }
+        removeItem(item) {
+            if (this.hasItem(item))
+                this.leafList.remove(item), this.target = this.leafList.list;
+        }
+        shiftItem(item) {
+            this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
+        }
+        update() {
+            if (this.editing) {
+                if (!this.element.parent)
+                    return this.cancel();
+                if (this.innerEditing)
+                    this.innerEditor.update();
+                this.editTool.update();
+                this.selector.update();
+            }
+        }
+        updateEditBox() {
+            if (this.multiple)
+                simulate(this);
+            this.update();
+        }
+        updateEditTool() {
+            let tool = this.editTool;
+            if (tool) {
+                this.editBox.unload();
+                tool.unload();
+                this.editTool = null;
+            }
+            if (this.editing) {
+                const tag = this.element.editOuter || 'EditTool';
+                tool = this.editTool = this.editToolList[tag] = this.editToolList[tag] || EditToolCreator.get(tag, this);
+                this.editBox.load();
+                tool.load();
+                this.update();
+            }
+        }
+        getEditSize(_ui) {
+            return this.mergeConfig.editSize;
         }
+        onMove(_e) { }
+        onScale(_e) { }
+        onRotate(_e) { }
+        onSkew(_e) { }
+        move(_x, _y = 0) { }
+        scaleWithDrag(_data) { }
+        scaleOf(_origin, scaleX, _scaleY = scaleX, _resize) { }
+        flip(_axis) { }
+        rotateOf(_origin, _rotation) { }
+        skewOf(_origin, _skewX, _skewY = 0, _resize) { }
+        checkTransform(_type) { return undefined; }
+        getWorldOrigin(_origin) { return undefined; }
+        getChangedTransform(_func) { return undefined; }
         group(userGroup) {
             if (this.multiple) {
                 this.emitGroupEvent(EditorGroupEvent.BEFORE_GROUP);
@@ -13692,12 +13791,9 @@ ${filterStyle$1}
             if (this.targetChanged)
                 this.update();
         }
-        onKey(e) {
-            updateCursor(this, e);
-        }
         listenTargetEvents() {
             if (!this.targetEventIds.length) {
-                const { app, leafer, editBox, editMask } = this;
+                const { app, leafer, editMask } = this;
                 this.targetEventIds = [
                     leafer.on_(RenderEvent.START, this.onRenderStart, this),
                     app.on_([
@@ -13705,8 +13801,6 @@ ${filterStyle$1}
                         [exports.MoveEvent.BEFORE_MOVE, this.onMove, this, true],
                         [exports.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true],
                         [exports.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true],
-                        [[exports.KeyEvent.HOLD, exports.KeyEvent.UP], this.onKey, this],
-                        [exports.KeyEvent.DOWN, editBox.onArrow, editBox]
                     ])
                 ];
                 if (editMask.visible)
@@ -13731,24 +13825,29 @@ ${filterStyle$1}
                 super.destroy();
             }
         }
-    }
+    };
     __decorate([
         mergeConfigAttr()
-    ], Editor.prototype, "mergeConfig", void 0);
+    ], exports.Editor.prototype, "mergeConfig", void 0);
     __decorate([
         targetAttr(onHover)
-    ], Editor.prototype, "hoverTarget", void 0);
+    ], exports.Editor.prototype, "hoverTarget", void 0);
     __decorate([
         targetAttr(onTarget)
-    ], Editor.prototype, "target", void 0);
+    ], exports.Editor.prototype, "target", void 0);
+    exports.Editor = __decorate([
+        useModule(TransformTool, ['editBox', 'editTool', 'emitEvent'])
+    ], exports.Editor);
 
     class InnerEditor {
         static registerInnerEditor() {
             EditToolCreator.register(this);
         }
         get tag() { return 'InnerEditor'; }
+        get mode() { return 'focus'; }
         get editBox() { return this.editor.editBox; }
         constructor(editor) {
+            this.eventIds = [];
             this.editor = editor;
             this.create();
         }
@@ -13761,7 +13860,7 @@ ${filterStyle$1}
         load() {
             const { editor } = this;
             if (editor) {
-                if (editor.app)
+                if (editor.app && this.mode === 'focus')
                     editor.selector.hittable = editor.app.tree.hitChildren = false;
                 this.onLoad();
             }
@@ -13772,7 +13871,7 @@ ${filterStyle$1}
         unload() {
             const { editor } = this;
             if (editor) {
-                if (editor.app)
+                if (editor.app && this.mode === 'focus')
                     editor.selector.hittable = editor.app.tree.hitChildren = true;
                 this.onUnload();
             }
@@ -13846,10 +13945,7 @@ ${filterStyle$1}
             this.onLoad();
         }
         update() {
-            const { editor, editBox } = this;
-            const { x, y, scaleX, scaleY, rotation, skewX, skewY, width, height } = editor.element.getLayoutBounds('box', editor, true);
-            editBox.set({ x, y, scaleX, scaleY, rotation, skewX, skewY });
-            editBox.update({ x: 0, y: 0, width, height });
+            this.editBox.update();
             this.onUpdate();
         }
         unload() {
@@ -14186,7 +14282,7 @@ ${filterStyle$1}
 
     Plugin.add('editor', 'resize');
     Creator.editor = function (options, app) {
-        const editor = new Editor(options);
+        const editor = new exports.Editor(options);
         if (app)
             app.sky.add(app.editor = editor);
         return editor;
@@ -14244,12 +14340,8 @@ ${filterStyle$1}
         style.justifyContent = verticalAlignMap[text.verticalAlign];
         style.lineHeight = (text.__.__lineHeight || 0) * textScale + 'px';
         style.letterSpacing = (text.__.__letterSpacing || 0) * textScale + 'px';
-        if (textWrap === 'none') {
-            style.whiteSpace = 'nowrap';
-        }
-        else if (textWrap === 'break') {
-            style.wordBreak = 'break-all';
-        }
+        style.whiteSpace = (textWrap === 'none' || text.__.__autoWidth) ? 'nowrap' : 'normal';
+        style.wordBreak = textWrap === 'break' ? 'break-all' : 'normal';
         style.textIndent = (text.paraIndent || 0) * textScale + 'px';
         style.padding = padding instanceof Array ? padding.map(item => item * textScale + 'px').join(' ') : (padding || 0) * textScale + 'px';
         style.textOverflow = textOverflow === 'show' ? '' : (textOverflow === 'hide' ? 'clip' : textOverflow);
@@ -14322,10 +14414,12 @@ ${filterStyle$1}
             ];
             this.onFocus = this.onFocus.bind(this);
             this.onInput = this.onInput.bind(this);
+            this.onPaste = this.onPaste.bind(this);
             this.onUpdate = this.onUpdate.bind(this);
             this.onKeydown = this.onKeydown.bind(this);
             div.addEventListener("focus", this.onFocus);
             div.addEventListener("input", this.onInput);
+            div.addEventListener("paste", this.onPaste);
             window.addEventListener('keydown', this.onKeydown);
             window.addEventListener('scroll', this.onUpdate);
             const selection = window.getSelection();
@@ -14355,15 +14449,43 @@ ${filterStyle$1}
             if (e.key === 'Enter') {
                 e.preventDefault();
                 const br = document.createElement('br');
+                const zwsp = document.createTextNode('\u200B');
                 const selection = window.getSelection();
                 const range = selection.getRangeAt(0);
                 range.deleteContents();
+                range.insertNode(zwsp);
                 range.insertNode(br);
                 range.setStartAfter(br);
                 range.setEndAfter(br);
                 this.onInput();
             }
         }
+        onPaste(event) {
+            if (this.isHTMLText)
+                return;
+            event.preventDefault();
+            const clipboardData = event.clipboardData;
+            if (!clipboardData)
+                return;
+            let text = clipboardData.getData('text/plain').replace(/\r\n?/g, '\n');
+            const selection = window.getSelection();
+            if (!selection || !selection.rangeCount)
+                return;
+            const range = selection.getRangeAt(0);
+            range.deleteContents();
+            const lines = text.split('\n');
+            const fragment = document.createDocumentFragment();
+            lines.forEach((line, index) => {
+                if (index > 0)
+                    fragment.appendChild(document.createElement('br'));
+                fragment.appendChild(document.createTextNode(line));
+            });
+            range.insertNode(fragment);
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+            this.onInput();
+        }
         onUpdate() {
             const { editTarget: text } = this;
             let textScale = 1;
@@ -14375,30 +14497,32 @@ ${filterStyle$1}
                     textScale *= 12 / text.fontSize;
             }
             this.textScale = textScale;
-            let { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
-            if (!this.inBody)
-                x -= window.scrollX, y -= window.scrollY;
             let { width, height } = text, offsetX = 0, offsetY = 0;
             width *= textScale, height *= textScale;
             const data = text.__;
-            if (data.__autoWidth && data.autoSizeAlign) {
+            if (data.__autoWidth) {
                 width += 20;
-                switch (data.textAlign) {
-                    case 'center':
-                        offsetX = -width / 2;
-                        break;
-                    case 'right': offsetX = -width;
+                if (data.autoSizeAlign) {
+                    switch (data.textAlign) {
+                        case 'center':
+                            offsetX = -width / 2;
+                            break;
+                        case 'right': offsetX = -width;
+                    }
                 }
             }
-            if (data.__autoHeight && data.autoSizeAlign) {
+            if (data.__autoHeight) {
                 height += 20;
-                switch (data.verticalAlign) {
-                    case 'middle':
-                        offsetY = -height / 2;
-                        break;
-                    case 'bottom': offsetY = -height;
+                if (data.autoSizeAlign) {
+                    switch (data.verticalAlign) {
+                        case 'middle':
+                            offsetY = -height / 2;
+                            break;
+                        case 'bottom': offsetY = -height;
+                    }
                 }
             }
+            const { x, y } = this.inBody ? text.app.clientBounds : text.app.tree.clientBounds;
             const { a, b, c, d, e, f } = new Matrix(text.worldTransform).scale(1 / textScale).translateInner(offsetX, offsetY);
             const { style } = this.editDom;
             style.transform = `matrix(${a},${b},${c},${d},${e},${f})`;
@@ -14420,6 +14544,7 @@ ${filterStyle$1}
                 editor.off_(this.eventIds);
                 dom.removeEventListener("focus", this.onFocus);
                 dom.removeEventListener("input", this.onInput);
+                dom.removeEventListener("paste", this.onPaste);
                 window.removeEventListener('keydown', this.onKeydown);
                 window.removeEventListener('scroll', this.onUpdate);
                 dom.remove();
@@ -14822,8 +14947,16 @@ ${filterStyle$1}
     }
 
     Plugin.add('view');
-    exports.Leafer.prototype.zoom = function (zoomType, padding, fixed, transition) {
+    exports.Leafer.prototype.zoom = function (zoomType, optionsOrPadding, scroll, transition) {
         this.killAnimate();
+        let padding;
+        if (typeof optionsOrPadding === 'object' && !(optionsOrPadding instanceof Array)) {
+            padding = optionsOrPadding.padding;
+            scroll = optionsOrPadding.scroll;
+            transition = optionsOrPadding.transition;
+        }
+        else
+            padding = optionsOrPadding;
         const { zoomLayer } = this;
         const limitBounds = this.canvas.bounds.clone().shrink(padding !== undefined ? padding : 30), bounds = new Bounds();
         const center = { x: limitBounds.x + limitBounds.width / 2, y: limitBounds.y + limitBounds.height / 2 };
@@ -14870,7 +15003,7 @@ ${filterStyle$1}
             }
             const { width, height } = bounds;
             let moveX = limitBounds.x - bounds.x, moveY = limitBounds.y - bounds.y;
-            if (fixed) {
+            if (scroll) {
                 moveX += Math.max((limitBounds.width - width) / 2, 0);
                 moveY += Math.max((limitBounds.height - height) / 2, 0);
             }
@@ -14883,6 +15016,10 @@ ${filterStyle$1}
                 data.scaleX *= changeScale;
                 data.scaleY *= changeScale;
             }
+            if (scroll === 'x')
+                moveY = 0;
+            else if (scroll === 'y')
+                moveX = 0;
             PointHelper.move(data, moveX, moveY);
             bounds.move(moveX, moveY);
             zoomLayer.set(data, transition);
@@ -15048,6 +15185,11 @@ ${filterStyle$1}
             }
             super.__updateBoxBounds();
         }
+        __draw(canvas, options, originCanvas) {
+            if (this.textEditing && !options.exporting)
+                return;
+            super.__draw(canvas, options, originCanvas);
+        }
     };
     __decorate([
         dataProcessor(HTMLTextData)
@@ -15058,6 +15200,9 @@ ${filterStyle$1}
     __decorate([
         dataType('TextEditor')
     ], exports.HTMLText.prototype, "editInner", void 0);
+    __decorate([
+        surfaceType(false)
+    ], exports.HTMLText.prototype, "textEditing", void 0);
     exports.HTMLText = __decorate([
         registerUI()
     ], exports.HTMLText);
@@ -17991,7 +18136,7 @@ ${filterStyle$1}
                 let { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
                 if (clip)
                     x += clip.x, y += clip.y, width = clip.width, height = clip.height;
-                const renderOptions = { matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
+                const renderOptions = { exporting: true, matrix: matrix.scale(1 / scaleData.scaleX, 1 / scaleData.scaleY).invert().translate(-x, -y).withScale(1 / scaleX * scaleData.scaleX, 1 / scaleY * scaleData.scaleY) };
                 let canvas = Creator.canvas({ width: Math.floor(width), height: Math.floor(height), pixelRatio, smooth, contextSettings });
                 let sliceLeaf;
                 if (slice) {
@@ -18170,7 +18315,6 @@ ${filterStyle$1}
     exports.EditSelect = EditSelect;
     exports.EditSelectHelper = EditSelectHelper;
     exports.EditToolCreator = EditToolCreator;
-    exports.Editor = Editor;
     exports.EditorEvent = EditorEvent;
     exports.EditorGroupEvent = EditorGroupEvent;
     exports.EditorHelper = EditorHelper;
@@ -18281,6 +18425,7 @@ ${filterStyle$1}
     exports.TaskProcessor = TaskProcessor;
     exports.TextConvert = TextConvert;
     exports.TextData = TextData;
+    exports.TransformTool = TransformTool;
     exports.Transformer = Transformer;
     exports.Transition = Transition;
     exports.TwoPointBoundsHelper = TwoPointBoundsHelper;