js-draw 0.4.1 → 0.6.0

package/src/toolbar/widgets/BaseWidget.ts

@@ -1,7 +1,7 @@
 import Editor from '../../Editor';
-import { EditorEventType, InputEvtType } from '../../types';
+import ToolbarShortcutHandler from '../../tools/ToolbarShortcutHandler';
+import { EditorEventType, InputEvtType, KeyPressEvent } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeDropdownIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
 
 export default abstract class BaseWidget {
@@ -33,6 +33,14 @@ export default abstract class BaseWidget {
 		this.label = document.createElement('label');
 		this.button.setAttribute('role', 'button');
 		this.button.tabIndex = 0;
+
+		const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
+
+		// If the onKeyPress function has been extended and the editor is configured to send keypress events to
+		// toolbar widgets,
+		if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
+			toolbarShortcutHandlers[0].registerListener(event => this.onKeyPress(event));
+		}
 	}
 
 	protected abstract getTitle(): string;
@@ -70,6 +78,7 @@ export default abstract class BaseWidget {
 					kind: InputEvtType.KeyPressEvent,
 					key: evt.key,
 					ctrlKey: evt.ctrlKey,
+					altKey: evt.altKey,
 				});
 			}
 		};
@@ -83,6 +92,7 @@ export default abstract class BaseWidget {
 				kind: InputEvtType.KeyUpEvent,
 				key: evt.key,
 				ctrlKey: evt.ctrlKey,
+				altKey: evt.altKey,
 			});
 		};
 
@@ -93,6 +103,13 @@ export default abstract class BaseWidget {
 		};
 	}
 
