@leafer-editor/worker 1.4.1 → 1.5.0

package/dist/worker.module.js

@@ -3635,7 +3635,12 @@ const Resource = {
         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) => {
@@ -3661,6 +3666,7 @@ const Resource = {
 const R = Resource;
 
 const ImageManager = {
+    maxRecycled: 100,
     recycledList: [],
     patternTasker: new TaskProcessor(),
     get(config) {
@@ -3677,13 +3683,8 @@ const ImageManager = {
     },
     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;
         }
     },
@@ -4069,12 +4070,11 @@ function defineDataProcessor(target, key, defaultValue) {
     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;
         };
     }
@@ -5721,10 +5721,10 @@ let Leaf = class Leaf {
     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))
@@ -6051,7 +6051,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.4.1";
+const version = "1.5.0";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return true; }
@@ -6938,7 +6938,11 @@ const State = {
     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 = {};
@@ -7362,9 +7366,6 @@ let UI = UI_1 = class UI extends Leaf {
             this.__drawPathByBox(pen);
         return pen;
     }
-    get editConfig() { return undefined; }
-    get editOuter() { return ''; }
-    get editInner() { return ''; }
     constructor(data) {
         super(data);
     }
@@ -7446,8 +7447,11 @@ let UI = UI_1 = class UI extends Leaf {
     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);
@@ -7746,7 +7750,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     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 = {
@@ -8048,6 +8052,10 @@ let Leafer = Leafer_1 = class Leafer extends Group {
     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();
     }
@@ -9987,8 +9995,8 @@ leaf$1.__drawHitPath = function (canvas) { if (canvas)
     this.__drawRenderPath(canvas); };
 
 const matrix$2 = new Matrix();
-const ui$3 = UI.prototype;
-ui$3.__updateHitCanvas = function () {
+const ui$2 = 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';
@@ -10015,9 +10023,7 @@ ui$3.__updateHitCanvas = function () {
     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;
@@ -10055,15 +10061,15 @@ ui$3.__hit = function (inner) {
     return hitWidth ? this.__hitStroke(inner, hitWidth) : false;
 };
 
-const ui$2 = UI.prototype, rect = Rect.prototype, box$1 = Box.prototype;
+const ui$1 = UI.prototype, rect = Rect.prototype, box$1 = 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) {
@@ -11372,13 +11378,14 @@ function toChar(data, charX, rowData, isOverflow) {
 }
 
 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) {
@@ -11390,7 +11397,7 @@ function layoutText(drawData, style) {
     }
     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)) {
@@ -11459,7 +11466,7 @@ function clipText(drawData, style, x, width) {
                     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;
@@ -11611,6 +11618,7 @@ class EditorMoveEvent extends EditorEvent {
         super(type, data);
     }
 }
+EditorMoveEvent.BEFORE_MOVE = 'editor.before_move';
 EditorMoveEvent.MOVE = 'editor.move';
 
 class EditorScaleEvent extends EditorEvent {
@@ -11618,6 +11626,7 @@ class EditorScaleEvent extends EditorEvent {
         super(type, data);
     }
 }
+EditorScaleEvent.BEFORE_SCALE = 'editor.before_scale';
 EditorScaleEvent.SCALE = 'editor.scale';
 
 class EditorRotateEvent extends EditorEvent {
@@ -11625,6 +11634,7 @@ class EditorRotateEvent extends EditorEvent {
         super(type, data);
     }
 }
+EditorRotateEvent.BEFORE_ROTATE = 'editor.before_rotate';
 EditorRotateEvent.ROTATE = 'editor.rotate';
 
 class EditorSkewEvent extends EditorEvent {
@@ -11632,6 +11642,7 @@ class EditorSkewEvent extends EditorEvent {
         super(type, data);
     }
 }
+EditorSkewEvent.BEFORE_SKEW = 'editor.before_skew';
 EditorSkewEvent.SKEW = 'editor.skew';
 
 function targetAttr(fn) {
@@ -11684,7 +11695,7 @@ class Stroker extends UI {
             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);
@@ -11810,9 +11821,9 @@ class EditSelect extends Group {
     }
     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;
         }
     }
@@ -11999,7 +12010,7 @@ const { within } = MathHelper;
 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;
@@ -12013,10 +12024,6 @@ const EditDataHelper = {
         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;
@@ -12106,6 +12113,10 @@ const EditDataHelper = {
             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) {
@@ -12234,7 +12245,7 @@ function updateCursor(editor, e) {
     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';
@@ -12261,7 +12272,7 @@ function toDataURL(svg, rotation) {
 class EditPoint extends Box {
 }
 
-const fourDirection = ['top', 'right', 'bottom', 'left'];
+const fourDirection = ['top', 'right', 'bottom', 'left'], editConfig = undefined;
 class EditBox extends Group {
     get flipped() { return this.flippedX || this.flippedY; }
     get flippedX() { return this.scaleX < 0; }
@@ -12276,6 +12287,7 @@ class EditBox extends Group {
         this.resizePoints = [];
         this.rotatePoints = [];
         this.resizeLines = [];
+        this.dragStartData = {};
         this.__eventIds = [];
         this.editor = editor;
         this.visible = false;
@@ -12317,7 +12329,7 @@ class EditBox extends Group {
                 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) {
@@ -12326,14 +12338,14 @@ class EditBox extends Group {
         }
     }
     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);
@@ -12349,13 +12361,13 @@ class EditBox extends Group {
                     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;
                     }
                 }
@@ -12365,7 +12377,7 @@ class EditBox extends Group {
                 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);
@@ -12412,7 +12424,7 @@ class EditBox extends Group {
     }
     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() {
@@ -12432,34 +12444,32 @@ class EditBox extends Group {
     }
     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) {
@@ -12637,6 +12647,7 @@ const config = {
     rotateCursor: { url: rotateSVG, x: 12, y: 12 },
     skewCursor: { url: skewSVG, x: 12, y: 12 },
     selector: true,
+    editBox: true,
     hover: true,
     select: 'press',
     openInner: 'double',
@@ -12652,14 +12663,25 @@ const bounds$1 = new Bounds();
 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);
     }
@@ -12686,6 +12708,9 @@ function onTarget(editor, oldValue) {
 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);
@@ -12783,10 +12808,13 @@ class EditorGroupEvent extends EditorEvent {
         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;
@@ -12849,8 +12877,20 @@ class SimulateElement extends Rect {
 
 class Editor extends 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]; }
@@ -12860,6 +12900,7 @@ class Editor extends Group {
     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) {
@@ -12950,7 +12991,7 @@ class Editor extends Group {
                 else
                     total.x = 0;
             }
-            this.move(DragEvent.getValidMove(this.element, this.dragStartPoint, total));
+            this.move(DragEvent.getValidMove(this.element, this.editBox.dragStartData.point, total));
         }
     }
     onScale(e) {
@@ -12964,7 +13005,7 @@ class Editor extends Group {
             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);
@@ -12979,26 +13020,29 @@ class Editor extends Group {
         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 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 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;
@@ -13015,7 +13059,9 @@ class Editor extends Group {
         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);
     }
@@ -13023,7 +13069,9 @@ class Editor extends Group {
         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);
     }
@@ -13033,7 +13081,9 @@ class Editor extends Group {
         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);
     }
@@ -13043,7 +13093,9 @@ class Editor extends Group {
         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);
     }
@@ -13053,7 +13105,9 @@ class Editor extends Group {
         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);
     }
@@ -13063,7 +13117,9 @@ class Editor extends Group {
         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);
     }
@@ -13081,6 +13137,7 @@ class Editor extends Group {
     }
     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);
         }
