js-draw 0.0.1

package/src/geometry/Path.test.ts

@@ -0,0 +1,96 @@
+import { Bezier } from 'bezier-js';
+import LineSegment2 from './LineSegment2';
+import Path, { PathCommandType } from './Path';
+import { Vec2 } from './Vec2';
+
+describe('Path', () => {
+	it('should instantiate Beziers from cubic and quatratic commands', () => {
+		const path = new Path(Vec2.zero, [
+			{
+				kind: PathCommandType.CubicBezierTo,
+				controlPoint1: Vec2.of(1, 1),
+				controlPoint2: Vec2.of(-1, -1),
+				endPoint: Vec2.of(3, 3),
+			},
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(1, 1),
+				endPoint: Vec2.of(0, 0),
+			},
+		]);
+
+		expect(path.geometry.length).toBe(2);
+
+		const firstItem = path.geometry[0];
+		const secondItem = path.geometry[1];
+		expect(firstItem).toBeInstanceOf(Bezier);
+		expect(secondItem).toBeInstanceOf(Bezier);
+
+		// Force TypeScript to do type narrowing.
+		if (!(firstItem instanceof Bezier) || !(secondItem instanceof Bezier)) {
+			throw new Error('Invalid state! .toBeInstanceOf should have caused test to fail!');
+		}
+
+		// Make sure the control points (and start/end points) match what was set
+		expect(firstItem.points).toMatchObject([
+			{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: -1, y: -1 }, { x: 3, y: 3 }
+		]);
+		expect(secondItem.points).toMatchObject([
+			{ x: 3, y: 3 }, { x: 1, y: 1 }, { x: 0, y: 0 },
+		]);
+	});
+
+	it('should create LineSegments from line commands', () => {
+		const lineStart = Vec2.zero;
+		const lineEnd = Vec2.of(100, 100);
+
+		const path = new Path(lineStart, [
+			{
+				kind: PathCommandType.LineTo,
+				point: lineEnd,
+			},
+		]);
+
+		expect(path.geometry.length).toBe(1);
+		expect(path.geometry[0]).toBeInstanceOf(LineSegment2);
+		expect(path.geometry[0]).toMatchObject(
+			new LineSegment2(lineStart, lineEnd)
+		);
+	});
+
+	it('should give all intersections for a path made up of lines', () => {
+		const lineStart = Vec2.of(100, 100);
+		const path = new Path(lineStart, [
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-100, 100),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(0, 0),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(100, -100),
+			},
+		]);
+
+		const intersections = path.intersection(
+			new LineSegment2(Vec2.of(-50, 200), Vec2.of(-50, -200))
+		);
+
+		// Should only have intersections in quadrants II and III.
+		expect(intersections.length).toBe(2);
+
+		// First intersection should be with the first curve
+		const firstIntersection = intersections[0];
+		expect(firstIntersection.point.xy).toMatchObject({
+			x: -50,
+			y: 100,
+		});
+		expect(firstIntersection.curve.get(firstIntersection.parameterValue)).toMatchObject({
+			x: -50,
+			y: 100,
+		});
+	});
+});

package/src/geometry/Path.toString.test.ts

@@ -0,0 +1,31 @@
+import Path, { PathCommandType } from './Path';
+import { Vec2 } from './Vec2';
+
+
+describe('Path.toString', () => {
+	it('a single-point path should produce a move-to command', () => {
+		const path = new Path(Vec2.of(0, 0), []);
+		expect(path.toString()).toBe('M0,0');
+	});
+
+	it('should convert lineTo commands to L SVG commands', () => {
+		const path = new Path(Vec2.of(0.1, 0.2), [
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(0.3, 0.4),
+			},
+		]);
+		expect(path.toString()).toBe('M0.1,0.2L0.3,0.4');
+	});
+
+	it('should fix rounding errors', () => {
+		const path = new Path(Vec2.of(0.100001, 0.199999), [
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(9999, -10.999999995),
+				endPoint: Vec2.of(0.000300001, 1.400002),
+			},
+		]);
+		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4');
+	});
+});

