@leafer-editor/worker 1.5.3 → 1.6.1

package/dist/worker.module.js

@@ -45,7 +45,7 @@ const IncrementId = {
 };
 const I$2 = IncrementId;
 
-const { round, pow: pow$1, PI: PI$4 } = Math;
+const { round: round$3, pow: pow$1, PI: PI$4 } = Math;
 const MathHelper = {
     within(value, min, max) {
         if (typeof min === 'object')
@@ -109,7 +109,7 @@ const MathHelper = {
     },
     float(num, maxLength) {
         const a = maxLength !== undefined ? pow$1(10, maxLength) : 1000000000000;
-        num = round(num * a) / a;
+        num = round$3(num * a) / a;
         return num === -0 ? 0 : num;
     },
     getScaleData(scale, size, originSize, scaleData) {
@@ -132,8 +132,15 @@ const MathHelper = {
             scaleData.scaleX = scale.x;
             scaleData.scaleY = scale.y;
         }
+    },
+    randInt,
+    randColor(opacity) {
+        return `rgba(${randInt(255)},${randInt(255)},${randInt(255)},${opacity || 1})`;
     }
 };
+function randInt(num) {
+    return Math.round(Math.random() * num);
+}
 const OneRadian = PI$4 / 180;
 const PI2 = PI$4 * 2;
 const PI_2 = PI$4 / 2;
@@ -431,7 +438,7 @@ const MatrixHelper = {
 const M$9 = MatrixHelper;
 
 const { toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3 } = MatrixHelper;
-const { sin: sin$4, cos: cos$4, abs: abs$6, sqrt: sqrt$2, atan2: atan2$2, min: min$1, PI: PI$3 } = Math;
+const { sin: sin$4, cos: cos$4, abs: abs$6, sqrt: sqrt$2, atan2: atan2$2, min: min$1, round: round$2, PI: PI$3 } = Math;
 const PointHelper = {
     defaultPoint: getPointData(),
     tempPoint: {},
@@ -452,6 +459,10 @@ const PointHelper = {
         t.x = x;
         t.y = y;
     },
+    round(t, halfPixel) {
+        t.x = halfPixel ? round$2(t.x - 0.5) + 0.5 : round$2(t.x);
+        t.y = halfPixel ? round$2(t.y - 0.5) + 0.5 : round$2(t.y);
+    },
     move(t, x, y) {
         t.x += x;
         t.y += y;
@@ -1317,6 +1328,7 @@ const StringNumberMap = {
     'E': 1
 };
 
+const { randColor } = MathHelper;
 class Debug {
     constructor(name) {
         this.repeatMap = {};
@@ -1331,6 +1343,19 @@ class Debug {
     static set exclude(name) {
         this.excludeList = getNameList(name);
     }
+    static drawRepaint(canvas, bounds) {
+        const color = randColor();
+        canvas.fillWorld(bounds, color.replace('1)', '.1)'));
+        canvas.strokeWorld(bounds, color);
+    }
+    static drawBounds(leaf, canvas, _options) {
+        const showHit = Debug.showBounds === 'hit', w = leaf.__nowWorld, color = randColor();
+        if (showHit)
+            canvas.setWorld(w), leaf.__drawHitPath(canvas), canvas.fillStyle = color.replace('1)', '.2)'), canvas.fill();
+        canvas.resetTransform();
+        canvas.setStroke(color, 2);
+        showHit ? canvas.stroke() : canvas.strokeWorld(w, color);
+    }
     log(...messages) {
         if (D$6.enable) {
             if (D$6.filterList.length && D$6.filterList.every(name => name !== this.name))
@@ -1417,7 +1442,7 @@ const Plugin = {
         return rs;
     },
     need(name) {
-        console.error('need plugin: ' + (name.includes('-x') ? '' : '@leafer-in/') + name);
+        console.error('please install plugin: ' + (name.includes('-x') ? '' : '@leafer-in/') + name);
     }
 };
 setTimeout(() => check.forEach(name => Plugin.has(name, true)));
@@ -2017,7 +2042,7 @@ __decorate([
     contextMethod()
 ], Canvas$1.prototype, "strokeText", null);
 
-const { copy: copy$c } = MatrixHelper;
+const { copy: copy$c, multiplyParent: multiplyParent$3 } = MatrixHelper, { round: round$1 } = Math;
 const minSize = { width: 1, height: 1, pixelRatio: 1 };
 const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
 class LeaferCanvasBase extends Canvas$1 {
@@ -2026,6 +2051,8 @@ class LeaferCanvasBase extends Canvas$1 {
     get pixelRatio() { return this.size.pixelRatio; }
     get pixelWidth() { return this.width * this.pixelRatio; }
     get pixelHeight() { return this.height * this.pixelRatio; }
+    get pixelSnap() { return this.config.pixelSnap; }
+    set pixelSnap(value) { this.config.pixelSnap = value; }
     get allowBackgroundColor() { return this.view && this.parentView; }
     constructor(config, manager) {
         super();
@@ -2086,15 +2113,22 @@ class LeaferCanvasBase extends Canvas$1 {
     stopAutoLayout() { }
     setCursor(_cursor) { }
     setWorld(matrix, parentMatrix) {
-        const { pixelRatio } = this;
-        const w = this.worldTransform;
-        if (parentMatrix) {
-            const { a, b, c, d, e, f } = parentMatrix;
-            this.setTransform(w.a = ((matrix.a * a) + (matrix.b * c)) * pixelRatio, w.b = ((matrix.a * b) + (matrix.b * d)) * pixelRatio, w.c = ((matrix.c * a) + (matrix.d * c)) * pixelRatio, w.d = ((matrix.c * b) + (matrix.d * d)) * pixelRatio, w.e = (((matrix.e * a) + (matrix.f * c) + e)) * pixelRatio, w.f = (((matrix.e * b) + (matrix.f * d) + f)) * pixelRatio);
-        }
-        else {
-            this.setTransform(w.a = matrix.a * pixelRatio, w.b = matrix.b * pixelRatio, w.c = matrix.c * pixelRatio, w.d = matrix.d * pixelRatio, w.e = matrix.e * pixelRatio, w.f = matrix.f * pixelRatio);
+        const { pixelRatio, pixelSnap } = this, w = this.worldTransform;
+        if (parentMatrix)
+            multiplyParent$3(matrix, parentMatrix, w);
+        w.a = matrix.a * pixelRatio;
+        w.b = matrix.b * pixelRatio;
+        w.c = matrix.c * pixelRatio;
+        w.d = matrix.d * pixelRatio;
+        w.e = matrix.e * pixelRatio;
+        w.f = matrix.f * pixelRatio;
+        if (pixelSnap) {
+            if (matrix.half && (matrix.half * pixelRatio) % 2)
+                w.e = round$1(w.e - 0.5) + 0.5, w.f = round$1(w.f - 0.5) + 0.5;
+            else
+                w.e = round$1(w.e), w.f = round$1(w.f);
         }
+        this.setTransform(w.a, w.b, w.c, w.d, w.e, w.f);
     }
     useWorldTransform(worldTransform) {
         if (worldTransform)
@@ -2237,12 +2271,13 @@ class LeaferCanvasBase extends Canvas$1 {
         return this.width === size.width && this.height === size.height && (!size.pixelRatio || this.pixelRatio === size.pixelRatio);
     }
     getSameCanvas(useSameWorldTransform, useSameSmooth) {
-        const canvas = this.manager ? this.manager.get(this.size) : Creator.canvas(Object.assign({}, this.size));
+        const { size, pixelSnap } = this, canvas = this.manager ? this.manager.get(size) : Creator.canvas(Object.assign({}, size));
         canvas.save();
         if (useSameWorldTransform)
             copy$c(canvas.worldTransform, this.worldTransform), canvas.useWorldTransform();
         if (useSameSmooth)
             canvas.smooth = this.smooth;
+        canvas.pixelSnap !== pixelSnap && (canvas.pixelSnap = pixelSnap);
         return canvas;
     }
     recycle(clearBounds) {
@@ -3669,7 +3704,7 @@ const Resource = {
 const R = Resource;
 
 const ImageManager = {
-    maxRecycled: 100,
+    maxRecycled: 10,
     recycledList: [],
     patternTasker: new TaskProcessor(),
     get(config) {
@@ -4022,9 +4057,8 @@ function hitType(defaultValue) {
         set(value) {
             if (this.__setAttr(key, value)) {
                 this.__layout.hitCanvasChanged = true;
-                if (Debug.showHitView) {
+                if (Debug.showBounds === 'hit')
                     this.__layout.surfaceChanged || this.__layout.surfaceChange();
-                }
                 if (this.leafer)
                     this.leafer.updateCursor();
             }
@@ -4185,7 +4219,7 @@ function registerUIEvent() {
 }
 
 const { copy: copy$a, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
-const matrix$3 = {};
+const matrix$3 = {}, { round } = Math;
 const LeafHelper = {
     updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
         if (checkAutoLayout && leaf.__hasAutoLayout && leaf.__layout.matrixChanged)
@@ -4259,6 +4293,8 @@ const LeafHelper = {
             y = x.y, x = x.x;
         x += t.x;
         y += t.y;
+        if (t.leafer && t.leafer.config.pointSnap)
+            x = round(x), y = round(y);
         transition ? t.animate({ x, y }, transition) : (t.x = x, t.y = y);
     },
     zoomOfWorld(t, origin, scaleX, scaleY, resize, transition) {
@@ -4497,6 +4533,7 @@ class LeafLayout {
     set contentBounds(bounds) { this._contentBounds = bounds; }
     get strokeBounds() { return this._strokeBounds || this.boxBounds; }
     get renderBounds() { return this._renderBounds || this.boxBounds; }
+    set renderBounds(bounds) { this._renderBounds = bounds; }
     get localContentBounds() { toOuterOf$2(this.contentBounds, this.leaf.__localMatrix, this[localContent] || (this[localContent] = {})); return this[localContent]; }
     get localStrokeBounds() { return this._localStrokeBounds || this; }
     get localRenderBounds() { return this._localRenderBounds || this; }
@@ -4515,11 +4552,13 @@ class LeafLayout {
     get height() { return this.boxBounds.height; }
     constructor(leaf) {
         this.leaf = leaf;
-        this.boxBounds = { x: 0, y: 0, width: 0, height: 0 };
         if (this.leaf.__local)
             this._localRenderBounds = this._localStrokeBounds = this.leaf.__local;
-        this.boxChange();
-        this.matrixChange();
+        if (leaf.__world) {
+            this.boxBounds = { x: 0, y: 0, width: 0, height: 0 };
+            this.boxChange();
+            this.matrixChange();
+        }
     }
     createLocal() {
         const local = this.leaf.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
@@ -4851,6 +4890,9 @@ class ResizeEvent extends Event {
         }
         this.old = oldSize;
     }
+    static isResizing(leaf) {
+        return this.resizingKeys && this.resizingKeys[leaf.innerId] !== undefined;
+    }
 }
 ResizeEvent.RESIZE = 'resize';
 
@@ -4893,6 +4935,7 @@ class RenderEvent extends Event {
 }
 RenderEvent.REQUEST = 'render.request';
 RenderEvent.CHILD_START = 'render.child_start';
+RenderEvent.CHILD_END = 'render.child_end';
 RenderEvent.START = 'render.start';
 RenderEvent.BEFORE = 'render.before';
 RenderEvent.RENDER = 'render';
@@ -5272,24 +5315,27 @@ const LeafBounds = {
 const LeafRender = {
     __render(canvas, options) {
         if (this.__worldOpacity) {
+            const data = this.__;
             canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
-            canvas.opacity = this.__.opacity;
+            canvas.opacity = options.dimOpacity && !data.dimskip ? data.opacity * options.dimOpacity : data.opacity;
             if (this.__.__single) {
-                if (this.__.eraser === 'path')
+                if (data.eraser === 'path')
                     return this.__renderEraser(canvas, options);
                 const tempCanvas = canvas.getSameCanvas(true, true);
                 this.__draw(tempCanvas, options, canvas);
                 if (this.__worldFlipped) {
-                    canvas.copyWorldByReset(tempCanvas, this.__nowWorld, null, this.__.__blendMode, true);
+                    canvas.copyWorldByReset(tempCanvas, this.__nowWorld, null, data.__blendMode, true);
                 }
                 else {
-                    canvas.copyWorldToInner(tempCanvas, this.__nowWorld, this.__layout.renderBounds, this.__.__blendMode);
+                    canvas.copyWorldToInner(tempCanvas, this.__nowWorld, this.__layout.renderBounds, data.__blendMode);
                 }
                 tempCanvas.recycle(this.__nowWorld);
             }
             else {
                 this.__draw(canvas, options);
             }
+            if (Debug.showBounds)
+                Debug.drawBounds(this, canvas, options);
         }
     },
     __clip(canvas, options) {
@@ -5319,14 +5365,19 @@ const BranchRender = {
     __render(canvas, options) {
         this.__nowWorld = this.__getNowWorld(options);
         if (this.__worldOpacity) {
-            if (this.__.__single) {
-                if (this.__.eraser === 'path')
+            const data = this.__;
+            if (data.dim)
+                options.dimOpacity = data.dim === true ? 0.2 : data.dim;
+            else if (data.dimskip)
+                options.dimOpacity && (options.dimOpacity = 0);
+            if (data.__single) {
+                if (data.eraser === 'path')
                     return this.__renderEraser(canvas, options);
                 const tempCanvas = canvas.getSameCanvas(false, true);
                 this.__renderBranch(tempCanvas, options);
                 const nowWorld = this.__nowWorld;
-                canvas.opacity = this.__.opacity;
-                canvas.copyWorldByReset(tempCanvas, nowWorld, nowWorld, this.__.__blendMode, true);
+                canvas.opacity = options.dimOpacity ? data.opacity * options.dimOpacity : data.opacity;
+                canvas.copyWorldByReset(tempCanvas, nowWorld, nowWorld, data.__blendMode, true);
                 tempCanvas.recycle(nowWorld);
             }
             else {
@@ -5401,9 +5452,11 @@ let Leaf = class Leaf {
     reset(data) {
         if (this.leafer)
             this.leafer.forceRender(this.__world);
-        this.__world = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1 };
-        if (data !== null)
-            this.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
+        if (data !== 0) {
+            this.__world = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0, scaleX: 1, scaleY: 1 };
+            if (data !== null)
+                this.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 };
+        }
         this.__worldOpacity = 1;
         this.__ = new this.__DataProcessor(this);
         this.__layout = new this.__LayoutProcessor(this);
@@ -5539,9 +5592,10 @@ let Leaf = class Leaf {
         if (options.matrix) {
             if (!this.__cameraWorld)
                 this.__cameraWorld = {};
-            const cameraWorld = this.__cameraWorld;
-            multiplyParent(this.__world, options.matrix, cameraWorld, undefined, this.__world);
+            const cameraWorld = this.__cameraWorld, world = this.__world;
+            multiplyParent(world, options.matrix, cameraWorld, undefined, world);
             toOuterOf(this.__layout.renderBounds, cameraWorld, cameraWorld);
+            cameraWorld.half !== world.half && (cameraWorld.half = world.half);
             return cameraWorld;
         }
         else {
@@ -5701,7 +5755,7 @@ let Leaf = class Leaf {
     __updateHitCanvas() { }
     __render(_canvas, _options) { }
     __drawFast(_canvas, _options) { }
-    __draw(_canvas, _options) { }
+    __draw(_canvas, _options, _originCanvas) { }
     __clip(_canvas, _options) { }
     __renderShape(_canvas, _options, _ignoreFill, _ignoreStroke) { }
     __updateWorldOpacity() { }
@@ -6071,7 +6125,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.5.3";
+const version = "1.6.1";
 
 class LeaferCanvas extends LeaferCanvasBase {
     get allowBackgroundColor() { return true; }
@@ -6311,7 +6365,6 @@ function updateChange(updateList) {
 }
 
 const { worldBounds: worldBounds$1 } = LeafBoundsHelper;
-const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
 class LayoutBlockData {
     constructor(list) {
         this.updatedBounds = new Bounds();
@@ -6325,13 +6378,7 @@ class LayoutBlockData {
         this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds$1);
     }
     setAfter() {
-        const { list } = this.updatedList;
-        if (list.some(leaf => leaf.noBounds)) {
-            this.afterBounds.set(bigBounds);
-        }
-        else {
-            this.afterBounds.setListWithFn(list, worldBounds$1);
-        }
+        this.afterBounds.setListWithFn(this.updatedList.list, worldBounds$1);
         this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
     }
     merge(data) {
@@ -6533,6 +6580,22 @@ class Renderer {
     requestLayout() {
         this.target.emit(LayoutEvent.REQUEST);
     }
+    checkRender() {
+        if (this.running) {
+            const { target } = this;
+            if (target.isApp) {
+                target.emit(RenderEvent.CHILD_START, target);
+                target.children.forEach(leafer => {
+                    leafer.renderer.FPS = this.FPS;
+                    leafer.renderer.checkRender();
+                });
+                target.emit(RenderEvent.CHILD_END, target);
+            }
+            if (this.changed && this.canvas.view)
+                this.render();
+            this.target.emit(RenderEvent.NEXT);
+        }
+    }
     render(callback) {
         if (!(this.running && this.canvas.view))
             return this.update();
@@ -6541,8 +6604,6 @@ class Renderer {
         this.totalBounds = new Bounds();
         debug$6.log(target.innerName, '--->');
         try {
-            if (!target.isApp)
-                target.app.emit(RenderEvent.CHILD_START, target);
             this.emitRender(RenderEvent.START);
             this.renderOnce(callback);
             this.emitRender(RenderEvent.END, this.totalBounds);
@@ -6610,20 +6671,12 @@ class Renderer {
     }
     clipRender(block) {
         const t = Run.start('PartRender');
-        const { canvas } = this;
-        const bounds = block.getIntersect(canvas.bounds);
-        const includes = block.includes(this.target.__world);
-        const realBounds = new Bounds(bounds);
+        const { canvas } = this, bounds = block.getIntersect(canvas.bounds), realBounds = new Bounds(bounds);
         canvas.save();
-        if (includes && !Debug.showRepaint) {
-            canvas.clear();
-        }
-        else {
-            bounds.spread(10 + 1 / this.canvas.pixelRatio).ceil();
-            canvas.clearWorld(bounds, true);
-            canvas.clipWorld(bounds, true);
-        }
-        this.__render(bounds, includes, realBounds);
+        bounds.spread(Renderer.clipSpread).ceil();
+        canvas.clearWorld(bounds, true);
+        canvas.clipWorld(bounds, true);
+        this.__render(bounds, realBounds);
         canvas.restore();
         Run.end(t);
     }
@@ -6632,28 +6685,22 @@ class Renderer {
         const { canvas } = this;
         canvas.save();
         canvas.clear();
-        this.__render(canvas.bounds, true);
+        this.__render(canvas.bounds);
         canvas.restore();
         Run.end(t);
     }
-    __render(bounds, includes, realBounds) {
-        const options = bounds.includes(this.target.__world) ? { includes } : { bounds, includes };
+    __render(bounds, realBounds) {
+        const { canvas } = this, includes = bounds.includes(this.target.__world), options = includes ? { includes } : { bounds, includes };
         if (this.needFill)
-            this.canvas.fillWorld(bounds, this.config.fill);
+            canvas.fillWorld(bounds, this.config.fill);
         if (Debug.showRepaint)
-            this.canvas.strokeWorld(bounds, 'red');
-        this.target.__render(this.canvas, options);
+            Debug.drawRepaint(canvas, bounds);
+        this.target.__render(canvas, options);
         this.renderBounds = realBounds = realBounds || bounds;
         this.renderOptions = options;
         this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
-        if (Debug.showHitView)
-            this.renderHitView(options);
-        if (Debug.showBoundsView)
-            this.renderBoundsView(options);
-        this.canvas.updateRender(realBounds);
-    }
-    renderHitView(_options) { }
-    renderBoundsView(_options) { }
+        canvas.updateRender(realBounds);
+    }
     addBlock(block) {
         if (!this.updateBlocks)
             this.updateBlocks = [];
@@ -6669,17 +6716,16 @@ class Renderer {
         }
     }
     __requestRender() {
-        if (this.requestTime)
+        const target = this.target;
+        if (this.requestTime || !target)
             return;
+        if (target.parentApp)
+            return target.parentApp.requestRender(false);
         const requestTime = this.requestTime = Date.now();
         Platform.requestRender(() => {
             this.FPS = Math.min(60, Math.ceil(1000 / (Date.now() - requestTime)));
             this.requestTime = 0;
-            if (this.running) {
-                if (this.changed && this.canvas.view)
-                    this.render();
-                this.target.emit(RenderEvent.NEXT);
-            }
+            this.checkRender();
         });
     }
     __onResize(e) {
@@ -6737,6 +6783,7 @@ class Renderer {
         }
     }
 }
+Renderer.clipSpread = 10;
 
 const { hitRadiusPoint } = BoundsHelper;
 class Picker {
@@ -6982,6 +7029,7 @@ class UIData extends LeafData {
             return strokeWidth;
     }
     get __hasStroke() { return this.stroke && this.strokeWidth; }
+    get __hasHalf() { const t = this; return (t.stroke && t.strokeAlign === 'center' && t.strokeWidth % 2) || undefined; }
     get __hasMultiPaint() {
         const t = this;
         if ((t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect)
@@ -7026,14 +7074,14 @@ class UIData extends LeafData {
                 this.__removeInput('fill');
                 PaintImage.recycleImage('fill', this);
                 this.__isFills = false;
-                if (this.__pixelFill)
-                    this.__pixelFill = false;
+                this.__pixelFill && (this.__pixelFill = false);
             }
             this._fill = value;
         }
         else if (typeof value === 'object') {
             this.__setInput('fill', value);
-            this.__leaf.__layout.boxChanged || this.__leaf.__layout.boxChange();
+            const layout = this.__leaf.__layout;
+            layout.boxChanged || layout.boxChange();
             this.__isFills = true;
             this._fill || (this._fill = emptyPaint);
         }
@@ -7044,14 +7092,14 @@ class UIData extends LeafData {
                 this.__removeInput('stroke');
                 PaintImage.recycleImage('stroke', this);
                 this.__isStrokes = false;
-                if (this.__pixelStroke)
-                    this.__pixelStroke = false;
+                this.__pixelStroke && (this.__pixelStroke = false);
             }
             this._stroke = value;
         }
         else if (typeof value === 'object') {
             this.__setInput('stroke', value);
-            this.__leaf.__layout.boxChanged || this.__leaf.__layout.boxChange();
+            const layout = this.__leaf.__layout;
+            layout.boxChanged || layout.boxChange();
             this.__isStrokes = true;
             this._stroke || (this._stroke = emptyPaint);
         }
@@ -7166,6 +7214,31 @@ class TextData extends UIData {
             this._fontWeight = value;
         }
     }
+    setBoxStyle(value) {
+        let t = this.__leaf, box = t.__box;
+        if (value) {
+            const { boxStyle } = this;
+            if (box)
+                for (let key in boxStyle)
+                    box[key] = undefined;
+            else
+                box = t.__box = UICreator.get('Rect', 0);
+            const layout = t.__layout, boxLayout = box.__layout;
+            if (!boxStyle)
+                box.parent = t, box.__world = t.__world, boxLayout.boxBounds = layout.boxBounds;
+            box.set(value);
+            if (boxLayout.strokeChanged)
+                layout.strokeChange();
+            if (boxLayout.renderChanged)
+                layout.renderChange();
+            box.__updateChange();
+        }
+        else if (box) {
+            t.__box = box.parent = null;
+            box.destroy();
+        }
+        this._boxStyle = value;
+    }
 }
 
 class ImageData extends RectData {
@@ -7203,7 +7276,7 @@ class CanvasData extends RectData {
 const UIBounds = {
     __updateStrokeSpread() {
         let width = 0, boxWidth = 0;
-        const data = this.__, { strokeAlign, strokeWidth } = data;
+        const data = this.__, { strokeAlign, strokeWidth } = data, box = this.__box;
         if ((data.stroke || data.hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
             boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
             if (!data.__boxStroke) {
@@ -7214,6 +7287,10 @@ const UIBounds = {
         }
         if (data.__useArrow)
             width += strokeWidth * 5;
+        if (box) {
+            width = Math.max(box.__layout.strokeSpread = box.__updateStrokeSpread(), width);
+            boxWidth = box.__layout.strokeBoxSpread;
+        }
         this.__layout.strokeBoxSpread = boxWidth;
         return width;
     },
@@ -7232,25 +7309,26 @@ const UIBounds = {
         if (backgroundBlur)
             shapeWidth = Math.max(shapeWidth, backgroundBlur);
         this.__layout.renderShapeSpread = shapeWidth;
-        return width + (this.__layout.strokeSpread || 0);
+        width += this.__layout.strokeSpread || 0;
+        return this.__box ? Math.max(this.__box.__updateRenderSpread(), width) : width;
     }
 };
 
 const UIRender = {
     __updateChange() {
-        const data = this.__;
+        const data = this.__, w = this.__world;
         if (data.__useEffect) {
             const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
             data.__useEffect = !!(shadow || innerShadow || blur || backgroundBlur || filter);
         }
+        const half = data.__hasHalf;
+        w.half !== half && (w.half = half);
         data.__checkSingle();
         const complex = data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect;
-        if (complex) {
+        if (complex)
             data.__complex = true;
-        }
-        else {
+        else
             data.__complex && (data.__complex = false);
-        }
     },
     __drawFast(canvas, options) {
         drawFast(this, canvas, options);
@@ -7337,10 +7415,11 @@ function drawFast(ui, canvas, options) {
 
 const RectRender = {
     __drawFast(canvas, options) {
-        let { width, height, fill, stroke, __drawAfterFill } = this.__;
+        let { x, y, width, height } = this.__layout.boxBounds;
+        const { fill, stroke, __drawAfterFill } = this.__;
         if (fill) {
             canvas.fillStyle = fill;
-            canvas.fillRect(0, 0, width, height);
+            canvas.fillRect(x, y, width, height);
         }
         if (__drawAfterFill)
             this.__drawAfterFill(canvas, options);
@@ -7359,14 +7438,14 @@ const RectRender = {
                     if (width < 0 || height < 0) {
                         canvas.save();
                         this.__clip(canvas, options);
-                        canvas.strokeRect(half, half, width, height);
+                        canvas.strokeRect(x + half, y + half, width, height);
                         canvas.restore();
                     }
                     else
-                        canvas.strokeRect(half, half, width, height);
+                        canvas.strokeRect(x + half, y + half, width, height);
                     break;
                 case 'outside':
-                    canvas.strokeRect(-half, -half, width + __strokeWidth, height + __strokeWidth);
+                    canvas.strokeRect(x - half, y - half, width + __strokeWidth, height + __strokeWidth);
                     break;
             }
         }
@@ -7522,6 +7601,12 @@ __decorate([
 __decorate([
     surfaceType(false)
 ], UI.prototype, "locked", void 0);
+__decorate([
+    surfaceType(false)
+], UI.prototype, "dim", void 0);
+__decorate([
+    surfaceType(false)
+], UI.prototype, "dimskip", void 0);
 __decorate([
     sortType(0)
 ], UI.prototype, "zIndex", void 0);
@@ -7783,7 +7868,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             start: true,
             hittable: true,
             smooth: true,
-            lazySpeard: 100
+            lazySpeard: 100,
         };
         this.leafs = 0;
         this.__eventIds = [];
@@ -8207,13 +8292,13 @@ let Box = class Box extends Group {
             super.__updateRenderBounds();
             copy$6(childrenRenderBounds, renderBounds);
             this.__updateRectRenderBounds();
-            isOverflow = !includes$1(renderBounds, childrenRenderBounds);
+            isOverflow = !includes$1(renderBounds, childrenRenderBounds) || undefined;
             if (isOverflow && this.__.overflow !== 'hide')
                 add(renderBounds, childrenRenderBounds);
         }
         else
             this.__updateRectRenderBounds();
-        !this.isOverflow !== !isOverflow && (this.isOverflow = isOverflow);
+        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
     }
     __updateRectRenderBounds() { }
     __updateRectChange() { }
@@ -8621,33 +8706,13 @@ Canvas = __decorate([
     registerUI()
 ], Canvas);
 
-const { copyAndSpread, includes, isSame: isSame$1, spread, setList } = BoundsHelper;
+const { copyAndSpread, includes, spread, setList } = BoundsHelper;
 let Text = class Text extends UI {
     get __tag() { return 'Text'; }
-    get textDrawData() {
-        this.__layout.update();
-        return this.__.__textDrawData;
-    }
+    get textDrawData() { this.updateLayout(); return this.__.__textDrawData; }
     constructor(data) {
         super(data);
     }
-    __drawHitPath(canvas) {
-        const { __lineHeight, fontSize, __baseLine, __textDrawData: data } = this.__;
-        canvas.beginPath();
-        if (this.__.__letterSpacing < 0) {
-            this.__drawPathByData(canvas);
-        }
-        else {
-            data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
-        }
-    }
-    __drawPathByData(drawer, _data) {
-        const { x, y, width, height } = this.__layout.boxBounds;
-        drawer.rect(x, y, width, height);
-    }
-    __drawRenderPath(canvas) {
-        canvas.font = this.__.__font;
-    }
     __updateTextDrawData() {
         const data = this.__;
         const { lineHeight, letterSpacing, fontFamily, fontSize, fontWeight, italic, textCase, textOverflow, padding } = data;
@@ -8664,15 +8729,16 @@ let Text = class Text extends UI {
         const layout = this.__layout;
         const { fontSize, italic, padding, __autoWidth: autoWidth, __autoHeight: autoHeight } = data;
         this.__updateTextDrawData();
-        const { bounds } = data.__textDrawData;
+        const { bounds: contentBounds } = data.__textDrawData;
         const b = layout.boxBounds;
+        layout.contentBounds = contentBounds;
         if (data.__lineHeight < fontSize)
-            spread(bounds, fontSize / 2);
+            spread(contentBounds, fontSize / 2);
         if (autoWidth || autoHeight) {
-            b.x = autoWidth ? bounds.x : 0;
-            b.y = autoHeight ? bounds.y : 0;
-            b.width = autoWidth ? bounds.width : data.width;
-            b.height = autoHeight ? bounds.height : data.height;
+            b.x = autoWidth ? contentBounds.x : 0;
+            b.y = autoHeight ? contentBounds.y : 0;
+            b.width = autoWidth ? contentBounds.width : data.width;
+            b.height = autoHeight ? contentBounds.height : data.height;
             if (padding) {
                 const [top, right, bottom, left] = data.__padding;
                 if (autoWidth)
@@ -8686,23 +8752,45 @@ let Text = class Text extends UI {
             super.__updateBoxBounds();
         if (italic)
             b.width += fontSize * 0.16;
-        const contentBounds = includes(b, bounds) ? b : bounds;
-        if (!isSame$1(contentBounds, layout.contentBounds)) {
-            layout.contentBounds = contentBounds;
-            layout.renderChanged = true;
-            setList(data.__textBoxBounds = {}, [b, bounds]);
-        }
+        const isOverflow = !includes(b, contentBounds) || undefined;
+        if (isOverflow)
+            setList(data.__textBoxBounds = {}, [b, contentBounds]), layout.renderChanged = true;
         else
-            data.__textBoxBounds = contentBounds;
+            data.__textBoxBounds = b;
+        this.isOverflow !== isOverflow && (this.isOverflow = isOverflow);
+    }
+    __onUpdateSize() {
+        if (this.__box)
+            this.__box.__onUpdateSize();
+        super.__onUpdateSize();
     }
     __updateRenderSpread() {
         let width = super.__updateRenderSpread();
         if (!width)
-            width = this.__layout.boxBounds === this.__layout.contentBounds ? 0 : 1;
+            width = this.isOverflow ? 1 : 0;
         return width;
     }
     __updateRenderBounds() {
-        copyAndSpread(this.__layout.renderBounds, this.__.__textBoxBounds, this.__layout.renderSpread);
+        const { renderBounds, renderSpread } = this.__layout;
+        copyAndSpread(renderBounds, this.__.__textBoxBounds, renderSpread);
+        if (this.__box)
+            this.__box.__layout.renderBounds = renderBounds;
+    }
+    __drawRenderPath(canvas) {
+        canvas.font = this.__.__font;
+    }
+    __draw(canvas, options, originCanvas) {
+        const box = this.__box;
+        if (box)
+            box.__nowWorld = this.__nowWorld, box.__draw(canvas, options, originCanvas);
+        if (this.textEditing && !Export.running)
+            return;
+        super.__draw(canvas, options, originCanvas);
+    }
+    destroy() {
+        if (this.boxStyle)
+            this.boxStyle = null;
+        super.destroy();
     }
 };
 __decorate([
@@ -8714,6 +8802,9 @@ __decorate([
 __decorate([
     boundsType(0)
 ], Text.prototype, "height", void 0);
+__decorate([
+    surfaceType()
+], Text.prototype, "boxStyle", void 0);
 __decorate([
     dataType(false)
 ], Text.prototype, "resizeFontSize", void 0);
@@ -8877,26 +8968,25 @@ let App = class App extends Leafer {
         this.leafer = this;
         this.watcher.disable();
         this.layouter.disable();
-        this.__eventIds.push(this.on_(PropertyEvent.CHANGE, this.__onPropertyChange, this));
     }
     start() {
         super.start();
-        this.children.forEach(leafer => leafer.start());
+        this.forEach(leafer => leafer.start());
     }
     stop() {
-        this.children.forEach(leafer => leafer.stop());
+        this.forEach(leafer => leafer.stop());
         super.stop();
     }
     unlockLayout() {
         super.unlockLayout();
-        this.children.forEach(leafer => leafer.unlockLayout());
+        this.forEach(leafer => leafer.unlockLayout());
     }
     lockLayout() {
         super.lockLayout();
-        this.children.forEach(leafer => leafer.lockLayout());
+        this.forEach(leafer => leafer.lockLayout());
     }
     forceRender(bounds, sync) {
-        this.children.forEach(leafer => leafer.forceRender(bounds, sync));
+        this.forEach(leafer => leafer.forceRender(bounds, sync));
     }
     addLeafer(merge) {
         const leafer = new Leafer(merge);
@@ -8916,9 +9006,8 @@ let App = class App extends Leafer {
             leafer.canvas.childIndex = index;
         this.__listenChildEvents(leafer);
     }
-    __onPropertyChange() {
-        if (Debug.showHitView)
-            this.children.forEach(leafer => leafer.forceUpdate('surface'));
+    forEach(fn) {
+        this.children.forEach(fn);
     }
     __onCreated() {
         this.created = this.children.every(child => child.created);
@@ -8941,18 +9030,18 @@ let App = class App extends Leafer {
             const m = options.matrix;
             if (m)
                 canvas.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
-            this.children.forEach(leafer => canvas.copyWorld(leafer.canvas));
+            this.forEach(leafer => canvas.copyWorld(leafer.canvas));
         }
     }
     __onResize(event) {
-        this.children.forEach(leafer => leafer.resize(event));
+        this.forEach(leafer => leafer.resize(event));
         super.__onResize(event);
     }
     updateLayout() {
-        this.children.forEach(leafer => leafer.updateLayout());
+        this.forEach(leafer => leafer.updateLayout());
     }
     __getChildConfig(userConfig) {
-        let config = Object.assign({}, this.config);
+        const config = Object.assign({}, this.config);
         config.hittable = config.realCanvas = undefined;
         if (userConfig)
             DataHelper.assign(config, userConfig);
@@ -9511,6 +9600,7 @@ const config$1 = {
         delta: { x: 80 / 4, y: 8.0 },
     },
     pointer: {
+        snap: true,
         hitRadius: 5,
         tapTime: 120,
         longPressTime: 800,
@@ -9605,8 +9695,7 @@ class InteractionBase {
         if (this.downData) {
             const canDrag = PointHelper.getDistance(this.downData, data) > this.p.dragDistance;
             if (canDrag) {
-                if (this.waitTap)
-                    this.pointerWaitCancel();
+                this.pointerWaitCancel();
                 this.waitRightTap = false;
             }
             this.dragger.checkDrag(data, canDrag);
@@ -9866,7 +9955,10 @@ class InteractionBase {
     }
     getLocal(clientPoint, updateClient) {
         const clientBounds = this.canvas.getClientBounds(updateClient);
-        return { x: clientPoint.clientX - clientBounds.x, y: clientPoint.clientY - clientBounds.y };
+        const point = { x: clientPoint.clientX - clientBounds.x, y: clientPoint.clientY - clientBounds.y };
+        if (this.p.snap)
+            PointHelper.round(point);
+        return point;
     }
     emitTap(data) {
         this.emit(PointerEvent.TAP, data);
@@ -9885,9 +9977,11 @@ class InteractionBase {
         this.waitTap = true;
     }
     tapWaitCancel() {
-        clearTimeout(this.tapTimer);
-        this.waitTap = false;
-        this.tapCount = 0;
+        if (this.waitTap) {
+            clearTimeout(this.tapTimer);
+            this.waitTap = false;
+            this.tapCount = 0;
+        }
     }
     longPressWait(data) {
         clearTimeout(this.longPressTimer);
@@ -9907,8 +10001,10 @@ class InteractionBase {
         return hasLong;
     }
     longPressWaitCancel() {
-        clearTimeout(this.longPressTimer);
-        this.longPressed = false;
+        if (this.longPressTimer) {
+            clearTimeout(this.longPressTimer);
+            this.longPressed = false;
+        }
     }
     __onResize() {
         const { dragOut } = this.m;
@@ -9998,25 +10094,26 @@ const { toInnerRadiusPointOf, copy: copy$5, setRadius } = PointHelper;
 const inner = {};
 const leaf$1 = Leaf.prototype;
 leaf$1.__hitWorld = function (point) {
-    if (!this.__.hitSelf)
+    const data = this.__;
+    if (!data.hitSelf)
         return false;
-    if (this.__.hitRadius) {
+    const world = this.__world, layout = this.__layout;
+    const isSmall = world.width < 10 && world.height < 10;
+    if (data.hitRadius) {
         copy$5(inner, point), point = inner;
-        setRadius(point, this.__.hitRadius);
+        setRadius(point, data.hitRadius);
     }
-    toInnerRadiusPointOf(point, this.__world, inner);
-    const { width, height } = this.__world;
-    const isSmall = width < 10 && height < 10;
-    if (this.__.hitBox || isSmall) {
-        if (BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner))
+    toInnerRadiusPointOf(point, world, inner);
+    if (data.hitBox || isSmall) {
+        if (BoundsHelper.hitRadiusPoint(layout.boxBounds, inner))
             return true;
         if (isSmall)
             return false;
     }
-    if (this.__layout.hitCanvasChanged || !this.__hitCanvas) {
+    if (layout.hitCanvasChanged || !this.__hitCanvas) {
         this.__updateHitCanvas();
-        if (!this.__layout.boundsChanged)
-            this.__layout.hitCanvasChanged = false;
+        if (!layout.boundsChanged)
+            layout.hitCanvasChanged = false;
     }
     return this.__hit(inner);
 };
@@ -10029,7 +10126,9 @@ leaf$1.__drawHitPath = function (canvas) { if (canvas)
 const matrix$2 = new Matrix();
 const ui$2 = UI.prototype;
 ui$2.__updateHitCanvas = function () {
-    const data = this.__, { hitCanvasManager } = this.leafer;
+    if (this.__box)
+        this.__box.__updateHitCanvas();
+    const data = this.__, { hitCanvasManager } = this.leafer || this.parent.leafer;
     const isHitPixelFill = (data.__pixelFill || data.__isCanvas) && data.hitFill === 'pixel';
     const isHitPixelStroke = data.__pixelStroke && data.hitStroke === 'pixel';
     const isHitPixel = isHitPixelFill || isHitPixelStroke;
@@ -10056,6 +10155,8 @@ ui$2.__updateHitCanvas = function () {
     h.setStrokeOptions(data);
 };
 ui$2.__hit = function (inner) {
+    if (this.__box && this.__box.__hit(inner))
+        return true;
     const data = this.__;
     if (data.__isHitPixel && this.__hitPixel(inner))
         return true;
@@ -10104,6 +10205,15 @@ rect.__hitFill = box$1.__hitFill = function (inner) {
     return this.__hitCanvas ? ui$1.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
 };
 
+Text.prototype.__drawHitPath = function (canvas) {
+    const { __lineHeight, fontSize, __baseLine, __letterSpacing, __textDrawData: data } = this.__;
+    canvas.beginPath();
+    if (__letterSpacing < 0)
+        this.__drawPathByBox(canvas);
+    else
+        data.rows.forEach(row => canvas.rect(row.x, row.y - __baseLine, row.width, __lineHeight < fontSize ? fontSize : __lineHeight));
+};
+
 function getSelector$1(ui) {
     return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
 }
@@ -10486,9 +10596,11 @@ const tempBox = new Bounds();
 const tempPoint = {};
 const tempScaleData = {};
 function createData(leafPaint, image, paint, box) {
-    const { blendMode, sync } = paint;
+    const { blendMode, changeful, sync } = paint;
     if (blendMode)
         leafPaint.blendMode = blendMode;
+    if (changeful)
+        leafPaint.changeful = changeful;
     if (sync)
         leafPaint.sync = sync;
     leafPaint.data = getPatternData(paint, box, image);
@@ -10721,40 +10833,32 @@ function createPattern(ui, paint, pixelRatio) {
 }
 
 const { abs: abs$2 } = Math;
-function checkImage(ui, canvas, paint, allowPaint) {
+function checkImage(ui, canvas, paint, allowDraw) {
     const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
-    const { pixelRatio } = canvas;
-    if (!paint.data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
+    const { pixelRatio } = canvas, { data } = paint;
+    if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
         return false;
     }
     else {
-        const { data } = paint;
-        if (allowPaint) {
-            if (!data.repeat) {
-                let { width, height } = data;
-                width *= abs$2(scaleX) * pixelRatio;
-                height *= abs$2(scaleY) * pixelRatio;
-                if (data.scaleX) {
-                    width *= data.scaleX;
-                    height *= data.scaleY;
-                }
-                allowPaint = (width * height > Platform.image.maxCacheSize) || Export.running;
+        if (allowDraw) {
+            if (data.repeat) {
+                allowDraw = false;
             }
             else {
-                allowPaint = false;
+                if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
+                    let { width, height } = data;
+                    width *= abs$2(scaleX) * pixelRatio;
+                    height *= abs$2(scaleY) * pixelRatio;
+                    if (data.scaleX) {
+                        width *= data.scaleX;
+                        height *= data.scaleY;
+                    }
+                    allowDraw = (width * height > Platform.image.maxCacheSize);
+                }
             }
         }
-        if (allowPaint) {
-            canvas.save();
-            ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
-            if (paint.blendMode)
-                canvas.blendMode = paint.blendMode;
-            if (data.opacity)
-                canvas.opacity *= data.opacity;
-            if (data.transform)
-                canvas.transform(data.transform);
-            canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
-            canvas.restore();
+        if (allowDraw) {
+            drawImage(ui, canvas, paint, data);
             return true;
         }
         else {
@@ -10775,13 +10879,26 @@ function checkImage(ui, canvas, paint, allowPaint) {
         }
     }
 }
+function drawImage(ui, canvas, paint, data) {
+    canvas.save();
+    ui.windingRule ? canvas.clip(ui.windingRule) : canvas.clip();
+    if (paint.blendMode)
+        canvas.blendMode = paint.blendMode;
+    if (data.opacity)
+        canvas.opacity *= data.opacity;
+    if (data.transform)
+        canvas.transform(data.transform);
+    canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
+    canvas.restore();
+}
 
 function recycleImage(attrName, data) {
     const paints = data['_' + attrName];
     if (paints instanceof Array) {
-        let image, recycleMap, input, url;
+        let paint, image, recycleMap, input, url;
         for (let i = 0, len = paints.length; i < len; i++) {
-            image = paints[i].image;
+            paint = paints[i];
+            image = paint.image;
             url = image && image.url;
             if (url) {
                 if (!recycleMap)
@@ -10796,8 +10913,6 @@ function recycleImage(attrName, data) {
                     }
                     image.unload(paints[i].loadId, !input.some((item) => item.url === url));
                 }
-                else
-                    paints[i].style = null;
             }
         }
         return recycleMap;
@@ -10976,7 +11091,7 @@ const { toOffsetOutBounds } = BoundsHelper;
 const offsetOutBounds = {};
 function innerShadow(ui, current, shape) {
     let copyBounds, spreadScale;
-    const { __nowWorld: nowWorld, __layout: __layout } = ui;
+    const { __nowWorld: nowWorld, __layout } = ui;
     const { innerShadow } = ui.__;
     const { worldCanvas, bounds, shapeBounds, scaleX, scaleY } = shape;
     const other = current.getSameCanvas();
@@ -11730,6 +11845,28 @@ function targetAttr(fn) {
         });
     };
 }
+function mergeConfigAttr() {
+    return (target, key) => {
+        defineKey(target, key, {
+            get() {
+                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 this.mergedConfig = mergeConfig;
+            }
+        });
+    };
+}
 
 const { abs: abs$1 } = Math;
 const { copy: copy$2, scale: scale$1 } = MatrixHelper;
@@ -11741,6 +11878,7 @@ class Stroker extends UI {
     constructor() {
         super();
         this.list = [];
+        this.visible = 0;
         this.hittable = false;
         this.strokeAlign = 'center';
     }
@@ -11754,10 +11892,10 @@ class Stroker extends UI {
         if (list.length) {
             setListWithFn(bounds$2, list, worldBounds);
             this.set(bounds$2);
+            this.visible = true;
         }
-        else {
-            this.width = this.height = 1;
-        }
+        else
+            this.visible = 0;
     }
     __draw(canvas, options) {
         const { list } = this;
@@ -11769,8 +11907,9 @@ class Stroker extends UI {
                 const { worldTransform, worldRenderBounds } = leaf;
                 if (worldRenderBounds.width && worldRenderBounds.height && (!bounds || bounds.hit(worldRenderBounds, options.matrix))) {
                     const aScaleX = abs$1(worldTransform.scaleX), aScaleY = abs$1(worldTransform.scaleY);
+                    copy$2(matrix$1, worldTransform);
+                    matrix$1.half = strokeWidth % 2;
                     if (aScaleX !== aScaleY) {
-                        copy$2(matrix$1, worldTransform);
                         scale$1(matrix$1, 1 / aScaleX, 1 / aScaleY);
                         canvas.setWorld(matrix$1, options.matrix);
                         canvas.beginPath();
@@ -11779,7 +11918,7 @@ class Stroker extends UI {
                         canvas.rect(x * aScaleX, y * aScaleY, width * aScaleX, height * aScaleY);
                     }
                     else {
-                        canvas.setWorld(worldTransform, options.matrix);
+                        canvas.setWorld(matrix$1, options.matrix);
                         canvas.beginPath();
                         if (leaf.__.__useArrow)
                             leaf.__drawPath(canvas);
@@ -11814,7 +11953,8 @@ class SelectArea extends Group {
         super(data);
         this.strokeArea = new Rect({ strokeAlign: 'center' });
         this.fillArea = new Rect();
-        this.visible = this.hittable = false;
+        this.visible = 0;
+        this.hittable = false;
         this.addMany(this.fillArea, this.strokeArea);
     }
     setStyle(style, userStyle) {
@@ -12011,7 +12151,7 @@ class EditSelect extends Group {
         if (e.multiTouch)
             return;
         if (this.dragging)
-            this.originList = null, this.selectArea.visible = false;
+            this.originList = null, this.selectArea.visible = 0;
     }
     onAutoMove(e) {
         if (this.dragging) {
@@ -12159,8 +12299,11 @@ const EditDataHelper = {
                 scaleY = scaleY < 0 ? -scale : scale;
             }
         }
-        scaleX /= changedScaleX;
-        scaleY /= changedScaleY;
+        const useScaleX = scaleX !== 1, useScaleY = scaleY !== 1;
+        if (useScaleX)
+            scaleX /= changedScaleX;
+        if (useScaleY)
+            scaleY /= changedScaleY;
         if (!flipable) {
             const { worldTransform } = element;
             if (scaleX < 0)
@@ -12175,22 +12318,27 @@ const EditDataHelper = {
             localBounds.scaleOf(element.getLocalPointByInner(origin), scaleX, scaleY);
             if (!BoundsHelper.includes(allowBounds, localBounds)) {
                 const realBounds = localBounds.getIntersect(allowBounds);
-                scaleX *= realBounds.width / localBounds.width;
-                scaleY *= realBounds.height / localBounds.height;
+                const fitScaleX = realBounds.width / localBounds.width, fitScaleY = realBounds.height / localBounds.height;
+                if (useScaleX)
+                    scaleX *= fitScaleX;
+                if (useScaleY)
+                    scaleY *= fitScaleY;
             }
         }
-        if (widthRange) {
+        if (useScaleX && widthRange) {
             const nowWidth = boxBounds.width * element.scaleX;
             scaleX = within(nowWidth * scaleX, widthRange) / nowWidth;
         }
-        if (heightRange) {
+        if (useScaleY && heightRange) {
             const nowHeight = boxBounds.height * element.scaleY;
             scaleY = within(nowHeight * scaleY, heightRange) / nowHeight;
         }
-        if (Math.abs(scaleX * worldBoxBounds.width) < 1)
+        if (useScaleX && Math.abs(scaleX * worldBoxBounds.width) < 1)
             scaleX = (scaleX < 0 ? -1 : 1) / worldBoxBounds.width;
-        if (Math.abs(scaleY * worldBoxBounds.height) < 1)
+        if (useScaleY && Math.abs(scaleY * worldBoxBounds.height) < 1)
             scaleY = (scaleY < 0 ? -1 : 1) / worldBoxBounds.height;
+        if (lockRatio && scaleX !== scaleY)
+            scaleY = scaleX = Math.min(scaleX, scaleY);
         return { origin, scaleX, scaleY, direction, lockRatio, around };
     },
     getRotateData(bounds, direction, current, last, around) {
@@ -12361,7 +12509,7 @@ class EditBox extends Group {
         this.view = new Group();
         this.rect = new Box({ name: 'rect', hitFill: 'all', hitStroke: 'none', strokeAlign: 'center', hitRadius: 5 });
         this.circle = new EditPoint({ name: 'circle', strokeAlign: 'center', around: 'center', cursor: 'crosshair', hitRadius: 5 });
-        this.buttons = new Group({ around: 'center', hitSelf: false });
+        this.buttons = new Group({ around: 'center', hitSelf: false, visible: 0 });
         this.resizePoints = [];
         this.rotatePoints = [];
         this.resizeLines = [];
@@ -12416,12 +12564,13 @@ class EditBox extends Group {
         }
     }
     update(bounds) {
-        const { mergeConfig, element, multiple } = this.editor;
-        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox } = mergeConfig;
+        const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines, editor } = this;
+        const { mergeConfig, element, multiple, editMask } = editor;
+        const { middlePoint, resizeable, rotateable, hideOnSmall, editBox, mask } = mergeConfig;
         this.visible = !element.locked;
+        editMask.visible = mask ? true : 0;
         if (this.view.worldOpacity) {
             const { width, height } = bounds;
-            const { rect, circle, buttons, resizePoints, rotatePoints, resizeLines } = this;
             const smallSize = typeof hideOnSmall === 'number' ? hideOnSmall : 10;
             const showPoints = editBox && !(hideOnSmall && width < smallSize && height < smallSize);
             let point = {}, rotateP, resizeP, resizeL;
@@ -12456,10 +12605,12 @@ class EditBox extends Group {
             if (rect.path)
                 rect.path = null;
             rect.set(Object.assign(Object.assign({}, bounds), { visible: multiple ? true : editBox }));
-            buttons.visible = showPoints && buttons.children.length > 0;
+            buttons.visible = showPoints && buttons.children.length > 0 || 0;
             if (buttons.visible)
                 this.layoutButtons(mergeConfig);
         }
+        else
+            rect.set(bounds);
     }
     layoutCircle(config) {
         const { circleDirection, circleMargin, buttonsMargin, buttonsDirection, middlePoint } = config;
@@ -12522,7 +12673,7 @@ class EditBox extends Group {
     }
     onDragStart(e) {
         this.dragging = true;
-        const point = this.dragPoint = e.current;
+        const point = this.dragPoint = e.current, { pointType } = point;
         const { editor, dragStartData } = this, { element } = editor;
         if (point.name === 'rect') {
             this.moving = true;
@@ -12533,43 +12684,53 @@ class EditBox extends Group {
         dragStartData.point = { x: element.x, y: element.y };
         dragStartData.bounds = Object.assign({}, element.getLayoutBounds('box', 'local'));
         dragStartData.rotation = element.rotation;
+        if (pointType && pointType.includes('resize'))
+            ResizeEvent.resizingKeys = editor.leafList.keys;
     }
     onDragEnd(e) {
         this.dragging = false;
         this.dragPoint = null;
         this.moving = false;
-        if (e.current.name === 'rect')
+        const { name, pointType } = e.current;
+        if (name === 'rect')
             this.editor.opacity = 1;
+        if (pointType && pointType.includes('resize'))
+            ResizeEvent.resizingKeys = null;
     }
     onDrag(e) {
         const { editor } = this;
         const { pointType } = this.enterPoint = e.current;
-        if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable)
+        if (pointType.includes('rotate') || e.metaKey || e.ctrlKey || !editor.mergeConfig.resizeable) {
             editor.onRotate(e);
-        if (pointType.includes('resize'))
+            if (pointType === 'resize-rotate')
+                editor.onScale(e);
+        }
+        else if (pointType === 'resize')
             editor.onScale(e);
         if (pointType === 'skew')
             editor.onSkew(e);
         updateCursor(editor, e);
     }
     onArrow(e) {
-        if (this.editor.editing && this.editor.mergeConfig.keyEvent) {
-            const move = { x: 0, y: 0 };
+        const { editor } = this;
+        if (editor.editing && editor.mergeConfig.keyEvent) {
+            let x = 0, y = 0;
             const distance = e.shiftKey ? 10 : 1;
             switch (e.code) {
                 case 'ArrowDown':
-                    move.y = distance;
+                    y = distance;
                     break;
                 case 'ArrowUp':
-                    move.y = -distance;
+                    y = -distance;
                     break;
                 case 'ArrowLeft':
-                    move.x = -distance;
+                    x = -distance;
                     break;
                 case 'ArrowRight':
-                    move.x = distance;
+                    x = distance;
             }
-            this.editor.move(move);
+            if (x || y)
+                editor.move(x, y);
         }
     }
     onDoubleTap(e) {
@@ -12635,22 +12796,32 @@ class EditBox extends Group {
     }
 }
 
+const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
 class EditMask extends UI {
     constructor(editor) {
         super();
         this.editor = editor;
         this.hittable = false;
+        this.visible = 0;
+    }
+    __updateWorldBounds() {
+        Object.assign(this.__local, bigBounds);
+        Object.assign(this.__world, bigBounds);
     }
     __draw(canvas, options) {
-        const { editor } = this;
-        const { mask } = editor.mergeConfig;
-        if (mask && editor.list.length) {
-            const { rect } = editor.editBox;
-            const { width, height } = rect.__;
-            canvas.resetTransform();
+        const { editor } = this, { mask } = editor.mergedConfig;
+        if (mask && editor.editing) {
             canvas.fillWorld(canvas.bounds, mask === true ? 'rgba(0,0,0,0.8)' : mask);
-            canvas.setWorld(rect.__world, options.matrix);
-            canvas.clearRect(0, 0, width, height);
+            if (options.bounds && !options.bounds.hit(editor.editBox.rect.__world, options.matrix))
+                return;
+            canvas.saveBlendMode('destination-out');
+            editor.list.forEach(item => {
+                item.__renderShape(canvas, options);
+                const { __box, parent } = item;
+                if ((item = __box) || ((item = parent) && parent.textBox))
+                    item.__renderShape(canvas, options);
+            });
+            canvas.restoreBlendMode();
         }
     }
     destroy() {
@@ -12953,22 +13124,6 @@ class SimulateElement extends Rect {
 }
 
 class Editor extends Group {
-    get mergeConfig() {
-        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]; }
     get editing() { return !!this.list.length; }
@@ -12982,7 +13137,6 @@ class Editor extends Group {
     get buttons() { return this.editBox.buttons; }
     constructor(userConfig, data) {
         super(data);
-        this.config = DataHelper.clone(config);
         this.leafList = new LeafList();
         this.openedGroupList = new LeafList();
         this.simulateTarget = new SimulateElement(this);
@@ -12991,8 +13145,10 @@ class Editor extends Group {
         this.selector = new EditSelect(this);
         this.editMask = new EditMask(this);
         this.targetEventIds = [];
+        let mergedConfig = DataHelper.clone(config);
         if (userConfig)
-            this.config = DataHelper.default(userConfig, this.config);
+            mergedConfig = DataHelper.default(userConfig, mergedConfig);
+        this.mergedConfig = this.config = mergedConfig;
         this.addMany(this.editMask, this.selector, this.editBox);
         if (!Plugin.has('resize'))
             this.config.editSize = 'scale';
@@ -13332,8 +13488,7 @@ class Editor extends Group {
         }
     }
     emitInnerEvent(type) {
-        const { innerEditor } = this;
-        const { editTarget } = innerEditor;
+        const { innerEditor } = this, { editTarget } = innerEditor;
         const event = new InnerEditorEvent(type, { editTarget, innerEditor });
         this.emitEvent(event);
         editTarget.emitEvent(event);
@@ -13358,25 +13513,40 @@ class Editor extends Group {
             this.leafList.update();
         }
     }
+    onAppRenderStart(app) {
+        if (this.targetChanged = app.children.some(leafer => leafer !== this.leafer && leafer.renderer.changed))
+            this.editBox.forceRender();
+    }
+    onRenderStart() {
+        if (this.targetChanged)
+            this.update();
+    }
+    onKey(e) {
+        updateCursor(this, e);
+    }
     listenTargetEvents() {
         if (!this.targetEventIds.length) {
-            const { app, leafer } = this;
+            const { app, leafer, editBox, editMask } = this;
             this.targetEventIds = [
-                leafer.on_(RenderEvent.START, this.update, this),
-                app.on_(RenderEvent.CHILD_START, this.forceRender, this),
+                leafer.on_(RenderEvent.START, this.onRenderStart, this),
+                app.on_(RenderEvent.CHILD_START, this.onAppRenderStart, this),
                 app.on_(MoveEvent.BEFORE_MOVE, this.onMove, this, true),
                 app.on_(ZoomEvent.BEFORE_ZOOM, this.onScale, this, true),
                 app.on_(RotateEvent.BEFORE_ROTATE, this.onRotate, this, true),
-                app.on_([KeyEvent.HOLD, KeyEvent.UP], (e) => { updateCursor(this, e); }),
-                app.on_(KeyEvent.DOWN, this.editBox.onArrow, this.editBox)
+                app.on_([KeyEvent.HOLD, KeyEvent.UP], this.onKey, this),
+                app.on_(KeyEvent.DOWN, editBox.onArrow, editBox)
             ];
+            if (editMask.visible)
+                editMask.forceRender();
         }
     }
     removeTargetEvents() {
-        const { targetEventIds } = this;
+        const { targetEventIds, editMask } = this;
         if (targetEventIds.length) {
             this.off_(targetEventIds);
             targetEventIds.length = 0;
+            if (editMask.visible)
+                editMask.forceRender();
         }
     }
     destroy() {
@@ -13390,6 +13560,9 @@ class Editor extends Group {
         }
     }
 }
+__decorate([
+    mergeConfigAttr()
+], Editor.prototype, "mergeConfig", void 0);
 __decorate([
     targetAttr(onHover)
 ], Editor.prototype, "hoverTarget", void 0);
@@ -13454,9 +13627,7 @@ let EditTool = class EditTool extends InnerEditor {
         const { moveX, moveY, editor } = e;
         const { app, list } = editor;
         app.lockLayout();
-        list.forEach(target => {
-            target.moveWorld(moveX, moveY);
-        });
+        list.forEach(target => { target.moveWorld(moveX, moveY); });
         app.unlockLayout();
     }
     onScale(e) {
@@ -13465,12 +13636,10 @@ let EditTool = class EditTool extends InnerEditor {
         app.lockLayout();
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== 'scale';
-            if (transform) {
+            if (transform)
                 target.transformWorld(transform, resize);
-            }
-            else {
+            else
                 target.scaleOfWorld(worldOrigin, scaleX, scaleY, resize);
-            }
         });
         app.unlockLayout();
     }
@@ -13480,12 +13649,10 @@ let EditTool = class EditTool extends InnerEditor {
         app.lockLayout();
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== 'scale';
-            if (transform) {
+            if (transform)
                 target.transformWorld(transform, resize);
-            }
-            else {
+            else
                 target.rotateOfWorld(worldOrigin, rotation);
-            }
         });
         app.unlockLayout();
     }
@@ -13495,12 +13662,10 @@ let EditTool = class EditTool extends InnerEditor {
         app.lockLayout();
         list.forEach(target => {
             const resize = editor.getEditSize(target) !== 'scale';
-            if (transform) {
+            if (transform)
                 target.transformWorld(transform, resize);
-            }
-            else {
+            else
                 target.skewOfWorld(worldOrigin, skewX, skewY, resize);
-            }
         });
         app.unlockLayout();
     }
@@ -13788,16 +13953,21 @@ leaf.__scaleResize = function (scaleX, scaleY) {
     scaleResize(this, scaleX, scaleY);
 };
 leaf.resizeWidth = function (width) {
-    const scale = width / this.getBounds('box', 'local').width;
+    const scale = width / this.getBounds('box', 'local').width || 1;
     this.scaleOf(this.__layout.boxBounds, scale, this.__.lockRatio ? scale : 1, true);
 };
 leaf.resizeHeight = function (height) {
-    const scale = height / this.getBounds('box', 'local').height;
+    const scale = height / this.getBounds('box', 'local').height || 1;
     this.scaleOf(this.__layout.boxBounds, this.__.lockRatio ? scale : 1, scale, true);
 };
 Text.prototype.__scaleResize = function (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')) {
+    const { __autoWidth, __autoHeight, textAlign, verticalAlign } = this.__, { boxBounds } = this.__layout;
+    if (__autoWidth && textAlign !== 'left' && scaleX !== 1)
+        this.x += boxBounds.x;
+    if (__autoHeight && verticalAlign !== 'top' && scaleY !== 1)
+        this.y += boxBounds.y;
+    if (this.__.resizeFontSize || (editConfig && editConfig.editSize === 'font-size') || (dragPoint && editor.mergedConfig.editSize === 'font-size')) {
         scaleResizeFontSize(this, scaleX, scaleY, dragPoint && dragPoint.direction);
     }
     else {
@@ -14120,17 +14290,33 @@ interaction.transformEnd = function () {
     this.transformer.transformEnd();
 };
 interaction.wheel = function (data) {
-    const { wheel } = this.config;
+    const { wheel, pointer } = this.config, { posDeltaSpeed, negDeltaSpeed } = wheel;
     if (wheel.disabled)
         return;
+    if (data.deltaX > 0)
+        posDeltaSpeed && (data.deltaX *= posDeltaSpeed);
+    else
+        negDeltaSpeed && (data.deltaX *= negDeltaSpeed);
+    if (data.deltaY > 0)
+        posDeltaSpeed && (data.deltaY *= posDeltaSpeed);
+    else
+        negDeltaSpeed && (data.deltaY *= negDeltaSpeed);
     const scale = wheel.getScale ? wheel.getScale(data, wheel) : WheelEventHelper.getScale(data, wheel);
-    scale !== 1 ? this.zoom(getZoomEventData(scale, data)) : this.move(getMoveEventData(wheel.getMove ? wheel.getMove(data, wheel) : WheelEventHelper.getMove(data, wheel), data));
+    if (scale !== 1)
+        this.zoom(getZoomEventData(scale, data));
+    else {
+        const move = wheel.getMove ? wheel.getMove(data, wheel) : WheelEventHelper.getMove(data, wheel);
+        if (pointer.snap)
+            PointHelper.round(move);
+        this.move(getMoveEventData(move, data));
+    }
 };
 interaction.multiTouch = function (data, list) {
     if (this.config.multiTouch.disabled)
         return;
     const { move, rotation, scale, center } = MultiTouchHelper.getData(list);
     Object.assign(data, center);
+    this.pointerWaitCancel();
     this.rotate(getRotateEventData(rotation, data));
     this.zoom(getZoomEventData(scale, data));
     this.move(getMoveEventData(move, data));
@@ -15119,7 +15305,7 @@ let TextEditor = class TextEditor extends InnerEditor {
         const { editor } = this;
         const { config } = editor.app;
         const text = this.editTarget;
-        text.visible = false;
+        text.textEditing = true;
         this.isHTMLText = !(text instanceof Text);
         this._keyEvent = config.keyEvent;
         config.keyEvent = false;
@@ -15236,7 +15422,7 @@ let TextEditor = class TextEditor extends InnerEditor {
         const { editTarget: text, editor, editDom: dom } = this;
         if (text) {
             this.onInput();
-            text.visible = true;
+            text.textEditing = undefined;
             if (editor.app)
                 editor.app.config.keyEvent = this._keyEvent;
             editor.off_(this.eventIds);
@@ -15254,6 +15440,7 @@ TextEditor = __decorate([
 ], TextEditor);
 
 Plugin.add('text-editor', 'editor');
+Text.addAttr('textEditing', false, surfaceType);
 
 class HTMLTextData extends ImageData {
     setText(value) {