js-draw 0.25.0 → 1.0.0

package/src/math/shapes/CubicBezier.ts

@@ -1,35 +0,0 @@
-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/math/shapes/LineSegment2.test.ts

@@ -1,99 +0,0 @@
-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/shapes/LineSegment2.ts

@@ -1,231 +0,0 @@
-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 default 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()})`;
-	}
-}

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

@@ -1,223 +0,0 @@
-// 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));
-	});
-});