js-draw 0.1.8 → 0.1.11

package/src/geometry/Rect2.test.ts

@@ -147,14 +147,27 @@ describe('Rect2', () => {
 		it('division of empty square', () => {
 			expect(Rect2.empty.divideIntoGrid(1000, 10000).length).toBe(1);
 		});
+
+		it('division of rectangle', () => {
+			expect(new Rect2(0, 0, 2, 1).divideIntoGrid(2, 2)).toMatchObject(
+				[
+					new Rect2(0, 0, 1, 0.5), new Rect2(1, 0, 1, 0.5),
+					new Rect2(0, 0.5, 1, 0.5), new Rect2(1, 0.5, 1, 0.5),
+				]
+			);
+		});
 	});
 
-	it('division of rectangle', () => {
-		expect(new Rect2(0, 0, 2, 1).divideIntoGrid(2, 2)).toMatchObject(
-			[
-				new Rect2(0, 0, 1, 0.5), new Rect2(1, 0, 1, 0.5),
-				new Rect2(0, 0.5, 1, 0.5), new Rect2(1, 0.5, 1, 0.5),
-			]
-		);
+	describe('should correctly return the closest point on the edge of a rectangle', () => {
+		it('with the unit square', () => {
+			const rect = Rect2.unitSquare;
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.zero)).objEq(Vec2.zero);
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(-1, -1))).objEq(Vec2.zero);
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(-1, 0.5))).objEq(Vec2.of(0, 0.5));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(1, 0.5))).objEq(Vec2.of(1, 0.5));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(0.6, 0.6))).objEq(Vec2.of(1, 0.6));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(2, 0.5))).objEq(Vec2.of(1, 0.5));
+			expect(rect.getClosestPointOnBoundaryTo(Vec2.of(0.6, 0.6))).objEq(Vec2.of(1, 0.6));
+		});
 	});
 });

package/src/geometry/Rect2.ts

@@ -51,6 +51,7 @@ export default class Rect2 {
 		return new Rect2(vec.x + this.x, vec.y + this.y, this.w, this.h);
 	}
 
+	// Returns a copy of this with the given size (but same top-left).
 	public resizedTo(size: Vec2): Rect2 {
 		return new Rect2(this.x, this.y, size.x, size.y);
 	}
@@ -163,6 +164,23 @@ export default class Rect2 {
 		);
 	}
 
