@nmmty/lazycanvas 0.3.3 → 0.3.4

package/dist/index.d.ts

@@ -7,13 +7,14 @@ import { QuadraticLayer } from "./structures/components/QuadraticLayer";
 import { LineLayer } from "./structures/components/LineLayer";
 import { BaseLayer } from "./structures/components/BaseLayer";
 import { Group } from "./structures/components/Group";
-import { LayerType, LayerScaleType, LineCap, LineJoin, TextAlign, TextDirection, TextBaseline, FontWeight, Export, Centring, PatternType, SaveFormat, GradientType } from "./types/enum";
-import type { AnyLayer, AnyCentring, AnyPatternType, AnyGradientType, AnyTextAlign, AnyTextDirection, AnyTextBaseline, AnyWeight, AnyExport, AnyLineCap, AnyLineJoin, AnySaveFormat, ScaleType, ColorType, IFont, IFonts, IGradient, IPattern, IImageLayer, IImageLayerProps, IMorphLayer, IMorphLayerProps, ITextLayer, ITextLayerProps, IBezierLayer, IBezierLayerProps, IQuadraticLayer, IQuadraticLayerProps, ILineLayer, ILineLayerProps, IBaseLayer, IBaseLayerProps, IGroup } from "./types";
+import { LayerType, LayerScaleType, LineCap, LineJoin, TextAlign, TextDirection, TextBaseline, FontWeight, Export, Centring, PatternType, SaveFormat, GradientType, LinkType } from "./types/enum";
+import type { AnyLayer, AnyCentring, AnyPatternType, AnyGradientType, AnyTextAlign, AnyTextDirection, AnyTextBaseline, AnyWeight, AnyExport, AnyLineCap, AnyLineJoin, AnySaveFormat, AnyLinkType, ScaleType, ColorType, IFont, IFonts, IGradient, IPattern, IImageLayer, IImageLayerProps, IMorphLayer, IMorphLayerProps, ITextLayer, ITextLayerProps, IBezierLayer, IBezierLayerProps, IQuadraticLayer, IQuadraticLayerProps, ILineLayer, ILineLayerProps, IBaseLayer, IBaseLayerProps, IGroup } from "./types";
 import { Font } from "./structures/helpers/Font";
 import { Gradient } from "./structures/helpers/Gradient";
 import { Pattern } from "./structures/helpers/Pattern";
+import { Link } from "./structures/helpers/Link";
 import { saveFile } from "./utils/utils";
 import { Filters } from "./helpers/Filters";
 import { FontsList } from "./helpers/FontsList";
-export { LazyCanvas, ImageLayer, MorphLayer, TextLayer, BezierLayer, QuadraticLayer, LineLayer, BaseLayer, Group, Font, Gradient, Pattern, LayerScaleType, LayerType, FontWeight, GradientType, Export, LineCap, LineJoin, TextAlign, TextDirection, TextBaseline, SaveFormat, Centring, PatternType, saveFile, Filters, FontsList, };
-export type { IFont, IFonts, IGradient, IPattern, IImageLayer, IImageLayerProps, IMorphLayer, IMorphLayerProps, ITextLayer, ITextLayerProps, IBaseLayer, IBaseLayerProps, IBezierLayer, IBezierLayerProps, IQuadraticLayer, IQuadraticLayerProps, ILineLayer, ILineLayerProps, IGroup, AnyLayer, AnyCentring, AnyPatternType, AnyGradientType, AnyTextAlign, AnyTextDirection, AnyTextBaseline, AnyWeight, AnyExport, AnyLineCap, AnyLineJoin, AnySaveFormat, ScaleType, ColorType };
+export { LazyCanvas, ImageLayer, MorphLayer, TextLayer, BezierLayer, QuadraticLayer, LineLayer, BaseLayer, Group, Font, Gradient, Pattern, Link, LayerScaleType, LayerType, FontWeight, GradientType, Export, LineCap, LineJoin, TextAlign, TextDirection, TextBaseline, SaveFormat, Centring, PatternType, LinkType, saveFile, Filters, FontsList, };
+export type { IFont, IFonts, IGradient, IPattern, IImageLayer, IImageLayerProps, IMorphLayer, IMorphLayerProps, ITextLayer, ITextLayerProps, IBaseLayer, IBaseLayerProps, IBezierLayer, IBezierLayerProps, IQuadraticLayer, IQuadraticLayerProps, ILineLayer, ILineLayerProps, IGroup, AnyLayer, AnyCentring, AnyPatternType, AnyGradientType, AnyTextAlign, AnyTextDirection, AnyTextBaseline, AnyWeight, AnyExport, AnyLineCap, AnyLineJoin, AnySaveFormat, AnyLinkType, ScaleType, ColorType };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontsList = exports.Filters = exports.saveFile = exports.PatternType = exports.Centring = exports.SaveFormat = exports.TextBaseline = exports.TextDirection = exports.TextAlign = exports.LineJoin = exports.LineCap = exports.Export = exports.GradientType = exports.FontWeight = exports.LayerType = exports.LayerScaleType = exports.Pattern = exports.Gradient = exports.Font = exports.Group = exports.BaseLayer = exports.LineLayer = exports.QuadraticLayer = exports.BezierLayer = exports.TextLayer = exports.MorphLayer = exports.ImageLayer = exports.LazyCanvas = void 0;
+exports.FontsList = exports.Filters = exports.saveFile = exports.LinkType = exports.PatternType = exports.Centring = exports.SaveFormat = exports.TextBaseline = exports.TextDirection = exports.TextAlign = exports.LineJoin = exports.LineCap = exports.Export = exports.GradientType = exports.FontWeight = exports.LayerType = exports.LayerScaleType = exports.Link = exports.Pattern = exports.Gradient = exports.Font = exports.Group = exports.BaseLayer = exports.LineLayer = exports.QuadraticLayer = exports.BezierLayer = exports.TextLayer = exports.MorphLayer = exports.ImageLayer = exports.LazyCanvas = void 0;
 const LazyCanvas_1 = require("./structures/LazyCanvas");
 Object.defineProperty(exports, "LazyCanvas", { enumerable: true, get: function () { return LazyCanvas_1.LazyCanvas; } });
 const ImageLayer_1 = require("./structures/components/ImageLayer");
