leafer-ui 1.5.3 → 1.6.1

package/dist/web.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$6 = MatrixHelper;
 
 const { toInnerPoint: toInnerPoint$2, toOuterPoint: toOuterPoint$3 } = MatrixHelper;
-const { sin: sin$4, cos: cos$4, abs: abs$4, sqrt: sqrt$2, atan2: atan2$2, min: min$1, PI: PI$3 } = Math;
+const { sin: sin$4, cos: cos$4, abs: abs$4, 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$4.enable) {
             if (D$4.filterList.length && D$4.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$9 } = MatrixHelper;
+const { copy: copy$9, 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$9(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$7, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
-const matrix$1 = {};
+const matrix$1 = {}, { 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";
 
 const debug$5 = Debug.get('LeaferCanvas');
 class LeaferCanvas extends LeaferCanvasBase {
@@ -6492,7 +6546,6 @@ function updateChange(updateList) {
 }
 
 const { worldBounds } = LeafBoundsHelper;
-const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
 class LayoutBlockData {
     constructor(list) {
         this.updatedBounds = new Bounds();
@@ -6506,13 +6559,7 @@ class LayoutBlockData {
         this.beforeBounds.setListWithFn(this.updatedList.list, worldBounds);
     }
     setAfter() {
-        const { list } = this.updatedList;
-        if (list.some(leaf => leaf.noBounds)) {
-            this.afterBounds.set(bigBounds);
-        }
-        else {
-            this.afterBounds.setListWithFn(list, worldBounds);
-        }
+        this.afterBounds.setListWithFn(this.updatedList.list, worldBounds);
         this.updatedBounds.setList([this.beforeBounds, this.afterBounds]);
     }
     merge(data) {
@@ -6714,6 +6761,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();
@@ -6722,8 +6785,6 @@ class Renderer {
         this.totalBounds = new Bounds();
         debug$3.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);
@@ -6791,20 +6852,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);
     }
@@ -6813,28 +6866,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 = [];
@@ -6850,17 +6897,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) {
@@ -6918,6 +6964,7 @@ class Renderer {
         }
     }
 }
+Renderer.clipSpread = 10;
 
 const { hitRadiusPoint } = BoundsHelper;
 class Picker {
@@ -7163,6 +7210,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)
@@ -7207,14 +7255,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);
         }
@@ -7225,14 +7273,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);
         }
@@ -7347,6 +7395,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 {
@@ -7384,7 +7457,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) {
@@ -7395,6 +7468,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;
     },
@@ -7413,25 +7490,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);
@@ -7518,10 +7596,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);
@@ -7540,14 +7619,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;
             }
         }
@@ -7703,6 +7782,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);
@@ -7964,7 +8049,7 @@ let Leafer = Leafer_1 = class Leafer extends Group {
             start: true,
             hittable: true,
             smooth: true,
-            lazySpeard: 100
+            lazySpeard: 100,
         };
         this.leafs = 0;
         this.__eventIds = [];
@@ -8388,13 +8473,13 @@ let Box = class Box extends Group {
             super.__updateRenderBounds();
             copy$3(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() { }
@@ -8802,33 +8887,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;
@@ -8845,15 +8910,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)
@@ -8867,23 +8933,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([
@@ -8895,6 +8983,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);
@@ -9058,26 +9149,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);
@@ -9097,9 +9187,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);
@@ -9122,18 +9211,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);
@@ -9692,6 +9781,7 @@ const config = {
         delta: { x: 80 / 4, y: 8.0 },
     },
     pointer: {
+        snap: true,
         hitRadius: 5,
         tapTime: 120,
         longPressTime: 800,
@@ -9786,8 +9876,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);
@@ -10047,7 +10136,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$1.TAP, data);
@@ -10066,9 +10158,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);
@@ -10088,8 +10182,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;
@@ -10179,25 +10275,26 @@ const { toInnerRadiusPointOf, copy: copy$2, setRadius } = PointHelper;
 const inner = {};
 const leaf = Leaf.prototype;
 leaf.__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$2(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);
 };
@@ -10210,7 +10307,9 @@ leaf.__drawHitPath = function (canvas) { if (canvas)
 const matrix = new Matrix();
 const ui$1 = UI.prototype;
 ui$1.__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;
@@ -10237,6 +10336,8 @@ ui$1.__updateHitCanvas = function () {
     h.setStrokeOptions(data);
 };
 ui$1.__hit = function (inner) {
+    if (this.__box && this.__box.__hit(inner))
+        return true;
     const data = this.__;
     if (data.__isHitPixel && this.__hitPixel(inner))
         return true;
@@ -10285,6 +10386,15 @@ rect.__hitFill = box$1.__hitFill = function (inner) {
     return this.__hitCanvas ? ui.__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(ui) {
     return ui.leafer ? ui.leafer.selector : (Platform.selector || (Platform.selector = Creator.selector()));
 }
@@ -10976,9 +11086,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);
@@ -11211,40 +11323,32 @@ function createPattern(ui, paint, pixelRatio) {
 }
 
 const { abs } = 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(scaleX) * pixelRatio;
-                height *= abs(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(scaleX) * pixelRatio;
+                    height *= abs(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 {
@@ -11265,13 +11369,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)
@@ -11286,8 +11403,6 @@ function recycleImage(attrName, data) {
                     }
                     image.unload(paints[i].loadId, !input.some((item) => item.url === url));
                 }
-                else
-                    paints[i].style = null;
             }
         }
         return recycleMap;
@@ -11466,7 +11581,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();