@nmmty/lazycanvas 0.4.0 → 0.5.1

package/dist/structures/components/BaseLayer.js

@@ -1,20 +1,52 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseLayer = 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");
+/**
+ * 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.
+ */
 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;
-    constructor(type, props) {
-        this.id = (0, utils_1.generateID)(type ? type : enum_1.LayerType.Base);
-        this.type = type ? type : enum_1.LayerType.Base;
-        this.zIndex = 1;
-        this.visible = true;
+    /**
+     * 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, props, misc) {
+        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.props = props ? props : {};
         if (!this.props.x)
             this.props.x = 0;
@@ -23,14 +55,15 @@ class BaseLayer {
         if (!this.props.opacity)
             this.props.opacity = 1;
         if (!this.props.centring)
-            this.props.centring = enum_1.Centring.Center;
+            this.props.centring = types_1.Centring.Center;
         if (!this.props.transform)
             this.props.transform = {};
     }
     /**
-     * @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 {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, y) {
         this.props.x = x;
@@ -38,36 +71,40 @@ class BaseLayer {
         return 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) {
         this.props.opacity = opacity;
         return 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) {
         this.id = id;
         return 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, blur, offsetX, offsetY) {
         if (!color)
             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');
-        let parse = (0, utils_1.parseColor)(color);
         this.props.shadow = {
-            color: parse,
+            color: color,
             blur: blur || 0,
             offsetX: offsetX || 0,
             offsetY: offsetY || 0,
@@ -75,82 +112,91 @@ class BaseLayer {
         return 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) {
         this.props.transform = { ...this.props.transform, matrix };
         return 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, y) {
         this.props.transform = { ...this.props.transform, scale: { x, y } };
         return 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) {
         this.props.transform = { ...this.props.transform, rotate };
         return 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, y) {
         this.props.transform = { ...this.props.transform, translate: { x, y } };
         return 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) {
         this.props.filter = filter.join(' ');
         return 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) {
         this.props.centring = centring;
         return 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) {
         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 {number} zIndex - The z-index value.
+     * @returns {this} The current instance for chaining.
      */
     setZIndex(zIndex) {
         this.zIndex = zIndex;
         return 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) {
         this.props.globalComposite = operation;
         return this;
     }
     /**
-     * @returns {IBaseLayer}
+     * Converts the layer to a JSON representation.
+     * @returns {IBaseLayer} The JSON representation of the layer.
      */
     toJSON() {
         return {

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

@@ -1,58 +1,136 @@
-import { BaseLayer } from "./BaseLayer";
-import { ColorType, IBezierLayer, IBezierLayerProps, ScaleType } from "../../types";
-import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
+import { ColorType, Point, ScaleType, LayerType } from "../../types";
+import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers/LayersManager";
+/**
+ * Interface representing a Bezier layer.
+ */
+export interface IBezierLayer extends IBaseLayer {
+    /**
+     * The type of the layer, which is a Bézier curve.
+     */
+    type: LayerType.BezierCurve;
+    /**
+     * The properties specific to the Bezier layer.
+     */
+    props: IBezierLayerProps;
+}
+/**
+ * Interface representing the properties of a Bezier layer.
+ */
+export interface IBezierLayerProps extends IBaseLayerProps {
+    /**
+     * The control points of the Bézier curve.
+     */
+    controlPoints: Array<Point>;
+    /**
+     * The end point of the Bézier curve.
+     */
+    endPoint: Point;
+    /**
+     * 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;
+    };
+}
+/**
+ * Class representing a Bezier layer, extending the BaseLayer class.
+ */
 export declare class BezierLayer extends BaseLayer<IBezierLayerProps> {
+    /**
+     * The properties of the Bezier layer.
+     */
     props: IBezierLayerProps;
-    constructor(props?: IBezierLayerProps);
     /**
-     * @description Sets the control points of the bezier layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param controlPoints {Array<{ x: ScaleType, y: ScaleType }>} - The `controlPoints` of the bezier layer.
+     * Constructs a new BezierLayer instance.
+     * @param props {IBezierLayerProps} - The properties of the Bezier layer.
+     * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
+     */
+    constructor(props?: IBezierLayerProps, misc?: IBaseLayerMisc);
+    /**
+     * Sets the control points of the Bezier layer.
+     * @param controlPoints {Array<{ x: ScaleType, y: ScaleType }>} - The control points of the Bezier layer.
+     * @returns {this} The current instance for chaining.
+     * @throws {LazyError} If the number of control points is not exactly 2.
      */
     setControlPoints(...controlPoints: {
         x: ScaleType;
         y: ScaleType;
     }[]): this;
     /**
-     * @description Sets the end point of the bezier layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param x {ScaleType} - The end `x` of the bezier layer.
-     * @param y {ScaleType} - The end `y` of the bezier layer.
+     * Sets the end position of the Bezier 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 Bezier layer.
+     * @param color {ColorType} - The color of the layer.
+     * @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 Bezier layer.
+     * @param width {number} - The width of the stroke.
+     * @param cap {string} - The cap style of the stroke.
+     * @param join {string} - 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): {
-        max: {
-            x: number;
-            y: number;
-        };
-        min: {
-            x: number;
-            y: number;
-        };
-        center: {
-            x: number;
-            y: number;
-        };
+    /**
+     * Calculates the bounding box of the Bezier 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 max, min, center, width, and height.
+     */
+    getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
+        max: Point;
+        min: Point;
+        center: Point;
         width: number;
         height: number;
     };
-    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
-     * @returns {IBezierLayer}
+     * Draws the Bezier 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 Bezier layer to a JSON representation.
+     * @returns {IBezierLayer} The JSON representation of the Bezier layer.
      */
     toJSON(): IBezierLayer;
 }

package/dist/structures/components/BezierLayer.js

@@ -2,23 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BezierLayer = void 0;
 const BaseLayer_1 = require("./BaseLayer");
-const enum_1 = require("../../types/enum");
+const types_1 = require("../../types");
 const utils_1 = require("../../utils/utils");
 const LazyUtil_1 = require("../../utils/LazyUtil");
-const Gradient_1 = require("../helpers/Gradient");
-const Pattern_1 = require("../helpers/Pattern");
+/**
+ * Class representing a Bezier layer, extending the BaseLayer class.
+ */
 class BezierLayer extends BaseLayer_1.BaseLayer {
+    /**
+     * The properties of the Bezier layer.
+     */
     props;
-    constructor(props) {
-        super(enum_1.LayerType.BezierCurve, props || {});
+    /**
+     * Constructs a new BezierLayer instance.
+     * @param props {IBezierLayerProps} - The properties of the Bezier layer.
+     * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
+     */
+    constructor(props, misc) {
+        super(types_1.LayerType.BezierCurve, props || {}, misc);
         this.props = props ? props : {};
         if (!this.props.fillStyle)
             this.props.fillStyle = '#000000';
-        this.props.centring = enum_1.Centring.None;
+        this.props.centring = types_1.Centring.None;
     }
     /**
-     * @description Sets the control points of the bezier layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param controlPoints {Array<{ x: ScaleType, y: ScaleType }>} - The `controlPoints` of the bezier layer.
+     * Sets the control points of the Bezier layer.
+     * @param controlPoints {Array<{ x: ScaleType, y: ScaleType }>} - The control points of the Bezier layer.
+     * @returns {this} The current instance for chaining.
+     * @throws {LazyError} If the number of control points is not exactly 2.
      */
     setControlPoints(...controlPoints) {
         if (controlPoints.length !== 2)
@@ -27,42 +38,38 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
         return this;
     }
     /**
-     * @description Sets the end point of the bezier layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param x {ScaleType} - The end `x` of the bezier layer.
-     * @param y {ScaleType} - The end `y` of the bezier layer.
+     * Sets the end position of the Bezier 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, y) {
         this.props.endPoint = { x, y };
         return 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 Bezier layer.
+     * @param color {ColorType} - The color of the layer.
+     * @returns {this} The current instance for chaining.
+     * @throws {LazyError} If the color is not provided or invalid.
      */
     setColor(color) {
         if (!color)
             throw new LazyUtil_1.LazyError('The color of the layer must be provided');
         if (!(0, utils_1.isColor)(color))
             throw new LazyUtil_1.LazyError('The color of the layer must be a valid color');
-        let fill = (0, utils_1.parseColor)(color);
-        if (fill instanceof Gradient_1.Gradient || fill instanceof Pattern_1.Pattern) {
-            this.props.fillStyle = fill;
-        }
-        else {
-            let arr = fill.split(':');
-            this.props.fillStyle = arr[0];
-            this.props.opacity = parseFloat(arr[1]) || 1;
-        }
+        this.props.fillStyle = color;
         return 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 Bezier layer.
+     * @param width {number} - The width of the stroke.
+     * @param cap {string} - The cap style of the stroke.
+     * @param join {string} - 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, cap, join, dash, dashOffset, miterLimit) {
         this.props.stroke = {
@@ -75,6 +82,13 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
         };
         return this;
     }
+    /**
+     * Calculates the bounding box of the Bezier 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 max, min, center, width, and height.
+     */
     getBoundingBox(ctx, canvas, manager) {
         const parcer = (0, utils_1.parser)(ctx, canvas, manager);
         const { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye } = parcer.parseBatch({
@@ -90,6 +104,13 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
         const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cp1x, y: cp1y }, { x: cp2x, y: cp2y }, { x: xe, y: ye }]);
         return { max, min, center, width, height };
     }
+    /**
+     * Draws the Bezier 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 { xs, ys, cp1x, cp1y, cp2x, cp2y, xe, ye } = parcer.parseBatch({
@@ -126,12 +147,31 @@ class BezierLayer extends BaseLayer_1.BaseLayer {
         ctx.restore();
     }
     /**
-     * @returns {IBezierLayer}
+     * Converts the Bezier layer to a JSON representation.
+     * @returns {IBezierLayer} The JSON representation of the Bezier layer.
      */
     toJSON() {
         let data = super.toJSON();
-        data.props = this.props;
-        return { ...data };
+        let copy = { ...this.props };
+        for (const key of ['x', 'y', 'endPoint.x', 'endPoint.y', 'fillStyle']) {
+            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+                copy[key] = copy[key].toJSON();
+            }
+        }
+        if (copy.controlPoints) {
+            copy.controlPoints = copy.controlPoints.map((point) => {
+                if (point.x && typeof point.x === 'object' && 'toJSON' in point.x) {
+                    // @ts-ignore
+                    point.x = point.x.toJSON();
+                }
+                if (point.y && typeof point.y === 'object' && 'toJSON' in point.y) {
+                    // @ts-ignore
+                    point.y = point.y.toJSON();
+                }
+                return point;
+            });
+        }
+        return { ...data, props: copy };
     }
 }
 exports.BezierLayer = BezierLayer;