@js-draw/math 1.0.0 → 1.2.0

package/src/shapes/BezierJSWrapper.ts

@@ -0,0 +1,93 @@
+import { Bezier } from 'bezier-js';
+import { Point2, Vec2 } from '../Vec2';
+import Abstract2DShape from './Abstract2DShape';
+import LineSegment2 from './LineSegment2';
+import Rect2 from './Rect2';
+
+/**
+ * A lazy-initializing wrapper around Bezier-js.
+ *
+ * Subclasses may override `at`, `derivativeAt`, and `normal` with functions
+ * that do not initialize a `bezier-js` `Bezier`.
+ *
+ * Do not use this class directly. It may be removed/replaced in a future release.
+ * @internal
+ */
+abstract class BezierJSWrapper extends Abstract2DShape {
+	#bezierJs: Bezier|null = null;
+
+	/** Returns the start, control points, and end point of this Bézier. */
+	public abstract getPoints(): Point2[];
+
+	protected getBezier() {
+		if (!this.#bezierJs) {
+			this.#bezierJs = new Bezier(this.getPoints().map(p => p.xy));
+		}
+		return this.#bezierJs;
+	}
+
+	public override signedDistance(point: Point2): number {
+		// .d: Distance
+		return this.getBezier().project(point.xy).d!;
+	}
+
+	/**
+	 * @returns the (more) exact distance from `point` to this.
+	 *
+	 * @see {@link approximateDistance}
+	 */
+	public override distance(point: Point2) {
+		// A Bézier curve has no interior, thus, signed distance is the same as distance.
+		return this.signedDistance(point);
+	}
+
+	/**
+	 * @returns the curve evaluated at `t`.
+	 */
+	public at(t: number): Point2 {
+		return Vec2.ofXY(this.getBezier().get(t));
+	}
+
+	public derivativeAt(t: number): Point2 {
+		return Vec2.ofXY(this.getBezier().derivative(t));
+	}
+
+	public normal(t: number): Vec2 {
+		return Vec2.ofXY(this.getBezier().normal(t));
+	}
+
+	public override getTightBoundingBox(): Rect2 {
+		const bbox = this.getBezier().bbox();
+		const width = bbox.x.max - bbox.x.min;
+		const height = bbox.y.max - bbox.y.min;
+
+		return new Rect2(bbox.x.min, bbox.y.min, width, height);
+	}
+
+	public override intersectsLineSegment(line: LineSegment2): Point2[] {
+		const bezier = this.getBezier();
+
+		const intersectionPoints = bezier.intersects(line).map(t => {
+			// We're using the .intersects(line) function, which is documented
+			// to always return numbers. However, to satisfy the type checker (and
+			// possibly improperly-defined types),
+			if (typeof t === 'string') {
+				t = parseFloat(t);
+			}
+
+			const point = Vec2.ofXY(bezier.get(t));
+
+			// Ensure that the intersection is on the line segment
+			if (point.minus(line.p1).magnitude() > line.length
+					|| point.minus(line.p2).magnitude() > line.length) {
+				return null;
+			}
+
+			return point;
+		}).filter(entry => entry !== null) as Point2[];
+
+		return intersectionPoints;
+	}
+}
+
+export default BezierJSWrapper;

package/src/shapes/CubicBezier.ts

@@ -0,0 +1,35 @@
+import { Point2 } from '../Vec2';
+import BezierJSWrapper from './BezierJSWrapper';
+import Rect2 from './Rect2';
+
+/**
+ * A wrapper around [`bezier-js`](https://github.com/Pomax/bezierjs)'s cubic Bezier.
+ */
+class CubicBezier extends BezierJSWrapper {
+	public constructor(
+		// Start point
+		public readonly p0: Point2,
+
+		// Control point 1
+		public readonly p1: Point2,
+
+		// Control point 2
+		public readonly p2: Point2,
+
+		// End point
+		public readonly p3: Point2,
+	) {
+		super();
+	}
+
+	public override getPoints() {
+		return [ this.p0, this.p1, this.p2, this.p3 ];
+	}
+
+	/** Returns an overestimate of this shape's bounding box. */
+	public override getLooseBoundingBox(): Rect2 {
+		return Rect2.bboxOf([ this.p0, this.p1, this.p2, this.p3 ]);
+	}
+}
+
+export default CubicBezier;

