js-draw 0.18.2 → 0.19.0

package/src/math/Vec3.ts

@@ -1,218 +0,0 @@
-
-
-/**
- * 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

@@ -1,15 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,156 +0,0 @@
-// @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

@@ -1,249 +0,0 @@
-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?.();
-	}
-}