@nmmty/lazycanvas 0.6.0-dev.1a1f37 → 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;

package/dist/structures/helpers/Gradient.d.ts

@@ -1,5 +1,6 @@
-import { AnyGradientType, FillType, StringColorType } from "../../types";
+import { AnyCentring, AnyGradientType, FillType, StringColorType, ScaleType } from "../../types";
 import { SKRSContext2D } from "@napi-rs/canvas";
+import { LayersManager } from "../managers/LayersManager";
 /**
  * Interface representing a gradient.
  */
@@ -20,6 +21,10 @@ export interface IGradient {
      * The color stops for the gradient.
      */
     stops: Array<GradientColorStop>;
+    /**
+     * The angle of the gradient (optional, used for linear gradients).
+     */
+    angle?: number;
 }
 /**
  * Interface representing a color stop in a gradient.
@@ -41,19 +46,15 @@ export interface GradientPoint {
     /**
      * The x-coordinate of the point.
      */
-    x: number;
+    x: ScaleType;
     /**
      * The y-coordinate of the point.
      */
-    y: number;
+    y: ScaleType;
     /**
      * The radius of the point (optional, used for radial gradients).
      */
     r?: number;
-    /**
-     * The starting angle of the point (optional, used for conic gradients).
-     */
-    startAngle?: number;
 }
 /**
  * Class representing a gradient with properties and methods to manipulate it.
@@ -75,6 +76,10 @@ export declare class Gradient implements IGradient {
      * The color stops for the gradient.
      */
     stops: Array<GradientColorStop>;
+    /**
+     * The angle of the gradient (optional, used for linear gradients).
+     */
+    angle?: number;
     /**
      * Constructs a new Gradient instance.
      * @param opts {Object} - Optional properties for the gradient.
@@ -95,6 +100,18 @@ export declare class Gradient implements IGradient {
      * @returns {this} The current instance for chaining.
      */
     addPoints(...points: GradientPoint[]): this;
+    /**
+     * Sets the points of the gradient.
+     * @param points {GradientPoint[]} - The points to set for the gradient.
+     * @returns {this} The current instance for chaining.
+     */
+    setPoints(...points: GradientPoint[]): this;
+    /**
+     * Removes points from the gradient by their indexes.
+     * @param indexes {number[]} - The indexes of the points to remove.
+     * @returns {this} The current instance for chaining.
+     */
+    removePoints(...indexes: number[]): this;
     /**
      * Adds color stops to the gradient.
      * @param stops {GradientColorStop[]} - The color stops to add to the gradient.
@@ -102,14 +119,34 @@ export declare class Gradient implements IGradient {
      */
     addStops(...stops: GradientColorStop[]): this;
     /**
-     * Draws the gradient on a canvas context.
-     * @param ctx {SKRSContext2D} - The canvas rendering context.
-     * @returns {CanvasGradient} The created gradient.
+     * Sets the color stops of the gradient.
+     * @param stops {GradientColorStop[]} - The color stops to set for the gradient.
+     * @returns {this} The current instance for chaining.
+     */
+    setStops(...stops: GradientColorStop[]): this;
+    /**
+     * Removes color stops from the gradient by their indexes.
+     * @param indexes {number[]} - The indexes of the color stops to remove.
+     * @returns {this} The current instance for chaining.
      */
-    draw(ctx: SKRSContext2D): CanvasGradient;
+    removeStops(...indexes: number[]): this;
+    setAngle(angle: number): this;
+    draw(ctx: SKRSContext2D, opts?: {
+        debug?: boolean;
+        layer?: {
+            width: number;
+            height: number;
+            x: number;
+            y: number;
+            align: AnyCentring;
+        };
+        manager?: LayersManager;
+    }): CanvasGradient;
     /**
      * Converts the gradient to a JSON representation.
      * @returns {IGradient} The JSON representation of the gradient.
      */
     toJSON(): IGradient;
+    private getLinearGradientPoints;
+    private getPosition;
 }

package/dist/structures/helpers/Gradient.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Gradient = void 0;
 const types_1 = require("../../types");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+const utils_1 = require("../../utils/utils");
 /**
  * Class representing a gradient with properties and methods to manipulate it.
  */