+	// Add a listener that is triggered when a key is pressed.
+	// Listeners will fire regardless of whether this widget is selected and require that
+	// {@link lib!Editor.toolController} to have an enabled {@link lib!ToolbarShortcutHandler} tool.
+	protected onKeyPress(_event: KeyPressEvent): boolean {
+		return false;
+	}
+
 	protected abstract handleClick(): void;
 
 	protected get hasDropdown() {
@@ -230,7 +247,7 @@ export default abstract class BaseWidget {
 	}
 
 	private createDropdownIcon(): Element {
-		const icon = makeDropdownIcon();
+		const icon = this.editor.icons.makeDropdownIcon();
 		icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
 		return icon;
 	}

package/src/toolbar/widgets/EraserToolWidget.ts

@@ -1,4 +1,3 @@
-import { makeEraserIcon } from '../icons';
 import BaseToolWidget from './BaseToolWidget';
 
 export default class EraserToolWidget extends BaseToolWidget {
@@ -6,7 +5,7 @@ export default class EraserToolWidget extends BaseToolWidget {
 		return this.localizationTable.eraser;
 	}
 	protected createIcon(): Element {
-		return makeEraserIcon();
+		return this.editor.icons.makeEraserIcon();
 	}
 
 	protected fillDropdown(_dropdown: HTMLElement): boolean {

package/src/toolbar/widgets/HandToolWidget.ts

@@ -1,10 +1,10 @@
 import Editor from '../../Editor';
 import Mat33 from '../../math/Mat33';
 import PanZoom, { PanZoomMode } from '../../tools/PanZoom';
+import ToolController from '../../tools/ToolController';
 import { EditorEventType } from '../../types';
 import Viewport from '../../Viewport';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeAllDevicePanningIcon, makeHandToolIcon, makeTouchPanningIcon, makeZoomIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import BaseWidget from './BaseWidget';
@@ -86,7 +86,7 @@ class ZoomWidget extends BaseWidget {
 	}
 	
 	protected createIcon(): Element {
-		return makeZoomIcon();
+		return this.editor.icons.makeZoomIcon();
 	}
 
 	protected handleClick(): void {
@@ -149,49 +149,71 @@ class HandModeWidget extends BaseWidget {
 
 export default class HandToolWidget extends BaseToolWidget {
 	private touchPanningWidget: HandModeWidget;
+	private allowTogglingBaseTool: boolean;
+	
 	public constructor(
-		editor: Editor, protected tool: PanZoom, localizationTable: ToolbarLocalization
+		editor: Editor,
+
+		// Pan zoom tool that overrides all other tools (enabling this tool for a device
+		// causes that device to pan/zoom instead of interact with the primary tools)
+		protected overridePanZoomTool: PanZoom,
+
+		localizationTable: ToolbarLocalization,
 	) {
+		const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
+		const tool = primaryHandTool ?? overridePanZoomTool;
 		super(editor, tool, localizationTable);
-		this.container.classList.add('dropdownShowable');
 
+		// Only allow toggling a hand tool if we're using the primary hand tool and not the override
+		// hand tool for this button.
+		this.allowTogglingBaseTool = primaryHandTool !== null;
+
+		// Allow showing/hiding the dropdown, even if `overridePanZoomTool` isn't enabled.
+		if (!this.allowTogglingBaseTool) {
+			this.container.classList.add('dropdownShowable');
+		}
+
+		// Controls for the overriding hand tool.
 		this.touchPanningWidget = new HandModeWidget(
 			editor, localizationTable,
 
-			tool, PanZoomMode.OneFingerTouchGestures,
-			makeTouchPanningIcon,
+			overridePanZoomTool, PanZoomMode.OneFingerTouchGestures,
+			() => this.editor.icons.makeTouchPanningIcon(),
 
 			localizationTable.touchPanning
 		);
 
 		this.addSubWidget(this.touchPanningWidget);
-		this.addSubWidget(
-			new HandModeWidget(
-				editor, localizationTable,
-
-				tool, PanZoomMode.SinglePointerGestures,
-				makeAllDevicePanningIcon,
-
-				localizationTable.anyDevicePanning
-			)
-		);
 		this.addSubWidget(
 			new ZoomWidget(editor, localizationTable)
 		);
 	}
 
+	private static getPrimaryHandTool(toolController: ToolController): PanZoom|null {
+		const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom);
+		const primaryPanZoomTool = primaryPanZoomToolList[0];
+		return primaryPanZoomTool as PanZoom|null;
+	}
+
 	protected getTitle(): string {
 		return this.localizationTable.handTool;
 	}
 
 	protected createIcon(): Element {
-		return makeHandToolIcon();
+		return this.editor.icons.makeHandToolIcon();
 	}
 
-	public setSelected(_selected: boolean): void {
+	protected handleClick(): void {
+		if (this.allowTogglingBaseTool) {
+			super.handleClick();
+		} else {
+			this.setDropdownVisible(!this.isDropdownVisible());
+		}
 	}
 
-	protected handleClick() {
-		this.setDropdownVisible(!this.isDropdownVisible());
+	public setSelected(selected: boolean): void {
+		if (this.allowTogglingBaseTool) {
+			super.setSelected(selected);
+		}
 	}
 }

package/src/toolbar/widgets/PenToolWidget.ts

@@ -5,9 +5,8 @@ import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../../
 import { ComponentBuilderFactory } from '../../components/builders/types';
 import Editor from '../../Editor';
 import Pen from '../../tools/Pen';
-import { EditorEventType } from '../../types';
+import { EditorEventType, KeyPressEvent } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeIconFromFactory, makePenIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
@@ -77,10 +76,10 @@ export default class PenToolWidget extends BaseToolWidget {
 			// Use a square-root scale to prevent the pen's tip from overflowing.
 			const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
 			const color = this.tool.getColor();
-			return makePenIcon(scale, color.toHexString());
+			return this.editor.icons.makePenIcon(scale, color.toHexString());
 		} else {
 			const strokeFactory = this.tool.getStrokeFactory();
-			return makeIconFromFactory(this.tool, strokeFactory);
+			return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory);
 		}
 	}
 
@@ -165,4 +164,21 @@ export default class PenToolWidget extends BaseToolWidget {
 		dropdown.replaceChildren(container);
 		return true;
 	}
+
+	protected onKeyPress(event: KeyPressEvent): boolean {
+		if (!this.isSelected()) {
+			return false;
+		}
+
+		// Map alt+0-9 to different pen types.
+		if (/^[0-9]$/.exec(event.key) && event.ctrlKey) {
+			const penTypeIdx = parseInt(event.key) - 1;
+			if (penTypeIdx >= 0 && penTypeIdx < this.penTypes.length) {
+				this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+				return true;
+			}
+		}
+
+		return false;
+	}
 }

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -1,7 +1,6 @@
 import Editor from '../../Editor';
 import SelectionTool from '../../tools/SelectionTool/SelectionTool';
-import { EditorEventType } from '../../types';
-import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
+import { EditorEventType, KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
@@ -14,16 +13,15 @@ export default class SelectionToolWidget extends BaseToolWidget {
 
 		const resizeButton = new ActionButtonWidget(
 			editor, localization,
-			makeResizeViewportIcon,
+			() => editor.icons.makeResizeViewportIcon(),
 			this.localizationTable.resizeImageToSelection,
 			() => {
-				const selection = this.tool.getSelection();
-				this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
+				this.resizeImageToSelection();
 			},
 		);
 		const deleteButton = new ActionButtonWidget(
 			editor, localization,
-			makeDeleteSelectionIcon,
+			() => editor.icons.makeDeleteSelectionIcon(),
 			this.localizationTable.deleteSelection,
 			() => {
 				const selection = this.tool.getSelection();
@@ -33,7 +31,7 @@ export default class SelectionToolWidget extends BaseToolWidget {
 		);
 		const duplicateButton = new ActionButtonWidget(
 			editor, localization,
-			makeDuplicateSelectionIcon,
+			() => editor.icons.makeDuplicateSelectionIcon(),
 			this.localizationTable.duplicateSelection,
 			() => {
 				const selection = this.tool.getSelection();
@@ -67,11 +65,29 @@ export default class SelectionToolWidget extends BaseToolWidget {
 		});
 	}
 
+	private resizeImageToSelection() {
+		const selection = this.tool.getSelection();
+		if (selection) {
+			this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+		}
+	}
+
+	protected onKeyPress(event: KeyPressEvent): boolean {
+		// Resize image to selection:
+		// Other keys are handled directly by the selection tool.
+		if (event.ctrlKey && event.key === 'r') {
+			this.resizeImageToSelection();
+			return true;
+		}
+
+		return false;
+	}
+
 	protected getTitle(): string {
 		return this.localizationTable.select;
 	}
 
 	protected createIcon(): Element {
-		return makeSelectionIcon();
+		return this.editor.icons.makeSelectionIcon();
 	}
 }

package/src/toolbar/widgets/TextToolWidget.ts

@@ -2,7 +2,6 @@ import Editor from '../../Editor';
 import TextTool from '../../tools/TextTool';
 import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeTextIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
@@ -26,7 +25,7 @@ export default class TextToolWidget extends BaseToolWidget {
 
 	protected createIcon(): Element {
 		const textStyle = this.tool.getTextStyle();
-		return makeTextIcon(textStyle);
+		return this.editor.icons.makeTextIcon(textStyle);
 	}
 
 	private static idCounter: number = 0;

package/src/tools/PanZoom.ts

@@ -182,10 +182,13 @@ export default class PanZoom extends BaseTool {
 		return true;
 	}
 
-	public onKeyPress({ key }: KeyPressEvent): boolean {
+	public onKeyPress({ key, ctrlKey, altKey }: KeyPressEvent): boolean {
 		if (!(this.mode & PanZoomMode.Keyboard)) {
 			return false;
 		}
+		if (ctrlKey || altKey) {
+			return false;
+		}
 
 		// No need to keep the same the transform for keyboard events.
 		this.transform = Viewport.transformBy(Mat33.identity);

package/src/tools/SelectionTool/SelectionTool.css

@@ -1,8 +1,9 @@
 
 .selection-tool-selection-background {
     background-color: var(--secondary-background-color);
-    opacity: 0.8;
+    opacity: 0.5;
     overflow: visible;
+    position: absolute;
 }
 
 .selection-tool-handle {

package/src/tools/SelectionTool/SelectionTool.test.ts

@@ -100,4 +100,44 @@ describe('SelectionTool', () => {
 		editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, 'a');
 		expect(editor.viewport.visibleRect.containsPoint(selection.region.center)).toBe(true);
 	});
+
+	it('shift+click should expand an existing selection', () => {
+		const { addTestStrokeCommand: stroke1Command } = createSquareStroke(50);
+		const { addTestStrokeCommand: stroke2Command } = createSquareStroke(500);
+
+		const editor = createEditor();
+		editor.dispatch(stroke1Command);
+		editor.dispatch(stroke2Command);
+
+		// Select the first stroke
+		const selectionTool = getSelectionTool(editor);
+		selectionTool.setEnabled(true);
+
+		// Select the smaller rectangle
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(40, 40));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(100, 100));
+
+		expect(selectionTool.getSelectedObjects()).toHaveLength(1);
+
+		// Shift key down.
+		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'Shift');
+
+		// Select the larger stroke.
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(600, 600));
+
+		expect(selectionTool.getSelectedObjects()).toHaveLength(2);
+
+		editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, 'Shift');
+
+		// Select the larger stroke without shift pressed
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(600, 600));
+		expect(selectionTool.getSelectedObjects()).toHaveLength(1);
+
+		// Select nothing
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(201, 201));
+		expect(selectionTool.getSelectedObjects()).toHaveLength(0);
+	});
 });

