js-draw 1.0.1 → 1.1.0

package/src/localizations/de.ts

@@ -1,146 +0,0 @@
-import { defaultEditorLocalization, EditorLocalization } from '../localization';
-
-// German localization
-const localization: EditorLocalization = {
-	...defaultEditorLocalization,
-
-	pen: 'Stift',
-	eraser: 'Radierer',
-	select: 'Auswahl',
-	handTool: 'Verschieben',
-
-	zoom: 'Vergrößerung',
-
-	image: 'Bild',
-	inputAltText: 'Alt-Text: ',
-	chooseFile: 'Wähle Datei: ',
-	submit: 'Absenden',
-	cancel: 'Abbrechen',
-
-	resetView: 'Ansicht zurücksetzen',
-
-	thicknessLabel: 'Dicke: ',
-	colorLabel: 'Farbe: ',
-	fontLabel: 'Schriftart: ',
-	textSize: 'Größe: ',
-
-	resizeImageToSelection: 'Bildgröße an Auswahl anpassen',
-	deleteSelection: 'Auswahl löschen',
-	duplicateSelection: 'Auswahl duplizieren',
-
-	undo: 'Rückgängig',
-	redo: 'Wiederholen',
-
-	pickColorFromScreen: 'Farbe von Bildschirm auswählen',
-	clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen',
-	selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.',
-	touchPanning: 'Ansicht mit Touchscreen verschieben',
-	anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben',
-
-	selectPenTip: 'Objekt-Typ: ',
-	roundedTipPen: 'Freihand',
-	flatTipPen: 'Stift (druckempfindlich)',
-	arrowPen: 'Pfeil',
-	linePen: 'Linie',
-	outlinedRectanglePen: 'Umrissenes Rechteck',
-	filledRectanglePen: 'Ausgefülltes Rechteck',
-
-	lockRotation: 'Sperre Rotation',
-	paste: 'Einfügen',
-
-	dropdownShown: (toolName) =>`Dropdown-Menü für ${toolName} angezeigt`,
-	dropdownHidden: (toolName) =>`Dropdown-Menü für ${toolName} versteckt`,
-	zoomLevel: (zoomPercent) =>`Vergößerung: ${zoomPercent}%`,
-	colorChangedAnnouncement: (color) =>`Farbe zu ${color} geändert`,
-
-	imageSize: (size, units) => `Bild-Größe: ${size} ${units}`,
-	imageLoadError: (message) => `Fehler beim Laden des Bildes: ${message}`,
-	errorImageHasZeroSize: 'Fehler: Bild hat Größe Null',
-
-	penTool: (penNumber) =>`Stift ${penNumber}`,
-
-	selectionTool: 'Auswahl',
-	eraserTool: 'Radiergummi',
-	touchPanTool: 'Ansicht mit Touchscreen verschieben',
-	twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern',
-	undoRedoTool: 'Rückgängig/Wiederholen',
-	rightClickDragPanTool: 'Rechtsklick-Ziehen',
-	pipetteTool: 'Farbe von Bildschirm auswählen',
-	keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht',
-	textTool: 'Text',
-	enterTextToInsert: 'Einzufügender Text',
-	changeTool: 'Wechsle Werkzeug',
-	pasteHandler: 'Copy-Paste-Handler',
-	findLabel: 'Finde',
-	toNextMatch: 'Nächstes',
-	closeDialog: 'Schließen',
-	findDialogShown: 'Finde-Dialog angezeigt',
-	findDialogHidden: 'Finde-Dialog versteckt',
-	focusedFoundText: (matchIdx, totalMatches) => `Sieh Treffer ${matchIdx} von ${totalMatches} an`,
-
-	toolEnabledAnnouncement: (toolName) =>`${toolName} aktiviert`,
-	toolDisabledAnnouncement: (toolName) =>`${toolName} deaktiviert`,
-	updatedViewport: 'Transformierte Ansicht',
-	transformedElements: (elemCount) =>`${elemCount} Element${1 === elemCount ? '' : 'e'} transformiert`,
-	resizeOutputCommand: (newSize) =>`Bildgröße auf ${newSize.w}x${newSize.h} geändert`,
-	addElementAction: (componentDescription) =>`${componentDescription} hinzugefügt`,
-	eraseAction: (elemDescription, countErased)=>`${countErased} ${elemDescription} gelöscht`,
-	duplicateAction: (elemDescription, countErased)=>`${countErased} ${elemDescription} dupliziert`,
-	inverseOf: (actionDescription) =>`${actionDescription} umgekehrt`,
-
-	elements: 'Elemente',
-	erasedNoElements: 'Nichts entfernt',
-	duplicatedNoElements: 'Nichts dupliziert',
-	rotatedBy: (degrees) =>`${Math.abs(degrees)} Grad ${degrees < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn'} gedreht`,
-
-	movedLeft: 'Nacht links bewegt',
-	movedUp: 'Nacht oben bewegt',
-	movedDown: 'Nacht unten bewegt',
-	movedRight: 'Nacht rechts bewegt',
-	zoomedOut: 'Ansicht verkleinert',
-	zoomedIn: 'Ansicht vergrößert',
-
-	selectedElements: (count) =>`${count} Element${ 1 === count ? '' : 'e' } ausgewählt`,
-	stroke: 'Strich',
-	svgObject: 'SVG-Objekt',
-
-	text: (text) =>`Text-Objekt: ${text}`,
-	pathNodeCount: (count) =>`Es gibt ${count} sichtbare Pfad-Objekte.`,
-	textNodeCount: (count) =>`Es gibt ${count} sichtbare Text-Knotenpunkte.`,
-	textNode: (content) =>`Text: ${content}`,
-
-	imageNodeCount: (nodeCount) => `Es gibt ${nodeCount} sichtbare Bild-Knoten.`,
-	imageNode: label => `Bild: ${label}`,
-	unlabeledImageNode: 'Bild ohne Label',
-
-	rerenderAsText: 'Als Text darstellen',
-	accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.',
-
-	loading: percentage =>`Laden ${percentage}%...`,
-	doneLoading: 'Laden fertig',
-
-	imageEditor: 'Bild-Editor',
-	undoAnnouncement: (commandDescription) =>`${commandDescription} rückgängig gemacht`,
-	redoAnnouncement: (commandDescription) =>`${commandDescription} wiederholt`,
-	reformatSelection: 'Formatiere Auswahl',
-	documentProperties: 'Seite',
-	backgroundColor: 'Hintergrundfarbe: ',
-	imageWidthOption: 'Breite: ',
-	imageHeightOption: 'Höhe: ',
-	useGridOption: 'Gitter: ',
-	toggleOverflow: 'Mehr',
-	selectAllTool: 'Alle auswählen',
-	soundExplorer: 'Klangbasierte Bilderkundung',
-	disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung',
-	enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung',
-	copied: (count, description) => `${count} ${description} kopiert`,
-	pasted: (count, description) => `${count} ${description} eingefügt`,
-	unionOf: (actionDescription, actionCount) => `Vereinigung: ${actionCount} ${actionDescription}`,
-	emptyBackground: 'Leerer Hintergrund',
-	filledBackgroundWithColor: (color) => `Gefüllter Hintergrund (${color})`,
-	restyledElement: (elementDescription) => `${elementDescription} umgestaltet`,
-
-
-};
-
-export default localization;