@@ -33,12 +33,15 @@ Object.defineProperty(exports, "Centring", { enumerable: true, get: function ()
 Object.defineProperty(exports, "PatternType", { enumerable: true, get: function () { return enum_1.PatternType; } });
 Object.defineProperty(exports, "SaveFormat", { enumerable: true, get: function () { return enum_1.SaveFormat; } });
 Object.defineProperty(exports, "GradientType", { enumerable: true, get: function () { return enum_1.GradientType; } });
+Object.defineProperty(exports, "LinkType", { enumerable: true, get: function () { return enum_1.LinkType; } });
 const Font_1 = require("./structures/helpers/Font");
 Object.defineProperty(exports, "Font", { enumerable: true, get: function () { return Font_1.Font; } });
 const Gradient_1 = require("./structures/helpers/Gradient");
 Object.defineProperty(exports, "Gradient", { enumerable: true, get: function () { return Gradient_1.Gradient; } });
 const Pattern_1 = require("./structures/helpers/Pattern");
 Object.defineProperty(exports, "Pattern", { enumerable: true, get: function () { return Pattern_1.Pattern; } });
+const Link_1 = require("./structures/helpers/Link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
 const utils_1 = require("./utils/utils");
 Object.defineProperty(exports, "saveFile", { enumerable: true, get: function () { return utils_1.saveFile; } });
 const Filters_1 = require("./helpers/Filters");

package/dist/structures/components/BezierLayer.d.ts

@@ -34,6 +34,22 @@ export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
      * @param miterLimit {number} - The `miterLimit` of the stroke.
      */
     setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
+    getBoundingBox(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager): {
+        max: {
+            x: number;
+            y: number;
+        };
+        min: {
+            x: number;
+            y: number;
+        };
+        center: {
+            x: number;
+            y: number;
+        };
+        width: number;
+        height: number;
+    };
     draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
      * @returns {IBezierLayer}

package/dist/structures/components/BezierLayer.js

@@ -75,15 +75,33 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
         };
         return this;
     }
+    getBoundingBox(ctx, canvas, manager) {
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye } = parcer.parseBatch({
+            xs: { v: this.props.x },
+            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            cp1x: { v: this.props.controlPoints[0].x },
+            cp1y: { v: this.props.controlPoints[0].y, options: LazyUtil_1.defaultArg.vl(true) },
+            cp2x: { v: this.props.controlPoints[1].x },
+            cp2y: { v: this.props.controlPoints[1].y, options: LazyUtil_1.defaultArg.vl(true) },
+            xe: { v: this.props.endPoint.x },
+            ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
+        });
+        const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cp1x, y: cp1y }, { x: cp2x, y: cp2y }, { x: xe, y: ye }]);
+        return { max, min, center, width, height };
+    }
     async draw(ctx, canvas, manager, debug) {
-        const xs = (0, utils_1.parseToNormal)(this.props.x, ctx, canvas);
-        const ys = (0, utils_1.parseToNormal)(this.props.y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
-        const cp1x = (0, utils_1.parseToNormal)(this.props.controlPoints[0].x, ctx, canvas);
-        const cp1y = (0, utils_1.parseToNormal)(this.props.controlPoints[0].y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
-        const cp2x = (0, utils_1.parseToNormal)(this.props.controlPoints[1].x, ctx, canvas);
-        const cp2y = (0, utils_1.parseToNormal)(this.props.controlPoints[1].y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
-        const xe = (0, utils_1.parseToNormal)(this.props.endPoint.x, ctx, canvas);
-        const ye = (0, utils_1.parseToNormal)(this.props.endPoint.y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye } = parcer.parseBatch({
+            xs: { v: this.props.x },
+            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            cp1x: { v: this.props.controlPoints[0].x },
+            cp1y: { v: this.props.controlPoints[0].y, options: LazyUtil_1.defaultArg.vl(true) },
+            cp2x: { v: this.props.controlPoints[1].x },
+            cp2y: { v: this.props.controlPoints[1].y, options: LazyUtil_1.defaultArg.vl(true) },
+            xe: { v: this.props.endPoint.x },
+            ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
+        });
         const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cp1x, y: cp1y }, { x: cp2x, y: cp2y }, { x: xe, y: ye }]);
         let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);
         if (debug)

