@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.3

package/dist/structures/components/QuadraticLayer.js

@@ -5,17 +5,14 @@ const BaseLayer_1 = require("./BaseLayer");
 const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
+const DrawUtils_1 = require("../../utils/DrawUtils");
 /**
- * Class representing a Quadratic Layer, extending the BaseLayer class.
+ * Class representing a Quadratic layer, extending the BaseLayer class.
  */
 class QuadraticLayer extends BaseLayer_1.BaseLayer {
-    /**
-     * The properties of the Quadratic Layer.
-     */
-    props;
     /**
      * Constructs a new QuadraticLayer instance.
-     * @param {IQuadraticLayerProps} [props] - The properties of the Quadratic Layer.
+     * @param {IQuadraticLayerProps} [props] - The properties of the Quadratic layer.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(props, misc) {
@@ -34,13 +31,15 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
         return this;
     }
     /**
-     * Sets the end point of the quadratic layer.
+     * Sets the position of the quadratic layer.
      * @param {ScaleType} [x] - The x-coordinate of the end point.
      * @param {ScaleType} [y] - The y-coordinate of the end point.
+     * @param {ScaleType} [endX] - The x-coordinate of the end point.
+     * @param {ScaleType} [endY] - The y-coordinate of the end point.
      * @returns {this} The current instance for chaining.
      */
-    setEndPosition(x, y) {
-        this.props.endPoint = { x, y };
+    setPosition(x, y, endX, endY) {
+        this.props.position = { x, y, endX: endX || 0, endY: endY || 0 };
         return this;
     }
     /**
@@ -51,9 +50,9 @@ class QuadraticLayer 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;
     }
@@ -70,8 +69,8 @@ class QuadraticLayer 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,
@@ -82,97 +81,136 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
      * Calculates the bounding box of the quadratic curve.
      * @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 max, min, center, width, and height.
      */
     getBoundingBox(ctx, canvas, manager) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { xs, ys, cx, cy, xe, ye } = 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) },
             cx: { v: this.props.controlPoints[0].x },
             cy: { v: this.props.controlPoints[0].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) }
