js-draw 0.0.1

package/src/geometry/Rect2.ts

@@ -0,0 +1,215 @@
+import LineSegment2 from './LineSegment2';
+import Mat33 from './Mat33';
+import { Point2, Vec2 } from './Vec2';
+
+// An object that can be converted to a Rect2.
+interface RectTemplate {
+	x: number;
+	y: number;
+	w?: number;
+	h?: number;
+	width?: number;
+	height?: number;
+}
+
+// invariant: w > 0, h > 0.
+export default class Rect2 {
+	// Derived state:
+
+	// topLeft assumes up is -y
+	public readonly topLeft: Point2;
+	public readonly size: Vec2;
+	public readonly bottomRight: Point2;
+	public readonly center: Point2;
+	public readonly area: number;
+
+	public constructor(
+		public readonly x: number,
+		public readonly y: number,
+		public readonly w: number,
+		public readonly h: number
+	) {
+		if (w < 0) {
+			this.x += w;
+			this.w = Math.abs(w);
+		}
+
+		if (h < 0) {
+			this.y += h;
+			this.h = Math.abs(h);
+		}
+
+		// Precompute/store vector forms.
+		this.topLeft = Vec2.of(this.x, this.y);
+		this.size = Vec2.of(this.w, this.h);
+		this.bottomRight = this.topLeft.plus(this.size);
+		this.center = this.topLeft.plus(this.size.times(0.5));
+		this.area = this.w * this.h;
+	}
+
+	public translatedBy(vec: Vec2): Rect2 {
+		return new Rect2(vec.x + this.x, vec.y + this.y, this.w, this.h);
+	}
+
+	public resizedTo(size: Vec2): Rect2 {
+		return new Rect2(this.x, this.y, size.x, size.y);
+	}
+
+	public containsPoint(other: Point2): boolean {
+		return this.x <= other.x && this.y <= other.y
+			&& this.x + this.w >= other.x && this.y + this.h >= other.y;
+	}
+
+	public containsRect(other: Rect2): boolean {
+		return this.x <= other.x && this.y <= other.y
+				&& this.bottomRight.x >= other.bottomRight.x
+				&& this.bottomRight.y >= other.bottomRight.y;
+	}
+
+	public intersects(other: Rect2): boolean {
+		return this.intersection(other) !== null;
+	}
+
+	// Returns the overlap of this and [other], or null, if no such
+	// /         overlap exists
+	public intersection(other: Rect2): Rect2|null {
+		const topLeft = this.topLeft.zip(other.topLeft, Math.max);
+		const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
+
+		// The intersection can't be outside of this rectangle
+		if (!this.containsPoint(topLeft) || !this.containsPoint(bottomRight)) {
+			return null;
+		} else if (!other.containsPoint(topLeft) || !other.containsPoint(bottomRight)) {
+			return null;
+		}
+
+		return Rect2.fromCorners(topLeft, bottomRight);
+	}
+
+	// Returns a new rectangle containing both [this] and [other].
+	public union(other: Rect2): Rect2 {
+		const topLeft = this.topLeft.zip(other.topLeft, Math.min);
+		const bottomRight = this.bottomRight.zip(other.bottomRight, Math.max);
+
+		return Rect2.fromCorners(
+			topLeft,
+			bottomRight
+		);
+	}
+
+	// Returns a rectangle containing this and [point].
+	// [margin] is the minimum distance between the new point and the edge
+	// of the resultant rectangle.
+	public grownToPoint(point: Point2, margin: number = 0): Rect2 {
+		const otherRect = new Rect2(
+			point.x - margin, point.y - margin,
+			margin * 2, margin * 2
+		);
+		return this.union(otherRect);
+	}
+
+	// Returns this grown by [margin] in both the x and y directions.
+	public grownBy(margin: number): Rect2 {
+		return new Rect2(
+			this.x - margin, this.y - margin, this.w + margin * 2, this.h + margin * 2
+		);
+	}
+
+	public get corners(): Point2[] {
+		return [
+			this.bottomRight,
+			this.topRight,
+			this.topLeft,
+			this.bottomLeft,
+		];
+	}
+
+	public get maxDimension(): number {
+		return Math.max(this.w, this.h);
+	}
+
+	public get topRight() {
+		return this.bottomRight.plus(Vec2.of(0, -this.h));
+	}
+
+	public get bottomLeft() {
+		return this.topLeft.plus(Vec2.of(0, this.h));
+	}
+
+	// Returns edges in the order
+	// [ rightEdge, topEdge, leftEdge, bottomEdge ]
+	public getEdges(): LineSegment2[] {
+		const corners = this.corners;
+		return [
+			new LineSegment2(corners[0], corners[1]),
+			new LineSegment2(corners[1], corners[2]),
+			new LineSegment2(corners[2], corners[3]),
+			new LineSegment2(corners[3], corners[0]),
+		];
+	}
+
+	// [affineTransform] is a transformation matrix that both scales and **translates**.
+	// the bounding box of this' four corners after transformed by the given affine transformation.
+	public transformedBoundingBox(affineTransform: Mat33): Rect2 {
+		return Rect2.bboxOf(this.corners.map(corner => affineTransform.transformVec2(corner)));
+	}
+
+	/** @return true iff this is equal to [other] ± fuzz */
+	public eq(other: Rect2, fuzz: number = 0): boolean {
+		return this.topLeft.eq(other.topLeft, fuzz) && this.size.eq(other.size, fuzz);
+	}
+
+	public toString(): string {
+		return `Rect(point(${this.x}, ${this.y}), size(${this.w}, ${this.h}))`;
+	}
+
+
+	public static fromCorners(corner1: Point2, corner2: Point2) {
+		return new Rect2(
+			Math.min(corner1.x, corner2.x),
+			Math.min(corner1.y, corner2.y),
+			Math.abs(corner1.x - corner2.x),
+			Math.abs(corner1.y - corner2.y)
+		);
+	}
+
+	// Returns a box that contains all points in [points] with at least [margin]
+	// between each point and the edge of the box.
+	public static bboxOf(points: Point2[], margin: number = 0) {
+		let minX = 0;
+		let minY = 0;
+		let maxX = 0;
+		let maxY = 0;
+		let isFirst = true;
+
+		for (const point of points) {
+			if (isFirst) {
+				minX = point.x;
+				minY = point.y;
+				maxX = point.x;
+				maxY = point.y;
+
+				isFirst = false;
+			}
+
+			minX = Math.min(minX, point.x);
+			minY = Math.min(minY, point.y);
+			maxX = Math.max(maxX, point.x);
+			maxY = Math.max(maxY, point.y);
+		}
+
+		return Rect2.fromCorners(
+			Vec2.of(minX - margin, minY - margin),
+			Vec2.of(maxX + margin, maxY + margin)
+		);
+	}
+
+	public static of(template: RectTemplate) {
+		const width = template.width ?? template.w ?? 0;
+		const height = template.height ?? template.h ?? 0;
+		return new Rect2(template.x, template.y, width, height);
+	}
+
+	public static empty = new Rect2(0, 0, 0, 0);
+	public static unitSquare = new Rect2(0, 0, 1, 1);
+}

