js-draw 0.3.0 → 0.3.2

package/src/math/Path.ts

@@ -47,12 +47,9 @@ interface IntersectionResult {
 
 type GeometryArrayType = Array<LineSegment2|Bezier>;
 export default class Path {
-	private cachedGeometry: GeometryArrayType|null;
 	public readonly bbox: Rect2;
 
 	public constructor(public readonly startPoint: Point2, public readonly parts: PathCommand[]) {
-		this.cachedGeometry = null;
-
 		// Initial bounding box contains one point: the start point.
 		this.bbox = Rect2.bboxOf([startPoint]);
 
@@ -63,6 +60,8 @@ export default class Path {
 		}
 	}
 
+	private cachedGeometry: GeometryArrayType|null = null;
+
 	// Lazy-loads and returns this path's geometry
 	public get geometry(): Array<LineSegment2|Bezier> {
 		if (this.cachedGeometry) {
@@ -106,6 +105,41 @@ export default class Path {
 		return this.cachedGeometry;
 	}
 
+	private cachedPolylineApproximation: LineSegment2[]|null = null;
+
+	// Approximates this path with a group of line segments.
+	public polylineApproximation(): LineSegment2[] {
+		if (this.cachedPolylineApproximation) {
+			return this.cachedPolylineApproximation;
+		}
+
+		const points: Point2[] = [];
+
+		for (const part of this.parts) {
+			switch (part.kind) {
+			case PathCommandType.CubicBezierTo:
+				points.push(part.controlPoint1, part.controlPoint2, part.endPoint);
+				break;
+			case PathCommandType.QuadraticBezierTo:
+				points.push(part.controlPoint, part.endPoint);
+				break;
+			case PathCommandType.MoveTo:
+			case PathCommandType.LineTo:
+				points.push(part.point);
+				break;
+			}
+		}
+
+		const result: LineSegment2[] = [];
+		let prevPoint = this.startPoint;
+		for (const point of points) {
+			result.push(new LineSegment2(prevPoint, point));
+			prevPoint = point;
+		}
+
+		return result;
+	}
+
 	public static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2 {
 		const points = [startPoint];
 		let exhaustivenessCheck: never;
@@ -129,6 +163,10 @@ export default class Path {
 	}
 
 	public intersection(line: LineSegment2): IntersectionResult[] {
+		if (!line.bbox.intersects(this.bbox)) {
+			return [];
+		}
+
 		const result: IntersectionResult[] = [];
 		for (const part of this.geometry) {
 			if (part instanceof LineSegment2) {
@@ -229,6 +267,55 @@ export default class Path {
 		]);
 	}
 
+	// Treats this as a closed path and returns true if part of `rect` is roughly within
+	// this path's interior.
+	//
+	// Note: Assumes that this is a closed, non-self-intersecting path.
+	public closedRoughlyIntersects(rect: Rect2): boolean {
+		if (rect.containsRect(this.bbox)) {
+			return true;
+		}
+
+		// Choose a point outside of the path.
+		const startPt = this.bbox.topLeft.minus(Vec2.of(1, 1));
+		const testPts = rect.corners;
+		const polygon = this.polylineApproximation();
+
+		for (const point of testPts) {
+			const testLine = new LineSegment2(point, startPt);
+
+			let intersectionCount = 0;
+			for (const line of polygon) {
+				if (line.intersects(testLine)) {
+					intersectionCount ++;
+				}
+			}
+
+			// Odd? The point is within the polygon!
+			if (intersectionCount % 2 === 1) {
+				return true;
+			}
+		}
+
+		// Grow the rectangle for possible additional precision.
+		const grownRect = rect.grownBy(Math.min(rect.size.x, rect.size.y));
+		const edges = [];
+		for (const subrect of grownRect.divideIntoGrid(4, 4)) {
+			edges.push(...subrect.getEdges());
+		}
+
+		for (const edge of edges) {
+			for (const line of polygon) {
+				if (edge.intersects(line)) {
+					return true;
+				}
+			}
+		}
+
+		// Even? Probably no intersection.
+		return false;
+	}
+
 	// 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].
@@ -273,6 +360,10 @@ export default class Path {
 	}
 
 	public static fromRenderable(renderable: RenderablePathSpec): Path {
+		if (renderable.path) {
+			return renderable.path;
+		}
+
 		return new Path(renderable.startPoint, renderable.commands);
 	}
 
@@ -281,18 +372,23 @@ export default class Path {
 			startPoint: this.startPoint,
 			style: fill,
 			commands: this.parts,
+			path: this,
 		};
 	}
 
+	private cachedStringVersion: string|null = null;
+
 	public toString(): string {
+		if (this.cachedStringVersion) {
+			return this.cachedStringVersion;
+		}
+
 		// Hueristic: Try to determine whether converting absolute to relative commands is worth it.
-		//            If we're near (0, 0), it probably isn't worth it and if bounding boxes are large,
-		//            it also probably isn't worth it.
-		const makeRelativeCommands =
-			Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.size.x) < 2
-			&& Math.abs(this.bbox.topLeft.y) > 10 && Math.abs(this.bbox.size.y) < 2;
+		const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
 
-		return Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+		const result = Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+		this.cachedStringVersion = result;
+		return result;
 	}
 
 	public serialize(): string {
@@ -301,7 +397,7 @@ export default class Path {
 
 	// @param onlyAbsCommands - True if we should avoid converting absolute coordinates to relative offsets -- such
 	//   conversions can lead to smaller output strings, but also take time.
-	public static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands: boolean = true): string {
+	public static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands?: boolean): string {
 		const result: string[] = [];
 
 		let prevPoint: Point2|undefined;
@@ -561,7 +657,9 @@ export default class Path {
 			}
 		}
 
-		return new Path(startPos ?? Vec2.zero, commands);
+		const result = new Path(startPos ?? Vec2.zero, commands);
+		result.cachedStringVersion = pathString;
+		return result;
 	}
 
 	public static empty: Path = new Path(Vec2.zero, []);

package/src/math/Rect2.ts

@@ -12,7 +12,7 @@ export interface RectTemplate {
 	height?: number;
 }
 
-// invariant: w > 0, h > 0.
+// invariant: w ≥ 0, h ≥ 0.
 export default class Rect2 {
 	// Derived state:
 

package/src/math/Triangle.ts

@@ -0,0 +1,29 @@
+import Mat33 from './Mat33';
+import Vec3 from './Vec3';
+
+export default class Triangle {
+	public constructor(
+        public readonly vertex1: Vec3,
+        public readonly vertex2: Vec3,
+        public readonly vertex3: Vec3,
+	) {}
+
+	public map(mapping: (vertex: Vec3)=>Vec3): Triangle {
+		return new Triangle(
+			mapping(this.vertex1),
+			mapping(this.vertex2),
+			mapping(this.vertex3),
+		);
+	}
+
+	// Transform, treating this as composed of 2D points.
+	public transformed2DBy(affineTransform: Mat33) {
+		return this.map(affineTransform.transformVec2);
+	}
+
+	// Transforms this by a linear transform --- verticies are treated as
+	// 3D points.
+	public transformedBy(linearTransform: Mat33) {
+		return this.map(linearTransform.transformVec3);
+	}
+}

package/src/rendering/Display.ts

@@ -76,9 +76,9 @@ export default class Display {
 				return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
 			},
 			blockResolution: cacheBlockResolution,
-			cacheSize: 600 * 600 * 4 * 120,
+			cacheSize: 600 * 600 * 4 * 90,
 			maxScale: 1.4,
-			minComponentsPerCache: 45,
+			minComponentsPerCache: 20,
 			minComponentsToUseCache: 105,
 		});
 

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

@@ -11,6 +11,22 @@ export interface RenderablePathSpec {
 	startPoint: Point2;
 	commands: PathCommand[];
 	style: RenderingStyle;
+	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 {
@@ -40,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.

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)) {

package/src/rendering/renderers/DummyRenderer.ts

@@ -7,7 +7,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 
 export default class DummyRenderer extends AbstractRenderer {
 	// Variables that track the state of what's been rendered
@@ -17,6 +17,7 @@ export default class DummyRenderer extends AbstractRenderer {
 	public lastPoint: Point2|null = null;
 	public objectNestingLevel: number = 0;
 	public lastText: string|null = null;
+	public lastImage: RenderableImage|null = null;
 
 	// List of points drawn since the last clear.
 	public pointBuffer: Point2[] = [];
@@ -44,6 +45,7 @@ export default class DummyRenderer extends AbstractRenderer {
 		this.renderedPathCount = 0;
 		this.pointBuffer = [];
 		this.lastText = null;
+		this.lastImage = null;
 
 		// Ensure all objects finished rendering
 		if (this.objectNestingLevel > 0) {
@@ -96,6 +98,9 @@ export default class DummyRenderer extends AbstractRenderer {
 	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
 		this.lastText = text;
 	}
+	public drawImage(image: RenderableImage) {
+		this.lastImage = image;
+	}
 
 	public startObject(boundingBox: Rect2, _clip: boolean) {
 		super.startObject(boundingBox);

package/src/rendering/renderers/SVGRenderer.ts

@@ -2,34 +2,35 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
 import Mat33 from '../../math/Mat33';
-import Path, { PathCommand, PathCommandType } from '../../math/Path';
+import Path from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import { toRoundedString } from '../../math/rounding';
 import { Point2, Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
-	private currentPath: PathCommand[]|null;
-	private pathStart: Point2|null;
-
-	private lastPathStyle: RenderingStyle|null;
-	private lastPath: PathCommand[]|null;
-	private lastPathStart: Point2|null;
+	private lastPathStyle: RenderingStyle|null = null;
+	private lastPathString: string[] = [];
 	private objectElems: SVGElement[]|null = null;
 
 	private overwrittenAttrs: Record<string, string|null> = {};
 
-	public constructor(private elem: SVGSVGElement, viewport: Viewport) {
+	// Renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+	public constructor(private elem: SVGSVGElement, viewport: Viewport, private sanitize: boolean = false) {
 		super(viewport);
 		this.clear();
 	}
 
 	// Sets an attribute on the root SVG element.
 	public setRootSVGAttribute(name: string, value: string|null) {
+		if (this.sanitize) {
+			return;
+		}
+	
 		// Make the original value of the attribute restorable on clear
 		if (!(name in this.overwrittenAttrs)) {
 			this.overwrittenAttrs[name] = this.elem.getAttribute(name);
@@ -47,57 +48,31 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	public clear() {
-		// Restore all alltributes
-		for (const attrName in this.overwrittenAttrs) {
-			const value = this.overwrittenAttrs[attrName];
-
-			if (value) {
-				this.elem.setAttribute(attrName, value);
-			} else {
-				this.elem.removeAttribute(attrName);
-			}
-		}
-		this.overwrittenAttrs = {};
-	}
+		this.lastPathString = [];
 
-	protected beginPath(startPoint: Point2) {
-		this.currentPath = [];
-		this.pathStart = this.canvasToScreen(startPoint);
-		this.lastPathStart ??= this.pathStart;
-	}
-
-	protected endPath(style: RenderingStyle) {
-		if (this.currentPath == null) {
-			throw new Error('No path exists to end! Make sure beginPath was called!');
-		}
-
-		// Try to extend the previous path, if possible
-		if (style.fill.eq(this.lastPathStyle?.fill) && this.lastPath != null) {
-			this.lastPath.push({
-				kind: PathCommandType.MoveTo,
-				point: this.pathStart!,
-			}, ...this.currentPath);
-			this.pathStart = null;
-			this.currentPath = null;
-		} else {
-			this.addPathToSVG();
-			this.lastPathStart = this.pathStart;
-			this.lastPathStyle = style;
-			this.lastPath = this.currentPath;
+		if (!this.sanitize) {
+			// Restore all all attributes
+			for (const attrName in this.overwrittenAttrs) {
+				const value = this.overwrittenAttrs[attrName];
 
-			this.pathStart = null;
-			this.currentPath = null;
+				if (value) {
+					this.elem.setAttribute(attrName, value);
+				} else {
+					this.elem.removeAttribute(attrName);
+				}
+			}
+			this.overwrittenAttrs = {};
 		}
 	}
 
 	// Push [this.fullPath] to the SVG
 	private addPathToSVG() {
-		if (!this.lastPathStyle || !this.lastPath) {
+		if (!this.lastPathStyle || this.lastPathString.length === 0) {
 			return;
 		}
 
 		const pathElem = document.createElementNS(svgNameSpace, 'path');
-		pathElem.setAttribute('d', Path.toString(this.lastPathStart!, this.lastPath));
+		pathElem.setAttribute('d', this.lastPathString.join(' '));
 
 		const style = this.lastPathStyle;
 		pathElem.setAttribute('fill', style.fill.toHexString());
@@ -111,26 +86,44 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.objectElems?.push(pathElem);
 	}
 
-	public drawText(text: string, transform: Mat33, style: TextStyle): void {
-		transform = this.getCanvasToScreenTransform().rightMul(transform);
+	public drawPath(pathSpec: RenderablePathSpec) {
+		const style = pathSpec.style;
+		const path = Path.fromRenderable(pathSpec);
 
+		// Try to extend the previous path, if possible
+		if (!style.fill.eq(this.lastPathStyle?.fill) || this.lastPathString.length === 0) {
+			this.addPathToSVG();
+			this.lastPathStyle = style;
+			this.lastPathString = [];
+		}
+		this.lastPathString.push(path.toString());
+	}
+
+	// Apply [elemTransform] to [elem].
+	private transformFrom(elemTransform: Mat33, elem: SVGElement) {
+		let transform = this.getCanvasToScreenTransform().rightMul(elemTransform);
 		const translation = transform.transformVec2(Vec2.zero);
 		transform = transform.rightMul(Mat33.translation(translation.times(-1)));
 
-		const textElem = document.createElementNS(svgNameSpace, 'text');
-		textElem.appendChild(document.createTextNode(text));
-		textElem.style.transform = `matrix(
+		elem.style.transform = `matrix(
 			${transform.a1}, ${transform.b1},
 			${transform.a2}, ${transform.b2},
 			${transform.a3}, ${transform.b3}
 		)`;
+		elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+		elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+	}
+
+	public drawText(text: string, transform: Mat33, style: TextStyle): void {
+		const textElem = document.createElementNS(svgNameSpace, 'text');
+		textElem.appendChild(document.createTextNode(text));
+		this.transformFrom(transform, textElem);
+
 		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();
-		textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
-		textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
 
 		if (style.renderingStyle.stroke) {
 			const strokeStyle = style.renderingStyle.stroke;
@@ -142,12 +135,23 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.objectElems?.push(textElem);
 	}
 
+	public drawImage(image: RenderableImage) {
+		const svgImgElem = document.createElementNS(svgNameSpace, 'image');
+		svgImgElem.setAttribute('href', image.base64Url);
+		svgImgElem.setAttribute('width', image.image.getAttribute('width') ?? '');
+		svgImgElem.setAttribute('height', image.image.getAttribute('height') ?? '');
+		svgImgElem.setAttribute('aria-label', image.image.getAttribute('aria-label') ?? image.image.getAttribute('alt') ?? '');
+		this.transformFrom(image.transform, svgImgElem);
+
+		this.elem.appendChild(svgImgElem);
+		this.objectElems?.push(svgImgElem);
+	}
+
 	public startObject(boundingBox: Rect2) {
 		super.startObject(boundingBox);
 
 		// Only accumulate a path within an object
-		this.lastPath = null;
-		this.lastPathStart = null;
+		this.lastPathString = [];
 		this.lastPathStyle = null;
 		this.objectElems = [];
 	}
@@ -158,7 +162,7 @@ export default class SVGRenderer extends AbstractRenderer {
 		// Don't extend paths across objects
 		this.addPathToSVG();
 
-		if (loaderData) {
+		if (loaderData && !this.sanitize) {
 			// Restore any attributes unsupported by the app.
 			for (const elem of this.objectElems ?? []) {
 				const attrs = loaderData[svgAttributesDataKey] as SVGLoaderUnknownAttribute[]|undefined;
@@ -179,49 +183,16 @@ export default class SVGRenderer extends AbstractRenderer {
 		}
 	}
 
-	protected lineTo(point: Point2) {
-		point = this.canvasToScreen(point);
-
-		this.currentPath!.push({
-			kind: PathCommandType.LineTo,
-			point,
-		});
-	}
-
-	protected moveTo(point: Point2) {
-		point = this.canvasToScreen(point);
-
-		this.currentPath!.push({
-			kind: PathCommandType.MoveTo,
-			point,
-		});
-	}
-
+	// Not implemented -- use drawPath instead.
+	private unimplementedMessage() { throw new Error('Not implemenented!'); }
+	protected beginPath(_startPoint: Point2) { this.unimplementedMessage(); }
+	protected endPath(_style: RenderingStyle) { this.unimplementedMessage(); }
+	protected lineTo(_point: Point2) { this.unimplementedMessage(); }
+	protected moveTo(_point: Point2) { this.unimplementedMessage(); }
 	protected traceCubicBezierCurve(
-		controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2
-	) {
-		controlPoint1 = this.canvasToScreen(controlPoint1);
-		controlPoint2 = this.canvasToScreen(controlPoint2);
-		endPoint = this.canvasToScreen(endPoint);
-
-		this.currentPath!.push({
-			kind: PathCommandType.CubicBezierTo,
-			controlPoint1,
-			controlPoint2,
-			endPoint,
-		});
-	}
-
-	protected traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2) {
-		controlPoint = this.canvasToScreen(controlPoint);
-		endPoint = this.canvasToScreen(endPoint);
-
-		this.currentPath!.push({
-			kind: PathCommandType.QuadraticBezierTo,
-			controlPoint,
-			endPoint,
-		});
-	}
+		_controlPoint1: Point2, _controlPoint2: Point2, _endPoint: Point2
+	) { this.unimplementedMessage(); }
+	protected traceQuadraticBezierCurve(_controlPoint: Point2, _endPoint: Point2) { this.unimplementedMessage(); }
 
 	public drawPoints(...points: Point2[]) {
 		points.map(point => {
@@ -235,6 +206,10 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	// Renders a **copy** of the given element.
 	public drawSVGElem(elem: SVGElement) {
+		if (this.sanitize) {
+			return;
+		}
+
 		this.elem.appendChild(elem.cloneNode(true));
 	}
 

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -6,7 +6,7 @@ import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 
 // Outputs a description of what was rendered.
 
@@ -14,6 +14,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	private descriptionBuilder: string[] = [];
 	private pathCount: number = 0;
 	private textNodeCount: number = 0;
+	private imageNodeCount: number = 0;
 
 	public constructor(viewport: Viewport, private localizationTable: TextRendererLocalization) {
 		super(viewport);
@@ -33,7 +34,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	public getDescription(): string {
 		return [
 			this.localizationTable.pathNodeCount(this.pathCount),
-			this.localizationTable.textNodeCount(this.textNodeCount),
+			...(this.textNodeCount > 0 ? this.localizationTable.textNodeCount(this.textNodeCount) : []),
+			...(this.imageNodeCount > 0 ? this.localizationTable.imageNodeCount(this.imageNodeCount) : []),
 			...this.descriptionBuilder
 		].join('\n');
 	}
@@ -55,6 +57,12 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 		this.descriptionBuilder.push(this.localizationTable.textNode(text));
 		this.textNodeCount ++;
 	}
+	public drawImage(image: RenderableImage) {
+		const label = image.label ? this.localizationTable.imageNode(image.label) : this.localizationTable.unlabeledImageNode;
+
+		this.descriptionBuilder.push(label);
+		this.imageNodeCount ++;
+	}
 	public isTooSmallToRender(rect: Rect2): boolean {
 		return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
 	}

package/src/toolbar/HTMLToolbar.ts

@@ -17,7 +17,6 @@ import HandToolWidget from './widgets/HandToolWidget';
 import BaseWidget from './widgets/BaseWidget';
 import { EraserTool, PenTool } from '../tools/lib';
 
-
 export const toolbarCSSPrefix = 'toolbar-';
 
 type UpdateColorisCallback = ()=>void;
@@ -28,6 +27,7 @@ export default class HTMLToolbar {
 	private static colorisStarted: boolean = false;
 	private updateColoris: UpdateColorisCallback|null = null;
 
+	/** @internal */
 	public constructor(
 		private editor: Editor, parent: HTMLElement,
 		private localizationTable: ToolbarLocalization = defaultToolbarLocalization,