@@ -22,6 +24,10 @@ class Gradient {
      * The color stops for the gradient.
      */
     stops;
+    /**
+     * The angle of the gradient (optional, used for linear gradients).
+     */
+    angle;
     /**
      * Constructs a new Gradient instance.
      * @param opts {Object} - Optional properties for the gradient.
@@ -31,6 +37,7 @@ class Gradient {
         this.type = opts?.props?.type || types_1.GradientType.Linear;
         this.points = opts?.props?.points || [];
         this.stops = opts?.props?.stops || [];
+        this.angle = opts?.props?.angle || 0;
     }
     /**
      * Sets the type of the gradient.
@@ -50,6 +57,24 @@ class Gradient {
         this.points.push(...points);
         return this;
     }
+    /**
+     * Sets the points of the gradient.
+     * @param points {GradientPoint[]} - The points to set for the gradient.
+     * @returns {this} The current instance for chaining.
+     */
+    setPoints(...points) {
+        this.points = points;
+        return this;
+    }
+    /**
+     * Removes points from the gradient by their indexes.
+     * @param indexes {number[]} - The indexes of the points to remove.
+     * @returns {this} The current instance for chaining.
+     */
+    removePoints(...indexes) {
+        this.points = this.points.filter((_, index) => !indexes.includes(index));
+        return this;
+    }
     /**
      * Adds color stops to the gradient.
      * @param stops {GradientColorStop[]} - The color stops to add to the gradient.
@@ -60,28 +85,74 @@ class Gradient {
         return this;
     }
     /**
-     * Draws the gradient on a canvas context.
-     * @param ctx {SKRSContext2D} - The canvas rendering context.
-     * @returns {CanvasGradient} The created gradient.
+     * Sets the color stops of the gradient.
+     * @param stops {GradientColorStop[]} - The color stops to set for the gradient.
+     * @returns {this} The current instance for chaining.
+     */
+    setStops(...stops) {
+        this.stops = stops;
+        return this;
+    }
+    /**
+     * Removes color stops from the gradient by their indexes.
+     * @param indexes {number[]} - The indexes of the color stops to remove.
+     * @returns {this} The current instance for chaining.
      */
-    draw(ctx) {
+    removeStops(...indexes) {
+        this.stops = this.stops.filter((_, index) => !indexes.includes(index));
+        return this;
+    }
+    setAngle(angle) {
+        this.angle = angle;
+        return this;
+    }
+    draw(ctx, opts = { debug: false }) {
         let gradientData = this.toJSON();
         let gradient;
+        if (opts.debug)
+            LazyUtil_1.LazyLog.log('none', `Gradient:`, gradientData);
+        const parse = (0, utils_1.parser)(ctx, ctx.canvas, opts.manager);
+        const { x0, y0, x1, y1 } = parse.parseBatch({
+            x0: { v: gradientData.points[0]?.x || 0 },
+            y0: { v: gradientData.points[0]?.y || 0, options: LazyUtil_1.defaultArg.vl(true) },
+            x1: { v: gradientData.points[1]?.x || 0 },
+            y1: { v: gradientData.points[1]?.y || 0, options: LazyUtil_1.defaultArg.vl(true) }
+        });
+        if (opts.debug)
+            LazyUtil_1.LazyLog.log('none', `Gradient points:`, { x0, y0, x1, y1 });
         switch (gradientData.type) {
             case types_1.GradientType.Linear:
             case "linear":
-                gradient = ctx.createLinearGradient(gradientData.points[0].x, gradientData.points[0].y, gradientData.points[1].x, gradientData.points[1].y);
+                if (gradientData.type === "linear" && (gradientData.angle || gradientData.angle === 0) && opts.layer) {
+                    const { width, height, x, y, align } = opts.layer;
+                    const cx = this.getPosition(x, width, align, 'x');
+                    const cy = this.getPosition(y, height, align, 'y');
+                    const [p1, p2] = this.getLinearGradientPoints(cx, cy, width, height, gradientData.angle);
+                    gradient = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
+                }
+                else {
+                    gradient = ctx.createLinearGradient(x0, y0, x1 || x0, y1 || y0);
+                }
                 break;
             case types_1.GradientType.Radial:
             case "radial":
-                gradient = ctx.createRadialGradient(gradientData.points[0].x, gradientData.points[0].y, gradientData.points[0].r || 0, gradientData.points[1].x || gradientData.points[0].x, gradientData.points[1].y || gradientData.points[0].y, gradientData.points[1].r || 0);
+                gradient = ctx.createRadialGradient(x0, y0, gradientData.points[0].r || 0, x1 || x0, y1 || y0, gradientData.points[1].r || 0);
                 break;
             case types_1.GradientType.Conic:
             case "conic":
-                gradient = ctx.createConicGradient(gradientData.points[0].startAngle || 0, gradientData.points[0].x, gradientData.points[0].y);
+                gradient = ctx.createConicGradient((gradientData.angle || 0) * (Math.PI / 180), x0, y0);
                 break;
             default:
-                gradient = ctx.createLinearGradient(gradientData.points[0].x, gradientData.points[0].y, gradientData.points[1].x, gradientData.points[1].y);
+                if ((gradientData.angle || gradientData.angle === 0) && opts.layer) {
+                    const { width, height, x, y, align } = opts.layer;
+                    const cx = this.getPosition(x, width, align, 'x');
+                    const cy = this.getPosition(y, height, align, 'y');
+                    const [p1, p2] = this.getLinearGradientPoints(cx, cy, width, height, gradientData.angle);
+                    gradient = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
+                }
+                else {
+                    gradient = ctx.createLinearGradient(x0, y0, x1 || x0, y1 || y0);
+                }
                 break;
         }
         for (let stop of gradientData.stops) {
@@ -99,7 +170,61 @@ class Gradient {
             type: this.type,
             points: this.points,
             stops: this.stops,
+            angle: this.angle
         };
     }
+    getLinearGradientPoints(cx, cy, w, h, angleInDegrees) {
+        const angle = angleInDegrees * (Math.PI / 180);
+        const x1 = cx;
+        const y1 = cy - h / 2;
+        const x2 = cx;
+        const y2 = cy + h / 2;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const x1r = cx + (x1 - cx) * cos - (y1 - cy) * sin;
+        const y1r = cy + (x1 - cx) * sin + (y1 - cy) * cos;
+        const x2r = cx + (x2 - cx) * cos - (y2 - cy) * sin;
+        const y2r = cy + (x2 - cx) * sin + (y2 - cy) * cos;
+        return [
+            { x: x1r, y: y1r },
+            { x: x2r, y: y2r }
+        ];
+    }
+    getPosition(pos, side, align, type = 'x') {
+        switch (align) {
+            case types_1.Centring.StartTop:
+            case "start-top":
+                return type === 'x' ? pos + (side / 2) : pos + (side / 2);
+            case types_1.Centring.Start:
+            case "start":
+                return type === 'x' ? pos + (side / 2) : pos;
+            case types_1.Centring.StartBottom:
+            case "start-bottom":
+                return type === 'x' ? pos + (side / 2) : pos - (side / 2);
+            case types_1.Centring.CenterTop:
+            case "center-top":
+                return type === 'x' ? pos : pos - (side / 2);
+            case types_1.Centring.Center:
+            case "center":
+                return type === 'x' ? pos : pos;
+            case types_1.Centring.CenterBottom:
+            case "center-bottom":
+                return type === 'x' ? pos : pos - (side / 2);
+            case types_1.Centring.EndTop:
+            case "end-top":
+                return type === 'x' ? pos - (side / 2) : pos + (side / 2);
+            case types_1.Centring.End:
+            case "end":
+                return type === 'x' ? pos - (side / 2) : pos;
+            case types_1.Centring.EndBottom:
+            case "end-bottom":
+                return type === 'x' ? pos - (side / 2) : pos - (side / 2);
+            case types_1.Centring.None:
+            case "none":
+                return type === 'x' ? pos + (side / 2) : pos + (side / 2);
+            default:
+                throw new LazyUtil_1.LazyError(`Invalid centring type: ${align}`);
+        }
+    }
 }
 exports.Gradient = Gradient;

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

@@ -4,3 +4,4 @@ export * from "./Gradient";
 export * from "./Link";
 export * from "./Pattern";
 export * from "./readers/JSONReader";
+export * from "./readers/YAMLReader";

package/dist/structures/helpers/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./Gradient"), exports);
 __exportStar(require("./Link"), exports);
 __exportStar(require("./Pattern"), exports);
 __exportStar(require("./readers/JSONReader"), exports);
+__exportStar(require("./readers/YAMLReader"), exports);

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

@@ -58,7 +58,7 @@ class JSONReader {
         }
         if (opts?.debug)
             LazyUtil_1.LazyLog.log("info", "Reading JSON...\nOptions:", data.options, "\nAnimation:", data.animation, "\nLayers Number:", data.layers.length, "\nLayers:", data.layers);
-        const layers = JSONReader.layersParse(data.layers);
+        const layers = JSONReader.layersParse(data.layers, opts);
         const canvas = new LazyCanvas_1.LazyCanvas({ settings: data, debug: opts?.debug })
             .create(data.options.width, data.options.height);
         canvas.manager.layers.add(...layers);
@@ -99,7 +99,7 @@ class JSONReader {
                 visible: layer.visible,
             };
             if (layer.type === types_1.LayerType.Group) {
-                return new components_1.Group(misc).add(...layer.layers.map((l) => this.layerParse(l)));
+                return new components_1.Group(misc).add(...layer.layers.map((l) => this.layerParse(l, { id: l.id, zIndex: l.zIndex, visible: l.visible })));
             }
             else {
                 return this.layerParse(layer, misc);
@@ -153,7 +153,6 @@ class JSONReader {
                 case 'gradient':
                     return new __1.Gradient({ props: layer.props.fillStyle });
                 case 'pattern':
-                    console.log('Pattern:', layer.props.fillStyle);
                     return new __1.Pattern()
                         .setType(layer.props.fillStyle.type)
                         .setSrc(typeof layer.props.fillStyle.src === 'string' ? layer.props.fillStyle.src : this.read(layer.props.fillStyle.src));
@@ -162,6 +161,7 @@ class JSONReader {
             }
         }
         else if ('fillStyle' in layer.props) {
+            console.log(layer.type, layer);
             return layer.props.fillStyle || '#000000';
         }
         else {

package/dist/structures/helpers/readers/YAMLReader.d.ts

@@ -0,0 +1,22 @@
+import { LazyCanvas } from "../../LazyCanvas";
+export declare class YAMLReader {
+    /**
+     * Reads a YAML string and converts it to a LazyCanvas object.
+     * @param data - The YAML string to read.
+     * @param opts - Optional parameters for debugging.
+     * @returns A Promise that resolves to a LazyCanvas object.
+     */
+    static read(data: string, opts?: {
+        debug?: boolean;
+    }): LazyCanvas;
+    /**
+     * Reads a YAML file and converts it to a LazyCanvas object.
+     * @param filePath - The path to the YAML file.
+     * @param opts - Optional parameters for debugging.
+     * @returns A Promise that resolves to a LazyCanvas object.
+     * @throws LazyError if the file does not exist or has an invalid extension.
+     */
+    static readFile(filePath: string, opts?: {
+        debug?: boolean;
+    }): LazyCanvas;
+}

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

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YAMLReader = void 0;
+const JSONReader_1 = require("./JSONReader");
+const _yaml = __importStar(require("js-yaml"));
+const fs = __importStar(require("fs"));
+const LazyUtil_1 = require("../../../utils/LazyUtil");
+const path = __importStar(require("path"));
+class YAMLReader {
+    /**
+     * Reads a YAML string and converts it to a LazyCanvas object.
+     * @param data - The YAML string to read.
+     * @param opts - Optional parameters for debugging.
+     * @returns A Promise that resolves to a LazyCanvas object.
+     */
+    static read(data, opts) {
+        const yamlContent = _yaml.load(data);
+        if (opts?.debug) {
+            LazyUtil_1.LazyLog.log('info', 'YAML content loaded:', yamlContent);
+        }
+        if (typeof yamlContent === 'object' && yamlContent !== null) {
+            return JSONReader_1.JSONReader.read(yamlContent, opts);
+        }
+        else {
+            throw new LazyUtil_1.LazyError("Invalid YAML content: Expected an object.");
+        }
+    }
+    /**
+     * Reads a YAML file and converts it to a LazyCanvas object.
+     * @param filePath - The path to the YAML file.
+     * @param opts - Optional parameters for debugging.
+     * @returns A Promise that resolves to a LazyCanvas object.
+     * @throws LazyError if the file does not exist or has an invalid extension.
+     */
+    static readFile(filePath, opts) {
+        if (!fs.existsSync(filePath)) {
+            throw new LazyUtil_1.LazyError(`File not found: ${filePath}`);
+        }
+        const ext = path.extname(filePath).toLowerCase();
+        if (ext !== '.yaml' && ext !== '.yml') {
+            throw new LazyUtil_1.LazyError(`Invalid file extension: ${ext}. Expected .yaml or .yml.`);
+        }
+        const data = fs.readFileSync(filePath, 'utf8');
+        if (opts?.debug) {
+            LazyUtil_1.LazyLog.log('info', `Reading YAML file: ${filePath}`);
+        }
+        return this.read(data, opts);
+    }
+}
+exports.YAMLReader = YAMLReader;

package/dist/utils/utils.d.ts

@@ -33,9 +33,19 @@ export declare function parser(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, m
     }>): Record<string, number>;
 };
 export declare function drawShadow(ctx: SKRSContext2D, shadow: any): void;
-export declare function opacity(ctx: SKRSContext2D, opacity: number): void;
-export declare function filters(ctx: SKRSContext2D, filters: string): void;
-export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType): string | CanvasGradient | Promise<CanvasPattern>;
+export declare function opacity(ctx: SKRSContext2D, opacity?: number): void;
+export declare function filters(ctx: SKRSContext2D, filters: string | null | undefined): void;
+export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType, opts: {
+    debug?: boolean;
+    layer?: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+        align: AnyCentring;
+    };
+    manager?: LayersManager;
+}): string | Promise<CanvasPattern> | CanvasGradient;
 export declare function transform(ctx: SKRSContext2D, transform: Transform, layer?: {
     width: number;
     height: number;

package/dist/utils/utils.js

@@ -13,7 +13,7 @@ exports.generateID = generateID;
 let percentReg = /^(\d+)%$/;
 let pxReg = /^(\d+)px$/;
 let canvasReg = /^(vw|vh|vmin|vmax)$/;
-let linkReg = /^(link-w|link-h|link-x|link-y)-([A-Za-z0-9_]+)-(\d+)$/;
+let linkReg = /^(link-w|link-h|link-x|link-y)-([A-Za-z0-9_]+)-(\d+(.\d+)?)$/;
 let hexReg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 let rgbReg = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
 let rgbaReg = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(0|0?\.\d+|1(\.0)?)\)$/;
@@ -122,7 +122,7 @@ function drawShadow(ctx, shadow) {
     }
 }
 exports.drawShadow = drawShadow;