package/dist/structures/components/ImageLayer.js

@@ -62,11 +62,14 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
         return this;
     }
     async draw(ctx, canvas, manager, debug) {
-        let xs = (0, utils_1.parseToNormal)(this.props.x, ctx, canvas);
-        let ys = (0, utils_1.parseToNormal)(this.props.y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
-        let w = (0, utils_1.parseToNormal)(this.props.size.width, ctx, canvas);
-        let h = (0, utils_1.parseToNormal)(this.props.size.height, ctx, canvas, { width: w, height: 0 }, { vertical: true });
-        let r = (0, utils_1.parseToNormal)(this.props.size.radius, ctx, canvas, { width: w, height: h }, { layer: true });
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { xs, ys, w, h } = parcer.parseBatch({
+            xs: { v: this.props.x },
+            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            w: { v: this.props.size.width },
+            h: { v: this.props.size.height, options: LazyUtil_1.defaultArg.vl(true) },
+        });
+        const r = parcer.parse(this.props.size.radius, LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
         let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
         if (debug)
             LazyUtil_1.LazyLog.log('none', `ImageLayer:`, { x, y, w, h, r });

package/dist/structures/components/LineLayer.d.ts

@@ -26,6 +26,14 @@ export declare class LineLayer extends BaseLayer<ILineLayerProps> {
      * @param miterLimit {number} - The `miterLimit` of the stroke.
      */
     setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
+    getBoundingBox(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager): {
+        xs: number;
+        ys: number;
+        xe: number;
+        ye: number;
+        width: number;
+        height: number;
+    };
     draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     toJSON(): ILineLayer;
 }

package/dist/structures/components/LineLayer.js

@@ -65,11 +65,26 @@ class LineLayer extends BaseLayer_1.BaseLayer {
         };
         return this;
     }
+    getBoundingBox(ctx, canvas, manager) {
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { xs, ys, xe, ye } = parcer.parseBatch({
+            xs: { v: this.props.x },
+            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xe: { v: this.props.endPoint.x },
+            ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) },
+        });
+        let width = xe - xs;
+        let height = ye - ys;
+        return { xs, ys, xe, ye, width, height };
+    }
     async draw(ctx, canvas, manager, debug) {
-        const xs = (0, utils_1.parseToNormal)(this.props.x, ctx, canvas);
-        const ys = (0, utils_1.parseToNormal)(this.props.y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
-        const xe = (0, utils_1.parseToNormal)(this.props.endPoint.x, ctx, canvas);
-        const ye = (0, utils_1.parseToNormal)(this.props.endPoint.y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { xs, ys, xe, ye } = parcer.parseBatch({
+            xs: { v: this.props.x },
+            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xe: { v: this.props.endPoint.x },
+            ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) },
+        });
         let width = xe - xs;
         let height = ye - ys;
         let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);

package/dist/structures/components/MorphLayer.js

