@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.4

package/dist/structures/helpers/Gradient.js

@@ -8,32 +8,16 @@ const utils_1 = require("../../utils/utils");
  * Class representing a gradient with properties and methods to manipulate it.
  */
 class Gradient {
-    /**
-     * The type of fill, which is always `Gradient`.
-     */
-    fillType = types_1.FillType.Gradient;
-    /**
-     * The type of gradient (e.g., linear, radial, conic).
-     */
-    type;
-    /**
-     * The points defining the gradient.
-     */
-    points;
-    /**
-     * The color stops for the gradient.
-     */
-    stops;
-    /**
-     * The angle of the gradient (optional, used for linear gradients).
-     */
-    angle;
     /**
      * Constructs a new Gradient instance.
      * @param {Object} [opts] - Optional properties for the gradient.
      * @param {IGradient} [opts.props] - The gradient properties.
      */
     constructor(opts) {
+        /**
+         * The type of fill, which is always `Gradient`.
+         */
+        this.fillType = types_1.FillType.Gradient;
         this.type = opts?.props?.type || types_1.GradientType.Linear;
         this.points = opts?.props?.points || [];
         this.stops = opts?.props?.stops || [];
@@ -115,33 +99,36 @@ class Gradient {
         let gradientData = this.toJSON();
         let gradient;
         if (opts.debug)
-            LazyUtil_1.LazyLog.log('none', `Gradient:`, gradientData);
+            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) }
+            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 });
+            LazyUtil_1.LazyLog.log("none", `Gradient points:`, { x0, y0, x1, y1 });
         switch (gradientData.type) {
             case types_1.GradientType.Linear:
             case "linear":
-                if (gradientData.type === "linear" && (gradientData.angle || gradientData.angle === 0) && opts.layer && gradientData.points.length < 2) {
+                if (gradientData.type === "linear" &&
+                    (gradientData.angle || gradientData.angle === 0) &&
+                    opts.layer &&
+                    gradientData.points.length < 2) {
                     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 cx = this.getPosition(x, width, align, "x");
+                    const cy = this.getPosition(y, height, align, "y");
                     if (opts.debug)
-                        LazyUtil_1.LazyLog.log('none', `Center for angle calculation:`, { cx, cy });
+                        LazyUtil_1.LazyLog.log("none", `Center for angle calculation:`, { cx, cy });
                     const [p1, p2] = this.getLinearGradientPoints(cx, cy, width, height, gradientData.angle);
                     if (opts.debug)
-                        LazyUtil_1.LazyLog.log('none', `Linear Gradient Points from angle:`, { p1, p2 });
+                        LazyUtil_1.LazyLog.log("none", `Linear Gradient Points from angle:`, { p1, p2 });
                     gradient = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
                 }
                 else {
                     if (opts.debug)
-                        LazyUtil_1.LazyLog.log('none', `Linear Gradient created from points.`);
+                        LazyUtil_1.LazyLog.log("none", `Linear Gradient created from points.`);
                     gradient = ctx.createLinearGradient(x0, y0, x1 || x0, y1 || y0);
                 }
                 break;
@@ -156,8 +143,8 @@ class Gradient {
             default:
                 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 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);
                 }
@@ -167,7 +154,7 @@ class Gradient {
                 break;
         }
         for (let stop of gradientData.stops) {
-            gradient.addColorStop(stop.offset, stop.color);
+            gradient.addColorStop(stop.offset, (0, utils_1.parseFillStyle)(ctx, stop.color, opts));
         }
         return gradient;
     }
