@nmmty/lazycanvas 0.5.3 → 0.6.0-dev.1d5786

package/dist/helpers/Utlis.d.ts

@@ -0,0 +1,28 @@
+import { Group } from "../structures/components";
+import { ColorType } from "../types";
+declare const Utils: {
+    grid(size: {
+        x: number;
+        y: number;
+    }, opts?: gridOptions): Group;
+    box(start: {
+        x: number;
+        y: number;
+    }, end: {
+        x: number;
+        y: number;
+    }, opts?: options): Group;
+};
+interface options {
+    color?: ColorType;
+    lineWidth?: number;
+}
+interface gridOptions extends options {
+    cellWith?: number;
+    cellHeight?: number;
+    startX?: number;
+    startY?: number;
+    endX?: number;
+    endY?: number;
+}
+export { Utils };

package/dist/helpers/Utlis.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Utils = void 0;
+const components_1 = require("../structures/components");
+const Utils = {
+    grid(size, opts) {
+        if (size.x === undefined || size.y === undefined) {
+            throw new Error("Size must have x and y properties");
+        }
+        if (opts === undefined)
+            opts = {};
+        if (opts.cellWith === undefined)
+            opts.cellWith = 10;
+        if (opts.cellHeight === undefined)
+            opts.cellHeight = 10;
+        if (opts.startX === undefined)
+            opts.startX = 0;
+        if (opts.startY === undefined)
+            opts.startY = 0;
+        if (opts.endX === undefined)
+            opts.endX = size.x;
+        if (opts.endY === undefined)
+            opts.endY = size.y;
+        if (opts.color === undefined)
+            opts.color = 'rgba(0, 0, 0, 0.5)';
+        if (opts.lineWidth === undefined)
+            opts.lineWidth = 1;
+        const options = { ...opts };
+        return new components_1.Group()
+            .setID(`grid-${options.cellWith}-${options.cellHeight}-${options.startX}-${options.startY}-${options.endX}-${options.endY}`)
+            .add(...Array.from({ length: Math.ceil((options.endX - options.startX) / options.cellWith) }, (_, i) => {
+            const x = options.startX + i * options.cellWith;
+            return new components_1.LineLayer()
+                .setPosition(x, options.startY)
+                .setEndPosition(x, options.endY)
+                .setColor(options.color)
+                .setStroke(options.lineWidth);
+        }), ...Array.from({ length: Math.ceil((options.endY - options.startY) / options.cellHeight) }, (_, i) => {
+            const y = options.startY + i * options.cellHeight;
+            return new components_1.LineLayer()
+                .setPosition(options.startX, y)
+                .setEndPosition(options.endX, y)
+                .setColor(options.color)
+                .setStroke(options.lineWidth);
+        }));
+    },
+    box(start, end, opts) {
+        if (start.x === undefined || start.y === undefined || end.x === undefined || end.y === undefined) {
+            throw new Error("Start and end must have x and y properties");
+        }
+        if (opts === undefined)
+            opts = {};
+        if (opts.color === undefined)
+            opts.color = 'rgba(0, 0, 0, 0.5)';
+        if (opts.lineWidth === undefined)
+            opts.lineWidth = 1;
+        return new components_1.Group()
+            .setID(`box-${start.x}-${start.y}-${end.x}-${end.y}`)
+            .add(new components_1.LineLayer()
+            .setPosition(start.x, start.y)
+            .setEndPosition(end.x, start.y)
+            .setColor(opts.color)
+            .setStroke(opts.lineWidth), new components_1.LineLayer()
+            .setPosition(end.x, start.y)
+            .setEndPosition(end.x, end.y)
+            .setColor(opts.color)
+            .setStroke(opts.lineWidth), new components_1.LineLayer()
+            .setPosition(end.x, end.y)
+            .setEndPosition(start.x, end.y)
+            .setColor(opts.color)
+            .setStroke(opts.lineWidth), new components_1.LineLayer()
+            .setPosition(start.x, end.y)
+            .setEndPosition(start.x, start.y)
+            .setColor(opts.color)
+            .setStroke(opts.lineWidth));
+    }
+};
+exports.Utils = Utils;

