toosoon-utils 4.1.3 → 4.1.5

package/lib/extras/paths/PathContext.js

@@ -0,0 +1,381 @@
+import { EPSILON, PI } from '../../constants';
+import { arc, ellipse, isCoincident, isCollinear } from '../../geometry';
+import LineCurve from '../curves/LineCurve';
+import PolylineCurve from '../curves/PolylineCurve';
+import QuadraticBezierCurve from '../curves/QuadraticBezierCurve';
+import CubicBezierCurve from '../curves/CubicBezierCurve';
+import CatmullRomCurve from '../curves/CatmullRomCurve';
+import SplineCurve from '../curves/SplineCurve';
+import EllipseCurve from '../curves/EllipseCurve';
+import ArcCurve from '../curves/ArcCurve';
+import Path from './Path';
+/**
+ * Utility class for manipulating connected curves providing methods similar to the 2D Canvas API
+ *
+ * @exports
+ * @class PathContext
+ * @extends Path
+ */
+export default class PathContext extends Path {
+    /**
+     * Path current offset
+     */
+    currentPosition = [NaN, NaN];
+    /**
+     * Create a path from the given list of points
+     *
+     * @param {Point[]} points Array of points defining the path
+     * @param {Point[]} type   Type of curve used for creating the path
+     * @return {this}
+     */
+    setFromPoints(points, type) {
+        this.moveTo(...points[0]);
+        if (type === 'polyline')
+            return this.polylineTo(points);
+        if (type === 'spline')
+            return this.splineTo(points);
+        for (let i = 1, l = points.length; i < l; i++) {
+            this.lineTo(...points[i]);
+        }
+        return this;
+    }
+    /**
+     * Begin the path
+     * Reset `currentPosition`
+     */
+    beginPath() {
+        this._setCurrentPosition(NaN, NaN);
+    }
+    /**
+     * Draw a line from the ending position to the beginning position of the path
+     * Add an instance of {@link LineCurve} to the path
+     */
+    closePath() {
+        const startPoint = this.curves[0]?.getPoint(0);
+        const endPoint = this.curves[this.curves.length - 1]?.getPoint(1);
+        if (!isCoincident(...startPoint, ...endPoint))
+            this.add(new LineCurve(...endPoint, ...startPoint));
+        this._setCurrentPosition(...endPoint);
+        return this;
+    }
+    /**
+     * Move {@link Path#currentPosition} to the coordinates specified by `x` and `y`
+     *
+     * @param {number} x X-axis coordinate of the point
+     * @param {number} y Y-axis coordinate of the point
+     * @return {this}
+     */
+    moveTo(x, y) {
+        this._setCurrentPosition(x, y);
+        return this;
+    }
+    /**
+     * Draw a line from the current position to the position specified by `x` and `y`
+     * Add an instance of {@link LineCurve} to the path
+     *
+     * @param {number} x X-axis coordinate of the point
+     * @param {number} y Y-axis coordinate of the point
+     * @return {this}
+     */
+    lineTo(x, y) {
+        if (this.currentPosition.every(isNaN))
+            return this.moveTo(x, y);
+        const curve = new LineCurve(...this.currentPosition, x, y);
+        this.add(curve);
+        this._setCurrentPosition(x, y);
+        return this;
+    }
+    /**
+     * Draw a Polyline curve from the current position through the given points
+     * Add an instance of {@link PolylineCurve} to the path
+     *
+     * @param {Point[]} points Array of points defining the curve
+     * @returns {this}
+     */
+    polylineTo(points) {
+        if (this.currentPosition.every(isNaN))
+            this.moveTo(...points[0]);
+        const curve = new PolylineCurve([this.currentPosition].concat(points));
+        this.add(curve);
+        this._setCurrentPosition(...points[points.length - 1]);
+        return this;
+    }
+    /**
+     * Draw an Arc curve from the current position, tangential to the 2 segments created by both control points
+     * Add an instance of {@link ArcCurve} to the path
+     *
+     * @param {number} x1 X-axis coordinate of the first control point
+     * @param {number} y1 Y-axis coordinate of the first control point
+     * @param {number} x2 X-axis coordinate of the second control point
+     * @param {number} y2 Y-axis coordinate of the second control point
+     * @param {number} radius Arc radius (Must be non-negative)
+     * @returns {this}
+     */
+    arcTo(x1, y1, x2, y2, radius) {
+        if (this.currentPosition.every(isNaN))
+            this.moveTo(x1, y1);
+        if (radius < 0) {
+            console.warn(`Path.arcTo()`, `Arc radius must be non-negative.`, radius);
+            return this.lineTo(x2, y2);
+        }
+        const x0 = this.currentPosition[0];
+        const y0 = this.currentPosition[1];
+        // (x1, y1) is coincident with (x0, y0)
+        if (isCoincident(x0, y0, x1, y1)) {
+            return this;
+        }
+        // (x0, y0), (x1 ,y1) and (x2, y2) are collinear
+        if (isCollinear(x0, y0, x1, y1, x2, y2) || radius <= EPSILON) {
+            return this.lineTo(x2, y2);
+        }
+        const dx01 = x0 - x1;
+        const dy01 = y0 - y1;
+        const dx20 = x2 - x0;
+        const dy20 = y2 - y0;
+        const dx21 = x2 - x1;
+        const dy21 = y2 - y1;
+        const l20 = Math.hypot(dx20, dy20);
+        const l21 = Math.hypot(dx21, dy21);
+        const l01 = Math.hypot(dx01, dy01);
+        const l = radius * Math.tan((PI - Math.acos((l21 + l01 - l20) / (2 * l21 * l01))) / 2);
+        const t01 = l / l01;
+        const t21 = l / l21;
+        if (Math.abs(t01 - 1) > EPSILON) {
+            this.lineTo(x1 + t01 * dx01, y1 + t01 * dy01);
+        }
+        const startX = x1 + t01 * dx01;
+        const startY = y1 + t01 * dy01;
+        const endX = x1 + t21 * dx21;
+        const endY = y1 + t21 * dy21;
+        const normalX = dy01 * -1;
+        const normalY = dx01;
+        const centerX = (startX + endX) / 2;
+        const centerY = (startY + endY) / 2;
+        const d = Math.sqrt(radius ** 2 - l ** 2);
+        const cx = centerX + (normalX / Math.hypot(normalX, normalY)) * d;
+        const cy = centerY + (normalY / Math.hypot(normalX, normalY)) * d;
+        const startAngle = Math.atan2(startY - cy, startX - cx);
+        const endAngle = Math.atan2(endY - cy, endX - cx);
+        const counterclockwise = dy01 * dx21 < dx01 * dy21;
+        this.arc(x1 + t21 * dx21, y1 + t21 * dy21, radius, startAngle, endAngle, counterclockwise);
+        return this;
+    }
+    /**
+     * Draw a Quadratic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by `cpx` and `cpy`
+     * Add an instance of {@link QuadraticBezierCurve} to the path
+     *
+     * @param {number} cpx X-axis coordinate of the control point
+     * @param {number} cpy Y-axis coordinate of the control point
+     * @param {number} x2  X-axis coordinate of the end point
+     * @param {number} y2  Y-axis coordinate of the end point
+     * @return {this}
+     */
+    quadraticCurveTo(cpx, cpy, x2, y2) {
+        if (this.currentPosition.every(isNaN))
+            this.moveTo(cpx, cpy);
+        const curve = new QuadraticBezierCurve(...this.currentPosition, cpx, cpy, x2, y2);
+        this.add(curve);
+        this._setCurrentPosition(x2, y2);
+        return this;
+    }
+    /**
+     * Draw a Cubic Bézier curve from the current position to the end point specified by `x` and `y`, using the control point specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`)
+     * Add an instance of {@link CubicBezierCurve} to the path
+     *
+     * @param {number} cp1x X-axis coordinate of the first control point
+     * @param {number} cp1y Y-axis coordinate of the first control point
+     * @param {number} cp2x X-axis coordinate of the second control point
+     * @param {number} cp2y Y-axis coordinate of the second control point
+     * @param {number} x2   X-axis coordinate of the end point
+     * @param {number} y2   Y-axis coordinate of the end point
+     * @return {this}
+     */
+    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) {
+        if (this.currentPosition.every(isNaN))
+            this.moveTo(cp1x, cp1y);
+        const curve = new CubicBezierCurve(...this.currentPosition, cp1x, cp1y, cp2x, cp2y, x2, y2);
+        this.add(curve);
+        this._setCurrentPosition(x2, y2);
+        return this;
+    }
+    /**
+     * Draw a Catmull-Rom curve from the current position to the end point specified by `x` and `y`, using the control points specified by (`cp1x`, `cp1y`) and (`cp2x`, `cp2y`)
+     * Add an instance of {@link CatmullRomCurve} to the path
+     *
+     * @param {number} cp1x X-axis coordinate of the first control point
+     * @param {number} cp1y Y-axis coordinate of the first control point
+     * @param {number} cp2x X-axis coordinate of the second control point
+     * @param {number} cp2y Y-axis coordinate of the second control point
+     * @param {number} x2   X-axis coordinate of the end point
+     * @param {number} y2   Y-axis coordinate of the end point
+     * @return {this}
+     */
+    catmullRomCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2) {
+        if (this.currentPosition.every(isNaN))
+            this.moveTo(cp1x, cp1y);
+        const curve = new CatmullRomCurve(...this.currentPosition, cp1x, cp1y, cp2x, cp2y, x2, y2);
+        this.add(curve);
+        this._setCurrentPosition(x2, y2);
+        return this;
+    }
+    /**
+     * Draw a Spline curve from the current position through the given points
+     * Add an instance of {@link SplineCurve} to the path
+     *
+     * @param {Point[]} points Array of points defining the curve
+     * @return {this}
+     */
+    splineTo(points) {
+        if (this.currentPosition.every(isNaN))
+            this.moveTo(...points[0]);
+        const curve = new SplineCurve([this.currentPosition].concat(points));
+        this.add(curve);
+        this._setCurrentPosition(...points[points.length - 1]);
+        return this;
+    }
+    /**
+     * Draw an Ellispe curve which is centered at (`cx`, `cy`) position
+     * Add an instance of {@link EllipseCurve} to the path
+     *
+     * @param {number} cx X-axis coordinate of the center of the circle
+     * @param {number} cy Y-axis coordinate of the center of the circle
+     * @param {number} rx X-radius of the ellipse
+     * @param {number} ry Y-radius of the ellipse
+     * @param {number} [rotation] 	Rotation angle of the ellipse (in radians), counterclockwise from the positive X-axis
+     * @param {number} [startAngle] Start angle of the arc (in radians)
+     * @param {number} [endAngle]   End angle of the arc (in radians)
+     * @param {boolean} [counterclockwise] Flag indicating the direction of the arc
+     * @return {this}
+     */
+    ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise) {
+        const start = ellipse(0, cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise);
+        const end = ellipse(1, cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise);
+        if (this.currentPosition.every(isNaN))
+            this.moveTo(...start);
+        else if (!isCoincident(...this.currentPosition, ...start))
+            this.lineTo(...start);
+        if (rx <= EPSILON && ry <= EPSILON)
+            return this;
+        const curve = new EllipseCurve(cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise);
+        this.add(curve);
+        this._setCurrentPosition(...end);
+        return this;
+    }
+    /**
+     * Draw an Arc curve which is centered at (`cx`, `cy`) position
+     * Add an instance of {@link ArcCurve} to the path
+     *
+     * @param {number} cx X-axis coordinate of the center of the circle
+     * @param {number} cy Y-axis coordinate of the center of the circle
+     * @param {number} radius Radius of the circle
+     * @param {number} [startAngle] Start angle of the arc (in radians)
+     * @param {number} [endAngle]   End angle of the arc (in radians)
+     * @param {boolean} [counterclockwise] Flag indicating the direction of the arc
+     * @return {this}
+     */
+    arc(cx, cy, radius, startAngle, endAngle, counterclockwise) {
+        const start = arc(0, cx, cy, radius, startAngle, endAngle, counterclockwise);
+        const end = arc(1, cx, cy, radius, startAngle, endAngle, counterclockwise);
+        if (this.currentPosition.every(isNaN))
+            this.moveTo(...start);
+        else if (!isCoincident(...this.currentPosition, ...start))
+            this.lineTo(...start);
+        if (radius <= EPSILON)
+            return this;
+        const curve = new ArcCurve(cx, cy, radius, startAngle, endAngle, counterclockwise);
+        this.add(curve);
+        this._setCurrentPosition(...end);
+        return this;
+    }
+    /**
+     * Draw a rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`
+     * Add an instance of {@link PolylineCurve} to the path
+     *
+     * @param {number} x 		  X-axis coordinate of the rectangle starting point
+     * @param {number} y      Y-axis coordinate of the rectangle starting point
+     * @param {number} width	Rectangle width (Positive values are to the right and negative to the left)
+     * @param {number} height Rectangle height (Positive values are down, and negative are up)
+     * @return {this}
+     */
+    rect(x, y, width, height) {
+        if (this.currentPosition.every(isNaN))
+            this.moveTo(x, y);
+        else if (!isCoincident(...this.currentPosition, x, y))
+            this.lineTo(x, y);
+        const curve = new PolylineCurve([
+            [x + width, y],
+            [x + width, y + height],
+            [x, y + height],
+            [x, y]
+        ]);
+        this.add(curve);
+        this._setCurrentPosition(x, y);
+        return this;
+    }
+    /**
+     * Draw a rounded rectangular path from the start position specified by `x` and `y` to the end position using `width` and `height`
+     *
+     * @param {number} x 		  X-axis coordinate of the rectangle starting point
+     * @param {number} y      Y-axis coordinate of the rectangle starting point
+     * @param {number} width	Rectangle width (Positive values are to the right and negative to the left)
+     * @param {number} height Rectangle height (Positive values are down, and negative are up)
+     * @param {number|number[]} radius Radius of the circular arc to be used for the corners of the rectangle
+     * @return {this}
+     */
+    roundRect(x, y, width, height, radius) {
+        let topLeftRadius = typeof radius === 'number' ? radius : radius[0];
+        let topRightRadius = typeof radius === 'number' ? radius : radius[1] ?? radius[0];
+        let bottomRightRadius = typeof radius === 'number' ? radius : radius[2] ?? topLeftRadius;
+        let bottomLeftRadius = typeof radius === 'number' ? radius : radius[3] ?? topRightRadius;
+        const maxRadius = Math.min(width / 2, height / 2);
+        topLeftRadius = Math.min(topLeftRadius, maxRadius);
+        topRightRadius = Math.min(topRightRadius, maxRadius);
+        bottomRightRadius = Math.min(bottomRightRadius, maxRadius);
+        bottomLeftRadius = Math.min(bottomLeftRadius, maxRadius);
+        if (this.currentPosition.every(isNaN))
+            this.moveTo(x + topLeftRadius, y);
+        else if (!isCoincident(...this.currentPosition, x, y))
+            this.lineTo(x + topLeftRadius, y);
+        // Top-Right corner
+        if (topRightRadius > 0) {
+            this.lineTo(x + width - topRightRadius, y);
+            this.arcTo(x + width, y, x + width, y + topRightRadius, topRightRadius);
+        }
+        else {
+            this.lineTo(x + width, y);
+        }
+        // Bottom-Right corner
+        if (bottomRightRadius > 0) {
+            this.lineTo(x + width, y + height - bottomRightRadius);
+            this.arcTo(x + width, y + height, x + width - bottomRightRadius, y + height, bottomRightRadius);
+        }
+        else {
+            this.lineTo(x + width, y + height);
+        }
+        // Bottom-Left corner
+        if (bottomLeftRadius > 0) {
+            this.lineTo(x + bottomLeftRadius, y + height);
+            this.arcTo(x, y + height, x, y + height - bottomLeftRadius, bottomLeftRadius);
+        }
+        else {
+            this.lineTo(x, y + height);
+        }
+        // Top-Left corner
+        if (topLeftRadius > 0) {
+            this.lineTo(x, y + topLeftRadius);
+            this.arcTo(x, y, x + topLeftRadius, y, topLeftRadius);
+        }
+        else {
+            this.lineTo(x, y);
+        }
+        return this;
+    }
+    //   public transform() {}
+    //   public translate(x: number, y: number) {}
+    //   public rotate(angle: number) {}
+    //   public restore() {}
+    _setCurrentPosition(x, y) {
+        this.currentPosition[0] = x;
+        this.currentPosition[1] = y;
+    }
+}

