@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.10

package/dist/structures/components/{Group.d.ts → Div.d.ts}

@@ -1,10 +1,11 @@
 import { AnyGlobalCompositeOperation, AnyLayer, LayerType } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
+import { BaseLayer, IBaseLayer, IBaseLayerProps } from "./BaseLayer";
 /**
- * Interface representing a group of layers.
+ * Interface representing a group of layer's.
  */
-export interface IGroup {
+export interface IDiv extends IBaseLayer {
     /**
      * The unique identifier of the group.
      */
@@ -22,24 +23,25 @@ export interface IGroup {
      */
     zIndex: number;
     /**
-     * The layers contained within the group.
+     * The layer's contained within the group.
      */
-    layers: Array<AnyLayer>;
+    layers: Array<AnyLayer | Div>;
     /**
-     *
+     * The properties specific to the Div group.
      */
-    props?: IGroupProps;
+    props: IDivProps;
 }
-export interface IGroupProps {
+export interface IDivProps extends IBaseLayerProps {
     /**
      * Don't use, this is just for compatibility.
      */
-    globalComposite: AnyGlobalCompositeOperation;
+    globalComposite?: AnyGlobalCompositeOperation;
+    children?: Array<any>;
 }
 /**
- * Class representing a group of layers.
+ * Class representing a group of layer's.
  */
-export declare class Group implements IGroup {
+export declare class Div extends BaseLayer<IDivProps> implements IDiv {
     /**
      * The unique identifier of the group.
      */
@@ -57,17 +59,19 @@ export declare class Group implements IGroup {
      */
     zIndex: number;
     /**
-     * The layers contained within the group.
+     * The layer's contained within the group.
      */
-    layers: Array<any>;
-    props?: IGroupProps;
+    layers: Array<AnyLayer | Div>;
+    props: IDivProps;
+    parent?: IBaseLayer | any | null;
     /**
      * Constructs a new Group instance.
+     * @param {IDivProps} [props] - The properties of the Div.
      * @param {string} [opts.id] - The unique identifier of the group.
      * @param {boolean} [opts.visible] - The visibility of the group.
      * @param {number} [opts.zIndex] - The z-index of the group.
      */
-    constructor(opts?: {
+    constructor(props?: IDivProps, opts?: {
         id?: string;
         visible?: boolean;
         zIndex?: number;
@@ -92,10 +96,10 @@ export declare class Group implements IGroup {
     setZIndex(zIndex: number): this;
     /**
      * Adds components to the group.
-     * @param {AnyLayer[]} [components] - The components to add to the group.
+     * @param {AnyLayer[] | Div[]} [components] - The components to add to the group.
      * @returns {this} The current instance for chaining.
      */
-    add(...components: AnyLayer[]): this;
+    add(...components: Array<AnyLayer | Div>): this;
     /**
      * Removes a component from the group by its ID.
      * @param {string} [id] - The unique identifier of the component to remove.
@@ -110,23 +114,38 @@ export declare class Group implements IGroup {
     /**
      * Retrieves a component from the group by its ID.
      * @param {string} [id] - The unique identifier of the component to retrieve.
-     * @returns {AnyLayer | undefined} The component with the specified ID, or undefined if not found.
+     * @returns {AnyLayer | Div | undefined} The component with the specified ID, or undefined if not found.
      */
-    get(id: string): AnyLayer | undefined;
+    get(id: string): AnyLayer | Div | undefined;
     /**
      * Retrieves all components from the group.
-     * @returns {AnyLayer[]} An array of all components in the group.
+     * @returns {AnyLayer[] | Div[]} An array of all components in the group.
      */
-    getAll(): AnyLayer[];
+    getAll(): Array<AnyLayer | Div>;
     /**
      * Gets the number of components in the group.
      * @returns {number} The number of components in the group.
      */
     get length(): number;
+    /**
+     * Update state for all child layers (for animation support)
+     * @param {number} time - Current time in seconds
+     */
+    updateState(time: number): void;
+    /**
+     * Renders a single layer or group of layers.
+     * @param {AnyLayer | Div} [layer] - The layer or group to render.
+     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
+     * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
+     * @param {LayersManager} [manager] - The layer's manager.
+     * @param {boolean} [debug] - Whether to enable debug logging.
+     * @returns {Promise<SKRSContext2D>} The canvas rendering context after rendering.
+     */
+    private renderLayer;
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
      * Converts the group to a JSON representation.
-     * @returns {IGroup} The JSON representation of the group.
+     * @returns {IDiv} The JSON representation of the group.
      */
-    toJSON(): IGroup;
+    toJSON(): IDiv;
 }

package/dist/structures/components/Div.js

@@ -0,0 +1,202 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Div = void 0;
+const types_1 = require("../../types");
+const utils_1 = require("../../utils");
+const BaseLayer_1 = require("./BaseLayer");
+/**
+ * Class representing a group of layer's.
+ */
+class Div extends BaseLayer_1.BaseLayer {
+    /**
+     * Constructs a new Group instance.
+     * @param {IDivProps} [props] - The properties of the Div.
+     * @param {string} [opts.id] - The unique identifier of the group.
+     * @param {boolean} [opts.visible] - The visibility of the group.
+     * @param {number} [opts.zIndex] - The z-index of the group.
+     */
+    constructor(props, opts) {
+        super(types_1.LayerType.Group, props || {}, opts);
+        /**
+         * The type of the group, which is `Group`.
+         */
+        this.type = types_1.LayerType.Group;
+        // Extract id, visible, zIndex from props if provided (for JSX support)
+        const propsId = props?.id;
+        const propsVisible = props?.visible;
+        const propsZIndex = props?.zIndex;
+        this.id = opts?.id || propsId || (0, utils_1.generateID)(types_1.LayerType.Group);
+        this.visible = opts?.visible ?? propsVisible ?? true;
+        this.zIndex = opts?.zIndex ?? propsZIndex ?? 1;
+        this.layers = [];
+        this.props = props || {};
+        this.parent = null;
+    }
+    /**
+     * Sets the ID of the group.
+     * @param {string} [id] - The unique identifier of the group.
+     * @returns {this} The current instance for chaining.
+     */
+    setID(id) {
+        this.id = id;
+        return this;
+    }
+    /**
+     * Sets the visibility of the group.
+     * @param {boolean} [visible] - The visibility state of the group.
+     * @returns {this} The current instance for chaining.
+     */
+    setVisible(visible) {
+        this.visible = visible;
+        return this;
+    }
+    /**
+     * Sets the z-index of the group.
+     * @param {number} [zIndex] - The z-index value of the group.
+     * @returns {this} The current instance for chaining.
+     */
+    setZIndex(zIndex) {
+        this.zIndex = zIndex;
+        return this;
+    }
+    /**
+     * Adds components to the group.
+     * @param {AnyLayer[] | Div[]} [components] - The components to add to the group.
+     * @returns {this} The current instance for chaining.
+     */
+    add(...components) {
+        let layersArray = components.filter((l) => l !== undefined);
+        layersArray = layersArray.sort((a, b) => a.zIndex - b.zIndex);
+        for (const layer of layersArray) {
+            layer.parent = this;
+        }
+        this.layers.push(...layersArray);
+        return this;
+    }
+    /**
+     * Removes a component from the group by its ID.
+     * @param {string} [id] - The unique identifier of the component to remove.
+     * @returns {this} The current instance for chaining.
+     */
+    remove(id) {
+        this.layers = this.layers.filter((c) => c.id !== id);
+        return this;
+    }
+    /**
+     * Clears all components from the group.
+     * @returns {this} The current instance for chaining.
+     */
+    clear() {
+        this.layers = [];
+        return this;
+    }
+    /**
+     * Retrieves a component from the group by its ID.
+     * @param {string} [id] - The unique identifier of the component to retrieve.
+     * @returns {AnyLayer | Div | undefined} The component with the specified ID, or undefined if not found.
+     */
+    get(id) {
+        return this.layers.find((c) => c.id === id);
+    }
+    /**
+     * Retrieves all components from the group.
+     * @returns {AnyLayer[] | Div[]} An array of all components in the group.
+     */
+    getAll() {
+        return this.layers;
+    }
+    /**
+     * Gets the number of components in the group.
+     * @returns {number} The number of components in the group.
+     */
+    get length() {
+        return this.layers.length;
+    }
+    /**
+     * Update state for all child layers (for animation support)
+     * @param {number} time - Current time in seconds
+     */
+    updateState(time) {
+        for (const layer of this.layers) {
+            if ("updateState" in layer && typeof layer.updateState === "function") {
+                layer.updateState(time);
+            }
+        }
+    }
+    /**
+     * Renders a single layer or group of layers.
+     * @param {AnyLayer | Div} [layer] - The layer or group to render.
+     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
+     * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
+     * @param {LayersManager} [manager] - The layer's manager.
+     * @param {boolean} [debug] - Whether to enable debug logging.
+     * @returns {Promise<SKRSContext2D>} The canvas rendering context after rendering.
+     */
+    async renderLayer(layer, ctx, canvas, manager, debug) {
+        if (debug)
+            utils_1.LazyLog.log("info", `Rendering ${layer.id}...\nData:`, layer.toJSON());
+        if (layer.visible) {
+            ctx.globalCompositeOperation = layer.props?.globalComposite || "source-over";
+            await layer.draw(ctx, canvas, manager, debug);
+            // Draw children if any (and not a Div, as Div handles its own children)
+            // Actually, if we want to support children on any layer, we should handle it here.
+            // But Div.draw already handles children.
+            // If we handle it here for Div, we get double rendering.
+            // So we skip Div.
+            const children = layer.children;
+            if (!(layer instanceof Div) && children && Array.isArray(children) && children.length > 0) {
+                ctx.save();
+                // Apply parent position offset
+                // LayoutManager sets position relative to parent.
+                // We need to translate context to parent's position so children are drawn relative to it.
+                // However, layer.draw() might have already drawn the layer at that position.
+                // And layer.draw() usually restores context.
+                // So we are back at parent's parent coordinate system.
+                // We need to translate to layer's position.
+                if (layer.props.position) {
+                    const x = typeof layer.props.position.x === "number" ? layer.props.position.x : 0;
+                    const y = typeof layer.props.position.y === "number" ? layer.props.position.y : 0;
+                    ctx.translate(x, y);
+                }
+                for (const child of children) {
+                    await this.renderLayer(child, ctx, canvas, manager, debug);
+                }
+                ctx.restore();
+            }
+            ctx.shadowColor = "transparent";
+        }
+        return ctx;
+    }
+    async draw(ctx, canvas, manager, debug) {
+        ctx.save();
+        // Apply position translation if available (from layout)
+        if (this.props.position) {
+            const x = typeof this.props.position.x === "number" ? this.props.position.x : 0;
+            const y = typeof this.props.position.y === "number" ? this.props.position.y : 0;
+            ctx.translate(x, y);
+        }
+        for (const subLayer of this.layers) {
+            if (debug)
+                utils_1.LazyLog.log("info", `Rendering ${subLayer.id}...\nData:`, subLayer.toJSON());
+            if (subLayer.visible) {
+                await this.renderLayer(subLayer, ctx, canvas, manager, debug);
+            }
+        }
+        ctx.restore();
+    }
+    /**
+     * Converts the group to a JSON representation.
+     * @returns {IDiv} The JSON representation of the group.
+     */
+    toJSON() {
+        return {
+            id: this.id,
+            type: this.type,
+            visible: this.visible,
+            zIndex: this.zIndex,
+            // @ts-ignore
+            layers: this.layers.map((c) => c.toJSON()),
+        };
+    }
+}
+exports.Div = Div;

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

@@ -38,7 +38,7 @@ export interface IImageLayerProps extends IBaseLayerProps {
         /**
          * The radius of the image.
          */
-        radius: {
+        radius?: {
             [corner in RadiusCorner]?: ScaleType;
         };
     };
@@ -78,7 +78,7 @@ export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
      * Draws the Image Layer on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      * @throws {LazyError} If the image could not be loaded.
      */

package/dist/structures/components/ImageLayer.js

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

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

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