package/src/localizations/en.ts

@@ -1,8 +0,0 @@
-import { defaultEditorLocalization, EditorLocalization } from '../localization';
-
-// Default localizations are already in English.
-const localization: EditorLocalization = {
-	...defaultEditorLocalization,
-};
-
-export default localization;

package/src/localizations/es.ts

@@ -1,74 +0,0 @@
-import { defaultEditorLocalization, EditorLocalization } from '../localization';
-
-// A partial Spanish localization.
-const localization: EditorLocalization = {
-	...defaultEditorLocalization,
-
-	// Strings for the main editor interface
-	// (see src/localization.ts)
-	loading: (percentage: number) => `Cargando: ${percentage}%...`,
-	imageEditor: 'Editor de dibujos',
-
-	undoAnnouncement: (commandDescription: string) => `${commandDescription} fue deshecho`,
-	redoAnnouncement: (commandDescription: string) => `${commandDescription} fue rehecho`,
-	undo: 'Deshace',
-	redo: 'Rehace',
-
-	// Strings for the toolbar
-	// (see src/toolbar/localization.ts)
-	pen: 'Lapiz',
-	eraser: 'Borrador',
-	select: 'Selecciona',
-	thicknessLabel: 'Tamaño',
-	colorLabel: 'Color',
-	doneLoading: 'El cargado terminó',
-	fontLabel: 'Fuente: ',
-	anyDevicePanning: 'Mover la pantalla con todo dispotivo',
-	touchPanning: 'Mover la pantalla con un dedo',
-	touchPanTool: 'Instrumento de mover la pantalla con un dedo',
-	outlinedRectanglePen: 'Rectángulo con nada más que un borde',
-	filledRectanglePen: 'Rectángulo sin borde',
-	linePen: 'Línea',
-	arrowPen: 'Flecha',
-	roundedTipPen: 'Lapiz Redondeado',
-	selectPenTip: 'Forma de dibuja',
-	handTool: 'Mover',
-	zoom: 'Zoom',
-	resetView: 'Reiniciar vista',
-	resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado',
-	deleteSelection: 'Borra la selección',
-	duplicateSelection: 'Duplica la selección',
-	pickColorFromScreen: 'Selecciona un color de la pantalla',
-	clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color',
-	dropdownShown(toolName: string): string {
-		return `Menú por ${toolName} es visible`;
-	},
-	dropdownHidden: function (toolName: string): string {
-		return `Menú por ${toolName} fue ocultado`;
-	},
-	colorChangedAnnouncement: function (color: string): string {
-		return `Color fue cambiado a ${color}`;
-	},
-	keyboardPanZoom: 'Mover la pantalla con el teclado',
-	penTool: function (penId: number): string {
-		return `Lapiz ${penId}`;
-	},
-	selectionTool: 'Selecciona',
-	eraserTool: 'Borrador',
-	textTool: 'Texto',
-	enterTextToInsert: 'Entra texto',
-	textSize: 'Tamaño',
-	rerenderAsText: 'Redibuja la pantalla al texto',
-	lockRotation: 'Bloquea rotación',
-	image: 'Imagen',
-	imageSize: (size: number, units: string) => `Tamaño del imagen: ${size} ${units}`,
-	imageLoadError: (message: string)=> `Error cargando imagen: ${message}`,
-	toggleOverflow: 'Más',
-
-	documentProperties: 'Fondo',
-	imageWidthOption: 'Ancho',
-	imageHeightOption: 'Alto',
-	backgroundColor: 'Color de fondo: '
-};
-
-export default localization;

