leafer-draw 1.5.3 → 1.6.1

package/dist/web.js

@@ -48,7 +48,7 @@ var LeaferUI = (function (exports) {
     };
     const I$1 = 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$8 } = MatrixHelper;
+    const { copy: copy$8, 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$8(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$6, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$2, divideParent, getLayout } = MatrixHelper;
-    const matrix = {};
+    const matrix = {}, { 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$4 = 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$2.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;
 
     Object.assign(Creator, {
         watcher: (target, options) => new Watcher(target, options),
@@ -7009,6 +7056,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)
@@ -7053,14 +7101,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);
             }
@@ -7071,14 +7119,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);
             }
@@ -7193,6 +7241,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 {
@@ -7230,7 +7303,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) {
@@ -7241,6 +7314,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;
         },
@@ -7259,25 +7336,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);
@@ -7364,10 +7442,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);
@@ -7386,14 +7465,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;
                 }
             }
@@ -7549,6 +7628,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);
@@ -7810,7 +7895,7 @@ var LeaferUI = (function (exports) {
                 start: true,
                 hittable: true,
                 smooth: true,
-                lazySpeard: 100
+                lazySpeard: 100,
             };
             this.leafs = 0;
             this.__eventIds = [];
@@ -8234,13 +8319,13 @@ var LeaferUI = (function (exports) {
                 super.__updateRenderBounds();
                 copy$2(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() { }
@@ -8648,33 +8733,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;
@@ -8691,15 +8756,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)
@@ -8713,23 +8779,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([
@@ -8741,6 +8829,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);
@@ -9226,9 +9317,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);
@@ -9461,40 +9554,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 {
@@ -9515,13 +9600,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)
@@ -9536,8 +9634,6 @@ var LeaferUI = (function (exports) {
                         }
                         image.unload(paints[i].loadId, !input.some((item) => item.url === url));
                     }
-                    else
-                        paints[i].style = null;
                 }
             }
             return recycleMap;
@@ -9716,7 +9812,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();