@js-draw/math 1.17.0 → 1.18.0

package/dist/cjs/shapes/Path.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Path = exports.PathCommandType = void 0;
+exports.Path = exports.stepCurveIndexBy = exports.compareCurveIndices = exports.PathCommandType = void 0;
 const LineSegment2_1 = __importDefault(require("./LineSegment2"));
 const Rect2_1 = __importDefault(require("./Rect2"));
 const Vec2_1 = require("../Vec2");
@@ -12,6 +12,7 @@ const QuadraticBezier_1 = __importDefault(require("./QuadraticBezier"));
 const PointShape2D_1 = __importDefault(require("./PointShape2D"));
 const toRoundedString_1 = __importDefault(require("../rounding/toRoundedString"));
 const toStringOfSamePrecision_1 = __importDefault(require("../rounding/toStringOfSamePrecision"));
+const convexHull2Of_1 = __importDefault(require("../utils/convexHull2Of"));
 var PathCommandType;
 (function (PathCommandType) {
     PathCommandType[PathCommandType["LineTo"] = 0] = "LineTo";
@@ -19,8 +20,64 @@ var PathCommandType;
     PathCommandType[PathCommandType["CubicBezierTo"] = 2] = "CubicBezierTo";
     PathCommandType[PathCommandType["QuadraticBezierTo"] = 3] = "QuadraticBezierTo";
 })(PathCommandType || (exports.PathCommandType = PathCommandType = {}));
