js-draw 0.3.2 → 0.4.1

package/src/components/builders/FreehandLineBuilder.ts

@@ -173,7 +173,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	}
 
 	public build(): Stroke {
-		if (this.lastPoint) {
+		if (this.lastPoint && (this.lowerSegments.length === 0 || this.approxCurrentCurveLength() > this.curveStartWidth * 2)) {
 			this.finalizeCurrentCurve();
 		}
 		return this.previewStroke()!;
@@ -189,6 +189,19 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		return Viewport.roundPoint(point, minFit);
 	}
 
+	// Returns the distance between the start, control, and end points of the curve.
+	private approxCurrentCurveLength() {
+		if (!this.currentCurve) {
+			return 0;
+		}
+		const startPt = Vec2.ofXY(this.currentCurve.points[0]);
+		const controlPt = Vec2.ofXY(this.currentCurve.points[1]);
+		const endPt = Vec2.ofXY(this.currentCurve.points[2]);
+		const toControlDist = startPt.minus(controlPt).length();
+		const toEndDist = endPt.minus(controlPt).length();
+		return toControlDist + toEndDist;
+	}
+
 	private finalizeCurrentCurve() {
 		// Case where no points have been added
 		if (!this.currentCurve) {
@@ -285,10 +298,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		startVec = startVec.times(this.curveStartWidth / 2);
 		endVec = endVec.times(this.curveEndWidth / 2);
 
-		if (isNaN(startVec.magnitude())) {
-			// TODO: This can happen when events are too close together. Find out why and
-			// 		 fix.
-			console.error('startVec is NaN', startVec, endVec, this.currentCurve);
+		if (!isFinite(startVec.magnitude())) {
+			console.error('Warning: startVec is NaN or ∞', startVec, endVec, this.currentCurve);
 			startVec = endVec;
 		}
 
@@ -307,39 +318,22 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		}
 
 		const halfVecT = projectionT;
-		let halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
+		const halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
 			.normalized().times(
 				this.curveStartWidth / 2 * halfVecT
 				+ this.curveEndWidth / 2 * (1 - halfVecT)
 			);
 
-		// Computes a boundary curve. [direction] should be either +1 or -1 (determines the side
-		// of the center curve to place the boundary).
-		const computeBoundaryCurve = (direction: number, halfVec: Vec2) => {
-			return new Bezier(
-				startPt.plus(startVec.times(direction)),
-				controlPoint.plus(halfVec.times(direction)),
-				endPt.plus(endVec.times(direction)),
-			);
-		};
-
-		const boundariesIntersect = () => {
-			const upperBoundary = computeBoundaryCurve(1, halfVec);
-			const lowerBoundary = computeBoundaryCurve(-1, halfVec);
-			return upperBoundary.intersects(lowerBoundary).length > 0;
-		};
-
-		// If the boundaries have intersections, increasing the half vector's length could fix this.
-		if (boundariesIntersect()) {
-			halfVec = halfVec.times(1.1);
-		}
-
 		// Each starts at startPt ± startVec
+		const lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
+		const lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
+		const upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
+		const upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
 
 		const lowerCurve: QuadraticBezierPathCommand = {
 			kind: PathCommandType.QuadraticBezierTo,
-			controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
-			endPoint: this.roundPoint(endPt.plus(endVec)),
+			controlPoint: lowerCurveControlPoint,
+			endPoint: lowerCurveEndPoint,
 		};
 
 		// From the end of the upperCurve to the start of the lowerCurve:
@@ -351,12 +345,12 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		// From the end of lowerCurve to the start of upperCurve:
 		const lowerToUpperConnector: LinePathCommand = {
 			kind: PathCommandType.LineTo,
-			point: this.roundPoint(endPt.minus(endVec))
+			point: upperCurveStartPoint,
 		};
 
 		const upperCurve: QuadraticBezierPathCommand = {
 			kind: PathCommandType.QuadraticBezierTo,
-			controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
+			controlPoint: upperCurveControlPoint,
 			endPoint: this.roundPoint(startPt.minus(startVec)),
 		};
 
@@ -374,7 +368,6 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			const fuzzEq = 1e-10;
 			const deltaTime = newPoint.time - this.lastPoint.time;
 			if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
-				console.warn('Discarding identical point');
 				return;
 			} else if (isNaN(newPoint.pos.magnitude())) {
 				console.warn('Discarding NaN point.', newPoint);
@@ -433,23 +426,23 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		let exitingVec = this.computeExitingVec();
 
 		// Find the intersection between the entering vector and the exiting vector
-		const maxRelativeLength = 2;
+		const maxRelativeLength = 3;
 		const segmentStart = this.buffer[0];
 		const segmentEnd = newPoint.pos;
 		const startEndDist = segmentEnd.minus(segmentStart).magnitude();
 		const maxControlPointDist = maxRelativeLength * startEndDist;
 
 		// Exit in cases where we would divide by zero
-		if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || isNaN(exitingVec.magnitude())) {
+		if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
 			return;
 		}
 
-		console.assert(!isNaN(enteringVec.magnitude()));
+		console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
 
 		enteringVec = enteringVec.normalized();
 		exitingVec = exitingVec.normalized();
 
-		console.assert(!isNaN(enteringVec.magnitude()));
+		console.assert(isFinite(enteringVec.magnitude()), 'Normalized enteringVec has NaN or ∞ magnitude!');
 
 		const lineFromStart = new LineSegment2(
 			segmentStart,
@@ -462,18 +455,20 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		const intersection = lineFromEnd.intersection(lineFromStart);
 
 		// Position the control point at this intersection
-		let controlPoint: Point2;
+		let controlPoint: Point2|null = null;
 		if (intersection) {
 			controlPoint = intersection.point;
-		} else {
+		}
+
+		// No intersection or the intersection is one of the end points?
+		if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
 			// Position the control point closer to the first -- the connecting
 			// segment will be roughly a line.
 			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
 		}
 
-		if (isNaN(controlPoint.magnitude()) || isNaN(segmentStart.magnitude())) {
-			console.error('controlPoint is NaN', intersection, 'Start:', segmentStart, 'End:', segmentEnd, 'in:', enteringVec, 'out:', exitingVec);
-		}
+		console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
+		console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
 
 		const prevCurve = this.currentCurve;
 		this.currentCurve = new Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
@@ -502,8 +497,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			return true;
 		};
 
-		const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
-		if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 3) {
+		if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth) {
 			if (!curveMatchesPoints(this.currentCurve)) {
 				// Use a curve that better fits the points
 				this.currentCurve = prevCurve;

package/src/language/assertions.ts

@@ -0,0 +1,6 @@
+
+// Compile-time assertion that a branch of code is unreachable.
+// See https://stackoverflow.com/a/39419171/17055750
+export const assertUnreachable = (key: never): never => {
+	throw new Error(`Should be unreachable. Key: ${key}.`);
+};

package/src/math/LineSegment2.test.ts

@@ -1,9 +1,7 @@
 import LineSegment2 from './LineSegment2';
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import { Vec2 } from './Vec2';
 import Mat33 from './Mat33';
 
-loadExpectExtensions();
 
 describe('Line2', () => {
 	it('x and y axes should intersect at (0, 0)', () => {
@@ -14,13 +12,13 @@ describe('Line2', () => {
 	});
 
 	it('y = -2x + 2 and y = 2x - 2 should intersect at (1,0)', () => {
-		// y = -2x + 2
+		// y = -4x + 2
 		const line1 = new LineSegment2(Vec2.of(0, 2), Vec2.of(1, -2));
-		// y = 2x - 2
+		// y = 4x - 2
 		const line2 = new LineSegment2(Vec2.of(0, -2), Vec2.of(1, 2));
 
-		expect(line1.intersection(line2)?.point).objEq(Vec2.of(1, 0));
-		expect(line2.intersection(line1)?.point).objEq(Vec2.of(1, 0));
+		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', () => {
@@ -81,14 +79,14 @@ describe('Line2', () => {
 		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)', () => {
+	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));
+		expect(line.closestPointTo(Vec2.of(-1, -2))).objEq(Vec2.of(1, 1));
 	});
 
-	it('Closest point from (5,2) to segment((1,1) -> (2,4)) should be (2,4)', () => {
+	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, 2))).objEq(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', () => {

package/src/math/Mat33.test.ts

@@ -1,9 +1,7 @@
 import Mat33 from './Mat33';
 import { Vec2 } from './Vec2';
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import Vec3 from './Vec3';
 
-loadExpectExtensions();
 
 describe('Mat33 tests', () => {
 	it('equality', () => {
@@ -142,6 +140,20 @@ describe('Mat33 tests', () => {
 		).objEq(Vec2.unitX, fuzz);
 	});
 
+	it('should correctly apply a mapping to all components', () => {
+		expect(
+			new Mat33(
+				1, 2, 3,
+				4, 5, 6,
+				7, 8, 9,
+			).mapEntries(component => component - 1)
+		).toMatchObject(new Mat33(
+			0, 1, 2,
+			3, 4, 5,
+			6, 7, 8,
+		));
+	});
+
 	it('should convert CSS matrix(...) strings to matricies', () => {
 		// From MDN:
 		// 		⎡ a c e ⎤

package/src/math/Mat33.ts

@@ -1,6 +1,12 @@
 import { Point2, Vec2 } from './Vec2';
 import Vec3 from './Vec3';
 
+export type Mat33Array = [
+	number, number, number,
+	number, number, number,
+	number, number, number,
+];
+
 /**
  * Represents a three dimensional linear transformation or
  * a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
@@ -239,7 +245,7 @@ export default class Mat33 {
 	 * ...
 	 * ```
 	 */
-	public toArray(): number[] {
+	public toArray(): Mat33Array {
 		return [
 			this.a1, this.a2, this.a3,
 			this.b1, this.b2, this.b3,
@@ -247,6 +253,27 @@ export default class Mat33 {
 		];
 	}
 
+	/**
+	 * @example
+	 * ```
+	 * new Mat33(
+	 *  1, 2, 3,
+	 *  4, 5, 6,
+	 *  7, 8, 9,
+	 * ).mapEntries(component => component - 1);
+	 * // → ⎡ 0, 1, 2 ⎤
+	 * //   ⎢ 3, 4, 5 ⎥
+	 * //   ⎣ 6, 7, 8 ⎦
+	 * ```
+	 */
+	public mapEntries(mapping: (component: number)=>number): Mat33 {
+		return new Mat33(
+			mapping(this.a1), mapping(this.a2), mapping(this.a3),
+			mapping(this.b1), mapping(this.b2), mapping(this.b3),
+			mapping(this.c1), mapping(this.c2), mapping(this.c3),
+		);
+	}
+
 	/** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
 	public static translation(amount: Vec2): Mat33 {
 		// When transforming Vec2s by a 3x3 matrix, we give the input
@@ -297,7 +324,21 @@ export default class Mat33 {
 		return result.rightMul(Mat33.translation(center.times(-1)));
 	}
 
-	/** Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33. */
+	/** @see {@link !fromCSSMatrix} */
+	public toCSSMatrix(): string {
+		return `matrix(${this.a1},${this.b1},${this.a2},${this.b2},${this.a3},${this.b3})`;
+	}
+
+	/**
+	 * Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33.
+	 * 
+	 * Note that such a matrix has the form,
+	 * ```
+	 * ⎡ a c e ⎤
+	 * ⎢ b d f ⎥
+	 * ⎣ 0 0 1 ⎦
+	 * ```
+	 */
 	public static fromCSSMatrix(cssString: string): Mat33 {
 		if (cssString === '' || cssString === 'none') {
 			return Mat33.identity;

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

@@ -38,7 +38,7 @@ describe('Path.toString', () => {
 		const path = new Path(Vec2.of(1000, 2_000_000), [
 			{
 				kind: PathCommandType.LineTo,
-				point: Vec2.of(30.0001, 40.000000001),
+				point: Vec2.of(30.00000001, 40.000000001),
 			},
 		]);
 
@@ -53,4 +53,15 @@ describe('Path.toString', () => {
 			'M100,100', 'l1,1', 'q1,1 -11-11', 'l10,10'
 		].join(''));
 	});
+
+	it('should not lose precision when saving', () => {
+		const pathStr = 'M184.2,52.3l-.2-.2q-2.7,2.4 -3.2,3.5q-2.8,7 -.9,6.1q4.3-2.6 4.8-6.1q1.2-8.8 .4-8.3q-4.2,5.2 -3.9,3.9q.2-1.6 .3-2.1q.2-1.3 -.2-1q-3.8,6.5 -3.2,3.3q.6-4.1 1.1-5.3q4.1-10 3.3-8.3q-5.3,13.1 -6.6,14.1q-3.3,2.8 -1.8-1.5q2.8-9.7 2.7-8.4q0,.3 0,.4q-1.4,7.1 -2.7,8.5q-2.6,3.2 -2.5,2.9q-.3-1.9 -.7-1.9q-4.1,4.4 -2.9,1.9q1.1-3 .3-2.6q-1.8,2 -2.5,2.4q-4.5,2.8 -4.2,1.9q.3-1.6 .2-1.4q1.5,2.2 1.3,2.9q-.8,3.9 -.5,3.3q.8-7.6 2.5-13.3q2.6-9.2 2.9-6.9q.3,1.4 .3,1.2q-.7-.4 -.9,0q-2.2,11.6 -7.6,13.6q-3.9,1.6 -2.1-1.3q3-5.5 2.6-3.4q-.2,1.8 -.5,1.8q-3.2,.5 -4.1,1.2q-2.6,2.6 -1.9,2.5q4.7-4.4 3.7-5.5q-1.1-.9 -1.6-.6q-7.2,7.5 -3.9,6.5q.3-.1 .4-.4q.6-5.3 -.2-4.9q-2.8,2.3 -3.1,2.4q-3.7,1.5 -3.5,.5q.3-3.6 1.4-3.3q3.5,.7 1.9,2.4q-1.7,2.3 -1.6,.8q0-3.5 -.9-3.1q-5.1,3.3 -4.9,2.8q.1-4 -.8-3.5q-4.3,3.4 -4.6,2.5q-1-2.1 .5-8.7l-.2,0q-1.6,6.6 -.7,8.9q.7,1.2 5.2-2.3q.4-.5 .2,3.1q.1,1 5.5-2.4q.4-.4 .3,2.7q.1,2 2.4-.4q1.7-2.3 -2.1-3.2q-1.7-.3 -2,3.7q0,1.4 4.1-.1q.3-.1 3.1-2.4q.3-.5 -.4,4.5q0-.1 -.2,0q-2.6,1.2 4.5-5.7q0-.2 .8,.6q.9,.6 -3.7,4.7q-.5,1 2.7-1.7q.6-.7 3.7-1.2q.7-.2 .9-2.2q.1-2.7 -3.4,3.2q-1.8,3.4 2.7,1.9q5.6-2.1 7.8-14q-.1,.1 .3,.4q.6,.1 .3-1.6q-.7-2.8 -3.7,6.7q-1.8,5.8 -2.5,13.5q.1,1.1 1.3-3.1q.2-1 -1.3-3.3q-.5-.5 -1,1.6q-.1,1.3 4.8-1.5q1-1 3-2q.1-.4 -1.1,2q-1.1,3.1 3.7-1.3q-.4,0 -.1,1.5q.3,.8 3.3-2.5q1.3-1.6 2.7-8.9q0-.1 0-.4q-.3-1.9 -3.5,8.2q-1.3,4.9 2.4,2.1q1.4-1.2 6.6-14.3q.8-2.4 -3.9,7.9q-.6,1.3 -1.1,5.5q-.3,3.7 4-3.1q-.2,0 -.6,.6q-.2,.6 -.3,2.3q0,1.8 4.7-3.5q.1-.5 -1.2,7.9q-.5,3.2 -4.6,5.7q-1.3,1 1.5-5.5q.4-1.1 3.01-3.5';
+
+		const path1 = Path.fromString(pathStr);
+		path1['cachedStringVersion'] = null; // Clear the cache.
+		const path = Path.fromString(path1.toString(true));
+		path1['cachedStringVersion'] = null; // Clear the cache.
+
+		expect(path.toString(true)).toBe(path1.toString(true));
+	});
 });

package/src/math/Path.ts

@@ -378,15 +378,17 @@ export default class Path {
 
 	private cachedStringVersion: string|null = null;
 
-	public toString(): string {
+	public toString(useNonAbsCommands?: boolean): string {
 		if (this.cachedStringVersion) {
 			return this.cachedStringVersion;
 		}
 
-		// Hueristic: Try to determine whether converting absolute to relative commands is worth it.
-		const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
+		if (useNonAbsCommands === undefined) {
+			// Hueristic: Try to determine whether converting absolute to relative commands is worth it.
+			useNonAbsCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
+		}
 
-		const result = Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+		const result = Path.toString(this.startPoint, this.parts, !useNonAbsCommands);
 		this.cachedStringVersion = result;
 		return result;
 	}
@@ -409,10 +411,13 @@ export default class Path {
 			const roundedPrevY = prevPoint ? toRoundedString(prevPoint.y) : '';
 
 			for (const point of points) {
+				const xComponent = toRoundedString(point.x);
+				const yComponent = toRoundedString(point.y);
+
 				// Relative commands are often shorter as strings than absolute commands.
 				if (!makeAbsCommand) {
-					const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint!.x, roundedPrevX, roundedPrevY);
-					const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint!.y, roundedPrevX, roundedPrevY);
+					const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint!.x, xComponent, roundedPrevX, roundedPrevY);
+					const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint!.y, yComponent, roundedPrevX, roundedPrevY);
 
 					// No need for an additional separator if it starts with a '-'
 					if (yComponentRelative.charAt(0) === '-') {
@@ -421,9 +426,6 @@ export default class Path {
 						relativeCommandParts.push(`${xComponentRelative},${yComponentRelative}`);
 					}
 				} else {
-					const xComponent = toRoundedString(point.x);
-					const yComponent = toRoundedString(point.y);
-
 					absoluteCommandParts.push(`${xComponent},${yComponent}`);
 				}
 			}

package/src/math/Rect2.test.ts

@@ -1,11 +1,8 @@
 
 import Rect2 from './Rect2';
 import { Vec2 } from './Vec2';
-import loadExpectExtensions from '../testing/loadExpectExtensions';
 import Mat33 from './Mat33';
 
-loadExpectExtensions();
-
 describe('Rect2', () => {
 	it('width, height should always be positive', () => {
 		expect(new Rect2(-1, -2, -3, 4)).objEq(new Rect2(-4, -2, 3, 4));

package/src/math/Vec2.test.ts

@@ -1,8 +1,5 @@
 import { Vec2 } from './Vec2';
 import Vec3 from './Vec3';
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
-
-loadExpectExtensions();
 
 describe('Vec2', () => {
 	it('Magnitude', () => {

package/src/math/Vec3.test.ts

@@ -1,9 +1,6 @@
 
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import Vec3 from './Vec3';
 
-loadExpectExtensions();
-
 describe('Vec3', () => {
 	it('.xy should contain the x and y components', () => {
 		const vec = Vec3.of(1, 2, 3);

package/src/math/Vec3.ts

@@ -95,6 +95,27 @@ export default class Vec3 {
 		);
 	}
 
+	/**
+	 * If `other` is a `Vec3`, multiplies `this` component-wise by `other`. Otherwise,
+	 * if `other is a `number`, returns the result of scalar multiplication.
+	 * 
+	 * @example
+	 * ```
+	 * Vec3.of(1, 2, 3).scale(Vec3.of(2, 4, 6)); // → Vec3(2, 8, 18)
+	 * ```
+	 */
+	public scale(other: Vec3|number): Vec3 {
+		if (typeof other === 'number') {
+			return this.times(other);
+		}
+
+		return Vec3.of(
+			this.x * other.x,
+			this.y * other.y,
+			this.z * other.z,
+		);
+	}
+
 	/**
 	 * Returns a vector orthogonal to this. If this is a Vec2, returns `this` rotated
 	 * 90 degrees counter-clockwise.
@@ -158,7 +179,7 @@ export default class Vec3 {
 		);
 	}
 
-	public asArray(): number[] {
+	public asArray(): [ number, number, number ] {
 		return [this.x, this.y, this.z];
 	}
 
@@ -175,7 +196,7 @@ export default class Vec3 {
 	 * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 2.99); // → false
 	 * ```
 	 */
-	public eq(other: Vec3, fuzz: number): boolean {
+	public eq(other: Vec3, fuzz: number = 1e-10): boolean {
 		for (let i = 0; i < 3; i++) {
 			if (Math.abs(other.at(i) - this.at(i)) > fuzz) {
 				return false;

package/src/math/rounding.test.ts

@@ -1,4 +1,4 @@
-import { toRoundedString, toStringOfSamePrecision } from './rounding';
+import { cleanUpNumber, toRoundedString, toStringOfSamePrecision } from './rounding';
 
 describe('toRoundedString', () => {
 	it('should round up numbers endings similar to .999999999999999', () => {
@@ -12,18 +12,28 @@ describe('toRoundedString', () => {
 		expect(toRoundedString(10.999999998)).toBe('11');
 	});
 
-	// Handling this creates situations with potential error:
-	//it('should round strings with multiple digits after the ending decimal points', () => {
-	//	expect(toRoundedString(292.2 - 292.8)).toBe('-0.6');
-	//});
+	it('should round strings with multiple digits after the ending decimal points', () => {
+		expect(toRoundedString(292.2 - 292.8)).toBe('-.6');
+		expect(toRoundedString(4.06425600000023)).toBe('4.064256');
+	});
 
 	it('should round down strings ending endings similar to .00000001', () => {
 		expect(toRoundedString(10.00000001)).toBe('10');
+		expect(toRoundedString(-30.00000001)).toBe('-30');
+		expect(toRoundedString(-14.20000000000002)).toBe('-14.2');
+	});
+
+	it('should not round numbers insufficiently close to the next', () => {
+		expect(toRoundedString(-10.9999)).toBe('-10.9999');
+		expect(toRoundedString(-10.0001)).toBe('-10.0001');
+		expect(toRoundedString(-10.123499)).toBe('-10.123499');
+		expect(toRoundedString(0.00123499)).toBe('.00123499');
 	});
 });
 
 it('toStringOfSamePrecision', () => {
 	expect(toStringOfSamePrecision(1.23456, '1.12')).toBe('1.23');
+	expect(toStringOfSamePrecision(1.23456, '1.120')).toBe('1.235');
 	expect(toStringOfSamePrecision(1.23456, '1.1')).toBe('1.2');
 	expect(toStringOfSamePrecision(1.23456, '1.1', '5.32')).toBe('1.23');
 	expect(toStringOfSamePrecision(-1.23456, '1.1', '5.32')).toBe('-1.23');
@@ -37,4 +47,19 @@ it('toStringOfSamePrecision', () => {
 	expect(toStringOfSamePrecision(-0.09999999999999432, '291.3')).toBe('-.1');
 	expect(toStringOfSamePrecision(-0.9999999999999432, '291.3')).toBe('-1');
 	expect(toStringOfSamePrecision(9998.9, '.1', '-11')).toBe('9998.9');
+	expect(toStringOfSamePrecision(-14.20000000000002, '.000001', '-11')).toBe('-14.2');
+});
+
+it('cleanUpNumber', () => {
+	expect(cleanUpNumber('000.0000')).toBe('0');
+	expect(cleanUpNumber('-000.0000')).toBe('0');
+	expect(cleanUpNumber('0.0000')).toBe('0');
+	expect(cleanUpNumber('0.001')).toBe('.001');
+	expect(cleanUpNumber('-0.001')).toBe('-.001');
+	expect(cleanUpNumber('-0.000000001')).toBe('-.000000001');
+	expect(cleanUpNumber('-0.00000000100')).toBe('-.000000001');
+	expect(cleanUpNumber('1234')).toBe('1234');
+	expect(cleanUpNumber('1234.5')).toBe('1234.5');
+	expect(cleanUpNumber('1234.500')).toBe('1234.5');
+	expect(cleanUpNumber('1.1368683772161603e-13')).toBe('0');
 });

package/src/math/rounding.ts

@@ -1,9 +1,17 @@
 // @packageDocumentation @internal
 
 // Clean up stringified numbers
-const cleanUpNumber = (text: string) => {
+export const cleanUpNumber = (text: string) => {
 	// Regular expression substitions can be somewhat expensive. Only do them
 	// if necessary.
+
+	if (text.indexOf('e') > 0) {
+		// Round to zero.
+		if (text.match(/[eE][-]\d{2,}$/)) {
+			return '0';
+		}
+	}
+
 	const lastChar = text.charAt(text.length - 1);
 	if (lastChar === '0' || lastChar === '.') {
 		// Remove trailing zeroes
@@ -12,10 +20,6 @@ const cleanUpNumber = (text: string) => {
 
 		// Remove trailing period
 		text = text.replace(/[.]$/, '');
-
-		if (text === '-0') {
-			return '0';
-		}
 	}
 
 	const firstChar = text.charAt(0);
@@ -23,6 +27,11 @@ const cleanUpNumber = (text: string) => {
 		// Remove unnecessary leading zeroes.
 		text = text.replace(/^(0+)[.]/, '.');
 		text = text.replace(/^-(0+)[.]/, '-.');
+		text = text.replace(/^(-?)0+$/, '$10');
+	}
+
+	if (text === '-0') {
+		return '0';
 	}
 
 	return text;
@@ -31,8 +40,8 @@ const cleanUpNumber = (text: string) => {
 export 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{3,})0{4,}\d{1,2}$/;
-	const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,2}$/;
+	const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,4}$/;
+	const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,4}$/;
 
 	let text = num.toString(10);
 	if (text.indexOf('.') === -1) {

package/src/rendering/renderers/AbstractRenderer.ts

@@ -122,8 +122,9 @@ export default abstract class AbstractRenderer {
 		}
 	}
 
-	// Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]
-	public drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void {
+	// Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
+	// This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
+	public drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle) {
 		const path = Path.fromRect(rect, lineWidth);
 		this.drawPath(path.toRenderable(lineFill));
 	}

package/src/testing/beforeEachFile.ts

@@ -0,0 +1,3 @@
+import loadExpectExtensions from './loadExpectExtensions';
+loadExpectExtensions();
+jest.useFakeTimers();

package/src/testing/createEditor.ts

@@ -1,4 +1,11 @@
 import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
 
-export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+/** Creates an editor. Should only be used in test files. */
+export default () => {
+	if (jest === undefined) {
+		throw new Error('Files in the testing/ folder should only be used in tests!');
+	}
+
+	return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+};

package/src/testing/global.d.ts

@@ -0,0 +1,17 @@
+
+
+// Type declarations for custom matchers
+interface CustomMatchers<R = unknown> {
+	objEq(expected: {
+		eq: (other: any, ...args: any)=> boolean;
+	}, ...opts: any): R;
+}
+
+declare namespace jest {
+	interface Expect extends CustomMatchers {}
+	interface Matchers<R> extends CustomMatchers<R> {}
+	interface AsyncAsymmetricMatchers extends CustomMatchers {}
+}
+
+declare interface JestMatchers<T> extends CustomMatchers<T> {
+}