js-draw 0.0.3 → 0.0.6

package/src/components/builders/LineBuilder.ts

@@ -0,0 +1,75 @@
+import { PathCommandType } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import Stroke from '../Stroke';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+
+export const makeLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new LineBuilder(initialPoint);
+};
+
+export default class LineBuilder implements ComponentBuilder {
+	private endPoint: StrokeDataPoint;
+
+	public constructor(private readonly startPoint: StrokeDataPoint) {
+		this.endPoint = startPoint;
+	}
+
+	public getBBox(): Rect2 {
+		const preview = this.buildPreview();
+		return preview.getBBox();
+	}
+
+	private buildPreview(): Stroke {
+		const startPoint = this.startPoint.pos;
+		const endPoint = this.endPoint.pos;
+		const toEnd = endPoint.minus(startPoint).normalized();
+
+		const startSize = this.startPoint.width / 2;
+		const endSize = this.endPoint.width / 2;
+
+		const lineNormal = toEnd.orthog();
+		const scaledStartNormal = lineNormal.times(startSize);
+		const scaledEndNormal = lineNormal.times(endSize);
+
+		const preview = new Stroke([
+			{
+				startPoint: startPoint.minus(scaledStartNormal),
+				commands: [
+					{
+						kind: PathCommandType.LineTo,
+						point: startPoint.plus(scaledStartNormal),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: endPoint.plus(scaledEndNormal),
+					},
+					{
+						kind: PathCommandType.LineTo,
+						point: endPoint.minus(scaledEndNormal),
+					},
+				],
+				style: {
+					fill: this.startPoint.color,
+				}
+			}
+		]);
+
+		return preview;
+	}
+
+	public build(): AbstractComponent {
+		return this.buildPreview();
+	}
+
+	public preview(renderer: AbstractRenderer): void {
+		this.buildPreview().render(renderer);
+	}
+
+	public addPoint(point: StrokeDataPoint): void {
+		this.endPoint = point;
+	}
+}

package/src/components/builders/RectangleBuilder.ts

@@ -0,0 +1,59 @@
+import Path from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import Stroke from '../Stroke';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+
+export const makeFilledRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new RectangleBuilder(initialPoint, true);
+};
+
+export const makeOutlinedRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new RectangleBuilder(initialPoint, false);
+};
+
+export default class RectangleBuilder implements ComponentBuilder {
+	private endPoint: StrokeDataPoint;
+
+	public constructor(private readonly startPoint: StrokeDataPoint, private filled: boolean) {
+		// Initially, the start and end points are the same.
+		this.endPoint = startPoint;
+	}
+
+	public getBBox(): Rect2 {
+		const preview = this.buildPreview();
+		return preview.getBBox();
+	}
+
+	private buildPreview(): Stroke {
+		const startPoint = this.startPoint.pos;
+		const endPoint = this.endPoint.pos;
+		const path = Path.fromRect(
+			Rect2.fromCorners(startPoint, endPoint),
+			this.filled ? null : this.endPoint.width,
+		);
+
+		const preview = new Stroke([
+			path.toRenderable({
+				fill: this.endPoint.color
+			}),
+		]);
+
+		return preview;
+	}
+
+	public build(): AbstractComponent {
+		return this.buildPreview();
+	}
+
+	public preview(renderer: AbstractRenderer): void {
+		this.buildPreview().render(renderer);
+	}
+
+	public addPoint(point: StrokeDataPoint): void {
+		this.endPoint = point;
+	}
+}

package/src/components/builders/types.ts

@@ -0,0 +1,15 @@
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+
+export interface ComponentBuilder {
+	getBBox(): Rect2;
+	build(): AbstractComponent;
+	preview(renderer: AbstractRenderer): void;
+
+	addPoint(point: StrokeDataPoint): void;
+}
+
+export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport)=> ComponentBuilder;

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