package/src/geometry/Path.ts

@@ -0,0 +1,456 @@
+import { Bezier } from 'bezier-js';
+import { RenderingStyle, RenderablePathSpec } from '../rendering/AbstractRenderer';
+import LineSegment2 from './LineSegment2';
+import Mat33 from './Mat33';
+import Rect2 from './Rect2';
+import { Point2, Vec2 } from './Vec2';
+
+export enum PathCommandType {
+	LineTo,
+	MoveTo,
+	CubicBezierTo,
+	QuadraticBezierTo,
+}
+
+export interface CubicBezierPathCommand {
+	kind: PathCommandType.CubicBezierTo;
+	controlPoint1: Point2;
+	controlPoint2: Point2;
+	endPoint: Point2;
+}
+
+export interface QuadraticBezierPathCommand {
+	kind: PathCommandType.QuadraticBezierTo;
+	controlPoint: Point2;
+	endPoint: Point2;
+}
+
+export interface LinePathCommand {
+	kind: PathCommandType.LineTo;
+	point: Point2;
+}
+
+export interface MoveToPathCommand {
+	kind: PathCommandType.MoveTo;
+	point: Point2;
+}
+
+export type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
+
+interface IntersectionResult {
+	curve: LineSegment2|Bezier;
+	parameterValue: number;
+	point: Point2;
+}
+
+type GeometryArrayType = Array<LineSegment2|Bezier>;
+export default class Path {
+	private cachedGeometry: GeometryArrayType|null;
+	public readonly bbox: Rect2;
+
+	public constructor(public readonly startPoint: Point2, public readonly parts: PathCommand[]) {
+		this.cachedGeometry = null;
+
+		// Initial bounding box contains one point: the start point.
+		this.bbox = Rect2.bboxOf([startPoint]);
+
+		// Convert into a representation of the geometry (cache for faster intersection
+		// calculation)
+		for (const part of parts) {
+			this.bbox = this.bbox.union(Path.computeBBoxForSegment(startPoint, part));
+		}
+	}
+
+	// Lazy-loads and returns this path's geometry
+	public get geometry(): Array<LineSegment2|Bezier> {
+		if (this.cachedGeometry) {
+			return this.cachedGeometry;
+		}
+
+		let startPoint = this.startPoint;
+		const geometry: GeometryArrayType = [];
+
+		for (const part of this.parts) {
+			switch (part.kind) {
+			case PathCommandType.CubicBezierTo:
+				geometry.push(
+					new Bezier(
+						startPoint.xy, part.controlPoint1.xy, part.controlPoint2.xy, part.endPoint.xy
+					)
+				);
+				startPoint = part.endPoint;
+				break;
+			case PathCommandType.QuadraticBezierTo:
+				geometry.push(
+					new Bezier(
+						startPoint.xy, part.controlPoint.xy, part.endPoint.xy
+					)
+				);
+				startPoint = part.endPoint;
+				break;
+			case PathCommandType.LineTo:
+				geometry.push(
+					new LineSegment2(startPoint, part.point)
+				);
+				startPoint = part.point;
+				break;
+			case PathCommandType.MoveTo:
+				startPoint = part.point;
+				break;
+			}
+		}
+
+		this.cachedGeometry = geometry;
+		return this.cachedGeometry;
+	}
+
+	public static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2 {
+		const points = [startPoint];
+		let exhaustivenessCheck: never;
+		switch (part.kind) {
+		case PathCommandType.MoveTo:
+		case PathCommandType.LineTo:
+			points.push(part.point);
+			break;
+		case PathCommandType.CubicBezierTo:
+			points.push(part.controlPoint1, part.controlPoint2, part.endPoint);
+			break;
+		case PathCommandType.QuadraticBezierTo:
+			points.push(part.controlPoint, part.endPoint);
+			break;
+		default:
+			exhaustivenessCheck = part;
+			return exhaustivenessCheck;
+		}
+
+		return Rect2.bboxOf(points);
+	}
+
+	public intersection(line: LineSegment2): IntersectionResult[] {
+		const result: IntersectionResult[] = [];
+		for (const part of this.geometry) {
+			if (part instanceof LineSegment2) {
+				const intersection = part.intersection(line);
+
+				if (intersection) {
+					result.push({
+						curve: part,
+						parameterValue: intersection.t,
+						point: intersection.point,
+					});
+				}
+			} else {
+				const intersectionPoints = part.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(part.get(t));
+
+					// Ensure that the intersection is on the line
+					if (point.minus(line.p1).magnitude() > line.length
+							|| point.minus(line.p2).magnitude() > line.length) {
+						return null;
+					}
+
+					return {
+						point,
+						parameterValue: t,
+						curve: part,
+					};
+				}).filter(entry => entry !== null) as IntersectionResult[];
+				result.push(...intersectionPoints);
+			}
+		}
+
+		return result;
+	}
+
+	public transformedBy(affineTransfm: Mat33): Path {
+		const startPoint = affineTransfm.transformVec2(this.startPoint);
+		const newParts: PathCommand[] = [];
+
+		let exhaustivenessCheck: never;
+		for (const part of this.parts) {
+			switch (part.kind) {
+			case PathCommandType.MoveTo:
+			case PathCommandType.LineTo:
+				newParts.push({
+					kind: part.kind,
+					point: affineTransfm.transformVec2(part.point),
+				});
+				break;
+			case PathCommandType.CubicBezierTo:
+				newParts.push({
+					kind: part.kind,
+					controlPoint1: affineTransfm.transformVec2(part.controlPoint1),
+					controlPoint2: affineTransfm.transformVec2(part.controlPoint2),
+					endPoint: affineTransfm.transformVec2(part.endPoint),
+				});
+				break;
+			case PathCommandType.QuadraticBezierTo:
+				newParts.push({
+					kind: part.kind,
+					controlPoint: affineTransfm.transformVec2(part.controlPoint),
+					endPoint: affineTransfm.transformVec2(part.endPoint),
+				});
+				break;
+			default:
+				exhaustivenessCheck = part;
+				return exhaustivenessCheck;
+			}
+		}
+
+		return new Path(startPoint, newParts);
+	}
+
+	// Creates a new path by joining [other] to the end of this path
+	public union(other: Path|null): Path {
+		if (!other) {
+			return this;
+		}
+
+		return new Path(this.startPoint, [
+			...this.parts,
+			{
+				kind: PathCommandType.MoveTo,
+				point: other.startPoint,
+			},
+			...other.parts,
+		]);
+	}
+
+	public static fromRenderable(renderable: RenderablePathSpec): Path {
+		return new Path(renderable.startPoint, renderable.commands);
+	}
+
+	public toRenderable(fill: RenderingStyle): RenderablePathSpec {
+		return {
+			startPoint: this.startPoint,
+			style: fill,
+			commands: this.parts,
+		};
+	}
+
+	public toString(): string {
+		return Path.toString(this.startPoint, this.parts);
+	}
+
+	public static toString(startPoint: Point2, parts: PathCommand[]): string {
+		const result: string[] = [];
+
+		const toRoundedString = (num: number): string => {
+			// Try to remove rounding errors. If the number ends in at least three/four zeroes
+			// (or nines) just one or two digits, it's probably a rounding error.
+			const fixRoundingUpExp = /^([-]?\d*\.?\d*[1-9.])0{4,}\d$/;
+			const hasRoundingDownExp = /^([-]?)(\d*)\.(\d*9{4,}\d)$/;
+
+			let text = num.toString();
+			if (text.indexOf('.') === -1) {
+				return text;
+			}
+
+			const roundingDownMatch = hasRoundingDownExp.exec(text);
+			if (roundingDownMatch) {
+				const negativeSign = roundingDownMatch[1];
+				const lastDigit = parseInt(text.charAt(text.length - 1), 10);
+				const postDecimal = parseInt(roundingDownMatch[3], 10);
+				const preDecimal = parseInt(roundingDownMatch[2], 10);
+
+				let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
+				let carry = 0;
+				if (newPostDecimal.length > postDecimal.toString().length) {
+					// Left-shift
+					newPostDecimal = newPostDecimal.substring(1);
+					carry = 1;
+				}
+				text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
+			}
+
+			text = text.replace(fixRoundingUpExp, '$1');
+			// Remove trailing period (if it exists)
+			return text.replace(/[.]$/, '');
+		};
+
+		const addCommand = (command: string, ...points: Point2[]) => {
+			const parts: string[] = [];
+			for (const point of points) {
+				const xComponent = toRoundedString(point.x);
+				const yComponent = toRoundedString(point.y);
+				parts.push(`${xComponent},${yComponent}`);
+			}
+			result.push(`${command}${parts.join(' ')}`);
+		};
+
+		addCommand('M', startPoint);
+		let exhaustivenessCheck: never;
+		for (const part of parts) {
+			switch (part.kind) {
+			case PathCommandType.MoveTo:
+				addCommand('M', part.point);
+				break;
+			case PathCommandType.LineTo:
+				addCommand('L', part.point);
+				break;
+			case PathCommandType.CubicBezierTo:
+				addCommand('C', part.controlPoint1, part.controlPoint2, part.endPoint);
+				break;
+			case PathCommandType.QuadraticBezierTo:
+				addCommand('Q', part.controlPoint, part.endPoint);
+				break;
+			default:
+				exhaustivenessCheck = part;
+				return exhaustivenessCheck;
+			}
+		}
+
+		return result.join('');
+	}
+
+	// Create a Path from a SVG path specification.
+	// TODO: Support a larger subset of SVG paths.
+	// TODO: Support s,t shorthands.
+	public static fromString(pathString: string): Path {
+		// See the MDN reference:
+		// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+		// and
+		// https://www.w3.org/TR/SVG2/paths.html
+
+		// Remove linebreaks
+		pathString = pathString.split('\n').join(' ');
+
+		let lastPos: Point2 = Vec2.zero;
+		let firstPos: Point2|null = null;
+		const commands: PathCommand[] = [];
+
+
+		const moveTo = (point: Point2) => {
+			commands.push({
+				kind: PathCommandType.MoveTo,
+				point,
+			});
+		};
+		const lineTo = (point: Point2) => {
+			commands.push({
+				kind: PathCommandType.LineTo,
+				point,
+			});
+		};
+		const cubicBezierTo = (cp1: Point2, cp2: Point2, end: Point2) => {
+			commands.push({
+				kind: PathCommandType.CubicBezierTo,
+				controlPoint1: cp1,
+				controlPoint2: cp2,
+				endPoint: end,
+			});
+		};
+		const quadraticBeierTo = (controlPoint: Point2, endPoint: Point2) => {
+			commands.push({
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint,
+				endPoint,
+			});
+		};
+
+		// Each command: Command character followed by anything that isn't a command character
+		const commandExp = /([MmZzLlHhVvCcSsQqTtAa])\s*([^a-zA-Z]*)/g;
+		let current;
+		while ((current = commandExp.exec(pathString)) !== null) {
+			const argParts = current[2].trim().split(/[^0-9.-]/).filter(
+				part => part.length > 0
+			);
+			const numericArgs = argParts.map(arg => parseFloat(arg));
+
+			const commandChar = current[1];
+			const uppercaseCommand = commandChar !== commandChar.toLowerCase();
+			const args = numericArgs.reduce((
+				accumulator: Point2[], current, index, parts
+			): Point2[] => {
+				if (index % 2 !== 0) {
+					const currentAsFloat = current;
+					const prevAsFloat = parts[index - 1];
+					return accumulator.concat(Vec2.of(prevAsFloat, currentAsFloat));
+				} else {
+					return accumulator;
+				}
+			}, []).map((coordinate: Vec2): Point2 => {
+				// Lowercase commands are relative, uppercase commands use absolute
+				// positioning
+				if (uppercaseCommand) {
+					lastPos = coordinate;
+					return coordinate;
+				} else {
+					lastPos = lastPos.plus(coordinate);
+					return lastPos;
+				}
+			});
+
+			let expectedPointArgCount;
+
+			switch (commandChar.toLowerCase()) {
+			case 'm':
+				expectedPointArgCount = 1;
+				moveTo(args[0]);
+				break;
+			case 'l':
+				expectedPointArgCount = 1;
+				lineTo(args[0]);
+				break;
+			case 'z':
+				expectedPointArgCount = 0;
+				// firstPos can be null if the stroke data is just 'z'.
+				if (firstPos) {
+					lineTo(firstPos);
+				}
+				break;
+			case 'c':
+				expectedPointArgCount = 3;
+				cubicBezierTo(args[0], args[1], args[2]);
+				break;
+			case 'q':
+				expectedPointArgCount = 2;
+				quadraticBeierTo(args[0], args[1]);
+				break;
+
+			// Horizontal line
+			case 'h':
+				expectedPointArgCount = 0;
+
+				if (uppercaseCommand) {
+					lineTo(Vec2.of(numericArgs[0], lastPos.y));
+				} else {
+					lineTo(lastPos.plus(Vec2.of(numericArgs[0], 0)));
+				}
+				break;
+
+			// Vertical line
+			case 'v':
+				expectedPointArgCount = 0;
+
+				if (uppercaseCommand) {
+					lineTo(Vec2.of(lastPos.x, numericArgs[1]));
+				} else {
+					lineTo(lastPos.plus(Vec2.of(0, numericArgs[1])));
+				}
+				break;
+			default:
+				throw new Error(`Unknown path command ${commandChar}`);
+			}
+
+			if (args.length !== expectedPointArgCount) {
+				throw new Error(`
+					Incorrect number of arguments: got ${JSON.stringify(args)} with a length of ${args.length} ≠ ${expectedPointArgCount}.
+				`.trim());
+			}
+
+			if (args.length > 0) {
+				firstPos ??= args[0];
+			}
+		}
+
+		return new Path(firstPos ?? Vec2.zero, commands);
+	}
+}

