@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.3

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

@@ -1,7 +1,8 @@
-import { Canvas, DOMMatrix2DInit, FillType, Path2D, PathOp, SKRSContext2D, StrokeOptions, SvgCanvas } from "@napi-rs/canvas";
+import { Canvas, DOMMatrix2DInit, FillType, Path2D, PathOp, SKRSContext2D, SvgCanvas, StrokeOptions as SKRSStrokeOptions } from "@napi-rs/canvas";
 import { ColorType, LayerType } from "../../types";
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
 import { LayersManager } from "../managers";
+import { StrokeOptions } from "../../types";
 export interface IPath2DLayer extends IBaseLayer {
     /**
      * The type of the layer, which is `Path`.
@@ -17,10 +18,6 @@ export interface IPath2DLayerProps extends IBaseLayerProps {
      * The Path2D object representing the shape of the layer.
      */
     path2D: Path2D;
-    /**
-     * Whether the layer is filled.
-     */
-    filled: boolean;
     /**
      * The fill style (color or pattern) of the layer.
      */
@@ -28,32 +25,7 @@ export interface IPath2DLayerProps extends IBaseLayerProps {
     /**
      * The stroke properties of the Path2D.
      */
-    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;
-    };
+    stroke: StrokeOptions;
     loadFromSVG: boolean;
     clipPath: boolean;
 }
@@ -85,7 +57,7 @@ export declare class Path2DLayer extends BaseLayer<IPath2DLayerProps> {
     moveTo(x: number, y: number): this;
     quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this;
     rect(x: number, y: number, width: number, height: number): this;
-    stroke(stroke?: StrokeOptions): this;
+    stroke(stroke?: SKRSStrokeOptions): this;
     op(path: Path2D, op: PathOp): this;
     getFillType(): FillType;
     getFillTypeString(): string;

package/dist/structures/components/Path2DLayer.js

@@ -6,14 +6,11 @@ const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const BaseLayer_1 = require("./BaseLayer");
 const LazyUtil_1 = require("../../utils/LazyUtil");
+const DrawUtils_1 = require("../../utils/DrawUtils");
 class Path2DLayer extends BaseLayer_1.BaseLayer {
-    id;
-    type = types_1.LayerType.Path;
-    zIndex;
-    visible;
-    props;
     constructor(props, misc) {
         super(types_1.LayerType.Path, props || {}, misc);
+        this.type = types_1.LayerType.Path;
         this.id = misc?.id || (0, utils_1.generateID)(types_1.LayerType.Path);
         this.zIndex = misc?.zIndex || 1;
         this.visible = misc?.visible || true;
@@ -28,9 +25,9 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
      */
     setColor(color) {
         if (!color)
-            throw new LazyUtil_1.LazyError('The color of the layer must be provided');
+            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');
+            throw new LazyUtil_1.LazyError("The color of the layer must be a valid color");
         this.props.fillStyle = color;
         return this;
     }
@@ -139,28 +136,27 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
     async draw(ctx, canvas, manager, debug) {
         ctx.beginPath();
         ctx.save();
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, manager });
-        (0, utils_1.transform)(ctx, this.props.transform, { width: 0, height: 0, x: 0, y: 0, 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.globalCompositeOperation = this.props.globalComposite;
+        if (this.props.transform) {
+            (0, utils_1.transform)(ctx, this.props.transform, { width: 0, height: 0, x: 0, y: 0, type: this.type });
+        }
+        DrawUtils_1.DrawUtils.opacity(ctx, this.props.opacity);
         if (this.props.clipPath) {
             ctx.clip(this.props.path2D);
         }
-        else if (this.props.filled) {
-            ctx.fillStyle = fillStyle;
-            ctx.fill(this.props.path2D);
-        }
-        else {
-            ctx.strokeStyle = fillStyle;
-            ctx.lineWidth = this.props.stroke.width;
-            ctx.lineCap = this.props.stroke.cap;
-            ctx.lineJoin = this.props.stroke.join;
-            ctx.miterLimit = this.props.stroke.miterLimit;
-            ctx.lineDashOffset = this.props.stroke.dashOffset;
-            ctx.setLineDash(this.props.stroke.dash);
-            ctx.stroke(this.props.path2D);
+        else if (this.props.fillStyle) {
+            let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, manager });
+            if (this.props.globalComposite) {
+                ctx.globalCompositeOperation = this.props.globalComposite;
+            }
+            DrawUtils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+            DrawUtils_1.DrawUtils.filters(ctx, this.props.filter);
+            DrawUtils_1.DrawUtils.fillStyle(ctx, fillStyle, this.props.stroke);
+            if (this.props.stroke) {
+                ctx.stroke(this.props.path2D);
+            }
+            else {
+                ctx.fill(this.props.path2D);
+            }
         }
         ctx.restore();
         ctx.closePath();
@@ -175,7 +171,7 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
             type: this.type,
             zIndex: this.zIndex,
             visible: this.visible,
-            props: this.props
+            props: this.props,
         };
     }
     /**
@@ -186,19 +182,18 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            filled: data.filled || true,
-            fillStyle: data.fillStyle || '#000000',
+            fillStyle: data.fillStyle || "#000000",
             path2D: data.path2D || new canvas_1.Path2D(),
             stroke: {
                 width: data.stroke?.width || 1,
-                cap: data.stroke?.cap || 'butt',
-                join: data.stroke?.join || 'miter',
+                cap: data.stroke?.cap || "butt",
+                join: data.stroke?.join || "miter",
                 dashOffset: data.stroke?.dashOffset || 0,
                 dash: data.stroke?.dash || [],
-                miterLimit: data.stroke?.miterLimit || 10
+                miterLimit: data.stroke?.miterLimit || 10,
             },
             loadFromSVG: data.loadFromSVG || false,
-            clipPath: data.clipPath || false
+            clipPath: data.clipPath || false,
         };
     }
 }

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

@@ -0,0 +1,95 @@
+import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
+import { ColorType, LayerType, ScaleType, StrokeOptions } 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;
+    };
+    /**
+     * The fill style (color or pattern) of the layer.
+     */
+    fillStyle: ColorType;
+    /**
+     * The stroke properties of the polygon.
+     */
+    stroke?: StrokeOptions;
+}
+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,205 @@
+"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");
+const DrawUtils_1 = require("../../utils/DrawUtils");
+class PolygonLayer extends BaseLayer_1.BaseLayer {
+    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,
+        };
+        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.position.x },
+            ys: { v: this.props.position.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();
+        }
+        DrawUtils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+        DrawUtils_1.DrawUtils.opacity(ctx, this.props.opacity);
+        DrawUtils_1.DrawUtils.filters(ctx, this.props.filter);
+        DrawUtils_1.DrawUtils.fillStyle(ctx, fillStyle, this.props.stroke);
+        if (this.props.stroke) {
+            ctx.stroke();
+        }
+        else {
+            ctx.fill();
+        }
+        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,
+            },
+            fillStyle: data.fillStyle || "#000000",
+        };
+    }
+}
+exports.PolygonLayer = PolygonLayer;

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

