@nmmty/lazycanvas 0.6.1 → 0.6.3

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

@@ -1,4 +1,4 @@
-import { ScaleType, AnyCentring, AnyGlobalCompositeOperation, ColorType, Transform, AnyFilter, LayerType } from "../../types";
+import { ScaleType, AnyCentring, AnyGlobalCompositeOperation, Transform, AnyFilter, LayerType } from "../../types";
 /**
  * Interface representing the base structure of a layer.
  */
@@ -48,14 +48,6 @@ export interface IBaseLayerProps {
      * The opacity of the layer, ranging from 0 to 1.
      */
     opacity: number;
-    /**
-     * Whether the layer is filled.
-     */
-    filled: boolean;
-    /**
-     * The fill style (color or pattern) of the layer.
-     */
-    fillStyle: ColorType;
     /**
      * The shadow properties of the layer.
      */

package/dist/structures/components/BaseLayer.js

@@ -206,8 +206,6 @@ class BaseLayer {
             centring: data.centring || types_1.Centring.Center,
             filter: data.filter || '',
             opacity: data.opacity || 1,
-            filled: data.filled || true,
-            fillStyle: data.fillStyle || '#000000',
             transform: data.transform || {},
             globalComposite: data.globalComposite || 'source-over',
         };

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

@@ -27,6 +27,14 @@ export interface IBezierLayerProps extends IBaseLayerProps {
      * The end point of the Bézier curve.
      */
     endPoint: Point;
+    /**
+     * Whether the layer is filled.
+     */
+    filled: boolean;
+    /**
+     * The fill style (color or pattern) of the layer.
+     */
+    fillStyle: ColorType;
     /**
      * The stroke properties of the Bézier curve.
      */

package/dist/structures/components/BezierLayer.js

@@ -179,6 +179,8 @@ class BezierLayer 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,
             controlPoints: data.controlPoints || [{ x: 0, y: 0 }, { x: 0, y: 0 }],
             endPoint: data.endPoint || { x: 0, y: 0 },

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

@@ -1,5 +1,5 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ScaleType, LayerType, radiusCorner } from "../../types";
+import { ScaleType, LayerType, RadiusCorner } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
@@ -39,7 +39,7 @@ export interface IImageLayerProps extends IBaseLayerProps {
          * The radius of the image.
          */
         radius: {
-            [corner in radiusCorner]?: ScaleType;
+            [corner in RadiusCorner]?: ScaleType;
         };
     };
 }
@@ -72,7 +72,7 @@ export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
      * @returns {this} The current instance for chaining.
      */
     setSize(width: ScaleType, height: ScaleType, radius?: {
-        [corner in radiusCorner]?: ScaleType;
+        [corner in RadiusCorner]?: ScaleType;
     }): this;
     /**
      * Draws the Image Layer on the canvas.

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

@@ -32,6 +32,14 @@ export interface ILineLayerProps extends IBaseLayerProps {
          */
         y: ScaleType;
     };
+    /**
+     * Whether the layer is filled.
+     */
+    filled: boolean;
+    /**
+     * The fill style (color or pattern) of the layer.
+     */
+    fillStyle: ColorType;
     /**
      * The stroke properties of the line.
      */

package/dist/structures/components/LineLayer.js

@@ -148,6 +148,8 @@ 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,

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 } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
@@ -35,9 +35,17 @@ export interface IMorphLayerProps extends IBaseLayerProps {
          * The radius of the Morph Layer.
          */
         radius: {
-            [corner in radiusCorner]?: ScaleType;
+            [corner in RadiusCorner]?: ScaleType;
         };
     };
+    /**
+     * Whether the layer is filled.
+     */
+    filled: boolean;
+    /**
+     * The fill style (color or pattern) of the layer.
+     */
+    fillStyle: ColorType;
     /**
      * The stroke properties of the morph.
      */