package/lib/extras/paths/PathSVG.d.ts

@@ -0,0 +1,100 @@
+import Curve from '../curves/Curve';
+import LineCurve from '../curves/LineCurve';
+import PolylineCurve from '../curves/PolylineCurve';
+import QuadraticBezierCurve from '../curves/QuadraticBezierCurve';
+import CubicBezierCurve from '../curves/CubicBezierCurve';
+import CatmullRomCurve from '../curves/CatmullRomCurve';
+import SplineCurve from '../curves/SplineCurve';
+import EllipseCurve from '../curves/EllipseCurve';
+import ArcCurve from '../curves/ArcCurve';
+import PathContext from './PathContext';
+export type SerializationParams = {
+    curveResolution?: number;
+};
+/**
+ * Utility class for manipulating connected curves and generating SVG path
+ *
+ * It works by serializing 2D Canvas API to SVG path data
+ *
+ * @exports
+ * @class PathSVG
+ * @extends PathContext
+ */
+export default class PathSVG extends PathContext {
+    /**
+     * Serialize a {@link Curve}
+     *
+     * @param {Curve} curve
+     * @param {object} [params.curveResolution=5] Resolution used for Catmull-Rom curves and Spline curves approximations
+     * @returns string
+     */
+    static serialize(curve: Curve, { curveResolution }?: SerializationParams): string;
+    /**
+     * Serialize a {@link LineCurve}
+     *
+     * @param {LineCurve} curve
+     * @returns string
+     */
+    static serializeLineCurve(curve: LineCurve): string;
+    /**
+     * Serialize a {@link PolylineCurve}
+     *
+     * @param {PolylineCurve} curve
+     * @returns string
+     */
+    static serializePolylineCurve(curve: PolylineCurve): string;
+    /**
+     * Serialize a {@link QuadraticBezierCurve}
+     *
+     * @param {QuadraticBezierCurve} curve
+     * @returns string
+     */
+    static serializeQuadraticBezierCurve(curve: QuadraticBezierCurve): string;
+    /**
+     * Serialize a {@link CubicBezierCurve}
+     *
+     * @param {CubicBezierCurve} curve
+     * @returns string
+     */
+    static serializeCubicBezierCurve(curve: CubicBezierCurve): string;
+    /**
+     * Serialize a {@link CatmullRomCurve}
+     *
+     * @param {CatmullRomCurve} curve
+     * @param {object} params
+     * @param {number} [params.curveResolution=5]
+     * @returns string
+     */
+    static serializeCatmullRomCurve(curve: CatmullRomCurve, { curveResolution }: Pick<SerializationParams, 'curveResolution'>): string;
+    /**
+     * Serialize a {@link SplineCurve}
+     *
+     * @param {SplineCurve} curve
+     * @param {object} params
+     * @param {number} [params.curveResolution=5]
+     * @returns string
+     */
+    static serializeSplineCurve(curve: SplineCurve, { curveResolution }: Pick<SerializationParams, 'curveResolution'>): string;
+    /**
+     * Serialize an {@link EllipseCurve}
+     *
+     * @param {EllipseCurve} curve
+     * @returns string
+     */
+    static serializeEllipseCurve(curve: EllipseCurve): string;
+    /**
+     * Serialize an {@link ArcCurve}
+     *
+     * @param {ArcCurve} curve
+     * @returns string
+     */
+    static serializeArcCurve(curve: ArcCurve): string;
+    /**
+     * Return SVG path data string
+     *
+     * @param {object} [params]
+     * @param {object} [params.curveResolution=5] Resolution used for Catmull-Rom curves and Spline curves approximations
+     * @returns {string}
+     */
+    toString(params?: SerializationParams): string;
+}