package/dist/index.d.ts

@@ -5,7 +5,8 @@ export { IRenderManager } from "./structures/managers/RenderManager";
 export { ILayersManager } from "./structures/managers/LayersManager";
 export * from "./structures/components";
 export { LayerType, LayerScaleType, LineCap, LineJoin, TextAlign, TextDirection, TextBaseline, FontWeight, Export, Centring, PatternType, GradientType, LinkType } from "./types";
-export { Font, IFont, IFonts, Gradient, IGradient, GradientPoint, GradientColorStop, Pattern, IPattern, Link, ILink, Exporter, JSONReader } from "./structures/helpers";
+export { Font, IFont, IFonts, Gradient, IGradient, GradientPoint, GradientColorStop, Pattern, IPattern, Link, ILink, Exporter, JSONReader, YAMLReader } from "./structures/helpers";
 export { Filters } from "./helpers/Filters";
 export { FontsList } from "./helpers/FontsList";
 export type { AnyLayer, AnyCentring, AnyPatternType, AnyGradientType, AnyTextAlign, AnyTextDirection, AnyTextBaseline, AnyWeight, AnyLineCap, AnyLineJoin, AnyExport, AnyLinkType, AnyGlobalCompositeOperation, AnyColorSpace, ScaleType, ColorType, Point, PointNumber, Transform, Extensions } from "./types";
+export { Utils } from "./helpers/Utlis";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontsList = exports.Filters = exports.JSONReader = exports.Exporter = exports.Link = exports.Pattern = exports.Gradient = exports.Font = exports.LinkType = exports.GradientType = exports.PatternType = exports.Centring = exports.Export = exports.FontWeight = exports.TextBaseline = exports.TextDirection = exports.TextAlign = exports.LineJoin = exports.LineCap = exports.LayerScaleType = exports.LayerType = exports.LazyCanvas = void 0;
+exports.Utils = exports.FontsList = exports.Filters = exports.YAMLReader = exports.JSONReader = exports.Exporter = exports.Link = exports.Pattern = exports.Gradient = exports.Font = exports.LinkType = exports.GradientType = exports.PatternType = exports.Centring = exports.Export = exports.FontWeight = exports.TextBaseline = exports.TextDirection = exports.TextAlign = exports.LineJoin = exports.LineCap = exports.LayerScaleType = exports.LayerType = exports.LazyCanvas = void 0;
 var LazyCanvas_1 = require("./structures/LazyCanvas");
 Object.defineProperty(exports, "LazyCanvas", { enumerable: true, get: function () { return LazyCanvas_1.LazyCanvas; } });
 __exportStar(require("./structures/components"), exports);
@@ -39,7 +39,10 @@ Object.defineProperty(exports, "Pattern", { enumerable: true, get: function () {
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return helpers_1.Link; } });
 Object.defineProperty(exports, "Exporter", { enumerable: true, get: function () { return helpers_1.Exporter; } });
 Object.defineProperty(exports, "JSONReader", { enumerable: true, get: function () { return helpers_1.JSONReader; } });
+Object.defineProperty(exports, "YAMLReader", { enumerable: true, get: function () { return helpers_1.YAMLReader; } });
 var Filters_1 = require("./helpers/Filters");
 Object.defineProperty(exports, "Filters", { enumerable: true, get: function () { return Filters_1.Filters; } });
 var FontsList_1 = require("./helpers/FontsList");
 Object.defineProperty(exports, "FontsList", { enumerable: true, get: function () { return FontsList_1.FontsList; } });
+var Utlis_1 = require("./helpers/Utlis");
+Object.defineProperty(exports, "Utils", { enumerable: true, get: function () { return Utlis_1.Utils; } });

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

