js-draw 0.9.0 → 0.9.2

package/src/Editor.ts

@@ -39,6 +39,7 @@ import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
 import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
+import CanvasRenderer from './rendering/renderers/CanvasRenderer';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -823,21 +824,44 @@ export class Editor {
 		});
 	}
 
+	// Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
+	// If `format` is not `image/png`, a PNG image URL may still be returned (as in the
+	// case of `HTMLCanvasElement::toDataURL`).
+	//
+	// The export resolution is the same as the size of the drawing canvas.
+	public toDataURL(format: 'image/png'|'image/jpeg'|'image/webp' = 'image/png'): string {
+		const canvas = document.createElement('canvas');
+
+		const resolution = this.importExportViewport.getResolution();
+
+		canvas.width = resolution.x;
+		canvas.height = resolution.y;
+
+		const ctx = canvas.getContext('2d')!;
+		const renderer = new CanvasRenderer(ctx, this.importExportViewport);
+
+		this.image.renderAll(renderer);
+
+		const dataURL = canvas.toDataURL(format);
+		return dataURL;
+	}
+
 	public toSVG(): SVGElement {
 		const importExportViewport = this.importExportViewport;
 		const svgNameSpace = 'http://www.w3.org/2000/svg';
 		const result = document.createElementNS(svgNameSpace, 'svg');
 		const renderer = new SVGRenderer(result, importExportViewport);
 
-		const origTransform = importExportViewport.canvasToScreenTransform;
-		// Reset the transform to ensure that (0, 0) is (0, 0)
+		const origTransform = this.importExportViewport.canvasToScreenTransform;
+		// Render with (0,0) at (0,0) — we'll handle translation with
+		// the viewBox property.
 		importExportViewport.resetTransform(Mat33.identity);
 
-		// Render **all** elements.
 		this.image.renderAll(renderer);
 
 		importExportViewport.resetTransform(origTransform);
 
+
 		// Just show the main region
 		const rect = importExportViewport.visibleRect;
 		result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));

package/src/SVGLoader.ts

@@ -3,7 +3,7 @@ import AbstractComponent from './components/AbstractComponent';
 import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
-import TextComponent, { TextStyle } from './components/Text';
+import TextComponent, { TextStyle } from './components/TextComponent';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Mat33 from './math/Mat33';
 import Path from './math/Path';

package/src/Viewport.ts

@@ -190,8 +190,8 @@ export class Viewport {
 
 		// Represent as k 10ⁿ for some n, k ∈ ℤ.
 		const decimalComponent = 10 ** Math.floor(Math.log10(Math.abs(scaleRatio)));
-		const roundAnountFactor = 2 ** roundAmount;
-		scaleRatio = Math.round(scaleRatio / decimalComponent * roundAnountFactor) / roundAnountFactor * decimalComponent;
+		const roundAmountFactor = 2 ** roundAmount;
+		scaleRatio = Math.round(scaleRatio / decimalComponent * roundAmountFactor) / roundAmountFactor * decimalComponent;
 
 		return scaleRatio;
 	}
