js-draw 0.18.1 → 0.18.2

package/src/math/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/math/LineSegment2.ts

@@ -0,0 +1,160 @@
+import Mat33 from './Mat33';
+import Rect2 from './Rect2';
+import { Vec2, Point2 } from './Vec2';
+
+interface IntersectionResult {
+	point: Point2;
+	t: number;
+}
+
+export default class LineSegment2 {
+	// invariant: ||direction|| = 1
+	public readonly direction: Vec2;
+	public readonly length: number;
+	public readonly bbox;
+
+	public constructor(
+		private readonly point1: Point2,
+		private readonly point2: Point2
+	) {
+		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
+	public get p1(): Point2 {
+		return this.point1;
+	}
+
+	public get p2(): Point2 {
+		return this.point2;
+	}
+
+	public get(t: number): Point2 {
+		return this.point1.plus(this.direction.times(t));
+	}
+
+	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 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;
+		}
+	}
+
+	public transformedBy(affineTransfm: Mat33): LineSegment2 {
+		return new LineSegment2(affineTransfm.transformVec2(this.p1), affineTransfm.transformVec2(this.p2));
+	}
+
+	public toString() {
+		return `LineSegment(${this.p1.toString()}, ${this.p2.toString()})`;
+	}
+}

package/src/math/Mat33.test.ts