@@ -43,7 +43,7 @@ export interface IBaseLayerProps {
     /**
      * The filter effects applied to the layer.
      */
-    filter: string;
+    filter?: string;
     /**
      * The opacity of the layer, ranging from 0 to 1.
      */
@@ -59,7 +59,7 @@ export interface IBaseLayerProps {
     /**
      * The shadow properties of the layer.
      */
-    shadow: {
+    shadow?: {
         /**
          * The color of the shadow.
          */
@@ -233,4 +233,5 @@ export declare class BaseLayer<T extends IBaseLayerProps> {
      * @returns {IBaseLayer} The JSON representation of the layer.
      */
     toJSON(): IBaseLayer;
+    protected validateProps(data: T): T;
 }

package/dist/structures/components/BaseLayer.js

@@ -48,16 +48,7 @@ class BaseLayer {
         this.zIndex = misc?.zIndex || 1;
         this.visible = misc?.visible || true;
         this.props = props ? props : {};
-        if (!this.props.x)
-            this.props.x = 0;
-        if (!this.props.y)
-            this.props.y = 0;
-        if (!this.props.opacity)
-            this.props.opacity = 1;
-        if (!this.props.centring)
-            this.props.centring = types_1.Centring.Center;
-        if (!this.props.transform)
-            this.props.transform = {};
+        this.props = this.validateProps(this.props);
     }
     /**
      * Sets the position of the layer in the 2D plane.
@@ -207,5 +198,19 @@ class BaseLayer {
             props: this.props,
         };
     }
+    validateProps(data) {
+        return {
+            ...data,
+            x: data.x || 0,
+            y: data.y || 0,
+            centring: data.centring || types_1.Centring.Center,
+            filter: data.filter || '',
+            opacity: data.opacity || 1,
+            filled: data.filled || true,
+            fillStyle: data.fillStyle || '#000000',
+            transform: data.transform || {},
+            globalComposite: data.globalComposite || 'source-over',
+        };
+    }
 }
 exports.BaseLayer = BaseLayer;

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

@@ -133,4 +133,10 @@ export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
      * @returns {IBezierLayer} The JSON representation of the Bezier layer.
      */
     toJSON(): IBezierLayer;
+    /**
+     * Validates the properties of the Bezier layer.
+     * @param data {IBezierLayerProps} - The properties to validate.
+     * @returns {IBezierLayerProps} The validated properties.
+     */
+    protected validateProps(data: IBezierLayerProps): IBezierLayerProps;
 }

package/dist/structures/components/BezierLayer.js

@@ -21,9 +21,7 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
     constructor(props, misc) {
         super(types_1.LayerType.BezierCurve, props || {}, misc);
         this.props = props ? props : {};
-        if (!this.props.fillStyle)
-            this.props.fillStyle = '#000000';
-        this.props.centring = types_1.Centring.None;
+        this.props = this.validateProps(this.props);
     }
     /**
      * Sets the control points of the Bezier layer.
@@ -124,7 +122,7 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
             ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
         });
         const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cp1x, y: cp1y }, { x: cp2x, y: cp2y }, { x: xe, y: ye }]);
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, layer: { width, height, x: min.x, y: min.y, align: 'none' }, manager });
         if (debug)
             LazyUtil_1.LazyLog.log('none', `BezierLayer:`, { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye, max, min, center, width, height, fillStyle });
         ctx.save();
@@ -173,5 +171,26 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
         }
         return { ...data, props: copy };
     }
+    /**
+     * Validates the properties of the Bezier layer.
+     * @param data {IBezierLayerProps} - The properties to validate.
+     * @returns {IBezierLayerProps} The validated properties.
+     */
+    validateProps(data) {
+        return {
+            ...super.validateProps(data),
+            centring: data.centring || types_1.Centring.None,
+            controlPoints: data.controlPoints || [{ x: 0, y: 0 }, { x: 0, y: 0 }],
+            endPoint: data.endPoint || { x: 0, y: 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,
+            }
+        };
+    }
 }
 exports.BezierLayer = BezierLayer;

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

@@ -143,4 +143,5 @@ export declare class ClearLayer implements IClearLayer {
      * @returns {IClearLayer} The JSON representation of the Clear Layer.
      */
     toJSON(): IClearLayer;
+    protected validateProps(props: IClearLayerProps): IClearLayerProps;
 }

package/dist/structures/components/ClearLayer.js

@@ -39,14 +39,8 @@ class ClearLayer {
         this.type = types_1.LayerType.Clear;
         this.zIndex = misc?.zIndex || 1;
         this.visible = misc?.visible || true;
-        this.props = props ? props : {
-            x: 0,
-            y: 0,
-            size: {
-                width: 0,
-                height: 0
-            }
-        };
+        this.props = props ? props : {};
+        this.props = this.validateProps(this.props);
     }
     /**
      * Sets the position of the layer in the 2D plane.
@@ -148,5 +142,17 @@ class ClearLayer {
             props: copy,
         };
     }
+    validateProps(props) {
+        return {
+            x: props.x || 0,
+            y: props.y || 0,
+            size: {
+                width: props.size?.width || 0,
+                height: props.size?.height || 0
+            },
+            centring: props.centring || 'none',
+            globalComposite: props.globalComposite || 'source-over'
+        };
+    }
 }
 exports.ClearLayer = ClearLayer;

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

@@ -90,4 +90,10 @@ export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
      * @returns {IImageLayer} The JSON representation of the Image Layer.
      */
     toJSON(): IImageLayer;
+    /**
+     * Validates the properties of the Image Layer.
+     * @param data {IImageLayerProps} - The properties to validate.
+     * @returns {IImageLayerProps} The validated properties.
+     */
+    protected validateProps(data: IImageLayerProps): IImageLayerProps;
 }

package/dist/structures/components/ImageLayer.js

@@ -23,7 +23,7 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
     constructor(props, misc) {
         super(types_1.LayerType.Image, props || {}, misc);
         this.props = props ? props : {};
-        this.props.centring = types_1.Centring.Center;
+        this.props = this.validateProps(this.props);
     }
     /**
      * Sets the source of the image.
@@ -79,15 +79,15 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
         if (debug)
             LazyUtil_1.LazyLog.log('none', `ImageLayer:`, { x, y, w, h, rad });
         ctx.save();
-        (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, 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);
         let image = await (0, canvas_1.loadImage)(this.props.src);
         image.width = w;
         image.height = h;
         if (!image)
             throw new LazyUtil_1.LazyError('The image could not be loaded');
+        (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, 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);
         if (Object.keys(rad).length > 0) {
             ctx.beginPath();
             ctx.moveTo(x + (w / 2), y);
@@ -118,5 +118,21 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
         }
         return { ...data };
     }
+    /**
+     * Validates the properties of the Image Layer.
+     * @param data {IImageLayerProps} - The properties to validate.
+     * @returns {IImageLayerProps} The validated properties.
+     */
+    validateProps(data) {
+        return {
+            ...super.validateProps(data),
+            src: data.src || '',
+            size: {
+                width: data.size?.width || 0,
+                height: data.size?.height || 0,
+                radius: data.size?.radius || { all: 0 }
+            }
+        };
+    }
 }
 exports.ImageLayer = ImageLayer;

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

