@nmmty/lazycanvas 0.4.0 → 0.5.0

package/dist/structures/components/Path2DLayer.js

@@ -0,0 +1,318 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Path2DLayer = void 0;
+const canvas_1 = require("@napi-rs/canvas");
+const types_1 = require("../../types");
+const utils_1 = require("../../utils/utils");
+const LazyUtil_1 = require("../../utils/LazyUtil");
+const helpers_1 = require("../helpers");
+class Path2DLayer {
+    id;
+    type = types_1.LayerType.Path;
+    zIndex;
+    visible;
+    props;
+    constructor(props, misc) {
+        this.id = misc?.id || (0, utils_1.generateID)(types_1.LayerType.Path);
+        this.zIndex = misc?.zIndex || 1;
+        this.visible = misc?.visible || true;
+        this.props = {
+            path2D: props?.path2D || new canvas_1.Path2D(),
+            filter: props?.filter || "",
+            opacity: props?.opacity || 1,
+            filled: props?.filled || true,
+            fillStyle: props?.fillStyle || "#000000",
+            transform: props?.transform || {},
+            globalComposite: props?.globalComposite || "source-over",
+            stroke: {
+                width: props?.stroke?.width || 1,
+                cap: props?.stroke?.cap || "butt",
+                join: props?.stroke?.join || "miter",
+                dashOffset: props?.stroke?.dashOffset || 0,
+                dash: props?.stroke?.dash || [],
+                miterLimit: props?.stroke?.miterLimit || 10,
+            },
+            loadFromSVG: props?.loadFromSVG || false,
+            clipPath: props?.clipPath || false,
+        };
+    }
+    /**
+     * 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 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;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * Sets the stroke properties of the Path2D 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 = {
+            width,
+            cap: cap || 'butt',
+            join: join || 'miter',
+            dash: dash || [],
+            dashOffset: dashOffset || 0,
+            miterLimit: miterLimit || 10,
+        };
+        return this;
+    }
+    /**
+     * Sets whether the Path2D Layer should be filled or stroked.
+     * @param filled {boolean} - If true, the layer will be filled; otherwise, it will be stroked.
+     * @returns {this} The current instance for chaining.
+     */
+    setFilled(filled) {
+        this.props.filled = filled;
+        return this;
+    }
+    /**
+     * Sets the color of the Path2D Layer.
+     * @param color {string} - The color of the Path2D 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 helpers_1.Gradient || fill instanceof helpers_1.Pattern) {
+            this.props.fillStyle = fill;
+        }
+        else {
+            let arr = fill.split(':');
+            this.props.fillStyle = arr[0];
+            this.props.opacity = parseFloat(arr[1]) || 1;
+        }
+        return this;
+    }
+    setPath(path) {
+        this.props.path2D = path instanceof canvas_1.Path2D ? path : new canvas_1.Path2D(path);
+        return this;
+    }
+    loadFromSVG(path) {
+        this.props.loadFromSVG = path;
+        return this;
+    }
+    setClipPath(clipPath) {
+        this.props.clipPath = clipPath;
+        return this;
+    }
+    toSVGString() {
+        return this.props.path2D.toSVGString();
+    }
+    addPath(path, transform) {
+        this.props.path2D.addPath(path, transform);
+        return this;
+    }
+    arc(x, y, radius, startAngle, endAngle, anticlockwise) {
+        this.props.path2D.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+        return this;
+    }
+    arcTo(x1, y1, x2, y2, radius) {
+        this.props.path2D.arcTo(x1, y1, x2, y2, radius);
+        return this;
+    }
+    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+        this.props.path2D.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+        return this;
+    }
+    closePath() {
+        this.props.path2D.closePath();
+        return this;
+    }
+    ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
+        this.props.path2D.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
+        return this;
+    }
+    lineTo(x, y) {
+        this.props.path2D.lineTo(x, y);
+        return this;
+    }
+    moveTo(x, y) {
+        this.props.path2D.moveTo(x, y);
+        return this;
+    }
+    quadraticCurveTo(cpx, cpy, x, y) {
+        this.props.path2D.quadraticCurveTo(cpx, cpy, x, y);
+        return this;
+    }
+    rect(x, y, width, height) {
+        this.props.path2D.rect(x, y, width, height);
+        return this;
+    }
+    stroke(stroke) {
+        this.props.path2D.stroke(stroke);
+        return this;
+    }
+    op(path, op) {
+        this.props.path2D.op(path, op);
+        return this;
+    }
+    getFillType() {
+        return this.props.path2D.getFillType();
+    }
+    getFillTypeString() {
+        return this.props.path2D.getFillTypeString();
+    }
+    setFillType(fillType) {
+        this.props.path2D.setFillType(fillType);
+        return this;
+    }
+    simplify() {
+        this.props.path2D.simplify();
+        return this;
+    }
+    asWinding() {
+        this.props.path2D.asWinding();
+        return this;
+    }
+    transform(matrix) {
+        this.props.path2D.transform(matrix);
+        return this;
+    }
+    getBounds() {
+        return this.props.path2D.getBounds();
+    }
+    computeTightBounds() {
+        return this.props.path2D.computeTightBounds();
+    }
+    trim(start, end, isComplement) {
+        this.props.path2D.trim(start, end, isComplement);
+        return this;
+    }
+    equals(path) {
+        return this.props.path2D.equals(path.props.path2D);
+    }
+    roundRect(x, y, width, height, radius) {
+        this.props.path2D.roundRect(x, y, width, height, radius);
+        return this;
+    }
+    async draw(ctx, canvas, manager, debug) {
+        ctx.beginPath();
+        ctx.save();
+        let fillStyle = await (0, utils_1.parseFillStyle)(ctx, this.props.fillStyle);
+        (0, utils_1.transform)(ctx, this.props.transform, { width: 0, height: 0, x: 0, y: 0, type: this.type });
+        (0, utils_1.opacity)(ctx, this.props.opacity);
+        ctx.globalCompositeOperation = this.props.globalComposite;
+        if (this.props.clipPath) {
+            ctx.clip(this.props.path2D);
+        }
+        else if (this.props.filled) {
+            ctx.fillStyle = fillStyle;
+            ctx.fill(this.props.path2D);
+        }
+        else {
+            ctx.strokeStyle = fillStyle;
+            ctx.lineWidth = this.props.stroke.width;
+            ctx.lineCap = this.props.stroke.cap;
+            ctx.lineJoin = this.props.stroke.join;
+            ctx.miterLimit = this.props.stroke.miterLimit;
+            ctx.lineDashOffset = this.props.stroke.dashOffset;
+            ctx.setLineDash(this.props.stroke.dash);
+            ctx.stroke(this.props.path2D);
+        }
+        ctx.restore();
+        ctx.closePath();
+    }
+    /**
+     * Converts the Path2D Layer to a JSON representation.
+     * @returns {IPath2DLayer} The JSON representation of the Path2D Layer.
+     */
+    toJSON() {
+        return {
+            id: this.id,
+            type: this.type,
+            zIndex: this.zIndex,
+            visible: this.visible,
+            props: this.props
+        };
+    }
+}
+exports.Path2DLayer = Path2DLayer;

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

