js-draw 0.1.2 → 0.1.5

package/src/components/Text.ts

@@ -0,0 +1,140 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer, { RenderingStyle } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+export interface TextStyle {
+	size: number;
+	fontFamily: string;
+	fontWeight?: string;
+	fontVariant?: string;
+	renderingStyle: RenderingStyle;
+}
+
+
+export default class Text extends AbstractComponent {
+	protected contentBBox: Rect2;
+
+	public constructor(protected textObjects: Array<string|Text>, private transform: Mat33, private style: TextStyle) {
+		super();
+		this.recomputeBBox();
+	}
+
+	public static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle) {
+		// Quote the font family if necessary.
+		const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
+
+		ctx.font =	[
+			(style.size ?? 12) + 'px',
+			style.fontWeight ?? '',
+			`${fontFamily}`,
+			style.fontWeight
+		].join(' ');
+
+		ctx.textAlign = 'left';
+	}
+
+	private static textMeasuringCtx: CanvasRenderingContext2D;
+	private static getTextDimens(text: string, style: TextStyle): Rect2 {
+		Text.textMeasuringCtx ??= document.createElement('canvas').getContext('2d')!;
+		const ctx = Text.textMeasuringCtx;
+		Text.applyTextStyles(ctx, style);
+
+		const measure = ctx.measureText(text);
+
+		// Text is drawn with (0,0) at the bottom left of the baseline.
+		const textY = -measure.actualBoundingBoxAscent;
+		const textHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
+		return new Rect2(0, textY, measure.width, textHeight);
+	}
+
+	private computeBBoxOfPart(part: string|Text) {
+		if (typeof part === 'string') {
+			const textBBox = Text.getTextDimens(part, this.style);
+			return textBBox.transformedBoundingBox(this.transform);
+		} else {
+			const bbox = part.contentBBox.transformedBoundingBox(this.transform);
+			return bbox;
+		}
+	}
+
+	private recomputeBBox() {
+		let bbox: Rect2|null = null;
+
+		for (const textObject of this.textObjects) {
+			const currentBBox = this.computeBBoxOfPart(textObject);
+			bbox ??= currentBBox;
+			bbox = bbox.union(currentBBox);
+		}
+
+		this.contentBBox = bbox ?? Rect2.empty;
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		const cursor = this.transform;
+
+		canvas.startObject(this.contentBBox);
+		for (const textObject of this.textObjects) {
+			if (typeof textObject === 'string') {
+				canvas.drawText(textObject, cursor, this.style);
+			} else {
+				canvas.pushTransform(cursor);
+				textObject.render(canvas);
+				canvas.popTransform();
+			}
+		}
+		canvas.endObject(this.getLoadSaveData());
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+
+		// Convert canvas space to internal space.
+		const invTransform = this.transform.inverse();
+		const p1InThisSpace = invTransform.transformVec2(lineSegment.p1);
+		const p2InThisSpace = invTransform.transformVec2(lineSegment.p2);
+		lineSegment = new LineSegment2(p1InThisSpace, p2InThisSpace);
+
+		for (const subObject of this.textObjects) {
+			if (typeof subObject === 'string') {
+				const textBBox = Text.getTextDimens(subObject, this.style);
+
+				// TODO: Use a better intersection check. Perhaps draw the text onto a CanvasElement and
+				// use pixel-testing to check for intersection with its contour.
+				if (textBBox.getEdges().some(edge => lineSegment.intersection(edge) !== null)) {
+					return true;
+				}
+			} else {
+				if (subObject.intersects(lineSegment)) {
+					return true;
+				}
+			}
+		}
+
+		return false;
+	}
+
+	protected applyTransformation(affineTransfm: Mat33): void {
+		this.transform = affineTransfm.rightMul(this.transform);
+		this.recomputeBBox();
+	}
+
+	private getText() {
+		const result: string[] = [];
+
+		for (const textObject of this.textObjects) {
+			if (typeof textObject === 'string') {
+				result.push(textObject);
+			} else {
+				result.push(textObject.getText());
+			}
+		}
+
+		return result.join(' ');
+	}
+
+	public description(localizationTable: ImageComponentLocalization): string {
+		return localizationTable.text(this.getText());
+	}
+}

package/src/components/localization.ts

@@ -1,4 +1,5 @@
 export interface ImageComponentLocalization {
+	text: (text: string)=> string;
 	stroke: string;
     svgObject: string;
 }