@@ -181,7 +168,7 @@ class Gradient {
             type: this.type,
             points: this.points,
             stops: this.stops,
-            angle: this.angle
+            angle: this.angle,
         };
     }
     getLinearGradientPoints(cx, cy, w, h, angleInDegrees) {
@@ -198,41 +185,41 @@ class Gradient {
         const y2r = cy + (x2 - cx) * sin + (y2 - cy) * cos;
         return [
             { x: x1r, y: y1r },
-            { x: x2r, y: y2r }
+            { x: x2r, y: y2r },
         ];
     }
-    getPosition(pos, side, align, type = 'x') {
+    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);
+                return type === "x" ? pos + side / 2 : pos + side / 2;
             case types_1.Centring.Start:
             case "start":
-                return type === 'x' ? pos + (side / 2) : pos;
+                return type === "x" ? pos + side / 2 : pos;
             case types_1.Centring.StartBottom:
             case "start-bottom":
-                return type === 'x' ? pos + (side / 2) : pos - (side / 2);
+                return type === "x" ? pos + side / 2 : pos - side / 2;
             case types_1.Centring.CenterTop:
             case "center-top":
-                return type === 'x' ? pos : pos - (side / 2);
+                return type === "x" ? pos : pos - side / 2;
             case types_1.Centring.Center:
             case "center":
-                return type === 'x' ? pos : pos;
+                return type === "x" ? pos : pos;
             case types_1.Centring.CenterBottom:
             case "center-bottom":
-                return type === 'x' ? pos : pos - (side / 2);
+                return type === "x" ? pos : pos - side / 2;
             case types_1.Centring.EndTop:
             case "end-top":
-                return type === 'x' ? pos - (side / 2) : pos + (side / 2);
+                return type === "x" ? pos - side / 2 : pos + side / 2;
             case types_1.Centring.End:
             case "end":
-                return type === 'x' ? pos - (side / 2) : pos;
+                return type === "x" ? pos - side / 2 : pos;
             case types_1.Centring.EndBottom:
             case "end-bottom":
-                return type === 'x' ? pos - (side / 2) : pos - (side / 2);
+                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);
+                return type === "x" ? pos + side / 2 : pos + side / 2;
             default:
                 throw new LazyUtil_1.LazyError(`Invalid centring type: ${align}`);
         }

package/dist/structures/helpers/Link.js

@@ -6,25 +6,13 @@ const types_1 = require("../../types");
  * Class representing a link between layers with properties and methods to manipulate it.
  */
 class Link {
-    /**
-     * The source layers ID.
-     */
-    source;
-    /**
-     * The type of the link (e.g., width, height, etc.).
-     */
-    type;
-    /**
-     * The additional spacing applied to the link.
-     */
-    additionalSpacing;
     /**
      * Constructs a new Link instance.
      * @param {Object} [opts] - Optional properties for the link.
      * @param {ILink} [opts.props] - The link properties.
      */
     constructor(opts) {
-        this.source = opts?.props?.source || '';
+        this.source = opts?.props?.source || "";
         this.type = opts?.props?.type || types_1.LinkType.Width;
         this.additionalSpacing = opts?.props?.additionalSpacing || 0;
     }
@@ -63,7 +51,7 @@ class Link {
         return {
             source: this.source,
             type: this.type,
-            additionalSpacing: this.additionalSpacing
+            additionalSpacing: this.additionalSpacing,
         };
     }
 }

package/dist/structures/helpers/Pattern.js

@@ -10,26 +10,18 @@ const LazyUtil_1 = require("../../utils/LazyUtil");
  * Class representing a pattern with properties and methods to manipulate it.
  */
 class Pattern {
-    /**
-     * The type of fill, which is always `Pattern`.
-     */
-    fillType = types_1.FillType.Pattern;
-    /**
-     * The type of the pattern (e.g., repeat, no-repeat, etc.).
-     */
-    type;
-    /**
-     * The source of the pattern, which can be a string (URL or path) or a LazyCanvas instance.
-     */
-    src;
     /**
      * Constructs a new Pattern instance.
      * @param {Object} [opts] - Optional properties for the pattern.
      * @param {IPattern} [opts.props] - The pattern properties.
      */
     constructor(opts) {
+        /**
+         * The type of fill, which is always `Pattern`.
+         */
+        this.fillType = types_1.FillType.Pattern;
         this.type = opts?.props?.type || types_1.PatternType.Repeat;
-        this.src = opts?.props?.src || '';
+        this.src = opts?.props?.src || "";
     }
     /**
      * Sets the type of the pattern.
@@ -56,9 +48,9 @@ class Pattern {
      */
     async draw(ctx) {
         if (!this.src)
-            throw new LazyUtil_1.LazyError('Pattern source is not set');
+            throw new LazyUtil_1.LazyError("Pattern source is not set");
         if (this.src instanceof LazyCanvas_1.LazyCanvas) {
-            return ctx.createPattern((await this.src.manager.render.render('canvas')), this.type);
+            return ctx.createPattern((await this.src.manager.render.render("canvas")), this.type);
         }
         return ctx.createPattern(await (0, canvas_1.loadImage)(this.src), this.type);
     }
@@ -70,12 +62,12 @@ class Pattern {
         let src = this.src;
         if (this.src instanceof LazyCanvas_1.LazyCanvas) {
             // @ts-ignore
-            src = new Exporter_1.Exporter(this.src).syncExport('json');
+            src = new Exporter_1.Exporter(this.src).syncExport("json");
         }
         return {
             fillType: this.fillType,
             type: this.type,
-            src: src
+            src: src,
         };
     }
 }

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