@@ -1,38 +1,116 @@
-import { BaseLayer } from "./BaseLayer";
-import { IQuadraticLayerProps, IQuadraticLayer, ColorType, ScaleType } from "../../types";
-import { Canvas, SKRSContext2D } from "@napi-rs/canvas";
+import { BaseLayer, IBaseLayer, IBaseLayerMisc, IBaseLayerProps } from "./BaseLayer";
+import { ColorType, ScaleType, Point, LayerType } from "../../types";
+import { Canvas, SKRSContext2D, SvgCanvas } from "@napi-rs/canvas";
 import { LayersManager } from "../managers/LayersManager";
+/**
+ * Interface representing a Quadratic Layer.
+ */
+export interface IQuadraticLayer extends IBaseLayer {
+    /**
+     * The type of the layer, which is `QuadraticCurve`.
+     */
+    type: LayerType.QuadraticCurve;
+    /**
+     * The properties specific to the Quadratic Layer.
+     */
+    props: IQuadraticLayerProps;
+}
+/**
+ * Interface representing the properties of a Quadratic Layer.
+ */
+export interface IQuadraticLayerProps extends IBaseLayerProps {
+    /**
+     * 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;
+    /**
+     * 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;
+    };
+}
+/**
+ * Class representing a Quadratic Layer, extending the BaseLayer class.
+ */
 export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
+    /**
+     * The properties of the Quadratic Layer.
+     */
     props: IQuadraticLayerProps;
-    constructor(props?: IQuadraticLayerProps);
     /**
-     * @description Sets the control point of the quadratic layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param x {ScaleType} - The control `x` of the quadratic layer.
-     * @param y {ScaleType} - The control `y` of the quadratic layer.
+     * Constructs a new QuadraticLayer instance.
+     * @param props {IQuadraticLayerProps} - The properties of the Quadratic Layer.
+     * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
+     */
+    constructor(props?: IQuadraticLayerProps, misc?: IBaseLayerMisc);
+    /**
+     * Sets the control point of the quadratic layer.
+     * @param x {ScaleType} - The x-coordinate of the control point.
+     * @param y {ScaleType} - The y-coordinate of the control point.
+     * @returns {this} The current instance for chaining.
      */
     setControlPoint(x: ScaleType, y: ScaleType): this;
     /**
-     * @description Sets the end point of the quadratic layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param x {ScaleType} - The end `x` of the quadratic layer.
-     * @param y {ScaleType} - The end `y` of the quadratic layer.
+     * Sets the end point of the quadratic 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 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 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 quadratic curve.
+     * @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: {
             x: number;
             y: number;
@@ -48,9 +126,17 @@ export declare class QuadraticLayer extends BaseLayer<IQuadraticLayerProps> {
         width: number;
         height: number;
     };
-    draw(ctx: SKRSContext2D, canvas: Canvas, manager: LayersManager, debug: boolean): Promise<void>;
     /**
-     * @returns {IQuadraticLayer}
+     * Draws the quadratic curve 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 Quadratic Layer to a JSON representation.
+     * @returns {IQuadraticLayer} The JSON representation of the Quadratic Layer.
      */
     toJSON(): IQuadraticLayer;
 }

