leafer-ui 1.9.4 → 1.9.6

package/dist/web.cjs

@@ -95,10 +95,22 @@ class LeaferCanvas extends core.LeaferCanvasBase {
     updateViewSize() {
         const {width: width, height: height, pixelRatio: pixelRatio} = this;
         const {style: style} = this.view;
-        style.width = width + "px";
-        style.height = height + "px";
-        this.view.width = Math.ceil(width * pixelRatio);
-        this.view.height = Math.ceil(height * pixelRatio);
+        if (this.unreal) {
+            const {config: config, autoWidthStr: autoWidthStr, autoHeightStr: autoHeightStr} = this;
+            if (config.width) {
+                if (core.isUndefined(autoWidthStr)) this.autoWidthStr = style.width || "";
+                style.width = config.width + "px";
+            } else if (!core.isUndefined(autoWidthStr)) style.width = autoWidthStr;
+            if (config.height) {
+                if (core.isUndefined(autoHeightStr)) this.autoHeightStr = style.height || "";
+                style.height = config.height + "px";
+            } else if (!core.isUndefined(autoHeightStr)) style.height = autoHeightStr;
+        } else {
+            style.width = width + "px";
+            style.height = height + "px";
+            this.view.width = Math.ceil(width * pixelRatio);
+            this.view.height = Math.ceil(height * pixelRatio);
+        }
     }
     updateClientBounds() {
         if (this.view.parentElement) this.clientBounds = this.view.getBoundingClientRect();
@@ -107,6 +119,7 @@ class LeaferCanvas extends core.LeaferCanvasBase {
         this.resizeListener = listener;
         if (autoBounds) {
             this.autoBounds = autoBounds;
+            if (this.resizeObserver) return;
             try {
                 this.resizeObserver = new ResizeObserver(entries => {
                     this.updateClientBounds();
@@ -123,18 +136,10 @@ class LeaferCanvas extends core.LeaferCanvasBase {
             } catch (_a) {
                 this.imitateResizeObserver();
             }
+            this.stopListenPixelRatio();
         } else {
-            window.addEventListener("resize", this.windowListener = () => {
-                const pixelRatio = core.Platform.devicePixelRatio;
-                if (!this.config.pixelRatio && this.pixelRatio !== pixelRatio) {
-                    const {width: width, height: height} = this;
-                    this.emitResize({
-                        width: width,
-                        height: height,
-                        pixelRatio: pixelRatio
-                    });
-                }
-            });
+            this.listenPixelRatio();
+            if (this.unreal) this.updateViewSize();
         }
     }
     imitateResizeObserver() {
@@ -143,6 +148,25 @@ class LeaferCanvas extends core.LeaferCanvasBase {
             core.Platform.requestRender(this.imitateResizeObserver.bind(this));
         }
     }
+    listenPixelRatio() {
+        if (!this.windowListener) window.addEventListener("resize", this.windowListener = () => {
+            const pixelRatio = core.Platform.devicePixelRatio;
+            if (!this.config.pixelRatio && this.pixelRatio !== pixelRatio) {
+                const {width: width, height: height} = this;
+                this.emitResize({
+                    width: width,
+                    height: height,
+                    pixelRatio: pixelRatio
+                });
+            }
+        });
+    }
+    stopListenPixelRatio() {
+        if (this.windowListener) {
+            window.removeEventListener("resize", this.windowListener);
+            this.windowListener = null;
+        }
+    }
     checkAutoBounds(parentSize) {
         const view = this.view;
         const {x: x, y: y, width: width, height: height} = this.autoBounds.getBoundsFrom(parentSize);
@@ -180,10 +204,7 @@ class LeaferCanvas extends core.LeaferCanvasBase {
     destroy() {
         if (this.view) {
             this.stopAutoLayout();
-            if (this.windowListener) {
-                window.removeEventListener("resize", this.windowListener);
-                this.windowListener = null;
-            }
+            this.stopListenPixelRatio();
             if (!this.unreal) {
                 const view = this.view;
                 if (view.parentElement) view.remove();
@@ -612,7 +633,7 @@ class Renderer {
         this.times = 0;
         this.config = {
             usePartRender: true,
-            maxFPS: 60
+            maxFPS: 120
         };
         this.target = target;
         this.canvas = canvas;
@@ -767,11 +788,15 @@ class Renderer {
         if (this.requestTime || !target) return;
         if (target.parentApp) return target.parentApp.requestRender(false);
         const requestTime = this.requestTime = Date.now();
-        core.Platform.requestRender(() => {
-            this.FPS = Math.min(60, Math.ceil(1e3 / (Date.now() - requestTime)));
+        const render = () => {
+            const nowFPS = 1e3 / (Date.now() - requestTime);
+            const {maxFPS: maxFPS} = this.config;
+            if (maxFPS && nowFPS > maxFPS - .5) return core.Platform.requestRender(render);
+            this.FPS = Math.min(120, Math.ceil(nowFPS));
             this.requestTime = 0;
             this.checkRender();
-        });
+        };
+        core.Platform.requestRender(render);
     }
     __onResize(e) {
         if (this.canvas.unreal) return;
@@ -814,7 +839,8 @@ class Renderer {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = this.canvas = this.config = null;
+            this.config = {};
+            this.target = this.canvas = null;
         }
     }
 }
@@ -910,7 +936,7 @@ class Picker {
             item = path.list[i];
             if (!item.__.hittable) break;
             hittablePath.addAt(item, 0);
-            if (!item.__.hitChildren) break;
+            if (!item.__.hitChildren || item.isLeafer && item.mode === "draw") break;
         }
         return hittablePath;
     }
@@ -1016,10 +1042,10 @@ core.Platform.layout = Layouter.fullLayout;
 
 const PointerEventHelper = {
     convert(e, local) {
-        const base = core$1.InteractionHelper.getBase(e);
+        const base = core$1.InteractionHelper.getBase(e), {x: x, y: y} = local;
         const data = Object.assign(Object.assign({}, base), {
-            x: local.x,
-            y: local.y,
+            x: x,
+            y: y,
             width: e.width,
             height: e.height,
             pointerType: e.pointerType,
@@ -1034,10 +1060,10 @@ const PointerEventHelper = {
         return data;
     },
     convertMouse(e, local) {
-        const base = core$1.InteractionHelper.getBase(e);
+        const base = core$1.InteractionHelper.getBase(e), {x: x, y: y} = local;
         return Object.assign(Object.assign({}, base), {
-            x: local.x,
-            y: local.y,
+            x: x,
+            y: y,
             width: 1,
             height: 1,
             pointerType: "mouse",
@@ -1046,10 +1072,10 @@ const PointerEventHelper = {
     },
     convertTouch(e, local) {
         const touch = PointerEventHelper.getTouch(e);
-        const base = core$1.InteractionHelper.getBase(e);
+        const base = core$1.InteractionHelper.getBase(e), {x: x, y: y} = local;
         return Object.assign(Object.assign({}, base), {
-            x: local.x,
-            y: local.y,
+            x: x,
+            y: y,
             width: 1,
             height: 1,
             pointerType: "touch",
@@ -1964,7 +1990,7 @@ function ignoreRender(ui, value) {
 
 const {get: get$1, scale: scale, copy: copy$1} = core.MatrixHelper;
 
-const {floor: floor, max: max, abs: abs} = Math;
+const {floor: floor, ceil: ceil, max: max, abs: abs} = Math;
 
 function createPattern(ui, paint, pixelRatio) {
     let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
@@ -1974,8 +2000,6 @@ function createPattern(ui, paint, pixelRatio) {
         let imageScale, imageMatrix, {width: width, height: height, scaleX: sx, scaleY: sy, transform: transform, repeat: repeat, gap: gap} = data;
         scaleX *= pixelRatio;
         scaleY *= pixelRatio;
-        const xGap = gap && gap.x * scaleX;
-        const yGap = gap && gap.y * scaleY;
         if (sx) {
             sx = abs(sx);
             sy = abs(sy);
@@ -1992,7 +2016,10 @@ function createPattern(ui, paint, pixelRatio) {
             if (size > core.Platform.image.maxCacheSize) return false;
         }
         let maxSize = core.Platform.image.maxPatternSize;
-        if (!image.isSVG) {
+        if (image.isSVG) {
+            const ws = width / image.width;
+            if (ws > 1) imageScale = ws / ceil(ws);
+        } else {
             const imageSize = image.width * image.height;
             if (maxSize > imageSize) maxSize = imageSize;
         }
@@ -2007,18 +2034,20 @@ function createPattern(ui, paint, pixelRatio) {
             scaleX /= sx;
             scaleY /= sy;
         }
+        const xGap = gap && gap.x * scaleX;
+        const yGap = gap && gap.y * scaleY;
         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);
             if (!imageMatrix) {
                 imageMatrix = get$1();
                 if (transform) copy$1(imageMatrix, transform);
             }
             scale(imageMatrix, 1 / scaleX, 1 / scaleY);
         }
-        if (imageMatrix) {
-            const canvasWidth = width + (xGap || 0), canvasHeight = height + (yGap || 0);
-            scale(imageMatrix, canvasWidth / max(floor(canvasWidth), 1), canvasHeight / max(floor(canvasHeight), 1));
-        }
-        const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap);
+        const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth);
         const pattern = image.getPattern(canvas, repeat || (core.Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
         paint.style = pattern;
         paint.patternId = id;
@@ -2293,12 +2322,18 @@ function shadow(ui, current, shape) {
             }
             worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, "destination-out") : other.copyWorld(shape.canvas, shapeBounds, bounds, "destination-out");
         }
-        core.LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
+        if (draw.Effect.isTransformShadow(item)) draw.Effect.renderTransformShadow(ui, current, other, copyBounds, item); else core.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 drawWorldShadow(canvas, outBounds, spreadScale, shape) {
     const {bounds: bounds, shapeBounds: shapeBounds} = shape;
     if (core.Platform.fullImageShadow) {
@@ -2376,7 +2411,11 @@ const EffectModule = {
     shadow: shadow,
     innerShadow: innerShadow,
     blur: blur,
-    backgroundBlur: backgroundBlur
+    backgroundBlur: backgroundBlur,
+    getShadowSpread: getShadowSpread,
+    isTransformShadow(_shadow) {
+        return undefined;
+    }
 };
 
 const {excludeRenderBounds: excludeRenderBounds} = core.LeafBoundsHelper;
@@ -2884,16 +2923,17 @@ function toTextChar(row) {
 }
 
 function decorationText(drawData, style) {
-    let type;
+    let type, offset = 0;
     const {fontSize: fontSize, textDecoration: textDecoration} = style;
     drawData.decorationHeight = fontSize / 11;
     if (core.isObject(textDecoration)) {
         type = textDecoration.type;
         if (textDecoration.color) drawData.decorationColor = draw.ColorConvert.string(textDecoration.color);
+        if (textDecoration.offset) offset = Math.min(fontSize * .3, Math.max(textDecoration.offset, -fontSize * .15));
     } else type = textDecoration;
     switch (type) {
       case "under":
-        drawData.decorationY = [ fontSize * .15 ];
+        drawData.decorationY = [ fontSize * .15 + offset ];
         break;
 
       case "delete":
@@ -2901,7 +2941,7 @@ function decorationText(drawData, style) {
         break;
 
       case "under-delete":
-        drawData.decorationY = [ fontSize * .15, -fontSize * .35 ];
+        drawData.decorationY = [ fontSize * .15 + offset, -fontSize * .35 ];
     }
 }
 

package/dist/web.esm.js

@@ -1,4 +1,4 @@
-import { Debug, LeaferCanvasBase, Platform, isString, DataHelper, canvasSizeAttrs, isUndefined, ResizeEvent, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, isArray, LeafLevelList, LayoutEvent, Run, ImageManager, BoundsHelper, Plugin, MathHelper, isObject, Matrix, getMatrixData, MatrixHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4, isNumber } from "@leafer/core";
+import { Debug, LeaferCanvasBase, Platform, isString, isUndefined, DataHelper, canvasSizeAttrs, ResizeEvent, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, isArray, LeafLevelList, LayoutEvent, Run, ImageManager, BoundsHelper, Plugin, MathHelper, isObject, Matrix, getMatrixData, MatrixHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4, isNumber } from "@leafer/core";
 
 export * from "@leafer/core";
 
@@ -8,7 +8,7 @@ import { InteractionHelper, InteractionBase, Cursor, HitCanvasManager } from "@l
 
 export * from "@leafer-ui/core";
 
-import { PaintImage, Paint, ColorConvert, PaintGradient, Export, Group, TextConvert, Effect } from "@leafer-ui/draw";
+import { PaintImage, Paint, ColorConvert, PaintGradient, Export, Effect, Group, TextConvert } from "@leafer-ui/draw";
 
 const debug$2 = Debug.get("LeaferCanvas");
 
@@ -99,10 +99,22 @@ class LeaferCanvas extends LeaferCanvasBase {
     updateViewSize() {
         const {width: width, height: height, pixelRatio: pixelRatio} = this;
         const {style: style} = this.view;
-        style.width = width + "px";
-        style.height = height + "px";
-        this.view.width = Math.ceil(width * pixelRatio);
-        this.view.height = Math.ceil(height * pixelRatio);
+        if (this.unreal) {
+            const {config: config, autoWidthStr: autoWidthStr, autoHeightStr: autoHeightStr} = this;
+            if (config.width) {
+                if (isUndefined(autoWidthStr)) this.autoWidthStr = style.width || "";
+                style.width = config.width + "px";
+            } else if (!isUndefined(autoWidthStr)) style.width = autoWidthStr;
+            if (config.height) {
+                if (isUndefined(autoHeightStr)) this.autoHeightStr = style.height || "";
+                style.height = config.height + "px";
+            } else if (!isUndefined(autoHeightStr)) style.height = autoHeightStr;
+        } else {
+            style.width = width + "px";
+            style.height = height + "px";
+            this.view.width = Math.ceil(width * pixelRatio);
+            this.view.height = Math.ceil(height * pixelRatio);
+        }
     }
     updateClientBounds() {
         if (this.view.parentElement) this.clientBounds = this.view.getBoundingClientRect();
@@ -111,6 +123,7 @@ class LeaferCanvas extends LeaferCanvasBase {
         this.resizeListener = listener;
         if (autoBounds) {
             this.autoBounds = autoBounds;
+            if (this.resizeObserver) return;
             try {
                 this.resizeObserver = new ResizeObserver(entries => {
                     this.updateClientBounds();
@@ -127,18 +140,10 @@ class LeaferCanvas extends LeaferCanvasBase {
             } catch (_a) {
                 this.imitateResizeObserver();
             }
+            this.stopListenPixelRatio();
         } else {
-            window.addEventListener("resize", this.windowListener = () => {
-                const pixelRatio = Platform.devicePixelRatio;
-                if (!this.config.pixelRatio && this.pixelRatio !== pixelRatio) {
-                    const {width: width, height: height} = this;
-                    this.emitResize({
-                        width: width,
-                        height: height,
-                        pixelRatio: pixelRatio
-                    });
-                }
-            });
+            this.listenPixelRatio();
+            if (this.unreal) this.updateViewSize();
         }
     }
     imitateResizeObserver() {
@@ -147,6 +152,25 @@ class LeaferCanvas extends LeaferCanvasBase {
             Platform.requestRender(this.imitateResizeObserver.bind(this));
         }
     }
+    listenPixelRatio() {
+        if (!this.windowListener) window.addEventListener("resize", this.windowListener = () => {
+            const pixelRatio = Platform.devicePixelRatio;
+            if (!this.config.pixelRatio && this.pixelRatio !== pixelRatio) {
+                const {width: width, height: height} = this;
+                this.emitResize({
+                    width: width,
+                    height: height,
+                    pixelRatio: pixelRatio
+                });
+            }
+        });
+    }
+    stopListenPixelRatio() {
+        if (this.windowListener) {
+            window.removeEventListener("resize", this.windowListener);
+            this.windowListener = null;
+        }
+    }
     checkAutoBounds(parentSize) {
         const view = this.view;
         const {x: x, y: y, width: width, height: height} = this.autoBounds.getBoundsFrom(parentSize);
@@ -184,10 +208,7 @@ class LeaferCanvas extends LeaferCanvasBase {
     destroy() {
         if (this.view) {
             this.stopAutoLayout();
-            if (this.windowListener) {
-                window.removeEventListener("resize", this.windowListener);
-                this.windowListener = null;
-            }
+            this.stopListenPixelRatio();
             if (!this.unreal) {
                 const view = this.view;
                 if (view.parentElement) view.remove();
@@ -616,7 +637,7 @@ class Renderer {
         this.times = 0;
         this.config = {
             usePartRender: true,
-            maxFPS: 60
+            maxFPS: 120
         };
         this.target = target;
         this.canvas = canvas;
@@ -771,11 +792,15 @@ class Renderer {
         if (this.requestTime || !target) return;
         if (target.parentApp) return target.parentApp.requestRender(false);
         const requestTime = this.requestTime = Date.now();
-        Platform.requestRender(() => {
-            this.FPS = Math.min(60, Math.ceil(1e3 / (Date.now() - requestTime)));
+        const render = () => {
+            const nowFPS = 1e3 / (Date.now() - requestTime);
+            const {maxFPS: maxFPS} = this.config;
+            if (maxFPS && nowFPS > maxFPS - .5) return Platform.requestRender(render);
+            this.FPS = Math.min(120, Math.ceil(nowFPS));
             this.requestTime = 0;
             this.checkRender();
-        });
+        };
+        Platform.requestRender(render);
     }
     __onResize(e) {
         if (this.canvas.unreal) return;
@@ -818,7 +843,8 @@ class Renderer {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = this.canvas = this.config = null;
+            this.config = {};
+            this.target = this.canvas = null;
         }
     }
 }
@@ -914,7 +940,7 @@ class Picker {
             item = path.list[i];
             if (!item.__.hittable) break;
             hittablePath.addAt(item, 0);
-            if (!item.__.hitChildren) break;
+            if (!item.__.hitChildren || item.isLeafer && item.mode === "draw") break;
         }
         return hittablePath;
     }
@@ -1020,10 +1046,10 @@ Platform.layout = Layouter.fullLayout;
 
 const PointerEventHelper = {
     convert(e, local) {
-        const base = InteractionHelper.getBase(e);
+        const base = InteractionHelper.getBase(e), {x: x, y: y} = local;
         const data = Object.assign(Object.assign({}, base), {
-            x: local.x,
-            y: local.y,
+            x: x,
+            y: y,
             width: e.width,
             height: e.height,
             pointerType: e.pointerType,
@@ -1038,10 +1064,10 @@ const PointerEventHelper = {
         return data;
     },
     convertMouse(e, local) {
-        const base = InteractionHelper.getBase(e);
+        const base = InteractionHelper.getBase(e), {x: x, y: y} = local;
         return Object.assign(Object.assign({}, base), {
-            x: local.x,
-            y: local.y,
+            x: x,
+            y: y,
             width: 1,
             height: 1,
             pointerType: "mouse",
@@ -1050,10 +1076,10 @@ const PointerEventHelper = {
     },
     convertTouch(e, local) {
         const touch = PointerEventHelper.getTouch(e);
-        const base = InteractionHelper.getBase(e);
+        const base = InteractionHelper.getBase(e), {x: x, y: y} = local;
         return Object.assign(Object.assign({}, base), {
-            x: local.x,
-            y: local.y,
+            x: x,
+            y: y,
             width: 1,
             height: 1,
             pointerType: "touch",
@@ -1968,7 +1994,7 @@ function ignoreRender(ui, value) {
 
 const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
 
-const {floor: floor, max: max, abs: abs} = Math;
+const {floor: floor, ceil: ceil, max: max, abs: abs} = Math;
 
 function createPattern(ui, paint, pixelRatio) {
     let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
@@ -1978,8 +2004,6 @@ function createPattern(ui, paint, pixelRatio) {
         let imageScale, imageMatrix, {width: width, height: height, scaleX: sx, scaleY: sy, transform: transform, repeat: repeat, gap: gap} = data;
         scaleX *= pixelRatio;
         scaleY *= pixelRatio;
-        const xGap = gap && gap.x * scaleX;
-        const yGap = gap && gap.y * scaleY;
         if (sx) {
             sx = abs(sx);
             sy = abs(sy);
@@ -1996,7 +2020,10 @@ function createPattern(ui, paint, pixelRatio) {
             if (size > Platform.image.maxCacheSize) return false;
         }
         let maxSize = Platform.image.maxPatternSize;
-        if (!image.isSVG) {
+        if (image.isSVG) {
+            const ws = width / image.width;
+            if (ws > 1) imageScale = ws / ceil(ws);
+        } else {
             const imageSize = image.width * image.height;
             if (maxSize > imageSize) maxSize = imageSize;
         }
@@ -2011,18 +2038,20 @@ function createPattern(ui, paint, pixelRatio) {
             scaleX /= sx;
             scaleY /= sy;
         }
+        const xGap = gap && gap.x * scaleX;
+        const yGap = gap && gap.y * scaleY;
         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);
             if (!imageMatrix) {
                 imageMatrix = get$1();
                 if (transform) copy$1(imageMatrix, transform);
             }
             scale(imageMatrix, 1 / scaleX, 1 / scaleY);
         }
-        if (imageMatrix) {
-            const canvasWidth = width + (xGap || 0), canvasHeight = height + (yGap || 0);
-            scale(imageMatrix, canvasWidth / max(floor(canvasWidth), 1), canvasHeight / max(floor(canvasHeight), 1));
-        }
-        const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap);
+        const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth);
         const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
         paint.style = pattern;
         paint.patternId = id;
@@ -2297,12 +2326,18 @@ function shadow(ui, current, shape) {
             }
             worldCanvas ? other.copyWorld(worldCanvas, nowWorld, nowWorld, "destination-out") : other.copyWorld(shape.canvas, shapeBounds, bounds, "destination-out");
         }
-        LeafHelper.copyCanvasByWorld(ui, current, other, copyBounds, item.blendMode);
+        if (Effect.isTransformShadow(item)) Effect.renderTransformShadow(ui, current, other, copyBounds, item); else 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 drawWorldShadow(canvas, outBounds, spreadScale, shape) {
     const {bounds: bounds, shapeBounds: shapeBounds} = shape;
     if (Platform.fullImageShadow) {
@@ -2380,7 +2415,11 @@ const EffectModule = {
     shadow: shadow,
     innerShadow: innerShadow,
     blur: blur,
-    backgroundBlur: backgroundBlur
+    backgroundBlur: backgroundBlur,
+    getShadowSpread: getShadowSpread,
+    isTransformShadow(_shadow) {
+        return undefined;
+    }
 };
 
 const {excludeRenderBounds: excludeRenderBounds} = LeafBoundsHelper;
@@ -2888,16 +2927,17 @@ function toTextChar(row) {
 }
 
 function decorationText(drawData, style) {
-    let type;
+    let type, offset = 0;
     const {fontSize: fontSize, textDecoration: textDecoration} = style;
     drawData.decorationHeight = fontSize / 11;
     if (isObject(textDecoration)) {
         type = textDecoration.type;
         if (textDecoration.color) drawData.decorationColor = ColorConvert.string(textDecoration.color);
+        if (textDecoration.offset) offset = Math.min(fontSize * .3, Math.max(textDecoration.offset, -fontSize * .15));
     } else type = textDecoration;
     switch (type) {
       case "under":
-        drawData.decorationY = [ fontSize * .15 ];
+        drawData.decorationY = [ fontSize * .15 + offset ];
         break;
 
       case "delete":
@@ -2905,7 +2945,7 @@ function decorationText(drawData, style) {
         break;
 
       case "under-delete":
-        drawData.decorationY = [ fontSize * .15, -fontSize * .35 ];
+        drawData.decorationY = [ fontSize * .15 + offset, -fontSize * .35 ];
     }
 }