@@ -1,9 +1,9 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ColorType, ScaleType, Point, LayerType } from "../../types";
+import { ColorType, ScaleType, Point, LayerType, StrokeOptions } 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,22 +11,28 @@ 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 {
+    position: IBaseLayerProps["position"] & {
+        /**
+         * The end x coordinate of the quadratic curve.
+         */
+        endX: ScaleType;
+        /**
+         * The end y coordinate of the quadratic curve.
+         */
+        endY: ScaleType;
+    };
     /**
      * The control point of the quadratic curve, including x and y coordinates.
      */
     controlPoints: Array<Point>;
-    /**
-     * The end point of the quadratic curve, including x and y coordinates.
-     */
-    endPoint: Point;
     /**
      * Whether the layer is filled.
      */
@@ -38,44 +44,19 @@ export interface IQuadraticLayerProps extends IBaseLayerProps {
     /**
      * The stroke properties of the quadratic curve.
      */
-    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;
-    };
+    stroke: StrokeOptions;
 }
 /**
- * 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);
@@ -87,12 +68,14 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
      */
     setControlPoint(x: ScaleType, y: ScaleType): this;
     /**
-     * Sets the end point of the quadratic layer.
+     * Sets the position of the quadratic layer.
      * @param {ScaleType} [x] - The x-coordinate of the end point.
      * @param {ScaleType} [y] - The y-coordinate of the end point.
+     * @param {ScaleType} [endX] - The x-coordinate of the end point.
+     * @param {ScaleType} [endY] - The y-coordinate of the end point.
      * @returns {this} The current instance for chaining.
      */
-    setEndPosition(x: ScaleType, y: ScaleType): this;
+    setPosition(x: ScaleType, y: ScaleType, endX?: ScaleType, endY?: ScaleType): this;
     /**
      * Sets the color of the layer.
      * @param {ColorType} [color] - The color of the layer.
@@ -115,7 +98,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 +121,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.
      */