@@ -13096,11 +13153,13 @@ class Editor extends Group {
         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);
@@ -13129,7 +13188,8 @@ class Editor extends Group {
     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)
@@ -13546,16 +13606,14 @@ function scaleResize(leaf, scaleX, scaleY) {
             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;
@@ -13623,8 +13681,9 @@ leaf.resizeHeight = function (height) {
     this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
 };
 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);
@@ -13673,34 +13732,15 @@ Plugin.add('resize');
 
 Plugin.add('editor', 'resize');
 Creator.editor = function (options) { return new Editor(options); };
-dataType(false)(Box.prototype, 'textBox');
-defineKey(UI.prototype, 'editOuter', {
-    get() { return this.__.__isLinePath ? 'LineEditTool' : 'EditTool'; }
-});
-defineKey(UI.prototype, 'editInner', {
-    get() { return 'PathEditor'; }
-});
-defineKey(Group.prototype, 'editInner', {
-    get() { return ''; }
-});
-defineKey(Text.prototype, 'editInner', {
-    get() { return 'TextEditor'; }
-});
-UI.setEditConfig = function (config) {
-    defineKey(this.prototype, 'editConfig', {
-        get() { return typeof config === 'function' ? config(this) : config; }
-    });
-};
-UI.setEditOuter = function (toolName) {
-    defineKey(this.prototype, 'editOuter', {
-        get() { return typeof toolName === 'string' ? toolName : toolName(this); }
-    });
-};
-UI.setEditInner = function (editorName) {
-    defineKey(this.prototype, 'editInner', {
-        get() { return typeof editorName === 'string' ? editorName : editorName(this); }
-    });
-};
+Box.addAttr('textBox', false, dataType);
+UI.addAttr('editConfig', undefined, dataType);
+UI.addAttr('editOuter', (ui) => ui.__.__isLinePath ? 'LineEditTool' : 'EditTool', dataType);
+UI.addAttr('editInner', 'PathEditor', dataType);
+Group.addAttr('editInner', '', dataType);
+Text.addAttr('editInner', 'TextEditor', dataType);
+UI.setEditConfig = function (config) { this.changeAttr('editConfig', config); };
+UI.setEditOuter = function (toolName) { this.changeAttr('editOuter', toolName); };
+UI.setEditInner = function (editorName) { this.changeAttr('editInner', editorName); };
 
 function addViewport(leafer, mergeConfig, custom) {
     addViewportConfig(leafer.parentApp ? leafer.parentApp : leafer, mergeConfig);
@@ -13711,10 +13751,8 @@ function addViewport(leafer, mergeConfig, custom) {
     }), leafer.on_(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) {
@@ -13941,7 +13979,7 @@ leafer.getValidScale = function (changeScale) {
         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) {
@@ -14082,7 +14120,7 @@ Leafer.prototype.zoom = function (zoomType, padding, fixed, transition) {
     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':
@@ -14112,7 +14150,6 @@ Leafer.prototype.zoom = function (zoomType, padding, fixed, transition) {
         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) {
@@ -14260,6 +14297,18 @@ Plugin.add('scroll');
 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);
+            }
+        }
+    }));
+}
+
 let Arrow = class Arrow extends Line {
     get __tag() { return 'Arrow'; }
     constructor(data) {
@@ -14271,7 +14320,7 @@ __decorate([
     dataProcessor(ArrowData)
 ], Arrow.prototype, "__", void 0);
 __decorate([
-    strokeType('angle')
+    arrowType('angle')
 ], Arrow.prototype, "endArrow", void 0);
 Arrow = __decorate([
     registerUI()
@@ -14504,22 +14553,9 @@ function setPoint$1(data, point, startIndex) {
     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 = UI.prototype;
-arrowType('none')(ui$1, 'startArrow');
-arrowType('none')(ui$1, 'endArrow');
+UI.addAttr('startArrow', 'none', arrowType);
+UI.addAttr('endArrow', 'none', arrowType);
 Object.assign(PathArrow, PathArrowModule);
 
 const { Yes, NoAndSkip, YesAndSkip } = Answer;
@@ -14687,124 +14723,134 @@ function getTrimBounds(canvas) {
 }
 
 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();
         }));
     }
 };