@@ -1,7 +1,7 @@
-export * from './Exporter';
-export * from './Font';
-export * from './Gradient';
-export * from './Link';
-export * from './Pattern';
-export * from './readers/JSONReader';
-export * from './readers/YAMLReader';
+export * from "./Exporter";
+export * from "./Font";
+export * from "./Gradient";
+export * from "./Link";
+export * from "./Pattern";
+export * from "./readers/JSONReader";
+export * from "./readers/YAMLReader";

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

@@ -27,17 +27,17 @@ export declare class JSONReader {
     }): LazyCanvas;
     /**
      * Parses an array of JSON layers into an array of AnyLayer or Group instances.
-     * @param {Array<JSONLayer | Group>} [data] - The array of JSON layers to parse.
+     * @param {Array<JSONLayer | Div>} [data] - The array of JSON layers to parse.
      * @param {Object} [opts] - Optional settings.
      * @param {boolean} [opts.debug] - Whether to enable debug logging.
-     * @returns {Array<AnyLayer | Group>} The parsed layers.
+     * @returns {Array<AnyLayer | Div>} The parsed layers.
      */
     private static layersParse;
     /**
      * Parses a single JSON layer into an AnyLayer or Group instance.
-     * @param {JSONLayer | IGroup | Group} [layer] - The JSON layer to parse.
+     * @param {JSONLayer | IDiv | Div} [layer] - The JSON layer to parse.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
-     * @returns {AnyLayer | Group} The parsed layer.
+     * @returns {AnyLayer | Div} The parsed layer.
      */
     private static layerParse;
     /**

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

@@ -38,9 +38,10 @@ const types_1 = require("../../../types");
 const components_1 = require("../../components");
 const __1 = require("../");
 const LazyCanvas_1 = require("../../LazyCanvas");
-const fs = __importStar(require("fs"));
+const fs = __importStar(require("node:fs"));
 const LazyUtil_1 = require("../../../utils/LazyUtil");
-const path = __importStar(require("path"));
+const path = __importStar(require("node:path"));
+const Signal_1 = require("../../../core/Signal");
 /**
  * Class responsible for reading and parsing JSON data into a LazyCanvas instance.
  */
@@ -60,17 +61,13 @@ class JSONReader {
         if (data.options.exportType === undefined) {
             throw new LazyUtil_1.LazyError("Invalid export type");
         }
-        if (data.options.flag === undefined) {
-            throw new LazyUtil_1.LazyError("Invalid export flag");
-        }
         if (data.layers === undefined || data.layers.length === 0) {
             throw new LazyUtil_1.LazyError("No layers found");
         }
         if (opts?.debug)
-            LazyUtil_1.LazyLog.log("info", "Reading JSON...\nOptions:", data.options, "\nAnimation:", data.animation, "\nLayers Number:", data.layers.length, "\nLayers:", data.layers);
+            LazyUtil_1.LazyLog.log("info", "Reading JSON...\nOptions:", data.options, "\nLayers Number:", data.layers.length, "\nLayers:", 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);
+        const canvas = new LazyCanvas_1.LazyCanvas({ settings: data, debug: opts?.debug }).create(data.options.width, data.options.height);
         canvas.manager.layers.add(...layers);
         return canvas;
     }
