js-draw 0.1.9 → 0.1.10

package/src/localizations/getLocalizationTable.test.ts

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

@@ -0,0 +1,53 @@
+
+import { defaultEditorLocalization, EditorLocalization } from '../localization';
+import en from './en';
+import es from './es';
+
+const allLocales: Record<string, EditorLocalization> = {
+	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];
+};
+
+const getLocalizationTable = (userLocales?: readonly string[]): EditorLocalization => {
+	userLocales ??= navigator.languages;
+
+	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 allLocales) {
+				return allLocales[prevLanguage];
+			}
+		}
+
+		// If the full locale (e.g. en_US) is available,
+		if (locale in allLocales) {
+			return allLocales[locale];
+		}
+
+		prevLanguage = language;
+	}
+
+	if (prevLanguage && prevLanguage in allLocales) {
+		return allLocales[prevLanguage];
+	} else {
+		return defaultEditorLocalization;
+	}
+};
+
+export default getLocalizationTable;

package/src/toolbar/HTMLToolbar.ts

@@ -138,13 +138,13 @@ export default class HTMLToolbar {
 		undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
 
 		const undoButton = this.addActionButton({
-			label: 'Undo',
+			label: this.localizationTable.undo,
 			icon: makeUndoIcon()
 		}, () => {
 			this.editor.history.undo();
 		}, undoRedoGroup);
 		const redoButton = this.addActionButton({
-			label: 'Redo',
+			label: this.localizationTable.redo,
 			icon: makeRedoIcon(),
 		}, () => {
 			this.editor.history.redo();
@@ -200,12 +200,9 @@ export default class HTMLToolbar {
 			(new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
 		}
 
-		for (const tool of toolController.getMatchingTools(ToolType.PanZoom)) {
-			if (!(tool instanceof PanZoom)) {
-				throw new Error('All SelectionTools must have kind === ToolType.PanZoom');
-			}
-	
-			(new HandToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		const panZoomTool = toolController.getMatchingTools(ToolType.PanZoom)[0];
+		if (panZoomTool && panZoomTool instanceof PanZoom) {
+			(new HandToolWidget(this.editor, panZoomTool, this.localizationTable)).addTo(this.container);
 		}
 
 		this.setupColorPickers();

package/src/toolbar/icons.ts

@@ -9,11 +9,11 @@ import { StrokeDataPoint } from '../types';
 import Viewport from '../Viewport';
 
 const svgNamespace = 'http://www.w3.org/2000/svg';
-const primaryForegroundFill = `
-	style='fill: var(--primary-foreground-color);'
+const iconColorFill = `
+	style='fill: var(--icon-color);'
 `;
-const primaryForegroundStrokeFill = `
-	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
+const iconColorStrokeFill = `
+	style='fill: var(--icon-color); stroke: var(--icon-color);'
 `;
 const checkerboardPatternDef = `
 	<pattern
@@ -39,7 +39,7 @@ export const makeRedoIcon = (mirror: boolean = false) => {
 	icon.innerHTML = `
 		<style>
 			.toolbar-svg-undo-redo-icon {
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 12;
 				stroke-linejoin: round;
 				stroke-linecap: round;
@@ -63,7 +63,7 @@ export const makeDropdownIcon = () => {
 	<g>
 		<path
 			d='M5,10 L50,90 L95,10 Z'
-			${primaryForegroundFill}
+			${iconColorFill}
 		/>
 	</g>
 	`;
@@ -80,7 +80,7 @@ export const makeEraserIcon = () => {
 		<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
 		<rect
 			x=10 y=10 width=80 height=50
-			${primaryForegroundFill}
+			${iconColorFill}
 		/>
 	</g>
 	`;
@@ -132,7 +132,7 @@ export const makeHandToolIcon = () => {
 			
 			fill='none'
 			style='
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 2;
 			'
 		/>
@@ -175,7 +175,7 @@ export const makeTouchPanningIcon = () => {
 			'
 			fill='none'
 			style='
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 2;
 			'
 		/>
@@ -241,7 +241,7 @@ export const makeAllDevicePanningIcon = () => {
 			'
 			fill='none'
 			style='
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 2;
 			'
 		/>
@@ -263,7 +263,7 @@ export const makeZoomIcon = () => {
 		textNode.style.textAlign = 'center';
 		textNode.style.textAnchor = 'middle';
 		textNode.style.fontSize = '55px';
-		textNode.style.fill = 'var(--primary-foreground-color)';
+		textNode.style.fill = 'var(--icon-color)';
 		textNode.style.fontFamily = 'monospace';
 
 		icon.appendChild(textNode);
@@ -315,7 +315,7 @@ export const makePenIcon = (tipThickness: number, color: string) => {
 		<!-- Pen grip -->
 		<path
 			d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
-			${primaryForegroundStrokeFill}
+			${iconColorStrokeFill}
 		/>
 	</g>
 	<g>
@@ -389,7 +389,7 @@ export const makePipetteIcon = (color?: Color4) => {
 			65,15 65,5      47,6
 		Z
 	`);
-	pipette.style.fill = 'var(--primary-foreground-color)';
+	pipette.style.fill = 'var(--icon-color)';
 
 	if (color) {
 		const defs = document.createElementNS(svgNamespace, 'defs');

package/src/toolbar/localization.ts

@@ -23,6 +23,7 @@ export interface ToolbarLocalization {
 	undo: string;
 	redo: string;
 	zoom: string;
+	selectionToolKeyboardShortcuts: string;
 
 	dropdownShown: (toolName: string)=> string;
 	dropdownHidden: (toolName: string)=> string;
@@ -46,6 +47,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	redo: 'Redo',
 	selectObjectType: 'Object type: ',
 	pickColorFronScreen: 'Pick color from screen',
+	selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
 
 	touchPanning: 'Touchscreen panning',
 	anyDevicePanning: 'Any device panning',

package/src/toolbar/toolbar.css

@@ -1,5 +1,7 @@
 .toolbar-root {
 	background-color: var(--primary-background-color);
+	--icon-color: var(--primary-foreground-color);
+
 
 	border: 1px solid var(--secondary-background-color);
 	border-radius: 2px;
@@ -38,6 +40,7 @@
 	text-align: center;
 	border-radius: 6px;
 
+	--icon-color: var(--primary-foreground-color);
 	background-color: var(--primary-background-color);
 	color: var(--primary-foreground-color);
 	border: none;
@@ -83,6 +86,7 @@
 .toolbar-toolContainer.selected .toolbar-button {
 	background-color: var(--secondary-background-color);
 	color: var(--secondary-foreground-color);
+	--icon-color: var(--secondary-foreground-color);
 }
 
 .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
@@ -173,4 +177,5 @@
 
 .color-input-container .pipetteButton.active {
 	background-color: var(--secondary-background-color);
+	--icon-color: var(--secondary-foreground-color);
 }

package/src/toolbar/widgets/BaseWidget.ts

@@ -1,4 +1,5 @@
 import Editor from '../../Editor';
+import { InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
@@ -50,6 +51,39 @@ export default abstract class BaseWidget {
 	}
 
 	protected setupActionBtnClickListener(button: HTMLElement) {
+		const clickTriggers = { enter: true, ' ': true, };
+		button.onkeydown = (evt) => {
+			let handled = false;
+
+			if (evt.key in clickTriggers) {
+				if (!this.disabled) {
+					this.handleClick();
+					handled = true;
+				}
+			}
+
+			// If we didn't do anything with the event, send it to the editor.
+			if (!handled) {
+				this.editor.toolController.dispatchInputEvent({
+					kind: InputEvtType.KeyPressEvent,
+					key: evt.key,
+					ctrlKey: evt.ctrlKey,
+				});
+			}
+		};
+
+		button.onkeyup = evt => {
+			if (evt.key in clickTriggers) {
+				return;
+			}
+
+			this.editor.toolController.dispatchInputEvent({
+				kind: InputEvtType.KeyUpEvent,
+				key: evt.key,
+				ctrlKey: evt.ctrlKey,
+			});
+		};
+
 		button.onclick = () => {
 			if (!this.disabled) {
 				this.handleClick();

package/src/tools/BaseTool.ts

@@ -1,4 +1,4 @@
-import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, EditorEventType, KeyPressEvent } from '../types';
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, EditorEventType, KeyPressEvent, KeyUpEvent } from '../types';
 import { ToolType } from './ToolController';
 import ToolEnabledGroup from './ToolEnabledGroup';
 
@@ -24,6 +24,10 @@ export default abstract class BaseTool implements PointerEvtListener {
 		return false;
 	}
 
+	public onKeyUp(_event: KeyUpEvent): boolean {
+		return false;
+	}
+
 	public setEnabled(enabled: boolean) {
 		this.enabled = enabled;
 

package/src/tools/PanZoom.ts

@@ -16,11 +16,13 @@ interface PinchData {
 	dist: number;
 }
 
+
 export enum PanZoomMode {
 	OneFingerTouchGestures = 0x1,
 	TwoFingerTouchGestures = 0x1 << 1,
 	RightClickDrags = 0x1 << 2,
 	SinglePointerGestures = 0x1 << 3,
+	Keyboard = 0x1 << 4,
 }
 
 export default class PanZoom extends BaseTool {
@@ -180,6 +182,10 @@ export default class PanZoom extends BaseTool {
 	}
 
 	public onKeyPress({ key }: KeyPressEvent): boolean {
+		if (!(this.mode & PanZoomMode.Keyboard)) {
+			return false;
+		}
+
 		let translation = Vec2.zero;
 		let scale = 1;
 		let rotation = 0;

package/src/tools/SelectionTool.test.ts

@@ -66,7 +66,7 @@ describe('SelectionTool', () => {
 
 		// Drag the object
 		selection!.handleBackgroundDrag(Vec2.of(5, 5));
-		selection!.finishDragging();
+		selection!.finalizeTransform();
 
 		expect(testStroke.getBBox().topLeft).toMatchObject({
 			x: 5,
@@ -80,4 +80,27 @@ describe('SelectionTool', () => {
 			y: 0,
 		});
 	});
+
+	it('moving the selection with a keyboard should move the view to keep the selection in view', () => {
+		const { addTestStrokeCommand } = createSquareStroke();
+		const editor = createEditor();
+		editor.dispatch(addTestStrokeCommand);
+
+		// Select the stroke
+		const selectionTool = getSelectionTool(editor);
+		selectionTool.setEnabled(true);
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(10, 10));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(100, 100));
+
+		const selection = selectionTool.getSelection();
+		if (selection === null) {
+			// Throw to allow TypeScript's non-null checker to understand that selection
+			// must be non-null after this.
+			throw new Error('Selection should be non-null.');
+		}
+
+		selection.handleBackgroundDrag(Vec2.of(0, -1000));
+		expect(editor.viewport.visibleRect.containsPoint(selection.region.center)).toBe(true);
+	});
 });

package/src/tools/SelectionTool.ts

@@ -8,7 +8,8 @@ import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
 import { EditorLocalization } from '../localization';
-import { EditorEventType, PointerEvt } from '../types';
+import { EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
+import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 
@@ -163,15 +164,15 @@ class Selection {
 
 		makeDraggable(draggableBackground, (deltaPosition: Vec2) => {
 			this.handleBackgroundDrag(deltaPosition);
-		}, () => this.finishDragging());
+		}, () => this.finalizeTransform());
 
 		makeDraggable(resizeCorner, (deltaPosition) => {
 			this.handleResizeCornerDrag(deltaPosition);
-		}, () => this.finishDragging());
+		}, () => this.finalizeTransform());
 
 		makeDraggable(this.rotateCircle, (_deltaPosition, offset) => {
 			this.handleRotateCircleDrag(offset);
-		}, () => this.finishDragging());
+		}, () => this.finalizeTransform());
 	}
 
 	// Note a small change in the position of this' background while dragging
@@ -186,10 +187,7 @@ class Selection {
 		// Snap position to a multiple of 10 (additional decimal points lead to larger files).
 		deltaPosition = this.editor.viewport.roundPoint(deltaPosition);
 
-		this.region = this.region.translatedBy(deltaPosition);
-		this.transform = this.transform.rightMul(Mat33.translation(deltaPosition));
-
-		this.previewTransformCmds();
+		this.transformPreview(Mat33.translation(deltaPosition));
 	}
 
 	public handleResizeCornerDrag(deltaPosition: Vec2) {
@@ -203,21 +201,13 @@ class Selection {
 		const newSize = this.region.size.plus(deltaPosition);
 
 		if (newSize.y > 0 && newSize.x > 0) {
-			this.region = this.region.resizedTo(newSize);
-			const scaleFactor = Vec2.of(this.region.w / oldWidth, this.region.h / oldHeight);
+			const scaleFactor = Vec2.of(newSize.x / oldWidth, newSize.y / oldHeight);
 
-			const currentTransfm = Mat33.scaling2D(scaleFactor, this.region.topLeft);
-			this.transform = this.transform.rightMul(currentTransfm);
-			this.previewTransformCmds();
+			this.transformPreview(Mat33.scaling2D(scaleFactor, this.region.topLeft));
 		}
 	}
 
 	public handleRotateCircleDrag(offset: Vec2) {
-		this.boxRotation = this.boxRotation % (2 * Math.PI);
-		if (this.boxRotation < 0) {
-			this.boxRotation += 2 * Math.PI;
-		}
-
 		let targetRotation = offset.angle();
 		targetRotation = targetRotation % (2 * Math.PI);
 		if (targetRotation < 0) {
@@ -237,9 +227,7 @@ class Selection {
 			deltaRotation *= rotationDirection;
 		}
 
-		this.transform = this.transform.rightMul(Mat33.zRotation(deltaRotation, this.region.center));
-		this.boxRotation += deltaRotation;
-		this.previewTransformCmds();
+		this.transformPreview(Mat33.zRotation(deltaRotation, this.region.center));
 	}
 
 	private computeTransformCommands() {
@@ -248,8 +236,29 @@ class Selection {
 		});
 	}
 
+	// Applies, previews, but doesn't finalize the given transformation.
+	public transformPreview(transform: Mat33) {
+		this.transform = this.transform.rightMul(transform);
+		const deltaRotation = transform.transformVec3(Vec2.unitX).angle();
+		transform = transform.rightMul(Mat33.zRotation(-deltaRotation, this.region.center));
+
+		this.boxRotation += deltaRotation;
+		this.boxRotation = this.boxRotation % (2 * Math.PI);
+		if (this.boxRotation < 0) {
+			this.boxRotation += 2 * Math.PI;
+		}
+
+		const newSize = transform.transformVec3(this.region.size);
+		const translation = transform.transformVec2(this.region.topLeft).minus(this.region.topLeft);
+		this.region = this.region.resizedTo(newSize);
+		this.region = this.region.translatedBy(translation);
+
+		this.previewTransformCmds();
+		this.scrollTo();
+	}
+
 	// Applies the current transformation to the selection
-	public finishDragging() {
+	public finalizeTransform() {
 		this.transformationCommands.forEach(cmd => {
 			cmd.unapply(this.editor);
 		});
@@ -321,7 +330,6 @@ class Selection {
 		this.updateUI();
 	}
 
-
 	public appendBackgroundBoxTo(elem: HTMLElement) {
 		if (this.backgroundBox.parentElement) {
 			this.backgroundBox.remove();
@@ -444,6 +452,19 @@ class Selection {
 		this.rotateCircle.style.transform = `rotate(${-rotationDeg}deg)`;
 	}
 
+	// Scroll the viewport to this. Does not zoom
+	public scrollTo() {
+		const viewport = this.editor.viewport;
+		const visibleRect = viewport.visibleRect;
+		if (!visibleRect.containsPoint(this.region.center)) {
+			const closestPoint = visibleRect.getClosestPointOnBoundaryTo(this.region.center);
+			const delta = this.region.center.minus(closestPoint);
+			this.editor.dispatchNoAnnounce(
+				new Viewport.ViewportTransform(Mat33.translation(delta.times(-1))), false
+			);
+		}
+	}
+
 	public deleteSelectedObjects(): Command {
 		return new Erase(this.selectedElems);
 	}
@@ -473,6 +494,8 @@ export default class SelectionTool extends BaseTool {
 			this.selectionBox?.recomputeRegion();
 			this.selectionBox?.updateUI();
 		});
+
+		this.editor.handleKeyEventsFrom(this.handleOverlay);
 	}
 
 	public onPointerDown(event: PointerEvt): boolean {
@@ -512,7 +535,12 @@ export default class SelectionTool extends BaseTool {
 			this.editor.announceForAccessibility(
 				this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount())
 			);
+			this.zoomToSelection();
+		}
+	}
 
+	private zoomToSelection() {
+		if (this.selectionBox) {
 			const selectionRect = this.selectionBox.region;
 			this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
 		}
@@ -532,6 +560,106 @@ export default class SelectionTool extends BaseTool {
 		this.selectionBox?.appendBackgroundBoxTo(this.handleOverlay);
 	}
 
+	private static handleableKeys = [
+		'a', 'h', 'ArrowLeft',
+		'd', 'l', 'ArrowRight',
+		'q', 'k', 'ArrowUp',
+		'e', 'j', 'ArrowDown',
+		'r', 'R',
+		'i', 'I', 'o', 'O',
+	];
+	public onKeyPress(event: KeyPressEvent): boolean {
+		let rotationSteps = 0;
+		let xTranslateSteps = 0;
+		let yTranslateSteps = 0;
+		let xScaleSteps = 0;
+		let yScaleSteps = 0;
+
+		switch (event.key) {
+		case 'a':
+		case 'h':
+		case 'ArrowLeft':
+			xTranslateSteps -= 1;
+			break;
+		case 'd':
+		case 'l':
+		case 'ArrowRight':
+			xTranslateSteps += 1;
+			break;
+		case 'q':
+		case 'k':
+		case 'ArrowUp':
+			yTranslateSteps -= 1;
+			break;
+		case 'e':
+		case 'j':
+		case 'ArrowDown':
+			yTranslateSteps += 1;
+			break;
+		case 'r':
+			rotationSteps += 1;
+			break;
+		case 'R':
+			rotationSteps -= 1;
+			break;
+		case 'i':
+			xScaleSteps -= 1;
+			break;
+		case 'I':
+			xScaleSteps += 1;
+			break;
+		case 'o':
+			yScaleSteps -= 1;
+			break;
+		case 'O':
+			yScaleSteps += 1;
+			break;
+		}
+
+		let handled = xTranslateSteps !== 0
+			|| yTranslateSteps !== 0
+			|| rotationSteps !== 0
+			|| xScaleSteps !== 0
+			|| yScaleSteps !== 0;
+
+		if (!this.selectionBox) {
+			handled = false;
+		} else if (handled) {
+			const translateStepSize = 10 * this.editor.viewport.getSizeOfPixelOnCanvas();
+			const rotateStepSize = Math.PI / 8;
+			const scaleStepSize = translateStepSize / 2;
+
+			const region = this.selectionBox.region;
+			const scaledSize = this.selectionBox.region.size.plus(
+				Vec2.of(xScaleSteps, yScaleSteps).times(scaleStepSize)
+			);
+
+			const transform = Mat33.scaling2D(
+				Vec2.of(
+					// Don't more-than-half the size of the selection
+					Math.max(0.5, scaledSize.x / region.size.x),
+					Math.max(0.5, scaledSize.y / region.size.y)
+				),
+				region.topLeft
+			).rightMul(Mat33.zRotation(
+				rotationSteps * rotateStepSize, region.center
+			)).rightMul(Mat33.translation(
+				Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize)
+			));
+			this.selectionBox.transformPreview(transform);
+		}
+
+		return handled;
+	}
+
+	public onKeyUp(evt: KeyUpEvent) {
+		if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
+			this.selectionBox.finalizeTransform();
+			return true;
+		}
+		return false;
+	}
+
 	public setEnabled(enabled: boolean) {
 		super.setEnabled(enabled);
 
@@ -540,6 +668,13 @@ export default class SelectionTool extends BaseTool {
 		this.selectionBox = null;
 
 		this.handleOverlay.style.display = enabled ? 'block' : 'none';
+
+		if (enabled) {
+			this.handleOverlay.tabIndex = 0;
+			this.handleOverlay.ariaLabel = this.editor.localization.selectionToolKeyboardShortcuts;
+		} else {
+			this.handleOverlay.tabIndex = -1;
+		}
 	}
 
 	// Get the object responsible for displaying this' selection.

package/src/tools/ToolController.ts

@@ -30,6 +30,7 @@ export default class ToolController {
 	public constructor(editor: Editor, localization: ToolLocalization) {
 		const primaryToolEnabledGroup = new ToolEnabledGroup();
 		const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
+		const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
 		const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
 		const primaryTools = [
 			new SelectionTool(editor, localization.selectionTool),
@@ -48,6 +49,7 @@ export default class ToolController {
 			new PipetteTool(editor, localization.pipetteTool),
 			panZoomTool,
 			...primaryTools,
+			keyboardPanZoomTool,
 			new UndoRedoShortcut(editor),
 		];
 		primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
@@ -88,9 +90,10 @@ export default class ToolController {
 			this.activeTool = null;
 			handled = true;
 		} else if (
-			event.kind === InputEvtType.WheelEvt || event.kind === InputEvtType.KeyPressEvent
+			event.kind === InputEvtType.WheelEvt || event.kind === InputEvtType.KeyPressEvent || event.kind === InputEvtType.KeyUpEvent
 		) {
 			const isKeyPressEvt = event.kind === InputEvtType.KeyPressEvent;
+			const isKeyReleaseEvt = event.kind === InputEvtType.KeyUpEvent;
 			const isWheelEvt = event.kind === InputEvtType.WheelEvt;
 			for (const tool of this.tools) {
 				if (!tool.isEnabled()) {
@@ -99,7 +102,8 @@ export default class ToolController {
 
 				const wheelResult = isWheelEvt && tool.onWheel(event);
 				const keyPressResult = isKeyPressEvt && tool.onKeyPress(event);
-				handled = keyPressResult || wheelResult;
+				const keyReleaseResult = isKeyReleaseEvt && tool.onKeyUp(event);
+				handled = keyPressResult || wheelResult || keyReleaseResult;
 
 				if (handled) {
 					break;