@@ -90,7 +98,7 @@ export declare class MorphLayer extends BaseLayer<IMorphLayerProps> {
      * @returns {this} The current instance for chaining.
      */
     setSize(width: ScaleType, height: ScaleType, radius?: {
-        [corner in radiusCorner]?: ScaleType;
+        [corner in RadiusCorner]?: ScaleType;
     }): this;
     /**
      * Sets the color of the Morph Layer.

package/dist/structures/components/MorphLayer.js

@@ -156,6 +156,8 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
+            filled: data.filled || true,
+            fillStyle: data.fillStyle || '#000000',
             size: {
                 width: data.size?.width || 100,
                 height: data.size?.height || 100,

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

@@ -3,11 +3,28 @@ import { ColorType, LayerType } from "../../types";
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
 import { LayersManager } from "../managers";
 export interface IPath2DLayer extends IBaseLayer {
+    /**
+     * The type of the layer, which is `Path`.
+     */
     type: LayerType.Path;
+    /**
+     * The properties specific to the Path2D Layer.
+     */
     props: IPath2DLayerProps;
 }
 export interface IPath2DLayerProps extends IBaseLayerProps {
+    /**
+     * The Path2D object representing the shape of the layer.
+     */
     path2D: Path2D;
+    /**
+     * Whether the layer is filled.
+     */
+    filled: boolean;
+    /**
+     * The fill style (color or pattern) of the layer.
+     */
+    fillStyle: ColorType;
     /**
      * The stroke properties of the Path2D.
      */

package/dist/structures/components/Path2DLayer.js

@@ -141,7 +141,9 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
         ctx.save();
         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.drawShadow)(ctx, this.props.shadow);
         (0, utils_1.opacity)(ctx, this.props.opacity);
+        (0, utils_1.filters)(ctx, this.props.filter);
         ctx.globalCompositeOperation = this.props.globalComposite;
         if (this.props.clipPath) {
             ctx.clip(this.props.path2D);
@@ -184,6 +186,8 @@ class Path2DLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
+            filled: data.filled || true,
+            fillStyle: data.fillStyle || '#000000',
             path2D: data.path2D || new canvas_1.Path2D(),
             stroke: {
                 width: data.stroke?.width || 1,

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

@@ -27,6 +27,14 @@ export interface IQuadraticLayerProps extends IBaseLayerProps {
      * The end point of the quadratic curve, including x and y coordinates.
      */
     endPoint: Point;
+    /**
+     * Whether the layer is filled.
+     */
+    filled: boolean;
+    /**
+     * The fill style (color or pattern) of the layer.
+     */
+    fillStyle: ColorType;
     /**
      * The stroke properties of the quadratic curve.
      */

package/dist/structures/components/QuadraticLayer.js

@@ -160,6 +160,8 @@ class QuadraticLayer 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,
             controlPoints: data.controlPoints || [{ x: 0, y: 0 }],
             endPoint: data.endPoint || { x: 0, y: 0 },

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

@@ -1,5 +1,5 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ScaleType, ColorType, AnyWeight, AnyTextAlign, AnyTextBaseline, AnyTextDirection, LineCap, LineJoin, LayerType } from "../../types";
+import { ScaleType, ColorType, AnyWeight, AnyTextAlign, AnyTextBaseline, AnyTextDirection, LineCap, LineJoin, LayerType, SubStringColor } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
@@ -23,6 +23,18 @@ 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.
+     */
+    fillStyle: ColorType;
+    /**
+     * Array of substring color configurations for partial text coloring.
+     */
+    subStringColors?: SubStringColor[];
     /**
      * The font configuration for the text.
      */
@@ -151,20 +163,20 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
     }, size?: number, weight?: AnyWeight): this;
     /**
      * Configures the multiline properties of the text layer.
-     * @param {boolean} [enabled] - Whether multiline is enabled.
      * @param {ScaleType} [width] - The width of the multiline text area.
      * @param {ScaleType} [height] - The height of the multiline text area.
      * @param {number} [spacing] - The spacing between lines (optional).
      * @returns {this} The current instance for chaining.
      */
-    setMultiline(enabled: boolean, width: ScaleType, height: ScaleType, spacing?: number): this;
+    setMultiline(width: ScaleType, height: ScaleType, spacing?: number): this;
     /**
      * Sets the color of the text layer.
-     * @param {ColorType} [color] - The color of the text.
+     * @param {ColorType} [color] - The base color of the text.
+     * @param {SubStringColor[]} [sub] - Optional substring colors for partial text coloring.
      * @returns {this} The current instance for chaining.
      * @throws {LazyError} If the color is not provided or invalid.
      */
