js-draw 0.1.9 → 0.1.12

package/src/toolbar/localization.ts

@@ -19,10 +19,13 @@ export interface ToolbarLocalization {
 	resizeImageToSelection: string;
 	deleteSelection: string;
 	duplicateSelection: string;
-	pickColorFronScreen: string;
+	pickColorFromScreen: string;
+	clickToPickColorAnnouncement: string;
 	undo: string;
 	redo: string;
 	zoom: string;
+	resetView: string;
+	selectionToolKeyboardShortcuts: string;
 
 	dropdownShown: (toolName: string)=> string;
 	dropdownHidden: (toolName: string)=> string;
@@ -36,6 +39,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	select: 'Select',
 	handTool: 'Pan',
 	zoom: 'Zoom',
+	resetView: 'Reset view',
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	fontLabel: 'Font: ',
@@ -45,7 +49,9 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	undo: 'Undo',
 	redo: 'Redo',
 	selectObjectType: 'Object type: ',
-	pickColorFronScreen: 'Pick color from screen',
+	pickColorFromScreen: 'Pick color from screen',
+	clickToPickColorAnnouncement: 'Click on the screen to pick a color',
+	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

@@ -69,7 +69,7 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: OnColorChangeListener) => {
 	const pipetteButton = document.createElement('button');
 	pipetteButton.classList.add('pipetteButton');
-	pipetteButton.title = editor.localization.pickColorFronScreen;
+	pipetteButton.title = editor.localization.pickColorFromScreen;
 	pipetteButton.setAttribute('alt', pipetteButton.title);
 
 	const updatePipetteIcon = (color?: Color4) => {
@@ -111,6 +111,7 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 		);
 		if (pipetteTool) {
 			pipetteButton.classList.add('active');
+			editor.announceForAccessibility(editor.localization.clickToPickColorAnnouncement);
 		}
 	};
 

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;
@@ -80,9 +83,10 @@
 	min-height: 30px;
 }
 
-.toolbar-toolContainer.selected .toolbar-button {
+.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/ActionButtonWidget.ts

@@ -0,0 +1,31 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+
+export default class ActionButtonWidget extends BaseWidget {
+	public constructor(
+		editor: Editor, localizationTable: ToolbarLocalization,
+        protected makeIcon: ()=> Element,
+		protected title: string,
+
+        protected clickAction: ()=>void,
+	) {
+		super(editor, localizationTable);
+	}
+
+	protected handleClick() {
+		this.clickAction();
+	}
+
+	protected getTitle(): string {
+		return this.title;
+	}
+
+	protected createIcon(): Element {
+		return this.makeIcon();
+	}
+
+	protected fillDropdown(_dropdown: HTMLElement): boolean {
+		return false;
+	}
+}

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();
@@ -103,8 +137,10 @@ export default abstract class BaseWidget {
 		this.disabled = disabled;
 		if (this.disabled) {
 			this.button.classList.add('disabled');
+			this.button.setAttribute('aria-disabled', 'true');
 		} else {
 			this.button.classList.remove('disabled');
+			this.button.removeAttribute('aria-disabled');
 		}
 	}
 

package/src/toolbar/widgets/HandToolWidget.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import Mat33 from '../../geometry/Mat33';
+import Mat33 from '../../math/Mat33';
 import PanZoom, { PanZoomMode } from '../../tools/PanZoom';
 import { EditorEventType } from '../../types';
 import Viewport from '../../Viewport';
@@ -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,13 +44,16 @@ 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);
 		}
 	});
 
 	const zoomBy = (factor: number) => {
 		const screenCenter = editor.viewport.visibleRect.center;
 		const transformUpdate = Mat33.scaling2D(factor, screenCenter);
-		editor.dispatch(new Viewport.ViewportTransform(transformUpdate), false);
+		editor.dispatch(Viewport.transformBy(transformUpdate), false);
 	};
 
 	increaseButton.onclick = () => {
@@ -59,6 +64,12 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 		zoomBy(4.0/5);
 	};
 
+	resetViewButton.onclick = () => {
+		editor.dispatch(Viewport.transformBy(
+			editor.viewport.canvasToScreenTransform.inverse()
+		), true);
+	};
+
 	return zoomLevelRow;
 };
 

package/src/toolbar/widgets/SelectionWidget.ts

@@ -1,8 +1,9 @@
 import Editor from '../../Editor';
 import SelectionTool from '../../tools/SelectionTool';
 import { EditorEventType } from '../../types';