+/** Returns a positive number if `a` comes after `b`, 0 if equal, and negative otherwise. */
+const compareCurveIndices = (a, b) => {
+    const indexCompare = a.curveIndex - b.curveIndex;
+    if (indexCompare === 0) {
+        return a.parameterValue - b.parameterValue;
+    }
+    else {
+        return indexCompare;
+    }
+};
+exports.compareCurveIndices = compareCurveIndices;
+/**
+ * Returns a version of `index` with its parameter value incremented by `stepBy`
+ * (which can be either positive or negative).
+ */
+const stepCurveIndexBy = (index, stepBy) => {
+    if (index.parameterValue + stepBy > 1) {
+        return { curveIndex: index.curveIndex + 1, parameterValue: index.parameterValue + stepBy - 1 };
+    }
+    if (index.parameterValue + stepBy < 0) {
+        if (index.curveIndex === 0) {
+            return { curveIndex: 0, parameterValue: 0 };
+        }
+        return { curveIndex: index.curveIndex - 1, parameterValue: index.parameterValue + stepBy + 1 };
+    }
+    return { curveIndex: index.curveIndex, parameterValue: index.parameterValue + stepBy };
+};
+exports.stepCurveIndexBy = stepCurveIndexBy;
 /**
  * Represents a union of lines and curves.
+ *
+ * To create a path from a string, see {@link fromString}.
+ *
+ * @example
+ * ```ts,runnable,console
+ * import {Path, Mat33, Vec2, LineSegment2} from '@js-draw/math';
+ *
+ * // Creates a path from an SVG path string.
+ * // In this case,
+ * // 1. Move to (0,0)
+ * // 2. Line to (100,0)
+ * const path = Path.fromString('M0,0 L100,0');
+ *
+ * // Logs the distance from (10,0) to the curve 1 unit
+ * // away from path. This curve forms a stroke with the path at
+ * // its center.
+ * const strokeRadius = 1;
+ * console.log(path.signedDistance(Vec2.of(10,0), strokeRadius));
+ *
+ * // Log a version of the path that's scaled by a factor of 4.
+ * console.log(path.transformedBy(Mat33.scaling2D(4)).toString());
+ *
+ * // Log all intersections of a stroked version of the path with
+ * // a vertical line segment.
+ * // (Try removing the `strokeRadius` parameter).
+ * const segment = new LineSegment2(Vec2.of(5, -100), Vec2.of(5, 100));
+ * console.log(path.intersection(segment, strokeRadius).map(i => i.point));
+ * ```
  */
 class Path {
     /**
@@ -43,6 +100,12 @@ class Path {
             this.bbox = this.bbox.union(Path.computeBBoxForSegment(startPoint, part));
         }
     }
+    /**
+     * Computes and returns the full bounding box for this path.
+     *
+     * If a slight over-estimate of a path's bounding box is sufficient, use
+     * {@link bbox} instead.
+     */
     getExactBBox() {
         const bboxes = [];
         for (const part of this.geometry) {
@@ -161,7 +224,20 @@ class Path {
         }
         return Rect2_1.default.bboxOf(points);
     }
-    /** **Note**: `strokeRadius = strokeWidth / 2` */
+    /**
+     * Returns the signed distance between `point` and a curve `strokeRadius` units
+     * away from this path.
+     *
+     * This returns the **signed distance**, which means that points inside this shape
+     * have their distance negated. For example,
+     * ```ts,runnable,console
+     * import {Path, Vec2} from '@js-draw/math';
+     * console.log(Path.fromString('m0,0 L100,0').signedDistance(Vec2.zero, 1));
+     * ```
+     * would print `-1` because (0,0) is on `m0,0 L100,0` and thus one unit away from its boundary.
+     *
+     * **Note**: `strokeRadius = strokeWidth / 2`
+     */
     signedDistance(point, strokeRadius) {
         let minDist = Infinity;
         for (const part of this.geometry) {
@@ -248,7 +324,7 @@ class Path {
             return [minDistPart, minDist - strokeRadius];
         };
         // Raymarch:
-        const maxRaymarchSteps = 7;
+        const maxRaymarchSteps = 8;
         // Start raymarching from each of these points. This allows detection of multiple
         // intersections.
         const startPoints = [
@@ -318,7 +394,7 @@ class Path {
             if (lastPart && isOnLineSegment && Math.abs(lastDist) < stoppingThreshold) {
                 result.push({
                     point: currentPoint,
-                    parameterValue: NaN, // lastPart.nearestPointTo(currentPoint).parameterValue,
+                    parameterValue: lastPart.nearestPointTo(currentPoint).parameterValue,
                     curve: lastPart,
                     curveIndex: this.geometry.indexOf(lastPart),
                 });
@@ -358,6 +434,9 @@ class Path {
         if (!line.bbox.intersects(this.bbox.grownBy(strokeRadius ?? 0))) {
             return [];
         }
+        if (this.parts.length === 0) {
+            return new Path(this.startPoint, [{ kind: PathCommandType.MoveTo, point: this.startPoint }]).intersection(line, strokeRadius);
+        }
         let index = 0;
         for (const part of this.geometry) {
             const intersections = part.argIntersectsLineSegment(line);
@@ -384,9 +463,6 @@ class Path {
     }
     /**
      * @returns the nearest point on this path to the given `point`.
-     *
-     * @internal
-     * @beta
      */
     nearestPointTo(point) {
         // Find the closest point on this
@@ -413,11 +489,223 @@ class Path {
         };
     }
     at(index) {
+        if (index.curveIndex === 0 && index.parameterValue === 0) {
+            return this.startPoint;
+        }
         return this.geometry[index.curveIndex].at(index.parameterValue);
     }
     tangentAt(index) {
         return this.geometry[index.curveIndex].tangentAt(index.parameterValue);
     }
+    /** Splits this path in two near the given `point`. */
+    splitNear(point, options) {
+        const nearest = this.nearestPointTo(point);
+        return this.splitAt(nearest, options);
+    }
+    /**
+     * Returns a copy of this path with `deleteFrom` until `deleteUntil` replaced with `insert`.
+     *
+     * This method is analogous to {@link Array.toSpliced}.
+     */
+    spliced(deleteFrom, deleteTo, insert, options) {
+        const isBeforeOrEqual = (a, b) => {
+            return a.curveIndex < b.curveIndex || (a.curveIndex === b.curveIndex && a.parameterValue <= b.parameterValue);
+        };
+        if (isBeforeOrEqual(deleteFrom, deleteTo)) {
+            //          deleteFrom        deleteTo
+            //      <---------|             |-------------->
+            //      x                                      x
+            //  startPoint                             endPoint
+            const firstSplit = this.splitAt(deleteFrom, options);
+            const secondSplit = this.splitAt(deleteTo, options);
+            const before = firstSplit[0];
+            const after = secondSplit[secondSplit.length - 1];
+            return insert ? before.union(insert).union(after) : before.union(after);
+        }
+        else {
+            // In this case, we need to handle wrapping at the start/end.
+            //          deleteTo        deleteFrom
+            //      <---------|    keep     |-------------->
+            //      x                                      x
+            //  startPoint                             endPoint
+            const splitAtFrom = this.splitAt([deleteFrom], options);
+            const beforeFrom = splitAtFrom[0];
+            // We need splitNear, rather than splitAt, because beforeFrom does not have
+            // the same indexing as this.
+            const splitAtTo = beforeFrom.splitNear(this.at(deleteTo), options);
+            const betweenBoth = splitAtTo[splitAtTo.length - 1];
+            return insert ? betweenBoth.union(insert) : betweenBoth;
+        }
+    }
+    // @internal
+    splitAt(splitAt, options) {
+        if (!Array.isArray(splitAt)) {
+            splitAt = [splitAt];
+        }
+        splitAt = [...splitAt];
+        splitAt.sort(exports.compareCurveIndices);
+        //
+        // Bounds checking & reversal.
+        //
+        while (splitAt.length > 0
+            && splitAt[splitAt.length - 1].curveIndex >= this.parts.length - 1
+            && splitAt[splitAt.length - 1].parameterValue >= 1) {
+            splitAt.pop();
+        }
+        splitAt.reverse(); // .reverse() <-- We're `.pop`ing from the end
+        while (splitAt.length > 0
+            && splitAt[splitAt.length - 1].curveIndex <= 0
+            && splitAt[splitAt.length - 1].parameterValue <= 0) {
+            splitAt.pop();
+        }
+        if (splitAt.length === 0 || this.parts.length === 0) {
+            return [this];
+        }
+        const expectedSplitCount = splitAt.length + 1;
+        const mapNewPoint = options?.mapNewPoint ?? ((p) => p);
+        const result = [];
+        let currentStartPoint = this.startPoint;
+        let currentPath = [];
+        //
+        // Splitting
+        //
+        let { curveIndex, parameterValue } = splitAt.pop();
+        for (let i = 0; i < this.parts.length; i++) {
+            if (i !== curveIndex) {
+                currentPath.push(this.parts[i]);
+            }
+            else {
+                let part = this.parts[i];
+                let geom = this.geometry[i];
+                while (i === curveIndex) {
+                    let newPathStart;
+                    const newPath = [];
+                    switch (part.kind) {
+                        case PathCommandType.MoveTo:
+                            currentPath.push({
+                                kind: part.kind,
+                                point: part.point,
+                            });
+                            newPathStart = part.point;
+                            break;
+                        case PathCommandType.LineTo:
+                            {
+                                const split = geom.splitAt(parameterValue);
+                                currentPath.push({
+                                    kind: part.kind,
+                                    point: mapNewPoint(split[0].p2),
+                                });
+                                newPathStart = split[0].p2;
+                                if (split.length > 1) {
+                                    console.assert(split.length === 2);
+                                    newPath.push({
+                                        kind: part.kind,
+                                        // Don't map: For lines, the end point of the split is
+                                        // the same as the end point of the original:
+                                        point: split[1].p2,
+                                    });
+                                    geom = split[1];
+                                }
+                            }
+                            break;
+                        case PathCommandType.QuadraticBezierTo:
+                        case PathCommandType.CubicBezierTo:
+                            {
+                                const split = geom.splitAt(parameterValue);
+                                let isFirstPart = split.length === 2;
+                                for (const segment of split) {
+                                    geom = segment;
+                                    const targetArray = isFirstPart ? currentPath : newPath;
+                                    const controlPoints = segment.getPoints();
+                                    if (part.kind === PathCommandType.CubicBezierTo) {
+                                        targetArray.push({
+                                            kind: part.kind,
+                                            controlPoint1: mapNewPoint(controlPoints[1]),
+                                            controlPoint2: mapNewPoint(controlPoints[2]),
+                                            endPoint: mapNewPoint(controlPoints[3]),
+                                        });
+                                    }
+                                    else {
+                                        targetArray.push({
+                                            kind: part.kind,
+                                            controlPoint: mapNewPoint(controlPoints[1]),
+                                            endPoint: mapNewPoint(controlPoints[2]),
+                                        });
+                                    }
+                                    // We want the start of the new path to match the start of the
+                                    // FIRST Bézier in the NEW path.
+                                    if (!isFirstPart) {
+                                        newPathStart = controlPoints[0];
+                                    }
+                                    isFirstPart = false;
+                                }
+                            }
+                            break;
+                        default: {
+                            const exhaustivenessCheck = part;
+                            return exhaustivenessCheck;
+                        }
+                    }
+                    result.push(new Path(currentStartPoint, [...currentPath]));
+                    currentStartPoint = mapNewPoint(newPathStart);
+                    console.assert(!!currentStartPoint, 'should have a start point');
+                    currentPath = newPath;
+                    part = newPath[newPath.length - 1] ?? part;
+                    const nextSplit = splitAt.pop();
+                    if (!nextSplit) {
+                        break;
+                    }
+                    else {
+                        curveIndex = nextSplit.curveIndex;
+                        if (i === curveIndex) {
+                            const originalPoint = this.at(nextSplit);
+                            parameterValue = geom.nearestPointTo(originalPoint).parameterValue;
+                            currentPath = [];
+                        }
+                        else {
+                            parameterValue = nextSplit.parameterValue;
+                        }
+                    }
+                }
+            }
+        }
+        result.push(new Path(currentStartPoint, currentPath));
+        console.assert(result.length === expectedSplitCount, `should split into splitAt.length + 1 splits (was ${result.length}, expected ${expectedSplitCount})`);
+        return result;
+    }
+    /**
+     * Replaces all `MoveTo` commands with `LineTo` commands and connects the end point of this
+     * path to the start point.
+     */
+    asClosed() {
+        const newParts = [];
+        let hasChanges = false;
+        for (const part of this.parts) {
+            if (part.kind === PathCommandType.MoveTo) {
+                newParts.push({
+                    kind: PathCommandType.LineTo,
+                    point: part.point,
+                });
+                hasChanges = true;
+            }
+            else {
+                newParts.push(part);
+            }
+        }
+        if (!this.getEndPoint().eq(this.startPoint)) {
+            newParts.push({
+                kind: PathCommandType.LineTo,
+                point: this.startPoint,
+            });
+            hasChanges = true;
+        }
+        if (!hasChanges) {
+            return this;
+        }
+        const result = new Path(this.startPoint, newParts);
+        console.assert(result.getEndPoint().eq(result.startPoint));
+        return result;
+    }
     static mapPathCommand(part, mapping) {
         switch (part.kind) {
             case PathCommandType.MoveTo:
@@ -460,6 +748,19 @@ class Path {
         }
         return this.mapPoints(point => affineTransfm.transformVec2(point));
     }
+    /**
+     * @internal
+     */
+    closedContainsPoint(point) {
+        const bbox = this.getExactBBox();
+        if (!bbox.containsPoint(point)) {
+            return false;
+        }
+        const pointOutside = point.plus(Vec2_1.Vec2.of(bbox.width, 0));
+        const asClosed = this.asClosed();
+        const lineToOutside = new LineSegment2_1.default(point, pointOutside);
+        return asClosed.intersection(lineToOutside).length % 2 === 1;
+    }
     // Creates a new path by joining [other] to the end of this path
     union(other, 
     // allowReverse: true iff reversing other or this is permitted if it means
@@ -468,6 +769,9 @@ class Path {
         if (!other) {
             return this;
         }
+        if (Array.isArray(other)) {
+            return new Path(this.startPoint, [...this.parts, ...other]);
+        }
         const thisEnd = this.getEndPoint();
         let newParts = [];
         if (thisEnd.eq(other.startPoint)) {
@@ -541,6 +845,7 @@ class Path {
         newParts.reverse();
         return new Path(newStart, newParts);
     }
+    /** Computes and returns the end point of this path */
     getEndPoint() {
         if (this.parts.length === 0) {
             return this.startPoint;
@@ -590,10 +895,12 @@ class Path {
         }
         return false;
     }
-    // Treats this as a closed path and returns true if part of `rect` is *roughly* within
-    // this path's interior.
-    //
-    // Note: Assumes that this is a closed, non-self-intersecting path.
+    /**
+     * Treats this as a closed path and returns true if part of `rect` is *roughly* within
+     * this path's interior.
+     *
+     * **Note**: Assumes that this is a closed, non-self-intersecting path.
+     */
     closedRoughlyIntersects(rect) {
         if (rect.containsRect(this.bbox)) {
             return true;
@@ -819,10 +1126,8 @@ class Path {
     /**
      * Create a `Path` from a subset of the SVG path specification.
      *
-     * ## To-do
-     * - TODO: Support a larger subset of SVG paths
-     *   - Elliptical arcs are currently unsupported.
-     * - TODO: Support `s`,`t` commands shorthands.
+     * Currently, this does not support elliptical arcs or `s` and `t` command
+     * shorthands. See https://github.com/personalizedrefrigerator/js-draw/pull/19.
      *
      * @example
      * ```ts,runnable,console
@@ -833,6 +1138,8 @@ class Path {
      * ```
      */
     static fromString(pathString) {
+        // TODO: Support elliptical arcs, and the `s`, `t` command shorthands.
+        //
         // See the MDN reference:
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
         // and
@@ -1000,6 +1307,22 @@ class Path {
         result.cachedStringVersion = pathString;
         return result;
     }
+    static fromConvexHullOf(points) {
+        if (points.length === 0) {
+            return Path.empty;
+        }
+        const hull = (0, convexHull2Of_1.default)(points);
+        const commands = hull.slice(1).map((p) => ({
+            kind: PathCommandType.LineTo,
+            point: p,
+        }));
+        // Close -- connect back to the start
+        commands.push({
+            kind: PathCommandType.LineTo,
+            point: hull[0],
+        });
+        return new Path(hull[0], commands);
+    }
 }
 exports.Path = Path;
 // @internal TODO: At present, this isn't really an empty path.

package/dist/cjs/shapes/QuadraticBezier.d.ts

@@ -2,10 +2,9 @@ import { Point2, Vec2 } from '../Vec2';
 import BezierJSWrapper from './BezierJSWrapper';
 import Rect2 from './Rect2';
 /**
- * A wrapper around `bezier-js`'s quadratic Bézier.
+ * Represents a 2D Bézier curve.
  *
- * This wrappper lazy-loads `bezier-js`'s Bézier and can perform some operations
- * without loading it at all (e.g. `normal`, `at`, and `approximateDistance`).
+ * **Note**: Many Bézier operations use `bezier-js`'s.
  */
 export declare class QuadraticBezier extends BezierJSWrapper {
     readonly p0: Point2;

package/dist/cjs/shapes/QuadraticBezier.js

@@ -9,10 +9,9 @@ const solveQuadratic_1 = __importDefault(require("../polynomial/solveQuadratic")
 const BezierJSWrapper_1 = __importDefault(require("./BezierJSWrapper"));
 const Rect2_1 = __importDefault(require("./Rect2"));
 /**
- * A wrapper around `bezier-js`'s quadratic Bézier.
+ * Represents a 2D Bézier curve.
  *
- * This wrappper lazy-loads `bezier-js`'s Bézier and can perform some operations
- * without loading it at all (e.g. `normal`, `at`, and `approximateDistance`).
+ * **Note**: Many Bézier operations use `bezier-js`'s.
  */
 class QuadraticBezier extends BezierJSWrapper_1.default {
     constructor(p0, p1, p2) {

package/dist/cjs/shapes/Rect2.d.ts

@@ -3,7 +3,7 @@ import Mat33 from '../Mat33';
 import { Point2, Vec2 } from '../Vec2';
 import Abstract2DShape from './Abstract2DShape';
 import Vec3 from '../Vec3';
-/** An object that can be converted to a Rect2. */
+/** An object that can be converted to a {@link Rect2}. */
 export interface RectTemplate {
     x: number;
     y: number;
@@ -12,6 +12,11 @@ export interface RectTemplate {
     width?: number;
     height?: number;
 }
+/**
+ * Represents a rectangle in 2D space, parallel to the XY axes.
+ *
+ * `invariant: w ≥ 0, h ≥ 0, immutable`
+ */
 export declare class Rect2 extends Abstract2DShape {
     readonly x: number;
     readonly y: number;

package/dist/cjs/shapes/Rect2.js

@@ -7,7 +7,11 @@ exports.Rect2 = void 0;
 const LineSegment2_1 = __importDefault(require("./LineSegment2"));
 const Vec2_1 = require("../Vec2");
 const Abstract2DShape_1 = __importDefault(require("./Abstract2DShape"));
-// invariant: w ≥ 0, h ≥ 0, immutable
+/**
+ * Represents a rectangle in 2D space, parallel to the XY axes.
+ *
+ * `invariant: w ≥ 0, h ≥ 0, immutable`
+ */
 class Rect2 extends Abstract2DShape_1.default {
     constructor(x, y, w, h) {
         super();

package/dist/cjs/utils/convexHull2Of.d.ts

@@ -0,0 +1,9 @@
+import { Point2 } from '../Vec2';
+/**
+ * Implements Gift Wrapping, in $O(nh)$. This algorithm is not the most efficient in the worst case.
+ *
+ * See https://en.wikipedia.org/wiki/Gift_wrapping_algorithm
+ * and https://www.cs.jhu.edu/~misha/Spring16/06.pdf
+ */
+declare const convexHull2Of: (points: Point2[]) => import("../Vec3").Vec3[];
+export default convexHull2Of;

package/dist/cjs/utils/convexHull2Of.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Vec2_1 = require("../Vec2");
+/**
+ * Implements Gift Wrapping, in $O(nh)$. This algorithm is not the most efficient in the worst case.
+ *
+ * See https://en.wikipedia.org/wiki/Gift_wrapping_algorithm
+ * and https://www.cs.jhu.edu/~misha/Spring16/06.pdf
+ */
+const convexHull2Of = (points) => {
+    if (points.length === 0) {
+        return [];
+    }
+    // 1. Start with a vertex on the hull
+    const lowestPoint = points.reduce((lowest, current) => current.y < lowest.y ? current : lowest, points[0]);
+    const vertices = [lowestPoint];
+    let toProcess = [...points.filter(p => !p.eq(lowestPoint))];
+    let lastBaseDirection = Vec2_1.Vec2.of(-1, 0);
+    // 2. Find the point with greatest angle from the vertex:
+    //
+    //  . .     .
+    //   . .   /  <- Notice that **all** other points are to the
+    //       /       **left** of the vector from the current
+    //    ./         vertex to the new point.
+    while (toProcess.length > 0) {
+        const lastVertex = vertices[vertices.length - 1];
+        let smallestDotProductSoFar = lastBaseDirection.dot(lowestPoint.minus(lastVertex).normalizedOrZero());
+        let furthestPointSoFar = lowestPoint;
+        for (const point of toProcess) {
+            // Maximizing the angle is the same as minimizing the dot product:
+            //              point.minus(lastVertex)
+            //             ^
+            //            /
+            //           /
+            //        ϑ /
+            //   <-----. lastBaseDirection
+            const currentDotProduct = lastBaseDirection.dot(point.minus(lastVertex).normalizedOrZero());
+            if (currentDotProduct <= smallestDotProductSoFar) {
+                furthestPointSoFar = point;
+                smallestDotProductSoFar = currentDotProduct;
+            }
+        }
+        toProcess = toProcess.filter(p => !p.eq(furthestPointSoFar));
+        const newBaseDirection = furthestPointSoFar.minus(lastVertex).normalized();
+        // If the last vertex is on the same edge as the current, there's no need to include
+        // the previous one.
+        if (Math.abs(newBaseDirection.dot(lastBaseDirection)) === 1 && vertices.length > 1) {
+            vertices.pop();
+        }
+        // Stoping condition: We've gone in a full circle.
+        if (furthestPointSoFar.eq(lowestPoint)) {
+            break;
+        }
+        else {
+            vertices.push(furthestPointSoFar);
+            lastBaseDirection = lastVertex.minus(furthestPointSoFar).normalized();
+        }
+    }
+    return vertices;
+};
+exports.default = convexHull2Of;

package/dist/cjs/utils/convexHull2Of.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/Mat33.mjs

@@ -334,7 +334,11 @@ export class Mat33 {
             return Mat33.identity;
         }
         const parseArguments = (argumentString) => {
-            return argumentString.split(/[, \t\n]+/g).map(argString => {
+            const parsed = argumentString.split(/[, \t\n]+/g).map(argString => {
+                // Handle trailing spaces/commands
+                if (argString.trim() === '') {
+                    return null;
+                }
                 let isPercentage = false;
                 if (argString.endsWith('%')) {
                     isPercentage = true;
@@ -355,6 +359,7 @@ export class Mat33 {
                 }
                 return argNumber;
             });
+            return parsed.filter(n => n !== null);
         };
         const keywordToAction = {
             matrix: (matrixData) => {

package/dist/mjs/Vec3.d.ts

@@ -134,7 +134,8 @@ export declare class Vec3 {
      * Returns a vector with each component acted on by `fn`.
      *
      * @example
-     * ```
+     * ```ts,runnable,console
+     * import { Vec3 } from '@js-draw/math';
      * console.log(Vec3.of(1, 2, 3).map(val => val + 1)); // → Vec(2, 3, 4)
      * ```
      */

package/dist/mjs/Vec3.mjs

@@ -203,7 +203,8 @@ export class Vec3 {
      * Returns a vector with each component acted on by `fn`.
      *
      * @example
-     * ```
+     * ```ts,runnable,console
+     * import { Vec3 } from '@js-draw/math';
      * console.log(Vec3.of(1, 2, 3).map(val => val + 1)); // → Vec(2, 3, 4)
      * ```
      */
@@ -227,12 +228,9 @@ export class Vec3 {
      * ```
      */
     eq(other, fuzz = 1e-10) {
-        for (let i = 0; i < 3; i++) {
-            if (Math.abs(other.at(i) - this.at(i)) > fuzz) {
-                return false;
-            }
-        }
-        return true;
+        return (Math.abs(other.x - this.x) <= fuzz
+            && Math.abs(other.y - this.y) <= fuzz
+            && Math.abs(other.z - this.z) <= fuzz);
     }
     toString() {
         return `Vec(${this.x}, ${this.y}, ${this.z})`;