@@ -81,11 +81,14 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
         return this;
     }
     async draw(ctx, canvas, manager, debug) {
-        const xs = (0, utils_1.parseToNormal)(this.props.x, ctx, canvas);
-        const ys = (0, utils_1.parseToNormal)(this.props.y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
-        const w = (0, utils_1.parseToNormal)(this.props.size.width, ctx, canvas, { width: 0, height: 0 }, { vertical: false }, manager);
-        const h = (0, utils_1.parseToNormal)(this.props.size.height, ctx, canvas, { width: w, height: 0 }, { vertical: true }, manager);
-        const r = (0, utils_1.parseToNormal)(this.props.size.radius, ctx, canvas, { width: w / 2, height: h / 2 }, { layer: true });
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { xs, ys, w, h } = parcer.parseBatch({
+            xs: { v: this.props.x },
+            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            w: { v: this.props.size.width },
+            h: { v: this.props.size.height, options: LazyUtil_1.defaultArg.vl(true) },
+        });
+        const r = parcer.parse(this.props.size.radius, LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
         let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
         let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);
         if (debug)

package/dist/structures/components/QuadraticLayer.d.ts

@@ -32,6 +32,22 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
      * @param miterLimit {number} - The `miterLimit` of the stroke.
      */
     setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
+    getBoundingBox(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager): {
+        max: {
+            x: number;
+            y: number;
+        };
+        min: {
+            x: number;
+            y: number;
+        };
+        center: {
+            x: number;
+            y: number;
+        };
+        width: number;
+        height: number;
+    };
     draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
      * @returns {IQuadraticLayer}

package/dist/structures/components/QuadraticLayer.js

@@ -74,13 +74,29 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
         };
         return this;
     }
+    getBoundingBox(ctx, canvas, manager) {
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { xs, ys, cx, cy, xe, ye } = parcer.parseBatch({
+            xs: { v: this.props.x },
+            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            cx: { v: this.props.controlPoint.x },
+            cy: { v: this.props.controlPoint.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xe: { v: this.props.endPoint.x },
+            ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
+        });
+        const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cx, y: cy }, { x: xe, y: ye }]);
+        return { max, min, center, width, height };
+    }
     async draw(ctx, canvas, manager, debug) {
-        const xs = (0, utils_1.parseToNormal)(this.props.x, ctx, canvas);
-        const ys = (0, utils_1.parseToNormal)(this.props.y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
-        const cx = (0, utils_1.parseToNormal)(this.props.controlPoint.x, ctx, canvas);
-        const cy = (0, utils_1.parseToNormal)(this.props.controlPoint.y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
-        const xe = (0, utils_1.parseToNormal)(this.props.endPoint.x, ctx, canvas);
-        const ye = (0, utils_1.parseToNormal)(this.props.endPoint.y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { xs, ys, cx, cy, xe, ye } = parcer.parseBatch({
+            xs: { v: this.props.x },
+            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            cx: { v: this.props.controlPoint.x },
+            cy: { v: this.props.controlPoint.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xe: { v: this.props.endPoint.x },
+            ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
+        });
         const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cx, y: cy }, { x: xe, y: ye }]);
         let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);
         if (debug)

package/dist/structures/components/TextLayer.js

@@ -22,9 +22,11 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         this.props.filled = true;
         this.props.multiline = {
             enabled: false,
+            spacing: 1.1,
+        };
+        this.props.size = {
             width: 'vw',
             height: 0,
-            spacing: 1.1,
         };
         this.props.centring = enum_1.Centring.Center;
     }