@@ -129,4 +129,10 @@ export declare class LineLayer extends BaseLayer<ILineLayerProps> {
      * @returns {ILineLayer} The JSON representation of the Line Layer.
      */
     toJSON(): ILineLayer;
+    /**
+     * Validates the properties of the Line Layer.
+     * @param data {ILineLayerProps} - The properties to validate.
+     * @returns {ILineLayerProps} The validated properties.
+     */
+    protected validateProps(data: ILineLayerProps): ILineLayerProps;
 }

package/dist/structures/components/LineLayer.js

@@ -21,9 +21,7 @@ class LineLayer extends BaseLayer_1.BaseLayer {
     constructor(props, misc) {
         super(types_1.LayerType.Line, props || {}, misc);
         this.props = props ? props : {};
-        if (!this.props.fillStyle)
-            this.props.fillStyle = '#000000';
-        this.props.centring = types_1.Centring.None;
+        this.props = this.validateProps(this.props);
     }
     /**
      * Sets the end position of the line layer.
@@ -104,9 +102,9 @@ class LineLayer extends BaseLayer_1.BaseLayer {
             xe: { v: this.props.endPoint.x },
             ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) },
         });
-        let width = xe - xs;
-        let height = ye - ys;
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);
+        let width = Math.abs(xe - xs);
+        let height = Math.abs(ye - ys);
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, layer: { width, height, x: Math.min(xs, xe), y: Math.min(ys, ye), align: 'none' }, manager });
         if (debug)
             LazyUtil_1.LazyLog.log('none', `LineLayer:`, { xs, ys, xe, ye, width, height });
         ctx.save();
@@ -142,5 +140,28 @@ class LineLayer extends BaseLayer_1.BaseLayer {
         }
         return { ...data, props: copy };
     }
+    /**
+     * Validates the properties of the Line Layer.
+     * @param data {ILineLayerProps} - The properties to validate.
+     * @returns {ILineLayerProps} The validated properties.
+     */
+    validateProps(data) {
+        return {
+            ...super.validateProps(data),
+            centring: data.centring || types_1.Centring.None,
+            endPoint: {
+                x: data.endPoint?.x || 0,
+                y: data.endPoint?.y || 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,
+            },
+        };
+    }
 }
 exports.LineLayer = LineLayer;

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

