js-draw 0.1.11 → 0.1.12

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';
 
@@ -27,7 +27,7 @@ export enum PanZoomMode {
 
 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;
@@ -74,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);
 		}
 
@@ -100,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)
 			)
@@ -116,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) {
@@ -146,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 {
 		// Reset the transformation -- wheel events are individual events, so we don't
 		// need to unapply/reapply.
-		this.transform = new Viewport.ViewportTransform(Mat33.identity);
+		this.transform = Viewport.transformBy(Mat33.identity);
 
 		const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
 		const toCanvas = this.editor.viewport.screenToCanvasTransform;
@@ -176,7 +180,7 @@ export default class PanZoom extends BaseTool {
 		).rightMul(
 			Mat33.translation(translation)
 		);
-		this.updateTransform(transformUpdate);
+		this.updateTransform(transformUpdate, true);
 
 		return true;
 	}
@@ -187,7 +191,7 @@ export default class PanZoom extends BaseTool {
 		}
 
 		// No need to keep the same the transform for keyboard events.
-		this.transform = new Viewport.ViewportTransform(Mat33.identity);
+		this.transform = Viewport.transformBy(Mat33.identity);
 
 		let translation = Vec2.zero;
 		let scale = 1;
@@ -205,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);
@@ -231,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
@@ -253,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';

package/src/tools/SelectionTool.ts

@@ -3,10 +3,10 @@ import Duplicate from '../commands/Duplicate';
 import Erase from '../commands/Erase';
 import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
-import Mat33 from '../geometry/Mat33';
+import Mat33 from '../math/Mat33';
 // import Mat33 from "../geometry/Mat33";
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
+import Rect2 from '../math/Rect2';
+import { Point2, Vec2 } from '../math/Vec2';
 import { EditorLocalization } from '../localization';
 import { EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import Viewport from '../Viewport';
@@ -310,7 +310,7 @@ class Selection {
 			this.selection.updateUI();
 		}
 
-		public description(localizationTable: EditorLocalization) {
+		public description(_editor: Editor, localizationTable: EditorLocalization) {
 			return localizationTable.transformedElements(this.currentTransfmCommands.length);
 		}
 	};
@@ -460,7 +460,7 @@ class Selection {
 			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
+				Viewport.transformBy(Mat33.translation(delta.times(-1))), false
 			);
 		}
 	}
@@ -671,7 +671,7 @@ export default class SelectionTool extends BaseTool {
 
 		if (enabled) {
 			this.handleOverlay.tabIndex = 0;
-			this.handleOverlay.ariaLabel = this.editor.localization.selectionToolKeyboardShortcuts;
+			this.handleOverlay.setAttribute('aria-label', this.editor.localization.selectionToolKeyboardShortcuts);
 		} else {
 			this.handleOverlay.tabIndex = -1;
 		}

package/src/tools/TextTool.ts

@@ -2,8 +2,8 @@ import Color4 from '../Color4';
 import Text, { TextStyle } from '../components/Text';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
-import Mat33 from '../geometry/Mat33';
-import { Vec2 } from '../geometry/Vec2';
+import Mat33 from '../math/Mat33';
+import { Vec2 } from '../math/Vec2';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType, PointerEvt } from '../types';
 import BaseTool from './BaseTool';

package/src/tools/UndoRedoShortcut.test.ts

@@ -3,7 +3,7 @@
 import Color4 from '../Color4';
 import Stroke from '../components/Stroke';
 import EditorImage from '../EditorImage';
-import Path from '../geometry/Path';
+import Path from '../math/Path';
 import createEditor from '../testing/createEditor';
 import { InputEvtType } from '../types';
 

package/src/types.ts

@@ -1,12 +1,12 @@
 // Types related to the image editor
 
 import EventDispatcher from './EventDispatcher';
-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 BaseTool from './tools/BaseTool';
 import AbstractComponent from './components/AbstractComponent';
-import Rect2 from './geometry/Rect2';
+import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';