@@ -73,10 +75,12 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     setMultiline(enabled, width, height, spacing) {
         this.props.multiline = {
             enabled: enabled,
-            width: width,
-            height: height,
             spacing: spacing || 1.1,
         };
+        this.props.size = {
+            width,
+            height,
+        };
         return this;
     }
     /**
@@ -152,8 +156,8 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         return this;
     }
     measureText(ctx, canvas) {
-        const w = (0, utils_1.parseToNormal)(this.props.multiline?.width, ctx, canvas);
-        const h = (0, utils_1.parseToNormal)(this.props.multiline?.height, ctx, canvas, { width: w, height: 0 }, { vertical: true });
+        const w = (0, utils_1.parseToNormal)(this.props.size?.width, ctx, canvas);
+        const h = (0, utils_1.parseToNormal)(this.props.size?.height, ctx, canvas, { width: w, height: 0 }, { vertical: true });
         if (this.props.multiline.enabled) {
             return { width: w, height: h };
         }
@@ -164,10 +168,13 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         }
     }
     async draw(ctx, canvas, manager, debug) {
-        const x = (0, utils_1.parseToNormal)(this.props.x, ctx, canvas);
-        const y = (0, utils_1.parseToNormal)(this.props.y, ctx, canvas, { width: 0, height: 0 }, { vertical: true });
-        const w = (0, utils_1.parseToNormal)(this.props.multiline?.width, ctx, canvas);
-        const h = (0, utils_1.parseToNormal)(this.props.multiline?.height, ctx, canvas, { width: w, height: 0 }, { vertical: true });
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { x, y, w, h } = parcer.parseBatch({
+            x: { v: this.props.x },
+            y: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            w: { v: this.props.size?.width },
+            h: { v: this.props.size?.height, options: LazyUtil_1.defaultArg.vl(true) },
+        });
         if (debug)
             LazyUtil_1.LazyLog.log('none', `TextLayer:`, { x, y, w, h });
         ctx.save();

package/dist/structures/helpers/Link.d.ts

@@ -0,0 +1,22 @@
+import { AnyLinkType, ILink, ScaleType } from "../../types";
+export declare class Link {
+    source: string;
+    type: AnyLinkType;
+    additionalSpacing: ScaleType;
+    constructor(props?: ILink);
+    /**
+     * @description Sets the source of the link.
+     * @param source {string} - The `id` of the layer to link.
+     */
+    setSource(source: string): this;
+    /**
+     * @description Sets the type of the link.
+     * @param type {AnyLinkType} - The `type` of the link.
+     */
+    setType(type: AnyLinkType): this;
+    /**
+     * @description Sets the additional spacing of the link.
+     * @param additionalSpacing {ScaleType} - The `additionalSpacing` of the link.
+     */
+    setSpacing(additionalSpacing: ScaleType): this;
+}

package/dist/structures/helpers/Link.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const enum_1 = require("../../types/enum");
+class Link {
+    source;
+    type;
+    additionalSpacing;
+    constructor(props) {
+        this.source = props?.source || '';
+        this.type = props?.type || enum_1.LinkType.Width;
+        this.additionalSpacing = props?.additionalSpacing || 0;
+    }
+    /**
+     * @description Sets the source of the link.
+     * @param source {string} - The `id` of the layer to link.
+     */
+    setSource(source) {
+        this.source = source;
+        return this;
+    }
+    /**
+     * @description Sets the type of the link.
+     * @param type {AnyLinkType} - The `type` of the link.
+     */
+    setType(type) {
+        this.type = type;
+        return this;
+    }
+    /**
+     * @description Sets the additional spacing of the link.
+     * @param additionalSpacing {ScaleType} - The `additionalSpacing` of the link.
+     */
+    setSpacing(additionalSpacing) {
+        this.additionalSpacing = additionalSpacing;
+        return this;
+    }
+}
+exports.Link = Link;

package/dist/types/components/TextLayer.d.ts

@@ -14,9 +14,11 @@ export interface ITextLayerProps extends IBaseLayerProps {
     };
     multiline: {
         enabled: boolean;
+        spacing?: number;
+    };
+    size: {
         width: ScaleType;
         height: ScaleType;
-        spacing?: number;
     };
     align: AnyTextAlign;
     baseline: AnyTextBaseline;

package/dist/types/enum.d.ts

@@ -94,3 +94,9 @@ export declare enum PatternType {
     RepeatY = "repeat-y",
     NoRepeat = "no-repeat"
 }
+export declare enum LinkType {
+    Width = "width",
+    Height = "height",
+    X = "x",
+    Y = "y"
+}

package/dist/types/enum.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PatternType = exports.Centring = exports.SaveFormat = exports.Export = exports.LineJoin = exports.LineCap = exports.TextDirection = exports.TextBaseline = exports.TextAlign = exports.FontWeight = exports.GradientType = exports.LayerScaleType = exports.LayerType = void 0;
+exports.LinkType = exports.PatternType = exports.Centring = exports.SaveFormat = exports.Export = exports.LineJoin = exports.LineCap = exports.TextDirection = exports.TextBaseline = exports.TextAlign = exports.FontWeight = exports.GradientType = exports.LayerScaleType = exports.LayerType = void 0;
 var LayerType;
 (function (LayerType) {
     LayerType["Base"] = "base";
@@ -110,3 +110,10 @@ var PatternType;
     PatternType["RepeatY"] = "repeat-y";
     PatternType["NoRepeat"] = "no-repeat";
 })(PatternType || (exports.PatternType = PatternType = {}));
+var LinkType;
+(function (LinkType) {
+    LinkType["Width"] = "width";
+    LinkType["Height"] = "height";
+    LinkType["X"] = "x";
+    LinkType["Y"] = "y";
+})(LinkType || (exports.LinkType = LinkType = {}));

package/dist/types/helpers/Link.d.ts

