leafer-ui 1.9.6 → 1.9.8

package/dist/web.module.js

@@ -247,18 +247,34 @@ class LeafData {
     }
 }
 
-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;
     },
-    fourNumber(num, maxValue) {
+    setTemp(top, right, bottom, left) {
+        return set$1(tempFour, top, right, bottom, left);
+    },
+    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 ];
@@ -281,9 +297,39 @@ const MathHelper = {
             }
         }
         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) {
@@ -423,6 +469,15 @@ const MatrixHelper = {
         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);
@@ -922,6 +977,10 @@ class Matrix {
         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;
@@ -1001,7 +1060,7 @@ class Matrix {
     }
 }
 
-const tempMatrix$1 = new Matrix;
+const tempMatrix$2 = new Matrix;
 
 const TwoPointBoundsHelper = {
     tempPointBounds: {},
@@ -1151,10 +1210,10 @@ 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;
@@ -1205,19 +1264,11 @@ const BoundsHelper = {
         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) {
@@ -1231,9 +1282,9 @@ const BoundsHelper = {
         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);
@@ -1291,9 +1342,9 @@ const BoundsHelper = {
     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 = {};
@@ -1363,7 +1414,7 @@ const BoundsHelper = {
                     first = false;
                     if (!addMode) copy$9(t, bounds);
                 } else {
-                    add$1(t, bounds);
+                    add$2(t, bounds);
                 }
             }
         }
@@ -1377,7 +1428,7 @@ const BoundsHelper = {
         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;
@@ -1448,7 +1499,7 @@ const BoundsHelper = {
 
 const B = BoundsHelper;
 
-const {add: add$1, copy: copy$9} = B;
+const {add: add$2, copy: copy$9} = B;
 
 class Bounds {
     get minX() {
@@ -1593,7 +1644,7 @@ class Bounds {
     }
 }
 
-const tempBounds$1 = new Bounds;
+const tempBounds$2 = new Bounds;
 
 class AutoBounds {
     constructor(top, right, bottom, left, width, height) {
@@ -2146,7 +2197,7 @@ __decorate([ contextMethod() ], Canvas$1.prototype, "measureText", null);
 
 __decorate([ contextMethod() ], Canvas$1.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,
@@ -2247,13 +2298,8 @@ class LeaferCanvasBase extends Canvas$1 {
     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);
         }
@@ -3977,7 +4023,7 @@ 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() {
@@ -4066,7 +4112,7 @@ class LeaferImage {
             }
             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;
@@ -4265,6 +4311,18 @@ function surfaceType(defaultValue) {
     }));
 }
 
+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) {
@@ -4309,7 +4367,7 @@ function sortType(defaultValue) {
     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();
                 });
@@ -4346,7 +4404,7 @@ function hitType(defaultValue) {
         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();
             }
         }
@@ -4848,7 +4906,7 @@ const WaitHelper = {
 
 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";
 
@@ -4871,7 +4929,7 @@ class LeafLayout {
         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() {
@@ -4881,15 +4939,15 @@ class LeafLayout {
         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() {
@@ -5741,14 +5799,14 @@ const {updateMatrix: updateMatrix$1, updateAllMatrix: updateAllMatrix$2} = LeafH
 
 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);
@@ -5804,13 +5862,13 @@ const LeafBounds = {
     __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;
@@ -5848,11 +5906,11 @@ const LeafBounds = {
     },
     __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);
     }
 };
 
@@ -5861,6 +5919,7 @@ const LeafRender = {
         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) {
@@ -5909,7 +5968,9 @@ const BranchRender = {
         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);
@@ -5947,11 +6008,13 @@ 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 {toOuterOf: toOuterOf$1} = BoundsHelper;
 
-const {copy: copy$3, move: move} = PointHelper;
+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;
 
@@ -6227,8 +6290,9 @@ let Leaf = class Leaf {
             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;
@@ -6262,7 +6326,7 @@ let Leaf = class Leaf {
     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) {
@@ -6295,7 +6359,7 @@ let Leaf = class Leaf {
     }
     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) {
@@ -6305,7 +6369,7 @@ let Leaf = class Leaf {
     }
     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) {
@@ -6751,7 +6815,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.9.6";
+const version = "1.9.8";
 
 const debug$5 = Debug.get("LeaferCanvas");
 
@@ -6786,7 +6850,7 @@ class LeaferCanvas extends LeaferCanvasBase {
         }
         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);
@@ -7382,6 +7446,7 @@ class Renderer {
             usePartRender: true,
             maxFPS: 120
         };
+        this.frames = [];
         this.target = target;
         this.canvas = canvas;
         if (userConfig) this.config = DataHelper.default(userConfig, this.config);
@@ -7511,7 +7576,7 @@ class Renderer {
         };
         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);
@@ -7534,12 +7599,15 @@ class Renderer {
         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();
         };
@@ -7787,6 +7855,15 @@ Object.assign(Creator, {
 
 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) {
@@ -8186,39 +8263,41 @@ class CanvasData extends RectData {
     }
 }
 
+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;
     }
 };
 
@@ -8562,9 +8641,9 @@ __decorate([ visibleType(true) ], UI.prototype, "visible", void 0);
 
 __decorate([ surfaceType(false) ], UI.prototype, "locked", void 0);
 
-__decorate([ surfaceType(false) ], UI.prototype, "dim", void 0);
+__decorate([ dimType(false) ], UI.prototype, "dim", void 0);
 
-__decorate([ surfaceType(false) ], UI.prototype, "dimskip", void 0);
+__decorate([ dimType(false) ], UI.prototype, "dimskip", void 0);
 
 __decorate([ sortType(0) ], UI.prototype, "zIndex", void 0);
 
@@ -9529,7 +9608,7 @@ __decorate([ resizeType() ], Canvas.prototype, "contextSettings", void 0);
 
 Canvas = __decorate([ registerUI() ], Canvas);
 
-const {copyAndSpread: copyAndSpread, includes: includes, spread: spread, setList: setList} = BoundsHelper;
+const {copyAndSpread: copyAndSpread$1, includes: includes, spread: spread, setList: setList} = BoundsHelper;
 
 let Text = class Text extends UI {
     get __tag() {
@@ -9576,13 +9655,13 @@ let Text = class Text extends UI {
         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() {
@@ -10008,9 +10087,9 @@ let DragEvent$1 = class DragEvent extends PointerEvent$1 {
     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;
@@ -11040,8 +11119,8 @@ ui$1.__updateHitCanvas = function() {
     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,
@@ -11138,8 +11217,8 @@ canvas.hitStroke = function(point, strokeWidth) {
 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;
     }
@@ -11667,24 +11746,29 @@ function drawOutside(stroke, ui, canvas) {
     }
 }
 
-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;
@@ -11694,8 +11778,10 @@ function shape(ui, current, options) {
             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);
@@ -11714,6 +11800,7 @@ function shape(ui, current, options) {
         matrix: matrix,
         fitMatrix: fitMatrix,
         bounds: bounds,
+        renderBounds: renderBounds,
         worldCanvas: worldCanvas,
         shapeBounds: shapeBounds,
         scaleX: scaleX,
@@ -11817,7 +11904,7 @@ const PaintModule = {
     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;
 
@@ -11832,12 +11919,12 @@ function fillOrFitMode(data, box, x, y, scaleX, scaleY, 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;
 }
@@ -11938,7 +12025,12 @@ function getPatternData(paint, box, image) {
 
       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":
@@ -12096,7 +12188,7 @@ function ignoreRender(ui, 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);
@@ -12145,8 +12237,8 @@ function createPattern(ui, paint, pixelRatio) {
         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);
@@ -12172,17 +12264,15 @@ function checkImage(ui, canvas, paint, allowDraw) {
         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) {
@@ -12362,20 +12452,20 @@ const PaintGradientModule = {
     getTransform: getTransform
 };
 
-const {copy: copy, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper;
+const {copy: copy, move: move, toOffsetOutBounds: toOffsetOutBounds$1} = BoundsHelper, {max: max} = Math;
 
-const tempBounds = {};
+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) {
@@ -12383,54 +12473,61 @@ function shadow(ui, current, shape) {
             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;
@@ -12438,13 +12535,13 @@ 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) {
@@ -12453,16 +12550,17 @@ function innerShadow(ui, current, shape) {
         }
         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);
@@ -12471,6 +12569,8 @@ function innerShadow(ui, current, shape) {
     other.recycle(copyBounds);
 }
 
+const getInnerShadowSpread = getShadowRenderSpread;
+
 function blur(ui, current, origin) {
     const {blur: blur} = ui.__;
     origin.setWorldBlur(blur * ui.__nowWorld.a);
@@ -12485,10 +12585,12 @@ const EffectModule = {
     innerShadow: innerShadow,
     blur: blur,
     backgroundBlur: backgroundBlur,
-    getShadowSpread: getShadowSpread,
+    getShadowRenderSpread: getShadowRenderSpread,
+    getShadowTransform: getShadowTransform,
     isTransformShadow(_shadow) {
         return undefined;
-    }
+    },
+    getInnerShadowSpread: getInnerShadowSpread
 };
 
 const {excludeRenderBounds: excludeRenderBounds} = LeafBoundsHelper;
@@ -12505,6 +12607,7 @@ Group.prototype.__renderMask = function(canvas, options) {
                 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") {
@@ -12522,7 +12625,6 @@ Group.prototype.__renderMask = function(canvas, options) {
                 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;
@@ -13118,4 +13220,4 @@ Object.assign(Creator, {
 
 useCanvas();
 
-export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, scrollType, sortType, strokeType, surfaceType, tempBounds$1 as tempBounds, tempMatrix$1 as tempMatrix, tempPoint$2 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };
+export { AlignHelper, Answer, App, AroundHelper, AutoBounds, BezierHelper, Bounds, BoundsEvent, BoundsHelper, Box, BoxData, Branch, BranchHelper, BranchRender, Canvas, CanvasData, CanvasManager, ChildEvent, ColorConvert, Creator, Cursor, DataHelper, Debug, Direction4, Direction9, DragBoundsHelper, DragEvent$1 as DragEvent, Dragger, DropEvent, Effect, Ellipse, EllipseData, EllipseHelper, Event, EventCreator, Eventer, Export, FileHelper, Filter, FourNumberHelper, Frame, FrameData, Group, GroupData, HitCanvasManager, Image$1 as Image, ImageData, ImageEvent, ImageManager, IncrementId, Interaction, InteractionBase, InteractionHelper, KeyEvent, Keyboard, LayoutEvent, Layouter, Leaf, LeafBounds, LeafBoundsHelper, LeafData, LeafDataProxy, LeafEventer, LeafHelper, LeafLayout, LeafLevelList, LeafList, LeafMatrix, LeafRender, Leafer, LeaferCanvas, LeaferCanvasBase, LeaferData, LeaferEvent, LeaferImage, Line, LineData, MathHelper, Matrix, MatrixHelper, MoveEvent, MyDragEvent, MyImage, MyPointerEvent, NeedConvertToCanvasCommandMap, OneRadian, PI2, PI_2, Paint, PaintGradient, PaintImage, Path, PathArrow, PathBounds, PathCommandDataHelper, PathCommandMap, PathConvert, PathCorner, PathCreator, PathData, PathDrawer, PathHelper, PathNumberCommandLengthMap, PathNumberCommandMap, Pen, PenData, Picker, Platform, Plugin, Point, PointHelper, PointerButton, PointerEvent$1 as PointerEvent, Polygon, PolygonData, PropertyEvent, Rect, RectData, RectHelper, RectRender, RenderEvent, Renderer, ResizeEvent, Resource, RotateEvent, Run, Selector, Star, StarData, State, StringNumberMap, SwipeEvent, TaskItem, TaskProcessor, Text, TextConvert, TextData, Transition, TwoPointBoundsHelper, UI, UIBounds, UICreator, UIData, UIEvent, UIRender, UnitConvert, WaitHelper, WatchEvent, Watcher, ZoomEvent, affectRenderBoundsType, affectStrokeBoundsType, attr, autoLayoutType, boundsType, canvasPatch, canvasSizeAttrs, createAttr, createDescriptor, cursorType, dataProcessor, dataType, decorateLeafAttr, defineDataProcessor, defineKey, defineLeafAttr, dimType, doBoundsType, doStrokeType, effectType, emptyData, eraserType, extraPropertyEventMap, getBoundsData, getDescriptor, getMatrixData, getPointData, hitType, isArray, isData, isEmptyData, isFinite, isNull, isNumber, isObject, isString, isUndefined, layoutProcessor, leaferTransformAttrMap, maskType, naturalBoundsType, opacityType, path, pathInputType, pathType, pen, positionType, registerUI, registerUIEvent, resizeType, rewrite, rewriteAble, rotationType, scaleType, scrollType, sortType, strokeType, surfaceType, tempBounds$2 as tempBounds, tempMatrix$2 as tempMatrix, tempPoint$2 as tempPoint, tryToNumber, useCanvas, useModule, version, visibleType, zoomLayerType };