package/src/shapes/LineSegment2.test.ts

@@ -0,0 +1,99 @@
+import LineSegment2 from './LineSegment2';
+import { Vec2 } from '../Vec2';
+import Mat33 from '../Mat33';
+
+
+describe('Line2', () => {
+	it('x and y axes should intersect at (0, 0)', () => {
+		const xAxis = new LineSegment2(Vec2.of(-10, 0), Vec2.of(10, 0));
+		const yAxis = new LineSegment2(Vec2.of(0, -10), Vec2.of(0, 10));
+		expect(xAxis.intersection(yAxis)?.point).objEq(Vec2.zero);
+		expect(yAxis.intersection(xAxis)?.point).objEq(Vec2.zero);
+	});
+
+	it('y = -2x + 2 and y = 2x - 2 should intersect at (1,0)', () => {
+		// y = -4x + 2
+		const line1 = new LineSegment2(Vec2.of(0, 2), Vec2.of(1, -2));
+		// y = 4x - 2
+		const line2 = new LineSegment2(Vec2.of(0, -2), Vec2.of(1, 2));
+
+		expect(line1.intersection(line2)?.point).objEq(Vec2.of(0.5, 0));
+		expect(line2.intersection(line1)?.point).objEq(Vec2.of(0.5, 0));
+	});
+
+	it('line from (10, 10) to (-100, 10) should intersect with the y-axis at t = 10', () => {
+		const line1 = new LineSegment2(Vec2.of(10, 10), Vec2.of(-10, 10));
+		// y = 2x - 2
+		const line2 = new LineSegment2(Vec2.of(0, -2), Vec2.of(0, 200));
+
+		expect(line1.intersection(line2)?.point).objEq(Vec2.of(0, 10));
+
+		// t=10 implies 10 units along he line from (10, 10) to (-10, 10)
+		expect(line1.intersection(line2)?.t).toBe(10);
+
+		// Similarly, t = 12 implies 12 units above (0, -2) in the direction of (0, 200)
+		expect(line2.intersection(line1)?.t).toBe(12);
+	});
+
+	it('y=2 and y=0 should not intersect', () => {
+		const line1 = new LineSegment2(Vec2.of(-10, 2), Vec2.of(10, 2));
+		const line2 = new LineSegment2(Vec2.of(-10, 0), Vec2.of(10, 0));
+		expect(line1.intersection(line2)).toBeNull();
+		expect(line2.intersection(line1)).toBeNull();
+	});
+
+	it('x=2 and x=-1 should not intersect', () => {
+		const line1 = new LineSegment2(Vec2.of(2, -10), Vec2.of(2, 10));
+		const line2 = new LineSegment2(Vec2.of(-1, 10), Vec2.of(-1, -10));
+		expect(line1.intersection(line2)).toBeNull();
+		expect(line2.intersection(line1)).toBeNull();
+	});
+
+	it('Line from (0, 0) to (1, 0) should not intersect line from (1.1, 0) to (2, 0)', () => {
+		const line1 = new LineSegment2(Vec2.of(0, 0), Vec2.of(1, 0));
+		const line2 = new LineSegment2(Vec2.of(1.1, 0), Vec2.of(2, 0));
+		expect(line1.intersection(line2)).toBeNull();
+		expect(line2.intersection(line1)).toBeNull();
+	});
+
+	it('Line segment from (1, 1) to (3, 1) should have length 2', () => {
+		const segment = new LineSegment2(Vec2.of(1, 1), Vec2.of(3, 1));
+		expect(segment.length).toBe(2);
+	});
+
+	it('(769.612,221.037)->(770.387,224.962) should not intersect (763.359,223.667)->(763.5493, 223.667)', () => {
+		// Points taken from issue observed directly in editor
+		const p1 = Vec2.of(769.6126045442547, 221.037877485765);
+		const p2 = Vec2.of(770.3873954557453, 224.962122514235);
+		const p3 = Vec2.of( 763.3590010920082, 223.66723995850086);
+		const p4 = Vec2.of(763.5494167642871, 223.66723995850086);
+
+		const line1 = new LineSegment2(p1, p2);
+		const line2 = new LineSegment2(p3, p4);
+		expect(line1.intersection(line2)).toBeNull();
+		expect(line2.intersection(line1)).toBeNull();
+	});
+
+	it('Closest point to (0,0) on the line x = 1 should be (1,0)', () => {
+		const line = new LineSegment2(Vec2.of(1, 100), Vec2.of(1, -100));
+		expect(line.closestPointTo(Vec2.zero)).objEq(Vec2.of(1, 0));
+	});
+
+	it('Closest point from (-1,-2) to segment((1,1) -> (2,4)) should be (1,1)', () => {
+		const line = new LineSegment2(Vec2.of(1, 1), Vec2.of(2, 4));
+		expect(line.closestPointTo(Vec2.of(-1, -2))).objEq(Vec2.of(1, 1));
+	});
+
+	it('Closest point from (5,8) to segment((1,1) -> (2,4)) should be (2,4)', () => {
+		const line = new LineSegment2(Vec2.of(1, 1), Vec2.of(2, 4));
+		expect(line.closestPointTo(Vec2.of(5, 8))).objEq(Vec2.of(2, 4));
+	});
+
+	it('Should translate when translated by a translation matrix', () => {
+		const line = new LineSegment2(Vec2.of(-1, 1), Vec2.of(2, 100));
+		expect(line.transformedBy(Mat33.translation(Vec2.of(1, -2)))).toMatchObject({
+			p1: Vec2.of(0, -1),
+			p2: Vec2.of(3, 98),
+		});
+	});
+});