@@ -0,0 +1,7 @@
+import { AnyLinkType, ScaleType } from "../types";
+
+export interface ILink {
+    source: string;
+    type: AnyLinkType;
+    additionalSpacing: ScaleType;
+}

package/dist/types/index.d.ts

@@ -1,16 +1,17 @@
-export * from "./types";
-export * from "./components/BaseLayer";
-export * from "./components/TextLayer";
-export * from "./components/ImageLayer";
-export * from "./components/MorphLayer";
-export * from "./components/BezierLayer";
-export * from "./components/QuadraticLayer";
-export * from "./components/LineLayer";
-export * from "./components/Group";
-export * from "./helpers/Font";
-export * from "./helpers/Gradient";
-export * from "./helpers/Pattern";
-export * from "./managers/LayersManager";
-export * from "./managers/RenderManager";
-export * from "./managers/FontsManager";
-export * from "./LazyCanvas";
+export type * from "./types";
+export type * from "./components/BaseLayer";
+export type * from "./components/TextLayer";
+export type * from "./components/ImageLayer";
+export type * from "./components/MorphLayer";
+export type * from "./components/BezierLayer";
+export type * from "./components/QuadraticLayer";
+export type * from "./components/LineLayer";
+export type * from "./components/Group";
+export type * from "./helpers/Font";
+export type * from "./helpers/Gradient";
+export type * from "./helpers/Pattern";
+export type * from "./helpers/Link";
+export type * from "./managers/LayersManager";
+export type * from "./managers/RenderManager";
+export type * from "./managers/FontsManager";
+export type * from "./LazyCanvas";

package/dist/types/types.d.ts

@@ -7,9 +7,23 @@ import { BezierLayer } from "../structures/components/BezierLayer";
 import { QuadraticLayer } from "../structures/components/QuadraticLayer";
 import { LineLayer } from "../structures/components/LineLayer";
 import { Group } from "../structures/components/Group";
-import { FontWeight, GradientType, TextAlign, TextBaseline, TextDirection, LineCap, LineJoin, Export, Centring, PatternType, SaveFormat } from "./enum";
-
-export type ScaleType = string | number | 'vw' | 'vh' | 'vmin' | 'vmax';
+import { Link } from "../structures/helpers/Link";
+import {
+    FontWeight,
+    GradientType,
+    TextAlign,
+    TextBaseline,
+    TextDirection,
+    LineCap,
+    LineJoin,
+    Export,
+    Centring,
+    PatternType,
+    SaveFormat,
+    LinkType
+} from "./enum";
+
+export type ScaleType = string | number | 'vw' | 'vh' | 'vmin' | 'vmax' | Link;
 
 export type ColorType = string | Gradient | Pattern;
 
@@ -37,6 +51,8 @@ export type AnyPatternType = PatternType | 'repeat' | 'repeat-x' | 'repeat-y' |
 
 export type AnySaveFormat = SaveFormat | 'png' | 'jpeg' | 'jpg' | 'svg';
 