@@ -223,9 +223,7 @@ export class Viewport {
 		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 1/3;
 
 		if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
-			// If larger than the target, ensure that the longest axis is visible.
-			// If smaller, shrink the visible rectangle as much as possible
-			const multiplier = (largerThanTarget ? Math.max : Math.min)(
+			const multiplier = Math.max(
 				toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h
 			);
 			const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);

package/src/commands/Command.ts

@@ -2,8 +2,8 @@ import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
 
 export abstract class Command {
-	public abstract apply(editor: Editor): void;
-	public abstract unapply(editor: Editor): void;
+	public abstract apply(editor: Editor): Promise<void>|void;
+	public abstract unapply(editor: Editor): Promise<void>|void;
 
 	// Called when the command is being deleted
 	public onDrop(_editor: Editor) { }

package/src/commands/uniteCommands.ts

@@ -9,23 +9,34 @@ class NonSerializableUnion extends Command {
 		super();
 	}
 
+	private static waitForAll(commands: (Promise<void>|void)[]): Promise<void>|void {
+		// If any are Promises...
+		if (commands.some(command => command && command['then'])) {
+			console.log('waiting...');
+			// Wait for all commands to finish.
+			return Promise.all(commands)
+				// Ensure we return a Promise<void> and not a Promise<void[]>
+				.then(() => {});
+		}
+
+		return;
+	}
+
 	public apply(editor: Editor) {
 		if (this.applyChunkSize === undefined) {
-			for (const command of this.commands) {
-				command.apply(editor);
-			}
+			const results = this.commands.map(cmd => cmd.apply(editor));
+			return NonSerializableUnion.waitForAll(results);
 		} else {
-			editor.asyncApplyCommands(this.commands, this.applyChunkSize);
+			return editor.asyncApplyCommands(this.commands, this.applyChunkSize);
 		}
 	}
 
 	public unapply(editor: Editor) {
 		if (this.applyChunkSize === undefined) {
-			for (const command of this.commands) {
-				command.unapply(editor);
-			}
+			const results = this.commands.map(cmd => cmd.unapply(editor));
+			return NonSerializableUnion.waitForAll(results);
 		} else {
-			editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
+			return editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
 		}
 	}
 
@@ -71,11 +82,11 @@ class SerializableUnion extends SerializableCommand {
 	}
 
 	public apply(editor: Editor) {
-		this.nonserializableCommand.apply(editor);
+		return this.nonserializableCommand.apply(editor);
 	}
 
 	public unapply(editor: Editor) {
-		this.nonserializableCommand.unapply(editor);
+		return this.nonserializableCommand.unapply(editor);
 	}
 
 	public description(editor: Editor, localizationTable: EditorLocalization): string {

package/src/components/{Text.test.ts → TextComponent.test.ts}

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import Mat33 from '../math/Mat33';
 import AbstractComponent from './AbstractComponent';
-import TextComponent, { TextStyle } from './Text';
+import TextComponent, { TextStyle } from './TextComponent';
 
 
 describe('Text', () => {

package/src/components/builders/LineBuilder.ts

@@ -51,6 +51,10 @@ export default class LineBuilder implements ComponentBuilder {
 						kind: PathCommandType.LineTo,
 						point: endPoint.minus(scaledEndNormal),
 					},
+					{
+						kind: PathCommandType.LineTo,
+						point: startPoint.minus(scaledStartNormal),
+					},
 				],
 				style: {
 					fill: this.startPoint.color,

package/src/components/lib.ts

@@ -6,7 +6,7 @@ export { default as StrokeSmoother, Curve as StrokeSmootherCurve } from './util/
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import TextComponent from './Text';
+import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 
 export {

package/src/components/util/StrokeSmoother.ts

@@ -238,7 +238,7 @@ export class StrokeSmoother {
 		if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
 			// Position the control point closer to the first -- the connecting
 			// segment will be roughly a line.
-			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 3));
+			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
 		}
 
 		console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,5 +1,5 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../math/Path';
 import Rect2 from '../../math/Rect2';

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,5 +1,5 @@
 import Color4 from '../../Color4';
-import TextComponent, { TextStyle } from '../../components/Text';
+import TextComponent, { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';

package/src/rendering/renderers/DummyRenderer.ts

@@ -1,6 +1,6 @@
 // Renderer that outputs nothing. Useful for automated tests.
 
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,6 +1,6 @@
 
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path from '../../math/Path';
 import Rect2 from '../../math/Rect2';
@@ -94,7 +94,11 @@ export default class SVGRenderer extends AbstractRenderer {
 		pathElem.setAttribute('d', this.lastPathString.join(' '));
 
 		const style = this.lastPathStyle;
-		pathElem.setAttribute('fill', style.fill.toHexString());
+		if (style.fill.a > 0) {
+			pathElem.setAttribute('fill', style.fill.toHexString());
+		} else {
+			pathElem.setAttribute('fill', 'none');
+		}
 
 		if (style.stroke) {
 			pathElem.setAttribute('stroke', style.stroke.color.toHexString());

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -1,4 +1,4 @@
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Vec2 } from '../../math/Vec2';
@@ -34,8 +34,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	public getDescription(): string {
 		return [
 			this.localizationTable.pathNodeCount(this.pathCount),
-			...(this.textNodeCount > 0 ? this.localizationTable.textNodeCount(this.textNodeCount) : []),
-			...(this.imageNodeCount > 0 ? this.localizationTable.imageNodeCount(this.imageNodeCount) : []),
+			...(this.textNodeCount > 0 ? [this.localizationTable.textNodeCount(this.textNodeCount)] : []),
+			...(this.imageNodeCount > 0 ? [this.localizationTable.imageNodeCount(this.imageNodeCount)] : []),
 			...this.descriptionBuilder
 		].join('\n');
 	}

package/src/toolbar/IconProvider.ts

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import { TextStyle } from '../components/Text';
+import { TextStyle } from '../components/TextComponent';
 import EventDispatcher from '../EventDispatcher';
 import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';

package/src/tools/FindTool.css

@@ -0,0 +1,7 @@
+
+.find-tool-overlay {
+    /* Show at the bottom of the screen. */
+    order: -1;
+
+    position: absolute;
+}

package/src/tools/FindTool.ts

@@ -0,0 +1,151 @@
+// Displays a find dialog that allows the user to search for and focus text. 
+//
+// @packageDocumentation
+
+import Editor from '../Editor';
+import TextComponent from '../components/TextComponent';
+import Rect2 from '../math/Rect2';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+
+export const cssPrefix = 'find-tool';
+
+export default class FindTool extends BaseTool {
+	private overlay: HTMLElement;
+	private searchInput: HTMLInputElement;
+	private currentMatchIdx: number = 0;
+
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.findLabel);
+
+		this.overlay = document.createElement('div');
+		this.fillOverlay();
+		editor.createHTMLOverlay(this.overlay);
+
+		this.overlay.style.display = 'none';
+		this.overlay.classList.add(`${cssPrefix}-overlay`);
+	}
+
+	private getMatches(searchFor: string): Rect2[] {
+		searchFor = searchFor.toLocaleLowerCase();
+		const allTextComponents = this.editor.image.getAllElements()
+			.filter(
+				elem => elem instanceof TextComponent
+			) as TextComponent[];
+		
+		const matches = allTextComponents.filter(
+			text => text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1
+		);
+
+		return matches.map(match => match.getBBox());
+	}
+
+	private focusCurrentMatch() {
+		const matches = this.getMatches(this.searchInput.value);
+		let matchIdx = this.currentMatchIdx % matches.length;
+
+		if (matchIdx < 0) {
+			matchIdx = matches.length + matchIdx;
+		}
+
+		if (matchIdx < matches.length) {
+			this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true));
+			this.editor.announceForAccessibility(
+				this.editor.localization.focusedFoundText(matchIdx + 1, matches.length)
+			);
+		}
+	}
+
+	private toNextMatch() {
+		this.currentMatchIdx ++;
+		this.focusCurrentMatch();
+	}
+
+	private toPrevMatch() {
+		this.currentMatchIdx --;
+		this.focusCurrentMatch();
+	}
+
+	private fillOverlay() {
+		const label = document.createElement('label');
+		this.searchInput = document.createElement('input');
+		const nextBtn = document.createElement('button');
+		const closeBtn = document.createElement('button');
+
+		// Math.random() ensures that the ID is unique (to allow us to refer to it
+		// with an htmlFor).
+		this.searchInput.setAttribute('id', `${cssPrefix}-searchInput-${Math.random()}`);
+		label.htmlFor = this.searchInput.getAttribute('id')!;
+
+		label.innerText = this.editor.localization.findLabel;
+		nextBtn.innerText = this.editor.localization.toNextMatch;
+		closeBtn.innerText = this.editor.localization.closeFindDialog;
+
+		this.searchInput.onkeydown = (ev: KeyboardEvent) => {
+			if (ev.key === 'Enter') {
+				if (ev.shiftKey) {
+					this.toPrevMatch();
+				} else {
+					this.toNextMatch();
+				}
+			}
+			else if (ev.key === 'Escape') {
+				this.setVisible(false);
+			}
+			else if (ev.key === 'f' && ev.ctrlKey) {
+				ev.preventDefault();
+				this.toggleVisible();
+			}
+		};
+
+		nextBtn.onclick = () => {
+			this.toNextMatch();
+		};
+		
+		closeBtn.onclick = () => {
+			this.setVisible(false);
+		};
+
+		this.overlay.replaceChildren(label, this.searchInput, nextBtn, closeBtn);
+	}
+
+	private isVisible() {
+		return this.overlay.style.display !== 'none';
+	}
+
+	private setVisible(visible: boolean) {
+		if (visible !== this.isVisible()) {
+			this.overlay.style.display = visible ? 'block' : 'none';
+
+			if (visible) {
+				this.searchInput.focus();
+				this.editor.announceForAccessibility(this.editor.localization.findDialogShown);
+			} else {
+				this.editor.focus();
+				this.editor.announceForAccessibility(this.editor.localization.findDialogHidden);
+			}
+		}
+	}
+
+	private toggleVisible() {
+		this.setVisible(!this.isVisible());
+	}
+
+	public onKeyPress(event: KeyPressEvent): boolean {
+		if (event.ctrlKey && event.key === 'f') {
+			this.toggleVisible();
+
+			return true;
+		}
+
+		return false;
+	}
+
+	public setEnabled(enabled: boolean) {
+		super.setEnabled(enabled);
+
+		if (enabled) {
+			this.setVisible(false);
+		}
+	}
+}

package/src/tools/PasteHandler.ts

@@ -14,7 +14,7 @@ import EditorImage from '../EditorImage';
 import SelectionTool from './SelectionTool/SelectionTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
-import { TextStyle } from '../components/Text';
+import { TextStyle } from '../components/TextComponent';
 import ImageComponent from '../components/ImageComponent';
 import Viewport from '../Viewport';
 

package/src/tools/SelectionTool/Selection.ts

@@ -170,7 +170,7 @@ export default class Selection {
 		});
 
 		const fullTransform = this.transform;
-		const currentTransfmCommands = this.computeTransformCommands();
+		const selectedElems = this.selectedElems;
 
 		// Reset for the next drag
 		this.transformCommands = [];
@@ -179,43 +179,84 @@ export default class Selection {
 
 		// Make the commands undo-able
 		this.editor.dispatch(new Selection.ApplyTransformationCommand(
-			this, currentTransfmCommands, fullTransform
+			this, selectedElems, fullTransform
 		));
 	}
 
 	static {
-		SerializableCommand.register('selection-tool-transform', (json: any, editor) => {
+		SerializableCommand.register('selection-tool-transform', (json: any, _editor) => {
 			// The selection box is lost when serializing/deserializing. No need to store box rotation
 			const fullTransform: Mat33 = new Mat33(...(json.transform as Mat33Array));
-			const commands = (json.commands as any[]).map(data => SerializableCommand.deserialize(data, editor));
+			const elemIds: string[] = (json.elems as any[] ?? []);
 
-			return new this.ApplyTransformationCommand(null, commands, fullTransform);
+			return new this.ApplyTransformationCommand(null, elemIds, fullTransform);
 		});
 	}
 
 	private static ApplyTransformationCommand = class extends SerializableCommand {
+		private transformCommands: Command[];
+		private selectedElemIds: string[];
+
 		public constructor(
 			private selection: Selection|null,
-			private currentTransfmCommands: SerializableCommand[],
+
+			// If a `string[]`, selectedElems is a list of element IDs.
+			selectedElems: AbstractComponent[]|string[],
+
+			// Full transformation used to transform elements.
 			private fullTransform: Mat33,
 		) {
 			super('selection-tool-transform');
+
+			const isIDList = (arr: AbstractComponent[]|string[]): arr is string[] => {
+				return typeof arr[0] === 'string';
+			};
+
+			// If a list of element IDs,
+			if (isIDList(selectedElems)) {
+				this.selectedElemIds = selectedElems as string[];
+			} else {
+				this.selectedElemIds = (selectedElems as AbstractComponent[]).map(elem => elem.getId());
+				this.transformCommands = selectedElems.map(elem => {
+					return elem.transformBy(this.fullTransform);
+				});
+			}
+		}
+
+		private resolveToElems(editor: Editor) {
+			if (this.transformCommands) {
+				return;
+			}
+
+			this.transformCommands = this.selectedElemIds.map(id => {
+				const elem = editor.image.lookupElement(id);
+
+				if (!elem) {
+					throw new Error(`Unable to find element with ID, ${id}.`);
+				}
+				
+				return elem.transformBy(this.fullTransform);
+			});
 		}
 
 		public async apply(editor: Editor) {
+			this.resolveToElems(editor);
+
 			this.selection?.setTransform(this.fullTransform, false);
 			this.selection?.updateUI();
-			await editor.asyncApplyCommands(this.currentTransfmCommands, updateChunkSize);
+			await editor.asyncApplyCommands(this.transformCommands, updateChunkSize);
 			this.selection?.setTransform(Mat33.identity, false);
 			this.selection?.recomputeRegion();
 			this.selection?.updateUI();
 		}
 
 		public async unapply(editor: Editor) {
+			this.resolveToElems(editor);
+
 			this.selection?.setTransform(this.fullTransform.inverse(), false);
 			this.selection?.updateUI();
 
-			await editor.asyncUnapplyCommands(this.currentTransfmCommands, updateChunkSize);
+			await editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize);
 			this.selection?.setTransform(Mat33.identity);
 			this.selection?.recomputeRegion();
 			this.selection?.updateUI();
@@ -223,13 +264,13 @@ export default class Selection {
 
 		protected serializeToJSON() {
 			return {
-				commands: this.currentTransfmCommands.map(command => command.serialize()),
+				elems: this.selectedElemIds,
 				transform: this.fullTransform.toArray(),
 			};
 		}
 
 		public description(_editor: Editor, localizationTable: EditorLocalization) {
-			return localizationTable.transformedElements(this.currentTransfmCommands.length);
+			return localizationTable.transformedElements(this.selectedElemIds.length);
 		}
 	};
 
@@ -453,7 +494,7 @@ export default class Selection {
 
 	public setSelectedObjects(objects: AbstractComponent[], bbox: Rect2) {
 		this.originalRegion = bbox;
-		this.selectedElems = objects;
+		this.selectedElems = objects.filter(object => object.isSelectable());
 		this.updateUI();
 	}
 

package/src/tools/SelectionTool/SelectionTool.ts

@@ -12,7 +12,7 @@ import Viewport from '../../Viewport';
 import BaseTool from '../BaseTool';
 import SVGRenderer from '../../rendering/renderers/SVGRenderer';
 import Selection from './Selection';
-import TextComponent from '../../components/Text';
+import TextComponent from '../../components/TextComponent';
 
 export const cssPrefix = 'selection-tool-';
 

package/src/tools/TextTool.ts

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import TextComponent, { TextStyle } from '../components/Text';
+import TextComponent, { TextStyle } from '../components/TextComponent';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Rect2 from '../math/Rect2';

package/src/tools/ToolController.ts

@@ -15,6 +15,7 @@ import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
 import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
+import FindTool from './FindTool';
 
 export default class ToolController {
 	private tools: BaseTool[];
@@ -50,6 +51,7 @@ export default class ToolController {
 			new UndoRedoShortcut(editor),
 			new ToolbarShortcutHandler(editor),
 			new ToolSwitcherShortcut(editor),
+			new FindTool(editor),
 			new PasteHandler(editor),
 		];
 		primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));

package/src/tools/localization.ts

@@ -15,6 +15,13 @@ export interface ToolLocalization {
 	changeTool: string;
 	pasteHandler: string;
 
+	findLabel: string;
+	toNextMatch: string;
+	closeFindDialog: string;
+	findDialogShown: string;
+	findDialogHidden: string;
+	focusedFoundText: (currentMatchNumber: number, totalMatches: number)=> string;
+
 	anyDevicePanning: string;
 
 	copied: (count: number, description: string) => string;
@@ -40,6 +47,13 @@ export const defaultToolLocalization: ToolLocalization = {
 	changeTool: 'Change tool',
 	pasteHandler: 'Copy paste handler',
 
+	findLabel: 'Find',
+	toNextMatch: 'Next',
+	closeFindDialog: 'Close',
+	findDialogShown: 'Find dialog shown',
+	findDialogHidden: 'Find dialog hidden',
+	focusedFoundText: (matchIdx: number, totalMatches: number) => `Viewing match ${matchIdx} of ${totalMatches}`,
+
 	anyDevicePanning: 'Any device panning',
 
 	copied: (count: number, description: string) => `Copied ${count} ${description}`,