package/src/shapes/LineSegment2.ts

@@ -0,0 +1,232 @@
+import Mat33 from '../Mat33';
+import Rect2 from './Rect2';
+import { Vec2, Point2 } from '../Vec2';
+import Abstract2DShape from './Abstract2DShape';
+
+interface IntersectionResult {
+	point: Point2;
+	t: number;
+}
+
+/** Represents a line segment. A `LineSegment2` is immutable. */
+export class LineSegment2 extends Abstract2DShape {
+	// invariant: ||direction|| = 1
+
+	/**
+	 * The **unit** direction vector of this line segment, from
+	 * `point1` to `point2`.
+	 *
+	 * In other words, `direction` is `point2.minus(point1).normalized()`
+	 * (perhaps except when `point1` is equal to `point2`).
+	 */
+	public readonly direction: Vec2;
+
+	/** The distance between `point1` and `point2`. */
+	public readonly length: number;
+
+	/** The bounding box of this line segment. */
+	public readonly bbox;
+
+	/** Creates a new `LineSegment2` from its endpoints. */
+	public constructor(
+		private readonly point1: Point2,
+		private readonly point2: Point2
+	) {
+		super();
+
+		this.bbox = Rect2.bboxOf([point1, point2]);
+
+		this.direction = point2.minus(point1);
+		this.length = this.direction.magnitude();
+
+		// Normalize
+		if (this.length > 0) {
+			this.direction = this.direction.times(1 / this.length);
+		}
+	}
+
+	// Accessors to make LineSegment2 compatible with bezier-js's
+	// interface
+
+	/** Alias for `point1`. */
+	public get p1(): Point2 {
+		return this.point1;
+	}
+
+	/** Alias for `point2`. */
+	public get p2(): Point2 {
+		return this.point2;
+	}
+
+	/**
+	 * Gets a point a distance `t` along this line.
+	 *
+	 * @deprecated
+	 */
+	public get(t: number): Point2 {
+		return this.point1.plus(this.direction.times(t));
+	}
+
+	/**
+	 * Returns a point a fraction, `t`, along this line segment.
+	 * Thus, `segment.at(0)` returns `segment.p1` and `segment.at(1)` returns
+	 * `segment.p2`.
+	 *
+	 * `t` should be in `[0, 1]`.
+	 */
+	public at(t: number): Point2 {
+		return this.get(t * this.length);
+	}
+
+	public intersection(other: LineSegment2): IntersectionResult|null {
+		// We want x₁(t) = x₂(t) and y₁(t) = y₂(t)
+		// Observe that
+		// x = this.point1.x + this.direction.x · t₁
+		//   = other.point1.x + other.direction.x · t₂
+		// Thus,
+		//  t₁ = (x - this.point1.x) / this.direction.x
+		//     = (y - this.point1.y) / this.direction.y
+		// and
+		//  t₂ = (x - other.point1.x) / other.direction.x
+		// (and similarly for y)
+		//
+		// Letting o₁ₓ = this.point1.x, o₂ₓ = other.point1.x,
+		//         d₁ᵧ = this.direction.y, ...
+		//
+		// We can substitute these into the equations for y:
+		// y = o₁ᵧ + d₁ᵧ · (x - o₁ₓ) / d₁ₓ
+		//   = o₂ᵧ + d₂ᵧ · (x - o₂ₓ) / d₂ₓ
+		// ⇒ o₁ᵧ - o₂ᵧ = d₂ᵧ · (x - o₂ₓ) / d₂ₓ - d₁ᵧ · (x - o₁ₓ) / d₁ₓ
+		//            = (d₂ᵧ/d₂ₓ)(x) - (d₂ᵧ/d₂ₓ)(o₂ₓ) - (d₁ᵧ/d₁ₓ)(x) + (d₁ᵧ/d₁ₓ)(o₁ₓ)
+		//            = (x)(d₂ᵧ/d₂ₓ - d₁ᵧ/d₁ₓ) - (d₂ᵧ/d₂ₓ)(o₂ₓ) + (d₁ᵧ/d₁ₓ)(o₁ₓ)
+		// ⇒ (x)(d₂ᵧ/d₂ₓ - d₁ᵧ/d₁ₓ) = o₁ᵧ - o₂ᵧ + (d₂ᵧ/d₂ₓ)(o₂ₓ) - (d₁ᵧ/d₁ₓ)(o₁ₓ)
+		// ⇒ x = (o₁ᵧ - o₂ᵧ + (d₂ᵧ/d₂ₓ)(o₂ₓ) - (d₁ᵧ/d₁ₓ)(o₁ₓ))/(d₂ᵧ/d₂ₓ - d₁ᵧ/d₁ₓ)
+		//     = (d₁ₓd₂ₓ)(o₁ᵧ - o₂ᵧ + (d₂ᵧ/d₂ₓ)(o₂ₓ) - (d₁ᵧ/d₁ₓ)(o₁ₓ))/(d₂ᵧd₁ₓ - d₁ᵧd₂ₓ)
+		//     = ((o₁ᵧ - o₂ᵧ)((d₁ₓd₂ₓ)) + (d₂ᵧd₁ₓ)(o₂ₓ) - (d₁ᵧd₂ₓ)(o₁ₓ))/(d₂ᵧd₁ₓ - d₁ᵧd₂ₓ)
+		// ⇒ y = o₁ᵧ + d₁ᵧ · (x - o₁ₓ) / d₁ₓ = ...
+		let resultPoint, resultT;
+		if (this.direction.x === 0) {
+			// Vertical line: Where does the other have x = this.point1.x?
+			// x = o₁ₓ = o₂ₓ + d₂ₓ · (y - o₂ᵧ) / d₂ᵧ
+			// ⇒ (o₁ₓ - o₂ₓ)(d₂ᵧ/d₂ₓ) + o₂ᵧ = y
+
+			// Avoid division by zero
+			if (other.direction.x === 0 || this.direction.y === 0) {
+				return null;
+			}
+
+			const xIntersect = this.point1.x;
+			const yIntersect =
+				(this.point1.x - other.point1.x) * other.direction.y / other.direction.x + other.point1.y;
+			resultPoint = Vec2.of(xIntersect, yIntersect);
+			resultT = (yIntersect - this.point1.y) / this.direction.y;
+		} else {
+			// From above,
+			// x = ((o₁ᵧ - o₂ᵧ)(d₁ₓd₂ₓ) + (d₂ᵧd₁ₓ)(o₂ₓ) - (d₁ᵧd₂ₓ)(o₁ₓ))/(d₂ᵧd₁ₓ - d₁ᵧd₂ₓ)
+			const numerator = (
+				(this.point1.y - other.point1.y) * this.direction.x * other.direction.x
+				+ this.direction.x * other.direction.y * other.point1.x
+				- this.direction.y * other.direction.x * this.point1.x
+			);
+			const denominator = (
+				other.direction.y * this.direction.x
+				- this.direction.y * other.direction.x
+			);
+
+			// Avoid dividing by zero. It means there is no intersection
+			if (denominator === 0) {
+				return null;
+			}
+
+			const xIntersect = numerator / denominator;
+			const t1 = (xIntersect - this.point1.x) / this.direction.x;
+			const yIntersect = this.point1.y + this.direction.y * t1;
+			resultPoint = Vec2.of(xIntersect, yIntersect);
+			resultT = (xIntersect - this.point1.x) / this.direction.x;
+		}
+
+		// Ensure the result is in this/the other segment.
+		const resultToP1 = resultPoint.minus(this.point1).magnitude();
+		const resultToP2 = resultPoint.minus(this.point2).magnitude();
+		const resultToP3 = resultPoint.minus(other.point1).magnitude();
+		const resultToP4 = resultPoint.minus(other.point2).magnitude();
+		if (resultToP1 > this.length
+			|| resultToP2 > this.length
+			|| resultToP3 > other.length
+			|| resultToP4 > other.length) {
+			return null;
+		}
+
+		return {
+			point: resultPoint,
+			t: resultT,
+		};
+	}
+
+	public intersects(other: LineSegment2) {
+		return this.intersection(other) !== null;
+	}
+
+	/**
+	 * Returns the points at which this line segment intersects the
+	 * given line segment.
+	 *
+	 * Note that {@link intersects} returns *whether* this line segment intersects another
+	 * line segment. This method, by contrast, returns **the point** at which the intersection
+	 * occurs, if such a point exists.
+	 */
+	public override intersectsLineSegment(lineSegment: LineSegment2) {
+		const intersection = this.intersection(lineSegment);
+
+		if (intersection) {
+			return [ intersection.point ];
+		}
+		return [];
+	}
+
+	// Returns the closest point on this to [target]
+	public closestPointTo(target: Point2) {
+		// Distance from P1 along this' direction.
+		const projectedDistFromP1 = target.minus(this.p1).dot(this.direction);
+		const projectedDistFromP2 = this.length - projectedDistFromP1;
+
+		const projection = this.p1.plus(this.direction.times(projectedDistFromP1));
+
+		if (projectedDistFromP1 > 0 && projectedDistFromP1 < this.length) {
+			return projection;
+		}
+
+		if (Math.abs(projectedDistFromP2) < Math.abs(projectedDistFromP1)) {
+			return this.p2;
+		} else {
+			return this.p1;
+		}
+	}
+
+	/**
+	 * Returns the distance from this line segment to `target`.
+	 *
+	 * Because a line segment has no interior, this signed distance is equivalent to
+	 * the full distance between `target` and this line segment.
+	 */
+	public signedDistance(target: Point2) {
+		return this.closestPointTo(target).minus(target).magnitude();
+	}
+
+	/** Returns a copy of this line segment transformed by the given `affineTransfm`. */
+	public transformedBy(affineTransfm: Mat33): LineSegment2 {
+		return new LineSegment2(
+			affineTransfm.transformVec2(this.p1), affineTransfm.transformVec2(this.p2)
+		);
+	}
+
+	/** @inheritdoc */
+	public override getTightBoundingBox(): Rect2 {
+		return this.bbox;
+	}
+
+	public override toString() {
+		return `LineSegment(${this.p1.toString()}, ${this.p2.toString()})`;
+	}
+}
+export default LineSegment2;

