@nmmty/lazycanvas 0.4.0 → 0.5.0

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())
         };
     }
 }

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

@@ -1,25 +1,98 @@
-import { BaseLayer } from "./BaseLayer";
-import { IImageLayer, IImageLayerProps, ScaleType } from "../../types";
-import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+/// <reference types="node" />
+/// <reference types="node" />
+import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
+import { ScaleType, LayerType } from "../../types";
+import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers/LayersManager";
+/**
+ * Interface representing an Image Layer.
+ */
+export interface IImageLayer extends IBaseLayer {
+    /**
+     * The type of the layer, which is `Image`.
+     */
+    type: LayerType.Image;
+    /**
+     * The properties specific to the Image Layer.
+     */
+    props: IImageLayerProps;
+}
+/**
+ * Interface representing the properties of an Image Layer.
+ */
+export interface IImageLayerProps extends IBaseLayerProps {
+    /**
+     * The source of the image, which can be a URL or a Buffer.
+     */
+    src: string | Buffer;
+    /**
+     * Whether the image should be resized.
+     */
+    resize: boolean;
+    /**
+     * The size of the image, including width, height, and radius.
+     */
+    size: {
+        /**
+         * The width of the image.
+         */
+        width: ScaleType;
+        /**
+         * The height of the image.
+         */
+        height: ScaleType;
+        /**
+         * The radius of the image.
+         */
+        radius: ScaleType;
+    };
+}
+/**
+ * Class representing an Image Layer, extending the BaseLayer class.
+ */
 export declare class ImageLayer extends BaseLayer<IImageLayerProps> {
+    /**
+     * The properties of the Image Layer.
+     */
     props: IImageLayerProps;
-    constructor(props?: IImageLayerProps);
     /**
-     * @description Sets the source of the image, it can be like link to website or path to file.
-     * @param src {string} - The `src` of the image.
+     * Constructs a new ImageLayer instance.
+     * @param props {IImageLayerProps} - The properties of the Image Layer.
+     * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
+     */
+    constructor(props?: IImageLayerProps, misc?: IBaseLayerMisc);
+    /**
+     * Sets the source of the image.
+     * @param src {string} - The source of the image, which can be a URL or file path.
+     * @returns {this} The current instance for chaining.
+     * @throws {LazyError} If the source is not a valid URL.
      */
     setSrc(src: string): this;
     /**
-     * @description Set the size of the image. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param width {ScaleType} - The `width` of the image.
-     * @param height {ScaleType} - The `height` of the image.
-     * @param radius {ScaleType} - The `radius` of the image. (optional)
+     * Sets the size of the image.
+     * @param width {ScaleType} - The width of the image.
+     * @param height {ScaleType} - The height of the image.
+     * @param radius {ScaleType} - The radius of the image (optional).
+     * @returns {this} The current instance for chaining.
      */
     setSize(width: ScaleType, height: ScaleType, radius?: ScaleType): this;
-    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
-     * @returns {IImageLayer}
+     * Disables resizing for the image.
+     * @returns {this} The current instance for chaining.
+     */
+    dontResize(): this;
+    /**
+     * Draws the Image 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.
+     * @throws {LazyError} If the image could not be loaded.
+     */
+    draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
+    /**
+     * Converts the Image Layer to a JSON representation.
+     * @returns {IImageLayer} The JSON representation of the Image Layer.
      */
     toJSON(): IImageLayer;
 }

package/dist/structures/components/ImageLayer.js

@@ -1,45 +1,35 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageLayer = void 0;
 const BaseLayer_1 = require("./BaseLayer");
-const enum_1 = require("../../types/enum");
+const types_1 = require("../../types");
 const canvas_1 = require("@napi-rs/canvas");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
