@nmmty/lazycanvas 1.0.0-dev.4 → 1.0.0-dev.7

package/dist/core/Scene.d.ts

@@ -15,8 +15,11 @@ export declare class Scene {
      * Create a new Scene
      * @param width - Canvas width in pixels
      * @param height - Canvas height in pixels
+     * @param opts
      */
-    constructor(width: number, height: number);
+    constructor(width: number, height: number, opts?: {
+        debug?: boolean;
+    });
     /**
      * Load a layer tree created via JSX
      * Registers all layers with IDs into the manager
@@ -47,11 +50,6 @@ export declare class Scene {
      * @param time - Current time in seconds
      */
     private updateAllStates;
-    /**
-     * Draw a layer or group
-     * @param layer - Layer to draw
-     */
-    private drawLayer;
     /**
      * Render multiple frames and return as animation
      * @param startTime - Start time in seconds

package/dist/core/Scene.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Scene = void 0;
+const types_1 = require("../types");
 const ThreadScheduler_1 = require("./ThreadScheduler");
 const LazyCanvas_1 = require("../structures/LazyCanvas");
 /**
@@ -11,12 +12,13 @@ class Scene {
      * Create a new Scene
      * @param width - Canvas width in pixels
      * @param height - Canvas height in pixels
+     * @param opts
      */
-    constructor(width, height) {
+    constructor(width, height, opts = {}) {
         this.allLayers = [];
         this.scheduler = new ThreadScheduler_1.ThreadScheduler();
         this.lastFrameTime = 0;
-        this.lazyCanvas = new LazyCanvas_1.LazyCanvas().create(width, height);
+        this.lazyCanvas = new LazyCanvas_1.LazyCanvas(opts).create(width, height);
     }
     /**
      * Load a layer tree created via JSX
@@ -41,8 +43,8 @@ class Scene {
         this.lazyCanvas.ctx.clearRect(0, 0, this.lazyCanvas.canvas.width, this.lazyCanvas.canvas.height);
         // 3. PHASE 1: Update all layer states from signals
         this.updateAllStates(time);
-        // 4. PHASE 2: Draw the layer tree
-        await this.drawLayer(this.lazyCanvas.manager.layers.toArray()[0]);
+        // 4. PHASE 2: Draw the layer tree using RenderManager
+        await this.lazyCanvas.manager.render.render(types_1.Export.CTX);
         this.lastFrameTime = time;
     }
     async renderFirstFrame() {
@@ -81,24 +83,6 @@ class Scene {
             }
         }
     }
-    /**
-     * Draw a layer or group
-     * @param layer - Layer to draw
-     */
-    async drawLayer(layer) {
-        if (!layer.visible)
-            return;
-        // Set global composite operation if present
-        if ("props" in layer && layer.props?.globalComposite) {
-            this.lazyCanvas.ctx.globalCompositeOperation = layer.props.globalComposite;
-        }
-        // Draw the layer
-        if ("draw" in layer && typeof layer.draw === "function") {
-            await layer.draw(this.lazyCanvas.ctx, this.lazyCanvas.canvas, this.lazyCanvas.manager.layers, false);
-        }
-        // Reset shadow after drawing
-        this.lazyCanvas.ctx.shadowColor = "transparent";
-    }
     /**
      * Render multiple frames and return as animation
      * @param startTime - Start time in seconds

package/dist/jsx-runtime.js

@@ -64,7 +64,7 @@ function createElement(type, props, ...children) {
  */
 function createGroupInstance(props, children) {
     const { id, visible, zIndex, ...otherProps } = props;
-    const group = new components_1.Div({
+    const group = new components_1.Div(otherProps, {
         id,
         visible,
         zIndex,

package/dist/structures/LazyCanvas.d.ts

@@ -1,6 +1,7 @@
 import { AnyExport, JSONLayer } from "../types";
 import { Canvas, SKRSContext2D, SvgCanvas, SvgExportFlag } from "@napi-rs/canvas";
 import { LayersManager, RenderManager, FontsManager } from "./managers";
+import { LayoutManager } from "./managers/LayoutManager";
 import { IDiv } from "./components";
 /**
  * Interface representing the LazyCanvas structure.
@@ -84,6 +85,7 @@ export declare class LazyCanvas implements ILazyCanvas {
         layers: LayersManager;
         render: RenderManager;
         fonts: FontsManager;
+        layout: LayoutManager;
     };
     /**
      * The options for configuring the LazyCanvas instance.

package/dist/structures/LazyCanvas.js

@@ -4,6 +4,7 @@ exports.LazyCanvas = void 0;
 const types_1 = require("../types");
 const canvas_1 = require("@napi-rs/canvas");
 const managers_1 = require("./managers");
+const LayoutManager_1 = require("./managers/LayoutManager");
 const LazyUtil_1 = require("../utils/LazyUtil");
 const utils_1 = require("../utils/utils");
 /**
@@ -23,6 +24,7 @@ class LazyCanvas {
             layers: new managers_1.LayersManager({ debug: opts?.debug }),
             render: new managers_1.RenderManager(this, { debug: opts?.debug }),
             fonts: new managers_1.FontsManager({ debug: opts?.debug }),
+            layout: new LayoutManager_1.LayoutManager({ debug: opts?.debug }),
         };
         this.options = {
             width: 0,

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

@@ -1,5 +1,6 @@
-import { ScaleType, AnyCentring, AnyGlobalCompositeOperation, Transform, AnyFilter, LayerType } from "../../types";
+import { ScaleType, AnyCentring, AnyGlobalCompositeOperation, Transform, AnyFilter, LayerType, ILayoutProps, AnyLayer } from "../../types";
 import { Signal } from "../../core/Signal";
+import { Div } from "./Div";
 /**
  * Interface representing the base structure of a layer.
  */
@@ -8,6 +9,14 @@ export interface IBaseLayer {
      * The unique identifier of the layer.
      */
     id: string;
+    /**
+     * The parent of the layer.
+     */
+    parent?: IBaseLayer | any | null;
+    /**
+     * The children of the layer.
+     */
+    children?: Array<AnyLayer | Div>;
     /**
      * The type of the layer.
      */
@@ -29,7 +38,7 @@ export interface IBaseLayer {
  * Interface representing the properties of a base layer.
  */
 export interface IBaseLayerProps {
-    position: {
+    position?: {
         /**
          * The x-coordinate of the layer.
          */
@@ -39,6 +48,10 @@ export interface IBaseLayerProps {
          */
         y: ScaleType;
     };
+    /**
+     * The layout properties of the layer.
+     */
+    layout?: ILayoutProps;
     /**
      * The centring type of the layer.
      */
@@ -66,11 +79,11 @@ export interface IBaseLayerProps {
         /**
          * The horizontal offset of the shadow.
          */
-        offsetX: number;
+        offsetX?: number;
         /**
          * The vertical offset of the shadow.
          */
-        offsetY: number;
+        offsetY?: number;
     };
     /**
      * The transformation properties of the layer.
@@ -104,40 +117,39 @@ export interface IBaseLayerMisc {
  *
  * @template T - A type extending `IBaseLayerProps` that defines the properties of the layer.
  */
-export declare class BaseLayer<T extends IBaseLayerProps> {
-    /**
-     * The unique identifier of the layer.
-     * @type {string}
-     */
+export declare class BaseLayer<T extends IBaseLayerProps> implements IBaseLayer {
     id: string;
-    /**
-     * The type of the layer.
-     * @type {LayerType}
-     */
     type: LayerType;
+    zIndex: number;
+    visible: boolean;
+    props: T;
+    parent?: IBaseLayer | any | null;
+    children: Array<AnyLayer | Div>;
+    private _signals;
+    constructor(type: LayerType, props: T, misc?: IBaseLayerMisc);
     /**
-     * The z-index of the layer, determining its stacking order.
-     * @type {number}
+     * Adds components to the layer.
+     * @param {AnyLayer[] | Div[]} [components] - The components to add to the layer.
+     * @returns {this} The current instance for chaining.
      */
-    zIndex: number;
+    add(...components: Array<AnyLayer | Div>): this;
     /**
-     * The visibility of the layer.
-     * @type {boolean}
+     * Removes a component from the layer by its ID.
+     * @param {string} [id] - The unique identifier of the component to remove.
+     * @returns {this} The current instance for chaining.
      */
-    visible: boolean;
+    remove(id: string): this;
     /**
-     * The properties of the layer, defined by the generic type `T`.
-     * @type {T}
+     * Retrieves a component from the layer 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.
      */
-    props: T;
-    _signals: Map<string, Signal<any>>;
+    get(id: string): AnyLayer | Div | undefined;
     /**
-     * Constructs a new `BaseLayer` instance.
-     * @param {LayerType} [type] - The type of the layer.
-     * @param {T} [props] - The properties of the layer.
-     * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
+     * Retrieves all components from the layer.
+     * @returns {AnyLayer[] | Div[]} An array of all components in the layer.
      */
-    constructor(type?: LayerType, props?: T, misc?: IBaseLayerMisc);
+    getAll(): Array<AnyLayer | Div>;
     /**
      * Recursively extract signals from props and nested objects
      * @param obj - Object to extract signals from

package/dist/structures/components/BaseLayer.js

@@ -13,21 +13,55 @@ const helpers_1 = require("../helpers");
  * @template T - A type extending `IBaseLayerProps` that defines the properties of the layer.
  */
 class BaseLayer {
-    /**
-     * Constructs a new `BaseLayer` instance.
-     * @param {LayerType} [type] - The type of the layer.
-     * @param {T} [props] - The properties of the layer.
-     * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
-     */
     constructor(type, props, misc) {
+        this.children = [];
         this._signals = new Map();
-        this.id = misc?.id || (0, utils_1.generateID)(type ? type : types_1.LayerType.Base);
-        this.type = type ? type : types_1.LayerType.Base;
+        this.id = misc?.id || (0, utils_1.generateID)(type);
+        this.type = type;
         this.zIndex = misc?.zIndex || 1;
-        this.visible = misc?.visible !== undefined ? misc.visible : true;
-        this.props = props ? props : {};
+        this.visible = misc?.visible || true;
+        this.props = props;
+        this.parent = null;
+        this.children = [];
         this.extractSignals(this.props, "");
-        this.props = this.validateProps(this.props);
+    }
+    /**
+     * Adds components to the layer.
+     * @param {AnyLayer[] | Div[]} [components] - The components to add to the layer.
+     * @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.children.push(...layersArray);
+        return this;
+    }
+    /**
+     * Removes a component from the layer by its ID.
+     * @param {string} [id] - The unique identifier of the component to remove.
+     * @returns {this} The current instance for chaining.
+     */
+    remove(id) {
+        this.children = this.children.filter((c) => c.id !== id);
+        return this;
+    }
+    /**
+     * Retrieves a component from the layer 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.children.find((c) => c.id === id);
+    }
+    /**
+     * Retrieves all components from the layer.
+     * @returns {AnyLayer[] | Div[]} An array of all components in the layer.
+     */
+    getAll() {
+        return this.children;
     }
     /**
      * Recursively extract signals from props and nested objects
@@ -235,7 +269,6 @@ class BaseLayer {
     validateProps(data) {
         return {
             ...data,
-            position: data.position || { x: 0, y: 0 },
             centring: data.centring || types_1.Centring.Center,
             filter: data.filter || "",
             opacity: data.opacity || 1,

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

@@ -19,7 +19,15 @@ export interface IBezierLayer extends IBaseLayer {
  * Interface representing the properties of a Bezier layer.
  */
 export interface IBezierLayerProps extends IBaseLayerProps {
-    position: IBaseLayerProps["position"] & {
+    position: {
+        /**
+         * The start x of the Bézier curve.
+         */
+        x: ScaleType;
+        /**
+         * The start y of the Bézier curve.
+         */
+        y: ScaleType;
         /**
          * The end x of the Bézier curve.
          */
@@ -36,7 +44,7 @@ export interface IBezierLayerProps extends IBaseLayerProps {
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * The stroke properties of the Bézier curve.
      */

package/dist/structures/components/BezierLayer.js

@@ -55,7 +55,7 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
             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;
+        this.props.color = color;
         return this;
     }
     /**
@@ -131,7 +131,7 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
             { x: cp2x, y: cp2y },
             { x: xe, y: ye },
         ]);
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, {
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
             debug,
             layer: { width, height, x: min.x, y: min.y, align: "none" },
             manager,
@@ -215,7 +215,7 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
                 endX: data.position?.endX || 0,
                 endY: data.position?.endY || 0,
             },
-            fillStyle: data.fillStyle || "#000000",
+            color: data.color || "#000000",
             centring: data.centring || types_1.Centring.None,
             controlPoints: data.controlPoints || [
                 { x: 0, y: 0 },

package/dist/structures/components/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 layer's.
  */
-export interface IDiv {
+export interface IDiv extends IBaseLayer {
     /**
      * The unique identifier of the group.
      */
@@ -26,11 +27,11 @@ export interface IDiv {
      */
     layers: Array<AnyLayer | Div>;
     /**
-     *
+     * The properties specific to the Div group.
      */
-    props?: IDivProps;
+    props: IDivProps;
 }
-export interface IDivProps {
+export interface IDivProps extends IBaseLayerProps {
     /**
      * Don't use, this is just for compatibility.
      */
@@ -40,7 +41,7 @@ export interface IDivProps {
 /**
  * Class representing a group of layer's.
  */
-export declare class Div implements IDiv {
+export declare class Div extends BaseLayer<IDivProps> implements IDiv {
     /**
      * The unique identifier of the group.
      */
@@ -61,14 +62,16 @@ export declare class Div implements IDiv {
      * The layer's contained within the group.
      */
     layers: Array<AnyLayer | Div>;
-    props?: IDivProps;
+    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;

package/dist/structures/components/Div.js

@@ -4,17 +4,20 @@ exports.Div = void 0;
 const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
+const BaseLayer_1 = require("./BaseLayer");
 /**
  * Class representing a group of layer's.
  */
-class Div {
+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(opts) {
+    constructor(props, opts) {
+        super(types_1.LayerType.Group, props || {}, opts);
         /**
          * The type of the group, which is `Group`.
          */
@@ -23,7 +26,8 @@ class Div {
         this.visible = opts?.visible || true;
         this.zIndex = opts?.zIndex || 1;
         this.layers = [];
-        this.props = {};
+        this.props = props || {};
+        this.parent = null;
     }
     /**
      * Sets the ID of the group.
@@ -60,6 +64,9 @@ class Div {
     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;
     }
@@ -114,6 +121,13 @@ class Div {
         }
     }
     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)
                 LazyUtil_1.LazyLog.log("info", `Rendering ${subLayer.id}...\nData:`, subLayer.toJSON());
@@ -133,6 +147,7 @@ class Div {
                 }
             }
         }
+        ctx.restore();
     }
     /**
      * Converts the group to a JSON representation.

package/dist/structures/components/ImageLayer.js

@@ -60,8 +60,8 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
     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.position.x },
-            ys: { v: this.props.position.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xs: { v: this.props.position?.x || 0 },
+            ys: { v: this.props.position?.y || 0, options: LazyUtil_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));

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

@@ -19,7 +19,15 @@ export interface ILineLayer extends IBaseLayer {
  * Interface representing the properties of a Line Layer.
  */
 export interface ILineLayerProps extends IBaseLayerProps {
-    position: IBaseLayerProps["position"] & {
+    position: {
+        /**
+         * The x-coordinate of the start point of the line.
+         */
+        x: ScaleType;
+        /**
+         * The y-coordinate of the start point of the line.
+         */
+        y: ScaleType;
         /**
          * The x-coordinate of the end point of the line.
          */
@@ -36,7 +44,7 @@ export interface ILineLayerProps extends IBaseLayerProps {
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * The stroke properties of the line.
      */

package/dist/structures/components/LineLayer.js

@@ -43,7 +43,7 @@ class LineLayer extends BaseLayer_1.BaseLayer {
             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;
+        this.props.color = color;
         return this;
     }
     /**
@@ -103,7 +103,7 @@ class LineLayer extends BaseLayer_1.BaseLayer {
         });
         let width = Math.abs(xe - xs);
         let height = Math.abs(ye - ys);
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, {
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
             debug,
             layer: { width, height, x: Math.min(xs, xe), y: Math.min(ys, ye), align: "none" },
             manager,
@@ -153,7 +153,7 @@ class LineLayer extends BaseLayer_1.BaseLayer {
                 endX: data.position?.endX || 0,
                 endY: data.position?.endY || 0,
             },
-            fillStyle: data.fillStyle || "#000000",
+            color: data.color || "#000000",
             centring: data.centring || types_1.Centring.None,
             stroke: {
                 width: data.stroke?.width || 1,

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

@@ -41,7 +41,7 @@ export interface IMorphLayerProps extends IBaseLayerProps {
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * The stroke properties of the morph.
      */

package/dist/structures/components/MorphLayer.js

@@ -47,7 +47,7 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
             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;
+        this.props.color = color;
         return this;
     }
     /**
@@ -81,8 +81,8 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     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.position.x },
-            ys: { v: this.props.position.y, options: LazyUtil_1.defaultArg.vl(true) },
+            xs: { v: this.props.position?.x || 0 },
+            ys: { v: this.props.position?.y || 0, options: LazyUtil_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));
@@ -96,7 +96,7 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
             }
         }
         let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
-        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle, {
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
             debug,
             layer: { width: w, height: h, x: xs, y: ys, align: this.props.centring },
             manager,
@@ -153,7 +153,7 @@ class MorphLayer extends BaseLayer_1.BaseLayer {
     validateProps(data) {
         return {
             ...super.validateProps(data),
-            fillStyle: data.fillStyle || "#000000",
+            color: data.color || "#000000",
             size: {
                 width: data.size?.width || 100,
                 height: data.size?.height || 100,

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

@@ -21,13 +21,13 @@ export interface IPath2DLayerProps extends IBaseLayerProps {
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * The stroke properties of the Path2D.
      */
-    stroke: StrokeOptions;
-    loadFromSVG: boolean;
-    clipPath: boolean;
+    stroke?: StrokeOptions;
+    loadFromSVG?: boolean;
+    clipPath?: boolean;
 }
 export declare class Path2DLayer extends BaseLayer<IPath2DLayerProps> {
     id: string;