-    setColor(color: ColorType): this;
+    setColor(color: ColorType, ...sub: SubStringColor[]): this;
     /**
      * Sets the alignment of the text layer.
      * @param {AnyTextAlign} [align] - The alignment of the text.
@@ -233,6 +245,7 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
      * @param {number} [x] - The x-coordinate of the text.
      * @param {number} [y] - The y-coordinate of the text.
      * @param {number} [w] - The width of the text area.
+     * @param {number} [textOffset] - The offset of this text segment in the original full text (for multiline support).
      */
     private drawText;
     /**
@@ -242,8 +255,8 @@ export declare class TextLayer extends BaseLayer<ITextLayerProps> {
     toJSON(): ITextLayer;
     /**
      * Validates the properties of the Text Layer.
-     * @param {ITextLayerProps} [props] - The properties to validate.
+     * @param {ITextLayerProps} [data] - The properties to validate.
      * @returns {ITextLayerProps} The validated properties.
      */
-    protected validateProps(props: ITextLayerProps): ITextLayerProps;
+    protected validateProps(data: ITextLayerProps): ITextLayerProps;
 }

package/dist/structures/components/TextLayer.js

@@ -63,15 +63,14 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     }
     /**
      * Configures the multiline properties of the text layer.
-     * @param {boolean} [enabled] - Whether multiline is enabled.
      * @param {ScaleType} [width] - The width of the multiline text area.
      * @param {ScaleType} [height] - The height of the multiline text area.
      * @param {number} [spacing] - The spacing between lines (optional).
      * @returns {this} The current instance for chaining.
      */
-    setMultiline(enabled, width, height, spacing) {
+    setMultiline(width, height, spacing) {
         this.props.multiline = {
-            enabled: enabled,
+            enabled: true,
             spacing: spacing || 1.1,
         };
         this.props.size = {
@@ -82,16 +81,20 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     }
     /**
      * Sets the color of the text layer.
-     * @param {ColorType} [color] - The color of the text.
+     * @param {ColorType} [color] - The base color of the text.
+     * @param {SubStringColor[]} [sub] - Optional substring colors for partial text coloring.
      * @returns {this} The current instance for chaining.
      * @throws {LazyError} If the color is not provided or invalid.
      */
-    setColor(color) {
+    setColor(color, ...sub) {
         if (!color)
             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');
         this.props.fillStyle = color;
+        if (sub && sub.length > 0) {
+            this.props.subStringColors = sub;
+        }
         return this;
     }
     /**
@@ -222,10 +225,12 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                 let ym = y;
                 lines = [];
                 let line = '';
+                let charOffset = 0; // Track position in original text
                 for (let word of words) {
                     let linePlus = line + word + ' ';
                     if (ctx.measureText(linePlus).width > w) {
-                        lines.push({ text: line, x: xm, y: ym });
+                        lines.push({ text: line, x: xm, y: ym, startOffset: charOffset });
+                        charOffset += line.length;
                         line = word + ' ';
                         ym += lineHeight;
                     }
@@ -233,17 +238,17 @@ class TextLayer extends BaseLayer_1.BaseLayer {
                         line = linePlus;
                     }
                 }
-                lines.push({ text: line, x: xm, y: ym });
+                lines.push({ text: line, x: xm, y: ym, startOffset: charOffset });
                 if (ym > ym + h)
                     break;
             }
             for (let line of lines) {
-                this.drawText(this.props, ctx, fillStyle, line.text, line.x, line.y, w);
+                this.drawText(this.props, ctx, fillStyle, line.text, line.x, line.y, w, line.startOffset);
             }
         }
         else {
             ctx.font = `${this.props.font.weight} ${this.props.font.size}px ${this.props.font.family}`;
-            this.drawText(this.props, ctx, fillStyle, this.props.text, x, y, w);
+            this.drawText(this.props, ctx, fillStyle, this.props.text, x, y, w, 0);
         }
         ctx.closePath();
         ctx.restore();
@@ -257,22 +262,113 @@ class TextLayer extends BaseLayer_1.BaseLayer {
      * @param {number} [x] - The x-coordinate of the text.
      * @param {number} [y] - The y-coordinate of the text.
      * @param {number} [w] - The width of the text area.
+     * @param {number} [textOffset] - The offset of this text segment in the original full text (for multiline support).
      */
-    drawText(props, ctx, fillStyle, text, x, y, w) {
-        if (props.filled) {
-            ctx.fillStyle = fillStyle;
-            ctx.fillText(text, x, y, w);
+    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);
+            }
+            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);
+            }
+            return;
         }
