js-draw 0.1.8 → 0.1.11

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;

package/src/tools/localization.ts

@@ -1,5 +1,6 @@
 
 export interface ToolLocalization {
+	keyboardPanZoom: string;
     penTool: (penId: number)=>string;
     selectionTool: string;
     eraserTool: string;
@@ -25,6 +26,7 @@ export const defaultToolLocalization: ToolLocalization = {
 	undoRedoTool: 'Undo/Redo',
 	rightClickDragPanTool: 'Right-click drag',
 	pipetteTool: 'Pick color from screen',
+	keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
 
 	textTool: 'Text',
 	enterTextToInsert: 'Text to insert',

package/src/types.ts

@@ -24,6 +24,7 @@ export interface PointerEvtListener {
 	onGestureCancel(): void;
 }
 
+
 export enum InputEvtType {
 	PointerDownEvt,
 	PointerMoveEvt,
@@ -32,6 +33,7 @@ export enum InputEvtType {
 
 	WheelEvt,
 	KeyPressEvent,
+	KeyUpEvent
 }
 
 // [delta.x] is horizontal scroll,
@@ -49,6 +51,12 @@ export interface KeyPressEvent {
 	readonly ctrlKey: boolean;
 }
 
+export interface KeyUpEvent {
+	readonly kind: InputEvtType.KeyUpEvent;
+	readonly key: string;
+	readonly ctrlKey: boolean;
+}
+
 // Event triggered when pointer capture is taken by a different [PointerEvtListener].
 export interface GestureCancelEvt {
 	readonly kind: InputEvtType.GestureCancelEvt;
@@ -72,7 +80,7 @@ export interface PointerUpEvt extends PointerEvtBase {
 }
 
 export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export type InputEvt = KeyPressEvent | WheelEvt | GestureCancelEvt | PointerEvt;
+export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt;
 
 export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 
@@ -109,6 +117,7 @@ export interface EditorViewportChangedEvent {
 
 	// Canvas -> screen transform
 	readonly newTransform: Mat33;
+	readonly oldTransform: Mat33;
 }
 
 export interface DisplayResizedEvent {

package/dist-test/test-dist-bundle.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
-		<meta charset="utf-8"/>
-		<title>Editor from a bundle</title>
-		<style>
-			body .imageEditorContainer {
-				height: 800px;
-
-				--primary-background-color: green;
-				--primary-background-color-transparent: rgba(255, 240, 200, 0.5);
-				--secondary-background-color: yellow;
-				--primary-foreground-color: black;
-				--secondary-foreground-color: black;
-			}
-		</style>
-	</head>
-	<body>
-		<p>
-			This file tests the bundled version of <code>js-draw</code>.
-			Be sure to run <code>yarn build</code> before opening this!
-		</p>
-		<script src="../dist/bundle.js"></script>
-		<script>
-			const editor1 = new jsdraw.Editor(document.body, {
-				wheelEventsEnabled: false,
-			});
-			editor1.addToolbar();
-			editor1.loadFromSVG('<svg><text>Wheel events disabled.</text></svg>');
-
-			const editor2 = new jsdraw.Editor(document.body, {
-				wheelEventsEnabled: 'only-if-focused',
-			});
-			editor2.addToolbar();
-			editor2.loadFromSVG('<svg><text>Wheel events enabled, only if focused.</text></svg>');
-
-			const editor3 = new jsdraw.Editor(document.body);
-			editor3.addToolbar();
-		</script>
-	</body>
-</html>