@@ -14,17 +14,13 @@ describe('Path.fromString', () => {
 		const path2 = Path.fromString('M 0 0');
 		const path3 = Path.fromString('M 1,1M 2,2 M 3,3');
 
-		expect(path1.parts[0]).toMatchObject({
-			kind: PathCommandType.MoveTo,
-			point: Vec2.zero,
-		});
-		expect(path2.parts).toMatchObject(path1.parts);
+		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(1, 1),
-			},
 			{
 				kind: PathCommandType.MoveTo,
 				point: Vec2.of(2, 2),
@@ -44,27 +40,22 @@ describe('Path.fromString', () => {
 				kind: PathCommandType.MoveTo,
 				point: Vec2.of(1, 1),
 			},
-			{
-				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,
-				// l is a relative lineTo, but because there
-				// is no previous command, it should act like an
-				// absolute moveTo.
-				point: Vec2.of(1, 2),
-			},
 			{
 				kind: PathCommandType.LineTo,
 				point: Vec2.of(-1, 0),
@@ -84,10 +75,6 @@ describe('Path.fromString', () => {
 		expect(path2.startPoint).toMatchObject(path1.startPoint);
 		expect(path1.parts).toMatchObject(path2.parts);
 		expect(path1.parts).toMatchObject([
-			{
-				kind: PathCommandType.MoveTo,
-				point: Vec2.of(3, 3),
-			},
 			{
 				kind: PathCommandType.LineTo,
 				point: Vec2.of(4, 5),

package/src/geometry/Path.ts

@@ -223,6 +223,49 @@ export default class Path {
 		]);
 	}
 
+	// Returns a path that outlines [rect]. If [lineWidth] is not given, the resultant path is
+	// the outline of [rect]. Otherwise, the resultant path represents a line of width [lineWidth]
+	// that traces [rect].
+	public static fromRect(rect: Rect2, lineWidth: number|null = null): Path {
+		const commands: PathCommand[] = [];
+
+		let corners;
+		let startPoint;
+
+		if (lineWidth !== null) {
+			// Vector from the top left corner or bottom right corner to the edge of the
+			// stroked region.
+			const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
+			const innerRect = Rect2.fromCorners(
+				rect.topLeft.plus(cornerToEdge),
+				rect.bottomRight.minus(cornerToEdge)
+			);
+			const outerRect = Rect2.fromCorners(
+				rect.topLeft.minus(cornerToEdge),
+				rect.bottomRight.plus(cornerToEdge)
+			);
+
+			corners = [
+				innerRect.corners[3],
+				...innerRect.corners,
+				...outerRect.corners.reverse(),
+			];
+			startPoint = outerRect.corners[3];
+		} else {
+			corners = rect.corners.slice(1);
+			startPoint = rect.corners[0];
+		}
+
+		for (const corner of corners) {
+			commands.push({
+				kind: PathCommandType.LineTo,
+				point: corner,
+			});
+		}
+
+		return new Path(startPoint, commands);
+	}
+
 	public static fromRenderable(renderable: RenderablePathSpec): Path {
 		return new Path(renderable.startPoint, renderable.commands);
 	}
@@ -324,16 +367,28 @@ export default class Path {
 
 		let lastPos: Point2 = Vec2.zero;
 		let firstPos: Point2|null = null;
+		let isFirstCommand: boolean = true;
 		const commands: PathCommand[] = [];
 
 
 		const moveTo = (point: Point2) => {
+			// The first moveTo/lineTo is already handled by the [startPoint] parameter of the Path constructor.
+			if (isFirstCommand) {
+				isFirstCommand = false;
+				return;
+			}
+
 			commands.push({
 				kind: PathCommandType.MoveTo,
 				point,
 			});
 		};
 		const lineTo = (point: Point2) => {
+			if (isFirstCommand) {
+				isFirstCommand = false;
+				return;
+			}
+
 			commands.push({
 				kind: PathCommandType.LineTo,
 				point,
@@ -449,6 +504,7 @@ export default class Path {
 			if (args.length > 0) {
 				firstPos ??= args[0];
 			}
+			isFirstCommand = false;
 		}
 
 		return new Path(firstPos ?? Vec2.zero, commands);

package/src/geometry/Vec2.test.ts

@@ -28,5 +28,6 @@ describe('Vec2', () => {
 	it('Perpindicular', () => {
 		const fuzz = 0.001;
 		expect(Vec2.unitX.cross(Vec3.unitZ)).objEq(Vec2.unitY.times(-1), fuzz);
+		expect(Vec2.unitX.orthog()).objEq(Vec2.unitY, fuzz);
 	});
 });

package/src/geometry/Vec3.test.ts

@@ -26,4 +26,18 @@ describe('Vec3', () => {
 		expect(vec1.cross(vec2)).objEq(Vec3.unitZ);
 		expect(vec2.cross(vec1)).objEq(Vec3.unitZ.times(-1));
 	});
+
+	it('.orthog should return an orthogonal vector', () => {
+		expect(Vec3.unitZ.orthog().dot(Vec3.unitZ)).toBe(0);
+
+		// Should return some orthogonal vector, even if given the zero vector
+		expect(Vec3.zero.orthog().dot(Vec3.zero)).toBe(0);
+	});
+
+	it('.orthog should return a unit vector', () => {
+		expect(Vec3.zero.orthog().magnitude()).toBe(1);
+		expect(Vec3.unitZ.orthog().magnitude()).toBe(1);
+		expect(Vec3.unitX.orthog().magnitude()).toBe(1);
+		expect(Vec3.unitY.orthog().magnitude()).toBe(1);
+	});
 });

package/src/geometry/Vec3.ts

@@ -31,6 +31,11 @@ export default class Vec3 {
 		throw new Error(`${idx} out of bounds!`);
 	}
 
+	// Alias for this.magnitude
+	public length(): number {
+		return this.magnitude();
+	}
+
 	public magnitude(): number {
 		return Math.sqrt(this.dot(this));
 	}
@@ -76,6 +81,17 @@ export default class Vec3 {
 		);
 	}
 
+	// Returns a vector orthogonal to this. If this is a Vec2, returns [this] rotated
+	// 90 degrees counter-clockwise.
+	public orthog(): Vec3 {
+		// If parallel to the z-axis
+		if (this.dot(Vec3.unitX) === 0 && this.dot(Vec3.unitY) === 0) {
+			return this.dot(Vec3.unitX) === 0 ? Vec3.unitX : this.cross(Vec3.unitX).normalized();
+		}
+
+		return this.cross(Vec3.unitZ.times(-1)).normalized();
+	}
+
 	// Returns this plus a vector of length [distance] in [direction]
 	public extend(distance: number, direction: Vec3): Vec3 {
 		return this.plus(direction.normalized().times(distance));

package/src/localization.ts

@@ -1,7 +1,6 @@
 import { CommandLocalization, defaultCommandLocalization } from './commands/localization';
 import { defaultComponentLocalization, ImageComponentLocalization } from './components/localization';
-import HTMLToolbar from './toolbar/HTMLToolbar';
-import { ToolbarLocalization } from './toolbar/types';
+import { defaultToolbarLocalization, ToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization, ToolLocalization } from './tools/localization';
 
 
@@ -14,7 +13,7 @@ export interface EditorLocalization extends ToolbarLocalization, ToolLocalizatio
 }
 
 export const defaultEditorLocalization: EditorLocalization = {
-	...HTMLToolbar.defaultLocalization,
+	...defaultToolbarLocalization,
 	...defaultToolLocalization,
 	...defaultCommandLocalization,
 	...defaultComponentLocalization,

package/src/rendering/AbstractRenderer.ts

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import { PathCommand, PathCommandType } from '../geometry/Path';
+import Path, { PathCommand, PathCommandType } from '../geometry/Path';
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
 import Viewport from '../Viewport';
@@ -103,37 +103,8 @@ 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 {
-		const commands: PathCommand[] = [];
-
-		// Vector from the top left corner or bottom right corner to the edge of the
-		// stroked region.
-		const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
-		const innerRect = Rect2.fromCorners(
-			rect.topLeft.plus(cornerToEdge),
-			rect.bottomRight.minus(cornerToEdge)
-		);
-		const outerRect = Rect2.fromCorners(
-			rect.topLeft.minus(cornerToEdge),
-			rect.bottomRight.plus(cornerToEdge)
-		);
-
-		const corners = [
-			innerRect.corners[3],
-			...innerRect.corners,
-			...outerRect.corners.reverse(),
-		];
-		for (const corner of corners) {
-			commands.push({
-				kind: PathCommandType.LineTo,
-				point: corner,
-			});
-		}
-
-		this.drawPath({
-			startPoint: outerRect.corners[3],
-			commands,
-			style: lineFill,
-		});
+		const path = Path.fromRect(rect, lineWidth);
+		this.drawPath(path.toRenderable(lineFill));
 	}
 
 	// Note the start/end of an object with the given bounding box.