leafer-ui 1.9.6 → 1.9.8

package/dist/web.js

@@ -229,17 +229,32 @@ var LeaferUI = function(exports) {
             this.__input = this.__middle = null;
         }
     }
-    const {round: round$3, pow: pow$1, PI: PI$3} = Math;
-    const MathHelper = {
-        within(value, min, max) {
-            if (isObject(min)) max = min.max, min = min.min;
-            if (!isUndefined(min) && value < min) value = min;
-            if (!isUndefined(max) && value > max) value = max;
-            return value;
+    let tempA, tempB, tempTo;
+    const {max: max$4} = Math, tempFour = [ 0, 0, 0, 0 ];
+    const FourNumberHelper = {
+        zero: [ ...tempFour ],
+        tempFour: tempFour,
+        set(to, top, right, bottom, left) {
+            if (right === undefined) right = bottom = left = top;
+            to[0] = top;
+            to[1] = right;
+            to[2] = bottom;
+            to[3] = left;
+            return to;
+        },
+        setTemp(top, right, bottom, left) {
+            return set$1(tempFour, top, right, bottom, left);
         },
-        fourNumber(num, maxValue) {
+        toTempAB(a, b, change) {
+            tempTo = change ? isNumber(a) ? b : a : [];
+            if (isNumber(a)) tempA = setTemp(a), tempB = b; else if (isNumber(b)) tempA = a, 
+            tempB = setTemp(b); else tempA = a, tempB = b;
+            if (tempA.length !== 4) tempA = get$5(tempA);
+            if (tempB.length !== 4) tempB = get$5(tempB);
+        },
+        get(num, maxValue) {
             let data;
-            if (isArray(num)) {
+            if (!isNumber(num)) {
                 switch (num.length) {
                   case 4:
                     data = isUndefined(maxValue) ? num : [ ...num ];
@@ -262,9 +277,36 @@ var LeaferUI = function(exports) {
                 }
             }
             if (!data) data = [ num, num, num, num ];
-            if (maxValue) for (let i = 0; i < 4; i++) if (data[i] > maxValue) data[i] = maxValue;
+            if (!isUndefined(maxValue)) for (let i = 0; i < 4; i++) if (data[i] > maxValue) data[i] = maxValue;
             return data;
         },
+        max(t, other, change) {
+            if (isNumber(t) && isNumber(other)) return max$4(t, other);
+            toTempAB(t, other, change);
+            return set$1(tempTo, max$4(tempA[0], tempB[0]), max$4(tempA[1], tempB[1]), max$4(tempA[2], tempB[2]), max$4(tempA[3], tempB[3]));
+        },
+        add(t, other, change) {
+            if (isNumber(t) && isNumber(other)) return t + other;
+            toTempAB(t, other, change);
+            return set$1(tempTo, tempA[0] + tempB[0], tempA[1] + tempB[1], tempA[2] + tempB[2], tempA[3] + tempB[3]);
+        },
+        swapAndScale(t, scaleX, scaleY, change) {
+            if (isNumber(t)) return scaleX === scaleY ? t * scaleX : [ t * scaleY, t * scaleX ];
+            const to = change ? t : [];
+            const [top, right, bottom, left] = t.length === 4 ? t : get$5(t);
+            return set$1(to, bottom * scaleY, left * scaleX, top * scaleY, right * scaleX);
+        }
+    };
+    const {set: set$1, get: get$5, setTemp: setTemp, toTempAB: toTempAB} = FourNumberHelper;
+    const {round: round$3, pow: pow$1, PI: PI$3} = Math;
+    const MathHelper = {
+        within(value, min, max) {
+            if (isObject(min)) max = min.max, min = min.min;
+            if (!isUndefined(min) && value < min) value = min;
+            if (!isUndefined(max) && value > max) value = max;
+            return value;
+        },
+        fourNumber: FourNumberHelper.get,
         formatRotation(rotation, unsign) {
             rotation %= 360;
             if (unsign) {
@@ -392,6 +434,15 @@ var LeaferUI = function(exports) {
             t.c *= scaleY;
             t.d *= scaleY;
         },
+        pixelScale(t, pixelRatio, to) {
+            to || (to = t);
+            to.a = t.a * pixelRatio;
+            to.b = t.b * pixelRatio;
+            to.c = t.c * pixelRatio;
+            to.d = t.d * pixelRatio;
+            to.e = t.e * pixelRatio;
+            to.f = t.f * pixelRatio;
+        },
         scaleOfOuter(t, origin, scaleX, scaleY) {
             M$6.toInnerPoint(t, origin, tempPoint$3);
             M$6.scaleOfInner(t, tempPoint$3, scaleX, scaleY);
@@ -882,6 +933,10 @@ var LeaferUI = function(exports) {
             this.scaleY *= y || x;
             return this;
         }
+        pixelScale(pixelRatio) {
+            MatrixHelper.pixelScale(this, pixelRatio);
+            return this;
+        }
         scaleOfOuter(origin, x, y) {
             MatrixHelper.scaleOfOuter(this, origin, x, y);
             return this;
@@ -960,7 +1015,7 @@ var LeaferUI = function(exports) {
             MatrixHelper.reset(this);
         }
     }
-    const tempMatrix$1 = new Matrix;
+    const tempMatrix$2 = new Matrix;
     const TwoPointBoundsHelper = {
         tempPointBounds: {},
         setPoint(t, minX, minY) {
@@ -1090,9 +1145,9 @@ var LeaferUI = function(exports) {
     let right$1, bottom$1, boundsRight, boundsBottom;
     const point = {};
     const toPoint$4 = {};
-    const tempBounds$2 = {};
+    const tempBounds$3 = {};
     const BoundsHelper = {
-        tempBounds: tempBounds$2,
+        tempBounds: tempBounds$3,
         set(t, x = 0, y = 0, width = 0, height = 0) {
             t.x = x;
             t.y = y;
@@ -1143,19 +1198,11 @@ var LeaferUI = function(exports) {
             B.move(t, x, y);
             return t;
         },
-        toOffsetOutBounds(t, to, parent) {
-            if (!to) {
-                to = t;
-            } else {
-                copy$9(to, t);
-            }
-            if (parent) {
-                to.offsetX = -(B.maxX(parent) - t.x);
-                to.offsetY = -(B.maxY(parent) - t.y);
-            } else {
-                to.offsetX = t.x + t.width;
-                to.offsetY = t.y + t.height;
-            }
+        toOffsetOutBounds(t, to, offsetBounds) {
+            if (!to) to = t; else copy$9(to, t);
+            if (!offsetBounds) offsetBounds = t;
+            to.offsetX = B.maxX(offsetBounds);
+            to.offsetY = B.maxY(offsetBounds);
             B.move(to, -to.offsetX, -to.offsetY);
         },
         scale(t, scaleX, scaleY = scaleX, onlySize) {
@@ -1169,9 +1216,9 @@ var LeaferUI = function(exports) {
             t.height *= scaleY;
         },
         tempToOuterOf(t, matrix) {
-            B.copy(tempBounds$2, t);
-            B.toOuterOf(tempBounds$2, matrix);
-            return tempBounds$2;
+            B.copy(tempBounds$3, t);
+            B.toOuterOf(tempBounds$3, matrix);
+            return tempBounds$3;
         },
         getOuterOf(t, matrix) {
             t = Object.assign({}, t);
@@ -1229,9 +1276,9 @@ var LeaferUI = function(exports) {
         put(t, put, align = "center", putScale = 1, changeSize = true, to) {
             to || (to = put);
             if (isString(putScale)) putScale = B.getFitScale(t, put, putScale === "cover");
-            tempBounds$2.width = changeSize ? put.width *= putScale : put.width * putScale;
-            tempBounds$2.height = changeSize ? put.height *= putScale : put.height * putScale;
-            AlignHelper.toPoint(align, tempBounds$2, t, to, true, true);
+            tempBounds$3.width = changeSize ? put.width *= putScale : put.width * putScale;
+            tempBounds$3.height = changeSize ? put.height *= putScale : put.height * putScale;
+            AlignHelper.toPoint(align, tempBounds$3, t, to, true, true);
         },
         getSpread(t, spread, side) {
             const n = {};
@@ -1301,7 +1348,7 @@ var LeaferUI = function(exports) {
                         first = false;
                         if (!addMode) copy$9(t, bounds);
                     } else {
-                        add$1(t, bounds);
+                        add$2(t, bounds);
                     }
                 }
             }
@@ -1315,7 +1362,7 @@ var LeaferUI = function(exports) {
             B.set(t, point.x, point.y);
         },
         addPoint(t, point) {
-            add$1(t, point, true);
+            add$2(t, point, true);
         },
         getPoints(t) {
             const {x: x, y: y, width: width, height: height} = t;
@@ -1384,7 +1431,7 @@ var LeaferUI = function(exports) {
         }
     };
     const B = BoundsHelper;
-    const {add: add$1, copy: copy$9} = B;
+    const {add: add$2, copy: copy$9} = B;
     class Bounds {
         get minX() {
             return BoundsHelper.minX(this);
@@ -1527,7 +1574,7 @@ var LeaferUI = function(exports) {
             BoundsHelper.reset(this);
         }
     }
-    const tempBounds$1 = new Bounds;
+    const tempBounds$2 = new Bounds;
     class AutoBounds {
         constructor(top, right, bottom, left, width, height) {
             isObject(top) ? this.copy(top) : this.set(top, right, bottom, left, width, height);
@@ -1991,7 +2038,7 @@ var LeaferUI = function(exports) {
     __decorate([ contextMethod() ], Canvas.prototype, "fillText", null);
     __decorate([ contextMethod() ], Canvas.prototype, "measureText", null);
     __decorate([ contextMethod() ], Canvas.prototype, "strokeText", null);
-    const {copy: copy$8, multiplyParent: multiplyParent$4} = MatrixHelper, {round: round$1} = Math, tempPixelBounds = new Bounds, tempPixelBounds2 = new Bounds;
+    const {copy: copy$8, multiplyParent: multiplyParent$4, pixelScale: pixelScale} = MatrixHelper, {round: round$1} = Math, tempPixelBounds = new Bounds, tempPixelBounds2 = new Bounds;
     const minSize = {
         width: 1,
         height: 1,
@@ -2089,13 +2136,8 @@ var LeaferUI = function(exports) {
         setWorld(matrix, parentMatrix) {
             const {pixelRatio: pixelRatio, pixelSnap: pixelSnap} = this, w = this.worldTransform;
             if (parentMatrix) multiplyParent$4(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) {
+            pixelScale(matrix, pixelRatio, w);
+            if (pixelSnap && !matrix.ignorePixelSnap) {
                 if (matrix.half && matrix.half * pixelRatio % 2) w.e = round$1(w.e - .5) + .5, w.f = round$1(w.f - .5) + .5; else w.e = round$1(w.e), 
                 w.f = round$1(w.f);
             }
@@ -3745,7 +3787,7 @@ var LeaferUI = function(exports) {
     };
     const I$1 = ImageManager;
     const {IMAGE: IMAGE, create: create$1} = IncrementId;
-    const {floor: floor$1, max: max$1} = Math;
+    const {floor: floor$1, max: max$3} = Math;
     class LeaferImage {
         get url() {
             return this.config.url;
@@ -3833,7 +3875,7 @@ var LeaferUI = function(exports) {
                 }
                 if (data) return data;
             }
-            const canvas = Platform.origin.createCanvas(max$1(floor$1(width + (xGap || 0)), 1), max$1(floor$1(height + (yGap || 0)), 1));
+            const canvas = Platform.origin.createCanvas(max$3(floor$1(width + (xGap || 0)), 1), max$3(floor$1(height + (yGap || 0)), 1));
             const ctx = canvas.getContext("2d");
             if (opacity) ctx.globalAlpha = opacity;
             ctx.imageSmoothingEnabled = smooth === false ? false : true;
@@ -4008,6 +4050,17 @@ var LeaferUI = function(exports) {
             }
         }));
     }
+    function dimType(defaultValue) {
+        return decorateLeafAttr(defaultValue, key => attr({
+            set(value) {
+                if (this.__setAttr(key, value)) {
+                    const data = this.__;
+                    DataHelper.stintSet(data, "__useDim", data.dim || data.bright || data.dimskip);
+                    this.__layout.surfaceChange();
+                }
+            }
+        }));
+    }
     function opacityType(defaultValue) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
@@ -4048,7 +4101,7 @@ var LeaferUI = function(exports) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
                 if (this.__setAttr(key, value)) {
-                    this.__layout.surfaceChanged || this.__layout.surfaceChange();
+                    this.__layout.surfaceChange();
                     this.waitParent(() => {
                         this.parent.__layout.childrenSortChange();
                     });
@@ -4082,7 +4135,7 @@ var LeaferUI = function(exports) {
             set(value) {
                 if (this.__setAttr(key, value)) {
                     this.__layout.hitCanvasChanged = true;
-                    if (Debug.showBounds === "hit") this.__layout.surfaceChanged || this.__layout.surfaceChange();
+                    if (Debug.showBounds === "hit") this.__layout.surfaceChange();
                     if (this.leafer) this.leafer.updateCursor();
                 }
             }
@@ -4554,7 +4607,7 @@ var LeaferUI = function(exports) {
         }
     };
     const {getRelativeWorld: getRelativeWorld$1, updateBounds: updateBounds$2} = LeafHelper;
-    const {toOuterOf: toOuterOf$2, getPoints: getPoints, copy: copy$5} = BoundsHelper;
+    const {toOuterOf: toOuterOf$3, getPoints: getPoints, copy: copy$5} = BoundsHelper;
     const localContent = "_localContentBounds";
     const worldContent = "_worldContentBounds", worldBox = "_worldBoxBounds", worldStroke = "_worldStrokeBounds";
     class LeafLayout {
@@ -4574,7 +4627,7 @@ var LeaferUI = function(exports) {
             this._renderBounds = bounds;
         }
         get localContentBounds() {
-            toOuterOf$2(this.contentBounds, this.leaf.__localMatrix, this[localContent] || (this[localContent] = {}));
+            toOuterOf$3(this.contentBounds, this.leaf.__localMatrix, this[localContent] || (this[localContent] = {}));
             return this[localContent];
         }
         get localStrokeBounds() {
@@ -4584,15 +4637,15 @@ var LeaferUI = function(exports) {
             return this._localRenderBounds || this;
         }
         get worldContentBounds() {
-            toOuterOf$2(this.contentBounds, this.leaf.__world, this[worldContent] || (this[worldContent] = {}));
+            toOuterOf$3(this.contentBounds, this.leaf.__world, this[worldContent] || (this[worldContent] = {}));
             return this[worldContent];
         }
         get worldBoxBounds() {
-            toOuterOf$2(this.boxBounds, this.leaf.__world, this[worldBox] || (this[worldBox] = {}));
+            toOuterOf$3(this.boxBounds, this.leaf.__world, this[worldBox] || (this[worldBox] = {}));
             return this[worldBox];
         }
         get worldStrokeBounds() {
-            toOuterOf$2(this.strokeBounds, this.leaf.__world, this[worldStroke] || (this[worldStroke] = {}));
+            toOuterOf$3(this.strokeBounds, this.leaf.__world, this[worldStroke] || (this[worldStroke] = {}));
             return this[worldStroke];
         }
         get a() {
@@ -5363,12 +5416,12 @@ var LeaferUI = function(exports) {
     };
     const {updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2} = LeafHelper;
     const {updateBounds: updateBounds$1} = BranchHelper;
-    const {toOuterOf: toOuterOf$1, copyAndSpread: copyAndSpread$1, copy: copy$4} = BoundsHelper;
+    const {toOuterOf: toOuterOf$2, copyAndSpread: copyAndSpread$2, copy: copy$4} = BoundsHelper;
     const {toBounds: toBounds} = PathBounds;
     const LeafBounds = {
         __updateWorldBounds() {
             const layout = this.__layout;
-            toOuterOf$1(layout.renderBounds, this.__world, this.__world);
+            toOuterOf$2(layout.renderBounds, this.__world, this.__world);
             if (layout.resized) {
                 if (layout.resized === "inner") this.__onUpdateSize();
                 if (this.__hasLocalEvent) BoundsEvent.emitLocal(this);
@@ -5424,13 +5477,13 @@ var LeaferUI = function(exports) {
         __updateLocalBoxBounds() {
             if (this.__hasMotionPath) this.__updateMotionPath();
             if (this.__hasAutoLayout) this.__updateAutoLayout();
-            toOuterOf$1(this.__layout.boxBounds, this.__local, this.__local);
+            toOuterOf$2(this.__layout.boxBounds, this.__local, this.__local);
         },
         __updateLocalStrokeBounds() {
-            toOuterOf$1(this.__layout.strokeBounds, this.__localMatrix, this.__layout.localStrokeBounds);
+            toOuterOf$2(this.__layout.strokeBounds, this.__localMatrix, this.__layout.localStrokeBounds);
         },
         __updateLocalRenderBounds() {
-            toOuterOf$1(this.__layout.renderBounds, this.__localMatrix, this.__layout.localRenderBounds);
+            toOuterOf$2(this.__layout.renderBounds, this.__localMatrix, this.__layout.localRenderBounds);
         },
         __updateBoxBounds(_secondLayout, _bounds) {
             const b = this.__layout.boxBounds;
@@ -5468,11 +5521,11 @@ var LeaferUI = function(exports) {
         },
         __updateStrokeBounds(_bounds) {
             const layout = this.__layout;
-            copyAndSpread$1(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
+            copyAndSpread$2(layout.strokeBounds, layout.boxBounds, layout.strokeBoxSpread);
         },
         __updateRenderBounds(_bounds) {
-            const layout = this.__layout;
-            layout.renderSpread > 0 ? copyAndSpread$1(layout.renderBounds, layout.boxBounds, layout.renderSpread) : copy$4(layout.renderBounds, layout.strokeBounds);
+            const layout = this.__layout, {renderSpread: renderSpread} = layout;
+            isNumber(renderSpread) && renderSpread <= 0 ? copy$4(layout.renderBounds, layout.strokeBounds) : copyAndSpread$2(layout.renderBounds, layout.boxBounds, renderSpread);
         }
     };
     const LeafRender = {
@@ -5480,6 +5533,7 @@ var LeaferUI = function(exports) {
             if (options.shape) return this.__renderShape(canvas, options);
             if (this.__worldOpacity) {
                 const data = this.__;
+                if (data.bright && !options.topRendering) return options.topList.add(this);
                 canvas.setWorld(this.__nowWorld = this.__getNowWorld(options));
                 canvas.opacity = options.dimOpacity && !data.dimskip ? data.opacity * options.dimOpacity : data.opacity;
                 if (this.__.__single) {
@@ -5526,7 +5580,9 @@ var LeaferUI = function(exports) {
             this.__nowWorld = this.__getNowWorld(options);
             if (this.__worldOpacity) {
                 const data = this.__;
-                if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
+                if (data.__useDim) {
+                    if (data.dim) options.dimOpacity = data.dim === true ? .2 : data.dim; else if (data.bright && !options.topRendering) return options.topList.add(this); else if (data.dimskip) options.dimOpacity && (options.dimOpacity = 0);
+                }
                 if (data.__single && !this.isBranchLeaf) {
                     if (data.eraser === "path") return this.__renderEraser(canvas, options);
                     const tempCanvas = canvas.getSameCanvas(false, true);
@@ -5561,9 +5617,10 @@ var LeaferUI = function(exports) {
     };
     const tempScaleData$1 = {};
     const {LEAF: LEAF, create: create} = IncrementId;
+    const {stintSet: stintSet$3} = DataHelper;
     const {toInnerPoint: toInnerPoint, toOuterPoint: toOuterPoint, multiplyParent: multiplyParent$1} = MatrixHelper;
-    const {toOuterOf: toOuterOf} = BoundsHelper;
-    const {copy: copy$3, move: move} = PointHelper;
+    const {toOuterOf: toOuterOf$1} = BoundsHelper;
+    const {copy: copy$3, move: move$2} = PointHelper;
     const {moveLocal: moveLocal, zoomOfLocal: zoomOfLocal, rotateOfLocal: rotateOfLocal, skewOfLocal: skewOfLocal, moveWorld: moveWorld, zoomOfWorld: zoomOfWorld, rotateOfWorld: rotateOfWorld, skewOfWorld: skewOfWorld, transform: transform, transformWorld: transformWorld, setTransform: setTransform, getFlipTransform: getFlipTransform, getLocalOrigin: getLocalOrigin, getRelativeWorld: getRelativeWorld, drop: drop} = LeafHelper;
     exports.Leaf = class Leaf {
         get tag() {
@@ -5837,8 +5894,9 @@ var LeaferUI = function(exports) {
                 if (!this.__cameraWorld) this.__cameraWorld = {};
                 const cameraWorld = this.__cameraWorld, world = this.__world;
                 multiplyParent$1(world, options.matrix, cameraWorld, undefined, world);
-                toOuterOf(this.__layout.renderBounds, cameraWorld, cameraWorld);
-                cameraWorld.half !== world.half && (cameraWorld.half = world.half);
+                toOuterOf$1(this.__layout.renderBounds, cameraWorld, cameraWorld);
+                stintSet$3(cameraWorld, "half", world.half);
+                stintSet$3(cameraWorld, "ignorePixelSnap", world.ignorePixelSnap);
                 return cameraWorld;
             } else {
                 return this.__world;
@@ -5872,7 +5930,7 @@ var LeaferUI = function(exports) {
         getWorldBounds(inner, relative, change) {
             const matrix = relative ? getRelativeWorld(this, relative) : this.worldTransform;
             const to = change ? inner : {};
-            toOuterOf(inner, matrix, to);
+            toOuterOf$1(inner, matrix, to);
             return to;
         }
         worldToLocal(world, to, distance, relative) {
@@ -5905,7 +5963,7 @@ var LeaferUI = function(exports) {
         }
         getBoxPointByInner(inner, _relative, _distance, change) {
             const point = change ? inner : Object.assign({}, inner), {x: x, y: y} = this.boxBounds;
-            move(point, -x, -y);
+            move$2(point, -x, -y);
             return point;
         }
         getInnerPoint(world, relative, distance, change) {
@@ -5915,7 +5973,7 @@ var LeaferUI = function(exports) {
         }
         getInnerPointByBox(box, _relative, _distance, change) {
             const point = change ? box : Object.assign({}, box), {x: x, y: y} = this.boxBounds;
-            move(point, x, y);
+            move$2(point, x, y);
             return point;
         }
         getInnerPointByLocal(local, _relative, distance, change) {
@@ -6351,7 +6409,7 @@ var LeaferUI = function(exports) {
             this.levelMap = null;
         }
     }
-    const version = "1.9.6";
+    const version = "1.9.8";
     const debug$5 = Debug.get("LeaferCanvas");
     class LeaferCanvas extends LeaferCanvasBase {
         set zIndex(zIndex) {
@@ -6384,7 +6442,7 @@ var LeaferUI = function(exports) {
             }
             if (Platform.syncDomFont && !this.parentView) {
                 style.display = "none";
-                document.body.appendChild(this.view);
+                if (document.body) document.body.appendChild(this.view);
             }
             this.__createContext();
             if (!this.autoLayout) this.resize(config);
@@ -6955,6 +7013,7 @@ var LeaferUI = function(exports) {
                 usePartRender: true,
                 maxFPS: 120
             };
+            this.frames = [];
             this.target = target;
             this.canvas = canvas;
             if (userConfig) this.config = DataHelper.default(userConfig, this.config);
@@ -7084,7 +7143,7 @@ var LeaferUI = function(exports) {
             };
             if (this.needFill) canvas.fillWorld(bounds, this.config.fill);
             if (Debug.showRepaint) Debug.drawRepaint(canvas, bounds);
-            this.target.__render(canvas, options);
+            Platform.render(this.target, canvas, options);
             this.renderBounds = realBounds = realBounds || bounds;
             this.renderOptions = options;
             this.totalBounds.isEmpty() ? this.totalBounds = realBounds : this.totalBounds.add(realBounds);
@@ -7107,12 +7166,15 @@ var LeaferUI = function(exports) {
             const target = this.target;
             if (this.requestTime || !target) return;
             if (target.parentApp) return target.parentApp.requestRender(false);
-            const requestTime = this.requestTime = Date.now();
+            this.requestTime = this.frameTime || Date.now();
             const render = () => {
-                const nowFPS = 1e3 / (Date.now() - requestTime);
+                const nowFPS = 1e3 / ((this.frameTime = Date.now()) - this.requestTime);
                 const {maxFPS: maxFPS} = this.config;
-                if (maxFPS && nowFPS > maxFPS - .5) return Platform.requestRender(render);
-                this.FPS = Math.min(120, Math.ceil(nowFPS));
+                if (maxFPS && nowFPS > maxFPS) return Platform.requestRender(render);
+                const {frames: frames} = this;
+                if (frames.length > 30) frames.shift();
+                frames.push(nowFPS);
+                this.FPS = Math.round(frames.reduce((a, b) => a + b, 0) / frames.length);
                 this.requestTime = 0;
                 this.checkRender();
             };
@@ -7353,6 +7415,14 @@ var LeaferUI = function(exports) {
         selector: (target, options) => new Selector(target, options)
     });
     Platform.layout = Layouter.fullLayout;
+    Platform.render = function(target, canvas, options) {
+        const topOptions = Object.assign(Object.assign({}, options), {
+            topRendering: true
+        });
+        options.topList = new LeafList;
+        target.__render(canvas, options);
+        if (options.topList.length) options.topList.forEach(item => item.__render(canvas, topOptions));
+    };
     function effectType(defaultValue) {
         return decorateLeafAttr(defaultValue, key => attr({
             set(value) {
@@ -7714,39 +7784,40 @@ var LeaferUI = function(exports) {
             return data;
         }
     }
+    const {max: max$2, add: add$1} = FourNumberHelper;
     const UIBounds = {
         __updateStrokeSpread() {
-            let width = 0, boxWidth = 0;
+            let spread = 0, boxSpread = 0;
             const data = this.__, {strokeAlign: strokeAlign, __maxStrokeWidth: strokeWidth} = data, box = this.__box;
             if ((data.stroke || data.hitStroke === "all") && strokeWidth && strokeAlign !== "inside") {
-                boxWidth = width = strokeAlign === "center" ? strokeWidth / 2 : strokeWidth;
+                boxSpread = spread = strokeAlign === "center" ? strokeWidth / 2 : strokeWidth;
                 if (!data.__boxStroke) {
-                    const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * width;
+                    const miterLimitAddWidth = data.__isLinePath ? 0 : 10 * spread;
                     const storkeCapAddWidth = data.strokeCap === "none" ? 0 : strokeWidth;
-                    width += Math.max(miterLimitAddWidth, storkeCapAddWidth);
+                    spread += Math.max(miterLimitAddWidth, storkeCapAddWidth);
                 }
             }
-            if (data.__useArrow) width += strokeWidth * 5;
+            if (data.__useArrow) spread += strokeWidth * 5;
             if (box) {
-                width = Math.max(box.__layout.strokeSpread = box.__updateStrokeSpread(), width);
-                boxWidth = box.__layout.strokeBoxSpread;
+                spread = max$2(spread, box.__layout.strokeSpread = box.__updateStrokeSpread());
+                boxSpread = Math.max(boxSpread, box.__layout.strokeBoxSpread);
             }
-            this.__layout.strokeBoxSpread = boxWidth;
-            return width;
+            this.__layout.strokeBoxSpread = boxSpread;
+            return spread;
         },
         __updateRenderSpread() {
-            let width = 0;
-            const {shadow: shadow, innerShadow: innerShadow, blur: blur, backgroundBlur: backgroundBlur, filter: filter, renderSpread: renderSpread} = this.__;
-            if (shadow) width = Effect.getShadowSpread(this, shadow);
-            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));
-            if (backgroundBlur) shapeWidth = Math.max(shapeWidth, backgroundBlur);
-            this.__layout.renderShapeSpread = shapeWidth;
-            width += this.__layout.strokeSpread || 0;
-            return this.__box ? Math.max(this.__box.__updateRenderSpread(), width) : width;
+            let spread = 0;
+            const {shadow: shadow, innerShadow: innerShadow, blur: blur, backgroundBlur: backgroundBlur, filter: filter, renderSpread: renderSpread} = this.__, {strokeSpread: strokeSpread} = this.__layout, box = this.__box;
+            if (shadow) spread = Effect.getShadowRenderSpread(this, shadow);
+            if (blur) spread = max$2(spread, blur);
+            if (filter) spread = add$1(spread, Filter.getSpread(filter));
+            if (renderSpread) spread = add$1(spread, renderSpread);
+            if (strokeSpread) spread = add$1(spread, strokeSpread);
+            let shapeSpread = spread;
+            if (innerShadow) shapeSpread = max$2(shapeSpread, Effect.getInnerShadowSpread(this, innerShadow));
+            if (backgroundBlur) shapeSpread = max$2(shapeSpread, backgroundBlur);
+            this.__layout.renderShapeSpread = shapeSpread;
+            return box ? max$2(box.__updateRenderSpread(), spread) : spread;
         }
     };
     const {float: float} = MathHelper;
@@ -8070,8 +8141,8 @@ var LeaferUI = function(exports) {
     __decorate([ opacityType(1) ], exports.UI.prototype, "opacity", void 0);
     __decorate([ visibleType(true) ], exports.UI.prototype, "visible", void 0);
     __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([ dimType(false) ], exports.UI.prototype, "dim", void 0);
+    __decorate([ dimType(false) ], exports.UI.prototype, "dimskip", void 0);
     __decorate([ sortType(0) ], exports.UI.prototype, "zIndex", void 0);
     __decorate([ maskType(false) ], exports.UI.prototype, "mask", void 0);
     __decorate([ eraserType(false) ], exports.UI.prototype, "eraser", void 0);
@@ -8888,7 +8959,7 @@ var LeaferUI = function(exports) {
     __decorate([ dataType(false) ], exports.Canvas.prototype, "safeResize", void 0);
     __decorate([ resizeType() ], exports.Canvas.prototype, "contextSettings", void 0);
     exports.Canvas = __decorate([ registerUI() ], exports.Canvas);
-    const {copyAndSpread: copyAndSpread, includes: includes, spread: spread, setList: setList} = BoundsHelper;
+    const {copyAndSpread: copyAndSpread$1, includes: includes, spread: spread, setList: setList} = BoundsHelper;
     exports.Text = class Text extends exports.UI {
         get __tag() {
             return "Text";
@@ -8934,13 +9005,13 @@ var LeaferUI = function(exports) {
             if (this.isOverflow) setList(data.__textBoxBounds = {}, [ b, contentBounds ]), layout.renderChanged = true; else data.__textBoxBounds = b;
         }
         __updateRenderSpread() {
-            let width = super.__updateRenderSpread();
-            if (!width) width = this.isOverflow ? 1 : 0;
-            return width;
+            let spread = super.__updateRenderSpread();
+            if (!spread) spread = this.isOverflow ? 1 : 0;
+            return spread;
         }
         __updateRenderBounds() {
             const {renderBounds: renderBounds, renderSpread: renderSpread} = this.__layout;
-            copyAndSpread(renderBounds, this.__.__textBoxBounds, renderSpread);
+            copyAndSpread$1(renderBounds, this.__.__textBoxBounds, renderSpread);
             if (this.__box) this.__box.__layout.renderBounds = renderBounds;
         }
         __updateChange() {
@@ -9299,9 +9370,9 @@ var LeaferUI = function(exports) {
         static setData(data) {
             this.data = data;
         }
-        static getValidMove(leaf, start, total, checkLimit = true) {
-            const move = leaf.getLocalPoint(total, null, true);
-            PointHelper.move(move, start.x - leaf.x, start.y - leaf.y);
+        static getValidMove(leaf, localStart, worldTotal, checkLimit = true) {
+            const move = leaf.getLocalPoint(worldTotal, null, true);
+            PointHelper.move(move, localStart.x - leaf.x, localStart.y - leaf.y);
             if (checkLimit) this.limitMove(leaf, move);
             DragBoundsHelper.axisMove(leaf, move);
             return move;
@@ -10255,8 +10326,8 @@ var LeaferUI = function(exports) {
         if (isHitPixel) {
             const {renderBounds: renderBounds} = this.__layout;
             const size = Platform.image.hitCanvasSize;
-            const scale = h.hitScale = tempBounds$1.set(0, 0, size, size).getFitMatrix(renderBounds).a;
-            const {x: x, y: y, width: width, height: height} = tempBounds$1.set(renderBounds).scale(scale);
+            const scale = h.hitScale = tempBounds$2.set(0, 0, size, size).getFitMatrix(renderBounds).a;
+            const {x: x, y: y, width: width, height: height} = tempBounds$2.set(renderBounds).scale(scale);
             h.resize({
                 width: width,
                 height: height,
@@ -10343,8 +10414,8 @@ var LeaferUI = function(exports) {
     canvas.hitPixel = function(radiusPoint, offset, scale = 1) {
         let {x: x, y: y, radiusX: radiusX, radiusY: radiusY} = radiusPoint;
         if (offset) x -= offset.x, y -= offset.y;
-        tempBounds$1.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
-        const {data: data} = this.context.getImageData(tempBounds$1.x, tempBounds$1.y, tempBounds$1.width || 1, tempBounds$1.height || 1);
+        tempBounds$2.set(x - radiusX, y - radiusY, radiusX * 2, radiusY * 2).scale(scale).ceil();
+        const {data: data} = this.context.getImageData(tempBounds$2.x, tempBounds$2.y, tempBounds$2.width || 1, tempBounds$2.height || 1);
         for (let i = 0, len = data.length; i < len; i += 4) {
             if (data[i + 3] > 0) return true;
         }
@@ -10853,23 +10924,27 @@ var LeaferUI = function(exports) {
             out.recycle(ui.__nowWorld);
         }
     }
-    const {getSpread: getSpread, getOuterOf: getOuterOf, getByMove: getByMove, getIntersectData: getIntersectData} = BoundsHelper;
+    const {getSpread: getSpread, copyAndSpread: copyAndSpread, toOuterOf: toOuterOf, getOuterOf: getOuterOf, getByMove: getByMove, move: move$1, getIntersectData: getIntersectData} = BoundsHelper;
+    const tempBounds$1 = {};
     function shape(ui, current, options) {
         const canvas = current.getSameCanvas();
-        const nowWorld = ui.__nowWorld, currentBounds = current.bounds;
-        let bounds, matrix, fitMatrix, shapeBounds, worldCanvas;
+        const currentBounds = current.bounds, nowWorld = ui.__nowWorld, layout = ui.__layout;
+        const nowWorldShapeBounds = ui.__nowWorldShapeBounds || (ui.__nowWorldShapeBounds = {});
+        toOuterOf(layout.strokeSpread ? (copyAndSpread(tempBounds$1, layout.boxBounds, layout.strokeSpread), 
+        tempBounds$1) : layout.boxBounds, nowWorld, nowWorldShapeBounds);
+        let bounds, renderBounds, matrix, fitMatrix, shapeBounds, worldCanvas;
         let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true);
-        if (currentBounds.includes(nowWorld)) {
+        if (currentBounds.includes(nowWorldShapeBounds)) {
             worldCanvas = canvas;
-            bounds = shapeBounds = nowWorld;
+            bounds = shapeBounds = nowWorldShapeBounds;
+            renderBounds = nowWorld;
         } else {
-            const {renderShapeSpread: spread} = ui.__layout;
             let worldClipBounds;
             if (Platform.fullImageShadow) {
-                worldClipBounds = nowWorld;
+                worldClipBounds = nowWorldShapeBounds;
             } else {
-                const spreadBounds = spread ? getSpread(currentBounds, scaleX === scaleY ? spread * scaleX : [ spread * scaleY, spread * scaleX ]) : currentBounds;
-                worldClipBounds = getIntersectData(spreadBounds, nowWorld);
+                const spreadBounds = layout.renderShapeSpread ? getSpread(currentBounds, FourNumberHelper.swapAndScale(layout.renderShapeSpread, scaleX, scaleY)) : currentBounds;
+                worldClipBounds = getIntersectData(spreadBounds, nowWorldShapeBounds);
             }
             fitMatrix = currentBounds.getFitMatrix(worldClipBounds);
             let {a: fitScaleX, d: fitScaleY} = fitMatrix;
@@ -10879,8 +10954,10 @@ var LeaferUI = function(exports) {
                 scaleX *= fitScaleX;
                 scaleY *= fitScaleY;
             }
-            shapeBounds = getOuterOf(nowWorld, fitMatrix);
+            shapeBounds = getOuterOf(nowWorldShapeBounds, fitMatrix);
             bounds = getByMove(shapeBounds, -fitMatrix.e, -fitMatrix.f);
+            renderBounds = getOuterOf(nowWorld, fitMatrix);
+            move$1(renderBounds, -fitMatrix.e, -fitMatrix.f);
             const userMatrix = options.matrix;
             if (userMatrix) {
                 matrix = new Matrix(fitMatrix);
@@ -10899,6 +10976,7 @@ var LeaferUI = function(exports) {
             matrix: matrix,
             fitMatrix: fitMatrix,
             bounds: bounds,
+            renderBounds: renderBounds,
             worldCanvas: worldCanvas,
             shapeBounds: shapeBounds,
             scaleX: scaleX,
@@ -10996,7 +11074,7 @@ var LeaferUI = function(exports) {
         drawTextStroke: drawTextStroke,
         shape: shape
     };
-    let origin = {}, tempMatrix = getMatrixData();
+    let origin = {}, tempMatrix$1 = getMatrixData();
     const {get: get$3, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
     function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
         const transform = get$3();
@@ -11008,12 +11086,12 @@ var LeaferUI = function(exports) {
         }, rotation);
         data.transform = transform;
     }
-    function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipSize) {
+    function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY) {
         const transform = get$3();
         layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
-        if (clipSize) {
-            tempMatrix.a = box.width / clipSize.width, tempMatrix.d = box.height / clipSize.height;
-            multiplyParent(transform, tempMatrix);
+        if (clipScaleX) {
+            tempMatrix$1.a = clipScaleX, tempMatrix$1.d = clipScaleY;
+            multiplyParent(transform, tempMatrix$1);
         }
         data.transform = transform;
     }
@@ -11106,7 +11184,12 @@ var LeaferUI = function(exports) {
 
           case "normal":
           case "clip":
-            if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew) clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, paint.clipSize);
+            if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew) {
+                let clipScaleX, clipScaleY;
+                if (clipSize) clipScaleX = box.width / clipSize.width, clipScaleY = box.height / clipSize.height;
+                clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY);
+                if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : scaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY;
+            }
             break;
 
           case "repeat":
@@ -11251,7 +11334,7 @@ var LeaferUI = function(exports) {
         if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
     }
     const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
-    const {floor: floor, ceil: ceil, max: max, abs: abs} = Math;
+    const {floor: floor, ceil: ceil, max: max$1, abs: abs} = Math;
     function createPattern(ui, paint, pixelRatio) {
         let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
         const id = scaleX + "-" + scaleY + "-" + pixelRatio;
@@ -11299,8 +11382,8 @@ var LeaferUI = function(exports) {
             if (transform || scaleX !== 1 || scaleY !== 1) {
                 const canvasWidth = width + (xGap || 0);
                 const canvasHeight = height + (yGap || 0);
-                scaleX /= canvasWidth / max(floor(canvasWidth), 1);
-                scaleY /= canvasHeight / max(floor(canvasHeight), 1);
+                scaleX /= canvasWidth / max$1(floor(canvasWidth), 1);
+                scaleY /= canvasHeight / max$1(floor(canvasHeight), 1);
                 if (!imageMatrix) {
                     imageMatrix = get$1();
                     if (transform) copy$1(imageMatrix, transform);
@@ -11325,17 +11408,15 @@ var LeaferUI = function(exports) {
             if (allowDraw) {
                 if (data.repeat) {
                     allowDraw = false;
-                } else {
-                    if (!(paint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || Export.running)) {
-                        let {width: width, height: height} = data;
-                        width *= scaleX * pixelRatio;
-                        height *= scaleY * pixelRatio;
-                        if (data.scaleX) {
-                            width *= data.scaleX;
-                            height *= data.scaleY;
-                        }
-                        allowDraw = width * height > Platform.image.maxCacheSize;
+                } else if (!(paint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || Export.running)) {
+                    let {width: width, height: height} = data;
+                    width *= scaleX * pixelRatio;
+                    height *= scaleY * pixelRatio;
+                    if (data.scaleX) {
+                        width *= data.scaleX;
+                        height *= data.scaleY;
                     }
+                    allowDraw = width * height > Platform.image.maxCacheSize;
                 }
             }
             if (allowDraw) {
@@ -11493,17 +11574,17 @@ var LeaferUI = function(exports) {
         conicGradient: conicGradient,
         getTransform: getTransform
     };
-    const {copy: copy, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper;
-    const tempBounds = {};
+    const {copy: copy, move: move, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max} = Math;
+    const tempBounds = {}, tempMatrix = new Matrix;
     const offsetOutBounds$1 = {};
     function shadow(ui, current, shape) {
-        let copyBounds, spreadScale;
-        const {__nowWorld: nowWorld, __layout: __layout} = ui;
+        let copyBounds, transform;
+        const {__nowWorld: nowWorld} = ui;
         const {shadow: shadow} = ui.__;
-        const {worldCanvas: worldCanvas, bounds: bounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
+        const {worldCanvas: worldCanvas, bounds: bounds, renderBounds: renderBounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
         const other = current.getSameCanvas();
         const end = shadow.length - 1;
-        toOffsetOutBounds$1(bounds, offsetOutBounds$1);
+        toOffsetOutBounds$1(bounds, offsetOutBounds$1, renderBounds);
         shadow.forEach((item, index) => {
             let otherScale = 1;
             if (item.scaleFixed) {
@@ -11511,63 +11592,69 @@ var LeaferUI = function(exports) {
                 if (sx > 1) otherScale = 1 / sx;
             }
             other.setWorldShadow(offsetOutBounds$1.offsetX + item.x * scaleX * otherScale, offsetOutBounds$1.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale, ColorConvert.string(item.color));
-            spreadScale = item.spread ? 1 + item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) * otherScale : 0;
-            drawWorldShadow(other, offsetOutBounds$1, spreadScale, shape);
-            copyBounds = bounds;
+            transform = getShadowTransform(ui, other, shape, item, offsetOutBounds$1, otherScale);
+            if (transform) other.setTransform(transform);
+            drawWorldShadow(other, offsetOutBounds$1, shape);
+            if (transform) other.resetTransform();
+            copyBounds = renderBounds;
             if (item.box) {
                 other.restore();
                 other.save();
                 if (worldCanvas) {
-                    other.copyWorld(other, bounds, nowWorld, "copy");
+                    other.copyWorld(other, renderBounds, nowWorld, "copy");
                     copyBounds = nowWorld;
                 }
                 worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, "destination-out") : other.copyWorld(shape.canvas, shapeBounds, bounds, "destination-out");
             }
-            if (Effect.isTransformShadow(item)) Effect.renderTransformShadow(ui, current, other, copyBounds, item); else LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
+            LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
             if (end && index < end) other.clearWorld(copyBounds);
         });
         other.recycle(copyBounds);
     }
-    function getShadowSpread(_ui, shadow) {
-        let width = 0;
-        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));
-        return width;
+    function getShadowRenderSpread(_ui, shadow) {
+        let top = 0, right = 0, bottom = 0, left = 0, x, y, spread, blur;
+        shadow.forEach(item => {
+            x = item.x || 0, y = item.y || 0, spread = item.spread || 0, blur = (item.blur || 0) * 1.5;
+            top = max(top, spread + blur - y);
+            right = max(right, spread + blur + x);
+            bottom = max(bottom, spread + blur + y);
+            left = max(left, spread + blur - x);
+        });
+        return top === right && right === bottom && bottom === left ? top : [ top, right, bottom, left ];
+    }
+    function getShadowTransform(ui, canvas, _shape, shadow, outBounds, otherScale, isInnerShaodw) {
+        if (shadow.spread) {
+            const spreadScale = 1 + shadow.spread * 2 / ui.__layout.strokeBounds.width * otherScale * (isInnerShaodw ? -1 : 1);
+            tempMatrix.set().scaleOfOuter({
+                x: (outBounds.x + outBounds.width / 2) * canvas.pixelRatio,
+                y: (outBounds.y + outBounds.height / 2) * canvas.pixelRatio
+            }, spreadScale);
+            return tempMatrix;
+        }
+        return undefined;
     }
-    function drawWorldShadow(canvas, outBounds, spreadScale, shape) {
-        const {bounds: bounds, shapeBounds: shapeBounds} = shape;
+    function drawWorldShadow(canvas, outBounds, shape) {
+        const {shapeBounds: shapeBounds} = shape;
+        let from, to;
         if (Platform.fullImageShadow) {
             copy(tempBounds, canvas.bounds);
-            tempBounds.x += outBounds.x - shapeBounds.x;
-            tempBounds.y += outBounds.y - shapeBounds.y;
-            if (spreadScale) {
-                const {fitMatrix: fitMatrix} = shape;
-                tempBounds.x -= (bounds.x + (fitMatrix ? fitMatrix.e : 0) + bounds.width / 2) * (spreadScale - 1);
-                tempBounds.y -= (bounds.y + (fitMatrix ? fitMatrix.f : 0) + bounds.height / 2) * (spreadScale - 1);
-                tempBounds.width *= spreadScale;
-                tempBounds.height *= spreadScale;
-            }
-            canvas.copyWorld(shape.canvas, canvas.bounds, tempBounds);
+            move(tempBounds, outBounds.x - shapeBounds.x, outBounds.y - shapeBounds.y);
+            from = canvas.bounds, to = tempBounds;
         } else {
-            if (spreadScale) {
-                copy(tempBounds, outBounds);
-                tempBounds.x -= outBounds.width / 2 * (spreadScale - 1);
-                tempBounds.y -= outBounds.height / 2 * (spreadScale - 1);
-                tempBounds.width *= spreadScale;
-                tempBounds.height *= spreadScale;
-            }
-            canvas.copyWorld(shape.canvas, shapeBounds, spreadScale ? tempBounds : outBounds);
+            from = shapeBounds, to = outBounds;
         }
+        canvas.copyWorld(shape.canvas, from, to);
     }
     const {toOffsetOutBounds: toOffsetOutBounds} = BoundsHelper;
     const offsetOutBounds = {};
     function innerShadow(ui, current, shape) {
-        let copyBounds, spreadScale;
-        const {__nowWorld: nowWorld, __layout: __layout} = ui;
+        let copyBounds, transform;
+        const {__nowWorld: nowWorld} = ui;
         const {innerShadow: innerShadow} = ui.__;
-        const {worldCanvas: worldCanvas, bounds: bounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
+        const {worldCanvas: worldCanvas, bounds: bounds, renderBounds: renderBounds, shapeBounds: shapeBounds, scaleX: scaleX, scaleY: scaleY} = shape;
         const other = current.getSameCanvas();
         const end = innerShadow.length - 1;
-        toOffsetOutBounds(bounds, offsetOutBounds);
+        toOffsetOutBounds(bounds, offsetOutBounds, renderBounds);
         innerShadow.forEach((item, index) => {
             let otherScale = 1;
             if (item.scaleFixed) {
@@ -11576,16 +11663,17 @@ var LeaferUI = function(exports) {
             }
             other.save();
             other.setWorldShadow(offsetOutBounds.offsetX + item.x * scaleX * otherScale, offsetOutBounds.offsetY + item.y * scaleY * otherScale, item.blur * scaleX * otherScale);
-            spreadScale = item.spread ? 1 - item.spread * 2 / (__layout.boxBounds.width + (__layout.strokeBoxSpread || 0) * 2) * otherScale : 0;
-            drawWorldShadow(other, offsetOutBounds, spreadScale, shape);
+            transform = getShadowTransform(ui, other, shape, item, offsetOutBounds, otherScale, true);
+            if (transform) other.setTransform(transform);
+            drawWorldShadow(other, offsetOutBounds, shape);
             other.restore();
             if (worldCanvas) {
-                other.copyWorld(other, bounds, nowWorld, "copy");
+                other.copyWorld(other, renderBounds, nowWorld, "copy");
                 other.copyWorld(worldCanvas, nowWorld, nowWorld, "source-out");
                 copyBounds = nowWorld;
             } else {
                 other.copyWorld(shape.canvas, shapeBounds, bounds, "source-out");
-                copyBounds = bounds;
+                copyBounds = renderBounds;
             }
             other.fillWorld(copyBounds, ColorConvert.string(item.color), "source-in");
             LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
@@ -11593,6 +11681,7 @@ var LeaferUI = function(exports) {
         });
         other.recycle(copyBounds);
     }
+    const getInnerShadowSpread = getShadowRenderSpread;
     function blur(ui, current, origin) {
         const {blur: blur} = ui.__;
         origin.setWorldBlur(blur * ui.__nowWorld.a);
@@ -11605,10 +11694,12 @@ var LeaferUI = function(exports) {
         innerShadow: innerShadow,
         blur: blur,
         backgroundBlur: backgroundBlur,
-        getShadowSpread: getShadowSpread,
+        getShadowRenderSpread: getShadowRenderSpread,
+        getShadowTransform: getShadowTransform,
         isTransformShadow(_shadow) {
             return undefined;
-        }
+        },
+        getInnerShadowSpread: getInnerShadowSpread
     };
     const {excludeRenderBounds: excludeRenderBounds} = LeafBoundsHelper;
     let usedGrayscaleAlpha;
@@ -11622,6 +11713,7 @@ var LeaferUI = function(exports) {
                     maskEnd(this, currentMask, canvas, contentCanvas, maskCanvas, maskOpacity, undefined, true);
                     maskCanvas = contentCanvas = null;
                 }
+                if (mask === "clipping" || mask === "clipping-path") excludeRenderBounds(child, options) || child.__render(canvas, options);
                 maskOpacity = child.__.opacity;
                 usedGrayscaleAlpha = false;
                 if (mask === "path" || mask === "clipping-path") {
@@ -11639,7 +11731,6 @@ var LeaferUI = function(exports) {
                     if (!contentCanvas) contentCanvas = getCanvas(canvas);
                     child.__render(maskCanvas, options);
                 }
-                if (mask === "clipping" || mask === "clipping-path") excludeRenderBounds(child, options) || child.__render(canvas, options);
                 continue;
             }
             const childBlendMode = maskOpacity === 1 && child.__.__blendMode;
@@ -12199,6 +12290,7 @@ var LeaferUI = function(exports) {
     exports.Export = Export;
     exports.FileHelper = FileHelper;
     exports.Filter = Filter;
+    exports.FourNumberHelper = FourNumberHelper;
     exports.FrameData = FrameData;
     exports.GroupData = GroupData;
     exports.HitCanvasManager = HitCanvasManager;
@@ -12306,6 +12398,7 @@ var LeaferUI = function(exports) {
     exports.defineDataProcessor = defineDataProcessor;
     exports.defineKey = defineKey;
     exports.defineLeafAttr = defineLeafAttr;
+    exports.dimType = dimType;
     exports.doBoundsType = doBoundsType;
     exports.doStrokeType = doStrokeType;
     exports.effectType = effectType;
@@ -12347,8 +12440,8 @@ var LeaferUI = function(exports) {
     exports.sortType = sortType;
     exports.strokeType = strokeType;
     exports.surfaceType = surfaceType;
-    exports.tempBounds = tempBounds$1;
-    exports.tempMatrix = tempMatrix$1;
+    exports.tempBounds = tempBounds$2;
+    exports.tempMatrix = tempMatrix$2;
     exports.tempPoint = tempPoint$2;
     exports.tryToNumber = tryToNumber;
     exports.useCanvas = useCanvas;