@@ -110,12 +110,6 @@ export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
      * @returns {this} The current instance for chaining.
      */
     setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
-    /**
-     * Sets whether the Morph Layer should be filled or stroked.
-     * @param filled {boolean} - If true, the layer will be filled; otherwise, it will be stroked.
-     * @returns {this} The current instance for chaining.
-     */
-    setFilled(filled: boolean): this;
     /**
      * Draws the Morph Layer on the canvas.
      * @param ctx {SKRSContext2D} - The canvas rendering context.
@@ -129,4 +123,10 @@ export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
      * @returns {IMorphLayer} The JSON representation of the Morph Layer.
      */
     toJSON(): IMorphLayer;
+    /**
+     * Validates the properties of the Morph Layer.
+     * @param data {IMorphLayerProps} - The properties to validate.
+     * @returns {IMorphLayerProps} The validated properties.
+     */
+    protected validateProps(data: IMorphLayerProps): IMorphLayerProps;
 }

package/dist/structures/components/MorphLayer.js

@@ -22,11 +22,7 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     constructor(props, misc) {
         super(types_1.LayerType.Morph, props || {}, misc);
         this.props = props ? props : {};
-        if (!this.props.fillStyle)
-            this.props.fillStyle = '#000000';
-        if (!this.props.filled && this.props.filled !== false)
-            this.props.filled = true;
-        this.props.centring = types_1.Centring.Center;
+        this.props = this.validateProps(this.props);
     }
     /**
      * Sets the size of the Morph Layer.
@@ -76,15 +72,7 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
             dashOffset: dashOffset || 0,
             miterLimit: miterLimit || 10,
         };
-        return this;
-    }
-    /**
-     * Sets whether the Morph Layer should be filled or stroked.
-     * @param filled {boolean} - If true, the layer will be filled; otherwise, it will be stroked.
-     * @returns {this} The current instance for chaining.
-     */
-    setFilled(filled) {
-        this.props.filled = filled;
+        this.props.filled = false; // Ensure filled is false when stroke is set
         return this;
     }
     /**
@@ -110,7 +98,7 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
             }
         }
         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);
+        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', `MorphLayer:`, { x, y, w, h, rad });
         ctx.save();
@@ -160,5 +148,28 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
         }
         return { ...data, props: copy };
     }
+    /**
+     * Validates the properties of the Morph Layer.
+     * @param data {IMorphLayerProps} - The properties to validate.
+     * @returns {IMorphLayerProps} The validated properties.
+     */
+    validateProps(data) {
+        return {
+            ...super.validateProps(data),
+            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,
+            },
+        };
+    }
 }
 exports.MorphLayer = MorphLayer;

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

