@nmmty/lazycanvas 0.6.4 → 1.0.0-dev.10

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

@@ -0,0 +1,95 @@
+import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
+import { ColorType, LayerType, ScaleType, StrokeOptions } from "../../types";
+import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
+import { LayersManager } from "../managers";
+export interface IPolygonLayer extends IBaseLayer {
+    /**
+     * The type of the layer, which is `Polygon`.
+     */
+    type: LayerType.Polygon;
+    /**
+     * The properties specific to the Polygon Layer.
+     */
+    props: IPolygonLayerProps;
+}
+export interface IPolygonLayerProps extends IBaseLayerProps {
+    /**
+     * The size of the Polygon Layer, including width, height, and radius.
+     */
+    size: {
+        /**
+         * The width of the Polygon Layer.
+         */
+        width: ScaleType;
+        /**
+         * The height of the Polygon Layer.
+         */
+        height: ScaleType;
+        /**
+         * The radius of corners in the Polygon Layer.
+         */
+        radius: number;
+        /**
+         * The number of sides of the polygon.
+         */
+        count: number;
+    };
+    /**
+     * The fill style (color or pattern) of the layer.
+     */
+    color: ColorType;
+    /**
+     * The stroke properties of the polygon.
+     */
+    stroke?: StrokeOptions;
+}
+export declare class PolygonLayer extends BaseLayer<IPolygonLayerProps> {
+    props: IPolygonLayerProps;
+    constructor(props?: IPolygonLayerProps, misc?: IBaseLayerMisc);
+    /**
+     * Sets the size of the Polygon layer.
+     * @param {ScaleType} [width] - The width of the Polygon layer.
+     * @param {ScaleType} [height] - The height of the Polygon layer.
+     * @param {number} [count] - The number of sides of the polygon.
+     * @param {number} [radius] - The radius of the Polygon Layer (optional).
+     * @returns {this} The current instance for chaining.
+     */
+    setSize(width: ScaleType, height: ScaleType, count: number, radius?: number): this;
+    /**
+     * Sets the color of the Polygon layer.
+     * @param {ColorType} [color] - 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;
+    /**
+     * Sets the stroke properties of the Polygon Layer.
+     * @param {number} [width] - The width of the stroke.
+     * @param {string} [cap] - The cap style of the stroke.
+     * @param {string} [join] - The join style of the stroke.
+     * @param {number[]} [dash] - The dash pattern of the stroke.
+     * @param {number} [dashOffset] - The dash offset of the stroke.
+     * @param {number} [miterLimit] - 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;
+    /**
+     * Draws the Polygon layer on the given canvas context.
+     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
+     * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
+     * @param {LayersManager} [manager] - The layer's manager.
+     * @param {boolean} [debug] - Whether to enable debug logging.
+     */
+    draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
+    /**
+     * Converts the Polygon layer to a JSON representation.
+     * @returns {IPolygonLayer} The JSON representation of the Polygon layer.
+     */
+    toJSON(): IPolygonLayer;
+    /**
+     * Validates the properties of the Morph Layer.
+     * @param {IPolygonLayerProps} [data] - The properties to validate.
+     * @returns {IPolygonLayerProps} The validated properties.
+     */
+    protected validateProps(data: IPolygonLayerProps): IPolygonLayerProps;
+}

