js-draw 0.3.1 → 0.4.0

package/src/components/ImageComponent.ts

@@ -0,0 +1,149 @@
+import LineSegment2 from '../math/LineSegment2';
+import Mat33, { Mat33Array } from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+// Represents a raster image.
+export default class ImageComponent extends AbstractComponent {
+	protected contentBBox: Rect2;
+	private image: RenderableImage;
+
+	public constructor(image: RenderableImage) {
+		super('image-component');
+		this.image = {
+			...image,
+			label: image.label ?? image.image.getAttribute('alt') ?? image.image.getAttribute('aria-label') ?? undefined,
+		};
+
+		const isHTMLImageElem = (elem: HTMLCanvasElement|HTMLImageElement): elem is HTMLImageElement => {
+			return elem.getAttribute('src') !== undefined;
+		};
+		if (isHTMLImageElem(image.image) && !image.image.complete) {
+			image.image.onload = () => this.recomputeBBox();
+		}
+
+		this.recomputeBBox();
+	}
+
+	private getImageRect() {
+		return new Rect2(0, 0, this.image.image.width, this.image.image.height);
+	}
+
+	private recomputeBBox() {
+		this.contentBBox = this.getImageRect();
+		this.contentBBox = this.contentBBox.transformedBoundingBox(this.image.transform);
+	}
+
+	// Load from an image. Waits for the image to load if incomplete.
+	public static async fromImage(elem: HTMLImageElement, transform: Mat33) {
+		if (!elem.complete) {
+			await new Promise((resolve, reject) => {
+				elem.onload = resolve;
+				elem.onerror = reject;
+				elem.onabort = reject;
+			});
+		}
+
+		let width, height;
+		if (
+			typeof elem.width === 'number' && typeof elem.height === 'number'
+			&& elem.width !== 0 && elem.height !== 0
+		) {
+			width = elem.width as number;
+			height = elem.height as number;
+		} else {
+			width = elem.clientWidth;
+			height = elem.clientHeight;
+		}
+
+		let image;
+		let url = elem.src ?? '';
+		if (!url.startsWith('data:image/')) {
+			// Convert to a data URL:
+			const canvas = document.createElement('canvas');
+			canvas.width = width;
+			canvas.height = height;
+
+			const ctx = canvas.getContext('2d')!;
+			ctx.drawImage(elem, 0, 0, canvas.width, canvas.height);
+			url = canvas.toDataURL();
+			image = canvas;
+		} else {
+			image = new Image();
+			image.src = url;
+			image.width = width;
+			image.height = height;
+		}
+
+		return new ImageComponent({
+			image,
+			base64Url: url,
+			transform: transform,
+		});
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		canvas.drawImage(this.image);
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+		const rect = this.getImageRect();
+		const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));
+		for (const edge of edges) {
+			if (edge.intersects(lineSegment)) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	protected serializeToJSON() {
+		return {
+			src: this.image.base64Url,
+			label: this.image.label,
+
+			// Store the width and height for bounding box computations while the image is loading.
+			width: this.image.image.width,
+			height: this.image.image.height,
+
+			transform: this.image.transform.toArray(),
+		};
+	}
+
+	protected applyTransformation(affineTransfm: Mat33) {
+		this.image.transform = affineTransfm.rightMul(this.image.transform);
+		this.recomputeBBox();
+	}
+
+	public description(localizationTable: ImageComponentLocalization): string {
+		return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
+	}
+
+	protected createClone(): AbstractComponent {
+		return new ImageComponent({
+			...this.image,
+		});
+	}
+
+	public static deserializeFromJSON(data: any): ImageComponent {
+		if (!(typeof data.src === 'string')) {
+			throw new Error(`${data} has invalid format! Expected src property.`);
+		}
+
+		const image = new Image();
+		image.src = data.src;
+		image.width = data.width;
+		image.height = data.height;
+
+		return new ImageComponent({
+			image: image,
+			base64Url: image.src,
+			label: data.label,
+			transform: new Mat33(...(data.transform as Mat33Array)),
+		});
+	}
+}
+
+AbstractComponent.registerComponent('image-component', ImageComponent.deserializeFromJSON);

package/src/components/Text.ts

@@ -1,5 +1,5 @@
 import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
+import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
@@ -200,11 +200,7 @@ export default class Text extends AbstractComponent {
 			throw new Error(`Unable to deserialize transform, ${json.transform}.`);
 		}
 
-		const transformData = json.transform as [
-			number, number, number,
-			number, number, number,
-			number, number, number,
-		];
+		const transformData = json.transform as Mat33Array;
 		const transform = new Mat33(...transformData);
 
 		return new Text(textObjects, transform, style, getTextDimens);

package/src/components/builders/FreehandLineBuilder.ts

@@ -329,9 +329,9 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			return upperBoundary.intersects(lowerBoundary).length > 0;
 		};
 