+            xe: { v: this.props.position.endX },
+            ye: { v: this.props.position.endY, 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 }]);
+        const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([
+            { x: xs, y: ys },
+            { x: cx, y: cy },
+            { x: xe, y: ye },
+        ]);
         return { max, min, center, width, height };
     }
     /**
      * Draws the quadratic curve 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, cx, cy, xe, ye } = 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) },
             cx: { v: this.props.controlPoints[0].x },
             cy: { v: this.props.controlPoints[0].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) }
+            xe: { v: this.props.position.endX },
+            ye: { v: this.props.position.endY, 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, {
+            debug,
+            layer: { width, height, x: min.x, y: min.y, align: "none" },
+            manager,
         });
-        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, { 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 });
+            LazyUtil_1.LazyLog.log("none", `BezierLayer:`, {
+                xs,
+                ys,
+                cx,
+                cy,
+                xe,
+                ye,
+                max,
+                min,
+                center,
+                width,
+                height,
+                fillStyle,
+            });
         ctx.save();
-        (0, utils_1.transform)(ctx, this.props.transform, { x: center.x, y: center.y, 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: center.x,
+                y: center.y,
+                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.quadraticCurveTo(cx, cy, xe, ye);
         ctx.stroke();
         ctx.closePath();
         ctx.restore();
     }
     /**
-     * Converts the Quadratic Layer to a JSON representation.
-     * @returns {IQuadraticLayer} The JSON representation of the Quadratic Layer.
+     * Converts the Quadratic layer to a JSON representation.
+     * @returns {IQuadraticLayer} The JSON representation of the Quadratic layer.
      */
     toJSON() {
         let data = super.toJSON();
         let copy = { ...this.props };
-        for (const key of ['x', 'y', 'endPoint.x', 'endPoint.y', 'controlPoint.x', 'controlPoint.y', 'fillStyle']) {
-            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+        for (const key of [
+            "x",
+            "y",
+            "endPoint.x",
+            "endPoint.y",
+            "controlPoint.x",
+            "controlPoint.y",
+            "fillStyle",
+        ]) {
+            if (copy[key] && typeof copy[key] === "object" && "toJSON" in copy[key]) {
                 copy[key] = copy[key].toJSON();
             }
         }
         return { ...data, props: copy };
     }
     /**
-     * Validates the properties of the Quadratic Layer.
+     * Validates the properties of the Quadratic layer.
      * @param {IQuadraticLayerProps} [data] - The properties to validate.
      * @returns {IQuadraticLayerProps} The validated properties.
      */
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            filled: data.filled || false,
-            fillStyle: data.fillStyle || '#000000',
+            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,
             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',
+                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/TextLayer.d.ts

@@ -1,9 +1,9 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { AnyTextAlign, AnyTextBaseline, AnyTextDirection, AnyWeight, ColorType, LayerType, LineCap, LineJoin, ScaleType, SubStringColor } from "../../types";
+import { AnyTextAlign, AnyTextBaseline, AnyTextDirection, AnyWeight, ColorType, LayerType, LineCap, LineJoin, ScaleType, StrokeOptions, SubStringColor } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
- * Interface representing a Text Layer.
+ * Interface representing a Text layer.
  */
 export interface ITextLayer extends IBaseLayer {
     /**
@@ -11,22 +11,18 @@ export interface ITextLayer extends IBaseLayer {
      */
     type: LayerType.Text;
     /**
-     * The properties specific to the Text Layer.
+     * The properties specific to the Text layer.
      */
     props: ITextLayerProps;
 }
 /**
- * Interface representing the properties of a Text Layer.
+ * Interface representing the properties of a Text layer.
  */
 export interface ITextLayerProps extends IBaseLayerProps {
     /**
      * The text content of the layer.
      */
     text: string;
-    /**
-     * Whether the layer is filled.
-     */
-    filled: boolean;
     /**
      * The fill style (color or pattern) of the layer.
      */
@@ -55,7 +51,7 @@ export interface ITextLayerProps extends IBaseLayerProps {
     /**
      * Configuration for multiline text.
      */
-    multiline: {
+    multiline?: {
         /**
          * Whether multiline is enabled.
          */
@@ -66,15 +62,15 @@ export interface ITextLayerProps extends IBaseLayerProps {
         spacing?: number;
     };
     /**
-     * The size of the text layer, including width and height.
+     * The size of the Text layer, including width and height.
      */
-    size: {
+    size?: {
         /**
-         * The width of the text layer.
+         * The width of the Text layer.
          */
         width: ScaleType;
         /**
-         * The height of the text layer.
+         * The height of the Text layer.
          */
         height: ScaleType;
     };
@@ -101,35 +97,10 @@ export interface ITextLayerProps extends IBaseLayerProps {
     /**
      * The stroke properties of the text.
      */
-    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 Text Layer, extending the BaseLayer class.
+ * Class representing a Text layer, extending the BaseLayer class.
  */
 export declare class TextLayer extends BaseLayer<ITextLayerProps> {
     /**
@@ -138,7 +109,7 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
     props: ITextLayerProps;
     /**
      * Constructs a new TextLayer instance.
-     * @param {ITextLayerProps} [props] - The properties of the Text Layer.
+     * @param {ITextLayerProps} [props] - The properties of the Text layer.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(props?: ITextLayerProps, misc?: IBaseLayerMisc);
@@ -232,7 +203,7 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
      * Draws the text 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>;
@@ -249,12 +220,12 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
      */
     private drawText;
     /**
-     * Converts the Text Layer to a JSON representation.
-     * @returns {ITextLayer} The JSON representation of the Text Layer.
+     * Converts the Text layer to a JSON representation.
+     * @returns {ITextLayer} The JSON representation of the Text layer.
      */
     toJSON(): ITextLayer;
     /**
-     * Validates the properties of the Text Layer.
+     * Validates the properties of the Text layer.
      * @param {ITextLayerProps} [data] - The properties to validate.
      * @returns {ITextLayerProps} The validated properties.
      */

package/dist/structures/components/TextLayer.js

@@ -5,17 +5,14 @@ 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 Text Layer, extending the BaseLayer class.
+ * Class representing a Text layer, extending the BaseLayer class.
  */
 class TextLayer extends BaseLayer_1.BaseLayer {
-    /**
-     * The properties of the Text Layer.
-     */
-    props;
     /**
      * Constructs a new TextLayer instance.
-     * @param {ITextLayerProps} [props] - The properties of the Text Layer.
+     * @param {ITextLayerProps} [props] - The properties of the Text layer.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(props, misc) {
@@ -43,9 +40,9 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     setFont(familyOrConfig, size, weight) {
         if (typeof familyOrConfig === "string") {
             if (!size)
-                throw new LazyUtil_1.LazyError('The size of the font must be provided');
+                throw new LazyUtil_1.LazyError("The size of the font must be provided");
             if (!weight)
-                throw new LazyUtil_1.LazyError('The weight of the font must be provided');
+                throw new LazyUtil_1.LazyError("The weight of the font must be provided");
             this.props.font = {
                 family: familyOrConfig,
                 size,
@@ -88,9 +85,9 @@ class TextLayer extends BaseLayer_1.BaseLayer {
      */
     setColor(color, ...sub) {
         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;
         if (sub && sub.length > 0) {
             this.props.subStringColors = sub;
@@ -137,13 +134,12 @@ class TextLayer 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;
     }
     /**
@@ -171,9 +167,9 @@ class TextLayer extends BaseLayer_1.BaseLayer {
      * @returns {Object} The width and height of the text.
      */
     measureText(ctx, canvas) {
-        const w = (0, utils_1.parseToNormal)(this.props.size?.width, ctx, canvas);
-        const h = (0, utils_1.parseToNormal)(this.props.size?.height, ctx, canvas, { width: w, height: 0 }, { vertical: true });
-        if (this.props.multiline.enabled) {
+        if (this.props?.multiline?.enabled) {
+            const w = (0, utils_1.parseToNormal)(this.props.size?.width || "vw", ctx, canvas);
+            const h = (0, utils_1.parseToNormal)(this.props.size?.height || 0, ctx, canvas, { width: w, height: 0 }, { vertical: true });
             return { width: w, height: h };
         }
         else {
@@ -186,25 +182,32 @@ class TextLayer extends BaseLayer_1.BaseLayer {
      * Draws the text 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 { x, y, w } = parcer.parseBatch({
-            x: { v: this.props.x },
-            y: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
-            w: { v: this.props.size?.width },
+            x: { v: this.props.position.x },
+            y: { v: this.props.position.y, options: LazyUtil_1.defaultArg.vl(true) },
+            w: { v: this.props.size?.width || "vw" },
         });
-        const h = parcer.parse(this.props.size?.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
+        const h = parcer.parse(this.props.size?.height || 0, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
         if (debug)
-            LazyUtil_1.LazyLog.log('none', `TextLayer:`, { x, y, w, h });
+            LazyUtil_1.LazyLog.log("none", `TextLayer:`, { x, y, w, h });
         ctx.save();
-        (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type }, { text: this.props.text, textAlign: this.props.align, fontSize: this.props.font.size, multiline: this.props.multiline.enabled });
+        if (this.props.transform) {
+            (0, utils_1.transform)(ctx, this.props.transform, { width: w, height: h, x, y, type: this.type }, {
+                text: this.props.text,
+                textAlign: this.props.align,
+                fontSize: this.props.font.size,
+                multiline: this.props?.multiline?.enabled || false,
+            });
+        }
         ctx.beginPath();
-        (0, utils_1.drawShadow)(ctx, this.props.shadow);
-        (0, utils_1.opacity)(ctx, this.props.opacity);
-        (0, utils_1.filters)(ctx, this.props.filter);
+        DrawUtils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+        DrawUtils_1.DrawUtils.opacity(ctx, this.props.opacity);
+        DrawUtils_1.DrawUtils.filters(ctx, this.props.filter);
         ctx.textAlign = this.props.align;
         if (this.props.letterSpacing)
             ctx.letterSpacing = `${this.props.letterSpacing}px`;
@@ -214,9 +217,13 @@ class TextLayer extends BaseLayer_1.BaseLayer {
             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: 'center' }, manager });
-        if (this.props.multiline.enabled) {
-            const words = this.props.text.split(' ');
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, {
+            debug,
+            layer: { width: w, height: h, x, y, align: "center" },
+            manager,
+        });
+        if (this.props?.multiline?.enabled) {
+            const words = this.props.text.split(" ");
             let lines = [];
             for (let fontSize = 1; fontSize <= this.props.font.size; fontSize++) {
                 let lineHeight = fontSize * (this.props.multiline.spacing || 1.1);
@@ -224,14 +231,14 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                 let xm = x;
                 let ym = y;
                 lines = [];
-                let line = '';
+                let line = "";
                 let charOffset = 0; // Track position in original text
                 for (let word of words) {
-                    let linePlus = line + word + ' ';
+                    let linePlus = line + word + " ";
                     if (ctx.measureText(linePlus).width > w) {
                         lines.push({ text: line, x: xm, y: ym, startOffset: charOffset });
                         charOffset += line.length;
-                        line = word + ' ';
+                        line = word + " ";
                         ym += lineHeight;
                     }
                     else {
@@ -267,19 +274,12 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     drawText(props, ctx, fillStyle, text, x, y, w, textOffset = 0) {
         // If no substring colors are defined, draw normally
         if (!props.subStringColors || props.subStringColors.length === 0) {
-            if (props.filled) {
-                ctx.fillStyle = fillStyle;
-                ctx.fillText(text, x, y, w);
+            DrawUtils_1.DrawUtils.fillStyle(ctx, fillStyle, this.props.stroke);
+            if (props.stroke) {
+                ctx.strokeText(text, x, y, w);
             }
             else {
-                ctx.strokeStyle = fillStyle;
-                ctx.lineWidth = props.stroke?.width || 1;
-                ctx.lineCap = props.stroke?.cap || 'butt';
-                ctx.lineJoin = props.stroke?.join || 'miter';
-                ctx.miterLimit = props.stroke?.miterLimit || 10;
-                ctx.lineDashOffset = props.stroke?.dashOffset || 0;
-                ctx.setLineDash(props.stroke?.dash || []);
-                ctx.strokeText(text, x, y, w);
+                ctx.fillText(text, x, y, w);
             }
             return;
         }
@@ -288,14 +288,17 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         let currentX = x;
         // Save original text alignment and set to left for manual positioning
         const originalAlign = ctx.textAlign;
-        ctx.textAlign = 'left';
+        ctx.textAlign = "left";
         // Adjust starting X based on text alignment
         const alignValue = props.align;
-        if (alignValue === types_1.TextAlign.Center || alignValue === 'center') {
+        if (alignValue === types_1.TextAlign.Center || alignValue === "center") {
             const totalWidth = ctx.measureText(text).width;
             currentX = x - totalWidth / 2;
         }
-        else if (alignValue === types_1.TextAlign.Right || alignValue === 'right' || alignValue === types_1.TextAlign.End || alignValue === 'end') {
+        else if (alignValue === types_1.TextAlign.Right ||
+            alignValue === "right" ||
+            alignValue === types_1.TextAlign.End ||
+            alignValue === "end") {
             const totalWidth = ctx.measureText(text).width;
             currentX = x - totalWidth;
         }
@@ -323,16 +326,19 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                     text: text.substring(currentIndex, localStart),
                     color: fillStyle,
                     start: currentIndex,
-                    end: localStart
+                    end: localStart,
                 });
             }
             // Add colored substring
             if (localStart < localEnd) {
                 segments.push({
                     text: text.substring(localStart, localEnd),
-                    color: subColor.color,
+                    color: (0, utils_1.parseFillStyle)(ctx, subColor.color, {
+                        debug: false,
+                        layer: { width: w, height: 0, x: 0, y: 0, align: "center" },
+                    }),
                     start: localStart,
-                    end: localEnd
+                    end: localEnd,
                 });
                 currentIndex = localEnd;
             }
@@ -343,7 +349,7 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                 text: text.substring(currentIndex),
                 color: fillStyle,
                 start: currentIndex,
-                end: textLength
+                end: textLength,
             });
         }
         // Draw each segment
@@ -351,19 +357,12 @@ class TextLayer extends BaseLayer_1.BaseLayer {
             if (segment.text.length === 0)
                 continue;
             const segmentWidth = ctx.measureText(segment.text).width;
-            if (props.filled) {
-                ctx.fillStyle = segment.color;
-                ctx.fillText(segment.text, currentX, y);
+            DrawUtils_1.DrawUtils.fillStyle(ctx, segment.color, this.props.stroke);
+            if (props.stroke) {
+                ctx.strokeText(segment.text, currentX, y);
             }
             else {
-                ctx.strokeStyle = segment.color;
-                ctx.lineWidth = props.stroke?.width || 1;
-                ctx.lineCap = props.stroke?.cap || 'butt';
-                ctx.lineJoin = props.stroke?.join || 'miter';
-                ctx.miterLimit = props.stroke?.miterLimit || 10;
-                ctx.lineDashOffset = props.stroke?.dashOffset || 0;
-                ctx.setLineDash(props.stroke?.dash || []);
-                ctx.strokeText(segment.text, currentX, y);
+                ctx.fillText(segment.text, currentX, y);
             }
             currentX += segmentWidth;
         }
@@ -371,29 +370,28 @@ class TextLayer extends BaseLayer_1.BaseLayer {
         ctx.textAlign = originalAlign;
     }
     /**
-     * Converts the Text Layer to a JSON representation.
-     * @returns {ITextLayer} The JSON representation of the Text Layer.
+     * Converts the Text layer to a JSON representation.
+     * @returns {ITextLayer} The JSON representation of the Text layer.
      */
     toJSON() {
         let data = super.toJSON();
         let copy = { ...this.props };
-        for (const key of ['x', 'y', 'size.width', 'size.height', 'fillStyle']) {
-            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+        for (const key of ["x", "y", "size.width", "size.height", "fillStyle"]) {
+            if (copy[key] && typeof copy[key] === "object" && "toJSON" in copy[key]) {
                 copy[key] = copy[key].toJSON();
             }
         }
         return { ...data, props: copy };
     }
     /**
-     * Validates the properties of the Text Layer.
+     * Validates the properties of the Text layer.
      * @param {ITextLayerProps} [data] - The properties to validate.
      * @returns {ITextLayerProps} The validated properties.
      */
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            filled: data.filled || true,
-            fillStyle: data.fillStyle || '#000000',
+            fillStyle: data.fillStyle || "#000000",
             text: data.text || "",
             font: {
                 family: data.font?.family || "Arial",