@@ -6,4 +7,5 @@ export interface ImageComponentLocalization {
 export const defaultComponentLocalization: ImageComponentLocalization = {
 	stroke: 'Stroke',
 	svgObject: 'SVG Object',
+	text: (text) => `Text object: ${text}`,
 };

package/src/geometry/Mat33.test.ts

@@ -141,4 +141,48 @@ describe('Mat33 tests', () => {
 			fullTransformInverse.transformVec2(fullTransform.transformVec2(Vec2.unitX))
 		).objEq(Vec2.unitX, fuzz);
 	});
+
+	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,
+		));
+	});
 });

package/src/geometry/Mat33.ts

@@ -268,4 +268,45 @@ export default class Mat33 {
 		// Translate such that [center] goes to (0, 0)
 		return result.rightMul(Mat33.translation(center.times(-1)));
 	}
+
+	// Converts a CSS-form matrix(a, b, c, d, e, f) to a Mat33.
+	public static fromCSSMatrix(cssString: string): Mat33 {
+		if (cssString === '' || cssString === 'none') {
+			return Mat33.identity;
+		}
+
+		const numberExp = '([-]?\\d*(?:\\.\\d*)?(?:[eE][-]?\\d+)?)';
+		const numberSepExp = '[, \\t\\n]';
+		const regExpSource = `^\\s*matrix\\s*\\(${
+			[
+				// According to MDN, matrix(a,b,c,d,e,f) has form:
+				// 		⎡ a c e ⎤
+				// 		⎢ b d f ⎥
+				// 		⎣ 0 0 1 ⎦
+				numberExp, numberExp, numberExp, // a, c, e
+				numberExp, numberExp, numberExp, // b, d, f
+			].join(`${numberSepExp}+`)
+		}${numberSepExp}*\\)\\s*$`;
+		const matrixExp = new RegExp(regExpSource, 'i');
+		const match = matrixExp.exec(cssString);
+
+		if (!match) {
+			throw new Error(`Unsupported transformation: ${cssString}`);
+		}
+
+		const matrixData = match.slice(1).map(entry => parseFloat(entry));
+		const a = matrixData[0];
+		const b = matrixData[1];
+		const c = matrixData[2];
+		const d = matrixData[3];
+		const e = matrixData[4];
+		const f = matrixData[5];
+
+		const transform = new Mat33(
+			a, c, e,
+			b, d, f,
+			0, 0, 1
+		);
+		return transform;
+	}
 }

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

