@nmmty/lazycanvas 0.6.5 → 1.0.0-dev.3

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({
+        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,7 @@
 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, RenderManager, FontsManager } from "./managers";
+import { IDiv } from "./components";
 /**
  * Interface representing the LazyCanvas structure.
  */
@@ -21,8 +21,6 @@ export interface ILazyCanvas {
         layers: LayersManager;
         render: RenderManager;
         fonts: FontsManager;
-        animation: AnimationManager;
-        plugins: PluginManager;
     };
     /**
      * The options for configuring the LazyCanvas instance.
@@ -62,14 +60,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 +78,12 @@ 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;
         fonts: FontsManager;
-        animation: AnimationManager;
-        plugins: PluginManager;
     };
     /**
      * The options for configuring the LazyCanvas instance.
@@ -138,37 +129,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

@@ -10,23 +10,6 @@ const utils_1 = require("../utils/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 {Object} [opts] - Optional settings for the LazyCanvas instance.
@@ -35,13 +18,11 @@ class LazyCanvas {
      */
     constructor(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 }),
+            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 }),
-            animation: new managers_1.AnimationManager({ debug: opts?.debug, settings: { options: opts?.settings?.animation } }),
-            plugins: new managers_1.PluginManager(this, { debug: opts?.debug })
         };
         this.options = {
             width: 0,
@@ -49,10 +30,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);
+            LazyUtil_1.LazyLog.log("info", "LazyCanvas initialized with settings:", opts.settings);
     }
     /**
      * Sets the export type for the canvas.
@@ -64,13 +45,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 +64,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 +84,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 +94,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 +114,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,5 @@
 import { ScaleType, AnyCentring, AnyGlobalCompositeOperation, Transform, AnyFilter, LayerType } from "../../types";
+import { Signal } from "../../core/Signal";
 /**
  * Interface representing the base structure of a layer.
  */
