@leafer-editor/worker 1.4.1 → 1.5.0

package/dist/worker.js

@@ -3638,7 +3638,12 @@ var LeaferUI = (function (exports) {
             return R.map[key];
         },
         remove(key) {
-            delete R.map[key];
+            const r = R.map[key];
+            if (r) {
+                if (r.destroy)
+                    r.destroy();
+                delete R.map[key];
+            }
         },
         loadImage(key, format) {
             return new Promise((resolve, reject) => {
@@ -3664,6 +3669,7 @@ var LeaferUI = (function (exports) {
     const R = Resource;
 
     const ImageManager = {
+        maxRecycled: 100,
         recycledList: [],
         patternTasker: new TaskProcessor(),
         get(config) {
@@ -3680,13 +3686,8 @@ var LeaferUI = (function (exports) {
         },
         clearRecycled() {
             const list = I$1.recycledList;
-            if (list.length > 100) {
-                list.forEach(image => {
-                    if (!image.use && image.url) {
-                        Resource.remove(image.url);
-                        image.destroy();
-                    }
-                });
+            if (list.length > I$1.maxRecycled) {
+                list.forEach(image => (!image.use && image.url) && Resource.remove(image.url));
                 list.length = 0;
             }
         },
@@ -4072,12 +4073,11 @@ var LeaferUI = (function (exports) {
         if (defaultValue === undefined) {
             property.get = function () { return this[computedKey]; };
         }
-        else if (typeof defaultValue === 'object') {
-            const { clone } = DataHelper;
+        else if (typeof defaultValue === 'function') {
             property.get = function () {
                 let v = this[computedKey];
                 if (v === undefined)
-                    this[computedKey] = v = clone(defaultValue);
+                    this[computedKey] = v = defaultValue(this.__leaf);
                 return v;
             };
         }
@@ -5724,10 +5724,10 @@ var LeaferUI = (function (exports) {
         static changeAttr(attrName, defaultValue, fn) {
             fn ? this.addAttr(attrName, defaultValue, fn) : defineDataProcessor(this.prototype, attrName, defaultValue);
         }
-        static addAttr(attrName, defaultValue, fn) {
+        static addAttr(attrName, defaultValue, fn, helpValue) {
             if (!fn)
                 fn = boundsType;
-            fn(defaultValue)(this.prototype, attrName);
+            fn(defaultValue, helpValue)(this.prototype, attrName);
         }
         __emitLifeEvent(type) {
             if (this.hasEvent(type))
@@ -6054,7 +6054,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.4.1";
+    const version = "1.5.0";
 
     class LeaferCanvas extends LeaferCanvasBase {
         get allowBackgroundColor() { return true; }
@@ -6941,7 +6941,11 @@ var LeaferUI = (function (exports) {
         setStyleName() { return Plugin.need('state'); },
         set() { return Plugin.need('state'); }
     };
-    const Transition = {};
+    const Transition = {
+        list: {},
+        register(attrName, fn) { Transition.list[attrName] = fn; },
+        get(attrName) { return Transition.list[attrName]; }
+    };
 
     const { parse, objectToCanvasData } = PathConvert;
     const emptyPaint = {};
@@ -7365,9 +7369,6 @@ var LeaferUI = (function (exports) {
                 this.__drawPathByBox(pen);
             return pen;
         }
-        get editConfig() { return undefined; }
-        get editOuter() { return ''; }
-        get editInner() { return ''; }
         constructor(data) {
             super(data);
         }
@@ -7449,8 +7450,11 @@ var LeaferUI = (function (exports) {
         export(_filename, _options) {
             return Plugin.need('export');
         }
+        syncExport(_filename, _options) {
+            return Plugin.need('export');
+        }
         clone(data) {
-            const json = this.toJSON();
+            const json = DataHelper.clone(this.toJSON());
             if (data)
                 Object.assign(json, data);
             return UI_1.one(json);
@@ -7749,7 +7753,7 @@ var LeaferUI = (function (exports) {
         get layoutLocked() { return !this.layouter.running; }
         get FPS() { return this.renderer ? this.renderer.FPS : 60; }
         get cursorPoint() { return (this.interaction && this.interaction.hoverData) || { x: this.width / 2, y: this.height / 2 }; }
-        get clientBounds() { return this.canvas && this.canvas.getClientBounds(); }
+        get clientBounds() { return (this.canvas && this.canvas.getClientBounds(true)) || getBoundsData(); }
         constructor(userConfig, data) {
             super(data);
             this.config = {
@@ -8051,6 +8055,10 @@ var LeaferUI = (function (exports) {
         getPagePointByClient(clientPoint, updateClient) {
             return this.getPagePoint(this.getWorldPointByClient(clientPoint, updateClient));
         }
+        getClientPointByWorld(worldPoint) {
+            const { x, y } = this.clientBounds;
+            return { x: x + worldPoint.x, y: y + worldPoint.y };
+        }
         updateClientBounds() {
             this.canvas && this.canvas.updateClientBounds();
         }
@@ -9990,8 +9998,8 @@ var LeaferUI = (function (exports) {
         this.__drawRenderPath(canvas); };
 
     const matrix$2 = new Matrix();
-    const ui$3 = exports.UI.prototype;
-    ui$3.__updateHitCanvas = function () {
+    const ui$2 = exports.UI.prototype;
+    ui$2.__updateHitCanvas = function () {
         const data = this.__, { hitCanvasManager } = this.leafer;
         const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel';
         const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
@@ -10018,9 +10026,7 @@ var LeaferUI = (function (exports) {
         this.__drawHitPath(h);
         h.setStrokeOptions(data);
     };
-    ui$3.__hit = function (inner) {
-        if (Platform.name === 'miniapp')
-            this.__drawHitPath(this.__hitCanvas);
+    ui$2.__hit = function (inner) {
         const data = this.__;
         if (data.__isHitPixel && this.__hitPixel(inner))
             return true;
@@ -10058,15 +10064,15 @@ var LeaferUI = (function (exports) {
         return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
     };
 
-    const ui$2 = exports.UI.prototype, rect = exports.Rect.prototype, box$1 = exports.Box.prototype;
+    const ui$1 = exports.UI.prototype, rect = exports.Rect.prototype, box$1 = exports.Box.prototype;
     rect.__updateHitCanvas = box$1.__updateHitCanvas = function () {
         if (this.stroke || this.cornerRadius || ((this.fill || this.__.__isCanvas) && this.hitFill === 'pixel') || this.hitStroke === 'all')
-            ui$2.__updateHitCanvas.call(this);
+            ui$1.__updateHitCanvas.call(this);
         else if (this.__hitCanvas)
             this.__hitCanvas = null;
     };
     rect.__hitFill = box$1.__hitFill = function (inner) {
-        return this.__hitCanvas ? ui$2.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
+        return this.__hitCanvas ? ui$1.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
     };
 
     function getSelector$1(ui) {
@@ -11375,13 +11381,14 @@ var LeaferUI = (function (exports) {
     }
 
     function layoutText(drawData, style) {
-        const { rows, bounds } = drawData;
+        const { rows, bounds } = drawData, countRows = rows.length;
         const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing, autoSizeAlign } = style;
-        let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
+        let { x, y, width, height } = bounds, realHeight = __lineHeight * countRows + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0);
         let starY = __baseLine;
         if (__clipText && realHeight > height) {
             realHeight = Math.max(height, __lineHeight);
-            drawData.overflow = rows.length;
+            if (countRows > 1)
+                drawData.overflow = countRows;
         }
         else if (height || autoSizeAlign) {
             switch (verticalAlign) {
@@ -11393,7 +11400,7 @@ var LeaferUI = (function (exports) {
         }
         starY += y;
         let row, rowX, rowWidth, layoutWidth = (width || autoSizeAlign) ? width : drawData.maxWidth;
-        for (let i = 0, len = rows.length; i < len; i++) {
+        for (let i = 0, len = countRows; i < len; i++) {
             row = rows[i];
             row.x = x;
             if (row.width < width || (row.width > width && !__clipText)) {
@@ -11462,7 +11469,7 @@ var LeaferUI = (function (exports) {
                         if (i === end && charRight < right) {
                             break;
                         }
-                        else if (charRight < right && char.char !== ' ') {
+                        else if ((charRight < right && char.char !== ' ') || !i) {
                             row.data.splice(i + 1);
                             row.width -= char.width;
                             break;
@@ -11614,6 +11621,7 @@ var LeaferUI = (function (exports) {
             super(type, data);
         }
     }
+    EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
     EditorMoveEvent.MOVE = 'editor.move';
 
     class EditorScaleEvent extends EditorEvent {
@@ -11621,6 +11629,7 @@ var LeaferUI = (function (exports) {
             super(type, data);
         }
     }
+    EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
     EditorScaleEvent.SCALE = 'editor.scale';
 
     class EditorRotateEvent extends EditorEvent {
@@ -11628,6 +11637,7 @@ var LeaferUI = (function (exports) {
             super(type, data);
         }
     }
+    EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
     EditorRotateEvent.ROTATE = 'editor.rotate';
 
     class EditorSkewEvent extends EditorEvent {
@@ -11635,6 +11645,7 @@ var LeaferUI = (function (exports) {
             super(type, data);
         }
     }
+    EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
     EditorSkewEvent.SKEW = 'editor.skew';
 
     function targetAttr(fn) {
@@ -11687,7 +11698,7 @@ var LeaferUI = (function (exports) {
                 for (let i = 0; i < list.length; i++) {
                     leaf = list[i];
                     const { worldTransform, worldRenderBounds } = leaf;
-                    if (!bounds || bounds.hit(worldRenderBounds, options.matrix)) {
+                    if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
                         const aScaleX = abs$1(worldTransform.scaleX), aScaleY = abs$1(worldTransform.scaleY);
                         if (aScaleX !== aScaleY) {
                             copy$2(matrix$1, worldTransform);
@@ -11813,9 +11824,9 @@ var LeaferUI = (function (exports) {
         }
         onSelect() {
             if (this.running) {
-                const { mergeConfig: config, list } = this.editor;
-                const { stroke, strokeWidth } = config;
-                this.targetStroker.setTarget(list, { stroke, strokeWidth: Math.max(1, strokeWidth / 2) });
+                const { mergeConfig, list } = this.editor;
+                const { stroke, strokeWidth, selectedStyle } = mergeConfig;
+                this.targetStroker.setTarget(list, Object.assign({ stroke, strokeWidth: Math.max(1, strokeWidth / 2) }, (selectedStyle || {})));
                 this.hoverStroker.target = null;
             }
         }
@@ -12002,7 +12013,7 @@ var LeaferUI = (function (exports) {
     const EditDataHelper = {
         getScaleData(element, startBounds, direction, totalMove, lockRatio, around, flipable, scaleMode) {
             let align, origin = {}, scaleX = 1, scaleY = 1;
-            const { boxBounds, widthRange, heightRange, dragBounds } = element;
+            const { boxBounds, widthRange, heightRange, dragBounds, worldBoxBounds } = element;
             const { width, height } = startBounds;
             if (around) {
                 totalMove.x *= 2;
@@ -12016,10 +12027,6 @@ var LeaferUI = (function (exports) {
             const changedScaleY = scaleMode ? originChangedScaleY : signY * boxBounds.height / height;
             totalMove.x *= scaleMode ? originChangedScaleX : signX;
             totalMove.y *= scaleMode ? originChangedScaleY : signY;
-            if (Math.abs(totalMove.x) === width)
-                totalMove.x += 0.1;
-            if (Math.abs(totalMove.y) === height)
-                totalMove.y += 0.1;
             const topScale = (-totalMove.y + height) / height;
             const rightScale = (totalMove.x + width) / width;
             const bottomScale = (totalMove.y + height) / height;
@@ -12109,6 +12116,10 @@ var LeaferUI = (function (exports) {
                 const nowHeight = boxBounds.height * element.scaleY;
                 scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
             }
+            if (Math.abs(scaleX * worldBoxBounds.width) < 1)
+                scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width;
+            if (Math.abs(scaleY * worldBoxBounds.height) < 1)
+                scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height;
             return { origin, scaleX, scaleY, direction, lockRatio, around };
         },
         getRotateData(bounds, direction, current, last, around) {
@@ -12237,7 +12248,7 @@ var LeaferUI = (function (exports) {
         let { rotation } = editBox;
         const { resizeCursor, rotateCursor, skewCursor, resizeable, rotateable, skewable } = editor.mergeConfig;
         const { pointType } = point, { flippedX, flippedY } = editBox;
-        let showResize = pointType === 'resize';
+        let showResize = pointType.includes('resize');
         if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
             showResize = false;
         const showSkew = skewable && !showResize && point.name === 'resize-line';
@@ -12264,7 +12275,7 @@ var LeaferUI = (function (exports) {
     class EditPoint extends exports.Box {
     }
 
-    const fourDirection = ['top', 'right', 'bottom', 'left'];
+    const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig = undefined;
     class EditBox extends exports.Group {
         get flipped() { return this.flippedX || this.flippedY; }
         get flippedX() { return this.scaleX < 0; }
@@ -12279,6 +12290,7 @@ var LeaferUI = (function (exports) {
             this.resizePoints = [];
             this.rotatePoints = [];
             this.resizeLines = [];
+            this.dragStartData = {};
             this.__eventIds = [];
             this.editor = editor;
             this.visible = false;
@@ -12320,7 +12332,7 @@ var LeaferUI = (function (exports) {
                     resizeP.rotation = (i / 2) * 90;
             }
             circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
-            rect.set(Object.assign({ stroke, strokeWidth }, (mergeConfig.rect || {})));
+            rect.set(Object.assign({ stroke, strokeWidth, editConfig }, (mergeConfig.rect || {})));
             rect.hittable = !single;
             rect.syncEventer = single && this.editor;
             if (single) {
@@ -12329,14 +12341,14 @@ var LeaferUI = (function (exports) {
             }
         }
         update(bounds) {
-            this.visible = !this.editor.element.locked;
+            const { mergeConfig, element, multiple } = this.editor;
+            const { middlePoint, resizeable, rotateable, hideOnSmall, editBox } = mergeConfig;
+            this.visible = !element.locked;
             if (this.view.worldOpacity) {
-                const { mergeConfig } = this.editor;
                 const { width, height } = bounds;
                 const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
-                const { middlePoint, resizeable, rotateable, hideOnSmall } = mergeConfig;
                 const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
-                const showPoints = !(hideOnSmall && width < smallSize && height < smallSize);
+                const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
                 let point = {}, rotateP, resizeP, resizeL;
                 for (let i = 0; i < 8; i++) {
                     AroundHelper.toPoint(AroundHelper.directionData[i], bounds, point);
@@ -12352,13 +12364,13 @@ var LeaferUI = (function (exports) {
                         resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
                         if (((i + 1) / 2) % 2) {
                             resizeL.width = width;
-                            if (resizeP.width > width - 30)
+                            if (hideOnSmall && resizeP.width * 2 > width)
                                 resizeP.visible = false;
                         }
                         else {
                             resizeL.height = height;
                             resizeP.rotation = 90;
-                            if (resizeP.width > height - 30)
+                            if (hideOnSmall && resizeP.width * 2 > height)
                                 resizeP.visible = false;
                         }
                     }
@@ -12368,7 +12380,7 @@ var LeaferUI = (function (exports) {
                     this.layoutCircle(mergeConfig);
                 if (rect.path)
                     rect.path = null;
-                rect.set(Object.assign(Object.assign({}, bounds), { visible: true }));
+                rect.set(Object.assign(Object.assign({}, bounds), { visible: multiple ? true : editBox }));
                 buttons.visible = showPoints && buttons.children.length > 0;
                 if (buttons.visible)
                     this.layoutButtons(mergeConfig);
@@ -12415,7 +12427,7 @@ var LeaferUI = (function (exports) {
         }
         getPointStyle(userStyle) {
             const { stroke, strokeWidth, pointFill, pointSize, pointRadius } = this.editor.mergeConfig;
-            const defaultStyle = { fill: pointFill, stroke, strokeWidth, around: 'center', strokeAlign: 'center', width: pointSize, height: pointSize, cornerRadius: pointRadius, offsetX: 0, offsetY: 0 };
+            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() {
@@ -12435,34 +12447,32 @@ var LeaferUI = (function (exports) {
         }
         onDragStart(e) {
             this.dragging = true;
-            const { editor } = this;
-            if (e.current.name === 'rect') {
+            const point = this.dragPoint = e.current;
+            const { editor, dragStartData } = this, { element } = editor;
+            if (point.name === 'rect') {
                 this.moving = true;
-                editor.dragStartPoint = { x: editor.element.x, y: editor.element.y };
                 editor.opacity = editor.mergeConfig.hideOnMove ? 0 : 1;
             }
-            else if (e.current.pointType === 'resize') {
-                editor.dragStartBounds = Object.assign({}, editor.element.getLayoutBounds('box', 'local'));
-                editor.resizeDirection = e.current.direction;
-            }
+            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;
         }
         onDragEnd(e) {
             this.dragging = false;
+            this.dragPoint = null;
             this.moving = false;
             if (e.current.name === 'rect')
                 this.editor.opacity = 1;
-            this.editor.resizeDirection = undefined;
         }
         onDrag(e) {
             const { editor } = this;
-            const point = this.enterPoint = e.current;
-            if (point.pointType === 'rotate' || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
-                if (editor.mergeConfig.rotateable)
-                    editor.onRotate(e);
-            }
-            else if (point.pointType === 'resize') {
+            const { pointType } = this.enterPoint = e.current;
+            if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable)
+                editor.onRotate(e);
+            if (pointType.includes('resize'))
                 editor.onScale(e);
-            }
             updateCursor(editor, e);
         }
         onArrow(e) {
@@ -12640,6 +12650,7 @@ ${filterStyle}
         rotateCursor: { url: rotateSVG, x: 12, y: 12 },
         skewCursor: { url: skewSVG, x: 12, y: 12 },
         selector: true,
+        editBox: true,
         hover: true,
         select: 'press',
         openInner: 'double',
@@ -12655,14 +12666,25 @@ ${filterStyle}
     function simulate(editor) {
         const { simulateTarget, list } = editor;
         const { zoomLayer } = list[0].leafer.zoomLayer;
-        simulateTarget.safeChange(() => simulateTarget.reset(bounds$1.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page')).get()));
+        simulateTarget.safeChange(() => {
+            bounds$1.setListWithFn(list, (leaf) => leaf.getBounds('box', 'page'));
+            if (bounds$1.width === 0)
+                bounds$1.width = 0.1;
+            if (bounds$1.height === 0)
+                bounds$1.height = 0.1;
+            simulateTarget.reset(bounds$1.get());
+        });
         zoomLayer.add(simulateTarget);
     }
 
     function onTarget(editor, oldValue) {
         const { target } = editor;
         if (target) {
-            editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target);
+            const { list } = editor.leafList = target instanceof LeafList ? target : new LeafList(target instanceof Array ? target : target);
+            if (!list.every(checkEditable)) {
+                editor.target = list.filter(checkEditable);
+                return;
+            }
             if (editor.multiple)
                 simulate(editor);
         }
@@ -12689,6 +12711,9 @@ ${filterStyle}
     function onHover(editor, oldValue) {
         editor.emitEvent(new EditorEvent(EditorEvent.HOVER, { editor, value: editor.hoverTarget, oldValue }));
     }
+    function checkEditable(item) {
+        return item.editable && !item.locked;
+    }
 
     const order = (a, b) => a.parent.children.indexOf(a) - b.parent.children.indexOf(b);
     const reverseOrder = (a, b) => b.parent.children.indexOf(b) - a.parent.children.indexOf(a);
@@ -12786,10 +12811,13 @@ ${filterStyle}
             super(type, data);
         }
     }
+    EditorGroupEvent.BEFORE_GROUP = 'editor.before_group';
     EditorGroupEvent.GROUP = 'editor.group';
     EditorGroupEvent.BEFORE_UNGROUP = 'editor.before_ungroup';
     EditorGroupEvent.UNGROUP = 'editor.ungroup';
+    EditorGroupEvent.BEFORE_OPEN = 'editor.before_open_group';
     EditorGroupEvent.OPEN = 'editor.open_group';
+    EditorGroupEvent.BEFORE_CLOSE = 'editor.before_close_group';
     EditorGroupEvent.CLOSE = 'editor.close_group';
 
     const { updateMatrix } = LeafHelper;
@@ -12852,8 +12880,20 @@ ${filterStyle}
 
     class Editor extends exports.Group {
         get mergeConfig() {
-            const { element, config } = this;
-            return this.single && element.editConfig ? Object.assign(Object.assign({}, config), element.editConfig) : config;
+            const { config, element, dragPoint } = this, mergeConfig = Object.assign({}, config);
+            if (element && element.editConfig)
+                Object.assign(mergeConfig, element.editConfig);
+            if (dragPoint) {
+                if (dragPoint.editConfig)
+                    Object.assign(mergeConfig, dragPoint.editConfig);
+                if (mergeConfig.editSize === 'font-size')
+                    mergeConfig.lockRatio = true;
+                if (dragPoint.pointType === 'resize-rotate') {
+                    mergeConfig.around || (mergeConfig.around = 'center');
+                    isNull(mergeConfig.lockRatio) && (mergeConfig.lockRatio = true);
+                }
+            }
+            return mergeConfig;
         }
         get list() { return this.leafList.list; }
         get dragHoverExclude() { return [this.editBox.rect]; }
@@ -12863,6 +12903,7 @@ ${filterStyle}
         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) {
@@ -12953,7 +12994,7 @@ ${filterStyle}
                     else
                         total.x = 0;
                 }
-                this.move(exports.DragEvent.getValidMove(this.element, this.dragStartPoint, total));
+                this.move(exports.DragEvent.getValidMove(this.element, this.editBox.dragStartData.point, total));
             }
         }
         onScale(e) {
@@ -12967,7 +13008,7 @@ ${filterStyle}
                 const { direction } = e.current;
                 if (e.shiftKey || element.lockRatio)
                     lockRatio = true;
-                const data = EditDataHelper.getScaleData(element, this.dragStartBounds, direction, e.getInnerTotal(element), lockRatio, EditDataHelper.getAround(around, e.altKey), flipable, this.multiple || editSize === 'scale');
+                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) {
                     data.drag = e;
                     this.scaleWithDrag(data);
@@ -12982,26 +13023,29 @@ ${filterStyle}
             const { direction, name } = e.current;
             if (skewable && name === 'resize-line')
                 return this.onSkew(e);
-            const { element } = this;
+            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);
                 else
                     return;
+                if (element.scaleX * element.scaleY < 0)
+                    rotation = -rotation;
             }
             else {
-                const last = { x: e.x - e.moveX, y: e.y - e.moveY };
-                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(last), e.shiftKey ? null : (element.around || element.origin || around || 'center'));
+                const data = EditDataHelper.getRotateData(element.boxBounds, direction, e.getBoxPoint(element), element.getBoxPoint(dragStartData), e.shiftKey ? null : (element.around || element.origin || around || 'center'));
                 rotation = data.rotation;
                 origin = data.origin;
             }
-            rotation = MathHelper.getGapRotation(rotation, rotateGap, element.rotation);
-            if (!rotation)
-                return;
             if (element.scaleX * element.scaleY < 0)
                 rotation = -rotation;
-            this.rotateOf(origin, MathHelper.float(rotation, 2));
+            if (e instanceof exports.DragEvent)
+                rotation = dragStartData.rotation + rotation - element.rotation;
+            rotation = MathHelper.float(MathHelper.getGapRotation(rotation, rotateGap, element.rotation), 2);
+            if (!rotation)
+                return;
+            this.rotateOf(origin, rotation);
         }
         onSkew(e) {
             const { element } = this;
@@ -13018,7 +13062,9 @@ ${filterStyle}
             const world = element.getWorldPointByLocal(typeof x === 'object' ? Object.assign({}, x) : { x, y }, null, true);
             if (this.multiple)
                 element.safeChange(() => element.move(x, y));
-            const event = new EditorMoveEvent(EditorMoveEvent.MOVE, { target: element, editor: this, moveX: world.x, moveY: world.y });
+            const data = { target: element, editor: this, 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.emitEvent(event);
         }
@@ -13026,7 +13072,9 @@ ${filterStyle}
             if (!this.checkTransform('resizeable'))
                 return;
             const { element } = this;
-            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) }));
+            data = Object.assign(Object.assign({}, data), { target: element, editor: this, worldOrigin: element.getWorldPoint(data.origin) });
+            this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
+            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScaleWithDrag(event);
             this.emitEvent(event);
         }
@@ -13036,7 +13084,9 @@ ${filterStyle}
             const { element } = this;
             const worldOrigin = this.getWorldOrigin(origin);
             const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.scaleOf(origin, scaleX, scaleY)));
-            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX, scaleY, transform });
+            const data = { target: element, editor: this, worldOrigin, scaleX, scaleY, transform };
+            this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
+            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
             this.editTool.onScale(event);
             this.emitEvent(event);
         }
@@ -13046,7 +13096,9 @@ ${filterStyle}
             const { element } = this;
             const worldOrigin = this.getWorldOrigin('center');
             const transform = this.multiple ? this.getChangedTransform(() => element.safeChange(() => element.flip(axis))) : new Matrix(LeafHelper.getFlipTransform(element, axis));
-            const event = new EditorScaleEvent(EditorScaleEvent.SCALE, { target: element, editor: this, worldOrigin, scaleX: axis === 'x' ? -1 : 1, scaleY: axis === 'y' ? -1 : 1, transform });
+            const data = { target: element, editor: this, 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.emitEvent(event);
         }
@@ -13056,7 +13108,9 @@ ${filterStyle}
             const { element } = this;
             const worldOrigin = this.getWorldOrigin(origin);
             const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.rotateOf(origin, rotation)));
-            const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, { target: element, editor: this, worldOrigin, rotation, transform });
+            const data = { target: element, editor: this, worldOrigin, rotation, transform };
+            this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data));
+            const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data);
             this.editTool.onRotate(event);
             this.emitEvent(event);
         }
@@ -13066,7 +13120,9 @@ ${filterStyle}
             const { element } = this;
             const worldOrigin = this.getWorldOrigin(origin);
             const transform = this.multiple && this.getChangedTransform(() => element.safeChange(() => element.skewOf(origin, skewX, skewY)));
-            const event = new EditorSkewEvent(EditorSkewEvent.SKEW, { target: element, editor: this, worldOrigin, skewX, skewY, transform });
+            const data = { target: element, editor: this, worldOrigin, skewX, skewY, transform };
+            this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data));
+            const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data);
             this.editTool.onSkew(event);
             this.emitEvent(event);
         }
@@ -13084,6 +13140,7 @@ ${filterStyle}
         }
         group(userGroup) {
             if (this.multiple) {
+                this.emitGroupEvent(EditorGroupEvent.BEFORE_GROUP);
                 this.target = EditorHelper.group(this.list, this.element, userGroup);
                 this.emitGroupEvent(EditorGroupEvent.GROUP, this.target);
             }
@@ -13099,11 +13156,13 @@ ${filterStyle}
             return this.list;
         }
         openGroup(group) {
+            this.emitGroupEvent(EditorGroupEvent.BEFORE_OPEN, group);
             this.openedGroupList.add(group);
             group.hitChildren = true;
             this.emitGroupEvent(EditorGroupEvent.OPEN, group);
         }
         closeGroup(group) {
+            this.emitGroupEvent(EditorGroupEvent.BEFORE_CLOSE, group);
             this.openedGroupList.remove(group);
             group.hitChildren = false;
             this.emitGroupEvent(EditorGroupEvent.CLOSE, group);
@@ -13132,7 +13191,8 @@ ${filterStyle}
         emitGroupEvent(type, group) {
             const event = new EditorGroupEvent(type, { editTarget: group });
             this.emitEvent(event);
-            group.emitEvent(event);
+            if (group)
+                group.emitEvent(event);
         }
         openInnerEditor(target, select) {
             if (target && select)
@@ -13549,16 +13609,14 @@ ${filterStyle}
                 leaf.height *= scaleY;
         }
     }
-    function scaleResizeFontSize(leaf, scaleX, scaleY) {
-        const { app } = leaf;
-        const editor = app && app.editor;
+    function scaleResizeFontSize(leaf, scaleX, scaleY, direction) {
         let fontScale = scaleX;
-        if (editor.editing) {
+        if (direction !== undefined) {
             const layout = leaf.__layout;
             let { width, height } = layout.boxBounds;
             width *= scaleY - scaleX;
             height *= scaleX - scaleY;
-            switch (editor.resizeDirection) {
+            switch (direction) {
                 case top:
                 case bottom:
                     fontScale = scaleY;
@@ -13626,8 +13684,9 @@ ${filterStyle}
         this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
     };
     exports.Text.prototype.__scaleResize = function (scaleX, scaleY) {
-        if (this.__.resizeFontSize || (this.editConfig && this.editConfig.editSize === 'font-size')) {
-            scaleResizeFontSize(this, scaleX, scaleY);
+        const { app, editConfig } = this, editor = app && app.editor, dragPoint = editor && editor.dragPoint;
+        if (this.__.resizeFontSize || (editConfig && editConfig.editSize === 'font-size') || (dragPoint && editor.mergeConfig.editSize === 'font-size')) {
+            scaleResizeFontSize(this, scaleX, scaleY, dragPoint && dragPoint.direction);
         }
         else {
             scaleResize(this, scaleX, scaleY);
@@ -13676,34 +13735,15 @@ ${filterStyle}
 
     Plugin.add('editor', 'resize');
     Creator.editor = function (options) { return new Editor(options); };
-    dataType(false)(exports.Box.prototype, 'textBox');
-    defineKey(exports.UI.prototype, 'editOuter', {
-        get() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
-    });
-    defineKey(exports.UI.prototype, 'editInner', {
-        get() { return 'PathEditor'; }
-    });
-    defineKey(exports.Group.prototype, 'editInner', {
-        get() { return ''; }
-    });
-    defineKey(exports.Text.prototype, 'editInner', {
-        get() { return 'TextEditor'; }
-    });
-    exports.UI.setEditConfig = function (config) {
-        defineKey(this.prototype, 'editConfig', {
-            get() { return typeof config === 'function' ? config(this) : config; }
-        });
-    };
-    exports.UI.setEditOuter = function (toolName) {
-        defineKey(this.prototype, 'editOuter', {
-            get() { return typeof toolName === 'string' ? toolName : toolName(this); }
-        });
-    };
-    exports.UI.setEditInner = function (editorName) {
-        defineKey(this.prototype, 'editInner', {
-            get() { return typeof editorName === 'string' ? editorName : editorName(this); }
-        });
-    };
+    exports.Box.addAttr('textBox', false, dataType);
+    exports.UI.addAttr('editConfig', undefined, dataType);
+    exports.UI.addAttr('editOuter', (ui) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', dataType);
+    exports.UI.addAttr('editInner', 'PathEditor', dataType);
+    exports.Group.addAttr('editInner', '', dataType);
+    exports.Text.addAttr('editInner', 'TextEditor', dataType);
+    exports.UI.setEditConfig = function (config) { this.changeAttr('editConfig', config); };
+    exports.UI.setEditOuter = function (toolName) { this.changeAttr('editOuter', toolName); };
+    exports.UI.setEditInner = function (editorName) { this.changeAttr('editInner', editorName); };
 
     function addViewport(leafer, mergeConfig, custom) {
         addViewportConfig(leafer.parentApp ? leafer.parentApp : leafer, mergeConfig);
@@ -13714,10 +13754,8 @@ ${filterStyle}
         }), leafer.on_(exports.ZoomEvent.BEFORE_ZOOM, (e) => {
             const { zoomLayer } = leafer;
             const changeScale = leafer.getValidScale(e.scale);
-            if (changeScale !== 1) {
-                PointHelper.scaleOf(zoomLayer, e, changeScale);
-                zoomLayer.scale = zoomLayer.__.scaleX * changeScale;
-            }
+            if (changeScale !== 1)
+                zoomLayer.scaleOfWorld(e, changeScale);
         }));
     }
     function addViewportConfig(leafer, mergeConfig) {
@@ -13944,7 +13982,7 @@ ${filterStyle}
             changeScale = min / scaleX;
         else if (max && absScale > max)
             changeScale = max / scaleX;
-        return disabled ? 1 : MathHelper.float(changeScale);
+        return disabled ? 1 : changeScale;
     };
 
     function getMoveEventData(move, event) {
@@ -14085,7 +14123,7 @@ ${filterStyle}
         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 };
         let changeScale;
-        const { scaleX } = this.__;
+        const { x, y, scaleX, scaleY } = zoomLayer.__;
         if (typeof zoomType === 'string') {
             switch (zoomType) {
                 case 'in':
@@ -14115,7 +14153,6 @@ ${filterStyle}
             zoomLayer.scaleOfWorld(center, changeScale, changeScale, false, transition);
         }
         else if (typeof zoomType === 'object') {
-            const { x, y, scaleX, scaleY } = zoomLayer;
             const data = { x, y, scaleX, scaleY };
             const isArray = zoomType instanceof Array;
             if (isArray || zoomType.tag) {
@@ -14263,6 +14300,18 @@ ${filterStyle}
     class ArrowData extends LineData {
     }
 
+    function arrowType(defaultValue) {
+        return decorateLeafAttr(defaultValue, (key) => attr({
+            set(value) {
+                if (this.__setAttr(key, value)) {
+                    const data = this.__;
+                    data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
+                    doStrokeType(this);
+                }
+            }
+        }));
+    }
+
     exports.Arrow = class Arrow extends exports.Line {
         get __tag() { return 'Arrow'; }
         constructor(data) {
@@ -14274,7 +14323,7 @@ ${filterStyle}
         dataProcessor(ArrowData)
     ], exports.Arrow.prototype, "__", void 0);
     __decorate([
-        strokeType('angle')
+        arrowType('angle')
     ], exports.Arrow.prototype, "endArrow", void 0);
     exports.Arrow = __decorate([
         registerUI()
@@ -14507,22 +14556,9 @@ ${filterStyle}
         data[startIndex + 1] = point.y;
     }
 
-    function arrowType(defaultValue) {
-        return decorateLeafAttr(defaultValue, (key) => attr({
-            set(value) {
-                if (this.__setAttr(key, value)) {
-                    const data = this.__;
-                    data.__useArrow = data.startArrow !== 'none' || data.endArrow !== 'none';
-                    doStrokeType(this);
-                }
-            }
-        }));
-    }
-
     Plugin.add('arrow');
-    const ui$1 = exports.UI.prototype;
-    arrowType('none')(ui$1, 'startArrow');
-    arrowType('none')(ui$1, 'endArrow');
+    exports.UI.addAttr('startArrow', 'none', arrowType);
+    exports.UI.addAttr('endArrow', 'none', arrowType);
     Object.assign(PathArrow, PathArrowModule);
 
     const { Yes, NoAndSkip, YesAndSkip } = exports.Answer;
@@ -14690,124 +14726,134 @@ ${filterStyle}
     }
 
     const ExportModule = {
-        export(leaf, filename, options) {
+        syncExport(leaf, filename, options) {
             this.running = true;
+            let result;
             const fileType = FileHelper.fileType(filename);
             const isDownload = filename.includes('.');
             options = FileHelper.getExportOptions(options);
-            return addTask((success) => new Promise((resolve) => {
-                const over = (result) => {
-                    success(result);
-                    resolve();
-                    this.running = false;
-                };
-                const { toURL } = Platform;
-                const { download } = Platform.origin;
-                if (fileType === 'json') {
-                    isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
-                    return over({ data: isDownload ? true : leaf.toJSON(options.json) });
-                }
-                if (fileType === 'svg') {
-                    isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
-                    return over({ data: isDownload ? true : leaf.toSVG() });
+            const { toURL } = Platform;
+            const { download } = Platform.origin;
+            if (fileType === 'json') {
+                isDownload && download(toURL(JSON.stringify(leaf.toJSON(options.json)), 'text'), filename);
+                result = { data: isDownload ? true : leaf.toJSON(options.json) };
+            }
+            else if (fileType === 'svg') {
+                isDownload && download(toURL(leaf.toSVG(), 'svg'), filename);
+                result = { data: isDownload ? true : leaf.toSVG() };
+            }
+            else {
+                let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
+                const { worldTransform, isLeafer, leafer, isFrame } = leaf;
+                const { slice, trim, padding, onCanvas } = options;
+                const smooth = options.smooth === undefined ? (leafer ? leafer.config.smooth : true) : options.smooth;
+                const contextSettings = options.contextSettings || (leafer ? leafer.config.contextSettings : undefined);
+                const screenshot = options.screenshot || leaf.isApp;
+                const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
+                const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
+                if (screenshot) {
+                    renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
                 }
-                const { leafer } = leaf;
-                if (leafer) {
-                    checkLazy(leaf);
-                    leafer.waitViewCompleted(() => __awaiter(this, void 0, void 0, function* () {
-                        let renderBounds, trimBounds, scaleX = 1, scaleY = 1;
-                        const { worldTransform, isLeafer, isFrame } = leaf;
-                        const { slice, trim, padding, onCanvas } = options;
-                        const smooth = options.smooth === undefined ? leafer.config.smooth : options.smooth;
-                        const contextSettings = options.contextSettings || leafer.config.contextSettings;
-                        const screenshot = options.screenshot || leaf.isApp;
-                        const fill = (isLeafer && screenshot) ? (options.fill === undefined ? leaf.fill : options.fill) : options.fill;
-                        const needFill = FileHelper.isOpaqueImage(filename) || fill, matrix = new Matrix();
-                        if (screenshot) {
-                            renderBounds = screenshot === true ? (isLeafer ? leafer.canvas.bounds : leaf.worldRenderBounds) : screenshot;
-                        }
-                        else {
-                            let relative = options.relative || (isLeafer ? 'inner' : 'local');
-                            scaleX = worldTransform.scaleX;
-                            scaleY = worldTransform.scaleY;
-                            switch (relative) {
-                                case 'inner':
-                                    matrix.set(worldTransform);
-                                    break;
-                                case 'local':
-                                    matrix.set(worldTransform).divide(leaf.localTransform);
-                                    scaleX /= leaf.scaleX;
-                                    scaleY /= leaf.scaleY;
-                                    break;
-                                case 'world':
-                                    scaleX = 1;
-                                    scaleY = 1;
-                                    break;
-                                case 'page':
-                                    relative = leaf.leafer;
-                                default:
-                                    matrix.set(worldTransform).divide(leaf.getTransform(relative));
-                                    const l = relative.worldTransform;
-                                    scaleX /= scaleX / l.scaleX;
-                                    scaleY /= scaleY / l.scaleY;
-                            }
-                            renderBounds = leaf.getBounds('render', relative);
-                        }
-                        const scaleData = { scaleX: 1, scaleY: 1 };
-                        MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
-                        let pixelRatio = options.pixelRatio || 1;
-                        if (leaf.isApp) {
-                            scaleData.scaleX *= pixelRatio;
-                            scaleData.scaleY *= pixelRatio;
-                            pixelRatio = leaf.app.pixelRatio;
-                        }
-                        const { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
-                        const renderOptions = { 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.round(width), height: Math.round(height), pixelRatio, smooth, contextSettings });
-                        let sliceLeaf;
-                        if (slice) {
-                            sliceLeaf = leaf;
-                            sliceLeaf.__worldOpacity = 0;
-                            leaf = leafer;
-                            renderOptions.bounds = canvas.bounds;
-                        }
-                        canvas.save();
-                        if (isFrame && fill !== undefined) {
-                            const oldFill = leaf.get('fill');
-                            leaf.fill = '';
-                            leaf.__render(canvas, renderOptions);
-                            leaf.fill = oldFill;
-                        }
-                        else {
-                            leaf.__render(canvas, renderOptions);
-                        }
-                        canvas.restore();
-                        if (sliceLeaf)
-                            sliceLeaf.__updateWorldOpacity();
-                        if (trim) {
-                            trimBounds = getTrimBounds(canvas);
-                            const old = canvas, { width, height } = trimBounds;
-                            const config = { x: 0, y: 0, width, height, pixelRatio };
-                            canvas = Creator.canvas(config);
-                            canvas.copyWorld(old, trimBounds, config);
-                        }
-                        if (padding) {
-                            const [top, right, bottom, left] = MathHelper.fourNumber(padding);
-                            const old = canvas, { width, height } = old;
-                            canvas = Creator.canvas({ width: width + left + right, height: height + top + bottom, pixelRatio });
-                            canvas.copyWorld(old, old.bounds, { x: left, y: top, width, height });
-                        }
-                        if (needFill)
-                            canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
-                        if (onCanvas)
-                            onCanvas(canvas);
-                        const data = filename === 'canvas' ? canvas : yield canvas.export(filename, options);
-                        over({ data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds });
-                    }));
+                else {
+                    let relative = options.relative || (isLeafer ? 'inner' : 'local');
+                    scaleX = worldTransform.scaleX;
+                    scaleY = worldTransform.scaleY;
+                    switch (relative) {
+                        case 'inner':
+                            matrix.set(worldTransform);
+                            break;
+                        case 'local':
+                            matrix.set(worldTransform).divide(leaf.localTransform);
+                            scaleX /= leaf.scaleX;
+                            scaleY /= leaf.scaleY;
+                            break;
+                        case 'world':
+                            scaleX = 1;
+                            scaleY = 1;
+                            break;
+                        case 'page':
+                            relative = leafer || leaf;
+                        default:
+                            matrix.set(worldTransform).divide(leaf.getTransform(relative));
+                            const l = relative.worldTransform;
+                            scaleX /= scaleX / l.scaleX;
+                            scaleY /= scaleY / l.scaleY;
+                    }
+                    renderBounds = leaf.getBounds('render', relative);
+                }
+                const scaleData = { scaleX: 1, scaleY: 1 };
+                MathHelper.getScaleData(options.scale, options.size, renderBounds, scaleData);
+                let pixelRatio = options.pixelRatio || 1;
+                if (leaf.isApp) {
+                    scaleData.scaleX *= pixelRatio;
+                    scaleData.scaleY *= pixelRatio;
+                    pixelRatio = leaf.app.pixelRatio;
+                }
+                const { x, y, width, height } = new Bounds(renderBounds).scale(scaleData.scaleX, scaleData.scaleY);
+                const renderOptions = { 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) {
+                    sliceLeaf = leaf;
+                    sliceLeaf.__worldOpacity = 0;
+                    leaf = leafer || leaf;
+                    renderOptions.bounds = canvas.bounds;
+                }
+                canvas.save();
+                if (isFrame && fill !== undefined) {
+                    const oldFill = leaf.get('fill');
+                    leaf.fill = '';
+                    leaf.__render(canvas, renderOptions);
+                    leaf.fill = oldFill;
                 }
                 else {
-                    over({ data: false });
+                    leaf.__render(canvas, renderOptions);
+                }
+                canvas.restore();
+                if (sliceLeaf)
+                    sliceLeaf.__updateWorldOpacity();
+                if (trim) {
+                    trimBounds = getTrimBounds(canvas);
+                    const old = canvas, { width, height } = trimBounds;
+                    const config = { x: 0, y: 0, width, height, pixelRatio };
+                    canvas = Creator.canvas(config);
+                    canvas.copyWorld(old, trimBounds, config);
                 }
+                if (padding) {
+                    const [top, right, bottom, left] = MathHelper.fourNumber(padding);
+                    const old = canvas, { width, height } = old;
+                    canvas = Creator.canvas({ width: width + left + right, height: height + top + bottom, pixelRatio });
+                    canvas.copyWorld(old, old.bounds, { x: left, y: top, width, height });
+                }
+                if (needFill)
+                    canvas.fillWorld(canvas.bounds, fill || '#FFFFFF', 'destination-over');
+                if (onCanvas)
+                    onCanvas(canvas);
+                const data = filename === 'canvas' ? canvas : canvas.export(filename, options);
+                result = { data, width: canvas.pixelWidth, height: canvas.pixelHeight, renderBounds, trimBounds };
+            }
+            this.running = false;
+            return result;
+        },
+        export(leaf, filename, options) {
+            this.running = true;
+            return addTask((success) => new Promise((resolve) => {
+                const getResult = () => __awaiter(this, void 0, void 0, function* () {
+                    if (!Resource.isComplete)
+                        return Platform.requestRender(getResult);
+                    const result = ExportModule.syncExport(leaf, filename, options);
+                    if (result.data instanceof Promise)
+                        result.data = yield result.data;
+                    success(result);
+                    resolve();
+                });
+                leaf.updateLayout();
+                checkLazy(leaf);
+                const { leafer } = leaf;
+                if (leafer)
+                    leafer.waitViewCompleted(getResult);
+                else
+                    getResult();
             }));
         }
     };
@@ -14866,6 +14912,9 @@ ${filterStyle}
     exports.UI.prototype.export = function (filename, options) {
         return Export.export(this, filename, options);
     };
+    exports.UI.prototype.syncExport = function (filename, options) {
+        return Export.syncExport(this, filename, options);
+    };
 
     const textCaseMap = {
         'none': 'none',
@@ -14974,10 +15023,10 @@ ${filterStyle}
             this.onFocus = this.onFocus.bind(this);
             this.onInput = this.onInput.bind(this);
             this.onUpdate = this.onUpdate.bind(this);
-            this.onEscape = this.onEscape.bind(this);
+            this.onKeydown = this.onKeydown.bind(this);
             div.addEventListener("focus", this.onFocus);
             div.addEventListener("input", this.onInput);
-            window.addEventListener('keydown', this.onEscape);
+            window.addEventListener('keydown', this.onKeydown);
             window.addEventListener('scroll', this.onUpdate);
             const selection = window.getSelection();
             const range = document.createRange();
@@ -14995,14 +15044,25 @@ ${filterStyle}
         }
         onInput() {
             const { editDom } = this;
-            this.editTarget.text = this.isHTMLText ? editDom.innerHTML : editDom.innerText.replace(/\n\n/, '\n');
+            this.editTarget.text = this.isHTMLText ? editDom.innerHTML : editDom.innerText;
         }
         onFocus() {
             this.editDom.style.outline = 'none';
         }
-        onEscape(e) {
+        onKeydown(e) {
             if (e.code === 'Escape')
                 this.editor.closeInnerEditor();
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                const br = document.createElement('br');
+                const selection = window.getSelection();
+                const range = selection.getRangeAt(0);
+                range.deleteContents();
+                range.insertNode(br);
+                range.setStartAfter(br);
+                range.setEndAfter(br);
+                this.onInput();
+            }
         }
         onUpdate() {
             const { editTarget: text } = this;
@@ -15058,7 +15118,7 @@ ${filterStyle}
                 editor.off_(this.eventIds);
                 dom.removeEventListener("focus", this.onFocus);
                 dom.removeEventListener("input", this.onInput);
-                window.removeEventListener('keydown', this.onEscape);
+                window.removeEventListener('keydown', this.onKeydown);
                 window.removeEventListener('scroll', this.onUpdate);
                 dom.remove();
                 this.editDom = this.eventIds = undefined;
@@ -15080,7 +15140,6 @@ ${filterStyle}
 
     exports.HTMLText = class HTMLText extends exports.Image {
         get __tag() { return 'HTMLText'; }
-        get editInner() { return 'TextEditor'; }
         constructor(data) {
             super(data);
         }
@@ -15125,6 +15184,9 @@ ${filterStyle}
     __decorate([
         boundsType('')
     ], exports.HTMLText.prototype, "text", void 0);
+    __decorate([
+        dataType('TextEditor')
+    ], exports.HTMLText.prototype, "editInner", void 0);
     exports.HTMLText = __decorate([
         registerUI()
     ], exports.HTMLText);