+	public getClosestPointOnBoundaryTo(target: Point2) {
+		const closestEdgePoints = this.getEdges().map(edge => {
+			return edge.closestPointTo(target);
+		});
+
+		let closest: Point2|null = null;
+		let closestDist: number|null = null;
+		for (const point of closestEdgePoints) {
+			const dist = point.minus(target).length();
+			if (closestDist === null || dist < closestDist) {
+				closest = point;
+				closestDist = dist;
+			}
+		}
+		return closest!;
+	}
+
 	public get corners(): Point2[] {
 		return [
 			this.bottomRight,
@@ -172,7 +190,7 @@ export default class Rect2 {
 		];
 	}
 
-	public get maxDimension(): number {
+	public get maxDimension() {
 		return Math.max(this.w, this.h);
 	}
 

package/src/localizations/en.ts

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

package/src/localizations/es.ts

@@ -0,0 +1,62 @@
+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',
+	freehandPen: 'Dibuja sin restricción de forma',
+	selectObjectType: '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',
+	pickColorFronScreen: 'Selecciona un color de la pantalla',
+	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',
+	rerenderAsText: 'Redibuja la pantalla al texto',
+};
+
+export default localization;

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

@@ -25,6 +25,8 @@ export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
 	private container: HTMLElement;
 
+	private static colorisStarted: boolean = false;
+
 	public constructor(
 		private editor: Editor, parent: HTMLElement,
 		private localizationTable: ToolbarLocalization = defaultToolbarLocalization,
@@ -34,7 +36,10 @@ export default class HTMLToolbar {
 		this.container.setAttribute('role', 'toolbar');
 		parent.appendChild(this.container);
 
-		colorisInit();
+		if (!HTMLToolbar.colorisStarted) {
+			colorisInit();
+			HTMLToolbar.colorisStarted = true;
+		}
 		this.setupColorPickers();
 	}
 
@@ -133,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();
@@ -195,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,8 @@ export interface ToolbarLocalization {
 	undo: string;
 	redo: string;
 	zoom: string;
+	resetView: string;
+	selectionToolKeyboardShortcuts: string;
 
 	dropdownShown: (toolName: string)=> string;
 	dropdownHidden: (toolName: string)=> string;
@@ -36,6 +38,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	select: 'Select',
 	handTool: 'Pan',
 	zoom: 'Zoom',
+	resetView: 'Reset view',
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	fontLabel: 'Font: ',
@@ -46,6 +49,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/makeColorInput.ts

@@ -20,7 +20,7 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 	colorInputContainer.appendChild(colorInput);
 	addPipetteTool(editor, colorInputContainer, (color: Color4) => {
 		colorInput.value = color.toHexString();
-		handleColorInput();
+		onInputEnd();
 
 		// Update the color preview, if it exists (may be managed by Coloris).
 		const parentElem = colorInput.parentElement;
@@ -32,15 +32,20 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 	let currentColor: Color4|undefined;
 	const handleColorInput = () => {
 		currentColor = Color4.fromHex(colorInput.value);
-		editor.announceForAccessibility(
-			editor.localization.colorChangedAnnouncement(currentColor.toHexString())
-		);
-		onColorChange(currentColor);
+	};
+	const onInputEnd = () => {
+		handleColorInput();
 
-		editor.notifier.dispatch(EditorEventType.ColorPickerColorSelected, {
-			kind: EditorEventType.ColorPickerColorSelected,
-			color: currentColor,
-		});
+		if (currentColor) {
+			editor.announceForAccessibility(
+				editor.localization.colorChangedAnnouncement(currentColor.toHexString())
+			);
+			onColorChange(currentColor);
+			editor.notifier.dispatch(EditorEventType.ColorPickerColorSelected, {
+				kind: EditorEventType.ColorPickerColorSelected,
+				color: currentColor,
+			});
+		}
 	};
 
 	colorInput.oninput = handleColorInput;
@@ -55,6 +60,7 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 			kind: EditorEventType.ColorPickerToggled,
 			open: false,
 		});
+		onInputEnd();
 	});
 
 	return [ colorInput, colorInputContainer ];
@@ -72,10 +78,13 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 	updatePipetteIcon();
 
 	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(ToolType.Pipette)[0] as PipetteTool|undefined;
-	const pipetteColorSelect = (color: Color4|null) => {
+	const endColorSelectMode = () => {
 		pipetteTool?.clearColorListener();
 		updatePipetteIcon();
 		pipetteButton.classList.remove('active');
+	};
+	const pipetteColorSelect = (color: Color4|null) => {
+		endColorSelectMode();
 
 		if (color) {
 			onColorChange(color);
@@ -90,6 +99,12 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 	};
 
 	pipetteButton.onclick = () => {
+		// If already picking, cancel it.
+		if (pipetteButton.classList.contains('active')) {
+			endColorSelectMode();
+			return;
+		}
+
 		pipetteTool?.setColorListener(
 			pipetteColorPreview,
 			pipetteColorSelect,

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 {
@@ -151,8 +155,7 @@
 }
 
 .toolbar-root .toolbar-zoomLevelEditor button {
-	width: min-content;
-	height: min-content;
+	min-width: 48px;
 }
 
 .color-input-container {
@@ -173,4 +176,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/toolbar/widgets/HandToolWidget.ts

@@ -14,10 +14,12 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 
 	const increaseButton = document.createElement('button');
 	const decreaseButton = document.createElement('button');
+	const resetViewButton = document.createElement('button');
 	const zoomLevelDisplay = document.createElement('span');
 	increaseButton.innerText = '+';
 	decreaseButton.innerText = '-';
-	zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton);
+	resetViewButton.innerText = localizationTable.resetView;
+	zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton, resetViewButton);
 
 	zoomLevelRow.classList.add(`${toolbarCSSPrefix}zoomLevelEditor`);
 	zoomLevelDisplay.classList.add('zoomDisplay');
@@ -42,6 +44,9 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 	editor.notifier.on(EditorEventType.ViewportChanged, (event) => {
 		if (event.kind === EditorEventType.ViewportChanged) {
 			updateZoomDisplay();
+
+			// Can't reset if already reset.
+			resetViewButton.disabled = event.newTransform.eq(Mat33.identity);
 		}
 	});
 
@@ -59,6 +64,12 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 		zoomBy(4.0/5);
 	};
 
+	resetViewButton.onclick = () => {
+		editor.dispatch(new Viewport.ViewportTransform(
+			editor.viewport.canvasToScreenTransform.inverse()
+		), true);
+	};
+
 	return zoomLevelRow;
 };
 

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 {
@@ -156,9 +158,9 @@ export default class PanZoom extends BaseTool {
 	}
 
 	public onWheel({ delta, screenPos }: WheelEvt): boolean {
-		if (this.transform === null) {
-			this.transform = new Viewport.ViewportTransform(Mat33.identity);
-		}
+		// Reset the transformation -- wheel events are individual events, so we don't
+		// need to unapply/reapply.
+		this.transform = new Viewport.ViewportTransform(Mat33.identity);
 
 		const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
 		const toCanvas = this.editor.viewport.screenToCanvasTransform;
@@ -170,7 +172,7 @@ export default class PanZoom extends BaseTool {
 			);
 		const pinchZoomScaleFactor = 1.04;
 		const transformUpdate = Mat33.scaling2D(
-			Math.pow(pinchZoomScaleFactor, -delta.z), canvasPos
+			Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos
 		).rightMul(
 			Mat33.translation(translation)
 		);
@@ -180,6 +182,13 @@ export default class PanZoom extends BaseTool {
 	}
 
 	public onKeyPress({ key }: KeyPressEvent): boolean {
+		if (!(this.mode & PanZoomMode.Keyboard)) {
+			return false;
+		}
+
+		// No need to keep the same the transform for keyboard events.
+		this.transform = new Viewport.ViewportTransform(Mat33.identity);
+
 		let translation = Vec2.zero;
 		let scale = 1;
 		let rotation = 0;