+export type AnyLinkType = LinkType | 'width' | 'height' | 'x' | 'y';
+
 export type Point = {
     x: ScaleType;
     y: ScaleType;

package/dist/utils/LazyUtil.d.ts

@@ -5,3 +5,13 @@ export declare class LazyError extends Error {
 export declare class LazyLog {
     static log(type?: string, ...message: any): void;
 }
+export declare const defaultArg: {
+    wh(w?: number, h?: number): {
+        width: number;
+        height: number;
+    };
+    vl(vertical?: boolean, layer?: boolean): {
+        vertical: boolean;
+        layer: boolean;
+    };
+};

package/dist/utils/LazyUtil.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LazyLog = exports.LazyError = void 0;
+exports.defaultArg = exports.LazyLog = exports.LazyError = void 0;
 class LazyError extends Error {
     message;
     constructor(message) {
@@ -25,3 +25,11 @@ class LazyLog {
     }
 }
 exports.LazyLog = LazyLog;
+exports.defaultArg = {
+    wh(w, h) {
+        return { width: w || 0, height: h || 0 };
+    },
+    vl(vertical, layer) {
+        return { vertical: vertical || false, layer: layer || false };
+    }
+};

package/dist/utils/utils.d.ts

@@ -15,6 +15,26 @@ export declare function parseToNormal(v: ScaleType, ctx: SKRSContext2D, canvas:
     vertical?: boolean;
     layer?: boolean;
 }, manager?: LayersManager): number;
+export declare function parser(ctx: SKRSContext2D, canvas: Canvas, manager?: LayersManager): {
+    parse(v: ScaleType, layer?: {
+        width: number;
+        height: number;
+    }, options?: {
+        vertical?: boolean;
+        layer?: boolean;
+    }): number;
+    parseBatch(values: Record<string, {
+        v: ScaleType;
+        layer?: {
+            width: number;
+            height: number;
+        };
+        options?: {
+            vertical?: boolean;
+            layer?: boolean;
+        };
+    }>): Record<string, number>;
+};
 export declare function drawShadow(ctx: SKRSContext2D, shadow: any): void;
 export declare function opacity(ctx: SKRSContext2D, opacity: number): void;
 export declare function filters(ctx: SKRSContext2D, filters: string): void;

package/dist/utils/utils.js

@@ -23,14 +23,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBoundingBoxBezier = exports.centring = exports.isImageUrlValid = exports.generateRandomName = exports.saveFile = exports.transform = exports.parseFillStyle = exports.filters = exports.opacity = exports.drawShadow = exports.parseToNormal = exports.parseColor = exports.parseHex = exports.isColor = exports.generateID = void 0;
+exports.getBoundingBoxBezier = exports.centring = exports.isImageUrlValid = exports.generateRandomName = exports.saveFile = exports.transform = exports.parseFillStyle = exports.filters = exports.opacity = exports.drawShadow = exports.parser = exports.parseToNormal = exports.parseColor = exports.parseHex = exports.isColor = exports.generateID = void 0;
 const enum_1 = require("../types/enum");
 const Gradient_1 = require("../structures/helpers/Gradient");
 const LazyUtil_1 = require("./LazyUtil");
 const fs = __importStar(require("fs"));
 const jimp = __importStar(require("jimp"));
 const Pattern_1 = require("../structures/helpers/Pattern");
-const TextLayer_1 = require("../structures/components/TextLayer");
+const Link_1 = require("../structures/helpers/Link");
+const Group_1 = require("../structures/components/Group");
+const LineLayer_1 = require("../structures/components/LineLayer");
+const BezierLayer_1 = require("../structures/components/BezierLayer");
+const QuadraticLayer_1 = require("../structures/components/QuadraticLayer");
 function generateID(type) {
     return `${type}-${Math.random().toString(36).substr(2, 9)}`;
 }
@@ -38,7 +42,7 @@ exports.generateID = generateID;
 let percentReg = /^(\d+)%$/;
 let pxReg = /^(\d+)px$/;
 let canvasReg = /^(vw|vh|vmin|vmax)$/;
-let linkReg = /^(link-w|link-h)-([A-Za-z0-9_]+)-(\d+)$/;
+let linkReg = /^(link-w|link-h|link-x|link-y)-([A-Za-z0-9_]+)-(\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)?)\)$/;
@@ -120,47 +124,157 @@ function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options
     if (typeof v === 'number') {
         return v;
     }
-    else if (percentReg.test(v)) {
-        return (parseFloat(v) / 100) * (options.layer ? (options.vertical ? layer.width : layer.height) : (options.vertical ? canvas.width : canvas.height));
-    }
-    else if (pxReg.test(v)) {
-        return parseFloat(v);
-    }
-    else if (canvasReg.test(v)) {
-        if (v === 'vw') {
-            return (options.layer ? layer.width : canvas.width);
+    else if (typeof v === 'string') {
+        if (percentReg.test(v)) {
+            return (parseFloat(v) / 100) * (options.layer ? (options.vertical ? layer.width : layer.height) : (options.vertical ? canvas.width : canvas.height));
         }
-        else if (v === 'vh') {
-            return (options.layer ? layer.height : canvas.height);
+        else if (pxReg.test(v)) {
+            return parseFloat(v);
         }
-        else if (v === 'vmin') {
-            return (options.layer ? Math.max(layer.width, layer.height) : Math.min(canvas.width, canvas.height));
+        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));
+            }
         }
-        else if (v === 'vmax') {
-            return (options.layer ? Math.max(layer.width, layer.height) : Math.max(canvas.width, canvas.height));
+        else if (linkReg.test(v)) {
+            let match = v.match(linkReg);
+            if (!manager)
+                return 0;
+            let anyLayer = manager.get(match[2]);
+            const parcer = parser(ctx, canvas, manager);
+            switch (match[1]) {
+                case 'link-w':
+                    if (anyLayer && !(anyLayer instanceof Group_1.Group)) {
+                        if (anyLayer instanceof LineLayer_1.LineLayer || anyLayer instanceof BezierLayer_1.BezierLayer || anyLayer instanceof QuadraticLayer_1.QuadraticLayer) {
+                            return anyLayer.getBoundingBox(ctx, canvas, manager).width + (parseInt(match[3]) || 0);
+                        }
+                        else {
+                            return (parcer.parse(anyLayer.props.size.width) || 0) + (parseInt(match[3]) || 0);
+                        }
+                    }
+                    else {
+                        return 0;
+                    }
+                    break;
+                case 'link-h':
+                    if (anyLayer && !(anyLayer instanceof Group_1.Group)) {
+                        if (anyLayer instanceof LineLayer_1.LineLayer || anyLayer instanceof BezierLayer_1.BezierLayer || anyLayer instanceof QuadraticLayer_1.QuadraticLayer) {
+                            return anyLayer.getBoundingBox(ctx, canvas, manager).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);
+                        }
+                    }
+                    else {
+                        return 0;
+                    }
+                    break;
+                case 'link-x':
+                    if (anyLayer && !(anyLayer instanceof Group_1.Group)) {
+                        return (parcer.parse(anyLayer.props.x) || 0) + (parseInt(match[3]) || 0);
+                    }
+                    else {
+                        return 0;
+                    }
+                    break;
+                case 'link-y':
+                    if (anyLayer && !(anyLayer instanceof Group_1.Group)) {
+                        return (parcer.parse(anyLayer.props.y, LazyUtil_1.defaultArg.wh(), LazyUtil_1.defaultArg.vl(true)) || 0) + (parseInt(match[3]) || 0);
+                    }
+                    else {
+                        return 0;
+                    }
+                    break;
+            }
         }
     }