@@ -28,18 +29,20 @@ export interface IBaseLayer {
  * Interface representing the properties of a base layer.
  */
 export interface IBaseLayerProps {
-    /**
-     * The x-coordinate of the layer.
-     */
-    x: ScaleType;
-    /**
-     * The y-coordinate of the layer.
-     */
-    y: ScaleType;
+    position: {
+        /**
+         * The x-coordinate of the layer.
+         */
+        x: ScaleType;
+        /**
+         * The y-coordinate of the layer.
+         */
+        y: ScaleType;
+    };
     /**
      * The centring type of the layer.
      */
-    centring: AnyCentring;
+    centring?: AnyCentring;
     /**
      * The filter effects applied to the layer.
      */
@@ -47,7 +50,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.
      */
@@ -72,11 +75,11 @@ export interface IBaseLayerProps {
     /**
      * 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.
@@ -127,6 +130,7 @@ export declare class BaseLayer<T extends IBaseLayerProps> {
      * @type {T}
      */
     props: T;
+    _signals: Map<string, Signal<any>>;
     /**
      * Constructs a new `BaseLayer` instance.
      * @param {LayerType} [type] - The type of the layer.
@@ -134,6 +138,24 @@ export declare class BaseLayer<T extends IBaseLayerProps> {
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(type?: LayerType, props?: T, misc?: IBaseLayerMisc);
+    /**
+     * Recursively extract signals from props and nested objects
+     * @param obj - Object to extract signals from
+     * @param path - Current property path (e.g., "size.width")
+     */
+    private extractSignals;
+    /**
+     * Update layer properties from signals at given time
+     * @param time - Current time in seconds
+     */
+    updateState(time: number): void;
+    /**
+     * 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
+     */
+    private setNestedProperty;
     /**
      * Sets the position of the layer in the 2D plane.
      * @param {ScaleType} [x] - The x-coordinate of the layer.

package/dist/structures/components/BaseLayer.js

@@ -4,6 +4,8 @@ exports.BaseLayer = void 0;
 const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
+const Signal_1 = require("../../core/Signal");
+const helpers_1 = require("../helpers");
 /**
  * Represents a base layer with generic properties and methods for managing
  * its position, visibility, transformations, and other attributes.
@@ -11,31 +13,6 @@ const LazyUtil_1 = require("../../utils/LazyUtil");
  * @template T - A type extending `IBaseLayerProps` that defines the properties of the layer.
  */
 class BaseLayer {
-    /**
-     * The unique identifier of the layer.
-     * @type {string}
-     */
-    id;
-    /**
-     * The type of the layer.
-     * @type {LayerType}
-     */
-    type;
-    /**
-     * The z-index of the layer, determining its stacking order.
-     * @type {number}
-     */
-    zIndex;
-    /**
-     * The visibility of the layer.
-     * @type {boolean}
-     */
-    visible;
-    /**
-     * The properties of the layer, defined by the generic type `T`.
-     * @type {T}
-     */
-    props;
     /**
      * Constructs a new `BaseLayer` instance.
      * @param {LayerType} [type] - The type of the layer.
@@ -43,13 +20,71 @@ class BaseLayer {
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(type, props, misc) {
+        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.zIndex = misc?.zIndex || 1;
-        this.visible = misc?.visible || true;
+        this.visible = misc?.visible !== undefined ? misc.visible : true;
         this.props = props ? props : {};
+        this.extractSignals(this.props, "");
         this.props = this.validateProps(this.props);
     }
+    /**
+     * Recursively extract signals from props and nested objects
+     * @param obj - Object to extract signals from
+     * @param path - Current property path (e.g., "size.width")
+     */
+    extractSignals(obj, path) {
+        if (!obj || typeof obj !== "object")
+            return;
+        for (const key in obj) {
+            const value = obj[key];
+            const currentPath = path ? `${path}.${key}` : key;
+            if (value instanceof Signal_1.Signal) {
+                // Store signal with its path
+                this._signals.set(currentPath, value);
+                // Replace signal with its initial value (at time 0)
+                obj[key] = value.get(0);
+            }
+            else if (value &&
+                typeof value === "object" &&
+                !Array.isArray(value) &&
+                !(value instanceof helpers_1.Gradient) &&
+                !(value instanceof helpers_1.Pattern) &&
+                !(value instanceof helpers_1.Link)) {
+                // Recursively process nested objects (but not arrays or special types)
+                this.extractSignals(value, currentPath);
+            }
+        }
+    }
+    /**
+     * Update layer properties from signals at given time
+     * @param time - Current time in seconds
+     */
+    updateState(time) {
+        this._signals.forEach((signal, path) => {
+            // Just read the current value - signals are updated by the scheduler
+            const value = signal.value ? signal.value() : signal.get(time);
+            this.setNestedProperty(this.props, path, value);
+        });
+    }
+    /**
+     * 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
+     */
+    setNestedProperty(obj, path, value) {
+        const keys = path.split(".");
+        let current = obj;
+        for (let i = 0; i < keys.length - 1; i++) {
+            if (!current[keys[i]] || typeof current[keys[i]] !== "object") {
+                current[keys[i]] = {};
+            }
+            current = current[keys[i]];
+        }
+        current[keys[keys.length - 1]] = value;
+    }
     /**
      * Sets the position of the layer in the 2D plane.
      * @param {ScaleType} [x] - The x-coordinate of the layer.
@@ -57,8 +92,7 @@ class BaseLayer {
      * @returns {this} The current instance for chaining.
      */
     setPosition(x, y) {
-        this.props.x = x;
-        this.props.y = y;
+        this.props.position = { x, y };
         return this;
     }
     /**
@@ -91,9 +125,9 @@ class BaseLayer {
      */
     setShadow(color, blur, offsetX, offsetY) {
         if (!color)
-            throw new LazyUtil_1.LazyError('The color of the shadow must be provided');
+            throw new LazyUtil_1.LazyError("The color of the shadow must be provided");
         if (!(0, utils_1.isColor)(color))
-            throw new LazyUtil_1.LazyError('The color of the shadow must be a valid color');
+            throw new LazyUtil_1.LazyError("The color of the shadow must be a valid color");
         this.props.shadow = {
             color: color,
             blur: blur || 0,
@@ -146,7 +180,7 @@ class BaseLayer {
      * @returns {this} The current instance for chaining.
      */
     setFilters(...filter) {
-        this.props.filter = filter.join(' ');
+        this.props.filter = filter.join(" ");
         return this;
     }
     /**
@@ -201,13 +235,12 @@ class BaseLayer {
     validateProps(data) {
         return {
             ...data,
-            x: data.x || 0,
-            y: data.y || 0,
+            position: data.position || { x: 0, y: 0 },
             centring: data.centring || types_1.Centring.Center,
-            filter: data.filter || '',
+            filter: data.filter || "",
             opacity: data.opacity || 1,
             transform: data.transform || {},
-            globalComposite: data.globalComposite || 'source-over',
+            globalComposite: data.globalComposite || "source-over",
         };
     }
 }

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

@@ -1,5 +1,5 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ColorType, Point, ScaleType, LayerType } from "../../types";
+import { ColorType, Point, ScaleType, LayerType, StrokeOptions } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
@@ -19,18 +19,20 @@ export interface IBezierLayer extends IBaseLayer {
  * Interface representing the properties of a Bezier layer.
  */
 export interface IBezierLayerProps extends IBaseLayerProps {
+    position: IBaseLayerProps["position"] & {
+        /**
+         * The end x of the Bézier curve.
+         */
+        endX: ScaleType;
+        /**
+         * The end y of the Bézier curve.
+         */
+        endY: ScaleType;
+    };
     /**
      * The control points of the Bézier curve.
      */
     controlPoints: Array<Point>;
-    /**
-     * The end point of the Bézier curve.
-     */
-    endPoint: Point;
-    /**
-     * Whether the layer is filled.
-     */
-    filled: boolean;
     /**
      * The fill style (color or pattern) of the layer.
      */
@@ -38,32 +40,7 @@ export interface IBezierLayerProps extends IBaseLayerProps {
     /**
      * The stroke properties of the Bézier curve.
      */
-    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 Bezier layer, extending the BaseLayer class.
@@ -90,12 +67,14 @@ export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
         y: ScaleType;
     }[]): this;
     /**
-     * Sets the end position of the Bezier layer.
+     * Sets the position of the Bezier 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 Bezier layer.
      * @param {ColorType} [color] - The color of the layer.