@nmmty/lazycanvas 0.6.3 → 0.6.5

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

@@ -118,7 +118,7 @@ export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
      * Calculates the bounding box of the Bezier layer.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @returns {Object} The bounding box details including max, min, center, width, and height.
      */
     getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
@@ -132,7 +132,7 @@ export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
      * Draws the Bezier layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;

package/dist/structures/components/BezierLayer.js

@@ -84,7 +84,7 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
      * Calculates the bounding box of the Bezier layer.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @returns {Object} The bounding box details including max, min, center, width, and height.
      */
     getBoundingBox(ctx, canvas, manager) {
@@ -106,7 +106,7 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
      * Draws the Bezier layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     async draw(ctx, canvas, manager, debug) {

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

@@ -134,7 +134,7 @@ export declare class ClearLayer implements IClearLayer {
      * Draws the Clear Layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;

package/dist/structures/components/ClearLayer.js

@@ -107,7 +107,7 @@ class ClearLayer {
      * Draws the Clear Layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     async draw(ctx, canvas, manager, debug) {

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

@@ -2,7 +2,7 @@ import { AnyGlobalCompositeOperation, AnyLayer, LayerType } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
- * Interface representing a group of layers.
+ * Interface representing a group of layer's.
  */
 export interface IGroup {
     /**
@@ -22,7 +22,7 @@ export interface IGroup {
      */
     zIndex: number;
     /**
-     * The layers contained within the group.
+     * The layer's contained within the group.
      */
     layers: Array<AnyLayer>;
     /**
@@ -37,7 +37,7 @@ export interface IGroupProps {
     globalComposite: AnyGlobalCompositeOperation;
 }
 /**
- * Class representing a group of layers.
+ * Class representing a group of layer's.
  */
 export declare class Group implements IGroup {
     /**
@@ -57,7 +57,7 @@ export declare class Group implements IGroup {
      */
     zIndex: number;
     /**
-     * The layers contained within the group.
+     * The layer's contained within the group.
      */
     layers: Array<any>;
     props?: IGroupProps;

package/dist/structures/components/Group.js

@@ -5,7 +5,7 @@ const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
 /**
- * Class representing a group of layers.
+ * Class representing a group of layer's.
  */
 class Group {
     /**
@@ -25,7 +25,7 @@ class Group {
      */
     zIndex;
     /**
-     * The layers contained within the group.
+     * The layer's contained within the group.
      */
     layers;
     props;

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

@@ -78,7 +78,7 @@ export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
      * Draws the Image Layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      * @throws {LazyError} If the image could not be loaded.
      */

package/dist/structures/components/ImageLayer.js

@@ -56,7 +56,7 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
      * Draws the Image Layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      * @throws {LazyError} If the image could not be loaded.
      */

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

@@ -113,7 +113,7 @@ export declare class LineLayer extends BaseLayer<ILineLayerProps> {
      * Calculates the bounding box of the line layer.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @returns {Object} The bounding box details including start and end points, width, and height.
      */
     getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
@@ -128,7 +128,7 @@ export declare class LineLayer extends BaseLayer<ILineLayerProps> {
      * Draws the line layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;

package/dist/structures/components/LineLayer.js

@@ -72,7 +72,7 @@ class LineLayer extends BaseLayer_1.BaseLayer {
      * Calculates the bounding box of the line layer.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @returns {Object} The bounding box details including start and end points, width, and height.
      */
     getBoundingBox(ctx, canvas, manager) {
@@ -91,7 +91,7 @@ class LineLayer extends BaseLayer_1.BaseLayer {
      * Draws the line layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     async draw(ctx, canvas, manager, debug) {

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

@@ -122,7 +122,7 @@ export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
      * Draws the Morph Layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;

package/dist/structures/components/MorphLayer.js

@@ -79,7 +79,7 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
      * Draws the Morph Layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     async draw(ctx, canvas, manager, debug) {

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

@@ -0,0 +1,124 @@
+import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
+import { ColorType, LayerType, ScaleType } from "../../types";
+import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
+import { LayersManager } from "../managers";
+export interface IPolygonLayer extends IBaseLayer {
+    /**
+     * The type of the layer, which is `Polygon`.
+     */
+    type: LayerType.Polygon;
+    /**
+     * The properties specific to the Polygon Layer.
+     */
+    props: IPolygonLayerProps;
+}
+export interface IPolygonLayerProps extends IBaseLayerProps {
+    /**
+     * The size of the Polygon Layer, including width, height, and radius.
+     */
+    size: {
+        /**
+         * The width of the Polygon Layer.
+         */
+        width: ScaleType;
+        /**
+         * The height of the Polygon Layer.
+         */
+        height: ScaleType;
+        /**
+         * The radius of corners in the Polygon Layer.
+         */
+        radius: number;
+        /**
+         * The number of sides of the polygon.
+         */
+        count: number;
+    };
+    /**
+     * Whether the layer is filled.
+     */
+    filled: boolean;
+    /**
+     * The fill style (color or pattern) of the layer.
+     */
+    fillStyle: ColorType;
+    /**
+     * The stroke properties of the polygon.
+     */
+    stroke: {
+        /**
+         * The width of the stroke.
+         */
+        width: number;
+        /**
+         * The cap style of the stroke.
+         */
+        cap: CanvasLineCap;
+        /**
+         * The join style of the stroke.
+         */
+        join: CanvasLineJoin;
+        /**
+         * The dash offset of the stroke.
+         */
+        dashOffset: number;
+        /**
+         * The dash pattern of the stroke.
+         */
+        dash: number[];
+        /**
+         * The miter limit of the stroke.
+         */
+        miterLimit: number;
+    };
+}
+export declare class PolygonLayer extends BaseLayer<IPolygonLayerProps> {
+    props: IPolygonLayerProps;
+    constructor(props?: IPolygonLayerProps, misc?: IBaseLayerMisc);
+    /**
+     * Sets the size of the Polygon layer.
+     * @param {ScaleType} [width] - The width of the Polygon layer.
+     * @param {ScaleType} [height] - The height of the Polygon layer.
+     * @param {number} [count] - The number of sides of the polygon.
+     * @param {number} [radius] - The radius of the Polygon Layer (optional).
+     * @returns {this} The current instance for chaining.
+     */
+    setSize(width: ScaleType, height: ScaleType, count: number, radius?: number): this;
+    /**
+     * Sets the color of the Polygon layer.
+     * @param {ColorType} [color] - The color of the layer.
+     * @returns {this} The current instance for chaining.
+     * @throws {LazyError} If the color is not provided or invalid.
+     */
+    setColor(color: ColorType): this;
+    /**
+     * Sets the stroke properties of the Polygon Layer.
+     * @param {number} [width] - The width of the stroke.
+     * @param {string} [cap] - The cap style of the stroke.
+     * @param {string} [join] - The join style of the stroke.
+     * @param {number[]} [dash] - The dash pattern of the stroke.
+     * @param {number} [dashOffset] - The dash offset of the stroke.
+     * @param {number} [miterLimit] - The miter limit of the stroke.
+     * @returns {this} The current instance for chaining.
+     */
+    setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
+    /**
+     * Draws the Polygon layer on the given canvas context.
+     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
+     * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
+     * @param {LayersManager} [manager] - The layer's manager.
+     * @param {boolean} [debug] - Whether to enable debug logging.
+     */
+    draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
+    /**
+     * Converts the Polygon layer to a JSON representation.
+     * @returns {IPolygonLayer} The JSON representation of the Polygon layer.
+     */
+    toJSON(): IPolygonLayer;
+    /**
+     * Validates the properties of the Morph Layer.
+     * @param {IPolygonLayerProps} [data] - The properties to validate.
+     * @returns {IPolygonLayerProps} The validated properties.
+     */
+    protected validateProps(data: IPolygonLayerProps): IPolygonLayerProps;
+}

package/dist/structures/components/PolygonLayer.js

@@ -0,0 +1,208 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PolygonLayer = void 0;
+const BaseLayer_1 = require("./BaseLayer");
+const types_1 = require("../../types");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+const utils_1 = require("../../utils/utils");
+class PolygonLayer extends BaseLayer_1.BaseLayer {
+    props;
+    constructor(props, misc) {
+        super(types_1.LayerType.Polygon, props || {}, misc);
+        this.props = props ? props : {};
+        this.props = this.validateProps(this.props);
+    }
+    /**
+     * Sets the size of the Polygon layer.
+     * @param {ScaleType} [width] - The width of the Polygon layer.
+     * @param {ScaleType} [height] - The height of the Polygon layer.
+     * @param {number} [count] - The number of sides of the polygon.
+     * @param {number} [radius] - The radius of the Polygon Layer (optional).
+     * @returns {this} The current instance for chaining.
+     */
+    setSize(width, height, count, radius) {
+        this.props.size = {
+            width: width,
+            height: height,
+            count: count,
+            radius: radius || 0,
+        };
+        return this;
+    }
+    /**
+     * Sets the color of the Polygon layer.
+     * @param {ColorType} [color] - The color of the layer.
+     * @returns {this} The current instance for chaining.
+     * @throws {LazyError} If the color is not provided or invalid.
+     */
+    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');
+        this.props.fillStyle = color;
+        return this;
+    }
+    /**
+     * Sets the stroke properties of the Polygon Layer.
+     * @param {number} [width] - The width of the stroke.
+     * @param {string} [cap] - The cap style of the stroke.
+     * @param {string} [join] - The join style of the stroke.
+     * @param {number[]} [dash] - The dash pattern of the stroke.
+     * @param {number} [dashOffset] - The dash offset of the stroke.
+     * @param {number} [miterLimit] - The miter limit of the stroke.
+     * @returns {this} The current instance for chaining.
+     */
+    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,
+        };
+        this.props.filled = false; // Ensure filled is false when stroke is set
+        return this;
+    }
+    /**
+     * Draws the Polygon layer on the given canvas context.
+     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
+     * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
+     * @param {LayersManager} [manager] - The layer's manager.
+     * @param {boolean} [debug] - Whether to enable debug logging.
+     */
+    async draw(ctx, canvas, manager, debug) {
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { xs, ys, w } = parcer.parseBatch({
+            xs: { v: this.props.x },
+            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            w: { v: this.props.size.width },
+        });
+        const h = parcer.parse(this.props.size.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(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, { debug, layer: { width: w, height: h, x: xs, y: ys, align: this.props.centring }, manager });
+        if (debug)
+            LazyUtil_1.LazyLog.log('none', `PolygonLayer:`, { x, y, w, h, count: this.props.size.count, radius: this.props.size.radius });
+        ctx.save();
+        ctx.beginPath();
+        // Calculate polygon vertices
+        const vertices = [];
+        for (let i = 0; i < this.props.size.count; i++) {
+            const angle = (i / this.props.size.count) * (2 * Math.PI) - Math.PI / 2;
+            vertices.push({
+                x: x + w / 2 + (w / 2) * Math.cos(angle),
+                y: y + h / 2 + (h / 2) * Math.sin(angle)
+            });
+        }
+        if (this.props.size.radius > 0) {
+            // Draw polygon with rounded corners
+            for (let i = 0; i < vertices.length; i++) {
+                const current = vertices[i];
+                const next = vertices[(i + 1) % vertices.length];
+                const prev = vertices[(i - 1 + vertices.length) % vertices.length];
+                // Calculate vectors from current vertex to adjacent vertices
+                const dx1 = current.x - prev.x;
+                const dy1 = current.y - prev.y;
+                const dx2 = next.x - current.x;
+                const dy2 = next.y - current.y;
+                // Normalize vectors
+                const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+                const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+                const ndx1 = dx1 / len1;
+                const ndy1 = dy1 / len1;
+                const ndx2 = dx2 / len2;
+                const ndy2 = dy2 / len2;
+                // Calculate the maximum radius based on edge lengths
+                const maxRadius = Math.max(len1 / 2, len2 / 2);
+                const cornerRadius = Math.min(this.props.size.radius, maxRadius);
+                // Calculate arc start and end points
+                const arcStart = {
+                    x: current.x - ndx1 * cornerRadius,
+                    y: current.y - ndy1 * cornerRadius
+                };
+                const arcEnd = {
+                    x: current.x + ndx2 * cornerRadius,
+                    y: current.y + ndy2 * cornerRadius
+                };
+                if (i === 0) {
+                    ctx.moveTo(arcStart.x, arcStart.y);
+                }
+                else {
+                    ctx.lineTo(arcStart.x, arcStart.y);
+                }
+                // Draw arc at corner
+                ctx.arcTo(current.x, current.y, arcEnd.x, arcEnd.y, cornerRadius);
+            }
+            ctx.closePath();
+        }
+        else {
+            // Draw polygon without rounded corners (original behavior)
+            for (let i = 0; i < vertices.length; i++) {
+                if (i === 0) {
+                    ctx.moveTo(vertices[i].x, vertices[i].y);
+                }
+                else {
+                    ctx.lineTo(vertices[i].x, vertices[i].y);
+                }
+            }
+            ctx.closePath();
+        }
+        if (this.props.filled) {
+            ctx.fillStyle = fillStyle;
+            ctx.fill();
+        }
+        if (this.props.stroke && this.props.stroke.width > 0) {
+            ctx.lineWidth = this.props.stroke.width;
+            ctx.lineCap = this.props.stroke.cap;
+            ctx.lineJoin = this.props.stroke.join;
+            ctx.setLineDash(this.props.stroke.dash);
+            ctx.lineDashOffset = this.props.stroke.dashOffset;
+            ctx.miterLimit = this.props.stroke.miterLimit;
+            ctx.strokeStyle = fillStyle;
+            ctx.stroke();
+        }
+        ctx.restore();
+    }
+    /**
+     * Converts the Polygon layer to a JSON representation.
+     * @returns {IPolygonLayer} The JSON representation of the Polygon layer.
+     */
+    toJSON() {
+        let data = super.toJSON();
+        let copy = { ...this.props };
+        for (const key of ['x', 'y', 'size.width', 'size.height', 'fillStyle']) {
+            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+                copy[key] = copy[key].toJSON();
+            }
+        }
+        return { ...data, props: copy };
+    }
+    /**
+     * Validates the properties of the Morph Layer.
+     * @param {IPolygonLayerProps} [data] - The properties to validate.
+     * @returns {IPolygonLayerProps} The validated properties.
+     */
+    validateProps(data) {
+        return {
+            ...super.validateProps(data),
+            size: {
+                width: data.size?.width || 100,
+                height: data.size?.height || 100,
+                radius: data.size?.radius || 0,
+                count: data.size?.count || 3
+            },
+            filled: data.filled !== undefined ? data.filled : true,
+            fillStyle: data.fillStyle || '#000000',
+            stroke: {
+                width: data.stroke?.width || 1,
+                cap: data.stroke?.cap || 'butt',
+                join: data.stroke?.join || 'miter',
+                dashOffset: data.stroke?.dashOffset || 0,
+                dash: data.stroke?.dash || [],
+                miterLimit: data.stroke?.miterLimit || 10
+            }
+        };
+    }
+}
+exports.PolygonLayer = PolygonLayer;

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

@@ -3,7 +3,7 @@ import { ColorType, ScaleType, Point, LayerType } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
- * Interface representing a Quadratic Layer.
+ * Interface representing a Quadratic layer.
  */
 export interface IQuadraticLayer extends IBaseLayer {
     /**
@@ -11,12 +11,12 @@ export interface IQuadraticLayer extends IBaseLayer {
      */
     type: LayerType.QuadraticCurve;
     /**
-     * The properties specific to the Quadratic Layer.
+     * The properties specific to the Quadratic layer.
      */
     props: IQuadraticLayerProps;
 }
 /**
- * Interface representing the properties of a Quadratic Layer.
+ * Interface representing the properties of a Quadratic layer.
  */
 export interface IQuadraticLayerProps extends IBaseLayerProps {
     /**
@@ -66,16 +66,16 @@ export interface IQuadraticLayerProps extends IBaseLayerProps {
     };
 }
 /**
- * Class representing a Quadratic Layer, extending the BaseLayer class.
+ * Class representing a Quadratic layer, extending the BaseLayer class.
  */
 export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
     /**
-     * The properties of the Quadratic Layer.
+     * The properties of the Quadratic layer.
      */
     props: IQuadraticLayerProps;
     /**
      * Constructs a new QuadraticLayer instance.
-     * @param {IQuadraticLayerProps} [props] - The properties of the Quadratic Layer.
+     * @param {IQuadraticLayerProps} [props] - The properties of the Quadratic layer.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(props?: IQuadraticLayerProps, misc?: IBaseLayerMisc);
@@ -115,7 +115,7 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
      * Calculates the bounding box of the quadratic curve.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @returns {Object} The bounding box details including max, min, center, width, and height.
      */
     getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
@@ -138,17 +138,17 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
      * Draws the quadratic curve on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
-     * Converts the Quadratic Layer to a JSON representation.
-     * @returns {IQuadraticLayer} The JSON representation of the Quadratic Layer.
+     * Converts the Quadratic layer to a JSON representation.
+     * @returns {IQuadraticLayer} The JSON representation of the Quadratic layer.
      */
     toJSON(): IQuadraticLayer;
     /**
-     * Validates the properties of the Quadratic Layer.
+     * Validates the properties of the Quadratic layer.
      * @param {IQuadraticLayerProps} [data] - The properties to validate.
      * @returns {IQuadraticLayerProps} The validated properties.
      */

package/dist/structures/components/QuadraticLayer.js

@@ -6,16 +6,16 @@ const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
 /**
- * Class representing a Quadratic Layer, extending the BaseLayer class.
+ * Class representing a Quadratic layer, extending the BaseLayer class.
  */
 class QuadraticLayer extends BaseLayer_1.BaseLayer {
     /**
-     * The properties of the Quadratic Layer.
+     * The properties of the Quadratic layer.
      */
     props;
     /**
      * Constructs a new QuadraticLayer instance.
-     * @param {IQuadraticLayerProps} [props] - The properties of the Quadratic Layer.
+     * @param {IQuadraticLayerProps} [props] - The properties of the Quadratic layer.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(props, misc) {
@@ -82,7 +82,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
      * Calculates the bounding box of the quadratic curve.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @returns {Object} The bounding box details including max, min, center, width, and height.
      */
     getBoundingBox(ctx, canvas, manager) {
@@ -102,7 +102,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
      * Draws the quadratic curve on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     async draw(ctx, canvas, manager, debug) {
@@ -139,8 +139,8 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
         ctx.restore();
     }
     /**
-     * Converts the Quadratic Layer to a JSON representation.
-     * @returns {IQuadraticLayer} The JSON representation of the Quadratic Layer.
+     * Converts the Quadratic layer to a JSON representation.
+     * @returns {IQuadraticLayer} The JSON representation of the Quadratic layer.
      */
     toJSON() {
         let data = super.toJSON();
@@ -153,7 +153,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
         return { ...data, props: copy };
     }
     /**
-     * Validates the properties of the Quadratic Layer.
+     * Validates the properties of the Quadratic layer.
      * @param {IQuadraticLayerProps} [data] - The properties to validate.
      * @returns {IQuadraticLayerProps} The validated properties.
      */

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

@@ -1,9 +1,9 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ScaleType, ColorType, AnyWeight, AnyTextAlign, AnyTextBaseline, AnyTextDirection, LineCap, LineJoin, LayerType, SubStringColor } from "../../types";
+import { AnyTextAlign, AnyTextBaseline, AnyTextDirection, AnyWeight, ColorType, LayerType, LineCap, LineJoin, ScaleType, SubStringColor } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
- * Interface representing a Text Layer.
+ * Interface representing a Text layer.
  */
 export interface ITextLayer extends IBaseLayer {
     /**
@@ -11,12 +11,12 @@ export interface ITextLayer extends IBaseLayer {
      */
     type: LayerType.Text;
     /**
-     * The properties specific to the Text Layer.
+     * The properties specific to the Text layer.
      */
     props: ITextLayerProps;
 }
 /**
- * Interface representing the properties of a Text Layer.
+ * Interface representing the properties of a Text layer.
  */
 export interface ITextLayerProps extends IBaseLayerProps {
     /**
@@ -66,15 +66,15 @@ export interface ITextLayerProps extends IBaseLayerProps {
         spacing?: number;
     };
     /**
-     * The size of the text layer, including width and height.
+     * The size of the Text layer, including width and height.
      */
     size: {
         /**
-         * The width of the text layer.
+         * The width of the Text layer.
          */
         width: ScaleType;
         /**
-         * The height of the text layer.
+         * The height of the Text layer.
          */
         height: ScaleType;
     };
@@ -129,7 +129,7 @@ export interface ITextLayerProps extends IBaseLayerProps {
     };
 }
 /**
- * Class representing a Text Layer, extending the BaseLayer class.
+ * Class representing a Text layer, extending the BaseLayer class.
  */
 export declare class TextLayer extends BaseLayer<ITextLayerProps> {
     /**
@@ -138,7 +138,7 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
     props: ITextLayerProps;
     /**
      * Constructs a new TextLayer instance.
-     * @param {ITextLayerProps} [props] - The properties of the Text Layer.
+     * @param {ITextLayerProps} [props] - The properties of the Text layer.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(props?: ITextLayerProps, misc?: IBaseLayerMisc);
@@ -232,7 +232,7 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
      * Draws the text layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
@@ -249,12 +249,12 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
      */
     private drawText;
     /**
-     * Converts the Text Layer to a JSON representation.
-     * @returns {ITextLayer} The JSON representation of the Text Layer.
+     * Converts the Text layer to a JSON representation.
+     * @returns {ITextLayer} The JSON representation of the Text layer.
      */
     toJSON(): ITextLayer;
     /**
-     * Validates the properties of the Text Layer.
+     * Validates the properties of the Text layer.
      * @param {ITextLayerProps} [data] - The properties to validate.
      * @returns {ITextLayerProps} The validated properties.
      */

package/dist/structures/components/TextLayer.js

@@ -6,7 +6,7 @@ const types_1 = require("../../types");
 const LazyUtil_1 = require("../../utils/LazyUtil");
 const utils_1 = require("../../utils/utils");
 /**
- * Class representing a Text Layer, extending the BaseLayer class.
+ * Class representing a Text layer, extending the BaseLayer class.
  */
 class TextLayer extends BaseLayer_1.BaseLayer {
     /**
@@ -15,7 +15,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     props;
     /**
      * Constructs a new TextLayer instance.
-     * @param {ITextLayerProps} [props] - The properties of the Text Layer.
+     * @param {ITextLayerProps} [props] - The properties of the Text layer.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(props, misc) {
@@ -186,7 +186,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
      * Draws the text layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     async draw(ctx, canvas, manager, debug) {
@@ -214,7 +214,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
             ctx.textBaseline = this.props.baseline;
         if (this.props.direction)
             ctx.direction = this.props.direction;
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, layer: { width: w, height: h, x, y, align: 'none' }, manager });
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, layer: { width: w, height: h, x, y, align: 'center' }, manager });
         if (this.props.multiline.enabled) {
             const words = this.props.text.split(' ');
             let lines = [];
@@ -371,8 +371,8 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         ctx.textAlign = originalAlign;
     }
     /**
-     * Converts the Text Layer to a JSON representation.
-     * @returns {ITextLayer} The JSON representation of the Text Layer.
+     * Converts the Text layer to a JSON representation.
+     * @returns {ITextLayer} The JSON representation of the Text layer.
      */
     toJSON() {
         let data = super.toJSON();
@@ -385,7 +385,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         return { ...data, props: copy };
     }
     /**
-     * Validates the properties of the Text Layer.
+     * Validates the properties of the Text layer.
      * @param {ITextLayerProps} [data] - The properties to validate.
      * @returns {ITextLayerProps} The validated properties.
      */

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

@@ -8,3 +8,4 @@ export * from './Group';
 export * from './LineLayer';
 export * from './QuadraticLayer';
 export * from './Path2DLayer';
+export * from './PolygonLayer';

package/dist/structures/components/index.js

@@ -24,3 +24,4 @@ __exportStar(require("./Group"), exports);
 __exportStar(require("./LineLayer"), exports);
 __exportStar(require("./QuadraticLayer"), exports);
 __exportStar(require("./Path2DLayer"), exports);
+__exportStar(require("./PolygonLayer"), exports);

package/dist/structures/helpers/Gradient.js

@@ -128,14 +128,20 @@ class Gradient {
         switch (gradientData.type) {
             case types_1.GradientType.Linear:
             case "linear":
-                if (gradientData.type === "linear" && (gradientData.angle || gradientData.angle === 0) && opts.layer) {
+                if (gradientData.type === "linear" && (gradientData.angle || gradientData.angle === 0) && opts.layer && gradientData.points.length < 2) {
                     const { width, height, x, y, align } = opts.layer;
                     const cx = this.getPosition(x, width, align, 'x');
                     const cy = this.getPosition(y, height, align, 'y');
+                    if (opts.debug)
+                        LazyUtil_1.LazyLog.log('none', `Center for angle calculation:`, { cx, cy });
                     const [p1, p2] = this.getLinearGradientPoints(cx, cy, width, height, gradientData.angle);
+                    if (opts.debug)
+                        LazyUtil_1.LazyLog.log('none', `Linear Gradient Points from angle:`, { p1, p2 });
                     gradient = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
                 }
                 else {
+                    if (opts.debug)
+                        LazyUtil_1.LazyLog.log('none', `Linear Gradient created from points.`);
                     gradient = ctx.createLinearGradient(x0, y0, x1 || x0, y1 || y0);
                 }
                 break;

package/dist/structures/helpers/readers/JSONReader.js

@@ -144,6 +144,8 @@ class JSONReader {
                     return new components_1.ClearLayer(layer.props, misc);
                 case types_1.LayerType.Path:
                     return new components_1.Path2DLayer(layer.props, misc).setColor(this.fillParse(layer));
+                case types_1.LayerType.Polygon:
+                    return new components_1.PolygonLayer(layer.props, misc).setColor(this.fillParse(layer));
                 case types_1.LayerType.Group:
                     return new components_1.Group(misc)
                         .add(...layer.layers.map((l) => this.layerParse(l)));

package/dist/types/enum.d.ts

@@ -11,7 +11,9 @@ export declare enum LayerType {
     Morph = "morph",
     Text = "text",
     Group = "group",
-    Clear = "clear"
+    Clear = "clear",
+    Polygon = "polygon",
+    Custom = "custom"
 }
 export declare enum LayerScaleType {
     Pixel = "px",

package/dist/types/enum.js

@@ -16,6 +16,8 @@ var LayerType;
     LayerType["Text"] = "text";
     LayerType["Group"] = "group";
     LayerType["Clear"] = "clear";
+    LayerType["Polygon"] = "polygon";
+    LayerType["Custom"] = "custom";
 })(LayerType || (exports.LayerType = LayerType = {}));
 var LayerScaleType;
 (function (LayerScaleType) {

package/dist/types/types.d.ts

@@ -15,7 +15,9 @@ import {
     ITextLayer,
     IQuadraticLayer,
     ILineLayer,
-    IPath2DLayer
+    IPath2DLayer,
+    IPolygonLayer,
+    PolygonLayer
 } from "../structures/components";
 import {
     FontWeight,
@@ -39,9 +41,9 @@ export type StringColorType = `rgba(${number}, ${number}, ${number}, ${number})`
 
 export type ColorType = Gradient | Pattern | StringColorType;
 
-export type JSONLayer = IMorphLayer | IImageLayer | ITextLayer | IBezierLayer | IQuadraticLayer | ILineLayer | IClearLayer | IPath2DLayer;
+export type JSONLayer = IMorphLayer | IImageLayer | ITextLayer | IBezierLayer | IQuadraticLayer | ILineLayer | IClearLayer | IPath2DLayer | IPolygonLayer;
 
-export type AnyLayer = MorphLayer | ImageLayer | TextLayer | BezierLayer | QuadraticLayer | LineLayer | ClearLayer | Path2DLayer;
+export type AnyLayer = MorphLayer | ImageLayer | TextLayer | BezierLayer | QuadraticLayer | LineLayer | ClearLayer | Path2DLayer | PolygonLayer;
 
 export type AnyWeight = FontWeight | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 

package/dist/utils/utils.d.ts

@@ -1,5 +1,4 @@
-import type { AnyCentring, AnyLayer, AnyTextAlign, ColorType, PointNumber, ScaleType, SubStringColor, Transform } from "../types";
-import { LayerType } from "../types";
+import { AnyCentring, AnyLayer, AnyTextAlign, ColorType, LayerType, PointNumber, ScaleType, SubStringColor, Transform } from "../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../structures/managers";
 import { Group } from "../structures/components";

package/dist/utils/utils.js

@@ -169,6 +169,7 @@ function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, ty
                 case types_1.LayerType.BezierCurve:
                 case types_1.LayerType.QuadraticCurve:
                 case types_1.LayerType.Line:
+                case types_1.LayerType.Polygon:
                     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)));
@@ -229,6 +230,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Image:
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
+                case types_1.LayerType.Polygon:
                     x -= width / 2;
                     y -= height / 2;
                     break;
@@ -240,6 +242,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Image:
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
+                case types_1.LayerType.Polygon:
                     x -= width / 2;
                     y -= height;
                     break;
@@ -251,6 +254,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Image:
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
+                case types_1.LayerType.Polygon:
                     x -= width / 2;
                     y -= height;
                     break;
@@ -262,6 +266,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Image:
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
+                case types_1.LayerType.Polygon:
                     y -= height / 2;
                     break;
             }
@@ -272,6 +277,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Image:
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
+                case types_1.LayerType.Polygon:
                     y -= height;
                     break;
             }
@@ -285,6 +291,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Image:
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
+                case types_1.LayerType.Polygon:
                     x -= width;
                     y -= height / 2;
                     break;
@@ -296,6 +303,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Image:
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
+                case types_1.LayerType.Polygon:
                     x -= width;
                     y -= height;
                     break;
@@ -307,6 +315,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Image:
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
+                case types_1.LayerType.Polygon:
                     x -= width;
                     break;
             }
@@ -376,9 +385,14 @@ function resizeLayers(layers, ratio) {
                     layer.props.size.width = resize(layer.props.size.width, ratio);
                     layer.props.size.height = resize(layer.props.size.height, ratio);
                     if ('radius' in layer.props.size) {
-                        for (const corner in layer.props.size.radius) {
-                            // @ts-ignore
-                            layer.props.size.radius[corner] = resize(layer.props.size.radius[corner], ratio);
+                        if (typeof layer.props.size.radius === 'number') {
+                            layer.props.size.radius = resize(layer.props.size.radius, ratio);
+                        }
+                        else if (typeof layer.props.size.radius === 'object') {
+                            for (const corner in layer.props.size.radius) {
+                                // @ts-ignore
+                                layer.props.size.radius[corner] = resize(layer.props.size.radius[corner], ratio);
+                            }
                         }
                     }
                 }

package/package.json

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