js-draw 0.18.1 → 0.18.2

package/src/math/Vec3.ts

@@ -0,0 +1,218 @@
+
+
+/**
+ * A vector with three components. Can also be used to represent a two-component vector.
+ * 
+ * A `Vec3` is immutable.
+ */
+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. For example, `Vec3.of(1, 2, 3).at(1) → 2`. */
+	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!`);
+	}
+
+	/** Alias for this.magnitude. */
+	public length(): number {
+		return this.magnitude();
+	}
+
+	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).
+	 * 
+	 * This is equivalent to `Math.atan2(vec.y, vec.x)`.
+	 */
+	public angle(): number {
+		return Math.atan2(this.y, this.x);
+	}
+
+	/**
+	 * Returns a unit vector in the same direction as this.
+	 * 
+	 * If `this` has zero length, the resultant vector has `NaN` components.
+	 */
+	public normalized(): Vec3 {
+		const norm = this.magnitude();
+		return Vec3.of(this.x / norm, this.y / norm, this.z / norm);
+	}
+
+	/** @returns A copy of `this` multiplied by a scalar. */
+	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 Vec3.of(this.x - v.x, this.y - v.y, this.z - v.z);
+	}
+
+	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
+		);
+	}
+
+	/**
+	 * 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.
+	 */
+	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));
+	}
+
+	/** 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.
+	 * 
+	 * @example
+	 * ```
+	 * const a = Vec3.of(1, 2, 3);
+	 * const b = Vec3.of(0.5, 2.1, 2.9);
+	 * 
+	 * const zipped = a.zip(b, (aComponent, bComponent) => {
+	 *   return Math.min(aComponent, bComponent);
+	 * });
+	 * 
+	 * console.log(zipped.toString()); // → Vec(0.5, 2, 2.9)
+	 * ```
+	 */
+	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`.
+	 * 
+	 * @example
+	 * ```
+	 * console.log(Vec3.of(1, 2, 3).map(val => val + 1)); // → Vec(2, 3, 4)
+	 * ```
+	 */
+	public map(fn: (component: number, index: number)=> number): Vec3 {
+		return Vec3.of(
+			fn(this.x, 0), fn(this.y, 1), fn(this.z, 2)
+		);
+	}
+
+	public asArray(): [ number, number, number ] {
+		return [this.x, this.y, this.z];
+	}
+
+	/**
+	 * [fuzz] The maximum difference between two components for this and [other]
+	 * to be considered equal.
+	 * 
+	 * @example
+	 * ```
+	 * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 100);  // → true
+	 * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 0.1);  // → false
+	 * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 3);    // → true
+	 * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 3.01); // → true
+	 * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 2.99); // → false
+	 * ```
+	 */
+	public eq(other: Vec3, fuzz: number = 1e-10): 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/math/lib.ts

@@ -0,0 +1,15 @@
+import LineSegment2 from './LineSegment2';
+import Mat33 from './Mat33';
+import Path from './Path';
+import Rect2 from './Rect2';
+import { Vec2 } from './Vec2';
+import Vec3 from './Vec3';
+
+export {
+	LineSegment2,
+	Mat33,
+	Path,
+	Rect2,
+	Vec3,
+	Vec2,
+};

package/src/math/rounding.test.ts

