@nmmty/lazycanvas 0.5.3 → 0.6.0-dev.321c2e

package/dist/utils/utils.js

@@ -13,7 +13,7 @@ exports.generateID = generateID;
 let percentReg = /^(\d+)%$/;
 let pxReg = /^(\d+)px$/;
 let canvasReg = /^(vw|vh|vmin|vmax)$/;
-let linkReg = /^(link-w|link-h|link-x|link-y)-([A-Za-z0-9_]+)-(\d+)$/;
+let linkReg = /^(link-w|link-h|link-x|link-y)-([A-Za-z0-9_]+)-(\d+(.\d+)?)$/;
 let hexReg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 let rgbReg = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
 let rgbaReg = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(0|0?\.\d+|1(\.0)?)\)$/;
@@ -24,113 +24,79 @@ function isColor(v) {
 }
 exports.isColor = isColor;
 function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options = { vertical: false, layer: false }, manager) {
-    if (typeof v === 'number') {
+    if (typeof v === 'number')
         return v;
-    }
-    else if (typeof v === 'string') {
+    if (typeof v === 'string') {
         if (percentReg.test(v)) {
-            console.log(options, layer, canvas.width, canvas.height, parseFloat(v));
-            return (parseFloat(v) / 100) * (options.layer ? (options.vertical ? layer.height : layer.width) : (options.vertical ? canvas.height : canvas.width));
+            const base = options.layer
+                ? options.vertical ? layer.height : layer.width
+                : options.vertical ? canvas.height : canvas.width;
+            return (parseFloat(v) / 100) * base;
         }
-        else if (pxReg.test(v)) {
+        if (pxReg.test(v))
             return parseFloat(v);
-        }
-        else if (canvasReg.test(v)) {
-            if (v === 'vw') {
-                return (options.layer ? layer.width : canvas.width);
-            }
-            else if (v === 'vh') {
-                return (options.layer ? layer.height : canvas.height);
-            }
-            else if (v === 'vmin') {
-                return (options.layer ? Math.max(layer.width, layer.height) : Math.min(canvas.width, canvas.height));
-            }
-            else if (v === 'vmax') {
-                return (options.layer ? Math.max(layer.width, layer.height) : Math.max(canvas.width, canvas.height));
+        if (canvasReg.test(v)) {
+            const base = options.layer ? layer : canvas;
+            switch (v) {
+                case 'vw': return base.width;
+                case 'vh': return base.height;
+                case 'vmin': return Math.min(base.width, base.height);
+                case 'vmax': return Math.max(base.width, base.height);
             }
         }
-        else if (linkReg.test(v)) {
-            let match = v.match(linkReg);
+        if (linkReg.test(v)) {
+            const match = v.match(linkReg);
             if (!manager)
                 return 0;
-            let anyLayer = manager.get(match[2], true);
+            const anyLayer = manager.get(match[2], true);
             if (!anyLayer || anyLayer instanceof components_1.Group || anyLayer instanceof components_1.Path2DLayer)
                 return 0;
-            const parcer = parser(ctx, canvas, manager);
+            const parserInstance = parser(ctx, canvas, manager);
+            const additionalSpacing = parseInt(match[3]) || 0;
             switch (match[1]) {
-                case 'link-w':
-                    if (anyLayer instanceof components_1.LineLayer || anyLayer instanceof components_1.BezierLayer || anyLayer instanceof components_1.QuadraticLayer) {
-                        return anyLayer.getBoundingBox(ctx, canvas, manager).width + (parseInt(match[3]) || 0);
-                    }
-                    else if (anyLayer instanceof components_1.TextLayer) {
-                        return anyLayer.measureText(ctx, canvas).width + (parseInt(match[3]) || 0);
-                    }
-                    else {
-                        return (parcer.parse(anyLayer.props.size.width) || 0) + (parseInt(match[3]) || 0);
-                    }
-                case 'link-h':
-                    if (anyLayer instanceof components_1.LineLayer || anyLayer instanceof components_1.BezierLayer || anyLayer instanceof components_1.QuadraticLayer) {
-                        return anyLayer.getBoundingBox(ctx, canvas, manager).height + (parseInt(match[3]) || 0);
-                    }
-                    else if (anyLayer instanceof components_1.TextLayer) {
-                        return anyLayer.measureText(ctx, canvas).height + (parseInt(match[3]) || 0);
-                    }
-                    else {
-                        return (parcer.parse(anyLayer.props.size.height, LazyUtil_1.defaultArg.wh(parcer.parse(anyLayer.props.size.width)), LazyUtil_1.defaultArg.vl(true)) || 0) + (parseInt(match[3]) || 0);
-                    }
-                case 'link-x':
-                    return (parcer.parse(anyLayer.props.x) || 0) + (parseInt(match[3]) || 0);
-                case 'link-y':
-                    return (parcer.parse(anyLayer.props.y, LazyUtil_1.defaultArg.wh(), LazyUtil_1.defaultArg.vl(true)) || 0) + (parseInt(match[3]) || 0);
+                case 'link-w': return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+                case 'link-h': return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+                case 'link-x': return parserInstance.parse(anyLayer.props.x) + additionalSpacing;
+                case 'link-y': return parserInstance.parse(anyLayer.props.y) + additionalSpacing;
             }
         }
     }
-    else if (v instanceof helpers_1.Link) {
+    if (v instanceof helpers_1.Link) {
         if (!manager)
             return 0;
-        let anyLayer = manager.get(v.source, true);
+        const anyLayer = manager.get(v.source, true);
         if (!anyLayer || anyLayer instanceof components_1.Group || anyLayer instanceof components_1.Path2DLayer)
             return 0;
-        const parcer = parser(ctx, canvas, manager);
+        const parserInstance = parser(ctx, canvas, manager);
+        const additionalSpacing = parserInstance.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0;
         switch (v.type) {
-            case types_1.LinkType.Width:
-            case 'width':
-                if (anyLayer instanceof components_1.LineLayer || anyLayer instanceof components_1.BezierLayer || anyLayer instanceof components_1.QuadraticLayer) {
-                    return anyLayer.getBoundingBox(ctx, canvas, manager).width + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
-                }
-                else if (anyLayer instanceof components_1.TextLayer) {
-                    return anyLayer.measureText(ctx, canvas).width + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
-                }
-                else {
-                    return (parcer.parse(anyLayer.props.size.width) || 0) + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
-                }
-            case types_1.LinkType.Height:
-            case 'height':
-                if (anyLayer instanceof components_1.LineLayer || anyLayer instanceof components_1.BezierLayer || anyLayer instanceof components_1.QuadraticLayer) {
-                    return anyLayer.getBoundingBox(ctx, canvas, manager).height + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
-                }
-                else if (anyLayer instanceof components_1.TextLayer) {
-                    return anyLayer.measureText(ctx, canvas).height + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
-                }
-                else {
-                    return (parcer.parse(anyLayer.props.size.height, LazyUtil_1.defaultArg.wh(parcer.parse(anyLayer.props.size.width)), LazyUtil_1.defaultArg.vl(true)) || 0) + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
-                }
-            case types_1.LinkType.X:
-            case 'x':
-                return (parcer.parse(anyLayer.props.x) || 0) + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
-            case types_1.LinkType.Y:
-            case 'y':
-                return (parcer.parse(anyLayer.props.y) || 0) + (parcer.parse(v.additionalSpacing, LazyUtil_1.defaultArg.wh(layer.width, layer.height), LazyUtil_1.defaultArg.vl(options.vertical, options.layer)) || 0);
-            default:
-                return 0;
+            case types_1.LinkType.Width: return getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+            case types_1.LinkType.Height: return getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) + additionalSpacing;
+            case types_1.LinkType.X: return parserInstance.parse(anyLayer.props.x) + additionalSpacing;
+            case types_1.LinkType.Y: return parserInstance.parse(anyLayer.props.y) + additionalSpacing;
         }
     }
-    else {
-        return 0;
-    }
     return 0;
 }
 exports.parseToNormal = parseToNormal;
+function getLayerWidth(anyLayer, ctx, canvas, manager, parserInstance) {
+    if (anyLayer instanceof components_1.LineLayer || anyLayer instanceof components_1.BezierLayer || anyLayer instanceof components_1.QuadraticLayer) {
+        return anyLayer.getBoundingBox(ctx, canvas, manager).width;
+    }
+    if (anyLayer instanceof components_1.TextLayer) {
+        return anyLayer.measureText(ctx, canvas).width;
+    }
+    return anyLayer instanceof components_1.Path2DLayer ? 0 : parserInstance.parse(anyLayer.props.size.width) || 0;
+}
+function getLayerHeight(anyLayer, ctx, canvas, manager, parserInstance) {
+    if (anyLayer instanceof components_1.LineLayer || anyLayer instanceof components_1.BezierLayer || anyLayer instanceof components_1.QuadraticLayer) {
+        return anyLayer.getBoundingBox(ctx, canvas, manager).height;
+    }
+    if (anyLayer instanceof components_1.TextLayer) {
+        return anyLayer.measureText(ctx, canvas).height;
+    }
+    return anyLayer instanceof components_1.Path2DLayer ? 0 : parserInstance.parse(anyLayer.props.size.height) || 0;
+}
 function parser(ctx, canvas, manager) {
     return {
         parse(v, layer = LazyUtil_1.defaultArg.wh(), options = LazyUtil_1.defaultArg.vl()) {
@@ -156,7 +122,7 @@ function drawShadow(ctx, shadow) {
     }
 }
 exports.drawShadow = drawShadow;
-function opacity(ctx, opacity) {
+function opacity(ctx, opacity = 1) {
     if (opacity < 1) {
         ctx.globalAlpha = opacity;
     }
@@ -168,13 +134,13 @@ function filters(ctx, filters) {
     }
 }
 exports.filters = filters;
-function parseFillStyle(ctx, color) {
+function parseFillStyle(ctx, color, opts) {
     if (!ctx)
         throw new LazyUtil_1.LazyError('The context is not defined');
     if (!color)
         throw new LazyUtil_1.LazyError('The color is not defined');
     if (color instanceof helpers_1.Gradient || color instanceof helpers_1.Pattern) {
-        return color.draw(ctx);
+        return color.draw(ctx, opts);
     }
     return color;
 }
@@ -266,6 +232,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
                     x -= width / 2;
+                    y -= height;
                     break;
             }
             return { x, y };
@@ -292,9 +259,6 @@ function centring(centring, type, width, height, x, y) {
             return { x, y };
         case types_1.Centring.StartBottom:
         case "start-bottom":
-            return { x, y };
-        case types_1.Centring.StartTop:
-        case "start-top":
             switch (type) {
                 case types_1.LayerType.Image:
                 case types_1.LayerType.Morph:
@@ -303,6 +267,9 @@ function centring(centring, type, width, height, x, y) {
                     break;
             }
             return { x, y };
+        case types_1.Centring.StartTop:
+        case "start-top":
+            return { x, y };
         case types_1.Centring.End:
         case "end":
             switch (type) {
@@ -321,6 +288,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
                     x -= width;
+                    y -= height;
                     break;
             }
             return { x, y };
@@ -331,7 +299,6 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
                     x -= width;
-                    y -= height;
                     break;
             }
             return { x, y };
@@ -409,7 +376,7 @@ function resizeLayers(layers, ratio) {
                         }
                     }
                 }
-                if ('stroke' in layer.props) {
+                if ('stroke' in layer.props && layer.props.stroke) {
                     layer.props.stroke.width = resize(layer.props.stroke.width, ratio);
                 }
                 if ('endPoint' in layer.props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nmmty/lazycanvas",
-  "version": "0.5.3",
+  "version": "0.6.0-dev.321c2e",
   "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -11,9 +11,10 @@
     "text": "tsc ./test/text.ts && node ./test/text.js",
     "animation": "tsc ./test/animation.ts && node ./test/animation.js",
     "iotest": "tsc ./test/iotest.ts && node ./test/iotest.js",
+    "gradient": "tsc ./test/gradient.ts && node ./test/gradient.js",
     "doc": "tsx docgen.ts",
-    "font": "tsc ./scripts/font-gen.ts && node ./scripts/font-gen.js",
-    "build": "tsc"
+    "font": "tsx ./scripts/font-gen.ts",
+    "build": "tsc && tsx ./scripts/post-build.ts"
   },
   "repository": {
     "type": "git",
@@ -33,7 +34,7 @@
   },
   "homepage": "https://github.com/NMMTY/LazyCanvas#readme",
   "dependencies": {
-    "@napi-rs/canvas": "^0.1.68",
+    "@napi-rs/canvas": "^0.1.72",
     "gifenc": "^1.0.3",
     "js-yaml": "^4.1.0",
     "path": "^0.12.7",