@nmmty/lazycanvas 0.6.0-dev.1a1f37 → 0.6.0-dev.321c2e

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.321c2e",
   "description": "A simple way to interact with @napi-rs/canvas in an advanced way!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -13,8 +13,8 @@
     "iotest": "tsc ./test/iotest.ts && node ./test/iotest.js",
     "gradient": "tsc ./test/gradient.ts && node ./test/gradient.js",
     "doc": "tsx docgen.ts",
-    "font": "tsc ./scripts/font-gen.ts && node ./scripts/font-gen.js",
-    "build": "tsc"
+    "font": "tsx ./scripts/font-gen.ts",
+    "build": "tsc && tsx ./scripts/post-build.ts"
   },
   "repository": {
     "type": "git",