@@ -0,0 +1,65 @@
+import { cleanUpNumber, toRoundedString, toStringOfSamePrecision } from './rounding';
+
+describe('toRoundedString', () => {
+	it('should round up numbers endings similar to .999999999999999', () => {
+		expect(toRoundedString(0.999999999)).toBe('1');
+		expect(toRoundedString(0.899999999)).toBe('.9');
+		expect(toRoundedString(9.999999999)).toBe('10');
+		expect(toRoundedString(-10.999999999)).toBe('-11');
+	});
+
+	it('should round up numbers similar to 10.999999998', () => {
+		expect(toRoundedString(10.999999998)).toBe('11');
+	});
+
+	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');
+	expect(toStringOfSamePrecision(-1.99999, '1.1', '5.32')).toBe('-2');
+	expect(toStringOfSamePrecision(1.99999, '1.1', '5.32')).toBe('2');
+	expect(toStringOfSamePrecision(1.89999, '1.1', '5.32')).toBe('1.9');
+	expect(toStringOfSamePrecision(9.99999999, '-1.1234')).toBe('10');
+	expect(toStringOfSamePrecision(9.999999998999996, '100')).toBe('10');
+	expect(toStringOfSamePrecision(0.000012345, '0.000012')).toBe('.000012');
+	expect(toStringOfSamePrecision(0.000012645, '.000012')).toBe('.000013');
+	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

@@ -0,0 +1,156 @@
+// @packageDocumentation @internal
+
+// Clean up stringified numbers
+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
+		text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
+		text = text.replace(/[.]0+$/, '.');
+
+		// Remove trailing period
+		text = text.replace(/[.]$/, '');
+	}
+
+	const firstChar = text.charAt(0);
+	if (firstChar === '0' || firstChar === '-') {
+		// Remove unnecessary leading zeroes.
+		text = text.replace(/^(0+)[.]/, '.');
+		text = text.replace(/^-(0+)[.]/, '-.');
+		text = text.replace(/^(-?)0+$/, '$10');
+	}
+
+	if (text === '-0') {
+		return '0';
+	}
+
+	return text;
+};
+
+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,4}$/;
+	const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,4}$/;
+
+	let text = num.toString(10);
+	if (text.indexOf('.') === -1) {
+		return text;
+	}
+
+	const roundingDownMatch = hasRoundingDownExp.exec(text);
+	if (roundingDownMatch) {
+		const negativeSign = roundingDownMatch[1];
+		const postDecimalString = roundingDownMatch[3];
+		const lastDigit = parseInt(postDecimalString.charAt(postDecimalString.length - 1), 10);
+		const postDecimal = parseInt(postDecimalString, 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) {
+			// Left-shift
+			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');
+
+	return cleanUpNumber(text);
+};
+
+const numberExp = /^([-]?)(\d*)[.](\d+)$/;
+export const getLenAfterDecimal = (numberAsString: string) => {
+	const numberMatch = numberExp.exec(numberAsString);
+	if (!numberMatch) {
+		// If not a match, either the number is exponential notation (or is something
+		// like NaN or Infinity)
+		if (numberAsString.search(/[eE]/) !== -1 || /^[a-zA-Z]+$/.exec(numberAsString)) {
+			return -1;
+		// Or it has no decimal point
+		} else {
+			return 0;
+		}
+	}
+
+	const afterDecimalLen = numberMatch[3].length;
+	return afterDecimalLen;
+};
+
+// [reference] should be a string representation of a base-10 number (no exponential (e.g. 10e10))
+export const toStringOfSamePrecision = (num: number, ...references: string[]): string => {
+	const text = num.toString(10);
+	const textMatch = numberExp.exec(text);
+	if (!textMatch) {
+		return text;
+	}
+
+	let decimalPlaces = -1;
+	for (const reference of references) {
+		decimalPlaces = Math.max(getLenAfterDecimal(reference), decimalPlaces);
+	}
+
+	if (decimalPlaces === -1) {
+		return toRoundedString(num);
+	}
+
+	// Make text's after decimal length match [afterDecimalLen].
+	let postDecimal = textMatch[3].substring(0, decimalPlaces);
+	let preDecimal = textMatch[2];
+	const nextDigit = textMatch[3].charAt(decimalPlaces);
+
+	if (nextDigit !== '') {
+		const asNumber = parseInt(nextDigit, 10);
+		if (asNumber >= 5) {
+			// Don't attempt to parseInt() an empty string.
+			if (postDecimal.length > 0) {
+				const leadingZeroMatch = /^(0+)(\d*)$/.exec(postDecimal);
+
+				let leadingZeroes = '';
+				let postLeading = postDecimal;
+				if (leadingZeroMatch) {
+					leadingZeroes = leadingZeroMatch[1];
+					postLeading = leadingZeroMatch[2];
+				}
+
+				postDecimal = (parseInt(postDecimal) + 1).toString();
+
+				// If postDecimal got longer, remove leading zeroes if possible
+				if (postDecimal.length > postLeading.length && leadingZeroes.length > 0) {
+					leadingZeroes = leadingZeroes.substring(1);
+				}
+
+				postDecimal = leadingZeroes + postDecimal;
+			}
+
+			if (postDecimal.length === 0 || postDecimal.length > decimalPlaces) {
+				preDecimal = (parseInt(preDecimal) + 1).toString();
+				postDecimal = postDecimal.substring(1);
+			}
+		}
+	}
+
+	const negativeSign = textMatch[1];
+	return cleanUpNumber(`${negativeSign}${preDecimal}.${postDecimal}`);
+};

package/src/rendering/Display.ts

@@ -0,0 +1,249 @@
+import AbstractRenderer from './renderers/AbstractRenderer';
+import CanvasRenderer from './renderers/CanvasRenderer';
+import { Editor } from '../Editor';
+import { EditorEventType } from '../types';
+import DummyRenderer from './renderers/DummyRenderer';
+import { Point2, Vec2 } from '../math/Vec2';
+import RenderingCache from './caching/RenderingCache';
+import TextOnlyRenderer from './renderers/TextOnlyRenderer';
+import Color4 from '../Color4';
+
+export enum RenderingMode {
+	DummyRenderer,
+	CanvasRenderer,
+	// SVGRenderer is not supported by the main display
+}
+
+/**
+ * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
+ *
+ * @example
+ * ```
+ * const editor = new Editor(document.body);
+ * const w = editor.display.width;
+ * const h = editor.display.height;
+ * const center = Vec2.of(w / 2, h / 2);
+ * const colorAtCenter = editor.display.getColorAt(center);
+ * ```
+ */
+export default class Display {
+	private dryInkRenderer: AbstractRenderer;
+	private wetInkRenderer: AbstractRenderer;
+	private textRenderer: TextOnlyRenderer;
+	private textRerenderOutput: HTMLElement|null = null;
+	private cache: RenderingCache;
+	private resizeSurfacesCallback?: ()=> void;
+	private flattenCallback?: ()=> void;
+
+	/** @internal */
+	public constructor(
+		private editor: Editor, mode: RenderingMode, private parent: HTMLElement|null
+	) {
+		if (mode === RenderingMode.CanvasRenderer) {
+			this.initializeCanvasRendering();
+		} else if (mode === RenderingMode.DummyRenderer) {
+			this.dryInkRenderer = new DummyRenderer(editor.viewport);
+			this.wetInkRenderer = new DummyRenderer(editor.viewport);
+		} else {
+			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: () => {
+				if (mode === RenderingMode.DummyRenderer) {
+					return new DummyRenderer(editor.viewport);
+				} else if (mode !== RenderingMode.CanvasRenderer) {
+					throw new Error('Unspported rendering mode');
+				}
+
+				// Make the canvas slightly larger than each cache block to prevent
+				// seams.
+				const canvas = document.createElement('canvas');
+				canvas.width = cacheBlockResolution.x + 1;
+				canvas.height = cacheBlockResolution.y + 1;
+				const ctx = canvas.getContext('2d');
+
+				return new CanvasRenderer(ctx!, editor.viewport);
+			},
+			isOfCorrectType: (renderer) => {
+				return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
+			},
+			blockResolution: cacheBlockResolution,
+			cacheSize: 600 * 600 * 4 * 90,
+			maxScale: 1.3,
+
+			// Require about 20 strokes with 4 parts each to cache an image in one of the
+			// parts of the cache grid.
+			minProportionalRenderTimePerCache: 20 * 4,
+
+			// Require about 105 strokes with 4 parts each to use the cache at all.
+			minProportionalRenderTimeToUseCache: 105 * 4,
+		});
+
+		this.editor.notifier.on(EditorEventType.DisplayResized, event => {
+			if (event.kind !== EditorEventType.DisplayResized) {
+				throw new Error('Mismatched event.kinds!');
+			}
+
+			this.resizeSurfacesCallback?.();
+		});
+	}
+
+	/**
+	 * @returns the visible width of the display (e.g. how much
+	 * space the display's element takes up in the x direction
+	 * in the DOM).
+	 */
+	public get width(): number {
+		return this.dryInkRenderer.displaySize().x;
+	}
+
+	public get height(): number {
+		return this.dryInkRenderer.displaySize().y;
+	}
+
+	/** @internal */
+	public getCache() {
+		return this.cache;
+	}
+
+	/**
+	 * @returns the color at the given point on the dry ink renderer, or `null` if `screenPos`
+	 * 	is not on the display.
+	 */
+	public getColorAt = (_screenPos: Point2): Color4|null => {
+		return null;
+	};
+
+	private initializeCanvasRendering() {
+		const dryInkCanvas = document.createElement('canvas');
+		const wetInkCanvas = document.createElement('canvas');
+		const dryInkCtx = dryInkCanvas.getContext('2d')!;
+		const wetInkCtx = wetInkCanvas.getContext('2d')!;
+
+		this.dryInkRenderer = new CanvasRenderer(dryInkCtx, this.editor.viewport);
+		this.wetInkRenderer = new CanvasRenderer(wetInkCtx, this.editor.viewport);
+
+		dryInkCanvas.className = 'dryInkCanvas';
+		wetInkCanvas.className = 'wetInkCanvas';
+
+		if (this.parent) {
+			this.parent.appendChild(dryInkCanvas);
+			this.parent.appendChild(wetInkCanvas);
+		}
+
+		this.resizeSurfacesCallback = () => {
+			const hasSizeMismatch = (canvas: HTMLCanvasElement): boolean => {
+				return canvas.clientHeight !== canvas.height || canvas.clientWidth !== canvas.width;
+			};
+
+			// Ensure that the drawing surfaces sizes match the
+			// canvas' sizes to prevent stretching.
+			if (hasSizeMismatch(dryInkCanvas) || hasSizeMismatch(wetInkCanvas)) {
+				dryInkCanvas.width = dryInkCanvas.clientWidth;
+				dryInkCanvas.height = dryInkCanvas.clientHeight;
+				wetInkCanvas.width = wetInkCanvas.clientWidth;
+				wetInkCanvas.height = wetInkCanvas.clientHeight;
+
+				this.editor.notifier.dispatch(EditorEventType.DisplayResized, {
+					kind: EditorEventType.DisplayResized,
+					newSize: Vec2.of(
+						this.width,
+						this.height,
+					),
+				});
+			}
+		};
+		this.resizeSurfacesCallback();
+
+		this.flattenCallback = () => {
+			dryInkCtx.drawImage(wetInkCanvas, 0, 0);
+		};
+
+		this.getColorAt = (screenPos: Point2) => {
+			const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+			const data = pixel?.data;
+
+			if (data) {
+				const color = Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
+				return color;
+			}
+			return null;
+		};
+	}
+
+	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;
+
+		this.textRerenderOutput = document.createElement('div');
+		this.textRerenderOutput.setAttribute('aria-live', 'polite');
+
+		rerenderButton.onclick = () => {
+			this.rerenderAsText();
+		};
+
+		textRendererOutputContainer.replaceChildren(rerenderButton, this.textRerenderOutput);
+		this.editor.createHTMLOverlay(textRendererOutputContainer);
+	}
+
+	/**
+	 * Rerenders the text-based display.
+	 * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.
+	 */
+	public rerenderAsText() {
+		this.textRenderer.clear();
+		this.editor.image.render(this.textRenderer, this.editor.viewport);
+		
+		if (this.textRerenderOutput) {
+			this.textRerenderOutput.innerText = this.textRenderer.getDescription();
+		}
+	}
+
+	/**
+	 * Clears the drawing surfaces and otherwise prepares for a rerender.
+	 * 
+	 * @returns the dry ink renderer.
+	 */
+	public startRerender(): AbstractRenderer {
+		this.resizeSurfacesCallback?.();
+		this.wetInkRenderer.clear();
+		this.dryInkRenderer.clear();
+
+		return this.dryInkRenderer;
+	}
+
+	/**
+	 * If `draftMode`, the dry ink renderer is configured to render
+	 * low-quality output.
+	 */
+	public setDraftMode(draftMode: boolean) {
+		this.dryInkRenderer.setDraftMode(draftMode);
+	}
+
+	/** @internal */
+	public getDryInkRenderer(): AbstractRenderer {
+		return this.dryInkRenderer;
+	}
+
+	/**
+	 * @returns The renderer used for showing action previews (e.g. an unfinished stroke).
+	 * The `wetInkRenderer`'s surface is stacked above the `dryInkRenderer`'s.
+	 */
+	public getWetInkRenderer(): AbstractRenderer {
+		return this.wetInkRenderer;
+	}
+
+	/** Re-renders the contents of the wetInkRenderer onto the dryInkRenderer. */
+	public flatten() {
+		this.flattenCallback?.();
+	}
+}