package/dist/structures/components/PolygonLayer.js

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PolygonLayer = void 0;
+const BaseLayer_1 = require("./BaseLayer");
+const types_1 = require("../../types");
+const utils_1 = require("../../utils");
+class PolygonLayer extends BaseLayer_1.BaseLayer {
+    constructor(props, misc) {
+        super(types_1.LayerType.Polygon, props || {}, misc);
+        this.props = props ? props : {};
+        this.props = this.validateProps(this.props);
+    }
+    /**
+     * Sets the size of the Polygon layer.
+     * @param {ScaleType} [width] - The width of the Polygon layer.
+     * @param {ScaleType} [height] - The height of the Polygon layer.
+     * @param {number} [count] - The number of sides of the polygon.
+     * @param {number} [radius] - The radius of the Polygon Layer (optional).
+     * @returns {this} The current instance for chaining.
+     */
+    setSize(width, height, count, radius) {
+        this.props.size = {
+            width: width,
+            height: height,
+            count: count,
+            radius: radius || 0,
+        };
+        return this;
+    }
+    /**
+     * Sets the color of the Polygon layer.
+     * @param {ColorType} [color] - 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 utils_1.LazyError("The color of the layer must be provided");
+        if (!(0, utils_1.isColor)(color))
+            throw new utils_1.LazyError("The color of the layer must be a valid color");
+        this.props.color = color;
+        return this;
+    }
+    /**
+     * Sets the stroke properties of the Polygon Layer.
+     * @param {number} [width] - The width of the stroke.
+     * @param {string} [cap] - The cap style of the stroke.
+     * @param {string} [join] - The join style of the stroke.
+     * @param {number[]} [dash] - The dash pattern of the stroke.
+     * @param {number} [dashOffset] - The dash offset of the stroke.
+     * @param {number} [miterLimit] - The miter limit of the stroke.
+     * @returns {this} The current instance for chaining.
+     */
+    setStroke(width, cap, join, dash, dashOffset, miterLimit) {
+        this.props.stroke = {
+            width,
+            cap: cap || "butt",
+            join: join || "miter",
+            dash: dash || [],
+            dashOffset: dashOffset || 0,
+            miterLimit: miterLimit || 10,
+        };
+        return this;
+    }
+    /**
+     * Draws the Polygon layer on the given canvas context.
+     * @param {SKRSContext2D} [ctx] - The canvas rendering context.
+     * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
+     * @param {LayersManager} [manager] - The layer's manager.
+     * @param {boolean} [debug] - Whether to enable debug logging.
+     */
+    async draw(ctx, canvas, manager, debug) {
+        const parcer = (0, utils_1.parser)(ctx, canvas, manager);
+        const { xs, ys, w } = parcer.parseBatch({
+            xs: { v: this.props.position?.x || 0 },
+            ys: { v: this.props.position?.y || 0, options: utils_1.defaultArg.vl(true) },
+            w: { v: this.props.size.width },
+        });
+        const h = parcer.parse(this.props.size.height, utils_1.defaultArg.wh(w), utils_1.defaultArg.vl(true));
+        let { x, y } = (0, utils_1.centring)(this.props.centring, this.type, w, h, xs, ys);
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.color, {
+            debug,
+            layer: { width: w, height: h, x: xs, y: ys, align: this.props.centring },
+            manager,
+        });
+        if (debug)
+            utils_1.LazyLog.log("none", `PolygonLayer:`, {
+                x,
+                y,
+                w,
+                h,
+                count: this.props.size.count,
+                radius: this.props.size.radius,
+            });
+        ctx.save();
+        ctx.beginPath();
+        // Calculate polygon vertices
+        const vertices = [];
+        for (let i = 0; i < this.props.size.count; i++) {
+            const angle = (i / this.props.size.count) * (2 * Math.PI) - Math.PI / 2;
+            vertices.push({
+                x: x + w / 2 + (w / 2) * Math.cos(angle),
+                y: y + h / 2 + (h / 2) * Math.sin(angle),
+            });
+        }
+        if (this.props.size.radius > 0) {
+            // Draw polygon with rounded corners
+            for (let i = 0; i < vertices.length; i++) {
+                const current = vertices[i];
+                const next = vertices[(i + 1) % vertices.length];
+                const prev = vertices[(i - 1 + vertices.length) % vertices.length];
+                // Calculate vectors from current vertex to adjacent vertices
+                const dx1 = current.x - prev.x;
+                const dy1 = current.y - prev.y;
+                const dx2 = next.x - current.x;
+                const dy2 = next.y - current.y;
+                // Normalize vectors
+                const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+                const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+                const ndx1 = dx1 / len1;
+                const ndy1 = dy1 / len1;
+                const ndx2 = dx2 / len2;
+                const ndy2 = dy2 / len2;
+                // Calculate the maximum radius based on edge lengths
+                const maxRadius = Math.max(len1 / 2, len2 / 2);
+                const cornerRadius = Math.min(this.props.size.radius, maxRadius);
+                // Calculate arc start and end points
+                const arcStart = {
+                    x: current.x - ndx1 * cornerRadius,
+                    y: current.y - ndy1 * cornerRadius,
+                };
+                const arcEnd = {
+                    x: current.x + ndx2 * cornerRadius,
+                    y: current.y + ndy2 * cornerRadius,
+                };
+                if (i === 0) {
+                    ctx.moveTo(arcStart.x, arcStart.y);
+                }
+                else {
+                    ctx.lineTo(arcStart.x, arcStart.y);
+                }
+                // Draw arc at corner
+                ctx.arcTo(current.x, current.y, arcEnd.x, arcEnd.y, cornerRadius);
+            }
+            ctx.closePath();
+        }
+        else {
+            // Draw polygon without rounded corners (original behavior)
+            for (let i = 0; i < vertices.length; i++) {
+                if (i === 0) {
+                    ctx.moveTo(vertices[i].x, vertices[i].y);
+                }
+                else {
+                    ctx.lineTo(vertices[i].x, vertices[i].y);
+                }
+            }
+            ctx.closePath();
+        }
+        utils_1.DrawUtils.drawShadow(ctx, this.props.shadow);
+        utils_1.DrawUtils.opacity(ctx, this.props.opacity);
+        utils_1.DrawUtils.filters(ctx, this.props.filter);
+        utils_1.DrawUtils.fillStyle(ctx, fillStyle, this.props.stroke);
+        if (this.props.stroke) {
+            ctx.stroke();
+        }
+        else {
+            ctx.fill();
+        }
+        ctx.restore();
+    }
+    /**
+     * Converts the Polygon layer to a JSON representation.
+     * @returns {IPolygonLayer} The JSON representation of the Polygon layer.
+     */
+    toJSON() {
+        let data = super.toJSON();
+        let copy = { ...this.props };
+        for (const key of ["x", "y", "size.width", "size.height", "fillStyle"]) {
+            if (copy[key] && typeof copy[key] === "object" && "toJSON" in copy[key]) {
+                copy[key] = copy[key].toJSON();
+            }
+        }
+        return { ...data, props: copy };
+    }
+    /**
+     * Validates the properties of the Morph Layer.
+     * @param {IPolygonLayerProps} [data] - The properties to validate.
+     * @returns {IPolygonLayerProps} The validated properties.
+     */
+    validateProps(data) {
+        return {
+            ...super.validateProps(data),
+            size: {
+                width: data.size?.width || 100,
+                height: data.size?.height || 100,
+                radius: data.size?.radius || 0,
+                count: data.size?.count || 3,
+            },
+            color: data.color || "#000000",
+        };
+    }
+}
+exports.PolygonLayer = PolygonLayer;

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