@@ -115,12 +115,6 @@ export declare class Path2DLayer extends BaseLayer<IPath2DLayerProps> {
      * @returns {this} The current instance for chaining.
      */
     setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
-    /**
-     * Sets whether the Path2D Layer should be filled or stroked.
-     * @param filled {boolean} - If true, the layer will be filled; otherwise, it will be stroked.
-     * @returns {this} The current instance for chaining.
-     */
-    setFilled(filled: boolean): this;
     /**
      * Sets the color of the Path2D Layer.
      * @param color {string} - The color of the Path2D Layer.
@@ -161,4 +155,10 @@ export declare class Path2DLayer extends BaseLayer<IPath2DLayerProps> {
      * @returns {IPath2DLayer} The JSON representation of the Path2D Layer.
      */
     toJSON(): IPath2DLayer;
+    /**
+     * Validates the properties of the Path2D Layer.
+     * @param data {IPath2DLayerProps} - The properties to validate.
+     * @returns {IPath2DLayerProps} The validated properties.
+     */
+    protected validateProps(data: IPath2DLayerProps): IPath2DLayerProps;
 }

package/dist/structures/components/Path2DLayer.js

@@ -18,6 +18,7 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
         this.zIndex = misc?.zIndex || 1;
         this.visible = misc?.visible || true;
         this.props = props ? props : {};
+        this.props = this.validateProps(this.props);
     }
     /**
      * Sets the unique identifier of the layer.
@@ -122,15 +123,7 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
             dashOffset: dashOffset || 0,
             miterLimit: miterLimit || 10,
         };
-        return this;
-    }
-    /**
-     * Sets whether the Path2D Layer should be filled or stroked.
-     * @param filled {boolean} - If true, the layer will be filled; otherwise, it will be stroked.
-     * @returns {this} The current instance for chaining.
-     */
-    setFilled(filled) {
-        this.props.filled = filled;
+        this.props.filled = false; // Ensure filled is false when stroke is set
         return this;
     }
     /**
@@ -252,7 +245,7 @@ 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);
+        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.opacity)(ctx, this.props.opacity);
         ctx.globalCompositeOperation = this.props.globalComposite;
@@ -289,5 +282,26 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
             props: this.props
         };
     }
+    /**
+     * Validates the properties of the Path2D Layer.
+     * @param data {IPath2DLayerProps} - The properties to validate.
+     * @returns {IPath2DLayerProps} The validated properties.
+     */
+    validateProps(data) {
+        return {
+            ...super.validateProps(data),
+            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
+        };
+    }
 }
 exports.Path2DLayer = Path2DLayer;

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

@@ -139,4 +139,10 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
      * @returns {IQuadraticLayer} The JSON representation of the Quadratic Layer.
      */
     toJSON(): IQuadraticLayer;
+    /**
+     * Validates the properties of the Quadratic Layer.
+     * @param data {IQuadraticLayerProps} - The properties to validate.
+     * @returns {IQuadraticLayerProps} The validated properties.
+     */
+    protected validateProps(data: IQuadraticLayerProps): IQuadraticLayerProps;
 }

package/dist/structures/components/QuadraticLayer.js

@@ -21,9 +21,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
     constructor(props, misc) {
         super(types_1.LayerType.QuadraticCurve, props || {}, misc);
         this.props = props ? props : {};
-        if (!this.props.fillStyle)
-            this.props.fillStyle = '#000000';
-        this.props.centring = types_1.Centring.None;
+        this.props = this.validateProps(this.props);
     }
     /**
      * Sets the control point of the quadratic layer.
@@ -118,7 +116,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
             ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
         });
         const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cx, y: cy }, { x: xe, y: ye }]);
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, layer: { width, height, x: min.x, y: min.y, align: 'none' }, manager });
         if (debug)
             LazyUtil_1.LazyLog.log('none', `BezierLayer:`, { xs, ys, cx, cy, xe, ye, max, min, center, width, height, fillStyle });
         ctx.save();
@@ -154,5 +152,26 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
         }
         return { ...data, props: copy };
     }
+    /**
+     * Validates the properties of the Quadratic Layer.
+     * @param data {IQuadraticLayerProps} - The properties to validate.
+     * @returns {IQuadraticLayerProps} The validated properties.
+     */
+    validateProps(data) {
+        return {
+            ...super.validateProps(data),
+            centring: data.centring || types_1.Centring.None,
+            controlPoints: data.controlPoints || [{ x: 0, y: 0 }],
+            endPoint: data.endPoint || { x: 0, y: 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,
+            }
+        };
+    }
 }
 exports.QuadraticLayer = QuadraticLayer;