package/src/geometry/Vec2.test.ts

@@ -0,0 +1,32 @@
+import { Vec2 } from './Vec2';
+import Vec3 from './Vec3';
+import { loadExpectExtensions } from '../testing/loadExpectExtensions';
+
+loadExpectExtensions();
+
+describe('Vec2', () => {
+	it('Magnitude', () => {
+		expect(Vec2.of(3, 4).magnitude()).toBe(5);
+	});
+
+	it('Addition', () => {
+		expect(Vec2.of(1, 2).plus(Vec2.of(3, 4))).objEq(Vec2.of(4, 6));
+	});
+
+	it('Multiplication', () => {
+		expect(Vec2.of(1, -1).times(22)).objEq(Vec2.of(22, -22));
+	});
+
+	it('More complicated expressions', () => {
+		expect((Vec2.of(1, 2).plus(Vec2.of(3, 4))).times(2)).objEq(Vec2.of(8, 12));
+	});
+
+	it('Angle', () => {
+		expect(Vec2.of(-1, 1).angle()).toBeCloseTo(3 * Math.PI / 4);
+	});
+
+	it('Perpindicular', () => {
+		const fuzz = 0.001;
+		expect(Vec2.unitX.cross(Vec3.unitZ)).objEq(Vec2.unitY.times(-1), fuzz);
+	});
+});