package/dist/structures/components/QuadraticLayer.js

@@ -2,41 +2,55 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuadraticLayer = 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");
+const helpers_1 = require("../helpers");
+/**
+ * Class representing a Quadratic Layer, extending the BaseLayer class.
+ */
 class QuadraticLayer extends BaseLayer_1.BaseLayer {
+    /**
+     * The properties of the Quadratic Layer.
+     */
     props;
-    constructor(props) {
-        super(enum_1.LayerType.QuadraticCurve, props || {});
+    /**
+     * Constructs a new QuadraticLayer instance.
+     * @param props {IQuadraticLayerProps} - The properties of the Quadratic Layer.
+     * @param misc {IBaseLayerMisc} - Miscellaneous options for the layer.
+     */
+    constructor(props, misc) {
+        super(types_1.LayerType.QuadraticCurve, 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 point of the quadratic layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param x {ScaleType} - The control `x` of the quadratic layer.
-     * @param y {ScaleType} - The control `y` of the quadratic layer.
+     * Sets the control point of the quadratic layer.
+     * @param x {ScaleType} - The x-coordinate of the control point.
+     * @param y {ScaleType} - The y-coordinate of the control point.
+     * @returns {this} The current instance for chaining.
      */
     setControlPoint(x, y) {
-        this.props.controlPoint = { x, y };
+        this.props.controlPoints = [{ x, y }];
         return this;
     }
     /**
-     * @description Sets the end point of the quadratic layer. You can use `numbers`, `percentages`, `px`, `vw`, `vh`, `vmin`, `vmax`.
-     * @param x {ScaleType} - The end `x` of the quadratic layer.
-     * @param y {ScaleType} - The end `y` of the quadratic layer.
+     * Sets the end point of the quadratic 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 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)
@@ -44,7 +58,7 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
         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) {
+        if (fill instanceof helpers_1.Gradient || fill instanceof helpers_1.Pattern) {
             this.props.fillStyle = fill;
         }
         else {
@@ -55,13 +69,14 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
         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 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, cap, join, dash, dashOffset, miterLimit) {
         this.props.stroke = {
@@ -74,26 +89,40 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
         };
         return this;
     }
+    /**
+     * Calculates the bounding box of the quadratic curve.
+     * @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, cx, cy, xe, ye } = parcer.parseBatch({
             xs: { v: this.props.x },
             ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
-            cx: { v: this.props.controlPoint.x },
-            cy: { v: this.props.controlPoint.y, options: LazyUtil_1.defaultArg.vl(true) },
+            cx: { v: this.props.controlPoints[0].x },
+            cy: { v: this.props.controlPoints[0].y, options: LazyUtil_1.defaultArg.vl(true) },
             xe: { v: this.props.endPoint.x },
             ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
         });
         const { max, min, center, width, height } = (0, utils_1.getBoundingBoxBezier)([{ x: xs, y: ys }, { x: cx, y: cy }, { x: xe, y: ye }]);
         return { max, min, center, width, height };
     }
+    /**
+     * Draws the quadratic curve 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, cx, cy, xe, ye } = parcer.parseBatch({
             xs: { v: this.props.x },
             ys: { v: this.props.y, options: LazyUtil_1.defaultArg.vl(true) },
-            cx: { v: this.props.controlPoint.x },
-            cy: { v: this.props.controlPoint.y, options: LazyUtil_1.defaultArg.vl(true) },
+            cx: { v: this.props.controlPoints[0].x },
+            cy: { v: this.props.controlPoints[0].y, options: LazyUtil_1.defaultArg.vl(true) },
             xe: { v: this.props.endPoint.x },
             ye: { v: this.props.endPoint.y, options: LazyUtil_1.defaultArg.vl(true) }
         });
@@ -121,12 +150,18 @@ class QuadraticLayer extends BaseLayer_1.BaseLayer {
         ctx.restore();
     }
     /**
-     * @returns {IQuadraticLayer}
+     * Converts the Quadratic Layer to a JSON representation.
+     * @returns {IQuadraticLayer} The JSON representation of the Quadratic 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', 'controlPoint.x', 'controlPoint.y', 'fillStyle']) {
+            if (copy[key] && typeof copy[key] === 'object' && 'toJSON' in copy[key]) {
+                copy[key] = copy[key].toJSON();
+            }
+        }
+        return { ...data, props: copy };
     }
 }
 exports.QuadraticLayer = QuadraticLayer;