@@ -94,37 +91,31 @@ class JSONReader {
     }
     /**
      * Parses an array of JSON layers into an array of AnyLayer or Group instances.
-     * @param {Array<JSONLayer | Group>} [data] - The array of JSON layers to parse.
+     * @param {Array<JSONLayer | Div>} [data] - The array of JSON layers to parse.
      * @param {Object} [opts] - Optional settings.
      * @param {boolean} [opts.debug] - Whether to enable debug logging.
-     * @returns {Array<AnyLayer | Group>} The parsed layers.
+     * @returns {Array<AnyLayer | Div>} The parsed layers.
      */
     static layersParse(data, opts) {
         return data.map((layer) => {
             if (opts?.debug)
-                LazyUtil_1.LazyLog.log('info', `Parsing layer ${layer.id}...\nData:`, layer);
-            const misc = {
+                LazyUtil_1.LazyLog.log("info", `Parsing layer ${layer.id}...\nData:`, layer);
+            return this.layerParse(layer, {
                 id: layer.id,
                 zIndex: layer.zIndex,
                 visible: layer.visible,
-            };
-            if (layer.type === types_1.LayerType.Group) {
-                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);
-            }
+            });
         });
     }
     /**
      * Parses a single JSON layer into an AnyLayer or Group instance.
-     * @param {JSONLayer | IGroup | Group} [layer] - The JSON layer to parse.
+     * @param {JSONLayer | IDiv | Div} [layer] - The JSON layer to parse.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
-     * @returns {AnyLayer | Group} The parsed layer.
+     * @returns {AnyLayer | Div} The parsed layer.
      */
     static layerParse(layer, misc) {
-        if (layer instanceof components_1.Group) {
-            return new components_1.Group(misc).add(...layer.layers.map((l) => this.layerParse(l)));
+        if (layer instanceof components_1.Div) {
+            return new components_1.Div(misc).add(...layer.layers.map((l) => this.layerParse(l)));
         }
         else {
             switch (layer.type) {
@@ -140,15 +131,12 @@ class JSONReader {
                     return new components_1.MorphLayer(layer.props, misc).setColor(this.fillParse(layer));
                 case types_1.LayerType.Line:
                     return new components_1.LineLayer(layer.props, misc).setColor(this.fillParse(layer));
-                case types_1.LayerType.Clear:
-                    return new components_1.ClearLayer(layer.props, misc);
                 case types_1.LayerType.Path:
                     return new components_1.Path2DLayer(layer.props, misc).setColor(this.fillParse(layer));
                 case types_1.LayerType.Polygon:
                     return new components_1.PolygonLayer(layer.props, misc).setColor(this.fillParse(layer));
                 case types_1.LayerType.Group:
-                    return new components_1.Group(misc)
-                        .add(...layer.layers.map((l) => this.layerParse(l)));
+                    return new components_1.Div(misc).add(...layer.layers.map((l) => this.layerParse(l)));
                 default:
                     return layer;
             }
@@ -160,24 +148,28 @@ class JSONReader {
      * @returns {string | Gradient | Pattern} The parsed fill style.
      */
     static fillParse(layer) {
-        if ('fillStyle' in layer.props && layer.props.fillStyle && typeof layer.props.fillStyle !== 'string') {
-            switch (layer.props.fillStyle?.fillType) {
-                case 'gradient':
-                    return new __1.Gradient({ props: layer.props.fillStyle });
-                case 'pattern':
-                    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));
-                default:
-                    return layer.props.fillStyle;
+        if ("fillStyle" in layer.props) {
+            if ((0, Signal_1.isSignal)(layer.props.fillStyle)) {
+                throw new LazyUtil_1.LazyError("Signals are not supported in JSON fill styles");
             }
-        }
-        else if ('fillStyle' in layer.props) {
-            console.log(layer.type, layer);
-            return layer.props.fillStyle || '#000000';
+            if (typeof layer.props.fillStyle === "object") {
+                switch (layer.props.fillStyle?.fillType) {
+                    case "gradient":
+                        return new __1.Gradient({ props: layer.props.fillStyle });
+                    case "pattern":
+                        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));
+                    default:
+                        return layer.props.fillStyle;
+                }
+            }
+            return layer.props.fillStyle || "#000000";
         }
         else {
-            return '#000000';
+            return "#000000";
         }
     }
 }

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

@@ -36,9 +36,9 @@ 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 fs = __importStar(require("node:fs"));
 const LazyUtil_1 = require("../../../utils/LazyUtil");
-const path = __importStar(require("path"));
+const path = __importStar(require("node:path"));
 class YAMLReader {
     /**
      * Reads a YAML string and converts it to a LazyCanvas object.
@@ -49,9 +49,9 @@ class YAMLReader {
     static read(data, opts) {
         const yamlContent = _yaml.load(data);
         if (opts?.debug) {
-            LazyUtil_1.LazyLog.log('info', 'YAML content loaded:', yamlContent);
+            LazyUtil_1.LazyLog.log("info", "YAML content loaded:", yamlContent);
         }
-        if (typeof yamlContent === 'object' && yamlContent !== null) {
+        if (typeof yamlContent === "object" && yamlContent !== null) {
             return JSONReader_1.JSONReader.read(yamlContent, opts);
         }
         else {
@@ -70,12 +70,12 @@ class YAMLReader {
             throw new LazyUtil_1.LazyError(`File not found: ${filePath}`);
         }
         const ext = path.extname(filePath).toLowerCase();
-        if (ext !== '.yaml' && ext !== '.yml') {
+        if (ext !== ".yaml" && ext !== ".yml") {
             throw new LazyUtil_1.LazyError(`Invalid file extension: ${ext}. Expected .yaml or .yml.`);
         }
-        const data = fs.readFileSync(filePath, 'utf8');
+        const data = fs.readFileSync(filePath, "utf8");
         if (opts?.debug) {
-            LazyUtil_1.LazyLog.log('info', `Reading YAML file: ${filePath}`);
+            LazyUtil_1.LazyLog.log("info", `Reading YAML file: ${filePath}`);
         }
         return this.read(data, opts);
     }

package/dist/structures/managers/FontsManager.js

@@ -9,14 +9,6 @@ const canvas_1 = require("@napi-rs/canvas");
  * Class representing a manager for handling fonts.
  */
 class FontsManager {
-    /**
-     * A map storing fonts with their family and weight as the key.
-     */
-    map;
-    /**
-     * Whether debugging is enabled.
-     */
-    debug;
     /**
      * Constructs a new FontsManager instance.
      * @param {Object} [opts] - Optional settings for the FontsManager.
@@ -33,14 +25,13 @@ class FontsManager {
      * @returns {this} The current instance for chaining.
      */
     loadFonts(fontList) {
-        this.add(...Object.entries(fontList).map(([fontFamily, fontWeights]) => {
+        this.add(...Object.entries(fontList)
+            .map(([fontFamily, fontWeights]) => {
             return Object.entries(fontWeights).map(([weight, base64]) => {
-                return new helpers_1.Font()
-                    .setFamily(fontFamily)
-                    .setWeight(Number(weight))
-                    .setBase64(base64);
+                return new helpers_1.Font().setFamily(fontFamily).setWeight(Number(weight)).setBase64(base64);
             });
-        }).flat());
+        })
+            .flat());
         return this;
     }
     /**
@@ -53,10 +44,10 @@ class FontsManager {
      */
     add(...fonts) {
         if (this.debug)
-            LazyUtil_1.LazyLog.log('info', `Adding fonts...\nlength: ${fonts.length}`);
+            LazyUtil_1.LazyLog.log("info", `Adding fonts...\nlength: ${fonts.length}`);
         for (const font of fonts) {
             if (this.debug)
-                LazyUtil_1.LazyLog.log('none', `Data:`, font.toJSON());
+                LazyUtil_1.LazyLog.log("none", `Data:`, font.toJSON());
             if (!font.family)
                 throw new LazyUtil_1.LazyError("Family must be provided");
             if (!font.weight)
@@ -101,7 +92,7 @@ class FontsManager {
     get(family, weight) {
         if (weight)
             return this.map.get(`${family}_${weight}`);
-        return Array.from(this.map.values()).filter(font => font.family === family);
+        return Array.from(this.map.values()).filter((font) => font.family === family);
     }
     /**
      * Checks if a font exists in the manager.
@@ -112,7 +103,7 @@ class FontsManager {
     has(family, weight) {
         if (weight)
             return this.map.has(`${family}_${weight}`);
-        return Array.from(this.map.values()).some(font => font.family === family);
+        return Array.from(this.map.values()).some((font) => font.family === family);
     }
     /**
      * Retrieves the number of fonts in the manager.