package/src/geometry/Vec2.ts

@@ -0,0 +1,18 @@
+import Vec3 from './Vec3';
+
+export namespace Vec2 {
+	export const of = (x: number, y: number): Vec2 => {
+		return Vec3.of(x, y, 0);
+	};
+
+	export const ofXY = ({x, y}: { x: number, y: number }): Vec2 => {
+		return Vec3.of(x, y, 0);
+	};
+
+	export const unitX = Vec2.of(1, 0);
+	export const unitY = Vec2.of(0, 1);
+	export const zero = Vec2.of(0, 0);
+}
+
+export type Point2 = Vec3;
+export type Vec2 = Vec3; // eslint-disable-line

package/src/geometry/Vec3.test.ts

@@ -0,0 +1,29 @@
+
+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);
+		expect(vec.xy).toMatchObject({
+			x: 1,
+			y: 2,
+		});
+	});
+
+	it('should be combinable with other vectors via .zip', () => {
+		const vec1 = Vec3.unitX;
+		const vec2 = Vec3.unitY;
+		expect(vec1.zip(vec2, Math.min)).objEq(Vec3.zero);
+		expect(vec1.zip(vec2, Math.max)).objEq(Vec3.of(1, 1, 0));
+	});
+
+	it('.cross should obey the right hand rule', () => {
+		const vec1 = Vec3.unitX;
+		const vec2 = Vec3.unitY;
+		expect(vec1.cross(vec2)).objEq(Vec3.unitZ);
+		expect(vec2.cross(vec1)).objEq(Vec3.unitZ.times(-1));
+	});
+});

package/src/geometry/Vec3.ts