@@ -1,9 +1,9 @@
 import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
-import { ColorType, ScaleType, Point, LayerType } from "../../types";
+import { ColorType, ScaleType, Point, LayerType, StrokeOptions } from "../../types";
 import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers";
 /**
- * Interface representing a Quadratic Layer.
+ * Interface representing a Quadratic layer.
  */
 export interface IQuadraticLayer extends IBaseLayer {
     /**
@@ -11,22 +11,36 @@ export interface IQuadraticLayer extends IBaseLayer {
      */
     type: LayerType.QuadraticCurve;
     /**
-     * The properties specific to the Quadratic Layer.
+     * The properties specific to the Quadratic layer.
      */
     props: IQuadraticLayerProps;
 }
 /**
- * Interface representing the properties of a Quadratic Layer.
+ * Interface representing the properties of a Quadratic layer.
  */
 export interface IQuadraticLayerProps extends IBaseLayerProps {
+    position: {
+        /**
+         * The x coordinate of the quadratic curve's starting point.
+         */
+        x: ScaleType;
+        /**
+         * The y coordinate of the quadratic curve's starting point.
+         */
+        y: ScaleType;
+        /**
+         * The end x coordinate of the quadratic curve.
+         */
+        endX: ScaleType;
+        /**
+         * The end y coordinate of the quadratic curve.
+         */
+        endY: ScaleType;
+    };
     /**
      * The control point of the quadratic curve, including x and y coordinates.
      */
     controlPoints: Array<Point>;
-    /**
-     * The end point of the quadratic curve, including x and y coordinates.
-     */
-    endPoint: Point;
     /**
      * Whether the layer is filled.
      */
@@ -34,48 +48,23 @@ export interface IQuadraticLayerProps extends IBaseLayerProps {
     /**
      * The fill style (color or pattern) of the layer.
      */
-    fillStyle: ColorType;
+    color: ColorType;
     /**
      * The stroke properties of the quadratic 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 Quadratic Layer, extending the BaseLayer class.
+ * Class representing a Quadratic layer, extending the BaseLayer class.
  */
 export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
     /**
-     * The properties of the Quadratic Layer.
+     * The properties of the Quadratic layer.
      */
     props: IQuadraticLayerProps;
     /**
      * Constructs a new QuadraticLayer instance.
-     * @param {IQuadraticLayerProps} [props] - The properties of the Quadratic Layer.
+     * @param {IQuadraticLayerProps} [props] - The properties of the Quadratic layer.
      * @param {IBaseLayerMisc} [misc] - Miscellaneous options for the layer.
      */
     constructor(props?: IQuadraticLayerProps, misc?: IBaseLayerMisc);
@@ -87,12 +76,14 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
      */
     setControlPoint(x: ScaleType, y: ScaleType): this;
     /**
-     * Sets the end point of the quadratic layer.
+     * Sets the position of the quadratic 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 layer.
      * @param {ColorType} [color] - The color of the layer.
@@ -115,7 +106,7 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
      * Calculates the bounding box of the quadratic curve.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @returns {Object} The bounding box details including max, min, center, width, and height.
      */
     getBoundingBox(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager): {
@@ -138,17 +129,17 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
      * Draws the quadratic curve on the canvas.
      * @param {SKRSContext2D} [ctx] - The canvas rendering context.
      * @param {Canvas | SvgCanvas} [canvas] - The canvas instance.
-     * @param {LayersManager} [manager] - The layers manager.
+     * @param {LayersManager} [manager] - The layer's manager.
      * @param {boolean} [debug] - Whether to enable debug logging.
      */
     draw(ctx: SKRSContext2D, canvas: Canvas | SvgCanvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
-     * Converts the Quadratic Layer to a JSON representation.
-     * @returns {IQuadraticLayer} The JSON representation of the Quadratic Layer.
+     * Converts the Quadratic layer to a JSON representation.
+     * @returns {IQuadraticLayer} The JSON representation of the Quadratic layer.
      */
     toJSON(): IQuadraticLayer;
     /**
-     * Validates the properties of the Quadratic Layer.
+     * Validates the properties of the Quadratic layer.
      * @param {IQuadraticLayerProps} [data] - The properties to validate.
      * @returns {IQuadraticLayerProps} The validated properties.
      */