@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.10

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 export * from "./structures/LazyCanvas";
 export * from "./structures/managers";
 export * from "./structures/components";
-export * from "./types";
 export * from "./structures/helpers";
+export * from "./types";
 export * from "./helpers";
+export * from "./core";
+export * from "./utils";
+export * from "./jsx-runtime";

package/dist/index.js

@@ -17,6 +17,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./structures/LazyCanvas"), exports);
 __exportStar(require("./structures/managers"), exports);
 __exportStar(require("./structures/components"), exports);
-__exportStar(require("./types"), exports);
 __exportStar(require("./structures/helpers"), exports);
+__exportStar(require("./types"), exports);
 __exportStar(require("./helpers"), exports);
+__exportStar(require("./core"), exports);
+__exportStar(require("./utils"), exports);
+__exportStar(require("./jsx-runtime"), exports);

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,17 @@
+/**
+ * JSX createElement factory for LazyCanvas components
+ * Compatible with "jsx": "react" in tsconfig.json
+ */
+export declare function createElement(type: any, props: any | null, ...children: any[]): any;
+/**
+ * Fragment component for grouping elements without creating a Group layer
+ */
+export declare function Fragment(props: {
+    children: any[];
+}): any[];
+/**
+ * Export for compatibility with some JSX runtimes
+ */
+export declare const jsx: typeof createElement;
+export declare const jsxs: typeof createElement;
+export declare const jsxDEV: typeof createElement;

package/dist/jsx-runtime.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsxDEV = exports.jsxs = exports.jsx = void 0;
+exports.createElement = createElement;
+exports.Fragment = Fragment;
+const components_1 = require("./structures/components");
+const components_2 = require("./structures/components");
+/**
+ * JSX createElement factory for LazyCanvas components
+ * Compatible with "jsx": "react" in tsconfig.json
+ */
+function createElement(type, props, ...children) {
+    // Handle null props
+    const allProps = props || {};
+    // Flatten and filter children
+    const flatChildren = children
+        .flat(Infinity)
+        .filter((child) => child !== null && child !== undefined && child !== false);
+    // Extract special props
+    const { ref, children: propsChildren, ...restProps } = allProps;
+    // Merge children from props and arguments
+    const allChildren = [
+        ...(Array.isArray(propsChildren) ? propsChildren : propsChildren ? [propsChildren] : []),
+        ...flatChildren,
+    ].filter(Boolean);
+    let instance;
+    // Handle different component types
+    if (typeof type === "string") {
+        // Intrinsic elements (e.g., 'group', 'morph', etc.)
+        if (type === "group") {
+            instance = createGroupInstance(restProps, allChildren);
+        }
+        else {
+            throw new Error(`JSX: Unknown intrinsic element type: ${type}`);
+        }
+    }
+    else if (typeof type === "function") {
+        // Check if it's a class component (has prototype with methods)
+        if (type.prototype && (type.prototype.draw || type.prototype instanceof components_2.BaseLayer)) {
+            // Class component (Layer classes)
+            instance = createLayerInstance(type, restProps, allChildren);
+        }
+        else {
+            // Functional component
+            return type({ ...restProps, children: allChildren });
+        }
+    }
+    else {
+        throw new Error(`JSX: Invalid component type: ${typeof type}`);
+    }
+    // Handle ref
+    if (ref) {
+        if (typeof ref === "function") {
+            ref(instance);
+        }
+        else if (ref && typeof ref === "object" && "current" in ref) {
+            ref.current = instance;
+        }
+    }
+    return instance;
+}
+/**
+ * Create a Group instance
+ */
+function createGroupInstance(props, children) {
+    const { id, visible, zIndex, ...otherProps } = props;
+    const group = new components_1.Div(otherProps, {
+        id,
+        visible,
+        zIndex,
+    });
+    // Add children to group
+    if (children.length > 0) {
+        group.add(...children);
+    }
+    return group;
+}
+/**
+ * Create a Layer instance (MorphLayer, TextLayer, etc.)
+ */
+function createLayerInstance(LayerClass, props, children) {
+    // Extract misc props that go to the second constructor parameter
+    const { id, visible, zIndex, ...layerProps } = props;
+    const misc = {};
+    if (id !== undefined)
+        misc.id = id;
+    if (visible !== undefined)
+        misc.visible = visible;
+    if (zIndex !== undefined)
+        misc.zIndex = zIndex;
+    // Create instance
+    // Most layers have constructor(props, misc)
+    const instance = new LayerClass(layerProps, misc);
+    // Some layers might support children (like custom composite layers)
+    if (children.length > 0 && instance.add && typeof instance.add === "function") {
+        instance.add(...children);
+    }
+    return instance;
+}
+/**
+ * Fragment component for grouping elements without creating a Group layer
+ */
+function Fragment(props) {
+    return props.children;
+}
+/**
+ * Export for compatibility with some JSX runtimes
+ */
+exports.jsx = createElement;
+exports.jsxs = createElement;
+exports.jsxDEV = createElement;

