@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.3

package/dist/structures/components/ImageLayer.js

@@ -7,14 +7,11 @@ const canvas_1 = require("@napi-rs/canvas");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
 const helpers_1 = require("../helpers");
+const DrawUtils_1 = require("../../utils/DrawUtils");
 /**
  * Class representing an Image Layer, extending the BaseLayer class.
  */
 class ImageLayer extends BaseLayer_1.BaseLayer {
-    /**
-     * The properties of the Image Layer.
-     */
-    props;
     /**
      * Constructs a new ImageLayer instance.
      * @param {IImageLayerProps} [props] - The properties of the Image Layer.
@@ -33,7 +30,7 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
      */
     setSrc(src) {
         if (!(0, utils_1.isImageUrlValid)(src))
-            throw new LazyUtil_1.LazyError('The src of the image must be a valid URL');
+            throw new LazyUtil_1.LazyError("The src of the image must be a valid URL");
         this.props.src = src;
         return this;
     }
@@ -56,45 +53,47 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
      * Draws the Image Layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      * @throws {LazyError} If the image could not be loaded.
      */
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { xs, ys, w } = parcer.parseBatch({
-            xs: { v: this.props.x },
-            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
-            w: { v: this.props.size.width }
+            xs: { v: this.props.position.x },
+            ys: { v: this.props.position.y, options: LazyUtil_1.defaultArg.vl(true) },
+            w: { v: this.props.size.width },
         });
         const h = parcer.parse(this.props.size.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
         let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
         const rad = {};
-        if (typeof this.props.size.radius === 'object' && this.props.size.radius !== helpers_1.Link) {
+        if (typeof this.props.size.radius === "object" && this.props.size.radius !== helpers_1.Link) {
             for (const corner in this.props.size.radius) {
                 // @ts-ignore
                 rad[corner] = parcer.parse(this.props.size.radius[corner], LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
             }
         }
         if (debug)
-            LazyUtil_1.LazyLog.log('none', `ImageLayer:`, { x, y, w, h, rad });
+            LazyUtil_1.LazyLog.log("none", `ImageLayer:`, { x, y, w, h, rad });
         ctx.save();
         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);
+            throw new LazyUtil_1.LazyError("The image could not be loaded");
+        if (this.props.transform) {
+            (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type });
+        }
+        DrawUtils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+        DrawUtils_1.DrawUtils.opacity(ctx, this.props.opacity);
+        DrawUtils_1.DrawUtils.filters(ctx, this.props.filter);
         if (Object.keys(rad).length > 0) {
             ctx.beginPath();
-            ctx.moveTo(x + (w / 2), y);
-            ctx.arcTo(x + w, y, x + w, y + (h / 2), rad.rightTop || rad.all || 0);
-            ctx.arcTo(x + w, y + h, x + (w / 2), y + h, rad.rightBottom || rad.all || 0);
-            ctx.arcTo(x, y + h, x, y + (h / 2), rad.leftBottom || rad.all || 0);
-            ctx.arcTo(x, y, x + (w / 2), y, rad.leftTop || rad.all || 0);
+            ctx.moveTo(x + w / 2, y);
+            ctx.arcTo(x + w, y, x + w, y + h / 2, rad.rightTop || rad.all || 0);
+            ctx.arcTo(x + w, y + h, x + w / 2, y + h, rad.rightBottom || rad.all || 0);
+            ctx.arcTo(x, y + h, x, y + h / 2, rad.leftBottom || rad.all || 0);
+            ctx.arcTo(x, y, x + w / 2, y, rad.leftTop || rad.all || 0);
             ctx.closePath();
             ctx.clip();
             ctx.drawImage(image, x, y, w, h);
@@ -111,8 +110,8 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
     toJSON() {
         let data = super.toJSON();
         let copy = { ...this.props };
-        for (const key of ['x', 'y', 'size.width', 'size.height', 'size.radius']) {
-            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+        for (const key of ["x", "y", "size.width", "size.height", "size.radius"]) {
+            if (copy[key] && typeof copy[key] === "object" && "toJSON" in copy[key]) {
                 copy[key] = copy[key].toJSON();
             }
         }
@@ -126,12 +125,12 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            src: data.src || '',
+            src: data.src || "",
             size: {
                 width: data.size?.width || 0,
                 height: data.size?.height || 0,
-                radius: data.size?.radius || { all: 0 }
-            }
+                radius: data.size?.radius || { all: 0 },
+            },
         };
     }
 }

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

@@ -1,5 +1,5 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ColorType, ScaleType, LayerType } from "../../types";
+import { ColorType, ScaleType, LayerType, StrokeOptions } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
@@ -19,18 +19,15 @@ export interface ILineLayer extends IBaseLayer {
  * Interface representing the properties of a Line Layer.
  */
 export interface ILineLayerProps extends IBaseLayerProps {
-    /**
-     * The end point of the line, including x and y coordinates.
-     */
-    endPoint: {
+    position: IBaseLayerProps["position"] & {
         /**
-         * The x-coordinate of the end point.
+         * The x-coordinate of the end point of the line.
          */
-        x: ScaleType;
+        endX: ScaleType;
         /**
-         * The y-coordinate of the end point.
+         * The y-coordinate of the end point of the line.
          */
-        y: ScaleType;
+        endY: ScaleType;
     };
     /**
      * Whether the layer is filled.
@@ -43,32 +40,7 @@ export interface ILineLayerProps extends IBaseLayerProps {
     /**
      * The stroke properties of the line.
      */
-    stroke: {
-        /**
-         * The width of the stroke.
-         */
-        width: number;
-        /**
-         * The cap style of the stroke.
-         */
-        cap: CanvasLineCap;
-        /**
-         * The join style of the stroke.
-         */
-        join: CanvasLineJoin;
-        /**
-         * The dash offset of the stroke.
-         */
-        dashOffset: number;
-        /**
-         * The dash pattern of the stroke.
-         */
-        dash: number[];
-        /**
-         * The miter limit of the stroke.
-         */
-        miterLimit: number;
-    };
+    stroke: StrokeOptions;
 }
 /**
  * Class representing a Line Layer, extending the BaseLayer class.
@@ -85,12 +57,14 @@ export declare class LineLayer extends BaseLayer<ILineLayerProps> {
      */
     constructor(props?: ILineLayerProps, misc?: IBaseLayerMisc);
     /**
-     * Sets the end position of the line layer.
+     * Sets the position of the line layer.
      * @param {ScaleType} [x] - The x-coordinate of the end point.
      * @param {ScaleType} [y] - The y-coordinate of the end point.
+     * @param {ScaleType} [endX] - The x-coordinate of the end point.
+     * @param {ScaleType} [endY] - The y-coordinate of the end point.
      * @returns {this} The current instance for chaining.
      */
-    setEndPosition(x: ScaleType, y: ScaleType): this;
+    setPosition(x: ScaleType, y: ScaleType, endX?: ScaleType, endY?: ScaleType): this;
     /**
      * Sets the color of the line layer.
      * @param {ColorType} [color] - The color of the layer.
@@ -113,7 +87,7 @@ export declare class LineLayer extends BaseLayer<ILineLayerProps> {
      * Calculates the bounding box of the line layer.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @returns {Object} The bounding box details including start and end points, width, and height.
      */
     getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
@@ -128,7 +102,7 @@ export declare class LineLayer extends BaseLayer<ILineLayerProps> {
      * Draws the line layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;

package/dist/structures/components/LineLayer.js

@@ -5,14 +5,11 @@ const BaseLayer_1 = require("./BaseLayer");
 const types_1 = require("../../types");
 const LazyUtil_1 = require("../../utils/LazyUtil");
 const utils_1 = require("../../utils/utils");
+const DrawUtils_1 = require("../../utils/DrawUtils");
 /**
  * Class representing a Line Layer, extending the BaseLayer class.
  */
 class LineLayer extends BaseLayer_1.BaseLayer {
-    /**
-     * The properties of the Line Layer.
-     */
-    props;
     /**
      * Constructs a new LineLayer instance.
      * @param {ILineLayerProps} [props] - The properties of the Line Layer.
@@ -24,13 +21,15 @@ class LineLayer extends BaseLayer_1.BaseLayer {
         this.props = this.validateProps(this.props);
     }
     /**
-     * Sets the end position of the line layer.
+     * Sets the position of the line layer.
      * @param {ScaleType} [x] - The x-coordinate of the end point.
      * @param {ScaleType} [y] - The y-coordinate of the end point.
+     * @param {ScaleType} [endX] - The x-coordinate of the end point.
+     * @param {ScaleType} [endY] - The y-coordinate of the end point.
      * @returns {this} The current instance for chaining.
      */
-    setEndPosition(x, y) {
-        this.props.endPoint = { x, y };
+    setPosition(x, y, endX, endY) {
+        this.props.position = { x, y, endX: endX || 0, endY: endY || 0 };
         return this;
     }
     /**
@@ -41,9 +40,9 @@ class LineLayer extends BaseLayer_1.BaseLayer {
      */
     setColor(color) {
         if (!color)
-            throw new LazyUtil_1.LazyError('The color of the layer must be provided');
+            throw new LazyUtil_1.LazyError("The color of the layer must be provided");
         if (!(0, utils_1.isColor)(color))
-            throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
+            throw new LazyUtil_1.LazyError("The color of the layer must be a valid color");
         this.props.fillStyle = color;
         return this;
     }
@@ -60,8 +59,8 @@ class LineLayer extends BaseLayer_1.BaseLayer {
     setStroke(width, cap, join, dash, dashOffset, miterLimit) {
         this.props.stroke = {
             width,
-            cap: cap || 'butt',
-            join: join || 'miter',
+            cap: cap || "butt",
+            join: join || "miter",
             dash: dash || [],
             dashOffset: dashOffset || 0,
             miterLimit: miterLimit || 10,
@@ -72,16 +71,16 @@ class LineLayer extends BaseLayer_1.BaseLayer {
      * Calculates the bounding box of the line layer.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @returns {Object} The bounding box details including start and end points, width, and height.
      */
     getBoundingBox(ctx, canvas, manager) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { xs, ys, xe, ye } = parcer.parseBatch({
-            xs: { v: this.props.x },
-            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
-            xe: { v: this.props.endPoint.x },
-            ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xs: { v: this.props.position.x },
+            ys: { v: this.props.position.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xe: { v: this.props.position.endX },
+            ye: { v: this.props.position.endY, options: LazyUtil_1.defaultArg.vl(true) },
         });
         let width = xe - xs;
         let height = ye - ys;
@@ -91,36 +90,36 @@ class LineLayer extends BaseLayer_1.BaseLayer {
      * Draws the line layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { xs, ys, xe, ye } = parcer.parseBatch({
-            xs: { v: this.props.x },
-            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
-            xe: { v: this.props.endPoint.x },
-            ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xs: { v: this.props.position.x },
+            ys: { v: this.props.position.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xe: { v: this.props.position.endX },
+            ye: { v: this.props.position.endY, options: LazyUtil_1.defaultArg.vl(true) },
         });
         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 });
+        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 });
+            LazyUtil_1.LazyLog.log("none", `LineLayer:`, { xs, ys, xe, ye, width, height });
         ctx.save();
-        (0, utils_1.transform)(ctx, this.props.transform, { x: xs, y: ys, width, height, 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 (this.props.transform) {
+            (0, utils_1.transform)(ctx, this.props.transform, { x: xs, y: ys, width, height, type: this.type });
+        }
+        DrawUtils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+        DrawUtils_1.DrawUtils.opacity(ctx, this.props.opacity);
+        DrawUtils_1.DrawUtils.filters(ctx, this.props.filter);
+        DrawUtils_1.DrawUtils.fillStyle(ctx, fillStyle, this.props.stroke);
         ctx.beginPath();
         ctx.moveTo(xs, ys);
-        ctx.strokeStyle = fillStyle;
-        ctx.lineWidth = this.props.stroke?.width || 1;
-        ctx.lineCap = this.props.stroke?.cap || 'butt';
-        ctx.lineJoin = this.props.stroke?.join || 'miter';
-        ctx.miterLimit = this.props.stroke?.miterLimit || 10;
-        ctx.lineDashOffset = this.props.stroke?.dashOffset || 0;
-        ctx.setLineDash(this.props.stroke?.dash || []);
         ctx.lineTo(xe, ye);
         ctx.stroke();
         ctx.closePath();
@@ -133,8 +132,8 @@ class LineLayer extends BaseLayer_1.BaseLayer {
     toJSON() {
         let data = super.toJSON();
         let copy = { ...this.props };
-        for (const key of ['x', 'y', 'endPoint.x', 'endPoint.y', 'fillStyle']) {
-            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+        for (const key of ["x", "y", "endPoint.x", "endPoint.y", "fillStyle"]) {
+            if (copy[key] && typeof copy[key] === "object" && "toJSON" in copy[key]) {
                 copy[key] = copy[key].toJSON();
             }
         }
@@ -148,17 +147,18 @@ class LineLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            filled: data.filled || false,
-            fillStyle: data.fillStyle || '#000000',
-            centring: data.centring || types_1.Centring.None,
-            endPoint: {
-                x: data.endPoint?.x || 0,
-                y: data.endPoint?.y || 0,
+            position: {
+                x: data.position?.x || 0,
+                y: data.position?.y || 0,
+                endX: data.position?.endX || 0,
+                endY: data.position?.endY || 0,
             },
+            fillStyle: data.fillStyle || "#000000",
+            centring: data.centring || types_1.Centring.None,
             stroke: {
                 width: data.stroke?.width || 1,
-                cap: data.stroke?.cap || 'butt',
-                join: data.stroke?.join || 'miter',
+                cap: data.stroke?.cap || "butt",
+                join: data.stroke?.join || "miter",
                 dashOffset: data.stroke?.dashOffset || 0,
                 dash: data.stroke?.dash || [],
                 miterLimit: data.stroke?.miterLimit || 10,

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

@@ -1,5 +1,5 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ColorType, ScaleType, LayerType, RadiusCorner } from "../../types";
+import { ColorType, ScaleType, LayerType, RadiusCorner, StrokeOptions } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
@@ -34,14 +34,10 @@ export interface IMorphLayerProps extends IBaseLayerProps {
         /**
          * The radius of the Morph Layer.
          */
-        radius: {
+        radius?: {
             [corner in RadiusCorner]?: ScaleType;
         };
     };
-    /**
-     * Whether the layer is filled.
-     */
-    filled: boolean;
     /**
      * The fill style (color or pattern) of the layer.
      */
@@ -49,32 +45,7 @@ export interface IMorphLayerProps extends IBaseLayerProps {
     /**
      * The stroke properties of the morph.
      */
-    stroke: {
-        /**
-         * The width of the stroke.
-         */
-        width: number;
-        /**
-         * The cap style of the stroke.
-         */
-        cap: CanvasLineCap;
-        /**
-         * The join style of the stroke.
-         */
-        join: CanvasLineJoin;
-        /**
-         * The dash offset of the stroke.
-         */
-        dashOffset: number;
-        /**
-         * The dash pattern of the stroke.
-         */
-        dash: number[];
-        /**
-         * The miter limit of the stroke.
-         */
-        miterLimit: number;
-    };
+    stroke?: StrokeOptions;
 }
 /**
  * Class representing a Morph Layer, extending the BaseLayer class.
@@ -122,7 +93,7 @@ export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
      * Draws the Morph Layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;

package/dist/structures/components/MorphLayer.js

@@ -6,14 +6,11 @@ const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
 const helpers_1 = require("../helpers");
+const DrawUtils_1 = require("../../utils/DrawUtils");
 /**
  * Class representing a Morph Layer, extending the BaseLayer class.
  */
 class MorphLayer extends BaseLayer_1.BaseLayer {
-    /**
-     * The properties of the Morph Layer.
-     */
-    props;
     /**
      * Constructs a new MorphLayer instance.
      * @param {IMorphLayerProps} [props] - The properties of the Morph Layer.
@@ -47,9 +44,9 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
      */
     setColor(color) {
         if (!color)
-            throw new LazyUtil_1.LazyError('The color of the layer must be provided');
+            throw new LazyUtil_1.LazyError("The color of the layer must be provided");
         if (!(0, utils_1.isColor)(color))
-            throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
+            throw new LazyUtil_1.LazyError("The color of the layer must be a valid color");
         this.props.fillStyle = color;
         return this;
     }
@@ -66,71 +63,69 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     setStroke(width, cap, join, dash, dashOffset, miterLimit) {
         this.props.stroke = {
             width,
-            cap: cap || 'butt',
-            join: join || 'miter',
+            cap: cap || "butt",
+            join: join || "miter",
             dash: dash || [],
             dashOffset: dashOffset || 0,
             miterLimit: miterLimit || 10,
         };
-        this.props.filled = false; // Ensure filled is false when stroke is set
         return this;
     }
     /**
      * Draws the Morph Layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { xs, ys, w } = parcer.parseBatch({
-            xs: { v: this.props.x },
-            ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xs: { v: this.props.position.x },
+            ys: { v: this.props.position.y, options: LazyUtil_1.defaultArg.vl(true) },
             w: { v: this.props.size.width },
         });
         const h = parcer.parse(this.props.size.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
         const rad = {};
-        if (typeof this.props.size.radius === 'object' && this.props.size.radius !== helpers_1.Link) {
+        if (typeof this.props.size.radius === "object" && this.props.size.radius !== helpers_1.Link) {
             for (const corner in this.props.size.radius) {
                 // @ts-ignore
                 rad[corner] = parcer.parse(this.props.size.radius[corner], LazyUtil_1.defaultArg.wh(w / 2, h / 2), LazyUtil_1.defaultArg.vl(false, true));
             }
         }
         let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, { debug, layer: { width: w, height: h, x: xs, y: ys, align: this.props.centring }, manager });
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.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 });
+            LazyUtil_1.LazyLog.log("none", `MorphLayer:`, { x, y, w, h, rad });
         ctx.save();
-        (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type });
+        if (this.props.transform) {
+            (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type });
+        }
         ctx.beginPath();
         if (Object.keys(rad).length > 0) {
-            ctx.moveTo(x + (w / 2), y);
-            ctx.arcTo(x + w, y, x + w, y + (h / 2), rad.rightTop || rad.all || 0);
-            ctx.arcTo(x + w, y + h, x + (w / 2), y + h, rad.rightBottom || rad.all || 0);
-            ctx.arcTo(x, y + h, x, y + (h / 2), rad.leftBottom || rad.all || 0);
-            ctx.arcTo(x, y, x + (w / 2), y, rad.leftTop || rad.all || 0);
+            ctx.moveTo(x + w / 2, y);
+            ctx.arcTo(x + w, y, x + w, y + h / 2, rad.rightTop || rad.all || 0);
+            ctx.arcTo(x + w, y + h, x + w / 2, y + h, rad.rightBottom || rad.all || 0);
+            ctx.arcTo(x, y + h, x, y + h / 2, rad.leftBottom || rad.all || 0);
+            ctx.arcTo(x, y, x + w / 2, y, rad.leftTop || rad.all || 0);
         }
         else {
             ctx.rect(x, y, w, h);
         }
         ctx.closePath();
-        (0, utils_1.drawShadow)(ctx, this.props.shadow);
-        (0, utils_1.opacity)(ctx, this.props.opacity);
-        (0, utils_1.filters)(ctx, this.props.filter);
-        if (this.props.filled) {
-            ctx.fillStyle = fillStyle;
-            ctx.fill();
+        DrawUtils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+        DrawUtils_1.DrawUtils.opacity(ctx, this.props.opacity);
+        DrawUtils_1.DrawUtils.filters(ctx, this.props.filter);
+        DrawUtils_1.DrawUtils.fillStyle(ctx, fillStyle, this.props.stroke);
+        if (this.props.stroke) {
+            ctx.stroke();
         }
         else {
-            ctx.strokeStyle = fillStyle;
-            ctx.lineWidth = this.props.stroke?.width || 1;
-            ctx.lineCap = this.props.stroke?.cap || 'butt';
-            ctx.lineJoin = this.props.stroke?.join || 'miter';
-            ctx.miterLimit = this.props.stroke?.miterLimit || 10;
-            ctx.lineDashOffset = this.props.stroke?.dashOffset || 0;
-            ctx.setLineDash(this.props.stroke?.dash || []);
-            ctx.stroke();
+            ctx.fill();
         }
         ctx.restore();
     }
@@ -141,8 +136,8 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     toJSON() {
         let data = super.toJSON();
         let copy = { ...this.props };
-        for (const key of ['x', 'y', 'size.width', 'size.height', 'size.radius', 'fillStyle']) {
-            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+        for (const key of ["x", "y", "size.width", "size.height", "size.radius", "fillStyle"]) {
+            if (copy[key] && typeof copy[key] === "object" && "toJSON" in copy[key]) {
                 copy[key] = copy[key].toJSON();
             }
         }
@@ -156,21 +151,12 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            filled: data.filled || true,
-            fillStyle: data.fillStyle || '#000000',
+            fillStyle: data.fillStyle || "#000000",
             size: {
                 width: data.size?.width || 100,
                 height: data.size?.height || 100,
                 radius: data.size?.radius || { all: 0 },
             },
-            stroke: {
-                width: data.stroke?.width || 1,
-                cap: data.stroke?.cap || 'butt',
-                join: data.stroke?.join || 'miter',
-                dashOffset: data.stroke?.dashOffset || 0,
-                dash: data.stroke?.dash || [],
-                miterLimit: data.stroke?.miterLimit || 10,
-            },
         };
     }
 }