@nmmty/lazycanvas 0.4.0 → 0.5.1

package/dist/structures/LazyCanvas.js

@@ -1,75 +1,140 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LazyCanvas = void 0;
-const enum_1 = require("../types/enum");
+const types_1 = require("../types");
 const canvas_1 = require("@napi-rs/canvas");
 const LayersManager_1 = require("./managers/LayersManager");
 const RenderManager_1 = require("./managers/RenderManager");
 const FontsManager_1 = require("./managers/FontsManager");
 const AnimationManager_1 = require("./managers/AnimationManager");
+const LazyUtil_1 = require("../utils/LazyUtil");
+const utils_1 = require("../utils/utils");
+/**
+ * Class representing a LazyCanvas, which provides a structured way to manage canvas rendering.
+ */
 class LazyCanvas {
-    width;
-    height;
+    /**
+     * The canvas instance, which can be either a Canvas or SvgCanvas.
+     */
     canvas;
+    /**
+     * The 2D rendering context of the canvas.
+     */
     ctx;
-    layers;
-    render;
-    fonts;
-    animation;
-    exportType;
-    constructor(debug = false) {
-        this.width = 0;
-        this.height = 0;
+    /**
+     * The manager object containing various managers for layers, rendering, fonts, and animation.
+     */
+    manager;
+    /**
+     * The options for configuring the LazyCanvas instance.
+     */
+    options;
+    /**
+     * Constructs a new LazyCanvas instance.
+     * @param opts {Object} - Optional settings for the LazyCanvas instance.
+     * @param opts.debug {boolean} - Whether debugging is enabled.
+     * @param opts.settings {IOLazyCanvas} - The input settings for the LazyCanvas instance.
+     */
+    constructor(opts) {
         this.canvas = new canvas_1.Canvas(0, 0);
         this.ctx = this.canvas.getContext('2d');
-        this.layers = new LayersManager_1.LayersManager(debug);
-        this.render = new RenderManager_1.RenderManager(this, debug);
-        this.fonts = new FontsManager_1.FontsManager(debug);
-        this.animation = new AnimationManager_1.AnimationManager(debug);
-        this.exportType = enum_1.Export.Buffer;
+        this.manager = {
+            layers: new LayersManager_1.LayersManager({ debug: opts?.debug }),
+            render: new RenderManager_1.RenderManager(this, { debug: opts?.debug }),
+            fonts: new FontsManager_1.FontsManager({ debug: opts?.debug }),
+            animation: new AnimationManager_1.AnimationManager({ debug: opts?.debug, settings: { options: opts?.settings?.animation } })
+        };
+        this.options = {
+            width: opts?.settings?.options.width || 0,
+            height: opts?.settings?.options.height || 0,
+            animated: opts?.settings?.options.animated || false,
+            exportType: opts?.settings?.options.exportType || types_1.Export.BUFFER,
+            flag: opts?.settings?.options.flag || canvas_1.SvgExportFlag.RelativePathEncoding
+        };
+        if (opts?.debug)
+            LazyUtil_1.LazyLog.log('info', 'LazyCanvas initialized with settings:', opts.settings);
     }
     /**
-     * Set the export type
-     * @param type {AnyExport} - The `export` type
+     * Sets the export type for the canvas.
+     * @param type {AnyExport} - The export type (e.g., buffer, SVG, etc.).
+     * @returns {this} The current instance for chaining.
      */
     setExportType(type) {
-        this.exportType = type;
+        this.options.exportType = type;
         switch (type) {
-            case enum_1.Export.Buffer:
-                this.canvas = new canvas_1.Canvas(this.width, this.height);
+            case types_1.Export.BUFFER:
+                this.canvas = new canvas_1.Canvas(this.options.width, this.options.height);
                 this.ctx = this.canvas.getContext('2d');
                 break;
-            case enum_1.Export.CTX:
+            case types_1.Export.CTX:
                 break;
-            case enum_1.Export.SVG:
-                this.canvas = new canvas_1.Canvas(this.width, this.height, canvas_1.SvgExportFlag.RelativePathEncoding);
+            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');
                 break;
         }
         return this;
     }
     /**
-     * Set the SVG export flag. This method should be called after `setExportType` method.
-     * @param flag {SvgExportFlag} - The `flag` of the SVG export
+     * Sets the SVG export flag. This method should be called after `setExportType`.
+     * @param flag {SvgExportFlag} - The SVG export flag.
+     * @returns {this} The current instance for chaining.
      */
     setSvgExportFlag(flag) {
-        if (this.exportType === enum_1.Export.SVG) {
-            this.canvas = new canvas_1.Canvas(this.width, this.height, 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.options.flag = flag;
+        }
+        return this;
+    }
+    /**
+     * Enables animation for the canvas.
+     * @returns {this} The current instance for chaining.
+     */
+    animated() {
+        this.options.animated = true;
+        return this;
+    }
+    /**
+     * Resizes the canvas to the specified dimensions.
+     * @param ratio {number} - The ratio to resize the canvas.
+     * @returns {this} The current instance for chaining.
+     */
+    resize(ratio) {
+        if (this.options.width <= 0 || this.options.height <= 0) {
+            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);
+        if (this.options.exportType === types_1.Export.SVG) {
+            this.canvas = new canvas_1.Canvas(this.options.width, this.options.height, this.options.flag || canvas_1.SvgExportFlag.RelativePathEncoding);
+        }
+        else {
+            this.canvas = new canvas_1.Canvas(this.options.width, this.options.height);
         }
+        this.ctx = this.canvas.getContext('2d');
+        const layers = (0, utils_1.resizeLayers)(this.manager.layers.toArray(), ratio);
+        this.manager.layers.fromArray(layers);
         return this;
     }
     /**
-     * Create a new canvas. This method should be called before any other methods.
-     * @param width {number} - The `width` of the canvas
-     * @param height {number} - The `height` of the canvas
+     * Creates a new canvas with the specified dimensions.
+     * @param width {number} - The width of the canvas.
+     * @param height {number} - The height of the canvas.
+     * @returns {this} The current instance for chaining.
      */
     create(width, height) {
-        this.width = width;
-        this.height = height;
-        this.canvas = new canvas_1.Canvas(width, height);
+        this.options.width = width;
+        this.options.height = height;
+        if (this.options.exportType === types_1.Export.SVG) {
+            this.canvas = new canvas_1.Canvas(width, height, this.options.flag || canvas_1.SvgExportFlag.RelativePathEncoding);
+        }
+        else {
+            this.canvas = new canvas_1.Canvas(width, height);
+        }
         this.ctx = this.canvas.getContext('2d');
-        this.layers = new LayersManager_1.LayersManager();
+        this.manager.layers = new LayersManager_1.LayersManager();
         return this;
     }
 }

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

@@ -1,86 +1,236 @@
-import { ScaleType, IBaseLayer, IBaseLayerProps, AnyCentring, AnyGlobalCompositeOperation } from "../../types";
-import { LayerType } from "../../types/enum";
+import { ScaleType, AnyCentring, AnyGlobalCompositeOperation, ColorType, Transform, AnyFilter, LayerType } from "../../types";
+/**
+ * Interface representing the base structure of a layer.
+ */
+export interface IBaseLayer {
+    /**
+     * The unique identifier of the layer.
+     */
+    id: string;
+    /**
+     * The type of the layer.
+     */
+    type: LayerType;
+    /**
+     * The z-index of the layer, determining its stacking order.
+     */
+    zIndex: number;
+    /**
+     * Whether the layer is visible.
+     */
+    visible: boolean;
+    /**
+     * The properties of the layer.
+     */
+    props: IBaseLayerProps;
+}
+/**
+ * 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;
+    /**
+     * The centring type of the layer.
+     */
+    centring: AnyCentring;
+    /**
+     * The filter effects applied to the layer.
+     */
+    filter: string;
+    /**
+     * The opacity of the layer, ranging from 0 to 1.
+     */
+    opacity: number;
+    /**
+     * Whether the layer is filled.
+     */
+    filled: boolean;
+    /**
+     * The fill style (color or pattern) of the layer.
+     */
+    fillStyle: ColorType;
+    /**
+     * The shadow properties of the layer.
+     */
+    shadow: {
+        /**
+         * The color of the shadow.
+         */
+        color: string;
+        /**
+         * The blur radius of the shadow.
+         */
+        blur: number;
+        /**
+         * The horizontal offset of the shadow.
+         */
+        offsetX: number;
+        /**
+         * The vertical offset of the shadow.
+         */
+        offsetY: number;
+    };
+    /**
+     * The transformation properties of the layer.
+     */
+    transform: Transform;
+    /**
+     * The global composite operation applied to the layer.
+     */
+    globalComposite: AnyGlobalCompositeOperation;
+}
+/**
+ * Interface representing miscellaneous options for a base layer.
+ */
+export interface IBaseLayerMisc {
+    /**
+     * The unique identifier of the layer (optional).
+     */
+    id?: string;
+    /**
+     * The z-index of the layer (optional).
+     */
+    zIndex?: number;
+    /**
+     * Whether the layer is visible (optional).
+     */
+    visible?: boolean;
+}
+/**
+ * Represents a base layer with generic properties and methods for managing
+ * its position, visibility, transformations, and other attributes.
+ *
+ * @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}
+     */
     id: string;
+    /**
+     * The type of the layer.
+     * @type {LayerType}
+     */
     type: LayerType;
+    /**
+     * The z-index of the layer, determining its stacking order.
+     * @type {number}
+     */
     zIndex: number;
+    /**
+     * The visibility of the layer.
+     * @type {boolean}
+     */
     visible: boolean;
+    /**
+     * The properties of the layer, defined by the generic type `T`.
+     * @type {T}
+     */
     props: T;
-    constructor(type?: LayerType, props?: T);
     /**
-     * @description Position of the layer in the 2D plane. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param x {ScaleType} - The `x` position of the layer
-     * @param y {ScaleType} - The `y` position of the layer
+     * 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?: LayerType, props?: T, misc?: IBaseLayerMisc);
+    /**
+     * Sets the position of the layer in the 2D plane.
+     * @param {ScaleType} x - The x-coordinate of the layer.
+     * @param {ScaleType} y - The y-coordinate of the layer.
+     * @returns {this} The current instance for chaining.
      */
     setPosition(x: ScaleType, y: ScaleType): this;
     /**
-     * @description Opacity of the layer. The value must be between `0` and `1`.
-     * @param opacity {number} - The `opacity` of the layer
+     * Sets the opacity of the layer.
+     * @param {number} opacity - The opacity value, between 0 and 1.
+     * @returns {this} The current instance for chaining.
      */
     setOpacity(opacity: number): this;
     /**
-     * @description Sets the `id` of the layer.
-     * @param id {string} - The `id` of the layer
+     * Sets the unique identifier of the layer.
+     *
+     * @param {string} id - The unique identifier.
+     * @returns {this} The current instance for chaining.
      */
     setID(id: string): this;
     /**
-     * @description Sets shadow of layer.
-     * @param color {string} - The `color` of the filter
-     * @param blur {number} - The `blur` of the filter
-     * @param offsetX {number} - The `offsetX` of the filter
-     * @param offsetY {number} - The `offsetY` of the filter
+     * Sets the shadow properties of the layer.
+     * @param {string} color - The color of the shadow.
+     * @param {number} [blur] - The blur radius of the shadow.
+     * @param {number} [offsetX] - The horizontal offset of the shadow.
+     * @param {number} [offsetY] - The vertical offset of the shadow.
+     * @returns {this} The current instance for chaining.
+     * @throws {LazyError} If the color is invalid or not provided.
      */
     setShadow(color: string, blur?: number, offsetX?: number, offsetY?: number): this;
     /**
-     * @description Matrix of the layer in the 2D plane.
-     * @param matrix {DOMMatrix2DInit} - The `matrix` of the layer
+     * Sets the transformation matrix of the layer.
+     * @param {DOMMatrix2DInit} matrix - The transformation matrix.
+     * @returns {this} The current instance for chaining.
      */
     setMatrix(matrix: DOMMatrix2DInit): this;
     /**
-     * @description Scale of the layer in the x and y direction by the given amount from their current position.
-     * @param x {number} - The `x` scale of the layer
-     * @param y {number} - The `y` scale of the layer
+     * Sets the scale of the layer in the x and y directions.
+     * @param {number} x - The scale factor in the x direction.
+     * @param {number} y - The scale factor in the y direction.
+     * @returns {this} The current instance for chaining.
      */
     setScale(x: number, y: number): this;
     /**
-     * @description Rotate of the layer in the clockwise direction by the given amount from its current position.
-     * @param rotate {number} - The `rotate` of the layer
+     * Sets the rotation of the layer.
+     * @param {number} rotate - The rotation angle in degrees.
+     * @returns {this} The current instance for chaining.
      */
     setRotate(rotate: number): this;
     /**
-     * @description Translate of the layer in the x and y direction by the given amount from their current position.
-     * @param x {number} - The `x` translation of the layer
-     * @param y {number} - The `y` translation of the layer
+     * Sets the translation of the layer in the x and y directions.
+     * @param {number} x - The translation in the x direction.
+     * @param {number} y - The translation in the y direction.
+     * @returns {this} The current instance for chaining.
      */
     setTranslate(x: number, y: number): this;
     /**
-     * @description The **`CanvasRenderingContext2D`**. filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling.
-     * It is similar to the CSS [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) property and accepts the same values.
-     * @param filter {string} - The `filter` of the layer. Multiple filters are supported.
+     * Sets the filter effects for the layer.
+     * @param {...AnyFilter} filter - The filter effects to apply.
+     * @returns {this} The current instance for chaining.
      */
-    setFilters(...filter: string[]): this;
+    setFilters(...filter: AnyFilter[]): this;
     /**
-     * @description Sets type of centring of the layer.
-     * @param centring {AnyCentring} - The `centring` of the layer
+     * Sets the centring type of the layer. **Don't affect on Bezier, Line, Quadratic and Text layers**.
+     * @param {AnyCentring} centring - The centring type.
+     * @returns {this} The current instance for chaining.
      */
     setCentring(centring: AnyCentring): this;
     /**
-     * @description Sets the visibility of the layer.
-     * @param visible {boolean} - The `visibility` of the layer
+     * Sets the visibility of the layer.
+     * @param {boolean} visible - The visibility state.
+     * @returns {this} The current instance for chaining.
      */
     setVisible(visible: boolean): this;
     /**
-     * @description Sets zIndex of the layer.
-     * @param zIndex {number} - The `zIndex` of the layer
+     * Sets the z-index of the layer.
+     * @param {number} zIndex - The z-index value.
+     * @returns {this} The current instance for chaining.
      */
     setZIndex(zIndex: number): this;
     /**
-     * @description Sets global composite operation of the layer.
-     * @param operation {AnyGlobalCompositeOperation} - The `operation` of the layer
+     * Sets the global composite operation for the layer.
+     * @param {AnyGlobalCompositeOperation} operation - The composite operation.
+     * @returns {this} The current instance for chaining.
      */
     setGlobalCompositeOperation(operation: AnyGlobalCompositeOperation): this;
     /**
-     * @returns {IBaseLayer}
+     * Converts the layer to a JSON representation.
+     * @returns {IBaseLayer} The JSON representation of the layer.
      */
     toJSON(): IBaseLayer;
 }