leafer-ui 1.5.3 → 1.6.1

package/dist/web.js

@@ -48,7 +48,7 @@ var LeaferUI = (function (exports) {
     };
     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')
@@ -112,7 +112,7 @@ var LeaferUI = (function (exports) {
         },
         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) {
@@ -135,8 +135,15 @@ var LeaferUI = (function (exports) {
                 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;
@@ -434,7 +441,7 @@ var LeaferUI = (function (exports) {
     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: {},
@@ -455,6 +462,10 @@ var LeaferUI = (function (exports) {
             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;
@@ -1320,6 +1331,7 @@ var LeaferUI = (function (exports) {
         'E': 1
     };
 
+    const { randColor } = MathHelper;
     class Debug {
         constructor(name) {
             this.repeatMap = {};
@@ -1334,6 +1346,19 @@ var LeaferUI = (function (exports) {
         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))
@@ -1420,7 +1445,7 @@ var LeaferUI = (function (exports) {
             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)));
@@ -2020,7 +2045,7 @@ var LeaferUI = (function (exports) {
         contextMethod()
     ], Canvas.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 {
@@ -2029,6 +2054,8 @@ var LeaferUI = (function (exports) {
         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();
@@ -2089,15 +2116,22 @@ var LeaferUI = (function (exports) {
         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)
@@ -2240,12 +2274,13 @@ var LeaferUI = (function (exports) {
             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) {
@@ -3672,7 +3707,7 @@ var LeaferUI = (function (exports) {
     const R = Resource;
 
     const ImageManager = {
-        maxRecycled: 100,
+        maxRecycled: 10,
         recycledList: [],
         patternTasker: new TaskProcessor(),
         get(config) {
@@ -4025,9 +4060,8 @@ var LeaferUI = (function (exports) {
             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();
                 }
@@ -4188,7 +4222,7 @@ var LeaferUI = (function (exports) {
     }
 
     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)
@@ -4262,6 +4296,8 @@ var LeaferUI = (function (exports) {
                 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) {
@@ -4500,6 +4536,7 @@ var LeaferUI = (function (exports) {
         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; }
@@ -4518,11 +4555,13 @@ var LeaferUI = (function (exports) {
         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 };
@@ -4854,6 +4893,9 @@ var LeaferUI = (function (exports) {
             }
             this.old = oldSize;
         }
+        static isResizing(leaf) {
+            return this.resizingKeys && this.resizingKeys[leaf.innerId] !== undefined;
+        }
     }
     ResizeEvent.RESIZE = 'resize';
 
@@ -4896,6 +4938,7 @@ var LeaferUI = (function (exports) {
     }
     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';
@@ -5275,24 +5318,27 @@ var LeaferUI = (function (exports) {
     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) {
@@ -5322,14 +5368,19 @@ var LeaferUI = (function (exports) {
         __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 {
@@ -5404,9 +5455,11 @@ var LeaferUI = (function (exports) {
         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);
@@ -5542,9 +5595,10 @@ var LeaferUI = (function (exports) {
             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 {
@@ -5704,7 +5758,7 @@ var LeaferUI = (function (exports) {
         __updateHitCanvas() { }
         __render(_canvas, _options) { }
         __drawFast(_canvas, _options) { }
-        __draw(_canvas, _options) { }
+        __draw(_canvas, _options, _originCanvas) { }
         __clip(_canvas, _options) { }
         __renderShape(_canvas, _options, _ignoreFill, _ignoreStroke) { }
         __updateWorldOpacity() { }
@@ -6074,7 +6128,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.5.3";
+    const version = "1.6.1";
 
     const debug$5 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -6495,7 +6549,6 @@ var LeaferUI = (function (exports) {
     }
 
     const { worldBounds } = LeafBoundsHelper;
-    const bigBounds = { x: 0, y: 0, width: 100000, height: 100000 };
     class LayoutBlockData {
         constructor(list) {
             this.updatedBounds = new Bounds();
@@ -6509,13 +6562,7 @@ var LeaferUI = (function (exports) {
             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) {
@@ -6717,6 +6764,22 @@ var LeaferUI = (function (exports) {
         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();
@@ -6725,8 +6788,6 @@ var LeaferUI = (function (exports) {
             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);
@@ -6794,20 +6855,12 @@ var LeaferUI = (function (exports) {
         }
         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);
         }
@@ -6816,28 +6869,22 @@ var LeaferUI = (function (exports) {
             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 = [];
@@ -6853,17 +6900,16 @@ var LeaferUI = (function (exports) {
             }
         }
         __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) {
@@ -6921,6 +6967,7 @@ var LeaferUI = (function (exports) {
             }
         }
     }
+    Renderer.clipSpread = 10;
 
     const { hitRadiusPoint } = BoundsHelper;
     class Picker {
@@ -7166,6 +7213,7 @@ var LeaferUI = (function (exports) {
                 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)
@@ -7210,14 +7258,14 @@ var LeaferUI = (function (exports) {
                     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);
             }
@@ -7228,14 +7276,14 @@ var LeaferUI = (function (exports) {
                     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);
             }
@@ -7350,6 +7398,31 @@ var LeaferUI = (function (exports) {
                 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 {
@@ -7387,7 +7460,7 @@ var LeaferUI = (function (exports) {
     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) {
@@ -7398,6 +7471,10 @@ var LeaferUI = (function (exports) {
             }
             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;
         },
@@ -7416,25 +7493,26 @@ var LeaferUI = (function (exports) {
             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);
@@ -7521,10 +7599,11 @@ var LeaferUI = (function (exports) {
 
     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);
@@ -7543,14 +7622,14 @@ var LeaferUI = (function (exports) {
                         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;
                 }
             }
@@ -7706,6 +7785,12 @@ var LeaferUI = (function (exports) {
     __decorate([
         surfaceType(false)
     ], exports.UI.prototype, "locked", void 0);
+    __decorate([
+        surfaceType(false)
+    ], exports.UI.prototype, "dim", void 0);
+    __decorate([
+        surfaceType(false)
+    ], exports.UI.prototype, "dimskip", void 0);
     __decorate([
         sortType(0)
     ], exports.UI.prototype, "zIndex", void 0);
@@ -7967,7 +8052,7 @@ var LeaferUI = (function (exports) {
                 start: true,
                 hittable: true,
                 smooth: true,
-                lazySpeard: 100
+                lazySpeard: 100,
             };
             this.leafs = 0;
             this.__eventIds = [];
@@ -8391,13 +8476,13 @@ var LeaferUI = (function (exports) {
                 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() { }
@@ -8805,33 +8890,13 @@ var LeaferUI = (function (exports) {
         registerUI()
     ], exports.Canvas);
 
-    const { copyAndSpread, includes, isSame: isSame$1, spread, setList } = BoundsHelper;
+    const { copyAndSpread, includes, spread, setList } = BoundsHelper;
     exports.Text = class Text extends exports.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;
@@ -8848,15 +8913,16 @@ var LeaferUI = (function (exports) {
             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)
@@ -8870,23 +8936,45 @@ var LeaferUI = (function (exports) {
                 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([
@@ -8898,6 +8986,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         boundsType(0)
     ], exports.Text.prototype, "height", void 0);
+    __decorate([
+        surfaceType()
+    ], exports.Text.prototype, "boxStyle", void 0);
     __decorate([
         dataType(false)
     ], exports.Text.prototype, "resizeFontSize", void 0);
@@ -9061,26 +9152,25 @@ var LeaferUI = (function (exports) {
             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 exports.Leafer(merge);
@@ -9100,9 +9190,8 @@ var LeaferUI = (function (exports) {
                 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);
@@ -9125,18 +9214,18 @@ var LeaferUI = (function (exports) {
                 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);
@@ -9695,6 +9784,7 @@ var LeaferUI = (function (exports) {
             delta: { x: 80 / 4, y: 8.0 },
         },
         pointer: {
+            snap: true,
             hitRadius: 5,
             tapTime: 120,
             longPressTime: 800,
@@ -9789,8 +9879,7 @@ var LeaferUI = (function (exports) {
             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);
@@ -10050,7 +10139,10 @@ var LeaferUI = (function (exports) {
         }
         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(exports.PointerEvent.TAP, data);
@@ -10069,9 +10161,11 @@ var LeaferUI = (function (exports) {
             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);
@@ -10091,8 +10185,10 @@ var LeaferUI = (function (exports) {
             return hasLong;
         }
         longPressWaitCancel() {
-            clearTimeout(this.longPressTimer);
-            this.longPressed = false;
+            if (this.longPressTimer) {
+                clearTimeout(this.longPressTimer);
+                this.longPressed = false;
+            }
         }
         __onResize() {
             const { dragOut } = this.m;
@@ -10182,25 +10278,26 @@ var LeaferUI = (function (exports) {
     const inner = {};
     const leaf = exports.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);
     };
@@ -10213,7 +10310,9 @@ var LeaferUI = (function (exports) {
     const matrix = new Matrix();
     const ui$1 = exports.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;
@@ -10240,6 +10339,8 @@ var LeaferUI = (function (exports) {
         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;
@@ -10288,6 +10389,15 @@ var LeaferUI = (function (exports) {
         return this.__hitCanvas ? ui.__hitFill.call(this, inner) : BoundsHelper.hitRadiusPoint(this.__layout.boxBounds, inner);
     };
 
+    exports.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()));
     }
@@ -10979,9 +11089,11 @@ var LeaferUI = (function (exports) {
     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);
@@ -11214,40 +11326,32 @@ var LeaferUI = (function (exports) {
     }
 
     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 {
@@ -11268,13 +11372,26 @@ var LeaferUI = (function (exports) {
             }
         }
     }
+    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)
@@ -11289,8 +11406,6 @@ var LeaferUI = (function (exports) {
                         }
                         image.unload(paints[i].loadId, !input.some((item) => item.url === url));
                     }
-                    else
-                        paints[i].style = null;
                 }
             }
             return recycleMap;
@@ -11469,7 +11584,7 @@ var LeaferUI = (function (exports) {
     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();