@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.10

package/dist/structures/components/MorphLayer.js

@@ -3,17 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MorphLayer = void 0;
 const BaseLayer_1 = require("./BaseLayer");
 const types_1 = require("../../types");
-const utils_1 = require("../../utils/utils");
-const LazyUtil_1 = require("../../utils/LazyUtil");
+const utils_1 = require("../../utils");
 const helpers_1 = require("../helpers");
 /**
  * Class representing a Morph Layer, extending the BaseLayer class.
  */
 class MorphLayer extends BaseLayer_1.BaseLayer {
-    /**
-     * The properties of the Morph Layer.
-     */
-    props;
     /**
      * Constructs a new MorphLayer instance.
      * @param {IMorphLayerProps} [props] - The properties of the Morph Layer.
@@ -47,10 +42,10 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
      */
     setColor(color) {
         if (!color)
-            throw new LazyUtil_1.LazyError('The color of the layer must be provided');
+            throw new utils_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;
+            throw new utils_1.LazyError("The color of the layer must be a valid color");
+        this.props.color = color;
         return this;
     }
     /**
@@ -66,13 +61,12 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     setStroke(width, cap, join, dash, dashOffset, miterLimit) {
         this.props.stroke = {
             width,
-            cap: cap || 'butt',
-            join: join || 'miter',
+            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;
     }
     /**
@@ -85,52 +79,53 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     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) },
+            xs: { v: this.props.position?.x || 0 },
+            ys: { v: this.props.position?.y || 0, options: utils_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));
+        const h = parcer.parse(this.props.size.height, utils_1.defaultArg.wh(w), utils_1.defaultArg.vl(true));
         const rad = {};
-        if (typeof this.props.size.radius === 'object' && this.props.size.radius !== helpers_1.Link) {
+        if (typeof this.props.size.radius === "object" && this.props.size.radius !== helpers_1.Link) {
             for (const corner in this.props.size.radius) {
                 // @ts-ignore
-                rad[corner] = parcer.parse(this.props.size.radius[corner], LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
+                rad[corner] = parcer.parse(
+                // @ts-ignore
+                this.props.size.radius[corner], utils_1.defaultArg.wh(w / 2, h / 2), utils_1.defaultArg.vl(false, true));
             }
         }
         let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, layer: { width: w, height: h, x: xs, y: ys, align: this.props.centring }, manager });
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
+            debug,
+            layer: { width: w, height: h, x: xs, y: ys, align: this.props.centring },
+            manager,
+        });
         if (debug)
-            LazyUtil_1.LazyLog.log('none', `MorphLayer:`, { x, y, w, h, rad });
+            utils_1.LazyLog.log("none", `MorphLayer:`, { x, y, w, h, rad });
         ctx.save();
-        (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type });
+        if (this.props.transform) {
+            (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type });
+        }
         ctx.beginPath();
         if (Object.keys(rad).length > 0) {
-            ctx.moveTo(x + (w / 2), y);
-            ctx.arcTo(x + w, y, x + w, y + (h / 2), rad.rightTop || rad.all || 0);
-            ctx.arcTo(x + w, y + h, x + (w / 2), y + h, rad.rightBottom || rad.all || 0);
-            ctx.arcTo(x, y + h, x, y + (h / 2), rad.leftBottom || rad.all || 0);
-            ctx.arcTo(x, y, x + (w / 2), y, rad.leftTop || rad.all || 0);
+            ctx.moveTo(x + w / 2, y);
+            ctx.arcTo(x + w, y, x + w, y + h / 2, rad.rightTop || rad.all || 0);
+            ctx.arcTo(x + w, y + h, x + w / 2, y + h, rad.rightBottom || rad.all || 0);
+            ctx.arcTo(x, y + h, x, y + h / 2, rad.leftBottom || rad.all || 0);
+            ctx.arcTo(x, y, x + w / 2, y, rad.leftTop || rad.all || 0);
         }
         else {
             ctx.rect(x, y, w, h);
         }
         ctx.closePath();
-        (0, utils_1.drawShadow)(ctx, this.props.shadow);
-        (0, utils_1.opacity)(ctx, this.props.opacity);
-        (0, utils_1.filters)(ctx, this.props.filter);
-        if (this.props.filled) {
-            ctx.fillStyle = fillStyle;
-            ctx.fill();
+        utils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+        utils_1.DrawUtils.opacity(ctx, this.props.opacity);
+        utils_1.DrawUtils.filters(ctx, this.props.filter);
+        utils_1.DrawUtils.fillStyle(ctx, fillStyle, this.props.stroke);
+        if (this.props.stroke) {
+            ctx.stroke();
         }
         else {
-            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.stroke();
+            ctx.fill();
         }
         ctx.restore();
     }
@@ -141,8 +136,8 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     toJSON() {
         let data = super.toJSON();
         let copy = { ...this.props };
-        for (const key of ['x', 'y', 'size.width', 'size.height', 'size.radius', 'fillStyle']) {
-            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+        for (const key of ["x", "y", "size.width", "size.height", "size.radius", "fillStyle"]) {
+            if (copy[key] && typeof copy[key] === "object" && "toJSON" in copy[key]) {
                 copy[key] = copy[key].toJSON();
             }
         }
@@ -156,21 +151,12 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            filled: data.filled || true,
-            fillStyle: data.fillStyle || '#000000',
+            color: data.color || "#000000",
             size: {
                 width: data.size?.width || 100,
                 height: data.size?.height || 100,
                 radius: data.size?.radius || { all: 0 },
             },
-            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,
-            },
         };
     }
 }

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,45 +18,16 @@ 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.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * 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;
-    };
-    loadFromSVG: boolean;
-    clipPath: boolean;
+    stroke?: StrokeOptions;
+    loadFromSVG?: boolean;
+    clipPath?: boolean;
 }
 export declare class Path2DLayer extends BaseLayer<IPath2DLayerProps> {
     id: string;
@@ -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

@@ -3,17 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Path2DLayer = void 0;
 const canvas_1 = require("@napi-rs/canvas");
 const types_1 = require("../../types");
-const utils_1 = require("../../utils/utils");
+const utils_1 = require("../../utils");
 const BaseLayer_1 = require("./BaseLayer");
-const LazyUtil_1 = require("../../utils/LazyUtil");
 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,10 +23,10 @@ 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 utils_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;
+            throw new utils_1.LazyError("The color of the layer must be a valid color");
+        this.props.color = color;
         return this;
     }
     setPath(path) {
@@ -139,28 +134,33 @@ 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 (debug)
+            utils_1.LazyLog.log("none", `Drawing Path2D Layer: `, {
+                layerId: this.id,
+                type: this.type,
+                path: this.props.path2D.toSVGString(),
+            });
+        if (this.props.transform) {
+            (0, utils_1.transform)(ctx, this.props.transform, { width: 0, height: 0, x: 0, y: 0, type: this.type });
+        }
+        utils_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.color) {
+            let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, { debug, manager });
+            if (this.props.globalComposite) {
+                ctx.globalCompositeOperation = this.props.globalComposite;
+            }
+            utils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+            utils_1.DrawUtils.filters(ctx, this.props.filter);
+            utils_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 +175,7 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
             type: this.type,
             zIndex: this.zIndex,
             visible: this.visible,
-            props: this.props
+            props: this.props,
         };
     }
     /**
@@ -186,19 +186,10 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            filled: data.filled || true,
-            fillStyle: data.fillStyle || '#000000',
+            color: data.color || "#000000",
             path2D: data.path2D || new canvas_1.Path2D(),
-            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
-            },
             loadFromSVG: data.loadFromSVG || false,
-            clipPath: data.clipPath || false
+            clipPath: data.clipPath || false,
         };
     }
 }

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

@@ -1,5 +1,5 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ColorType, LayerType, ScaleType } from "../../types";
+import { ColorType, LayerType, ScaleType, StrokeOptions } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 export interface IPolygonLayer extends IBaseLayer {
@@ -34,43 +34,14 @@ export interface IPolygonLayerProps extends IBaseLayerProps {
          */
         count: number;
     };