-import { makeSelectionIcon } from '../icons';
+import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
 
 export class SelectionWidget extends BaseToolWidget {
@@ -10,44 +11,46 @@ export class SelectionWidget extends BaseToolWidget {
 		editor: Editor, private tool: SelectionTool, localization: ToolbarLocalization
 	) {
 		super(editor, tool, localization);
-	}
-
-	protected getTitle(): string {
-		return this.localizationTable.select;
-	}
-
-	protected createIcon(): Element {
-		return makeSelectionIcon();
-	}
 
-	protected fillDropdown(dropdown: HTMLElement): boolean {
-		const container = document.createElement('div');
-		const resizeButton = document.createElement('button');
-		const duplicateButton = document.createElement('button');
-		const deleteButton = document.createElement('button');
-
-		resizeButton.innerText = this.localizationTable.resizeImageToSelection;
-		resizeButton.disabled = true;
-		deleteButton.innerText = this.localizationTable.deleteSelection;
-		deleteButton.disabled = true;
-		duplicateButton.innerText = this.localizationTable.duplicateSelection;
-		duplicateButton.disabled = true;
-
-		resizeButton.onclick = () => {
-			const selection = this.tool.getSelection();
-			this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
-		};
+		const resizeButton = new ActionButtonWidget(
+			editor, localization,
+			makeResizeViewportIcon,
+			this.localizationTable.resizeImageToSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
+			},
+		);
+		const deleteButton = new ActionButtonWidget(
+			editor, localization,
+			makeDeleteSelectionIcon,
+			this.localizationTable.deleteSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(selection!.deleteSelectedObjects());
+				this.tool.clearSelection();
+			},
+		);
+		const duplicateButton = new ActionButtonWidget(
+			editor, localization,
+			makeDuplicateSelectionIcon,
+			this.localizationTable.duplicateSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(selection!.duplicateSelectedObjects());
+			},
+		);
 
-		deleteButton.onclick = () => {
-			const selection = this.tool.getSelection();
-			this.editor.dispatch(selection!.deleteSelectedObjects());
-			this.tool.clearSelection();
-		};
+		this.addSubWidget(resizeButton);
+		this.addSubWidget(deleteButton);
+		this.addSubWidget(duplicateButton);
 
-		duplicateButton.onclick = () => {
-			const selection = this.tool.getSelection();
-			this.editor.dispatch(selection!.duplicateSelectedObjects());
+		const updateDisabled = (disabled: boolean) => {
+			resizeButton.setDisabled(disabled);
+			deleteButton.setDisabled(disabled);
+			duplicateButton.setDisabled(disabled);
 		};
+		updateDisabled(true);
 
 		// Enable/disable actions based on whether items are selected
 		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
@@ -59,14 +62,16 @@ export class SelectionWidget extends BaseToolWidget {
 				const selection = this.tool.getSelection();
 				const hasSelection = selection && selection.region.area > 0;
 
-				resizeButton.disabled = !hasSelection;
-				deleteButton.disabled = resizeButton.disabled;
-				duplicateButton.disabled = resizeButton.disabled;
+				updateDisabled(!hasSelection);
 			}
 		});
+	}
 
-		container.replaceChildren(resizeButton, duplicateButton, deleteButton);
-		dropdown.appendChild(container);
-		return true;
+	protected getTitle(): string {
+		return this.localizationTable.select;
+	}
+
+	protected createIcon(): Element {
+		return makeSelectionIcon();
 	}
 }

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/Eraser.ts

@@ -1,8 +1,8 @@
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import Editor from '../Editor';
-import { Point2 } from '../geometry/Vec2';
-import LineSegment2 from '../geometry/LineSegment2';
+import { Point2 } from '../math/Vec2';
+import LineSegment2 from '../math/LineSegment2';
 import Erase from '../commands/Erase';
 import { ToolType } from './ToolController';
 import AbstractComponent from '../components/AbstractComponent';

package/src/tools/PanZoom.ts

@@ -1,11 +1,11 @@
 
 import { Editor } from '../Editor';
-import Mat33 from '../geometry/Mat33';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Vec3 from '../geometry/Vec3';
+import Mat33 from '../math/Mat33';
+import { Point2, Vec2 } from '../math/Vec2';
+import Vec3 from '../math/Vec3';
 import Pointer, { PointerDevice } from '../Pointer';
 import { EditorEventType, KeyPressEvent, PointerEvt, WheelEvt } from '../types';