-        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);
+        // Draw text with substring colors
+        const textLength = text.length;
+        let currentX = x;
+        // Save original text alignment and set to left for manual positioning
+        const originalAlign = ctx.textAlign;
+        ctx.textAlign = 'left';
+        // Adjust starting X based on text alignment
+        const alignValue = props.align;
+        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') {
+            const totalWidth = ctx.measureText(text).width;
+            currentX = x - totalWidth;
+        }
+        // Create segments based on substring colors
+        const segments = [];
+        // Sort substring colors by start position
+        const sortedColors = [...props.subStringColors].sort((a, b) => a.start - b.start);
+        let currentIndex = 0;
+        for (const subColor of sortedColors) {
+            // Adjust positions based on textOffset (for multiline support)
+            const globalStart = subColor.start;
+            const globalEnd = subColor.end;
+            const lineStart = textOffset;
+            const lineEnd = textOffset + textLength;
+            // Skip if this color segment doesn't overlap with current line
+            if (globalEnd <= lineStart || globalStart >= lineEnd) {
+                continue;
+            }
+            // Calculate local positions within this line
+            const localStart = Math.max(0, globalStart - lineStart);
+            const localEnd = Math.min(textLength, globalEnd - lineStart);
+            // Add base color segment before this substring color
+            if (currentIndex < localStart) {
+                segments.push({
+                    text: text.substring(currentIndex, localStart),
+                    color: fillStyle,
+                    start: currentIndex,
+                    end: localStart
+                });
+            }
+            // Add colored substring
+            if (localStart < localEnd) {
+                segments.push({
+                    text: text.substring(localStart, localEnd),
+                    color: subColor.color,
+                    start: localStart,
+                    end: localEnd
+                });
+                currentIndex = localEnd;
+            }
+        }
+        // Add remaining text with base color
+        if (currentIndex < textLength) {
+            segments.push({
+                text: text.substring(currentIndex),
+                color: fillStyle,
+                start: currentIndex,
+                end: textLength
+            });
+        }
+        // Draw each segment
+        for (const segment of segments) {
+            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);
+            }
+            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);
+            }
+            currentX += segmentWidth;
         }
+        // Restore original text alignment
+        ctx.textAlign = originalAlign;
     }
     /**
      * Converts the Text Layer to a JSON representation.
@@ -290,29 +386,29 @@ class TextLayer extends BaseLayer_1.BaseLayer {
     }
     /**
      * Validates the properties of the Text Layer.
-     * @param {ITextLayerProps} [props] - The properties to validate.
+     * @param {ITextLayerProps} [data] - The properties to validate.
      * @returns {ITextLayerProps} The validated properties.
      */
-    validateProps(props) {
+    validateProps(data) {
         return {
-            ...super.validateProps(props),
-            text: props.text || "",
+            ...super.validateProps(data),
+            filled: data.filled || true,
+            fillStyle: data.fillStyle || '#000000',
+            text: data.text || "",
             font: {
-                family: props.font?.family || "Arial",
-                size: props.font?.size || 16,
-                weight: props.font?.weight || types_1.FontWeight.Regular,
+                family: data.font?.family || "Arial",
+                size: data.font?.size || 16,
+                weight: data.font?.weight || types_1.FontWeight.Regular,
             },
             multiline: {
-                enabled: props.multiline?.enabled || false,
-                spacing: props.multiline?.spacing || 1.1,
+                enabled: data.multiline?.enabled || false,
+                spacing: data.multiline?.spacing || 1.1,
             },
             size: {
-                width: props.size?.width || "vw",
-                height: props.size?.height || 0,
+                width: data.size?.width || "vw",
+                height: data.size?.height || 0,
             },
-            align: props.align || types_1.TextAlign.Left,
-            fillStyle: props.fillStyle || "#000000",
-            filled: props.filled !== undefined ? props.filled : true,
+            align: data.align || types_1.TextAlign.Left,
         };
     }
 }

