leafer-draw 1.7.0 → 1.8.0

package/dist/web.js

@@ -439,7 +439,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, round: round$2 } = Math;
+    const { sin: sin$4, cos: cos$4, abs: abs$3, sqrt: sqrt$2, atan2: atan2$2, min: min$1, round: round$2 } = Math;
     const PointHelper = {
         defaultPoint: getPointData(),
         tempPoint: {},
@@ -534,8 +534,8 @@ var LeaferUI = (function (exports) {
             return getDistanceFrom(t.x, t.y, point.x, point.y);
         },
         getDistanceFrom(x1, y1, x2, y2) {
-            const x = abs$4(x2 - x1);
-            const y = abs$4(y2 - y1);
+            const x = abs$3(x2 - x1);
+            const y = abs$3(y2 - y1);
             return sqrt$2(x * x + y * y);
         },
         getMinDistanceFrom(x1, y1, x2, y2, x3, y3) {
@@ -766,7 +766,7 @@ var LeaferUI = (function (exports) {
             MatrixHelper.reset(this);
         }
     }
-    const tempMatrix = new Matrix();
+    const tempMatrix$1 = new Matrix();
 
     const TwoPointBoundsHelper = {
         tempPointBounds: {},
@@ -863,6 +863,12 @@ var LeaferUI = (function (exports) {
             }
             if (!onlyBoxSize)
                 to.x += box.x, to.y += box.y;
+        },
+        getPoint(around, box, to) {
+            if (!to)
+                to = {};
+            AroundHelper.toPoint(around, box, to, true);
+            return to;
         }
     };
     function get$4(around) {
@@ -1791,10 +1797,13 @@ var LeaferUI = (function (exports) {
         return (target, key) => {
             if (!realName)
                 realName = key;
-            Object.defineProperty(target, key, {
+            const property = {
                 get() { return this.context[realName]; },
                 set(value) { this.context[realName] = value; }
-            });
+            };
+            if (key === 'strokeCap')
+                property.set = function (value) { this.context[realName] = value === 'none' ? 'butt' : value; };
+            Object.defineProperty(target, key, property);
         };
     }
     const contextMethodNameList = [];
@@ -2070,15 +2079,15 @@ var LeaferUI = (function (exports) {
         contextMethod()
     ], Canvas.prototype, "strokeText", null);
 
-    const { copy: copy$8, multiplyParent: multiplyParent$3 } = MatrixHelper, { round: round$1 } = Math;
+    const { copy: copy$8, multiplyParent: multiplyParent$4 } = MatrixHelper, { round: round$1 } = Math;
     const minSize = { width: 1, height: 1, pixelRatio: 1 };
     const canvasSizeAttrs = ['width', 'height', 'pixelRatio'];
     class LeaferCanvasBase extends Canvas {
         get width() { return this.size.width; }
         get height() { return this.size.height; }
         get pixelRatio() { return this.size.pixelRatio; }
-        get pixelWidth() { return this.width * this.pixelRatio; }
-        get pixelHeight() { return this.height * this.pixelRatio; }
+        get pixelWidth() { return this.width * this.pixelRatio || 0; }
+        get pixelHeight() { return this.height * this.pixelRatio || 0; }
         get pixelSnap() { return this.config.pixelSnap; }
         set pixelSnap(value) { this.config.pixelSnap = value; }
         get allowBackgroundColor() { return this.view && this.parentView; }
@@ -2143,7 +2152,7 @@ var LeaferUI = (function (exports) {
         setWorld(matrix, parentMatrix) {
             const { pixelRatio, pixelSnap } = this, w = this.worldTransform;
             if (parentMatrix)
-                multiplyParent$3(matrix, parentMatrix, w);
+                multiplyParent$4(matrix, parentMatrix, w);
             w.a = matrix.a * pixelRatio;
             w.b = matrix.b * pixelRatio;
             w.c = matrix.c * pixelRatio;
@@ -2165,20 +2174,33 @@ var LeaferUI = (function (exports) {
             if (w)
                 this.setTransform(w.a, w.b, w.c, w.d, w.e, w.f);
         }
-        setStroke(color, strokeWidth, options) {
+        setStroke(color, strokeWidth, options, childOptions) {
             if (strokeWidth)
                 this.strokeWidth = strokeWidth;
             if (color)
                 this.strokeStyle = color;
             if (options)
-                this.setStrokeOptions(options);
-        }
-        setStrokeOptions(options) {
-            this.strokeCap = options.strokeCap === 'none' ? 'butt' : options.strokeCap;
-            this.strokeJoin = options.strokeJoin;
-            this.dashPattern = options.dashPattern;
-            this.dashOffset = options.dashOffset;
-            this.miterLimit = options.miterLimit;
+                this.setStrokeOptions(options, childOptions);
+        }
+        setStrokeOptions(options, childOptions) {
+            let { strokeCap, strokeJoin, dashPattern, dashOffset, miterLimit } = options;
+            if (childOptions) {
+                if (childOptions.strokeCap)
+                    strokeCap = childOptions.strokeCap;
+                if (childOptions.strokeJoin)
+                    strokeJoin = childOptions.strokeJoin;
+                if (childOptions.dashPattern !== undefined)
+                    dashPattern = childOptions.dashPattern;
+                if (childOptions.dashOffset !== undefined)
+                    dashOffset = childOptions.dashOffset;
+                if (childOptions.miterLimit)
+                    miterLimit = childOptions.miterLimit;
+            }
+            this.strokeCap = strokeCap;
+            this.strokeJoin = strokeJoin;
+            this.dashPattern = dashPattern;
+            this.dashOffset = dashOffset;
+            this.miterLimit = miterLimit;
         }
         saveBlendMode(blendMode) {
             this.savedBlendMode = this.blendMode;
@@ -2412,7 +2434,7 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$3, PI: PI$2, sqrt: sqrt$1, pow } = Math;
+    const { sin: sin$3, cos: cos$3, atan2: atan2$1, ceil: ceil$1, abs: abs$2, PI: PI$2, sqrt: sqrt$1, pow } = Math;
     const { setPoint: setPoint$1, addPoint: addPoint$1 } = TwoPointBoundsHelper;
     const { set, toNumberPoints } = PointHelper;
     const { M: M$5, L: L$6, C: C$4, Q: Q$4, Z: Z$5 } = PathCommandMap;
@@ -2487,7 +2509,7 @@ var LeaferUI = (function (exports) {
             let totalRadian = endRadian - startRadian;
             if (totalRadian < 0)
                 totalRadian += PI2;
-            if (totalRadian === PI$2 || (abs$3(BAx + BAy) < 1.e-12) || (abs$3(CBx + CBy) < 1.e-12)) {
+            if (totalRadian === PI$2 || (abs$2(BAx + BAy) < 1.e-12) || (abs$2(CBx + CBy) < 1.e-12)) {
                 if (data)
                     data.push(L$6, x1, y1);
                 if (setPointBounds) {
@@ -2529,7 +2551,7 @@ var LeaferUI = (function (exports) {
                 totalRadian -= PI2;
             if (anticlockwise)
                 totalRadian -= PI2;
-            const parts = ceil$1(abs$3(totalRadian / PI_2));
+            const parts = ceil$1(abs$2(totalRadian / PI_2));
             const partRadian = totalRadian / parts;
             const partRadian4Sin = sin$3(partRadian / 4);
             const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$3(partRadian / 2);
@@ -2974,7 +2996,7 @@ var LeaferUI = (function (exports) {
 
     const { M: M$3, L: L$4, C: C$2, Q: Q$2, Z: Z$3, N: N$2, D: D$2, X: X$2, G: G$2, F: F$3, O: O$2, P: P$2, U: U$2 } = PathCommandMap;
     const { getMinDistanceFrom, getRadianFrom } = PointHelper;
-    const { tan, min, abs: abs$2 } = Math;
+    const { tan, min, abs: abs$1 } = Math;
     const startPoint = {};
     const PathCommandDataHelper = {
         beginPath(data) {
@@ -3037,7 +3059,7 @@ var LeaferUI = (function (exports) {
         arcTo(data, x1, y1, x2, y2, radius, lastX, lastY) {
             if (lastX !== undefined) {
                 const d = getMinDistanceFrom(lastX, lastY, x1, y1, x2, y2);
-                radius = min(radius, min(d / 2, d / 2 * abs$2(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
+                radius = min(radius, min(d / 2, d / 2 * abs$1(tan(getRadianFrom(lastX, lastY, x1, y1, x2, y2) / 2))));
             }
             data.push(U$2, x1, y1, x2, y2, radius);
         },
@@ -3913,6 +3935,13 @@ var LeaferUI = (function (exports) {
     function getDescriptor(object, name) {
         return Object.getOwnPropertyDescriptor(object, name);
     }
+    function createDescriptor(key, defaultValue) {
+        const privateKey = '_' + key;
+        return {
+            get() { const v = this[privateKey]; return v === undefined ? defaultValue : v; },
+            set(value) { this[privateKey] = value; }
+        };
+    }
     function getNames(object) {
         return Object.getOwnPropertyNames(object);
     }
@@ -4145,15 +4174,7 @@ var LeaferUI = (function (exports) {
         const data = target.__DataProcessor.prototype;
         const computedKey = '_' + key;
         const setMethodName = getSetMethodName(key);
-        const property = {
-            get() {
-                const v = this[computedKey];
-                return v === undefined ? defaultValue : v;
-            },
-            set(value) {
-                this[computedKey] = value;
-            }
-        };
+        const property = createDescriptor(key, defaultValue);
         if (defaultValue === undefined) {
             property.get = function () { return this[computedKey]; };
         }
@@ -4268,7 +4289,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 { copy: copy$6, toInnerPoint: toInnerPoint$1, toOuterPoint: toOuterPoint$1, scaleOfOuter: scaleOfOuter$2, rotateOfOuter: rotateOfOuter$2, skewOfOuter, multiplyParent: multiplyParent$3, divideParent, getLayout } = MatrixHelper;
     const matrix = {}, { round } = Math;
     const LeafHelper = {
         updateAllMatrix(leaf, checkAutoLayout, waitAutoLayout) {
@@ -4340,6 +4361,14 @@ var LeaferUI = (function (exports) {
             }
             return true;
         },
+        copyCanvasByWorld(leaf, currentCanvas, fromCanvas, fromWorld, blendMode, onlyResetTransform) {
+            if (!fromWorld)
+                fromWorld = leaf.__nowWorld;
+            if (leaf.__worldFlipped || Platform.fullImageShadow)
+                currentCanvas.copyWorldByReset(fromCanvas, fromWorld, leaf.__nowWorld, blendMode, onlyResetTransform);
+            else
+                currentCanvas.copyWorldToInner(fromCanvas, fromWorld, leaf.__layout.renderBounds, blendMode);
+        },
         moveWorld(t, x, y = 0, isInnerPoint, transition) {
             const local = typeof x === 'object' ? Object.assign({}, x) : { x, y };
             isInnerPoint ? toOuterPoint$1(t.localTransform, local, local, true) : (t.parent && toInnerPoint$1(t.parent.worldTransform, local, local, true));
@@ -4399,14 +4428,14 @@ var LeaferUI = (function (exports) {
         },
         transformWorld(t, transform, resize, transition) {
             copy$6(matrix, t.worldTransform);
-            multiplyParent$2(matrix, transform);
+            multiplyParent$3(matrix, transform);
             if (t.parent)
                 divideParent(matrix, t.parent.worldTransform);
             L.setTransform(t, matrix, resize, transition);
         },
         transform(t, transform, resize, transition) {
             copy$6(matrix, t.localTransform);
-            multiplyParent$2(matrix, transform);
+            multiplyParent$3(matrix, transform);
             L.setTransform(t, matrix, resize, transition);
         },
         setTransform(t, transform, resize, transition) {
@@ -5268,17 +5297,18 @@ var LeaferUI = (function (exports) {
         }
     };
 
-    const { setLayout, multiplyParent: multiplyParent$1, translateInner, defaultWorld } = MatrixHelper;
+    const { setLayout, multiplyParent: multiplyParent$2, translateInner, defaultWorld } = MatrixHelper;
     const { toPoint: toPoint$3, tempPoint } = AroundHelper;
     const LeafMatrix = {
         __updateWorldMatrix() {
-            multiplyParent$1(this.__local || this.__layout, this.parent ? this.parent.__world : defaultWorld, this.__world, !!this.__layout.affectScaleOrRotation, this.__, this.parent && this.parent.__);
+            const { parent, __layout } = this;
+            multiplyParent$2(this.__local || __layout, parent ? parent.__world : defaultWorld, this.__world, !!__layout.affectScaleOrRotation, this.__, parent && (parent.scrollY || parent.scrollX) && parent.__);
         },
         __updateLocalMatrix() {
             if (this.__local) {
                 const layout = this.__layout, local = this.__local, data = this.__;
                 if (layout.affectScaleOrRotation) {
-                    if ((layout.scaleChanged && (layout.resized = 'scale')) || layout.rotationChanged) {
+                    if ((layout.scaleChanged && (layout.resized || (layout.resized = 'scale'))) || layout.rotationChanged) {
                         setLayout(local, data, null, null, layout.affectRotation);
                         layout.scaleChanged = layout.rotationChanged = undefined;
                     }
@@ -5444,10 +5474,7 @@ var LeaferUI = (function (exports) {
                         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, data.__blendMode, true);
-                    else
-                        canvas.copyWorldToInner(tempCanvas, this.__nowWorld, this.__layout.renderBounds, data.__blendMode);
+                    LeafHelper.copyCanvasByWorld(this, canvas, tempCanvas, this.__nowWorld, data.__blendMode, true);
                     tempCanvas.recycle(this.__nowWorld);
                 }
                 else {
@@ -5495,7 +5522,7 @@ var LeaferUI = (function (exports) {
                     options.dimOpacity = data.dim === true ? 0.2 : data.dim;
                 else if (data.dimskip)
                     options.dimOpacity && (options.dimOpacity = 0);
-                if (data.__single) {
+                if (data.__single && !this.isBranchLeaf) {
                     if (data.eraser === 'path')
                         return this.__renderEraser(canvas, options);
                     const tempCanvas = canvas.getSameCanvas(false, true);
@@ -5517,9 +5544,7 @@ var LeaferUI = (function (exports) {
             else {
                 const { children } = this;
                 for (let i = 0, len = children.length; i < len; i++) {
-                    if (excludeRenderBounds$1(children[i], options))
-                        continue;
-                    children[i].__render(canvas, options);
+                    excludeRenderBounds$1(children[i], options) || children[i].__render(canvas, options);
                 }
             }
         },
@@ -5527,16 +5552,15 @@ var LeaferUI = (function (exports) {
             if (this.__worldOpacity) {
                 const { children } = this;
                 for (let i = 0, len = children.length; i < len; i++) {
-                    if (excludeRenderBounds$1(children[i], options))
-                        continue;
-                    children[i].__clip(canvas, options);
+                    excludeRenderBounds$1(children[i], options) || children[i].__clip(canvas, options);
                 }
             }
         }
     };
 
+    const tempScaleData$1 = {};
     const { LEAF, create } = IncrementId;
-    const { toInnerPoint, toOuterPoint, multiplyParent } = MatrixHelper;
+    const { toInnerPoint, toOuterPoint, multiplyParent: multiplyParent$1 } = MatrixHelper;
     const { toOuterOf } = BoundsHelper;
     const { copy: copy$3, move } = PointHelper;
     const { moveLocal, zoomOfLocal, rotateOfLocal, skewOfLocal, moveWorld, zoomOfWorld, rotateOfWorld, skewOfWorld, transform, transformWorld, setTransform, getFlipTransform, getLocalOrigin, getRelativeWorld, drop } = LeafHelper;
@@ -5718,7 +5742,7 @@ var LeaferUI = (function (exports) {
                 if (!this.__cameraWorld)
                     this.__cameraWorld = {};
                 const cameraWorld = this.__cameraWorld, world = this.__world;
-                multiplyParent(world, options.matrix, cameraWorld, undefined, world);
+                multiplyParent$1(world, options.matrix, cameraWorld, undefined, world);
                 toOuterOf(this.__layout.renderBounds, cameraWorld, cameraWorld);
                 cameraWorld.half !== world.half && (cameraWorld.half = world.half);
                 return cameraWorld;
@@ -5727,6 +5751,22 @@ var LeaferUI = (function (exports) {
                 return this.__world;
             }
         }
+        getClampRenderScale() {
+            let { scaleX } = this.__nowWorld || this.__world;
+            if (scaleX < 0)
+                scaleX = -scaleX;
+            return scaleX > 1 ? scaleX : 1;
+        }
+        getRenderScaleData(abs, scaleFixed) {
+            const { scaleX, scaleY } = ImageManager.patternLocked ? this.__world : this.__nowWorld;
+            if (scaleFixed)
+                tempScaleData$1.scaleX = tempScaleData$1.scaleY = 1;
+            else if (abs)
+                tempScaleData$1.scaleX = scaleX < 0 ? -scaleX : scaleX, tempScaleData$1.scaleY = scaleY < 0 ? -scaleY : scaleY;
+            else
+                tempScaleData$1.scaleX = scaleX, tempScaleData$1.scaleY = scaleY;
+            return tempScaleData$1;
+        }
         getTransform(relative) {
             return this.__layout.getTransform(relative || 'local');
         }
@@ -6251,7 +6291,7 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const version = "1.7.0";
+    const version = "1.8.0";
 
     const debug$4 = Debug.get('LeaferCanvas');
     class LeaferCanvas extends LeaferCanvasBase {
@@ -7123,6 +7163,11 @@ var LeaferUI = (function (exports) {
             });
         };
     }
+    function createAttr(defaultValue) {
+        return (target, key) => {
+            defineKey(target, key, createDescriptor(key, defaultValue));
+        };
+    }
 
     function hasTransparent$3(color) {
         if (!color || color.length === 7 || color.length === 4)
@@ -7180,22 +7225,9 @@ var LeaferUI = (function (exports) {
     const debug$1 = Debug.get('UIData');
     class UIData extends LeafData {
         get scale() { const { scaleX, scaleY } = this; return scaleX !== scaleY ? { x: scaleX, y: scaleY } : scaleX; }
-        get __strokeWidth() {
-            const { strokeWidth, strokeWidthFixed } = this;
-            if (strokeWidthFixed) {
-                const ui = this.__leaf;
-                let { scaleX } = ui.__nowWorld || ui.__world;
-                if (scaleX < 0)
-                    scaleX = -scaleX;
-                return scaleX > 1 ? strokeWidth / scaleX : strokeWidth;
-            }
-            else
-                return strokeWidth;
-        }
-        get __hasMultiPaint() {
-            const t = this;
-            return (t.fill && this.__useStroke) || (t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect;
-        }
+        get __strokeWidth() { return this.__getRealStrokeWidth(); }
+        get __maxStrokeWidth() { const t = this; return t.__hasMultiStrokeStyle ? Math.max(t.__hasMultiStrokeStyle, t.strokeWidth) : t.strokeWidth; }
+        get __hasMultiPaint() { const t = this; return (t.fill && this.__useStroke) || (t.__isFills && t.fill.length > 1) || (t.__isStrokes && t.stroke.length > 1) || t.__useEffect; }
         get __clipAfterFill() { const t = this; return (t.cornerRadius || t.innerShadow || t.__pathInputed); }
         get __hasSurface() { const t = this; return (t.fill || t.stroke); }
         get __autoWidth() { return !this._width; }
@@ -7277,6 +7309,21 @@ var LeaferUI = (function (exports) {
                 Paint.compute('stroke', this.__leaf);
             this.__needComputePaint = undefined;
         }
+        __getRealStrokeWidth(childStyle) {
+            let { strokeWidth, strokeWidthFixed } = this;
+            if (childStyle) {
+                if (childStyle.strokeWidth)
+                    strokeWidth = childStyle.strokeWidth;
+                if (childStyle.strokeWidthFixed !== undefined)
+                    strokeWidthFixed = childStyle.strokeWidthFixed;
+            }
+            if (strokeWidthFixed) {
+                const scale = this.__leaf.getClampRenderScale();
+                return scale > 1 ? strokeWidth / scale : strokeWidth;
+            }
+            else
+                return strokeWidth;
+        }
         __setPaint(attrName, value) {
             this.__setInput(attrName, value);
             const layout = this.__leaf.__layout;
@@ -7301,6 +7348,7 @@ var LeaferUI = (function (exports) {
             }
             else {
                 stintSet$2(this, '__isAlphaPixelStroke', undefined);
+                stintSet$2(this, '__hasMultiStrokeStyle', undefined);
                 this._stroke = this.__isStrokes = undefined;
             }
         }
@@ -7322,8 +7370,8 @@ var LeaferUI = (function (exports) {
 
     class BoxData extends GroupData {
         get __boxStroke() { return !this.__pathInputed; }
-        get __drawAfterFill() { const t = this; return (t.overflow === 'hide' && (t.__clipAfterFill || t.innerShadow) && t.__leaf.children.length); }
-        get __clipAfterFill() { return this.__leaf.isOverflow || super.__clipAfterFill; }
+        get __drawAfterFill() { const t = this; return t.__single || t.__clipAfterFill; }
+        get __clipAfterFill() { const t = this; return t.overflow === 'hide' && t.__leaf.children.length && (t.__leaf.isOverflow || super.__clipAfterFill); }
     }
 
     class LeaferData extends GroupData {
@@ -7443,7 +7491,7 @@ var LeaferUI = (function (exports) {
     const UIBounds = {
         __updateStrokeSpread() {
             let width = 0, boxWidth = 0;
-            const data = this.__, { strokeAlign, strokeWidth } = data, box = this.__box;
+            const data = this.__, { strokeAlign, __maxStrokeWidth: strokeWidth } = data, box = this.__box;
             if ((data.stroke || data.hitStroke === 'all') && strokeWidth && strokeAlign !== 'inside') {
                 boxWidth = width = strokeAlign === 'center' ? strokeWidth / 2 : strokeWidth;
                 if (!data.__boxStroke) {
@@ -7463,13 +7511,15 @@ var LeaferUI = (function (exports) {
         },
         __updateRenderSpread() {
             let width = 0;
-            const { shadow, innerShadow, blur, backgroundBlur, filter } = this.__;
+            const { shadow, innerShadow, blur, backgroundBlur, filter, renderSpread } = this.__;
             if (shadow)
                 shadow.forEach(item => width = Math.max(width, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread > 0 ? item.spread : 0) + item.blur * 1.5));
             if (blur)
                 width = Math.max(width, blur);
             if (filter)
                 width += Filter.getSpread(filter);
+            if (renderSpread)
+                width += renderSpread;
             let shapeWidth = width = Math.ceil(width);
             if (innerShadow)
                 innerShadow.forEach(item => shapeWidth = Math.max(shapeWidth, Math.max(Math.abs(item.y), Math.abs(item.x)) + (item.spread < 0 ? -item.spread : 0) + item.blur * 1.5));
@@ -7492,7 +7542,7 @@ var LeaferUI = (function (exports) {
             }
             if (data.__useEffect) {
                 const { shadow, fill, stroke } = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
-                stintSet$1(data, '__isFastShadow', shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !(shadow[0].box && data.__isTransparentFill) && fill && !(fill instanceof Array && fill.length > 1) && (this.useFastShadow || !stroke || (stroke && data.strokeAlign === 'inside')));
+                stintSet$1(data, '__isFastShadow', shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && fill && !data.__isTransparentFill && !(fill instanceof Array && fill.length > 1) && (this.useFastShadow || !stroke || (stroke && data.strokeAlign === 'inside')));
                 data.__useEffect = !!(shadow || otherEffect);
             }
             data.__checkSingle();
@@ -7599,17 +7649,17 @@ var LeaferUI = (function (exports) {
             if (__drawAfterFill)
                 this.__drawAfterFill(canvas, options);
             if (stroke) {
-                const { strokeAlign, __strokeWidth } = this.__;
-                if (!__strokeWidth)
+                const { strokeAlign, __strokeWidth: strokeWidth } = this.__;
+                if (!strokeWidth)
                     return;
-                canvas.setStroke(stroke, __strokeWidth, this.__);
-                const half = __strokeWidth / 2;
+                canvas.setStroke(stroke, strokeWidth, this.__);
+                const half = strokeWidth / 2;
                 switch (strokeAlign) {
                     case 'center':
                         canvas.strokeRect(0, 0, width, height);
                         break;
                     case 'inside':
-                        width -= __strokeWidth, height -= __strokeWidth;
+                        width -= strokeWidth, height -= strokeWidth;
                         if (width < 0 || height < 0) {
                             canvas.save();
                             this.__clip(canvas, options);
@@ -7620,7 +7670,7 @@ var LeaferUI = (function (exports) {
                             canvas.strokeRect(x + half, y + half, width, height);
                         break;
                     case 'outside':
-                        canvas.strokeRect(x - half, y - half, width + __strokeWidth, height + __strokeWidth);
+                        canvas.strokeRect(x - half, y - half, width + strokeWidth, height + strokeWidth);
                         break;
                 }
             }
@@ -7633,6 +7683,8 @@ var LeaferUI = (function (exports) {
         get isFrame() { return false; }
         set scale(value) { MathHelper.assignScale(this, value); }
         get scale() { return this.__.scale; }
+        get isAutoWidth() { const t = this.__; return t.__autoWidth || t.autoWidth; }
+        get isAutoHeight() { const t = this.__; return t.__autoHeight || t.autoHeight; }
         get pen() {
             const { path } = this.__;
             pen.set(this.path = path || []);
@@ -7847,6 +7899,9 @@ var LeaferUI = (function (exports) {
     __decorate([
         naturalBoundsType(1)
     ], exports.UI.prototype, "pixelRatio", void 0);
+    __decorate([
+        affectRenderBoundsType(0)
+    ], exports.UI.prototype, "renderSpread", void 0);
     __decorate([
         pathInputType()
     ], exports.UI.prototype, "path", void 0);
@@ -8003,7 +8058,8 @@ var LeaferUI = (function (exports) {
         }
         toJSON(options) {
             const data = super.toJSON(options);
-            data.children = this.children.map(child => child.toJSON(options));
+            if (!this.childlessJSON)
+                data.children = this.children.map(child => child.toJSON(options));
             return data;
         }
         pick(_hitPoint, _options) { return undefined; }
@@ -8450,8 +8506,8 @@ var LeaferUI = (function (exports) {
         __updateRenderSpread() { return this.__updateRectRenderSpread() || -1; }
         __updateRectBoxBounds() { }
         __updateBoxBounds(_secondLayout) {
-            const data = this.__;
             if (this.children.length && !this.pathInputed) {
+                const data = this.__;
                 if (data.__autoSide) {
                     if (data.__hasSurface)
                         this.__extraUpdate();
@@ -8478,20 +8534,26 @@ var LeaferUI = (function (exports) {
         __updateStrokeBounds() { }
         __updateRenderBounds() {
             let isOverflow;
-            const { renderBounds } = this.__layout;
             if (this.children.length) {
+                const data = this.__, { renderBounds, boxBounds } = this.__layout;
                 super.__updateRenderBounds();
                 copy$2(childrenRenderBounds, renderBounds);
                 this.__updateRectRenderBounds();
-                isOverflow = !includes$1(renderBounds, childrenRenderBounds);
-                if (isOverflow && this.__.overflow !== 'hide')
+                if (data.scrollY || data.scrollX) {
+                    childrenRenderBounds.x += data.scrollX;
+                    childrenRenderBounds.y += data.scrollY;
+                }
+                isOverflow = !includes$1(boxBounds, childrenRenderBounds);
+                if (isOverflow && data.overflow !== 'hide')
                     add(renderBounds, childrenRenderBounds);
             }
             else
                 this.__updateRectRenderBounds();
             DataHelper.stintSet(this, 'isOverflow', isOverflow);
+            this.__updateScrollBar();
         }
         __updateRectRenderBounds() { }
+        __updateScrollBar() { }
         __updateRectChange() { }
         __updateChange() {
             super.__updateChange();
@@ -8508,10 +8570,12 @@ var LeaferUI = (function (exports) {
                 if (this.children.length)
                     this.__renderGroup(canvas, options);
             }
+            if (this.scrollBar)
+                this.scrollBar.__render(canvas, options);
         }
         __drawContent(canvas, options) {
             this.__renderGroup(canvas, options);
-            if (this.__.__useStroke) {
+            if (this.__.__useStroke || this.__.__useEffect) {
                 canvas.setWorld(this.__nowWorld);
                 this.__drawRenderPath(canvas);
             }
@@ -9170,9 +9234,14 @@ var LeaferUI = (function (exports) {
                 }
             }
             canvas.fillStyle = item.style;
-            if (item.transform) {
+            if (item.transform || item.scaleFixed) {
                 canvas.save();
-                canvas.transform(item.transform);
+                if (item.transform)
+                    canvas.transform(item.transform);
+                if (item.scaleFixed) {
+                    const { scaleX, scaleY } = ui.getRenderScaleData(true);
+                    canvas.scale(1 / scaleX, 1 / scaleY);
+                }
                 if (item.blendMode)
                     canvas.blendMode = item.blendMode;
                 fillPathOrText(ui, canvas);
@@ -9208,8 +9277,13 @@ var LeaferUI = (function (exports) {
     }
     function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
         const data = ui.__;
-        canvas.setStroke(!data.__isStrokes && stroke, data.strokeWidth * strokeWidthScale, data);
-        data.__isStrokes ? drawStrokesStyle(stroke, true, ui, canvas) : drawTextStroke(ui, canvas);
+        if (typeof stroke === 'object') {
+            drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas);
+        }
+        else {
+            canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
+            drawTextStroke(ui, canvas);
+        }
     }
     function drawAlign(stroke, align, ui, canvas) {
         const out = canvas.getSameCanvas(true, true);
@@ -9218,15 +9292,9 @@ var LeaferUI = (function (exports) {
         out.blendMode = align === 'outside' ? 'destination-out' : 'destination-in';
         fillText(ui, out);
         out.blendMode = 'normal';
-        copyWorld(canvas, out, ui);
+        LeafHelper.copyCanvasByWorld(ui, canvas, out);
         out.recycle(ui.__nowWorld);
     }
-    function copyWorld(canvas, out, ui) {
-        if (ui.__worldFlipped || Platform.fullImageShadow)
-            canvas.copyWorldByReset(out, ui.__nowWorld);
-        else
-            canvas.copyWorldToInner(out, ui.__nowWorld, ui.__layout.renderBounds);
-    }
     function drawTextStroke(ui, canvas) {
         let row, data = ui.__.__textDrawData;
         const { rows, decorationY } = data;
@@ -9242,14 +9310,21 @@ var LeaferUI = (function (exports) {
             rows.forEach(row => decorationY.forEach(value => canvas.strokeRect(row.x, row.y + value, row.width, decorationHeight)));
         }
     }
-    function drawStrokesStyle(strokes, isText, ui, canvas) {
+    function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
         let item;
+        const data = ui.__, { __hasMultiStrokeStyle } = data;
+        __hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data);
         for (let i = 0, len = strokes.length; i < len; i++) {
             item = strokes[i];
             if (item.image && PaintImage.checkImage(ui, canvas, item, false))
                 continue;
             if (item.style) {
-                canvas.strokeStyle = item.style;
+                if (__hasMultiStrokeStyle) {
+                    const { strokeStyle } = item;
+                    strokeStyle ? canvas.setStroke(item.style, data.__getRealStrokeWidth(strokeStyle) * strokeWidthScale, data, strokeStyle) : canvas.setStroke(item.style, data.__strokeWidth * strokeWidthScale, data);
+                }
+                else
+                    canvas.strokeStyle = item.style;
                 if (item.blendMode) {
                     canvas.saveBlendMode(item.blendMode);
                     isText ? drawTextStroke(ui, canvas) : canvas.stroke();
@@ -9288,8 +9363,13 @@ var LeaferUI = (function (exports) {
     }
     function drawCenter(stroke, strokeWidthScale, ui, canvas) {
         const data = ui.__;
-        canvas.setStroke(!data.__isStrokes && stroke, data.__strokeWidth * strokeWidthScale, data);
-        data.__isStrokes ? drawStrokesStyle(stroke, false, ui, canvas) : canvas.stroke();
+        if (typeof stroke === 'object') {
+            drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
+        }
+        else {
+            canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
+            canvas.stroke();
+        }
         if (data.__useArrow)
             Paint.strokeArrow(stroke, ui, canvas);
     }
@@ -9311,7 +9391,7 @@ var LeaferUI = (function (exports) {
             drawCenter(stroke, 2, ui, out);
             out.clipUI(data);
             out.clearWorld(renderBounds);
-            copyWorld(canvas, out, ui);
+            LeafHelper.copyCanvasByWorld(ui, canvas, out);
             out.recycle(ui.__nowWorld);
         }
     }
@@ -9366,8 +9446,16 @@ var LeaferUI = (function (exports) {
         if (!(paints instanceof Array))
             paints = [paints];
         recycleMap = PaintImage.recycleImage(attrName, data);
+        let maxChildStrokeWidth;
         for (let i = 0, len = paints.length, item; i < len; i++) {
-            (item = getLeafPaint(attrName, paints[i], ui)) && leafPaints.push(item);
+            if (item = getLeafPaint(attrName, paints[i], ui)) {
+                leafPaints.push(item);
+                if (item.strokeStyle) {
+                    maxChildStrokeWidth || (maxChildStrokeWidth = 1);
+                    if (item.strokeStyle.strokeWidth)
+                        maxChildStrokeWidth = Math.max(maxChildStrokeWidth, item.strokeStyle.strokeWidth);
+                }
+            }
         }
         data['_' + attrName] = leafPaints.length ? leafPaints : undefined;
         if (leafPaints.length) {
@@ -9384,6 +9472,7 @@ var LeaferUI = (function (exports) {
         else {
             stintSet(data, '__isAlphaPixelStroke', isAlphaPixel);
             stintSet(data, '__isTransparentStroke', isTransparent);
+            stintSet(data, '__hasMultiStrokeStyle', maxChildStrokeWidth);
         }
     }
     function getLeafPaint(attrName, paint, ui) {
@@ -9415,6 +9504,11 @@ var LeaferUI = (function (exports) {
         if (data) {
             if (typeof data.style === 'string' && hasTransparent$1(data.style))
                 data.isTransparent = true;
+            if (paint.style) {
+                if (paint.style.strokeWidth === 0)
+                    return undefined;
+                data.strokeStyle = paint.style;
+            }
             if (paint.blendMode)
                 data.blendMode = paint.blendMode;
         }
@@ -9434,8 +9528,8 @@ var LeaferUI = (function (exports) {
         shape
     };
 
-    let origin = {};
-    const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, scale: scaleHelper, rotate, skew: skewHelper } = MatrixHelper;
+    let origin = {}, tempMatrix = getMatrixData();
+    const { get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent, scale: scaleHelper, rotate, skew: skewHelper } = MatrixHelper;
     function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         const transform = get$3();
         translate$1(transform, box.x + x, box.y + y);
@@ -9444,7 +9538,7 @@ var LeaferUI = (function (exports) {
             rotateOfOuter$1(transform, { x: box.x + box.width / 2, y: box.y + box.height / 2 }, rotation);
         data.transform = transform;
     }
-    function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew) {
+    function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
         const transform = get$3();
         if (rotation)
             rotate(transform, rotation);
@@ -9453,6 +9547,10 @@ var LeaferUI = (function (exports) {
         if (scaleX)
             scaleHelper(transform, scaleX, scaleY);
         translate$1(transform, box.x + x, box.y + y);
+        if (clipSize) {
+            tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height;
+            multiplyParent(transform, tempMatrix);
+        }
         data.transform = transform;
     }
     function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, align) {
@@ -9489,13 +9587,15 @@ var LeaferUI = (function (exports) {
     const tempScaleData = {};
     const tempImage = {};
     function createData(leafPaint, image, paint, box) {
-        const { changeful, sync, editing } = paint;
+        const { changeful, sync, editing, scaleFixed } = paint;
         if (changeful)
             leafPaint.changeful = changeful;
         if (sync)
             leafPaint.sync = sync;
         if (editing)
             leafPaint.editing = editing;
+        if (scaleFixed)
+            leafPaint.scaleFixed = scaleFixed;
         leafPaint.data = getPatternData(paint, box, image);
     }
     function getPatternData(paint, box, image) {
@@ -9504,7 +9604,7 @@ var LeaferUI = (function (exports) {
         if (paint.mode === 'strench')
             paint.mode = 'stretch';
         let { width, height } = image;
-        const { opacity, mode, align, offset, scale, size, rotation, skew, repeat, filters } = paint;
+        const { opacity, mode, align, offset, scale, size, rotation, skew, clipSize, repeat, filters } = paint;
         const sameBox = box.width === width && box.height === height;
         const data = { mode };
         const swapSize = align !== 'center' && (rotation || 0) % 180 === 90;
@@ -9538,8 +9638,8 @@ var LeaferUI = (function (exports) {
                 break;
             case 'normal':
             case 'clip':
-                if (tempImage.x || tempImage.y || scaleX || rotation || skew)
-                    clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew);
+                if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew)
+                    clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
                 break;
             case 'repeat':
                 if (!sameBox || scaleX || rotation)
@@ -9676,18 +9776,16 @@ var LeaferUI = (function (exports) {
     }
 
     const { get: get$1, scale, copy: copy$1 } = MatrixHelper;
-    const { ceil, abs: abs$1 } = Math;
+    const { ceil, abs } = Math;
     function createPattern(ui, paint, pixelRatio) {
-        let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+        let { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
         const id = scaleX + '-' + scaleY + '-' + pixelRatio;
         if (paint.patternId !== id && !ui.destroyed) {
-            scaleX = abs$1(scaleX);
-            scaleY = abs$1(scaleY);
             const { image, data } = paint;
             let imageScale, imageMatrix, { width, height, scaleX: sx, scaleY: sy, transform, repeat } = data;
             if (sx) {
-                sx = abs$1(sx);
-                sy = abs$1(sy);
+                sx = abs(sx);
+                sy = abs(sy);
                 imageMatrix = get$1();
                 copy$1(imageMatrix, transform);
                 scale(imageMatrix, 1 / sx, 1 / sy);
@@ -9740,9 +9838,8 @@ var LeaferUI = (function (exports) {
         }
     }
 
-    const { abs } = Math;
     function checkImage(ui, canvas, paint, allowDraw) {
-        const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld;
+        const { scaleX, scaleY } = ui.getRenderScaleData(true, paint.scaleFixed);
         const { pixelRatio } = canvas, { data } = paint;
         if (!data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
             return false;
@@ -9755,8 +9852,8 @@ var LeaferUI = (function (exports) {
                 else {
                     if (!(paint.changeful || ResizeEvent.isResizing(ui) || Export.running)) {
                         let { width, height } = data;
-                        width *= abs(scaleX) * pixelRatio;
-                        height *= abs(scaleY) * pixelRatio;
+                        width *= scaleX * pixelRatio;
+                        height *= scaleY * pixelRatio;
                         if (data.scaleX) {
                             width *= data.scaleX;
                             height *= data.scaleY;
@@ -9766,6 +9863,10 @@ var LeaferUI = (function (exports) {
                 }
             }
             if (allowDraw) {
+                if (ui.__.__isFastShadow) {
+                    canvas.fillStyle = paint.style || '#000';
+                    canvas.fill();
+                }
                 drawImage(ui, canvas, paint, data);
                 return true;
             }
@@ -9954,10 +10055,7 @@ var LeaferUI = (function (exports) {
                 }
                 worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, 'destination-out') : other.copyWorld(shape.canvas, shapeBounds, bounds, 'destination-out');
             }
-            if (ui.__worldFlipped)
-                current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-            else
-                current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+            LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
             if (end && index < end)
                 other.clearWorld(copyBounds, true);
         });
@@ -10016,10 +10114,7 @@ var LeaferUI = (function (exports) {
                 copyBounds = bounds;
             }
             other.fillWorld(copyBounds, ColorConvert.string(item.color), 'source-in');
-            if (ui.__worldFlipped)
-                current.copyWorldByReset(other, copyBounds, nowWorld, item.blendMode);
-            else
-                current.copyWorldToInner(other, copyBounds, __layout.renderBounds, item.blendMode);
+            LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
             if (end && index < end)
                 other.clearWorld(copyBounds, true);
         });
@@ -10075,12 +10170,11 @@ var LeaferUI = (function (exports) {
                         contentCanvas = getCanvas(canvas);
                     child.__render(maskCanvas, options);
                 }
-                if (!(mask === 'clipping' || mask === 'clipping-path'))
-                    continue;
-            }
-            if (excludeRenderBounds(child, options))
+                if (mask === 'clipping' || mask === 'clipping-path')
+                    excludeRenderBounds(child, options) || child.__render(canvas, options);
                 continue;
-            child.__render(contentCanvas || canvas, options);
+            }
+            excludeRenderBounds(child, options) || child.__render(contentCanvas || canvas, options);
         }
         maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity);
     };
@@ -10775,6 +10869,8 @@ var LeaferUI = (function (exports) {
     exports.boundsType = boundsType;
     exports.canvasPatch = canvasPatch;
     exports.canvasSizeAttrs = canvasSizeAttrs;
+    exports.createAttr = createAttr;
+    exports.createDescriptor = createDescriptor;
     exports.cursorType = cursorType;
     exports.dataProcessor = dataProcessor;
     exports.dataType = dataType;
@@ -10813,7 +10909,7 @@ var LeaferUI = (function (exports) {
     exports.strokeType = strokeType;
     exports.surfaceType = surfaceType;
     exports.tempBounds = tempBounds$1;
-    exports.tempMatrix = tempMatrix;
+    exports.tempMatrix = tempMatrix$1;
     exports.tempPoint = tempPoint$2;
     exports.useCanvas = useCanvas;
     exports.useModule = useModule;