@@ -14863,6 +14909,9 @@ Object.assign(Export, ExportModule);
 UI.prototype.export = function (filename, options) {
     return Export.export(this, filename, options);
 };
+UI.prototype.syncExport = function (filename, options) {
+    return Export.syncExport(this, filename, options);
+};
 
 const textCaseMap = {
     'none': 'none',
@@ -14971,10 +15020,10 @@ let TextEditor = class TextEditor extends InnerEditor {
         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();
@@ -14992,14 +15041,25 @@ let TextEditor = class TextEditor extends InnerEditor {
     }
     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;
@@ -15055,7 +15115,7 @@ let TextEditor = class TextEditor extends InnerEditor {
             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;
@@ -15077,7 +15137,6 @@ class HTMLTextData extends ImageData {
 
 let HTMLText = class HTMLText extends Image {
     get __tag() { return 'HTMLText'; }
-    get editInner() { return 'TextEditor'; }
     constructor(data) {
         super(data);
     }
@@ -15122,6 +15181,9 @@ __decorate([
 __decorate([
     boundsType('')
 ], HTMLText.prototype, "text", void 0);
+__decorate([
+    dataType('TextEditor')
+], HTMLText.prototype, "editInner", void 0);
 HTMLText = __decorate([
     registerUI()
 ], HTMLText);