@nmmty/lazycanvas 0.3.0 → 0.3.2

package/dist/helpers/filters.d.ts

@@ -1,5 +1,5 @@
 /**
- * List of CSS [`filters`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) that can be used with the `filter` property. Use this functions to `setFilter` on the layer.
+ * List of CSS [`filters`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) that can be used with the `filter` property. Use this functions to `setFilters` on the layer.
  */
 export declare const Filters: {
     /**

package/dist/helpers/filters.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filters = void 0;
 /**
- * List of CSS [`filters`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) that can be used with the `filter` property. Use this functions to `setFilter` on the layer.
+ * List of CSS [`filters`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) that can be used with the `filter` property. Use this functions to `setFilters` on the layer.
  */
 exports.Filters = {
     /**

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

@@ -56,9 +56,9 @@ export declare class BaseLayer<T extends IBaseLayerProps> {
     /**
      * @description The **`CanvasRenderingContext2D`**. filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling.
      * It is similar to the CSS [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) property and accepts the same values.
-     * @param filter {string} - The `filter` of the layer. Not support multiple filters.
+     * @param filter {string} - The `filter` of the layer. Multiple filters are supported.
      */
-    setFilter(filter: string): this;
+    setFilters(...filter: string[]): this;
     /**
      * @description Sets type of centring of the layer.
      * @param centring {Centring} - The `centring` of the layer

package/dist/structures/components/BaseLayer.js

@@ -111,10 +111,10 @@ class BaseLayer {
     /**
      * @description The **`CanvasRenderingContext2D`**. filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling.
      * It is similar to the CSS [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) property and accepts the same values.
-     * @param filter {string} - The `filter` of the layer. Not support multiple filters.
+     * @param filter {string} - The `filter` of the layer. Multiple filters are supported.
      */
-    setFilter(filter) {
-        this.props.filter = filter;
+    setFilters(...filter) {
+        this.props.filter = filter.join(' ');
         return this;
     }
     /**

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

@@ -1,6 +1,7 @@
 import { BaseLayer } from "./BaseLayer";
 import { ColorType, IBezierLayer, IBezierLayerProps, ScaleType } from "../../types";
 import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { LayersManager } from "../managers/LayersManager";
 export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
     props: IBezierLayerProps;
     constructor(props?: IBezierLayerProps);
@@ -17,7 +18,7 @@ export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
      * @param x {ScaleType} - The end `x` of the bezier layer.
      * @param y {ScaleType} - The end `y` of the bezier layer.
      */
-    setEndPoint(x: ScaleType, y: ScaleType): this;
+    setEndPosition(x: ScaleType, y: ScaleType): this;
     /**
      * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
      * @param color {string} - The `color` of the layer.
@@ -33,7 +34,7 @@ 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;
-    draw(ctx: SKRSContext2D, canvas: Canvas, debug: boolean): Promise<void>;
+    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
      * @returns {IBezierLayer}
      */

package/dist/structures/components/BezierLayer.js

@@ -10,7 +10,7 @@ const Pattern_1 = require("../helpers/Pattern");
 class BezierLayer extends BaseLayer_1.BaseLayer {
     props;
     constructor(props) {
-        super(enum_1.LayerType.BezierCurve, props);
+        super(enum_1.LayerType.BezierCurve, props || {});
         this.props = props ? props : {};
         if (!this.props.fillStyle)
             this.props.fillStyle = '#000000';
@@ -31,7 +31,7 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
      * @param x {ScaleType} - The end `x` of the bezier layer.
      * @param y {ScaleType} - The end `y` of the bezier layer.
      */
-    setEndPoint(x, y) {
+    setEndPosition(x, y) {
         this.props.endPoint = { x, y };
         return this;
     }
@@ -75,15 +75,15 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
         };
         return this;
     }
-    async draw(ctx, canvas, debug) {
-        const xs = (0, utils_1.parseToNormal)(this.props.x, canvas);
-        const ys = (0, utils_1.parseToNormal)(this.props.y, canvas, { width: 0, height: 0 }, { vertical: true });
-        const cp1x = (0, utils_1.parseToNormal)(this.props.controlPoints[0].x, canvas);
-        const cp1y = (0, utils_1.parseToNormal)(this.props.controlPoints[0].y, canvas, { width: 0, height: 0 }, { vertical: true });
-        const cp2x = (0, utils_1.parseToNormal)(this.props.controlPoints[1].x, canvas);
-        const cp2y = (0, utils_1.parseToNormal)(this.props.controlPoints[1].y, canvas, { width: 0, height: 0 }, { vertical: true });
-        const xe = (0, utils_1.parseToNormal)(this.props.endPoint.x, canvas);
-        const ye = (0, utils_1.parseToNormal)(this.props.endPoint.y, canvas, { width: 0, height: 0 }, { vertical: true });
+    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 { 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.d.ts

@@ -1,6 +1,7 @@
 import { BaseLayer } from "./BaseLayer";
 import { IImageLayer, IImageLayerProps, ScaleType } from "../../types";
 import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { LayersManager } from "../managers/LayersManager";
 export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
     props: IImageLayerProps;
     constructor(props?: IImageLayerProps);
@@ -16,7 +17,7 @@ export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
      * @param radius {ScaleType} - The `radius` of the image. (optional)
      */
     setSize(width: ScaleType, height: ScaleType, radius?: ScaleType): this;
-    draw(ctx: SKRSContext2D, canvas: Canvas, debug: boolean): Promise<void>;
+    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
      * @returns {IImageLayer}
      */

package/dist/structures/components/ImageLayer.js

@@ -33,7 +33,7 @@ const jimp = __importStar(require("jimp"));
 class ImageLayer extends BaseLayer_1.BaseLayer {
     props;
     constructor(props) {
-        super(enum_1.LayerType.Image, props);
+        super(enum_1.LayerType.Image, props || {});
         this.props = props ? props : {};
         this.props.centring = enum_1.Centring.Center;
     }
@@ -61,12 +61,12 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
         };
         return this;
     }
-    async draw(ctx, canvas, debug) {
-        let xs = (0, utils_1.parseToNormal)(this.props.x, canvas);
-        let ys = (0, utils_1.parseToNormal)(this.props.y, canvas, { width: 0, height: 0 }, { vertical: true });
-        let w = (0, utils_1.parseToNormal)(this.props.size.width, canvas);
-        let h = (0, utils_1.parseToNormal)(this.props.size.height, canvas, { width: w, height: 0 }, { vertical: true });
-        let r = (0, utils_1.parseToNormal)(this.props.size.radius, canvas, { width: w, height: h }, { layer: true });
+    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 });
         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

@@ -0,0 +1,31 @@
+import { BaseLayer } from "./BaseLayer";
+import { ColorType, ILineLayer, ILineLayerProps, ScaleType } from "../../types/";
+import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { LayersManager } from "../managers/LayersManager";
+export declare class LineLayer extends BaseLayer<ILineLayerProps> {
+    props: ILineLayerProps;
+    constructor(props?: ILineLayerProps);
+    /**
+     * @description Sets the end point of the line layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
+     * @param x {ScaleType} - The end `x` of the line layer.
+     * @param y {ScaleType} - The end `y` of the line layer.
+     */
+    setEndPosition(x: ScaleType, y: ScaleType): this;
+    /**
+     * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
+     * @param color {string} - The `color` of the layer.
+     */
+    setColor(color: ColorType): this;
+    /**
+     * @description Sets the stroke of the layer.
+     * @param width {number} - The `width` of the stroke.
+     * @param cap {string} - The `cap` of the stroke.
+     * @param join {string} - The `join` of the stroke.
+     * @param dash {number[]} - The `dash` of the stroke.
+     * @param dashOffset {number} - The `dashOffset` of the stroke.
+     * @param miterLimit {number} - The `miterLimit` of the stroke.
+     */
+    setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
+    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
+    toJSON(): ILineLayer;
+}

package/dist/structures/components/LineLayer.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineLayer = void 0;
+const BaseLayer_1 = require("./BaseLayer");
+const enum_1 = require("../../types/enum");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+const utils_1 = require("../../utils/utils");
+const Gradient_1 = require("../helpers/Gradient");
+const Pattern_1 = require("../helpers/Pattern");
+class LineLayer extends BaseLayer_1.BaseLayer {
+    props;
+    constructor(props) {
+        super(enum_1.LayerType.Line, props || {});
+        this.props = props ? props : {};
+        if (!this.props.fillStyle)
+            this.props.fillStyle = '#000000';
+        this.props.centring = enum_1.Centring.None;
+    }
+    /**
+     * @description Sets the end point of the line layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
+     * @param x {ScaleType} - The end `x` of the line layer.
+     * @param y {ScaleType} - The end `y` of the line layer.
+     */
+    setEndPosition(x, y) {
+        this.props.endPoint = { x, y };
+        return this;
+    }
+    /**
+     * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
+     * @param color {string} - The `color` of the layer.
+     */
+    setColor(color) {
+        if (!color)
+            throw new LazyUtil_1.LazyError('The color of the layer must be provided');
+        if (!(0, utils_1.isColor)(color))
+            throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
+        let fill = (0, utils_1.parseColor)(color);
+        if (fill instanceof Gradient_1.Gradient || fill instanceof Pattern_1.Pattern) {
+            this.props.fillStyle = fill;
+        }
+        else {
+            let arr = fill.split(':');
+            this.props.fillStyle = arr[0];
+            this.props.opacity = parseFloat(arr[1]) || 1;
+        }
+        return this;
+    }
+    /**
+     * @description Sets the stroke of the layer.
+     * @param width {number} - The `width` of the stroke.
+     * @param cap {string} - The `cap` of the stroke.
+     * @param join {string} - The `join` of the stroke.
+     * @param dash {number[]} - The `dash` of the stroke.
+     * @param dashOffset {number} - The `dashOffset` of the stroke.
+     * @param miterLimit {number} - The `miterLimit` of the stroke.
+     */
+    setStroke(width, cap, join, dash, dashOffset, miterLimit) {
+        this.props.stroke = {
+            width,
+            cap: cap || 'butt',
+            join: join || 'miter',
+            dash: dash || [],
+            dashOffset: dashOffset || 0,
+            miterLimit: miterLimit || 10,
+        };
+        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 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 });
+        let width = xe - xs;
+        let height = ye - ys;
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);
+        if (debug)
+            LazyUtil_1.LazyLog.log('none', `LineLayer:`, { xs, ys, xe, ye, width, height });
+        ctx.save();
+        (0, utils_1.transform)(ctx, this.props.transform, { x: xs, y: ys, width, height, type: this.type });
+        (0, utils_1.drawShadow)(ctx, this.props.shadow);
+        (0, utils_1.opacity)(ctx, this.props.opacity);
+        (0, utils_1.filters)(ctx, this.props.filter);
+        ctx.beginPath();
+        ctx.moveTo(xs, ys);
+        ctx.strokeStyle = fillStyle;
+        ctx.lineWidth = this.props.stroke?.width || 1;
+        ctx.lineCap = this.props.stroke?.cap || 'butt';
+        ctx.lineJoin = this.props.stroke?.join || 'miter';
+        ctx.miterLimit = this.props.stroke?.miterLimit || 10;
+        ctx.lineDashOffset = this.props.stroke?.dashOffset || 0;
+        ctx.setLineDash(this.props.stroke?.dash || []);
+        ctx.lineTo(xe, ye);
+        ctx.closePath();
+    }
+    toJSON() {
+        let data = super.toJSON();
+        data.props = this.props;
+        return { ...data };
+    }
+}
+exports.LineLayer = LineLayer;

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

@@ -1,6 +1,7 @@
 import { BaseLayer } from "./BaseLayer";
 import { IMorphLayer, IMorphLayerProps, ColorType, ScaleType } from "../../types";
 import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { LayersManager } from "../managers/LayersManager";
 export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
     props: IMorphLayerProps;
     constructor(props?: IMorphLayerProps);
@@ -31,7 +32,7 @@ export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
      * @param filled {boolean} - The `filled` of the layer.
      */
     setFilled(filled: boolean): this;
-    draw(ctx: SKRSContext2D, canvas: Canvas, debug: boolean): Promise<void>;
+    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
      * @returns {IMorphLayer}
      */

package/dist/structures/components/MorphLayer.js

@@ -10,7 +10,7 @@ const Pattern_1 = require("../helpers/Pattern");
 class MorphLayer extends BaseLayer_1.BaseLayer {
     props;
     constructor(props) {
-        super(enum_1.LayerType.Morph, props);
+        super(enum_1.LayerType.Morph, props || {});
         this.props = props ? props : {};
         if (!this.props.fillStyle)
             this.props.fillStyle = '#000000';
@@ -80,12 +80,12 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
         this.props.filled = filled;
         return this;
     }
-    async draw(ctx, canvas, debug) {
-        const xs = (0, utils_1.parseToNormal)(this.props.x, canvas);
-        const ys = (0, utils_1.parseToNormal)(this.props.y, canvas, { width: 0, height: 0 }, { vertical: true });
-        const w = (0, utils_1.parseToNormal)(this.props.size.width, canvas);
-        const h = (0, utils_1.parseToNormal)(this.props.size.height, canvas, { width: w, height: 0 }, { vertical: true });
-        const r = (0, utils_1.parseToNormal)(this.props.size.radius, canvas, { width: w / 2, height: h / 2 }, { layer: true });
+    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 });
         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

@@ -1,6 +1,7 @@
 import { BaseLayer } from "./BaseLayer";
 import { IQuadraticLayerProps, IQuadraticLayer, ColorType, ScaleType } from "../../types";
 import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { LayersManager } from "../managers/LayersManager";
 export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
     props: IQuadraticLayerProps;
     constructor(props?: IQuadraticLayerProps);
@@ -15,7 +16,7 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
      * @param x {ScaleType} - The end `x` of the quadratic layer.
      * @param y {ScaleType} - The end `y` of the quadratic layer.
      */
-    setEndPoint(x: ScaleType, y: ScaleType): this;
+    setEndPosition(x: ScaleType, y: ScaleType): this;
     /**
      * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
      * @param color {string} - The `color` of the layer.
@@ -31,7 +32,7 @@ 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;
-    draw(ctx: SKRSContext2D, canvas: Canvas, debug: boolean): Promise<void>;
+    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
      * @returns {IQuadraticLayer}
      */

package/dist/structures/components/QuadraticLayer.js

@@ -10,7 +10,7 @@ const Pattern_1 = require("../helpers/Pattern");
 class QuadraticLayer extends BaseLayer_1.BaseLayer {
     props;
     constructor(props) {
-        super(enum_1.LayerType.QuadraticCurve, props);
+        super(enum_1.LayerType.QuadraticCurve, props || {});
         this.props = props ? props : {};
         if (!this.props.fillStyle)
             this.props.fillStyle = '#000000';
@@ -30,7 +30,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
      * @param x {ScaleType} - The end `x` of the quadratic layer.
      * @param y {ScaleType} - The end `y` of the quadratic layer.
      */
-    setEndPoint(x, y) {
+    setEndPosition(x, y) {
         this.props.endPoint = { x, y };
         return this;
     }
@@ -74,13 +74,13 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
         };
         return this;
     }
-    async draw(ctx, canvas, debug) {
-        const xs = (0, utils_1.parseToNormal)(this.props.x, canvas);
-        const ys = (0, utils_1.parseToNormal)(this.props.y, canvas, { width: 0, height: 0 }, { vertical: true });
-        const cx = (0, utils_1.parseToNormal)(this.props.controlPoint.x, canvas);
-        const cy = (0, utils_1.parseToNormal)(this.props.controlPoint.y, canvas, { width: 0, height: 0 }, { vertical: true });
-        const xe = (0, utils_1.parseToNormal)(this.props.endPoint.x, canvas);
-        const ye = (0, utils_1.parseToNormal)(this.props.endPoint.y, canvas, { width: 0, height: 0 }, { vertical: true });
+    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 { 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.d.ts

@@ -2,6 +2,7 @@ import { BaseLayer } from "./BaseLayer";
 import { FontWeight, LineCap, LineJoin, TextAlign, TextBaseline, TextDirection } from "../../types/enum";
 import { ITextLayer, ITextLayerProps, ScaleType, ColorType } from "../../types";
 import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { LayersManager } from "../managers/LayersManager";
 export declare class TextLayer extends BaseLayer<ITextLayerProps> {
     props: ITextLayerProps;
     constructor(props?: ITextLayerProps);
@@ -60,7 +61,11 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
      * @param filled {boolean} - The `filled` of the layer.
      */
     setFilled(filled: boolean): this;
-    draw(ctx: SKRSContext2D, canvas: Canvas, debug: boolean): Promise<void>;
+    measureText(ctx: SKRSContext2D, canvas: Canvas): {
+        width: number;
+        height: number;
+    };
+    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     private drawText;
     /**
      * @returns {ITextLayer}

package/dist/structures/components/TextLayer.js

@@ -10,7 +10,7 @@ const Pattern_1 = require("../helpers/Pattern");
 class TextLayer extends BaseLayer_1.BaseLayer {
     props;
     constructor(props) {
-        super(enum_1.LayerType.Text, props);
+        super(enum_1.LayerType.Text, props || {});
         this.props = props ? props : {};
         this.props.align = enum_1.TextAlign.Left;
         this.props.font = {
@@ -144,11 +144,23 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         this.props.filled = filled;
         return this;
     }
-    async draw(ctx, canvas, debug) {
-        const x = (0, utils_1.parseToNormal)(this.props.x, canvas);
-        const y = (0, utils_1.parseToNormal)(this.props.y, canvas, { width: 0, height: 0 }, { vertical: true });
-        const w = (0, utils_1.parseToNormal)(this.props.multiline?.width, canvas);
-        const h = (0, utils_1.parseToNormal)(this.props.multiline?.height, canvas, { width: w, height: 0 }, { vertical: true });
+    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 });
+        if (this.props.multiline.enabled) {
+            return { width: w, height: h };
+        }
+        else {
+            ctx.font = `${this.props.font.weight} ${this.props.font.size}px ${this.props.font.family}`;
+            let data = ctx.measureText(this.props.text);
+            return { width: data.width, height: this.props.font.size };
+        }
+    }
+    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 });
         if (debug)
             LazyUtil_1.LazyLog.log('none', `TextLayer:`, { x, y, w, h });
         ctx.save();

package/dist/structures/managers/RenderManager.js

@@ -23,12 +23,12 @@ class RenderManager {
                 if (layer instanceof Group_1.Group) {
                     for (const subLayer of layer.components) {
                         if (subLayer.visible) {
-                            await subLayer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.debug);
+                            await subLayer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.layers, this.debug);
                         }
                     }
                 }
                 else {
-                    await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.debug);
+                    await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.layers, this.debug);
                 }
                 this.lazyCanvas.ctx.shadowColor = 'transparent';
             }

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

@@ -0,0 +1,12 @@
+import { IBaseLayer, IBaseLayerProps, ScaleType } from "../";
+
+export interface ILineLayer extends IBaseLayer {
+    props: ILineLayerProps;
+}
+
+export interface ILineLayerProps extends IBaseLayerProps {
+    endPoint: {
+        x: ScaleType,
+        y: ScaleType
+    }
+}

package/dist/types/index.d.ts

@@ -5,6 +5,7 @@ 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";

package/dist/utils/utils.d.ts

@@ -3,17 +3,18 @@ import { Transform, ScaleType, ColorType, PointNumber } from "../types";
 import { Gradient } from "../structures/helpers/Gradient";
 import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
 import { Pattern } from "../structures/helpers/Pattern";
+import { LayersManager } from "../structures/managers/LayersManager";
 export declare function generateID(type: string): string;
 export declare function isColor(v: ColorType): "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
 export declare function parseHex(v: string): string;
 export declare function parseColor(v: ColorType): string | Pattern | Gradient;
-export declare function parseToNormal(v: ScaleType, canvas: Canvas, layer?: {
+export declare function parseToNormal(v: ScaleType, ctx: SKRSContext2D, canvas: Canvas, layer?: {
     width: number;
     height: number;
 }, options?: {
     vertical?: boolean;
     layer?: boolean;
-}): number;
+}, manager?: LayersManager): 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

@@ -30,6 +30,7 @@ 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");
 function generateID(type) {
     return `${type}-${Math.random().toString(36).substr(2, 9)}`;
 }
@@ -37,6 +38,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 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)?)\)$/;
@@ -114,12 +116,12 @@ function parseColor(v) {
     }
 }
 exports.parseColor = parseColor;
-function parseToNormal(v, canvas, layer = { width: 0, height: 0 }, options = { vertical: false, layer: false }) {
+function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options = { vertical: false, layer: false }, manager) {
     if (typeof v === 'number') {
         return v;
     }
     else if (percentReg.test(v)) {
-        return parseFloat(v) * (options.layer ? (options.vertical ? layer.width : layer.height) : (options.vertical ? canvas.width : canvas.height));
+        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);
@@ -138,6 +140,24 @@ function parseToNormal(v, canvas, layer = { width: 0, height: 0 }, options = { v
             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 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);
+                }
+                break;
+            case 'link-h':
+                if (layer instanceof TextLayer_1.TextLayer) {
+                    return layer.measureText(ctx, canvas).height + (parseInt(match[3]) || 0);
+                }
+                break;
+        }
+    }
     return 0;
 }
 exports.parseToNormal = parseToNormal;
@@ -182,6 +202,7 @@ function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, ty
                 case enum_1.LayerType.Morph:
                 case enum_1.LayerType.BezierCurve:
                 case enum_1.LayerType.QuadraticCurve:
+                case enum_1.LayerType.Line:
                     ctx.translate(layer.x + (layer.width / 2), layer.y + (layer.height / 2));
                     ctx.rotate((Math.PI / 180) * transform.rotate);
                     ctx.translate(-(layer.x + (layer.width / 2)), -(layer.y + (layer.height / 2)));

package/package.json

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