@nmmty/lazycanvas 0.4.0 → 0.5.1

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

@@ -1,39 +1,142 @@
-import { IClearLayer, IClearLayerProps, ScaleType } from "../../types";
-import { LayerType } from "../../types/enum";
-import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { ScaleType, LayerType, AnyCentring } from "../../types";
+import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers/LayersManager";
+import { IBaseLayerMisc } from "./BaseLayer";
+/**
+ * Interface representing a Clear Layer.
+ */
+export interface IClearLayer {
+    /**
+     * The unique identifier of the layer.
+     */
+    id: string;
+    /**
+     * The type of the layer, which is `Clear`.
+     */
+    type: LayerType.Clear;
+    /**
+     * The z-index of the layer, determining its stacking order.
+     */
+    zIndex: number;
+    /**
+     * The visibility of the layer.
+     */
+    visible: boolean;
+    /**
+     * The properties of the Clear Layer.
+     */
+    props: IClearLayerProps;
+}
+/**
+ * Interface representing the properties of a Clear Layer.
+ */
+export interface IClearLayerProps {
+    /**
+     * The x-coordinate of the layer.
+     */
+    x: ScaleType;
+    /**
+     * The y-coordinate of the layer.
+     */
+    y: ScaleType;
+    /**
+     * The size of the layer, including width and height.
+     */
+    size: {
+        /**
+         * The width of the layer.
+         */
+        width: ScaleType;
+        /**
+         * The height of the layer.
+         */
+        height: ScaleType;
+    };
+    /**
+     * The centring type of the layer.
+     */
+    centring: AnyCentring;
+}
+/**
+ * Class representing a Clear Layer.
+ */
 export declare class ClearLayer implements IClearLayer {
+    /**
+     * The unique identifier of the layer.
+     */
     id: string;
-    type: LayerType;
+    /**
+     * The type of the layer, which is `Clear`.
+     */
+    type: LayerType.Clear;
+    /**
+     * The z-index of the layer, determining its stacking order.
+     */
     zIndex: number;
+    /**
+     * The visibility of the layer.
+     */
     visible: boolean;
+    /**
+     * The properties of the Clear Layer.
+     */
     props: IClearLayerProps;
-    constructor(props?: IClearLayerProps);
     /**
-     * @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 ClearLayer instance.
+     * @param props {IClearLayerProps} - The properties of the Clear Layer.
+     * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
+     */
+    constructor(props?: IClearLayerProps, misc?: IBaseLayerMisc);
+    /**
+     * Sets the position of the layer in the 2D plane.
+     * @param x {ScaleType} - The x-coordinate of the layer.
+     * @param y {ScaleType} - The y-coordinate of the layer.
+     * @returns {this} The current instance for chaining.
      */
     setPosition(x: ScaleType, y: ScaleType): this;
     /**
-     * @description Sets the size of the layer.
-     * @param width {ScaleType} - The `width` of the layer
-     * @param height {ScaleType} - The `height` of the
+     * Sets the size of the layer.
+     * @param width {ScaleType} - The width of the layer.
+     * @param height {ScaleType} - The height of the layer.
+     * @returns {this} The current instance for chaining.
      */
     setSize(width: ScaleType, height: ScaleType): this;
     /**
-     * @description Sets the visibility of the layer.
-     * @param visible {boolean} - The `visibility` 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;
+    /**
+     * Sets the centring type of the layer.
+     * @param centring {AnyCentring} - The centring type of the layer.
+     * @returns {this} The current instance for chaining.
+     */
+    setCentring(centring: AnyCentring): this;
+    /**
+     * Sets the visibility of the layer.
+     * @param visible {boolean} - The visibility state of the layer.
+     * @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 zIndex {number} - The z-index value of the layer.
+     * @returns {this} The current instance for chaining.
      */
     setZIndex(zIndex: number): this;
-    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
-     * @returns {IClearLayer}
+     * Draws the Clear Layer on the canvas.
+     * @param ctx {SKRSContext2D} - The canvas rendering context.
+     * @param canvas {Canvas | SvgCanvas} - The canvas instance.
+     * @param manager {LayersManager} - The layers manager.
+     * @param debug {boolean} - Whether to enable debug logging.
+     */
+    draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
+    /**
+     * Converts the Clear Layer to a JSON representation.
+     * @returns {IClearLayer} The JSON representation of the Clear Layer.
      */
     toJSON(): IClearLayer;
 }

package/dist/structures/components/ClearLayer.js