package/src/localizations/getLocalizationTable.test.ts

@@ -1,27 +0,0 @@
-
-import { defaultEditorLocalization } from '../localization';
-import en from './en';
-import es from './es';
-import getLocalizationTable from './getLocalizationTable';
-
-describe('getLocalizationTable', () => {
-	it('should return the en localization for es_TEST', () => {
-		expect(getLocalizationTable([ 'es_TEST' ]) === es).toBe(true);
-	});
-
-	it('should return the default localization for unsupported language', () => {
-		expect(getLocalizationTable([ 'test' ]) === defaultEditorLocalization).toBe(true);
-	});
-
-	it('should return the first localization matching a language in the list of user locales', () => {
-		expect(getLocalizationTable([ 'test_TEST1', 'test_TEST2', 'test_TEST3', 'en_TEST', 'notalanguage']) === en).toBe(true);
-	});
-
-	it('should return the default localization for unsupported language', () => {
-		expect(getLocalizationTable([ 'test' ]) === defaultEditorLocalization).toBe(true);
-	});
-
-	it('should return first of user\'s supported languages', () => {
-		expect(getLocalizationTable([ 'es_MX', 'es_ES', 'en_US' ]) === es).toBe(true);
-	});
-});

package/src/localizations/getLocalizationTable.ts

