leafer-draw 1.9.4 → 1.9.6

package/dist/web.cjs

@@ -93,10 +93,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();
@@ -105,6 +117,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();
@@ -121,18 +134,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() {
@@ -141,6 +146,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);
@@ -178,10 +202,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();
@@ -610,7 +631,7 @@ class Renderer {
         this.times = 0;
         this.config = {
             usePartRender: true,
-            maxFPS: 60
+            maxFPS: 120
         };
         this.target = target;
         this.canvas = canvas;
@@ -765,11 +786,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;
@@ -812,7 +837,8 @@ class Renderer {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = this.canvas = this.config = null;
+            this.config = {};
+            this.target = this.canvas = null;
         }
     }
 }
@@ -1451,7 +1477,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);
@@ -1461,8 +1487,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);
@@ -1479,7 +1503,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;
         }
@@ -1494,18 +1521,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;
@@ -1780,12 +1809,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) {
@@ -1863,7 +1898,11 @@ const EffectModule = {
     shadow: shadow,
     innerShadow: innerShadow,
     blur: blur,
-    backgroundBlur: backgroundBlur
+    backgroundBlur: backgroundBlur,
+    getShadowSpread: getShadowSpread,
+    isTransformShadow(_shadow) {
+        return undefined;
+    }
 };
 
 const {excludeRenderBounds: excludeRenderBounds} = core.LeafBoundsHelper;
@@ -2371,16 +2410,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":
@@ -2388,7 +2428,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,10 +1,10 @@
-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, isObject, BoundsHelper, Matrix, getMatrixData, MatrixHelper, MathHelper, 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, isObject, BoundsHelper, Matrix, getMatrixData, MatrixHelper, MathHelper, AlignHelper, PointHelper, ImageEvent, AroundHelper, Direction4, isNumber } from "@leafer/core";
 
 export * from "@leafer/core";
 
 export { LeaferImage } from "@leafer/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";
 
 export * from "@leafer-ui/draw";
 
@@ -97,10 +97,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();
@@ -109,6 +121,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();
@@ -125,18 +138,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() {
@@ -145,6 +150,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);
@@ -182,10 +206,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();
@@ -614,7 +635,7 @@ class Renderer {
         this.times = 0;
         this.config = {
             usePartRender: true,
-            maxFPS: 60
+            maxFPS: 120
         };
         this.target = target;
         this.canvas = canvas;
@@ -769,11 +790,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;
@@ -816,7 +841,8 @@ class Renderer {
         if (this.target) {
             this.stop();
             this.__removeListenEvents();
-            this.target = this.canvas = this.config = null;
+            this.config = {};
+            this.target = this.canvas = null;
         }
     }
 }
@@ -1455,7 +1481,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);
@@ -1465,8 +1491,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);
@@ -1483,7 +1507,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;
         }
@@ -1498,18 +1525,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;
@@ -1784,12 +1813,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) {
@@ -1867,7 +1902,11 @@ const EffectModule = {
     shadow: shadow,
     innerShadow: innerShadow,
     blur: blur,
-    backgroundBlur: backgroundBlur
+    backgroundBlur: backgroundBlur,
+    getShadowSpread: getShadowSpread,
+    isTransformShadow(_shadow) {
+        return undefined;
+    }
 };
 
 const {excludeRenderBounds: excludeRenderBounds} = LeafBoundsHelper;
@@ -2375,16 +2414,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":
@@ -2392,7 +2432,7 @@ function decorationText(drawData, style) {
         break;
 
       case "under-delete":
-        drawData.decorationY = [ fontSize * .15, -fontSize * .35 ];
+        drawData.decorationY = [ fontSize * .15 + offset, -fontSize * .35 ];
     }
 }