@nmmty/lazycanvas 0.5.3 → 0.6.0-dev.f33019

package/dist/index.d.ts

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

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.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,6 +39,7 @@ 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");

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 || false,
+            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

@@ -129,4 +129,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.
@@ -110,7 +106,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 +156,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

@@ -161,4 +161,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.
@@ -252,7 +253,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 +290,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;

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

@@ -73,23 +73,23 @@ export interface ITextLayerProps extends IBaseLayerProps {
     /**
      * The baseline of the text.
      */
-    baseline: AnyTextBaseline;
+    baseline?: AnyTextBaseline;
     /**
      * The direction of the text.
      */
-    direction: AnyTextDirection;
+    direction?: AnyTextDirection;
     /**
      * The spacing between letters.
      */
-    letterSpacing: number;
+    letterSpacing?: number;
     /**
      * The spacing between words.
      */
-    wordSpacing: number;
+    wordSpacing?: number;
     /**
      * The stroke properties of the text.
      */
-    stroke: {
+    stroke?: {
         /**
          * The width of the stroke.
          */
@@ -246,4 +246,10 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
      * @returns {ITextLayer} The JSON representation of the Text Layer.
      */
     toJSON(): ITextLayer;
+    /**
+     * Validates the properties of the Text Layer.
+     * @param props {ITextLayerProps} - The properties to validate.
+     * @returns {ITextLayerProps} The validated properties.
+     */
+    protected validateProps(props: ITextLayerProps): ITextLayerProps;
 }

package/dist/structures/components/TextLayer.js

@@ -21,25 +21,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     constructor(props, misc) {
         super(types_1.LayerType.Text, props || {}, misc);
         this.props = props ? props : {};
-        this.props.align = types_1.TextAlign.Left;
-        this.props.font = {
-            family: 'Geist',
-            size: 16,
-            weight: types_1.FontWeight.Regular,
-        };
-        this.props.fillStyle = '#ffffff';
-        this.props.filled = true;
-        this.props.multiline = {
-            enabled: false,
-            spacing: 1.1,
-        };
-        this.props.size = {
-            width: 'vw',
-            height: 0,
-        };
-        this.props.centring = types_1.Centring.Center;
-        this.props.wordSpacing = 0;
-        this.props.letterSpacing = 0;
+        this.props = this.validateProps(this.props);
     }
     /**
      * Sets the text of the text layer.
@@ -229,12 +211,15 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         (0, utils_1.opacity)(ctx, this.props.opacity);
         (0, utils_1.filters)(ctx, this.props.filter);
         ctx.textAlign = this.props.align;
-        ctx.letterSpacing = `${this.props.letterSpacing}px`;
-        ctx.wordSpacing = `${this.props.wordSpacing}px`;
+        if (this.props.letterSpacing)
+            ctx.letterSpacing = `${this.props.letterSpacing}px`;
+        if (this.props.wordSpacing)
+            ctx.wordSpacing = `${this.props.wordSpacing}px`;
         if (this.props.baseline)
             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 });
         if (this.props.multiline.enabled) {
             const words = this.props.text.split(' ');
             let lines = [];
@@ -261,12 +246,12 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                     break;
             }
             for (let line of lines) {
-                this.drawText(this.props, ctx, await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle), line.text, line.x, line.y, w);
+                this.drawText(this.props, ctx, fillStyle, line.text, line.x, line.y, w);
             }
         }
         else {
             ctx.font = `${this.props.font.weight} ${this.props.font.size}px ${this.props.font.family}`;
-            this.drawText(this.props, ctx, await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle), this.props.text, x, y, w);
+            this.drawText(this.props, ctx, fillStyle, this.props.text, x, y, w);
         }
         ctx.closePath();
         ctx.restore();
@@ -311,5 +296,32 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         }
         return { ...data, props: copy };
     }
+    /**
+     * Validates the properties of the Text Layer.
+     * @param props {ITextLayerProps} - The properties to validate.
+     * @returns {ITextLayerProps} The validated properties.
+     */
+    validateProps(props) {
+        return {
+            ...super.validateProps(props),
+            text: props.text || "",
+            font: {
+                family: props.font?.family || "Arial",
+                size: props.font?.size || 16,
+                weight: props.font?.weight || types_1.FontWeight.Regular,
+            },
+            multiline: {
+                enabled: props.multiline?.enabled || false,
+                spacing: props.multiline?.spacing || 1.1,
+            },
+            size: {
+                width: props.size?.width || "vw",
+                height: props.size?.height || 0,
+            },
+            align: props.align || types_1.TextAlign.Left,
+            fillStyle: props.fillStyle || "#000000",
+            filled: props.filled !== undefined ? props.filled : true,
+        };
+    }
 }
 exports.TextLayer = TextLayer;