package/src/geometry/Rect2.test.ts

@@ -0,0 +1,121 @@
+
+import Rect2 from './Rect2';
+import { Vec2 } from './Vec2';
+import loadExpectExtensions from '../testing/loadExpectExtensions';
+import Mat33 from './Mat33';
+
+loadExpectExtensions();
+
+describe('Rect2 tests', () => {
+	it('Positive width, height', () => {
+		expect(new Rect2(-1, -2, -3, 4)).objEq(new Rect2(-4, -2, 3, 4));
+		expect(new Rect2(0, 0, 0, 0).size).objEq(Vec2.zero);
+		expect(Rect2.fromCorners(
+			Vec2.of(-3, -3),
+			Vec2.of(-1, -1)
+		)).objEq(new Rect2(
+			-3, -3,
+			2, 2
+		));
+	});
+
+	it('Bounding box', () => {
+		expect(Rect2.bboxOf([
+			Vec2.zero,
+		])).objEq(Rect2.empty);
+
+		expect(Rect2.bboxOf([
+			Vec2.of(-1, -1),
+			Vec2.of(1, 2),
+			Vec2.of(3, 4),
+			Vec2.of(1, -4),
+		])).objEq(new Rect2(
+			-1, -4,
+			4, 8
+		));
+
+		expect(Rect2.bboxOf([
+			Vec2.zero,
+		], 10)).objEq(new Rect2(
+			-10, -10,
+			20, 20
+		));
+	});
+
+	it('"union"ing', () => {
+		expect(new Rect2(0, 0, 1, 1).union(new Rect2(1, 1, 2, 2))).objEq(
+			new Rect2(0, 0, 3, 3)
+		);
+		expect(Rect2.empty.union(Rect2.empty)).objEq(Rect2.empty);
+	});
+
+	it('contains', () => {
+		expect(new Rect2(-1, -1, 2, 2).containsPoint(Vec2.zero)).toBe(true);
+		expect(new Rect2(-1, -1, 0, 0).containsPoint(Vec2.zero)).toBe(false);
+		expect(new Rect2(1, 2, 3, 4).containsRect(Rect2.empty)).toBe(false);
+		expect(new Rect2(1, 2, 3, 4).containsRect(new Rect2(1, 2, 1, 2))).toBe(true);
+		expect(new Rect2(-2, -2, 4, 4).containsRect(new Rect2(-1, 0, 1, 1))).toBe(true);
+		expect(new Rect2(-2, -2, 4, 4).containsRect(new Rect2(-1, 0, 10, 1))).toBe(false);
+	});
+
+	it('a rectangle should contain itself', () => {
+		const rect = new Rect2(1 / 3, 1 / 4, 1 / 5, 1 / 6);
+		expect(rect.containsRect(rect)).toBe(true);
+	});
+
+	it('empty rect should not contain a larger rect', () => {
+		expect(Rect2.empty.containsRect(new Rect2(-1, -1, 3, 3))).toBe(false);
+	});
+
+	it('Intersection testing', () => {
+		expect(new Rect2(-1, -1, 2, 2).intersects(Rect2.empty)).toBe(true);
+		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0, 0, 1, 1))).toBe(true);
+		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0, 0, 10, 10))).toBe(true);
+		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(3, 3, 10, 10))).toBe(false);
+	});
+
+	it('Computing intersections', () => {
+		expect(new Rect2(-1, -1, 2, 2).intersection(Rect2.empty)).objEq(Rect2.empty);
+		expect(new Rect2(-1, -1, 2, 2).intersection(new Rect2(0, 0, 3, 3))).objEq(
+			new Rect2(0, 0, 1, 1)
+		);
+		expect(new Rect2(-2, 0, 1, 2).intersection(new Rect2(-3, 0, 2, 2))).objEq(
+			new Rect2(-2, 0, 1, 2)
+		);
+		expect(new Rect2(-1, -1, 2, 2).intersection(new Rect2(3, 3, 10, 10))).toBe(null);
+	});
+
+	it('A transformed bounding box', () => {
+		const rotationMat = Mat33.zRotation(Math.PI / 4);
+		const rect = Rect2.unitSquare.translatedBy(Vec2.of(-0.5, -0.5));
+		const transformedBBox = rect.transformedBoundingBox(rotationMat);
+		expect(transformedBBox.containsPoint(Vec2.of(0.5, 0.5)));
+		expect(transformedBBox.containsRect(rect)).toBe(true);
+	});
+
+	describe('Grown to include a point', () => {
+		it('Growing an empty rectange to include (1, 0)', () => {
+			const originalRect = Rect2.empty;
+			const grownRect = originalRect.grownToPoint(Vec2.unitX);
+			expect(grownRect).objEq(new Rect2(0, 0, 1, 0));
+		});
+
+		it('Growing the unit rectangle to include (-5, 1), with a margin', () => {
+			const originalRect = Rect2.unitSquare;
+			const grownRect = originalRect.grownToPoint(Vec2.of(-5, 1), 4);
+			expect(grownRect).objEq(new Rect2(-9, -3, 10, 8));
+		});
+
+		it('Growing to include a point just above', () => {
+			const original = Rect2.unitSquare;
+			const grown = original.grownToPoint(Vec2.of(-1, -1));
+			expect(grown).objEq(new Rect2(-1, -1, 2, 2));
+		});
+
+		it('Growing to include a point just below', () => {
+			const original = Rect2.unitSquare;
+			const grown = original.grownToPoint(Vec2.of(2, 2));
+			expect(grown).objEq(new Rect2(0, 0, 2, 2));
+		});
+	});
+});