package/dist/structures/LazyCanvas.d.ts

@@ -1,7 +1,8 @@
 import { AnyExport, JSONLayer } from "../types";
 import { Canvas, SKRSContext2D, SvgCanvas, SvgExportFlag } from "@napi-rs/canvas";
-import { LayersManager, RenderManager, FontsManager, AnimationManager, IAnimationOptions, PluginManager, ILazyCanvasPlugin } from "./managers";
-import { Group } from "./components";
+import { LayersManager, IRenderManager, FontsManager, RenderManagerConstructor } from "./managers";
+import { LayoutManager } from "./managers/LayoutManager";
+import { IDiv } from "./components";
 /**
  * Interface representing the LazyCanvas structure.
  */
@@ -19,10 +20,9 @@ export interface ILazyCanvas {
      */
     manager: {
         layers: LayersManager;
-        render: RenderManager;
+        render: IRenderManager;
         fonts: FontsManager;
-        animation: AnimationManager;
-        plugins: PluginManager;
+        layout: LayoutManager;
     };
     /**
      * The options for configuring the LazyCanvas instance.
@@ -62,14 +62,10 @@ export interface IOLazyCanvas {
      * The options for configuring the LazyCanvas instance.
      */
     options: ILazyCanvasOptions;
-    /**
-     * The animation options for the LazyCanvas instance.
-     */
-    animation: IAnimationOptions;
     /**
      * The layers to be added to the LazyCanvas instance.
      */
-    layers: Array<JSONLayer | Group>;
+    layers: Array<JSONLayer | IDiv>;
 }
 /**
  * Class representing a LazyCanvas, which provides a structured way to manage canvas rendering.
@@ -84,15 +80,13 @@ export declare class LazyCanvas implements ILazyCanvas {
      */
     ctx: SKRSContext2D;
     /**
-     * The manager object containing various managers for layers, rendering, fonts, and animation.
      * The manager object containing various managers for layers, rendering, fonts, animation, and plugins.
      */
     manager: {
         layers: LayersManager;
-        render: RenderManager;
+        render: IRenderManager;
         fonts: FontsManager;
-        animation: AnimationManager;
-        plugins: PluginManager;
+        layout: LayoutManager;
     };
     /**
      * The options for configuring the LazyCanvas instance.
@@ -100,11 +94,12 @@ export declare class LazyCanvas implements ILazyCanvas {
     options: ILazyCanvasOptions;
     /**
      * Constructs a new LazyCanvas instance.
+     * @param {RenderManagerConstructor} [renderPipline] - The constructor for the render pipeline to be used (default is ClassicRenderPipeline).
      * @param {Object} [opts] - Optional settings for the LazyCanvas instance.
      * @param {boolean} [opts.debug] - Whether debugging is enabled.
      * @param {IOLazyCanvas} [opts.settings] - The input settings for the LazyCanvas instance.
      */