package/src/shapes/Path.fromString.test.ts

@@ -0,0 +1,223 @@
+// Tests to ensure that Paths can be deserialized
+
+import Path, { PathCommandType } from './Path';
+import { Vec2 } from '../Vec2';
+
+describe('Path.fromString', () => {
+	it('should handle an empty path', () => {
+		const path = Path.fromString('');
+		expect(path.geometry.length).toBe(0);
+	});
+
+	it('should properly handle absolute moveTo commands', () => {
+		const path1 = Path.fromString('M0,0');
+		const path2 = Path.fromString('M 0 0');
+		const path3 = Path.fromString('M 1,1M 2,2 M 3,3');
+
+		expect(path1.parts.length).toBe(0);
+		expect(path1.startPoint).toMatchObject(Vec2.zero);
+
+		expect(path2.parts.length).toBe(0);
+		expect(path2.startPoint).toMatchObject(Vec2.zero);
+
+		expect(path3.parts).toMatchObject([
+			{
+				kind: PathCommandType.MoveTo,
+				point: Vec2.of(2, 2),
+			},
+			{
+				kind: PathCommandType.MoveTo,
+				point: Vec2.of(3,3),
+			},
+		]);
+		expect(path3.startPoint).toMatchObject(Vec2.of(1, 1));
+	});
+
+	it('should properly handle relative moveTo commands', () => {
+		const path = Path.fromString('m1,1  	m0,0 m   3,3');
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.MoveTo,
+				point: Vec2.of(1, 1),
+			},
+			{
+				kind: PathCommandType.MoveTo,
+				point: Vec2.of(4, 4),
+			},
+		]);
+		expect(path.startPoint).toMatchObject(Vec2.of(1, 1));
+	});
+
+	it('should handle lineTo commands', () => {
+		const path = Path.fromString('l1,2L-1,0l0.1,-1.0');
+		// l is a relative lineTo, but because there
+		// is no previous command, it should act like an
+		// absolute moveTo.
+		expect(path.startPoint).toMatchObject(Vec2.of(1, 2));
+
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-1, 0),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-0.9, -1.0),
+			},
+		]);
+	});
+
+	it('"z" should close strokes', () => {
+		const path1 = Path.fromString('m3,3 l1,2 l1,1 z');
+		const path2 = Path.fromString('m3,3 l1,2 l1,1 Z');
+
+		expect(path1.startPoint).toMatchObject(Vec2.of(3,3));
+		expect(path2.startPoint).toMatchObject(path1.startPoint);
+		expect(path1.parts).toMatchObject(path2.parts);
+		expect(path1.parts).toMatchObject([
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(4, 5),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(5, 6),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: path1.startPoint,
+			}
+		]);
+	});
+
+	it('should break compoents at -s', () => {
+		const path = Path.fromString('m1-1 L-1-1-3-4-5-6,5-1');
+		expect(path.parts.length).toBe(4);
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-1, -1),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-3, -4),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-5, -6),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(5, -1),
+			},
+		]);
+	});
+
+	it('should properly handle cubic Bézier curves', () => {
+		const path = Path.fromString('m1,1 c1,1 0-3 4 5 C1,1 0.1, 0.1 0, 0');
+		expect(path.parts.length).toBe(2);
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.CubicBezierTo,
+				controlPoint1: Vec2.of(2, 2),
+				controlPoint2: Vec2.of(1, -2),
+				endPoint: Vec2.of(5, 6),
+			},
+			{
+				kind: PathCommandType.CubicBezierTo,
+				controlPoint1: Vec2.of(1, 1),
+				controlPoint2: Vec2.of(0.1, 0.1),
+				endPoint: Vec2.zero,
+			}
+		]);
+	});
+
+	it('should handle quadratic Bézier curves', () => {
+		const path = Path.fromString(' Q1 1,2 3 q-1 -2,-3 -4 Q 1 2,3 4');
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(1, 1),
+				endPoint: Vec2.of(2, 3),
+			},
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(1, 1),
+				endPoint: Vec2.of(-1, -1),
+			},
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(1, 2),
+				endPoint: Vec2.of(3, 4),
+			},
+		]);
+		expect(path.startPoint).toMatchObject(Vec2.of(1, 1));
+	});
+
+	it('should correctly handle a command followed by multiple sets of arguments', () => {
+		// Commands followed by multiple sets of arguments, for example,
+		//  l 5,10 5,4 3,2,
+		// should be interpreted as multiple commands. Our example, is therefore equivalent to,
+		//  l 5,10 l 5,4 l 3,2
+
+		const path = Path.fromString(`
+			L5,10 1,1
+			 2,2 -3,-1
+			q 1,2 1,1
+			  -1,-1 -3,-4
+			h -4 -1
+			V 3 5 1
+		`);
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(1, 1),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(2, 2),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-3, -1),
+			},
+
+			// q 1,2 1,1    -1,-1 -3,-4
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(-2, 1),
+				endPoint: Vec2.of(-2, 0),
+			},
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(-3, -1),
+				endPoint: Vec2.of(-5, -4),
+			},
+
+			// h -4 -1
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-9, -4),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, -4),
+			},
+
+			// V 3 5 1
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 3),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 5),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 1),
+			},
+		]);
+		expect(path.startPoint).toMatchObject(Vec2.of(5, 10));
+	});
+});