-    /**
-     * Whether the layer is filled.
-     */
-    filled: boolean;
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: 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;
-    };
+    stroke?: StrokeOptions;
 }
 export declare class PolygonLayer extends BaseLayer<IPolygonLayerProps> {
     props: IPolygonLayerProps;

package/dist/structures/components/PolygonLayer.js

@@ -3,10 +3,8 @@ 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 utils_1 = require("../../utils");
 class PolygonLayer extends BaseLayer_1.BaseLayer {
-    props;
     constructor(props, misc) {
         super(types_1.LayerType.Polygon, props || {}, misc);
         this.props = props ? props : {};
@@ -37,10 +35,10 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
      */
     setColor(color) {
         if (!color)
-            throw new LazyUtil_1.LazyError('The color of the layer must be provided');
+            throw new utils_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;
+            throw new utils_1.LazyError("The color of the layer must be a valid color");
+        this.props.color = color;
         return this;
     }
     /**
@@ -56,13 +54,12 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
     setStroke(width, cap, join, dash, dashOffset, miterLimit) {
         this.props.stroke = {
             width,
-            cap: cap || 'butt',
-            join: join || 'miter',
+            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;
     }
     /**
@@ -75,15 +72,26 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
     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) },
+            xs: { v: this.props.position?.x || 0 },
+            ys: { v: this.props.position?.y || 0, options: utils_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));
+        const h = parcer.parse(this.props.size.height, utils_1.defaultArg.wh(w), utils_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 });
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
+            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 });
+            utils_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
@@ -92,7 +100,7 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
             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)
+                y: y + h / 2 + (h / 2) * Math.sin(angle),
             });
         }
         if (this.props.size.radius > 0) {
@@ -119,11 +127,11 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
                 // Calculate arc start and end points
                 const arcStart = {
                     x: current.x - ndx1 * cornerRadius,
-                    y: current.y - ndy1 * cornerRadius
+                    y: current.y - ndy1 * cornerRadius,
                 };
                 const arcEnd = {
                     x: current.x + ndx2 * cornerRadius,
-                    y: current.y + ndy2 * cornerRadius
+                    y: current.y + ndy2 * cornerRadius,
                 };
                 if (i === 0) {
                     ctx.moveTo(arcStart.x, arcStart.y);
@@ -148,20 +156,16 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
             }
             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;
+        utils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+        utils_1.DrawUtils.opacity(ctx, this.props.opacity);
+        utils_1.DrawUtils.filters(ctx, this.props.filter);
+        utils_1.DrawUtils.fillStyle(ctx, fillStyle, this.props.stroke);
+        if (this.props.stroke) {
             ctx.stroke();
         }
+        else {
+            ctx.fill();
+        }
         ctx.restore();
     }
     /**
@@ -171,8 +175,8 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
     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]) {
+        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();
             }
         }
@@ -190,18 +194,9 @@ class PolygonLayer extends BaseLayer_1.BaseLayer {
                 width: data.size?.width || 100,
                 height: data.size?.height || 100,
                 radius: data.size?.radius || 0,
-                count: data.size?.count || 3
+                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
-            }
+            color: data.color || "#000000",
         };
     }
 }

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

@@ -1,5 +1,5 @@
 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";
 /**
@@ -19,14 +19,28 @@ export interface IQuadraticLayer extends IBaseLayer {
  * Interface representing the properties of a Quadratic layer.
  */
 export interface IQuadraticLayerProps extends IBaseLayerProps {
+    position: {
+        /**
+         * The x coordinate of the quadratic curve's starting point.
+         */
+        x: ScaleType;
+        /**
+         * The y coordinate of the quadratic curve's starting point.
+         */
+        y: ScaleType;
+        /**
+         * 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.
      */
@@ -34,36 +48,11 @@ export interface IQuadraticLayerProps extends IBaseLayerProps {
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * 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.
@@ -87,12 +76,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.