package/dist/types/types.d.ts

@@ -96,4 +96,10 @@ export interface Transform {
     matrix: DOMMatrix2DInit;
 }
 
-export type radiusCorner = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | 'all';
+export type RadiusCorner = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | 'all';
+
+export type SubStringColor = {
+    color: StringColorType;
+    start: number;
+    end: number;
+}

package/dist/utils/utils.d.ts

@@ -1,10 +1,10 @@
-import type { AnyCentring, AnyLayer, AnyTextAlign, ColorType, PointNumber, ScaleType, Transform } from "../types";
+import type { AnyCentring, AnyLayer, AnyTextAlign, ColorType, PointNumber, ScaleType, SubStringColor, Transform } from "../types";
 import { LayerType } from "../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../structures/managers";
 import { Group } from "../structures/components";
 export declare function generateID(type: string): string;
-export declare function isColor(v: ColorType): "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+export declare function isColor(v: ColorType | SubStringColor): "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
 export declare function parseToNormal(v: ScaleType, ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, layer?: {
     width: number;
     height: number;
@@ -35,7 +35,7 @@ export declare function parser(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, m
 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 | null | undefined): void;
-export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType, opts: {
+export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType | SubStringColor, opts: {
     debug?: boolean;
     layer?: {
         width: number;
@@ -45,7 +45,7 @@ export declare function parseFillStyle(ctx: SKRSContext2D, color: ColorType, opt
         align: AnyCentring;
     };
     manager?: LayersManager;
-}): string | Promise<CanvasPattern> | CanvasGradient;
+}): string | CanvasGradient | Promise<CanvasPattern>;
 export declare function transform(ctx: SKRSContext2D, transform: Transform, layer?: {
     width: number;
     height: number;

package/dist/utils/utils.js

@@ -33,7 +33,7 @@ let rgbaReg = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(0|0?\.\d+|1(\.0)?)\)$/;
 let hslReg = /^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/;
 let hslaReg = /^hsla\((\d+),\s*(\d+)%,\s*(\d+)%,\s*(0|0?\.\d+|1(\.0)?)\)$/;
 function isColor(v) {
-    return typeof (v === 'string' && (hexReg.test(v) || rgbReg.test(v) || rgbaReg.test(v) || hslReg.test(v) || hslaReg.test(v))) || v instanceof helpers_1.Gradient || v instanceof helpers_1.Pattern;
+    return typeof (v === 'string' && (hexReg.test(v) || rgbReg.test(v) || rgbaReg.test(v) || hslReg.test(v) || hslaReg.test(v))) || v instanceof helpers_1.Gradient || v instanceof helpers_1.Pattern || (typeof v === 'object' && (v.start && v.end && v.color));
 }
 function parseToNormal(v, ctx, canvas, layer = { width: 0, height: 0 }, options = { vertical: false, layer: false }, manager) {
     if (typeof v === 'number')
@@ -149,7 +149,13 @@ function parseFillStyle(ctx, color, opts) {
     if (color instanceof helpers_1.Gradient || color instanceof helpers_1.Pattern) {
         return color.draw(ctx, opts);
     }
-    return color;
+    if (typeof color === 'object' && color.start && color.end && color.color) {
+        return color.color;
+    }
+    else if (typeof color === 'string') {
+        return color;
+    }
+    return '#000000';
 }
 function transform(ctx, transform, layer = { width: 0, height: 0, x: 0, y: 0, type: types_1.LayerType.Morph }, extra = { text: '', textAlign: types_1.TextAlign.Left, fontSize: 0, multiline: false }) {
     if (transform) {

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "@nmmty/lazycanvas",
-  "version": "0.6.1",
-  "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/NMMTY/LazyCanvas.git"
-  },
-  "keywords": [
-    "canvas",
-    "@napi-rs/canvas",
-    "node-canvas",
-    "easy",
-    "simple"
-  ],
-  "author": "NMMTY",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/NMMTY/LazyCanvas/issues"
-  },
-  "homepage": "https://github.com/NMMTY/LazyCanvas#readme",
-  "dependencies": {
-    "@napi-rs/canvas": "^0.1.72",
-    "gifenc": "^1.0.3",
-    "js-yaml": "^4.1.0",
-    "path": "^0.12.7",
-    "svgson": "^5.3.1"
-  },
-  "devDependencies": {
-    "@hitomihiumi/colors.ts": "^1.0.3",
-    "@types/js-yaml": "^4.0.9",
-    "@types/node": "^22.10.2",
-    "@typescript-eslint/utils": "^8.39.1",
-    "ava": "^6.2.0",
-    "eslint": "^9.23.0",
-    "eslint-config-neon": "^0.2.7",
-    "lodash.merge": "^4.6.2",
-    "tslib": "^2.8.1",
-    "tsx": "^4.19.2",
-    "typescript": "^5.4.5",
-    "@hitomihiumi/micro-docgen": "0.4.2"
-  },
-  "scripts": {
-    "test": "tsc ./test/test.ts && node ./test/test.js",
-    "centring": "tsc ./test/centring.ts && node ./test/centring.js",
-    "logo": "tsc ./test/logo.ts && node ./test/logo.js",
-    "text": "tsc ./test/text.ts && node ./test/text.js",
-    "animation": "tsc ./test/animation.ts && node ./test/animation.js",
-    "iotest": "tsc ./test/iotest.ts && node ./test/iotest.js",
-    "gradient": "tsc ./test/gradient.ts && node ./test/gradient.js",
-    "docgen": "tsx docgen.ts && tsx ./scripts/post-docgen.ts",
-    "lint": "eslint ./src --ext .ts",
-    "lint:fix": "eslint ./src --ext .ts --fix",
-    "font": "tsx ./scripts/font-gen.ts",
-    "build": "tsc && tsx ./scripts/post-build.ts"
-  }
-}
+{
+  "name": "@nmmty/lazycanvas",
+  "version": "0.6.3",
+  "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "test": "tsc ./test/test.ts && node ./test/test.js",
+    "centring": "tsc ./test/centring.ts && node ./test/centring.js",
+    "logo": "tsc ./test/logo.ts && node ./test/logo.js",
+    "text": "tsc ./test/text.ts && node ./test/text.js",
+    "animation": "tsc ./test/animation.ts && node ./test/animation.js",
+    "iotest": "tsc ./test/iotest.ts && node ./test/iotest.js",
+    "gradient": "tsc ./test/gradient.ts && node ./test/gradient.js",
+    "docgen": "tsx docgen.ts && tsx ./scripts/post-docgen.ts",
+    "lint": "eslint ./src --ext .ts",
+    "lint:fix": "eslint ./src --ext .ts --fix",
+    "font": "tsx ./scripts/font-gen.ts",
+    "build": "tsc && tsx ./scripts/post-build.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NMMTY/LazyCanvas.git"
+  },
+  "keywords": [
+    "canvas",
+    "@napi-rs/canvas",
+    "node-canvas",
+    "easy",
+    "simple"
+  ],
+  "author": "NMMTY",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/NMMTY/LazyCanvas/issues"
+  },
+  "homepage": "https://github.com/NMMTY/LazyCanvas#readme",
+  "dependencies": {
+    "@napi-rs/canvas": "^0.1.72",
+    "gifenc": "^1.0.3",
+    "js-yaml": "^4.1.0",
+    "path": "^0.12.7",
+    "svgson": "^5.3.1"
+  },
+  "devDependencies": {
+    "@hitomihiumi/colors.ts": "^1.0.3",
+    "@hitomihiumi/micro-docgen": "workspace:*",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^22.10.2",
+    "@typescript-eslint/utils": "^8.39.1",
+    "ava": "^6.2.0",
+    "eslint": "^9.23.0",
+    "eslint-config-neon": "^0.2.7",
+    "lodash.merge": "^4.6.2",
+    "tslib": "^2.8.1",
+    "tsx": "^4.19.2",
+    "typescript": "^5.4.5"
+  }
+}