@@ -1,21 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClearLayer = void 0;
-const enum_1 = require("../../types/enum");
+const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
 const utils_2 = require("../../utils/utils");
+/**
+ * Class representing a Clear Layer.
+ */
 class ClearLayer {
+    /**
+     * The unique identifier of the layer.
+     */
     id;
-    type;
+    /**
+     * The type of the layer, which is `Clear`.
+     */
+    type = types_1.LayerType.Clear;
+    /**
+     * The z-index of the layer, determining its stacking order.
+     */
     zIndex;
+    /**
+     * The visibility of the layer.
+     */
     visible;
+    /**
+     * The properties of the Clear Layer.
+     */
     props;
-    constructor(props) {
-        this.id = (0, utils_2.generateID)(enum_1.LayerType.Clear);
-        this.type = enum_1.LayerType.Clear;
-        this.zIndex = 1;
-        this.visible = true;
+    /**
+     * Constructs a new ClearLayer instance.
+     * @param props {IClearLayerProps} - The properties of the Clear Layer.
+     * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
+     */
+    constructor(props, misc) {
+        this.id = misc?.id || (0, utils_2.generateID)(types_1.LayerType.Clear);
+        this.type = types_1.LayerType.Clear;
+        this.zIndex = misc?.zIndex || 1;
+        this.visible = misc?.visible || true;
         this.props = props ? props : {
             x: 0,
             y: 0,
@@ -26,9 +49,10 @@ class ClearLayer {
         };
     }
     /**
-     * @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
+     * Sets the position of the layer in the 2D plane.
+     * @param x {ScaleType} - The x-coordinate of the layer.
+     * @param y {ScaleType} - The y-coordinate of the layer.
+     * @returns {this} The current instance for chaining.
      */
     setPosition(x, y) {
         this.props.x = x;
@@ -36,9 +60,10 @@ class ClearLayer {
         return this;
     }
     /**
-     * @description Sets the size of the layer.
-     * @param width {ScaleType} - The `width` of the layer
-     * @param height {ScaleType} - The `height` of the
+     * Sets the size of the layer.
+     * @param width {ScaleType} - The width of the layer.
+     * @param height {ScaleType} - The height of the layer.
+     * @returns {this} The current instance for chaining.
      */
     setSize(width, height) {
         this.props.size = {
@@ -48,43 +73,79 @@ class ClearLayer {
         return this;
     }
     /**
-     * @description Sets the visibility of the layer.
-     * @param visible {boolean} - The `visibility` 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) {
+        this.id = id;
+        return this;
+    }
+    /**
+     * Sets the centring type of the layer.
+     * @param centring {AnyCentring} - The centring type of the layer.
+     * @returns {this} The current instance for chaining.
+     */
+    setCentring(centring) {
+        this.props.centring = centring;
+        return this;
+    }
+    /**
+     * Sets the visibility of the layer.
+     * @param visible {boolean} - The visibility state of the layer.
+     * @returns {this} The current instance for chaining.
      */
     setVisible(visible) {
         this.visible = visible;
         return this;
     }
     /**
-     * @description Sets zIndex of the layer.
-     * @param zIndex {number} - The `zIndex` of the layer
+     * Sets the z-index of the layer.
+     * @param zIndex {number} - The z-index value of the layer.
+     * @returns {this} The current instance for chaining.
      */
     setZIndex(zIndex) {
         this.zIndex = zIndex;
         return this;
     }
+    /**
+     * Draws the Clear Layer on the canvas.
+     * @param ctx {SKRSContext2D} - The canvas rendering context.
+     * @param canvas {Canvas | SvgCanvas} - The canvas instance.
+     * @param manager {LayersManager} - The layers manager.
+     * @param debug {boolean} - Whether to enable debug logging.
+     */
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
-        const { x, y, w } = parcer.parseBatch({
-            x: { v: this.props.x },
-            y: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
+        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 },
         });
         const h = parcer.parse(this.props.size.height, LazyUtil_1.defaultArg.wh(w), LazyUtil_1.defaultArg.vl(true));
+        let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
         if (debug)
             LazyUtil_1.LazyLog.log('none', `ClearLayer:`, { x, y, w, h });
         ctx.clearRect(x, y, w, h);
     }
     /**
-     * @returns {IClearLayer}
+     * Converts the Clear Layer to a JSON representation.
+     * @returns {IClearLayer} The JSON representation of the Clear Layer.
      */
     toJSON() {
+        let copy = { ...this.props };
+        for (const key of ['x', 'y', 'size.width', 'size.height']) {
+            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+                copy[key] = copy[key].toJSON();
+            }
+        }
         return {
             id: this.id,
             type: this.type,
             zIndex: this.zIndex,
             visible: this.visible,
-            props: this.props,
+            props: copy,
         };
     }
 }

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

@@ -1,51 +1,119 @@
-import { AnyLayer, IGroup } from "../../types";
+import { AnyLayer, LayerType } from "../../types";
+/**
+ * Interface representing a group of layers.
+ */
+export interface IGroup {
+    /**
+     * The unique identifier of the group.
+     */
+    id: string;
+    /**
+     * The type of the group, which is `Group`.
+     */
+    type: LayerType.Group;
+    /**
+     * The visibility of the group.
+     */
+    visible: boolean;
+    /**
+     * The z-index of the group, determining its stacking order.
+     */
+    zIndex: number;
+    /**
+     * The layers contained within the group.
+     */
+    layers: Array<AnyLayer>;
+}
+/**
+ * Class representing a group of layers.
+ */
 export declare class Group implements IGroup {
+    /**
+     * The unique identifier of the group.
+     */
     id: string;
+    /**
+     * The type of the group, which is `Group`.
+     */
+    type: LayerType.Group;
+    /**
+     * The visibility of the group.
+     */
     visible: boolean;
+    /**
+     * The z-index of the group, determining its stacking order.
+     */
     zIndex: number;
-    components: Array<any>;
-    constructor();
     /**
-     * Set the ID of the group
-     * @param id {string} - The `id` of the group
+     * The layers contained within the group.
+     */
+    layers: Array<any>;
+    /**
+     * Constructs a new Group instance.
+     * @param opts {Object} - Optional parameters for the group.
+     * @param opts.id {string} - The unique identifier of the group.
+     * @param opts.visible {boolean} - The visibility of the group.
+     * @param opts.zIndex {number} - The z-index of the group.
+     */
+    constructor(opts?: {
+        id?: string;
+        visible?: boolean;
+        zIndex?: number;
+    });
+    /**
+     * Sets the ID of the group.
+     * @param id {string} - The unique identifier of the group.
+     * @returns {this} The current instance for chaining.
      */
     setID(id: string): this;
     /**
-     * Set the visibility of the group
-     * @param visible {boolean} - The `visibility` of the group
+     * Sets the visibility of the group.
+     * @param visible {boolean} - The visibility state of the group.
+     * @returns {this} The current instance for chaining.
      */
     setVisible(visible: boolean): this;
     /**
-     * Set the zIndex of the group
-     * @param zIndex {number} - The `zIndex` of the group
+     * Sets the z-index of the group.
+     * @param zIndex {number} - The z-index value of the group.
+     * @returns {this} The current instance for chaining.
      */
     setZIndex(zIndex: number): this;
     /**
-     * Add a component to the group
-     * @param components {any[]} - The `components` to add to the group
+     * Adds components to the group.
+     * @param components {AnyLayer[]} - The components to add to the group.
+     * @returns {this} The current instance for chaining.
      */
     add(...components: AnyLayer[]): this;
     /**
-     * Remove a component from the group
-     * @param id {any} - The `id` of the component to remove
+     * Removes a component from the group by its ID.
+     * @param id {string} - The unique identifier of the component to remove.
+     * @returns {this} The current instance for chaining.
      */
     remove(id: string): this;
     /**
-     * ClearLayer all components from the group
+     * Clears all components from the group.
+     * @returns {this} The current instance for chaining.
      */
     clear(): this;
     /**
-     * Get a component from the group
-     * @param id {string} - The `id` of the component to get
+     * Retrieves a component from the group by its ID.
+     * @param id {string} - The unique identifier of the component to retrieve.
+     * @returns {AnyLayer | undefined} The component with the specified ID, or undefined if not found.
      */
-    get(id: string): any;
+    get(id: string): AnyLayer | undefined;
     /**
-     * Get all components from the group
+     * Retrieves all components from the group.
+     * @returns {AnyLayer[]} An array of all components in the group.
      */
-    getAll(): any[];
+    getAll(): AnyLayer[];
     /**
-     * Get the length of the components
+     * Gets the number of components in the group.
+     * @returns {number} The number of components in the group.
      */
     get length(): number;
+    /**
+     * Converts the group to a JSON representation.
+     * @returns {IGroup} The JSON representation of the group.
+     */
     toJSON(): IGroup;
 }

package/dist/structures/components/Group.js

@@ -1,94 +1,134 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group = void 0;
-const enum_1 = require("../../types/enum");
+const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
+/**
+ * Class representing a group of layers.
+ */
 class Group {
+    /**
+     * The unique identifier of the group.
+     */
     id;
+    /**
+     * The type of the group, which is `Group`.
+     */
+    type = types_1.LayerType.Group;
+    /**
+     * The visibility of the group.
+     */
     visible;
+    /**
+     * The z-index of the group, determining its stacking order.
+     */
     zIndex;
-    components;
-    constructor() {
-        this.id = (0, utils_1.generateID)(enum_1.LayerType.Group);
-        this.visible = true;
-        this.zIndex = 1;
-        this.components = [];
+    /**
+     * The layers contained within the group.
+     */
+    layers;
+    /**
+     * Constructs a new Group instance.
+     * @param opts {Object} - Optional parameters for the group.
+     * @param opts.id {string} - The unique identifier of the group.
+     * @param opts.visible {boolean} - The visibility of the group.
+     * @param opts.zIndex {number} - The z-index of the group.
+     */
+    constructor(opts) {
+        this.id = opts?.id || (0, utils_1.generateID)(types_1.LayerType.Group);
+        this.visible = opts?.visible || true;
+        this.zIndex = opts?.zIndex || 1;
+        this.layers = [];
     }
     /**
-     * Set the ID of the group
-     * @param id {string} - The `id` of the group
+     * Sets the ID of the group.
+     * @param id {string} - The unique identifier of the group.
+     * @returns {this} The current instance for chaining.
      */
     setID(id) {
         this.id = id;
         return this;
     }
     /**
-     * Set the visibility of the group
-     * @param visible {boolean} - The `visibility` of the group
+     * Sets the visibility of the group.
+     * @param visible {boolean} - The visibility state of the group.
+     * @returns {this} The current instance for chaining.
      */
     setVisible(visible) {
         this.visible = visible;
         return this;
     }
     /**
-     * Set the zIndex of the group
-     * @param zIndex {number} - The `zIndex` of the group
+     * Sets the z-index of the group.
+     * @param zIndex {number} - The z-index value of the group.
+     * @returns {this} The current instance for chaining.
      */
     setZIndex(zIndex) {
         this.zIndex = zIndex;
         return this;
     }
     /**
-     * Add a component to the group
-     * @param components {any[]} - The `components` to add to the group
+     * Adds components to the group.
+     * @param components {AnyLayer[]} - The components to add to the group.
+     * @returns {this} The current instance for chaining.
      */
     add(...components) {
         let layersArray = components.flat();
         layersArray = layersArray.filter(l => l !== undefined);
         layersArray = layersArray.sort((a, b) => a.zIndex - b.zIndex);
-        this.components.push(...layersArray);
+        this.layers.push(...layersArray);
         return this;
     }
     /**
-     * Remove a component from the group
-     * @param id {any} - The `id` of the component to remove
+     * Removes a component from the group by its ID.
+     * @param id {string} - The unique identifier of the component to remove.
+     * @returns {this} The current instance for chaining.
      */
     remove(id) {
-        this.components = this.components.filter(c => c.id !== id);
+        this.layers = this.layers.filter(c => c.id !== id);
         return this;
     }
     /**
-     * ClearLayer all components from the group
+     * Clears all components from the group.
+     * @returns {this} The current instance for chaining.
      */
     clear() {
-        this.components = [];
+        this.layers = [];
         return this;
     }
     /**
-     * Get a component from the group
-     * @param id {string} - The `id` of the component to get
+     * Retrieves a component from the group by its ID.
+     * @param id {string} - The unique identifier of the component to retrieve.
+     * @returns {AnyLayer | undefined} The component with the specified ID, or undefined if not found.
      */
     get(id) {
-        return this.components.find(c => c.id === id);
+        return this.layers.find(c => c.id === id);
     }
     /**
-     * Get all components from the group
+     * Retrieves all components from the group.
+     * @returns {AnyLayer[]} An array of all components in the group.
      */
     getAll() {
-        return this.components;
+        return this.layers;
     }
     /**
-     * Get the length of the components
+     * Gets the number of components in the group.
+     * @returns {number} The number of components in the group.
      */
     get length() {
-        return this.components.length;
+        return this.layers.length;
     }
+    /**
+     * Converts the group to a JSON representation.
+     * @returns {IGroup} The JSON representation of the group.
+     */
     toJSON() {
         return {
             id: this.id,
+            type: this.type,
             visible: this.visible,
             zIndex: this.zIndex,
-            components: this.components.map(c => c.toJSON())
+            layers: this.layers.map(c => c.toJSON())
         };
     }
 }