@@ -1,74 +0,0 @@
-
-import { defaultEditorLocalization, EditorLocalization } from '../localization';
-import de from './de';
-import en from './en';
-import es from './es';
-
-export const allLocales: Record<string, EditorLocalization> = {
-	de,
-	en,
-	es,
-};
-
-// [locale]: A string in the format languageCode_Region or just languageCode. For example, en_US.
-const languageFromLocale = (locale: string) => {
-	const matches = /^(\w+)[_-](\w+)$/.exec(locale);
-	if (!matches) {
-		// If not in languageCode_region format, the locale should be the
-		// languageCode. Return that.
-		return locale;
-	}
-
-	return matches[1];
-};
-
-/**
- * Return the localization table in `localizationTables` that best matches
- * the list of `userLocales`. If there is no matching language, returns
- * `defaultLocalizationTable`.
- */
-export const matchingLocalizationTable = <T> (
-	userLocales: readonly string[],
-	localizationTables: Record<string, T>,
-	defaultLocalizationTable: T
-): T => {
-	let prevLanguage: string|undefined;
-	for (const locale of userLocales) {
-		const language = languageFromLocale(locale);
-
-		// If the specific localization of the language is not available, but
-		// a localization for the language is,
-		if (prevLanguage && language !== prevLanguage) {
-			if (prevLanguage in localizationTables) {
-				return localizationTables[prevLanguage];
-			}
-		}
-
-		// If the full locale (e.g. en_US) is available,
-		if (locale in localizationTables) {
-			return localizationTables[locale];
-		}
-
-		prevLanguage = language;
-	}
-
-	if (prevLanguage && prevLanguage in localizationTables) {
-		return localizationTables[prevLanguage];
-	} else {
-		return defaultLocalizationTable;
-	}
-};
-
-/**
- * Returns a localization table for the `Editor` that matches
- * the user's current locale.
- *
- * Returns the default localization table if no appropriate localization
- * exists.
- */
-const getLocalizationTable = (userLocales?: readonly string[]): EditorLocalization => {
-	userLocales ??= navigator.languages;
-	return matchingLocalizationTable(userLocales, allLocales, defaultEditorLocalization);
-};
-
-export default getLocalizationTable;

package/src/rendering/Display.ts

@@ -1,247 +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, Color4 } from '@js-draw/math';
-import RenderingCache from './caching/RenderingCache';
-import TextOnlyRenderer from './renderers/TextOnlyRenderer';
-
-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 main drawing surface and otherwise prepares for a rerender.
-	 *
-	 * @returns the dry ink renderer.
-	 */
-	public startRerender(): AbstractRenderer {
-		this.resizeSurfacesCallback?.();
-		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?.();
-	}
-}

package/src/rendering/RenderablePathSpec.ts

@@ -1,88 +0,0 @@
-
-import { Mat33, Path, PathCommand, PathCommandType, Point2, Rect2 } from '@js-draw/math';
-import RenderingStyle from './RenderingStyle';
-
-interface RenderablePathSpec {
-	startPoint: Point2;
-	commands: PathCommand[];
-	style: RenderingStyle;
-	path?: Path;
-}
-
-
-
-export const pathFromRenderable = (renderable: RenderablePathSpec): Path => {
-	if (renderable.path) {
-		return renderable.path;
-	}
-
-	return new Path(renderable.startPoint, renderable.commands);
-};
-
-export const pathToRenderable = (path: Path, style: RenderingStyle): RenderablePathSpec => {
-	return {
-		startPoint: path.startPoint,
-		style,
-		commands: path.parts,
-		path,
-	};
-};
-
-
-/**
- * @returns a Path that, when rendered, looks roughly equivalent to the given path.
- */
-export const visualEquivalent = (renderablePath: RenderablePathSpec, visibleRect: Rect2): RenderablePathSpec => {
-	const path = pathFromRenderable(renderablePath);
-	const strokeWidth = renderablePath.style.stroke?.width ?? 0;
-	const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
-
-	// Scale the expanded rect --- the visual equivalent is only close for huge strokes.
-	const expandedRect = visibleRect.grownBy(strokeWidth)
-		.transformedBoundingBox(Mat33.scaling2D(4, visibleRect.center));
-
-	// TODO: Handle simplifying very small paths.
-	if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
-		return renderablePath;
-	}
-	const parts: PathCommand[] = [];
-	let startPoint = path.startPoint;
-
-	for (const part of path.parts) {
-		const partBBox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
-		let endPoint;
-
-		if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
-			endPoint = part.point;
-		} else {
-			endPoint = part.endPoint;
-		}
-
-		const intersectsVisible = partBBox.intersects(visibleRect);
-
-		if (intersectsVisible) {
-			// TODO: Can we trim parts of paths that intersect the visible rectangle?
-			parts.push(part);
-		} else if (onlyStroked || part.kind === PathCommandType.MoveTo) {
-			// We're stroking (not filling) and the path doesn't intersect the bounding box.
-			// Don't draw it, but preserve the endpoints.
-			parts.push({
-				kind: PathCommandType.MoveTo,
-				point: endPoint,
-			});
-		}
-		else {
-			// Otherwise, we may be filling. Try to roughly preserve the filled region.
-			parts.push({
-				kind: PathCommandType.LineTo,
-				point: endPoint,
-			});
-		}
-
-		startPoint = endPoint;
-	}
-
-	return pathToRenderable(new Path(path.startPoint, parts), renderablePath.style);
-};
-
-export default RenderablePathSpec;