package/src/tools/SelectionTool/SelectionTool.ts

@@ -23,6 +23,9 @@ export default class SelectionTool extends BaseTool {
 	private selectionBox: Selection|null;
 	private lastEvtTarget: EventTarget|null = null;
 
+	private expandingSelectionBox: boolean = false;
+	private shiftKeyPressed: boolean = false;
+
 	public constructor(private editor: Editor, description: string) {
 		super(editor.notifier, description);
 
@@ -50,8 +53,11 @@ export default class SelectionTool extends BaseTool {
 		this.selectionBox = new Selection(
 			selectionStartPos, this.editor
 		);
-		// Remove any previous selection rects
-		this.handleOverlay.replaceChildren();
+
+		if (!this.expandingSelectionBox) {
+			// Remove any previous selection rects
+			this.prevSelectionBox?.cancelSelection();
+		}
 		this.selectionBox.addTo(this.handleOverlay);
 	}
 
@@ -60,7 +66,11 @@ export default class SelectionTool extends BaseTool {
 		if (event.allPointers.length === 1 && event.current.isPrimary) {
 			if (this.lastEvtTarget && this.selectionBox?.onDragStart(event.current, this.lastEvtTarget)) {
 				this.selectionBoxHandlingEvt = true;
-			} else {
+				this.expandingSelectionBox = false;
+			}
+			else {
+				// Shift key: Combine the new and old selection boxes at the end of the gesture.
+				this.expandingSelectionBox = this.shiftKeyPressed;
 				this.makeSelectionBox(event.current.canvasPos);
 			}
 
@@ -99,6 +109,7 @@ export default class SelectionTool extends BaseTool {
 		}
 	}
 
+	// Called after a gestureCancel and a pointerUp
 	private onGestureEnd() {
 		this.lastEvtTarget = null;
 
@@ -127,7 +138,19 @@ export default class SelectionTool extends BaseTool {
 		if (!this.selectionBox) return;
 
 		this.selectionBox.setToPoint(event.current.canvasPos);
-		this.onGestureEnd();
+
+		// Were we expanding the previous selection?
+		if (this.expandingSelectionBox && this.prevSelectionBox) {
+			// If so, finish expanding.
+			this.expandingSelectionBox = false;
+			this.selectionBox.resolveToObjects();
+			this.setSelection([
+				...this.selectionBox.getSelectedObjects(),
+				...this.prevSelectionBox.getSelectedObjects(),
+			]);
+		} else {
+			this.onGestureEnd();
+		}
 	}
 
 	public onGestureCancel(): void {
@@ -139,6 +162,8 @@ export default class SelectionTool extends BaseTool {
 			this.selectionBox = this.prevSelectionBox;
 			this.selectionBox?.addTo(this.handleOverlay);
 		}
+
+		this.expandingSelectionBox = false;
 	}
 
 	private static handleableKeys = [
@@ -150,6 +175,26 @@ export default class SelectionTool extends BaseTool {
 		'i', 'I', 'o', 'O',
 	];
 	public onKeyPress(event: KeyPressEvent): boolean {
+		if (this.selectionBox && event.ctrlKey && event.key === 'd') {
+			// Handle duplication on key up — we don't want to accidentally duplicate
+			// many times.
+			return true;
+		}
+		else if (event.key === 'a' && event.ctrlKey) {
+			// Handle ctrl+A on key up.
+			// Return early to prevent 'a' from moving the selection/view.
+			return true;
+		}
+		else if (event.ctrlKey) {
+			// Don't transform the selection with, for example, ctrl+i.
+			// Pass it to another tool, if apliccable.
+			return false;
+		}
+		else if (event.key === 'Shift') {
+			this.shiftKeyPressed = true;
+			return true;
+		}
+
 		let rotationSteps = 0;
 		let xTranslateSteps = 0;
 		let yTranslateSteps = 0;
@@ -245,6 +290,21 @@ export default class SelectionTool extends BaseTool {
 	}
 
 	public onKeyUp(evt: KeyUpEvent) {
+		if (evt.key === 'Shift') {
+			this.shiftKeyPressed = false;
+			return true;
+		}
+		else if (evt.ctrlKey) {
+			if (this.selectionBox && evt.key === 'd') {
+				this.editor.dispatch(this.selectionBox.duplicateSelectedObjects());
+				return true;
+			}
+			else if (evt.key === 'a') {
+				this.setSelection(this.editor.image.getAllElements());
+				return true;
+			}
+		}
+
 		if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
 			this.selectionBox.finalizeTransform();
 			return true;
@@ -307,11 +367,20 @@ export default class SelectionTool extends BaseTool {
 	}
 
 	// Get the object responsible for displaying this' selection.
+	// @internal
 	public getSelection(): Selection|null {
 		return this.selectionBox;
 	}
 
+	public getSelectedObjects(): AbstractComponent[] {
+		return this.selectionBox?.getSelectedObjects() ?? [];
+	}
+
+	// Select the given `objects`. Any non-selectable objects in `objects` are ignored.
 	public setSelection(objects: AbstractComponent[]) {
+		// Only select selectable objects.
+		objects = objects.filter(obj => obj.isSelectable());
+
 		let bbox: Rect2|null = null;
 		for (const object of objects) {
 			if (bbox) {

package/src/tools/ToolController.ts

@@ -13,6 +13,7 @@ import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
 import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
+import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 
 export default class ToolController {
 	private tools: BaseTool[];
@@ -38,6 +39,7 @@ export default class ToolController {
 			new Eraser(editor, localization.eraserTool),
 			new SelectionTool(editor, localization.selectionTool),
 			new TextTool(editor, localization.textTool, localization),
+			new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning)
 		];
 		this.tools = [
 			new PipetteTool(editor, localization.pipetteTool),
@@ -45,6 +47,7 @@ export default class ToolController {
 			...primaryTools,
 			keyboardPanZoomTool,
 			new UndoRedoShortcut(editor),
+			new ToolbarShortcutHandler(editor),
 			new ToolSwitcherShortcut(editor),
 			new PasteHandler(editor),
 		];

package/src/tools/ToolbarShortcutHandler.ts

@@ -0,0 +1,34 @@
+// Allows the toolbar to register keyboard events.
+// @packageDocumentation
+
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+
+// Returns true if the event was handled, false otherwise.
+type KeyPressListener = (event: KeyPressEvent)=>boolean;
+
+export default class ToolbarShortcutHandler extends BaseTool {
+	private listeners: Set<KeyPressListener> = new Set([]);
+	public constructor(editor: Editor) {
+		super(editor.notifier, editor.localization.changeTool);
+	}
+
+	public registerListener(listener: KeyPressListener) {
+		this.listeners.add(listener);
+	}
+
+	public removeListener(listener: KeyPressListener) {
+		this.listeners.delete(listener);
+	}
+	
+	public onKeyPress(event: KeyPressEvent): boolean {
+		for (const listener of this.listeners) {
+			if (listener(event)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+}

package/src/tools/UndoRedoShortcut.test.ts

@@ -19,6 +19,7 @@ describe('UndoRedoShortcut', () => {
 		editor.toolController.dispatchInputEvent({
 			kind: InputEvtType.KeyPressEvent,
 			ctrlKey: true,
+			altKey: false,
 			key: 'z',
 		});
 		
@@ -35,6 +36,7 @@ describe('UndoRedoShortcut', () => {
 		editor.toolController.dispatchInputEvent({
 			kind: InputEvtType.KeyPressEvent,
 			ctrlKey: true,
+			altKey: false,
 			key: 'z',
 		});
 
@@ -44,6 +46,7 @@ describe('UndoRedoShortcut', () => {
 		editor.toolController.dispatchInputEvent({
 			kind: InputEvtType.KeyPressEvent,
 			ctrlKey: true,
+			altKey: false,
 			key: 'Z',
 		});
 

package/src/tools/lib.ts

@@ -17,3 +17,4 @@ export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
 
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/src/tools/localization.ts

@@ -15,6 +15,8 @@ export interface ToolLocalization {
 	changeTool: string;
 	pasteHandler: string;
 
+	anyDevicePanning: string;
+
 	copied: (count: number, description: string) => string;
 	pasted: (count: number, description: string) => string;
 
@@ -38,6 +40,8 @@ export const defaultToolLocalization: ToolLocalization = {
 	changeTool: 'Change tool',
 	pasteHandler: 'Copy paste handler',
 
+	anyDevicePanning: 'Any device panning',
+
 	copied: (count: number, description: string) => `Copied ${count} ${description}`,
 	pasted: (count: number, description: string) => `Pasted ${count} ${description}`,
 

package/src/types.ts

@@ -52,14 +52,25 @@ export interface WheelEvt {
 
 export interface KeyPressEvent {
 	readonly kind: InputEvtType.KeyPressEvent;
+
+	// key, as given by an HTML `KeyboardEvent`
 	readonly key: string;
-	readonly ctrlKey: boolean;
+
+	// If `ctrlKey` is undefined, that is equivalent to `ctrlKey = false`.
+	readonly ctrlKey: boolean|undefined;
+
+	// If falsey, the `alt` key is not pressed.
+	readonly altKey: boolean|undefined;
 }
 
 export interface KeyUpEvent {
 	readonly kind: InputEvtType.KeyUpEvent;
 	readonly key: string;
-	readonly ctrlKey: boolean;
+
+	// As in `KeyPressEvent, if `ctrlKey` is undefined, that is equivalent to
+	// `ctrlKey = false`.
+	readonly ctrlKey: boolean|undefined;
+	readonly altKey: boolean|undefined;
 }
 
 export interface CopyEvent {
@@ -101,12 +112,6 @@ export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt
 export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 
 
-
-
-
-
-
-
 export enum EditorEventType {
 	ToolEnabled,
 	ToolDisabled,