-    constructor(opts?: {
+    constructor(renderPipline?: RenderManagerConstructor, opts?: {
         debug?: boolean;
         settings?: IOLazyCanvas;
     });
@@ -138,37 +133,4 @@ export declare class LazyCanvas implements ILazyCanvas {
      * @returns {this} The current instance for chaining.
      */
     create(width: number, height: number): this;
-    /**
-     * Installs a plugin to the canvas.
-     * @param {ILazyCanvasPlugin} [plugin] - The plugin to install.
-     * @returns {this} The current instance for chaining.
-     */
-    use(plugin: ILazyCanvasPlugin): this;
-    /**
-     * Removes a plugin from the canvas.
-     * @param {string} [pluginName] - The name of the plugin to remove.
-     * @returns {this} The current instance for chaining.
-     */
-    removePlugin(pluginName: string): this;
-    /**
-     * Gets a plugin by name.
-     * @param {string} [pluginName] - The name of the plugin.
-     * @returns {ILazyCanvasPlugin | undefined} The plugin or undefined if not found.
-     */
-    getPlugin(pluginName: string): ILazyCanvasPlugin | undefined;
-    /**
-     * Lists all installed plugins.
-     * @returns {string[]} Array of plugin names.
-     */
-    listPlugins(): string[];
-    /**
-     * Gets information about all installed plugins.
-     * @returns Array of plugin information objects.
-     */
-    getPluginsInfo(): Array<{
-        name: string;
-        version: string;
-        description?: string;
-        dependencies?: string[];
-    }>;
 }

package/dist/structures/LazyCanvas.js

@@ -4,44 +4,27 @@ exports.LazyCanvas = void 0;
 const types_1 = require("../types");
 const canvas_1 = require("@napi-rs/canvas");
 const managers_1 = require("./managers");
-const LazyUtil_1 = require("../utils/LazyUtil");
-const utils_1 = require("../utils/utils");
+const LayoutManager_1 = require("./managers/LayoutManager");
+const utils_1 = require("../utils");
 /**
  * Class representing a LazyCanvas, which provides a structured way to manage canvas rendering.
  */
 class LazyCanvas {
-    /**
-     * The canvas instance, which can be either a Canvas or SvgCanvas.
-     */
-    canvas;
-    /**
-     * The 2D rendering context of the canvas.
-     */
-    ctx;
-    /**
-     * The manager object containing various managers for layers, rendering, fonts, and animation.
-     * The manager object containing various managers for layers, rendering, fonts, animation, and plugins.
-     */
-    manager;
-    /**
-     * The options for configuring the LazyCanvas instance.
-     */
-    options;
     /**
      * Constructs a new LazyCanvas instance.
+     * @param {RenderManagerConstructor} [renderPipline] - The constructor for the render pipeline to be used (default is ClassicRenderPipeline).
      * @param {Object} [opts] - Optional settings for the LazyCanvas instance.
      * @param {boolean} [opts.debug] - Whether debugging is enabled.
      * @param {IOLazyCanvas} [opts.settings] - The input settings for the LazyCanvas instance.
      */
-    constructor(opts) {
+    constructor(renderPipline = managers_1.ClassicRenderPipeline, opts) {
         this.canvas = new canvas_1.Canvas(0, 0);
-        this.ctx = this.canvas.getContext('2d');
+        this.ctx = this.canvas.getContext("2d");
         this.manager = {
-            layers: new managers_1.LayersManager(this, { debug: opts?.debug }),
-            render: new managers_1.RenderManager(this, { debug: opts?.debug }),
+            layers: new managers_1.LayersManager({ debug: opts?.debug }),
+            render: new renderPipline(this, { debug: opts?.debug }),
             fonts: new managers_1.FontsManager({ debug: opts?.debug }),
-            animation: new managers_1.AnimationManager({ debug: opts?.debug, settings: { options: opts?.settings?.animation } }),
-            plugins: new managers_1.PluginManager(this, { debug: opts?.debug })
+            layout: new LayoutManager_1.LayoutManager({ debug: opts?.debug }),
         };
         this.options = {
             width: 0,
@@ -49,10 +32,10 @@ class LazyCanvas {
             animated: false,
             exportType: types_1.Export.BUFFER,
             flag: canvas_1.SvgExportFlag.RelativePathEncoding,
-            ...opts?.settings?.options
+            ...opts?.settings?.options,
         };
         if (opts?.debug)
-            LazyUtil_1.LazyLog.log('info', 'LazyCanvas initialized with settings:', opts.settings);
+            utils_1.LazyLog.log("info", "LazyCanvas initialized with settings:", opts.settings);
     }
     /**
      * Sets the export type for the canvas.
@@ -64,13 +47,13 @@ class LazyCanvas {
         switch (type) {
             case types_1.Export.BUFFER:
                 this.canvas = new canvas_1.Canvas(this.options.width, this.options.height);
-                this.ctx = this.canvas.getContext('2d');
+                this.ctx = this.canvas.getContext("2d");
                 break;
             case types_1.Export.CTX:
                 break;
             case types_1.Export.SVG:
                 this.canvas = new canvas_1.Canvas(this.options.width, this.options.height, this.options.flag || canvas_1.SvgExportFlag.RelativePathEncoding);
-                this.ctx = this.canvas.getContext('2d');
+                this.ctx = this.canvas.getContext("2d");
                 break;
         }
         return this;
@@ -83,7 +66,7 @@ class LazyCanvas {
     setSvgExportFlag(flag) {
         if (this.options.exportType === types_1.Export.SVG) {
             this.canvas = new canvas_1.Canvas(this.options.width, this.options.height, flag);
-            this.ctx = this.canvas.getContext('2d');
+            this.ctx = this.canvas.getContext("2d");
             this.options.flag = flag;
         }
         return this;
@@ -103,7 +86,7 @@ class LazyCanvas {
      */
     resize(ratio) {
         if (this.options.width <= 0 || this.options.height <= 0) {
-            throw new Error('Canvas dimensions are not set.');
+            throw new Error("Canvas dimensions are not set.");
         }
         this.options.width = (0, utils_1.resize)(this.options.width, ratio);
         this.options.height = (0, utils_1.resize)(this.options.height, ratio);
@@ -113,11 +96,9 @@ class LazyCanvas {
         else {
             this.canvas = new canvas_1.Canvas(this.options.width, this.options.height);
         }
-        this.ctx = this.canvas.getContext('2d');
+        this.ctx = this.canvas.getContext("2d");
         const layers = (0, utils_1.resizeLayers)(this.manager.layers.toArray(), ratio);
         this.manager.layers.fromArray(layers);
-        // Выполняем хук onResize для всех плагинов
-        this.manager.plugins.executeHook('onResize', this, ratio);
         return this;
     }
     /**
@@ -135,51 +116,9 @@ class LazyCanvas {
         else {
             this.canvas = new canvas_1.Canvas(width, height);
         }
-        this.ctx = this.canvas.getContext('2d');
-        this.manager.layers = new managers_1.LayersManager(this, { debug: this.manager.layers.debug });
-        // Выполняем хук onCanvasCreated для всех плагинов
-        this.manager.plugins.executeHook('onCanvasCreated', this, width, height);
+        this.ctx = this.canvas.getContext("2d");
+        this.manager.layers = new managers_1.LayersManager({ debug: this.manager.layers.debug });
         return this;
     }
-    /**
-     * Installs a plugin to the canvas.
-     * @param {ILazyCanvasPlugin} [plugin] - The plugin to install.
-     * @returns {this} The current instance for chaining.
-     */
-    use(plugin) {
-        this.manager.plugins.register(plugin);
-        return this;
-    }
-    /**
-     * Removes a plugin from the canvas.
-     * @param {string} [pluginName] - The name of the plugin to remove.
-     * @returns {this} The current instance for chaining.
-     */
-    removePlugin(pluginName) {
-        this.manager.plugins.unregister(pluginName);
-        return this;
-    }
-    /**
-     * Gets a plugin by name.
-     * @param {string} [pluginName] - The name of the plugin.
-     * @returns {ILazyCanvasPlugin | undefined} The plugin or undefined if not found.
-     */
-    getPlugin(pluginName) {
-        return this.manager.plugins.get(pluginName);
-    }
-    /**
-     * Lists all installed plugins.
-     * @returns {string[]} Array of plugin names.
-     */
-    listPlugins() {
-        return this.manager.plugins.list();
-    }
-    /**
-     * Gets information about all installed plugins.
-     * @returns Array of plugin information objects.
-     */
-    getPluginsInfo() {
-        return this.manager.plugins.getPluginInfo();
-    }
 }
 exports.LazyCanvas = LazyCanvas;

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

@@ -1,4 +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.
  */
@@ -7,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,17 +39,35 @@ export interface IBaseLayer {
  */
 export interface IBaseLayerProps {
     /**
-     * The x-coordinate of the layer.
+     * The unique identifier of the layer (optional, for JSX support).
      */
-    x: ScaleType;
+    id?: string;
     /**
-     * The y-coordinate of the layer.
+     * Whether the layer is visible (optional, for JSX support).
      */
-    y: ScaleType;
+    visible?: boolean;
+    /**
+     * The z-index of the layer (optional, for JSX support).
+     */
+    zIndex?: number;
+    position?: {
+        /**
+         * The x-coordinate of the layer.
+         */
+        x: ScaleType;
+        /**
+         * The y-coordinate of the layer.
+         */
+        y: ScaleType;
+    };
+    /**
+     * The layout properties of the layer.
+     */
+    layout?: ILayoutProps;
     /**
      * The centring type of the layer.
      */
-    centring: AnyCentring;
+    centring?: AnyCentring;
     /**
      * The filter effects applied to the layer.
      */
@@ -47,7 +75,7 @@ export interface IBaseLayerProps {
     /**
      * The opacity of the layer, ranging from 0 to 1.
      */
-    opacity: number;
+    opacity?: number | Signal<number>;
     /**
      * The shadow properties of the layer.
      */
@@ -63,20 +91,20 @@ 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.
      */
-    transform: Transform;
+    transform?: Transform;
     /**
      * The global composite operation applied to the layer.
      */
-    globalComposite: AnyGlobalCompositeOperation;
+    globalComposite?: AnyGlobalCompositeOperation;
 }
 /**
  * Interface representing miscellaneous options for a base layer.
@@ -101,39 +129,57 @@ export interface IBaseLayerMisc {
  *
  * @template T - A type extending `IBaseLayerProps` that defines the properties of the layer.
  */
-export declare class BaseLayer<T extends IBaseLayerProps> {
+export declare class BaseLayer<T extends IBaseLayerProps> implements IBaseLayer {
+    id: string;
+    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 unique identifier of the layer.
-     * @type {string}
+     * Adds components to the layer.
+     * @param {AnyLayer[] | Div[]} [components] - The components to add to the layer.
+     * @returns {this} The current instance for chaining.
      */
-    id: string;
+    add(...components: Array<AnyLayer | Div>): this;
     /**
-     * The type of the layer.
-     * @type {LayerType}
+     * 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.
      */
-    type: LayerType;
+    remove(id: string): this;
     /**
-     * The z-index of the layer, determining its stacking order.
-     * @type {number}
+     * 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.
      */
-    zIndex: number;
+    get(id: string): AnyLayer | Div | undefined;
     /**
-     * The visibility of the layer.
-     * @type {boolean}
+     * Retrieves all components from the layer.
+     * @returns {AnyLayer[] | Div[]} An array of all components in the layer.
      */
-    visible: boolean;
+    getAll(): Array<AnyLayer | Div>;
     /**
-     * The properties of the layer, defined by the generic type `T`.
-     * @type {T}
+     * Recursively extract signals from props and nested objects
+     * @param obj - Object to extract signals from
+     * @param path - Current property path (e.g., "size.width")
      */
-    props: T;
+    private extractSignals;
+    /**
+     * Update layer properties from signals at given time
+     * @param time - Current time in seconds
+     */
+    updateState(time: number): void;
     /**
-     * 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.
+     * Set a nested property value using dot notation path
+     * @param obj - Object to set property on
+     * @param path - Property path (e.g., "size.width")
+     * @param value - Value to set
      */
-    constructor(type?: LayerType, props?: T, misc?: IBaseLayerMisc);
+    private setNestedProperty;
     /**
      * Sets the position of the layer in the 2D plane.
      * @param {ScaleType} [x] - The x-coordinate of the layer.