@@ -0,0 +1,133 @@
+
+
+// A vector with three components. Can also be used to represent a two-component vector
+export default class Vec3 {
+	private constructor(
+		public readonly x: number,
+		public readonly y: number,
+		public readonly z: number
+	) {
+	}
+
+	// Returns the x, y components of this
+	public get xy(): { x: number; y: number } {
+		// Useful for APIs that behave differently if .z is present.
+		return {
+			x: this.x,
+			y: this.y,
+		};
+	}
+
+	public static of(x: number, y: number, z: number): Vec3 {
+		return new Vec3(x, y, z);
+	}
+
+	// Returns this' [idx]th component
+	public at(idx: number): number {
+		if (idx === 0) return this.x;
+		if (idx === 1) return this.y;
+		if (idx === 2) return this.z;
+
+		throw new Error(`${idx} out of bounds!`);
+	}
+
+	public magnitude(): number {
+		return Math.sqrt(this.dot(this));
+	}
+
+	public magnitudeSquared(): number {
+		return this.dot(this);
+	}
+
+	// Return this' angle in the XY plane (treats this as a Vec2)
+	public angle(): number {
+		return Math.atan2(this.y, this.x);
+	}
+
+	public normalized(): Vec3 {
+		const norm = this.magnitude();
+		return Vec3.of(this.x / norm, this.y / norm, this.z / norm);
+	}
+
+	public times(c: number): Vec3 {
+		return Vec3.of(this.x * c, this.y * c, this.z * c);
+	}
+
+	public plus(v: Vec3): Vec3 {
+		return Vec3.of(this.x + v.x, this.y + v.y, this.z + v.z);
+	}
+
+	public minus(v: Vec3): Vec3 {
+		return this.plus(v.times(-1));
+	}
+
+	public dot(other: Vec3): number {
+		return this.x * other.x + this.y * other.y + this.z * other.z;
+	}
+
+	public cross(other: Vec3): Vec3 {
+		// | i  j  k |
+		// | x1 y1 z1| = (i)(y1z2 - y2z1) - (j)(x1z2 - x2z1) + (k)(x1y2 - x2y1)
+		// | x2 y2 z2|
+		return Vec3.of(
+			this.y * other.z - other.y * this.z,
+			other.x * this.z - this.x * other.z,
+			this.x * other.y - other.x * this.y
+		);
+	}
+
+	// Returns this plus a vector of length [distance] in [direction]
+	public extend(distance: number, direction: Vec3): Vec3 {
+		return this.plus(direction.normalized().times(distance));
+	}
+
+	// Returns a vector [fractionTo] of the way to target from this.
+	public lerp(target: Vec3, fractionTo: number): Vec3 {
+		return this.times(1 - fractionTo).plus(target.times(fractionTo));
+	}
+
+	// [zip] Maps a component of this and a corresponding component of
+	// [other] to a component of the output vector.
+	public zip(
+		other: Vec3, zip: (componentInThis: number, componentInOther: number)=> number
+	): Vec3 {
+		return Vec3.of(
+			zip(other.x, this.x),
+			zip(other.y, this.y),
+			zip(other.z, this.z)
+		);
+	}
+
+	// Returns a vector with each component acted on by [fn]
+	public map(fn: (component: number)=> number): Vec3 {
+		return Vec3.of(
+			fn(this.x), fn(this.y), fn(this.z)
+		);
+	}
+
+	public asArray(): number[] {
+		return [this.x, this.y, this.z];
+	}
+
+	// [fuzz] The maximum difference between two components for this and [other]
+	// to be considered equal.
+	public eq(other: Vec3, fuzz: number): boolean {
+		for (let i = 0; i < 3; i++) {
+			if (Math.abs(other.at(i) - this.at(i)) > fuzz) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	public toString(): string {
+		return `Vec(${this.x}, ${this.y}, ${this.z})`;
+	}
+
+
+	public static unitX = Vec3.of(1, 0, 0);
+	public static unitY = Vec3.of(0, 1, 0);
+	public static unitZ = Vec3.of(0, 0, 1);
+	public static zero = Vec3.of(0, 0, 0);
+}

package/src/localization.ts

@@ -0,0 +1,27 @@
+import { CommandLocalization, defaultCommandLocalization } from './commands/localization';
+import { defaultComponentLocalization, ImageComponentLocalization } from './components/localization';
+import HTMLToolbar from './toolbar/HTMLToolbar';
+import { ToolbarLocalization } from './toolbar/types';
+import { defaultToolLocalization, ToolLocalization } from './tools/localization';
+
+
+export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization {
+	undoAnnouncement: (actionDescription: string)=> string;
+	redoAnnouncement: (actionDescription: string)=> string;
+	doneLoading: string;
+	loading: (percentage: number)=>string;
+	imageEditor: string;
+}
+
+export const defaultEditorLocalization: EditorLocalization = {
+	...HTMLToolbar.defaultLocalization,
+	...defaultToolLocalization,
+	...defaultCommandLocalization,
+	...defaultComponentLocalization,
+	loading: (percentage: number) => `Loading ${percentage}%...`,
+	imageEditor: 'Image Editor',
+	doneLoading: 'Done loading',
+
+	undoAnnouncement: (commandDescription: string) => `Undid ${commandDescription}`,
+	redoAnnouncement: (commandDescription: string) => `Redid ${commandDescription}`,
+};

package/src/rendering/AbstractRenderer.ts

@@ -0,0 +1,164 @@
+import Color4 from '../Color4';
+import { PathCommand, PathCommandType } from '../geometry/Path';
+import Rect2 from '../geometry/Rect2';
+import { Point2, Vec2 } from '../geometry/Vec2';
+import Viewport from '../Viewport';
+
+export interface RenderingStyle {
+	fill: Color4;
+	stroke?: {
+		color: Color4;
+		width: number;
+	};
+}
+
+export interface RenderablePathSpec {
+	startPoint: Point2;
+	commands: PathCommand[];
+	style: RenderingStyle;
+}
+
+const stylesEqual = (a: RenderingStyle, b: RenderingStyle) => {
+	return a === b || (a.fill.eq(b.fill)
+		&& a.stroke?.color?.eq(b.stroke?.color)
+		&& a.stroke?.width === b.stroke?.width);
+};
+
+export default abstract class AbstractRenderer {
+	protected constructor(protected viewport: Viewport) { }
+
+	// Returns the size of the rendered region of this on
+	// the display (in pixels).
+	public abstract displaySize(): Vec2;
+
+	public abstract clear(): void;
+	protected abstract beginPath(startPoint: Point2): void;
+	protected abstract endPath(style: RenderingStyle): void;
+	protected abstract lineTo(point: Point2): void;
+	protected abstract moveTo(point: Point2): void;
+	protected abstract traceCubicBezierCurve(
+		p1: Point2, p2: Point2, p3: Point2,
+	): void;
+	protected abstract traceQuadraticBezierCurve(
+		controlPoint: Point2, endPoint: Point2,
+	): void;
+
+	private objectLevel: number = 0;
+	private currentPaths: RenderablePathSpec[]|null = null;
+	private flushPath() {
+		if (!this.currentPaths) {
+			return;
+		}
+
+		let lastStyle: RenderingStyle|null = null;
+		for (const path of this.currentPaths) {
+			const { startPoint, commands, style } = path;
+
+			if (!lastStyle || !stylesEqual(lastStyle, style)) {
+				if (lastStyle) {
+					this.endPath(lastStyle);
+				}
+
+				this.beginPath(startPoint);
+				lastStyle = style;
+			} else {
+				this.moveTo(startPoint);
+			}
+
+			for (const command of commands) {
+				if (command.kind === PathCommandType.LineTo) {
+					this.lineTo(command.point);
+				} else if (command.kind === PathCommandType.MoveTo) {
+					this.moveTo(command.point);
+				} else if (command.kind === PathCommandType.CubicBezierTo) {
+					this.traceCubicBezierCurve(
+						command.controlPoint1, command.controlPoint2, command.endPoint
+					);
+				} else if (command.kind === PathCommandType.QuadraticBezierTo) {
+					this.traceQuadraticBezierCurve(
+						command.controlPoint, command.endPoint
+					);
+				}
+			}
+		}
+
+		if (lastStyle) {
+			this.endPath(lastStyle);
+		}
+	}
+
+	public drawPath(path: RenderablePathSpec) {
+		// If we're being called outside of an object,
+		// we can't delay rendering
+		if (this.objectLevel === 0) {
+			this.currentPaths = [path];
+			this.flushPath();
+			this.currentPaths = null;
+		} else {
+			// Otherwise, don't render paths all at once. This prevents faint lines between
+			// segments of the same stroke from being visible.
+			this.currentPaths!.push(path);
+		}
+	}
+
+	// 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,
+		});
+	}
+
+	// Note the start/end of an object with the given bounding box.
+	public startObject(_boundingBox: Rect2) {
+		this.currentPaths = [];
+		this.objectLevel ++;
+	}
+
+	public endObject() {
+		// Render the paths all at once
+		this.flushPath();
+		this.currentPaths = null;
+		this.objectLevel --;
+
+		if (this.objectLevel < 0) {
+			throw new Error(
+				'More objects have ended than have been started (negative object nesting level)!'
+			);
+		}
+	}
+
+	protected getNestingLevel() {
+		return this.objectLevel;
+	}
+
+	// Draw a representation of [points]. Intended for debugging.
+	public abstract drawPoints(...points: Point2[]): void;
+}