@@ -0,0 +1,244 @@
+import Mat33 from './Mat33';
+import { Point2, Vec2 } from './Vec2';
+import Vec3 from './Vec3';
+
+
+describe('Mat33 tests', () => {
+	it('equality', () => {
+		expect(Mat33.identity).objEq(Mat33.identity);
+		expect(new Mat33(
+			0.1, 0.2, 0.3,
+			0.4, 0.5, 0.6,
+			0.7, 0.8, -0.9
+		)).objEq(new Mat33(
+			0.2, 0.1, 0.4,
+			0.5, 0.5, 0.7,
+			0.7, 0.8, -0.9
+		), 0.2);
+	});
+
+	it('transposition', () => {
+		expect(Mat33.identity.transposed()).objEq(Mat33.identity);
+		expect(new Mat33(
+			1, 2, 0,
+			0, 0, 0,
+			0, 1, 0
+		).transposed()).objEq(new Mat33(
+			1, 0, 0,
+			2, 0, 1,
+			0, 0, 0
+		));
+	});
+
+	it('multiplication', () => {
+		const M = new Mat33(
+			1, 2, 3,
+			4, 5, 6,
+			7, 8, 9
+		);
+
+		expect(Mat33.identity.rightMul(Mat33.identity)).objEq(Mat33.identity);
+		expect(M.rightMul(Mat33.identity)).objEq(M);
+		expect(M.rightMul(new Mat33(
+			1, 0, 0,
+			0, 2, 0,
+			0, 0, 1
+		))).objEq(new Mat33(
+			1, 4, 3,
+			4, 10, 6,
+			7, 16, 9
+		));
+		expect(M.rightMul(new Mat33(
+			2, 0, 1,
+			0, 1, 0,
+			0, 0, 3
+		))).objEq(new Mat33(
+			2, 2, 10,
+			8, 5, 22,
+			14, 8, 34
+		));
+	});
+
+	it('the inverse of the identity matrix should be the identity matrix', () => {
+		const fuzz = 0.01;
+		expect(Mat33.identity.inverse()).objEq(Mat33.identity, fuzz);
+
+		const M = new Mat33(
+			1, 2, 3,
+			4, 1, 0,
+			2, 3, 0
+		);
+		expect(M.inverse().rightMul(M)).objEq(Mat33.identity, fuzz);
+	});
+
+	it('90 degree z-rotation matricies should rotate 90 degrees counter clockwise', () => {
+		const fuzz = 0.001;
+
+		const M = Mat33.zRotation(Math.PI / 2);
+		const rotated = M.transformVec2(Vec2.unitX);
+		expect(rotated).objEq(Vec2.unitY, fuzz);
+		expect(M.transformVec2(rotated)).objEq(Vec2.unitX.times(-1), fuzz);
+	});
+
+	it('z-rotation matricies should preserve the given origin', () => {
+		const testPairs: Array<[number, Vec2]> = [
+			[ Math.PI / 2, Vec2.zero ],
+			[ -Math.PI / 2, Vec2.zero ],
+			[ -Math.PI / 2, Vec2.of(10, 10) ],
+		];
+
+		for (const [ angle, center ] of testPairs) {
+			expect(Mat33.zRotation(angle, center).transformVec2(center)).objEq(center);
+		}
+	});
+
+	it('translation matricies should translate Vec2s', () => {
+		const fuzz = 0.01;
+
+		const M = Mat33.translation(Vec2.of(1, -4));
+		expect(M.transformVec2(Vec2.of(0, 0))).objEq(Vec2.of(1, -4), fuzz);
+		expect(M.transformVec2(Vec2.of(-1, 3))).objEq(Vec2.of(0, -1), fuzz);
+	});
+
+	it('scaling matricies should scale about the provided center', () => {
+		const fuzz = 0.01;
+
+		const center = Vec2.of(1, -4);
+		const M = Mat33.scaling2D(2, center);
+		expect(M.transformVec2(center)).objEq(center, fuzz);
+		expect(M.transformVec2(Vec2.of(0, 0))).objEq(Vec2.of(-1, 4), fuzz);
+	});
+
+	it('calling inverse on singular matricies should result in the identity matrix', () => {
+		const fuzz = 0.001;
+		const singularMat = Mat33.ofRows(
+			Vec3.of(0, 0, 1),
+			Vec3.of(0, 1, 0),
+			Vec3.of(0, 1, 1)
+		);
+		expect(singularMat.invertable()).toBe(false);
+		expect(singularMat.inverse()).objEq(Mat33.identity, fuzz);
+	});
+
+	it('z-rotation matricies should be invertable', () => {
+		const fuzz = 0.01;
+		const M = Mat33.zRotation(-0.2617993877991494, Vec2.of(481, 329.5));
+		expect(
+			M.inverse().transformVec2(M.transformVec2(Vec2.unitX))
+		).objEq(Vec2.unitX, fuzz);
+		expect(M.invertable());
+
+		const starterTransform = new Mat33(
+			-0.2588190451025205, -0.9659258262890688, 923.7645204565603,
+			0.9659258262890688,  -0.2588190451025205, -49.829447083761465,
+			0, 0, 1
+		);
+		expect(starterTransform.invertable()).toBe(true);
+
+		const fullTransform = starterTransform.rightMul(M);
+		const fullTransformInverse = fullTransform.inverse();
+		expect(fullTransform.invertable()).toBe(true);
+
+		expect(
+			fullTransformInverse.rightMul(fullTransform)
+		).objEq(Mat33.identity, fuzz);
+
+		expect(
+			fullTransform.transformVec2(fullTransformInverse.transformVec2(Vec2.unitX))
+		).objEq(Vec2.unitX, fuzz);
+
+		expect(
+			fullTransformInverse.transformVec2(fullTransform.transformVec2(Vec2.unitX))
+		).objEq(Vec2.unitX, fuzz);
+	});
+
+	it('z-rotation matrix inverses should undo the z-rotation', () => {
+		const testCases: Array<[ number, Point2 ]> = [
+			[ Math.PI / 2, Vec2.zero ],
+			[ Math.PI, Vec2.of(1, 1) ],
+			[ -Math.PI, Vec2.of(1, 1) ],
+			[ -Math.PI * 2, Vec2.of(1, 1) ],
+			[ -Math.PI * 2, Vec2.of(123, 456) ],
+			[ -Math.PI / 4, Vec2.of(123, 456) ],
+			[ 0.1, Vec2.of(1, 2) ],
+		];
+
+		const fuzz = 0.00001;
+		for (const [ angle, center ] of testCases) {
+			const mat = Mat33.zRotation(angle, center);
+			expect(mat.inverse().rightMul(mat)).objEq(Mat33.identity, fuzz);
+			expect(mat.rightMul(mat.inverse())).objEq(Mat33.identity, fuzz);
+		}
+	});
+
+	it('z-rotation should preserve given origin', () => {
+		const testCases: Array<[ number, Point2 ]> = [
+			[ 6.205048847547065, Vec2.of(75.16363373235318, 104.29870408043762) ],
+			[ 1.234, Vec2.of(-56, 789) ],
+			[ -Math.PI, Vec2.of(-56, 789) ],
+			[ -Math.PI / 2, Vec2.of(-0.001, 1.0002) ],
+		];
+
+		for (const [angle, rotationOrigin] of testCases) {
+			expect(Mat33.zRotation(angle, rotationOrigin).transformVec2(rotationOrigin)).objEq(rotationOrigin);
+		}
+	});
+
+	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 ⎤
+		// 		⎢ b d f ⎥  =  matrix(a,b,c,d,e,f)
+		// 		⎣ 0 0 1 ⎦
+		const identity = Mat33.fromCSSMatrix('matrix(1, 0, 0, 1, 0, 0)');
+		expect(identity).objEq(Mat33.identity);
+		expect(Mat33.fromCSSMatrix('matrix(1, 2, 3, 4, 5, 6)')).objEq(new Mat33(
+			1, 3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1e2, 2, 3, 4, 5, 6)')).objEq(new Mat33(
+			1e2, 3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6, 2, .3, 4, 5, 6)')).objEq(new Mat33(
+			1.6, .3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(-1, 2, 3.E-2, 4, -5.123, -6.5)')).objEq(new Mat33(
+			-1, 0.03, -5.123,
+			2, 4, -6.5,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6,\n\t2, .3, 4, 5, 6)')).objEq(new Mat33(
+			1.6, .3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6,2, .3E-2, 4, 5, 6)')).objEq(new Mat33(
+			1.6, 3e-3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(-1, 2e6,	3E-2,-5.123, -6.5e-1, 0.01)')).objEq(new Mat33(
+			-1, 	3E-2,  	-6.5e-1,
+			2e6,	-5.123,	0.01,
+			0,  	0,     	1,
+		));
+	});
+});