package/lib/extras/paths/PathSVG.js

@@ -0,0 +1,182 @@
+import { EPSILON, PI, TWO_PI, TAU_EPSILON } from '../../constants';
+import { isCoincident, toDegrees } from '../../geometry';
+import LineCurve from '../curves/LineCurve';
+import PolylineCurve from '../curves/PolylineCurve';
+import QuadraticBezierCurve from '../curves/QuadraticBezierCurve';
+import CubicBezierCurve from '../curves/CubicBezierCurve';
+import CatmullRomCurve from '../curves/CatmullRomCurve';
+import SplineCurve from '../curves/SplineCurve';
+import EllipseCurve from '../curves/EllipseCurve';
+import ArcCurve from '../curves/ArcCurve';
+import PathContext from './PathContext';
+/**
+ * Utility class for manipulating connected curves and generating SVG path
+ *
+ * It works by serializing 2D Canvas API to SVG path data
+ *
+ * @exports
+ * @class PathSVG
+ * @extends PathContext
+ */
+export default class PathSVG extends PathContext {
+    /**
+     * Serialize a {@link Curve}
+     *
+     * @param {Curve} curve
+     * @param {object} [params.curveResolution=5] Resolution used for Catmull-Rom curves and Spline curves approximations
+     * @returns string
+     */
+    static serialize(curve, { curveResolution } = {}) {
+        if (curve instanceof LineCurve) {
+            return PathSVG.serializeLineCurve(curve);
+        }
+        if (curve instanceof PolylineCurve) {
+            return PathSVG.serializePolylineCurve(curve);
+        }
+        if (curve instanceof QuadraticBezierCurve) {
+            return PathSVG.serializeQuadraticBezierCurve(curve);
+        }
+        if (curve instanceof CubicBezierCurve) {
+            return PathSVG.serializeCubicBezierCurve(curve);
+        }
+        if (curve instanceof CatmullRomCurve) {
+            return PathSVG.serializeCatmullRomCurve(curve, { curveResolution });
+        }
+        if (curve instanceof SplineCurve) {
+            return PathSVG.serializeSplineCurve(curve, { curveResolution });
+        }
+        if (curve instanceof EllipseCurve) {
+            return PathSVG.serializeEllipseCurve(curve);
+        }
+        if (curve instanceof ArcCurve) {
+            return PathSVG.serializeArcCurve(curve);
+        }
+        return '';
+    }
+    /**
+     * Serialize a {@link LineCurve}
+     *
+     * @param {LineCurve} curve
+     * @returns string
+     */
+    static serializeLineCurve(curve) {
+        const { x2, y2 } = curve;
+        return `L${x2},${y2}`;
+    }
+    /**
+     * Serialize a {@link PolylineCurve}
+     *
+     * @param {PolylineCurve} curve
+     * @returns string
+     */
+    static serializePolylineCurve(curve) {
+        const { points } = curve;
+        return points.map(([x, y]) => `L${x},${y}`).join(' ');
+    }
+    /**
+     * Serialize a {@link QuadraticBezierCurve}
+     *
+     * @param {QuadraticBezierCurve} curve
+     * @returns string
+     */
+    static serializeQuadraticBezierCurve(curve) {
+        const { cpx, cpy, x2, y2 } = curve;
+        return `Q${cpx},${cpy},${x2},${y2}`;
+    }
+    /**
+     * Serialize a {@link CubicBezierCurve}
+     *
+     * @param {CubicBezierCurve} curve
+     * @returns string
+     */
+    static serializeCubicBezierCurve(curve) {
+        const { cp1x, cp1y, cp2x, cp2y, x2, y2 } = curve;
+        return `C${cp1x},${cp1y},${cp2x},${cp2y},${x2},${y2}`;
+    }
+    /**
+     * Serialize a {@link CatmullRomCurve}
+     *
+     * @param {CatmullRomCurve} curve
+     * @param {object} params
+     * @param {number} [params.curveResolution=5]
+     * @returns string
+     */
+    static serializeCatmullRomCurve(curve, { curveResolution = 5 }) {
+        const divisions = (curve.getLength() * curveResolution) / 100;
+        return curve
+            .getSpacedPoints(divisions)
+            .map(([x, y]) => `L${x},${y}`)
+            .join(' ');
+    }
+    /**
+     * Serialize a {@link SplineCurve}
+     *
+     * @param {SplineCurve} curve
+     * @param {object} params
+     * @param {number} [params.curveResolution=5]
+     * @returns string
+     */
+    static serializeSplineCurve(curve, { curveResolution = 5 }) {
+        const divisions = (curve.getLength() * curveResolution) / 100;
+        return curve
+            .getSpacedPoints(divisions)
+            .map(([x, y]) => `L${x},${y}`)
+            .join(' ');
+    }
+    /**
+     * Serialize an {@link EllipseCurve}
+     *
+     * @param {EllipseCurve} curve
+     * @returns string
+     */
+    static serializeEllipseCurve(curve) {
+        const { cx, cy, rx, ry, rotation, startAngle, endAngle, counterclockwise } = curve;
+        let deltaAngle = counterclockwise ? startAngle - endAngle : endAngle - startAngle;
+        if (deltaAngle < 0)
+            deltaAngle = (deltaAngle % TWO_PI) + TWO_PI;
+        const xAxisRotation = toDegrees(rotation);
+        const largeArcFlag = deltaAngle >= PI ? 1 : 0;
+        const sweepFlag = counterclockwise ? 0 : 1;
+        if (deltaAngle > TAU_EPSILON) {
+            const dx = Math.cos(startAngle) * rx;
+            const dy = Math.sin(startAngle) * ry;
+            return (`A${rx},${ry},${xAxisRotation},1,${sweepFlag},${cx - dx},${cy - dy}` +
+                `A${rx},${ry},${xAxisRotation},1,${sweepFlag},${cx + dx},${cy + dy}`);
+        }
+        else if (deltaAngle > EPSILON) {
+            const dx = Math.cos(endAngle) * rx;
+            const dy = Math.sin(endAngle) * ry;
+            return `A${rx},${ry},${xAxisRotation},${largeArcFlag},${sweepFlag},${cx + dx},${cy + dy}`;
+        }
+        return '';
+    }
+    /**
+     * Serialize an {@link ArcCurve}
+     *
+     * @param {ArcCurve} curve
+     * @returns string
+     */
+    static serializeArcCurve(curve) {
+        return PathSVG.serializeEllipseCurve(curve);
+    }
+    /**
+     * Return SVG path data string
+     *
+     * @param {object} [params]
+     * @param {object} [params.curveResolution=5] Resolution used for Catmull-Rom curves and Spline curves approximations
+     * @returns {string}
+     */
+    toString(params = {}) {
+        return this.curves
+            .map((curve, index) => {
+            let commands = ``;
+            const lastPoint = index === 0 ? this.curves[0]?.getPoint(0) : this.curves[index - 1]?.getPoint(1);
+            if (!isCoincident(...lastPoint, ...curve.getPoint(0))) {
+                commands += `M${lastPoint[0]},${lastPoint[1]}`;
+            }
+            commands += PathSVG.serialize(curve, params);
+            return commands;
+        })
+            .join(' ');
+    }
+}

package/lib/extras/paths/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Path } from './Path';
+export { default as PathContext } from './PathContext';
+export { default as PathSVG } from './PathSVG';

package/lib/extras/paths/index.js

@@ -0,0 +1,3 @@
+export { default as Path } from './Path';
+export { default as PathContext } from './PathContext';
+export { default as PathSVG } from './PathSVG';