-    else if (linkReg.test(v)) {
-        let match = v.match(linkReg);
+    else if (v instanceof Link_1.Link) {
         if (!manager)
             return 0;
-        let layer = manager.get(match[2]);
-        switch (match[1]) {
-            case 'link-w':
-                if (layer instanceof TextLayer_1.TextLayer) {
-                    return layer.measureText(ctx, canvas).width + (parseInt(match[3]) || 0);
+        let anyLayer = manager.get(v.source);
+        const parcer = parser(ctx, canvas, manager);
+        switch (v.type) {
+            case enum_1.LinkType.Width:
+            case 'width':
+                if (anyLayer && !(anyLayer instanceof Group_1.Group)) {
+                    if (anyLayer instanceof LineLayer_1.LineLayer || anyLayer instanceof BezierLayer_1.BezierLayer || anyLayer instanceof QuadraticLayer_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 {
+                        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);
+                    }
+                }
+                else {
+                    return 0;
                 }
                 break;
-            case 'link-h':
-                if (layer instanceof TextLayer_1.TextLayer) {
-                    return layer.measureText(ctx, canvas).height + (parseInt(match[3]) || 0);
+            case enum_1.LinkType.Height:
+            case 'height':
+                if (anyLayer && !(anyLayer instanceof Group_1.Group)) {
+                    if (anyLayer instanceof LineLayer_1.LineLayer || anyLayer instanceof BezierLayer_1.BezierLayer || anyLayer instanceof QuadraticLayer_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 {
+                        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);
+                    }
+                }
+                else {
+                    return 0;
                 }
                 break;
+            case enum_1.LinkType.X:
+            case 'x':
+                if (anyLayer && !(anyLayer instanceof Group_1.Group)) {
+                    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);
+                }
+                else {
+                    return 0;
+                }
+                break;
+            case enum_1.LinkType.Y:
+            case 'y':
+                if (anyLayer && !(anyLayer instanceof Group_1.Group)) {
+                    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);
+                }
+                else {
+                    return 0;
+                }
+                break;
+            default:
+                return 0;
         }
     }
+    else {
+        return 0;
+    }
     return 0;
 }
 exports.parseToNormal = parseToNormal;
+function parser(ctx, canvas, manager) {
+    return {
+        parse(v, layer = LazyUtil_1.defaultArg.wh(), options = LazyUtil_1.defaultArg.vl()) {
+            return parseToNormal(v, ctx, canvas, layer, options, manager);
+        },
+        parseBatch(values) {
+            const result = {};
+            for (const key in values) {
+                const { v, layer, options } = values[key];
+                result[key] = parseToNormal(v, ctx, canvas, layer ?? LazyUtil_1.defaultArg.wh(), options ?? LazyUtil_1.defaultArg.vl(), manager);
+            }
+            return result;
+        }
+    };
+}
+exports.parser = parser;
 function drawShadow(ctx, shadow) {
     if (shadow) {
         ctx.shadowColor = shadow.color;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nmmty/lazycanvas",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",