-		// If the boundaries have two intersections, increasing the half vector's length could fix this.
+		// If the boundaries have intersections, increasing the half vector's length could fix this.
 		if (boundariesIntersect()) {
-			halfVec = halfVec.times(2);
+			halfVec = halfVec.times(1.1);
 		}
 
 		// Each starts at startPt ± startVec

package/src/components/lib.ts

@@ -1,12 +1,17 @@
 export * from './builders/types';
 export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
 
-import AbstractComponent from './AbstractComponent';
+export * from './AbstractComponent';
+export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import Text from './Text';
+import ImageComponent from './ImageComponent';
 
 export {
-	AbstractComponent,
 	Stroke,
 	Text,
+
+	Text as TextComponent,
+	Stroke as StrokeComponent,
+	ImageComponent,
 };

package/src/components/localization.ts

@@ -1,11 +1,15 @@
 export interface ImageComponentLocalization {
+	unlabeledImageNode: string;
 	text: (text: string)=> string;
+	imageNode: (description: string)=> string;
 	stroke: string;
     svgObject: string;
 }
 
 export const defaultComponentLocalization: ImageComponentLocalization = {
+	unlabeledImageNode: 'Unlabeled image node',
 	stroke: 'Stroke',
 	svgObject: 'SVG Object',
 	text: (text) => `Text object: ${text}`,
+	imageNode: (description: string) => `Image: ${description}`,
 };

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,6 +1,7 @@
 import LineSegment2 from './LineSegment2';
 import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import { Vec2 } from './Vec2';
+import Mat33 from './Mat33';
 
 loadExpectExtensions();
 
@@ -89,4 +90,12 @@ describe('Line2', () => {
 		const line = new LineSegment2(Vec2.of(1, 1), Vec2.of(2, 4));
 		expect(line.closestPointTo(Vec2.of(5, 2))).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

@@ -1,3 +1,4 @@
+import Mat33 from './Mat33';
 import Rect2 from './Rect2';
 import { Vec2, Point2 } from './Vec2';
 
@@ -149,6 +150,10 @@ export default class LineSegment2 {
 		}
 	}
 
+	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

@@ -142,6 +142,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/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];
 	}
 

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/localization.ts

@@ -2,13 +2,19 @@
 export interface TextRendererLocalization {
 	pathNodeCount(pathCount: number): string;
 	textNodeCount(nodeCount: number): string;
+	imageNodeCount(nodeCount: number): string;
     textNode(content: string): string;
+	unlabeledImageNode: string;
+	imageNode(label: string): string;
     rerenderAsText: string;
 }
 
 export const defaultTextRendererLocalization: TextRendererLocalization = {
 	pathNodeCount: (count: number) => `There are ${count} visible path objects.`,
 	textNodeCount: (count: number) => `There are ${count} visible text nodes.`,
+	imageNodeCount: (nodeCount: number) => `There are ${nodeCount} visible image nodes.`,
 	textNode: (content: string) => `Text: ${content}`,
+	imageNode: (label: string) => `Image: ${label}`,
+	unlabeledImageNode: 'Unlabeled image',
 	rerenderAsText: 'Re-render as text',
 };

package/src/rendering/renderers/AbstractRenderer.ts

@@ -14,6 +14,21 @@ export interface RenderablePathSpec {
 	path?: Path;
 }
 
+export interface RenderableImage {
+	transform: Mat33;
+
+	// An Image or HTMLCanvasElement. If an Image, it must be loaded from the same origin as this
+	// (and should have `src=this.base64Url`).
+	image: HTMLImageElement|HTMLCanvasElement;
+
+	// All images that can be drawn **must** have a base64 URL in the form
+	// data:image/[format];base64,[data here]
+	// If `image` is an Image, this should be equivalent to `image.src`.
+	base64Url: string;
+
+	label?: string;
+}
+
 export default abstract class AbstractRenderer {
 	// If null, this' transformation is linked to the Viewport
 	private selfTransform: Mat33|null = null;
@@ -41,6 +56,7 @@ export default abstract class AbstractRenderer {
 		controlPoint: Point2, endPoint: Point2,
 	): void;
 	public abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
+	public abstract drawImage(image: RenderableImage): void;
 
 	// Returns true iff the given rectangle is so small, rendering anything within
 	// it has no effect on the image.
@@ -106,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/rendering/renderers/CanvasRenderer.ts

@@ -6,7 +6,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
 export default class CanvasRenderer extends AbstractRenderer {
 	private ignoreObjectsAboveLevel: number|null = null;
@@ -168,6 +168,15 @@ export default class CanvasRenderer extends AbstractRenderer {
 		this.ctx.restore();
 	}
 
+	public drawImage(image: RenderableImage) {
+		this.ctx.save();
+		const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
+		this.transformBy(transform);
+
+		this.ctx.drawImage(image.image, 0, 0);
+		this.ctx.restore();
+	}
+
 	private clipLevels: number[] = [];
 	public startObject(boundingBox: Rect2, clip: boolean) {
 		if (this.isTooSmallToRender(boundingBox)) {