-import { Viewport } from '../Viewport';
+import { Viewport, ViewportTransform } from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 
@@ -16,16 +16,18 @@ 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 {
 	public readonly kind: ToolType.PanZoom = ToolType.PanZoom;
-	private transform: Viewport.ViewportTransform|null = null;
+	private transform: ViewportTransform|null = null;
 
 	private lastAngle: number;
 	private lastDist: number;
@@ -72,7 +74,7 @@ export default class PanZoom extends BaseTool {
 		}
 
 		if (handlingGesture) {
-			this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
+			this.transform ??= Viewport.transformBy(Mat33.identity);
 			this.editor.display.setDraftMode(true);
 		}
 
@@ -98,14 +100,14 @@ export default class PanZoom extends BaseTool {
 		this.lastScreenCenter = screenCenter;
 		this.lastDist = dist;
 		this.lastAngle = angle;
-		this.transform = new Viewport.ViewportTransform(
+		this.transform = Viewport.transformBy(
 			this.transform!.transform.rightMul(transformUpdate)
 		);
 	}
 
 	private handleOneFingerMove(pointer: Pointer) {
 		const delta = this.getCenterDelta(pointer.screenPos);
-		this.transform = new Viewport.ViewportTransform(
+		this.transform = Viewport.transformBy(
 			this.transform!.transform.rightMul(
 				Mat33.translation(delta)
 			)
@@ -114,7 +116,7 @@ export default class PanZoom extends BaseTool {
 	}
 
 	public onPointerMove({ allPointers }: PointerEvt): void {
-		this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
+		this.transform ??= Viewport.transformBy(Mat33.identity);
 
 		const lastTransform = this.transform;
 		if (allPointers.length === 2) {
@@ -144,21 +146,25 @@ export default class PanZoom extends BaseTool {
 
 	// Applies [transformUpdate] to the editor. This stacks on top of the
 	// current transformation, if it exists.
-	private updateTransform(transformUpdate: Mat33) {
+	private updateTransform(transformUpdate: Mat33, announce: boolean = false) {
 		let newTransform = transformUpdate;
 		if (this.transform) {
 			newTransform = this.transform.transform.rightMul(transformUpdate);
 		}
 
 		this.transform?.unapply(this.editor);
-		this.transform = new Viewport.ViewportTransform(newTransform);
+		this.transform = Viewport.transformBy(newTransform);
 		this.transform.apply(this.editor);
+
+		if (announce) {
+			this.editor.announceForAccessibility(this.transform.description(this.editor, this.editor.localization));
+		}
 	}
 
 	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 = Viewport.transformBy(Mat33.identity);
 
 		const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
 		const toCanvas = this.editor.viewport.screenToCanvasTransform;
@@ -170,16 +176,23 @@ 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)
 		);
-		this.updateTransform(transformUpdate);
+		this.updateTransform(transformUpdate, true);
 
 		return true;
 	}
 
 	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 = Viewport.transformBy(Mat33.identity);
+
 		let translation = Vec2.zero;
 		let scale = 1;
 		let rotation = 0;
@@ -196,10 +209,12 @@ export default class PanZoom extends BaseTool {
 		case 'ArrowRight':
 			translation = Vec2.of(1, 0);
 			break;
+		case 'q':
 		case 'k':
 		case 'ArrowUp':
 			translation = Vec2.of(0, -1);
 			break;
+		case 'e':
 		case 'j':
 		case 'ArrowDown':
 			translation = Vec2.of(0, 1);
@@ -222,13 +237,19 @@ export default class PanZoom extends BaseTool {
 
 		// For each keypress,
 		translation = translation.times(30); // Move at most 30 units
-		rotation *= Math.PI / 8; // Rotate at most a sixteenth of a rotation
+		rotation *= Math.PI / 8; // Rotate at least a sixteenth of a rotation
 
 		// Transform the canvas, not the viewport:
 		translation = translation.times(-1);
 		rotation = rotation * -1;
 		scale = 1 / scale;
 
+		// Work around an issue that seems to be related to rotation matricies losing precision on inversion.
+		// TODO: Figure out why and implement a better solution.
+		if (rotation !== 0) {
+			rotation += 0.0001;
+		}
+
 		const toCanvas = this.editor.viewport.screenToCanvasTransform;
 
 		// Transform without translating (treat toCanvas as a linear instead of
@@ -244,7 +265,7 @@ export default class PanZoom extends BaseTool {
 		)).rightMul(Mat33.translation(
 			translation
 		));
-		this.updateTransform(transformUpdate);
+		this.updateTransform(transformUpdate, true);
 
 		return true;
 	}

package/src/tools/SelectionTool.test.ts

@@ -1,11 +1,9 @@
-/* @jest-environment jsdom */
-
 import Color4 from '../Color4';
 import Stroke from '../components/Stroke';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
-import Path from '../geometry/Path';
-import { Vec2 } from '../geometry/Vec2';
+import Path from '../math/Path';
+import { Vec2 } from '../math/Vec2';
 import { InputEvtType } from '../types';
 import SelectionTool from './SelectionTool';
 import { ToolType } from './ToolController';
@@ -66,7 +64,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 +78,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);
+	});
 });