@@ -19,14 +19,18 @@ describe('Path.toString', () => {
 	});
 
 	it('should fix rounding errors', () => {
-		const path = new Path(Vec2.of(0.10000001, 0.19999999), [
+		const path = new Path(Vec2.of(0.100000001, 0.199999999), [
 			{
 				kind: PathCommandType.QuadraticBezierTo,
 				controlPoint: Vec2.of(9999, -10.999999995),
-				endPoint: Vec2.of(0.000300001, 1.40000002),
+				endPoint: Vec2.of(0.000300001, 1.400000002),
 			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(184.00482359999998, 1)
+			}
 		]);
-		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4');
+		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4L184.0048236,1');
 	});
 
 	it('should not remove trailing zeroes before decimal points', () => {

package/src/geometry/Path.ts

@@ -303,6 +303,8 @@ export default class Path {
 				const postDecimal = parseInt(roundingDownMatch[3], 10);
 				const preDecimal = parseInt(roundingDownMatch[2], 10);
 
+				const origPostDecimalString = roundingDownMatch[3];
+
 				let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
 				let carry = 0;
 				if (newPostDecimal.length > postDecimal.toString().length) {
@@ -310,13 +312,21 @@ export default class Path {
 					newPostDecimal = newPostDecimal.substring(1);
 					carry = 1;
 				}
+
+				// parseInt(...).toString() removes leading zeroes. Add them back.
+				while (newPostDecimal.length < origPostDecimalString.length) {
+					newPostDecimal = carry.toString(10) + newPostDecimal;
+					carry = 0;
+				}
+
 				text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
 			}
 
 			text = text.replace(fixRoundingUpExp, '$1');
 
 			// Remove trailing zeroes
-			text = text.replace(/([.][^0]*)0+$/, '$1');
+			text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
+			text = text.replace(/[.]0+$/, '.');
 
 			// Remove trailing period
 			return text.replace(/[.]$/, '');

package/src/geometry/Rect2.ts

@@ -184,6 +184,14 @@ export default class Rect2 {
 		return this.topLeft.plus(Vec2.of(0, this.h));
 	}
 
+	public get width() {
+		return this.w;
+	}
+
+	public get height() {
+		return this.h;
+	}
+
 	// Returns edges in the order
 	// [ rightEdge, topEdge, leftEdge, bottomEdge ]
 	public getEdges(): LineSegment2[] {

package/src/localization.ts

@@ -1,10 +1,11 @@
 import { CommandLocalization, defaultCommandLocalization } from './commands/localization';
 import { defaultComponentLocalization, ImageComponentLocalization } from './components/localization';
+import { defaultTextRendererLocalization, TextRendererLocalization } from './rendering/localization';
 import { defaultToolbarLocalization, ToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization, ToolLocalization } from './tools/localization';
 
 
-export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization {
+export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
 	undoAnnouncement: (actionDescription: string)=> string;
 	redoAnnouncement: (actionDescription: string)=> string;
 	doneLoading: string;
@@ -17,6 +18,7 @@ export const defaultEditorLocalization: EditorLocalization = {
 	...defaultToolLocalization,
 	...defaultCommandLocalization,
 	...defaultComponentLocalization,
+	...defaultTextRendererLocalization,
 	loading: (percentage: number) => `Loading ${percentage}%...`,
 	imageEditor: 'Image Editor',
 	doneLoading: 'Done loading',

package/src/rendering/Display.ts

@@ -5,6 +5,7 @@ import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
 import { Vec2 } from '../geometry/Vec2';
 import RenderingCache from './caching/RenderingCache';
+import TextOnlyRenderer from './renderers/TextOnlyRenderer';
 
 export enum RenderingMode {
 	DummyRenderer,
@@ -15,6 +16,7 @@ export enum RenderingMode {
 export default class Display {
 	private dryInkRenderer: AbstractRenderer;
 	private wetInkRenderer: AbstractRenderer;
+	private textRenderer: TextOnlyRenderer;
 	private cache: RenderingCache;
 	private resizeSurfacesCallback?: ()=> void;
 	private flattenCallback?: ()=> void;
@@ -31,6 +33,9 @@ export default class Display {
 			throw new Error(`Unknown rendering mode, ${mode}!`);
 		}
 
+		this.textRenderer = new TextOnlyRenderer(editor.viewport, editor.localization);
+		this.initializeTextRendering();
+
 		const cacheBlockResolution = Vec2.of(600, 600);
 		this.cache = new RenderingCache({
 			createRenderer: () => {
@@ -129,6 +134,27 @@ export default class Display {
 		};
 	}
 
+	private initializeTextRendering() {
+		const textRendererOutputContainer = document.createElement('div');
+		textRendererOutputContainer.classList.add('textRendererOutputContainer');
+
+		const rerenderButton = document.createElement('button');
+		rerenderButton.classList.add('rerenderButton');
+		rerenderButton.innerText = this.editor.localization.rerenderAsText;
+
+		const rerenderOutput = document.createElement('div');
+		rerenderOutput.ariaLive = 'polite';
+
+		rerenderButton.onclick = () => {
+			this.textRenderer.clear();
+			this.editor.image.render(this.textRenderer, this.editor.viewport);
+			rerenderOutput.innerText = this.textRenderer.getDescription();
+		};
+
+		textRendererOutputContainer.replaceChildren(rerenderButton, rerenderOutput);
+		this.editor.createHTMLOverlay(textRendererOutputContainer);
+	}
+
 	// Clears the drawing surfaces and otherwise prepares for a rerender.
 	public startRerender(): AbstractRenderer {
 		this.resizeSurfacesCallback?.();

package/src/rendering/localization.ts

@@ -0,0 +1,10 @@
+
+export interface TextRendererLocalization {
+    textNode(content: string): string;
+    rerenderAsText: string;
+}
+
+export const defaultTextRendererLocalization: TextRendererLocalization = {
+	textNode: (content: string) => `Text: ${content}`,
+	rerenderAsText: 'Re-render as text',
+};

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,5 +1,6 @@
 import Color4 from '../../Color4';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
@@ -29,6 +30,7 @@ const stylesEqual = (a: RenderingStyle, b: RenderingStyle) => {
 export default abstract class AbstractRenderer {
 	// If null, this' transformation is linked to the Viewport
 	private selfTransform: Mat33|null = null;
+	private transformStack: Array<Mat33|null> = [];
 
 	protected constructor(private viewport: Viewport) { }
 
@@ -51,6 +53,7 @@ export default abstract class AbstractRenderer {
 	protected abstract traceQuadraticBezierCurve(
 		controlPoint: Point2, endPoint: Point2,
 	): void;
+	public abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
 
 	// Returns true iff the given rectangle is so small, rendering anything within
 	// it has no effect on the image.
@@ -166,6 +169,19 @@ export default abstract class AbstractRenderer {
 		this.selfTransform = transform;
 	}
 
+	public pushTransform(transform: Mat33) {
+		this.transformStack.push(this.selfTransform);
+		this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
+	}
+
+	public popTransform() {
+		if (this.transformStack.length === 0) {
+			throw new Error('Unable to pop more transforms than have been pushed!');
+		}
+
+		this.setTransform(this.transformStack.pop() ?? null);
+	}
+
 	// Get the matrix that transforms a vector on the canvas to a vector on this'
 	// rendering target.
 	public getCanvasToScreenTransform(): Mat33 {

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,4 +1,5 @@
 import Color4 from '../../Color4';
+import Text, { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -26,16 +27,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 		this.setDraftMode(false);
 	}
 
-	public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
-		return other instanceof CanvasRenderer;
-	}
-
-	public renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void {
-		if (!(other instanceof CanvasRenderer)) {
-			throw new Error(`${other} cannot be rendered onto ${this}`);
-		}
-		transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
-		this.ctx.save();
+	private transformBy(transformBy: Mat33) {
 		// From MDN, transform(a,b,c,d,e,f)
 		// takes input such that
 		// ⎡ a c e ⎤
@@ -46,6 +38,19 @@ export default class CanvasRenderer extends AbstractRenderer {
 			transformBy.a2, transformBy.b2, // c, d
 			transformBy.a3, transformBy.b3, // e, f 
 		);
+	}
+
+	public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
+		return other instanceof CanvasRenderer;
+	}
+
+	public renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void {
+		if (!(other instanceof CanvasRenderer)) {
+			throw new Error(`${other} cannot be rendered onto ${this}`);
+		}
+		transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
+		this.ctx.save();
+		this.transformBy(transformBy);
 		this.ctx.drawImage(other.ctx.canvas, 0, 0);
 		this.ctx.restore();
 	}
@@ -143,6 +148,25 @@ export default class CanvasRenderer extends AbstractRenderer {
 		super.drawPath(path);
 	}
 
+	public drawText(text: string, transform: Mat33, style: TextStyle): void {
+		this.ctx.save();
+		transform = this.getCanvasToScreenTransform().rightMul(transform);
+		this.transformBy(transform);
+		Text.applyTextStyles(this.ctx, style);
+
+		if (style.renderingStyle.fill.a !== 0) {
+			this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
+			this.ctx.fillText(text, 0, 0);
+		}
+		if (style.renderingStyle.stroke) {
+			this.ctx.strokeStyle = style.renderingStyle.stroke.color.toHexString();
+			this.ctx.lineWidth = style.renderingStyle.stroke.width;
+			this.ctx.strokeText(text, 0, 0);
+		}
+
+		this.ctx.restore();
+	}
+
 	private clipLevels: number[] = [];
 	public startObject(boundingBox: Rect2, clip: boolean) {
 		if (this.isTooSmallToRender(boundingBox)) {

package/src/rendering/renderers/DummyRenderer.ts

@@ -1,5 +1,6 @@
 // Renderer that outputs nothing. Useful for automated tests.
 
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -14,6 +15,7 @@ export default class DummyRenderer extends AbstractRenderer {
 	public lastFillStyle: RenderingStyle|null = null;
 	public lastPoint: Point2|null = null;
 	public objectNestingLevel: number = 0;
+	public lastText: string|null = null;
 
 	// List of points drawn since the last clear.
 	public pointBuffer: Point2[] = [];
@@ -40,6 +42,7 @@ export default class DummyRenderer extends AbstractRenderer {
 		this.clearedCount ++;
 		this.renderedPathCount = 0;
 		this.pointBuffer = [];
+		this.lastText = null;
 
 		// Ensure all objects finished rendering
 		if (this.objectNestingLevel > 0) {
@@ -88,6 +91,11 @@ export default class DummyRenderer extends AbstractRenderer {
 		// As such, it is unlikely to be the target of automated tests.
 	}
 
+
+	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
+		this.lastText = text;
+	}
+
 	public startObject(boundingBox: Rect2, _clip: boolean) {
 		super.startObject(boundingBox);
 

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,9 +1,11 @@
 
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
-import { svgAttributesDataKey, SVGLoaderUnknownAttribute } from '../../SVGLoader';
+import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 
@@ -107,6 +109,32 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.objectElems?.push(pathElem);
 	}
 
+	public drawText(text: string, transform: Mat33, style: TextStyle): void {
+		transform = this.getCanvasToScreenTransform().rightMul(transform);
+
+		const textElem = document.createElementNS(svgNameSpace, 'text');
+		textElem.appendChild(document.createTextNode(text));
+		textElem.style.transform = `matrix(
+			${transform.a1}, ${transform.b1},
+			${transform.a2}, ${transform.b2},
+			${transform.a3}, ${transform.b3}
+		)`;
+		textElem.style.fontFamily = style.fontFamily;
+		textElem.style.fontVariant = style.fontVariant ?? '';
+		textElem.style.fontWeight = style.fontWeight ?? '';
+		textElem.style.fontSize = style.size + 'px';
+		textElem.style.fill = style.renderingStyle.fill.toHexString();
+
+		if (style.renderingStyle.stroke) {
+			const strokeStyle = style.renderingStyle.stroke;
+			textElem.style.stroke = strokeStyle.color.toHexString();
+			textElem.style.strokeWidth = strokeStyle.width + 'px';
+		}
+
+		this.elem.appendChild(textElem);
+		this.objectElems?.push(textElem);
+	}
+
 	public startObject(boundingBox: Rect2) {
 		super.startObject(boundingBox);
 
@@ -127,12 +155,19 @@ export default class SVGRenderer extends AbstractRenderer {
 			// Restore any attributes unsupported by the app.
 			for (const elem of this.objectElems ?? []) {
 				const attrs = loaderData[svgAttributesDataKey] as SVGLoaderUnknownAttribute[]|undefined;
+				const styleAttrs = loaderData[svgStyleAttributesDataKey] as SVGLoaderUnknownStyleAttribute[]|undefined;
 
 				if (attrs) {
 					for (const [ attr, value ] of attrs) {
 						elem.setAttribute(attr, value);
 					}
 				}
+
+				if (styleAttrs) {
+					for (const attr of styleAttrs) {
+						elem.style.setProperty(attr.key, attr.value, attr.priority);
+					}
+				}
 			}
 		}
 	}

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -0,0 +1,51 @@
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import { Vec2 } from '../../geometry/Vec2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
+import { TextRendererLocalization } from '../localization';
+import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+
+// Outputs a description of what was rendered.
+
+export default class TextOnlyRenderer extends AbstractRenderer {
+	private descriptionBuilder: string[] = [];
+	public constructor(viewport: Viewport, private localizationTable: TextRendererLocalization) {
+		super(viewport);
+	}
+
+	public displaySize(): Vec3 {
+		// We don't have a graphical display, export a reasonable size.
+		return Vec2.of(500, 500);
+	}
+
+	public clear(): void {
+		this.descriptionBuilder = [];
+	}
+
+	public getDescription(): string {
+		return this.descriptionBuilder.join('\n');
+	}
+
+	protected beginPath(_startPoint: Vec3): void {
+	}
+	protected endPath(_style: RenderingStyle): void {
+	}
+	protected lineTo(_point: Vec3): void {
+	}
+	protected moveTo(_point: Vec3): void {
+	}
+	protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void {
+	}
+	protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void {
+	}
+	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
+		this.descriptionBuilder.push(this.localizationTable.textNode(text));
+	}
+	public isTooSmallToRender(rect: Rect2): boolean {
+		return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+	}
+	public drawPoints(..._points: Vec3[]): void {
+	}
+}

package/src/testing/loadExpectExtensions.ts

@@ -15,10 +15,7 @@ export const loadExpectExtensions = () => {
 			return {
 				pass,
 				message: () => {
-					if (pass) {
-						return `Expected ${expected} not to .eq ${actual}. Options(${eqArgs})`;
-					}
-					return `Expected ${expected} to .eq ${actual}. Options(${eqArgs})`;
+					return `Expected ${pass ? '!' : ''}(${actual}).eq(${expected}). Options(${eqArgs})`;
 				},
 			};
 		},