-function opacity(ctx, opacity) {
+function opacity(ctx, opacity = 1) {
     if (opacity < 1) {
         ctx.globalAlpha = opacity;
     }
@@ -134,13 +134,13 @@ function filters(ctx, filters) {
     }
 }
 exports.filters = filters;
-function parseFillStyle(ctx, color) {
+function parseFillStyle(ctx, color, opts) {
     if (!ctx)
         throw new LazyUtil_1.LazyError('The context is not defined');
     if (!color)
         throw new LazyUtil_1.LazyError('The color is not defined');
     if (color instanceof helpers_1.Gradient || color instanceof helpers_1.Pattern) {
-        return color.draw(ctx);
+        return color.draw(ctx, opts);
     }
     return color;
 }
@@ -232,6 +232,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
                     x -= width / 2;
+                    y -= height;
                     break;
             }
             return { x, y };
@@ -258,9 +259,6 @@ function centring(centring, type, width, height, x, y) {
             return { x, y };
         case types_1.Centring.StartBottom:
         case "start-bottom":
-            return { x, y };
-        case types_1.Centring.StartTop:
-        case "start-top":
             switch (type) {
                 case types_1.LayerType.Image:
                 case types_1.LayerType.Morph:
@@ -269,6 +267,9 @@ function centring(centring, type, width, height, x, y) {
                     break;
             }
             return { x, y };
+        case types_1.Centring.StartTop:
+        case "start-top":
+            return { x, y };
         case types_1.Centring.End:
         case "end":
             switch (type) {
@@ -287,6 +288,7 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
                     x -= width;
+                    y -= height;
                     break;
             }
             return { x, y };
@@ -297,7 +299,6 @@ function centring(centring, type, width, height, x, y) {
                 case types_1.LayerType.Morph:
                 case types_1.LayerType.Clear:
                     x -= width;
-                    y -= height;
                     break;
             }
             return { x, y };
@@ -375,7 +376,7 @@ function resizeLayers(layers, ratio) {
                         }
                     }
                 }
-                if ('stroke' in layer.props) {
+                if ('stroke' in layer.props && layer.props.stroke) {
                     layer.props.stroke.width = resize(layer.props.stroke.width, ratio);
                 }
                 if ('endPoint' in layer.props) {

package/package.json

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