-const jimp = __importStar(require("jimp"));
+/**
+ * Class representing an Image Layer, extending the BaseLayer class.
+ */
 class ImageLayer extends BaseLayer_1.BaseLayer {
+    /**
+     * The properties of the Image Layer.
+     */
     props;
-    constructor(props) {
-        super(enum_1.LayerType.Image, props || {});
+    /**
+     * Constructs a new ImageLayer instance.
+     * @param props {IImageLayerProps} - The properties of the Image Layer.
+     * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
+     */
+    constructor(props, misc) {
+        super(types_1.LayerType.Image, props || {}, misc);
         this.props = props ? props : {};
-        this.props.centring = enum_1.Centring.Center;
+        this.props.centring = types_1.Centring.Center;
+        this.props.resize = true;
     }
     /**
-     * @description Sets the source of the image, it can be like link to website or path to file.
-     * @param src {string} - The `src` of the image.
+     * Sets the source of the image.
+     * @param src {string} - The source of the image, which can be a URL or file path.
+     * @returns {this} The current instance for chaining.
+     * @throws {LazyError} If the source is not a valid URL.
      */
     setSrc(src) {
         if (!(0, utils_1.isImageUrlValid)(src))
@@ -48,10 +38,11 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
         return this;
     }
     /**
-     * @description Set the size of the image. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param width {ScaleType} - The `width` of the image.
-     * @param height {ScaleType} - The `height` of the image.
-     * @param radius {ScaleType} - The `radius` of the image. (optional)
+     * Sets the size of the image.
+     * @param width {ScaleType} - The width of the image.
+     * @param height {ScaleType} - The height of the image.
+     * @param radius {ScaleType} - The radius of the image (optional).
+     * @returns {this} The current instance for chaining.
      */
     setSize(width, height, radius) {
         this.props.size = {
@@ -61,6 +52,22 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
         };
         return this;
     }
+    /**
+     * Disables resizing for the image.
+     * @returns {this} The current instance for chaining.
+     */
+    dontResize() {
+        this.props.resize = false;
+        return this;
+    }
+    /**
+     * Draws the Image 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.
+     * @throws {LazyError} If the image could not be loaded.
+     */
     async draw(ctx, canvas, manager, debug) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { xs, ys, w } = parcer.parseBatch({
@@ -78,9 +85,9 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
         (0, utils_1.drawShadow)(ctx, this.props.shadow);
         (0, utils_1.opacity)(ctx, this.props.opacity);
         (0, utils_1.filters)(ctx, this.props.filter);
-        let jmp = await jimp.read(this.props.src);
-        jmp.resize(w, h);
-        let image = await (0, canvas_1.loadImage)(await jmp.getBufferAsync('image/png'));
+        let image = await (0, canvas_1.loadImage)(this.props.src);
+        image.width = w;
+        image.height = h;
         if (!image)
             throw new LazyUtil_1.LazyError('The image could not be loaded');
         if (r) {
@@ -100,11 +107,17 @@ class ImageLayer extends BaseLayer_1.BaseLayer {
         ctx.restore();
     }
     /**
-     * @returns {IImageLayer}
+     * Converts the Image Layer to a JSON representation.
+     * @returns {IImageLayer} The JSON representation of the Image Layer.
      */
     toJSON() {
         let data = super.toJSON();
-        data.props = this.props;
+        let copy = { ...this.props };
+        for (const key of ['x', 'y', 'size.width', 'size.height', 'size.radius']) {
+            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+                copy[key] = copy[key].toJSON();
+            }
+        }
         return { ...data };
     }
 }

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

@@ -1,32 +1,114 @@
-import { BaseLayer } from "./BaseLayer";
-import { ColorType, ILineLayer, ILineLayerProps, ScaleType } from "../../types/";
-import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
+import { ColorType, ScaleType, LayerType } from "../../types";
+import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers/LayersManager";
+/**
+ * Interface representing a Line Layer.
+ */
+export interface ILineLayer extends IBaseLayer {
+    /**
+     * The type of the layer, which is `Line`.
+     */
+    type: LayerType.Line;
+    /**
+     * The properties specific to the Line Layer.
+     */
+    props: ILineLayerProps;
+}
+/**
+ * Interface representing the properties of a Line Layer.
+ */
+export interface ILineLayerProps extends IBaseLayerProps {
+    /**
+     * The end point of the line, including x and y coordinates.
+     */
+    endPoint: {
+        /**
+         * The x-coordinate of the end point.
+         */
+        x: ScaleType;
+        /**
+         * The y-coordinate of the end point.
+         */
+        y: ScaleType;
+    };
+    /**
+     * The stroke properties of the line.
+     */
+    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;
+    };
+}
+/**
+ * Class representing a Line Layer, extending the BaseLayer class.
+ */
 export declare class LineLayer extends BaseLayer<ILineLayerProps> {
+    /**
+     * The properties of the Line Layer.
+     */
     props: ILineLayerProps;
-    constructor(props?: ILineLayerProps);
     /**
-     * @description Sets the end point of the line layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param x {ScaleType} - The end `x` of the line layer.
-     * @param y {ScaleType} - The end `y` of the line layer.
+     * Constructs a new LineLayer instance.
+     * @param props {ILineLayerProps} - The properties of the Line Layer.
+     * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
+     */
+    constructor(props?: ILineLayerProps, misc?: IBaseLayerMisc);
+    /**
+     * Sets the end position of the line layer.
+     * @param x {ScaleType} - The x-coordinate of the end point.
+     * @param y {ScaleType} - The y-coordinate of the end point.
+     * @returns {this} The current instance for chaining.
      */
     setEndPosition(x: ScaleType, y: ScaleType): this;
     /**
-     * @description Sets the color of the layer. You can use `hex`, `rgb`, `rgba`, `hsl`, `hsla`, and `Gradient`color.
-     * @param color {string} - The `color` of the layer.
+     * Sets the color of the line layer.
+     * @param color {ColorType} - The color of the line.
+     * @returns {this} The current instance for chaining.
+     * @throws {LazyError} If the color is not provided or invalid.
      */
     setColor(color: ColorType): this;
     /**
-     * @description Sets the stroke of the layer.
-     * @param width {number} - The `width` of the stroke.
-     * @param cap {string} - The `cap` of the stroke.
-     * @param join {string} - The `join` of the stroke.
-     * @param dash {number[]} - The `dash` of the stroke.
-     * @param dashOffset {number} - The `dashOffset` of the stroke.
-     * @param miterLimit {number} - The `miterLimit` of the stroke.
+     * Sets the stroke properties of the line layer.
+     * @param width {number} - The width of the stroke.
+     * @param cap {CanvasLineCap} - The cap style of the stroke.
+     * @param join {CanvasLineJoin} - The join style of the stroke.
+     * @param dash {number[]} - The dash pattern of the stroke.
+     * @param dashOffset {number} - The dash offset of the stroke.
+     * @param miterLimit {number} - The miter limit of the stroke.
+     * @returns {this} The current instance for chaining.
      */
     setStroke(width: number, cap?: CanvasLineCap, join?: CanvasLineJoin, dash?: number[], dashOffset?: number, miterLimit?: number): this;
-    getBoundingBox(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager): {
+    /**
+     * Calculates the bounding box of the line layer.
+     * @param ctx {SKRSContext2D} - The canvas rendering context.
+     * @param canvas {Canvas | SvgCanvas} - The canvas instance.
+     * @param manager {LayersManager} - The layers manager.
+     * @returns {Object} The bounding box details including start and end points, width, and height.
+     */
+    getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
         xs: number;
         ys: number;
         xe: number;
@@ -34,6 +116,17 @@ export declare class LineLayer extends BaseLayer<ILineLayerProps> {
         width: number;
         height: number;
     };
-    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
+    /**
+     * Draws the line 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 Line Layer to a JSON representation.
+     * @returns {ILineLayer} The JSON representation of the Line Layer.
+     */
     toJSON(): ILineLayer;
 }