js-draw 0.25.1 → 1.0.1

package/src/tools/Eraser.ts

@@ -1,27 +1,37 @@
-import { EditorEventType, KeyPressEvent, PointerEvt } from '../types';
+import { EditorEventType } from '../types';
+import { KeyPressEvent, PointerEvt } from '../inputEvents';
 import BaseTool from './BaseTool';
 import Editor from '../Editor';
-import { Point2, Vec2 } from '../math/Vec2';
-import LineSegment2 from '../math/shapes/LineSegment2';
+import { Point2, Vec2, LineSegment2, Color4, Rect2 } from '@js-draw/math';
 import Erase from '../commands/Erase';
 import AbstractComponent from '../components/AbstractComponent';
 import { PointerDevice } from '../Pointer';
-import Color4 from '../Color4';
-import Rect2 from '../math/shapes/Rect2';
 import RenderingStyle from '../rendering/RenderingStyle';
 import { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId } from './keybindings';
+import { MutableReactiveValue, ReactiveValue } from '../util/ReactiveValue';
 
 export default class Eraser extends BaseTool {
 	private lastPoint: Point2|null = null;
 	private isFirstEraseEvt: boolean = true;
 	private toRemove: AbstractComponent[];
 	private thickness: number = 10;
+	private thicknessValue: MutableReactiveValue<number>;
 
 	// Commands that each remove one element
 	private partialCommands: Erase[] = [];
 
 	public constructor(private editor: Editor, description: string) {
 		super(editor.notifier, description);
+
+		this.thicknessValue = ReactiveValue.fromInitialValue(this.thickness);
+		this.thicknessValue.onUpdate(value => {
+			this.thickness = value;
+
+			this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+				kind: EditorEventType.ToolUpdated,
+				tool: this,
+			});
+		});
 	}
 
 	private clearPreview() {
@@ -149,12 +159,15 @@ export default class Eraser extends BaseTool {
 		return this.thickness;
 	}
 
-	public setThickness(thickness: number) {
-		this.thickness = thickness;
+	/**
+	 * Returns a {@link MutableReactiveValue} that can be used to watch
+	 * this tool's thickness.
+	 */
+	public getThicknessValue() {
+		return this.thicknessValue;
+	}
 
-		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-			kind: EditorEventType.ToolUpdated,
-			tool: this,
-		});
+	public setThickness(thickness: number) {
+		this.thicknessValue.set(thickness);
 	}
 }

package/src/tools/FindTool.css

@@ -1,7 +1,7 @@
 
 .find-tool-overlay {
-    /* Show at the bottom of the screen. */
-    order: -1;
+	/* Show at the bottom of the screen. */
+	order: -1;
 
-    position: absolute;
+	position: absolute;
 }

package/src/tools/FindTool.test.ts

@@ -0,0 +1,67 @@
+import { InputEvtType } from '../inputEvents';
+import TextComponent from '../components/TextComponent';
+import { Mat33, Color4 } from '@js-draw/math';
+import createEditor from '../testing/createEditor';
+import FindTool from './FindTool';
+
+describe('FindTool', () => {
+	it('should open/close on ctrl+f', () => {
+		const editor = createEditor();
+		const findTool = editor.toolController.getMatchingTools(FindTool)[0];
+		expect(findTool).not.toBeFalsy();
+
+		const overlay = editor.getRootElement().querySelector('.find-tool-overlay')!;
+
+		expect(getComputedStyle(overlay).display).toBe('none');
+		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'f', true);
+
+		expect(getComputedStyle(overlay).display).not.toBe('none');
+
+		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'f', true);
+		expect(getComputedStyle(overlay).display).toBe('none');
+	});
+
+	it('should navigate to the next match on pressing enter', () => {
+		const editor = createEditor();
+		const findTool = editor.toolController.getMatchingTools(FindTool)[0];
+		expect(findTool).not.toBeFalsy();
+
+		// Reset the viewport
+		editor.viewport.resetTransform();
+		expect(editor.viewport.getScaleFactor()).toBeCloseTo(1);
+
+		// Show the find tool
+		const overlay = editor.getRootElement().querySelector('.find-tool-overlay')!;
+		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'f', true);
+		expect(getComputedStyle(overlay).display).not.toBe('none');
+
+		// Add some text to the image
+		const style = { size: 12, fontFamily: 'serif', renderingStyle: { fill: Color4.red }};
+		const text = TextComponent.fromLines([ 'test' ], Mat33.scaling2D(0.01), style);
+		editor.image.addElement(text).apply(editor);
+
+		// Should focus the search input
+		const searchInput = document.querySelector(':focus')!;
+		expect(searchInput).not.toBeFalsy();
+		expect(searchInput.tagName).toBe('INPUT');
+
+		// Should not change the view when searching for something that doesn't exist.
+		searchInput.setAttribute('value', 'testing');
+		searchInput.dispatchEvent(new KeyboardEvent('keydown', {
+			key: 'Enter',
+			code: 'Enter',
+		}));
+		expect(editor.viewport.getScaleFactor()).toBeCloseTo(1);
+
+		// Search input should still have focus
+		expect(document.querySelector(':focus')).toBe(searchInput);
+
+		// When searching for a substring that does exist, should zoom.
+		searchInput.setAttribute('value', 'test');
+		searchInput.dispatchEvent(new KeyboardEvent('keydown', {
+			key: 'Enter',
+			code: 'Enter',
+		}));
+		expect(editor.viewport.getScaleFactor()).not.toBeCloseTo(1);
+	});
+});

package/src/tools/FindTool.ts

@@ -4,8 +4,8 @@
 
 import Editor from '../Editor';
 import TextComponent from '../components/TextComponent';
-import Rect2 from '../math/shapes/Rect2';
-import { KeyPressEvent } from '../types';
+import { Rect2 } from '@js-draw/math';
+import { KeyPressEvent } from '../inputEvents';
 import BaseTool from './BaseTool';
 import { toggleFindVisibleShortcutId } from './keybindings';
 
@@ -81,7 +81,7 @@ export default class FindTool extends BaseTool {
 
 		label.innerText = this.editor.localization.findLabel;
 		nextBtn.innerText = this.editor.localization.toNextMatch;
-		closeBtn.innerText = this.editor.localization.closeFindDialog;
+		closeBtn.innerText = this.editor.localization.closeDialog;
 
 		this.searchInput.onkeydown = (ev: KeyboardEvent) => {
 			if (ev.key === 'Enter') {

package/src/tools/InputFilter/FunctionMapper.ts

@@ -0,0 +1,17 @@
+import { InputEvt } from '../../inputEvents';
+import InputMapper from './InputMapper';
+
+/**
+ * An `InputMapper` that applies a function to all events it receives.
+ *
+ * Useful for automated testing.
+ */
+export default class FunctionMapper extends InputMapper {
+	public constructor(private fn: (event: InputEvt)=>InputEvt) {
+		super();
+	}
+
+	public override onEvent(event: InputEvt): boolean {
+		return this.emit(this.fn(event));
+	}
+}

package/src/tools/InputFilter/InputMapper.ts

@@ -0,0 +1,41 @@
+import { InputEvt } from '../../inputEvents';
+
+type OnEventCallback = (event: InputEvt)=>boolean;
+
+export interface InputEventListener {
+	// Returns true if handled
+	onEvent: OnEventCallback;
+}
+
+/**
+ * Accepts input events and emits input events.
+ */
+export default abstract class InputMapper implements InputEventListener {
+	#listener: OnEventCallback|null = null;
+
+	public constructor() { }
+
+	// @internal
+	public setEmitListener(listener: InputEventListener|OnEventCallback|null) {
+		if (listener && typeof (listener) === 'object') {
+			this.#listener = (event) => {
+				return listener.onEvent(event) ?? false;
+			};
+		} else {
+			this.#listener = listener;
+		}
+	}
+
+	protected emit(event: InputEvt): boolean {
+		return this.#listener?.(event) ?? false;
+	}
+
+	/**
+	 * @returns true if the given `event` should be considered "handled" by the app and thus not
+	 * forwarded to other targets. For example, returning "true" for a touchpad pinch event prevents
+	 * the pinch event from zooming the webpage.
+	 *
+	 * Generally, this should return the result of calling `this.emit` with some event.
+	 */
+	public abstract onEvent(event: InputEvt): boolean;
+}

package/src/tools/InputFilter/InputPipeline.test.ts

@@ -0,0 +1,41 @@
+import { CopyEvent, InputEvt, InputEvtType } from '../../inputEvents';
+import FunctionMapper from './FunctionMapper';
+import InputPipeline from './InputPipeline';
+
+describe('InputPipeline', () => {
+	it('empty pipeline should map events to themselves', () => {
+		const pipeline = new InputPipeline();
+
+		// Shouldn't crash when no emit listener
+		pipeline.onEvent({ kind: InputEvtType.GestureCancelEvt });
+
+		const mockEmitListener = jest.fn();
+		pipeline.setEmitListener(mockEmitListener);
+
+		const testCopyEvent: CopyEvent = { kind: InputEvtType.CopyEvent, setData: ()=>{} };
+		pipeline.onEvent(testCopyEvent);
+		expect(mockEmitListener).toHaveBeenCalledTimes(1);
+		expect(mockEmitListener).toHaveBeenCalledWith(testCopyEvent);
+	});
+
+	it('pipeline with a single mapper should filter events through the mapper', () => {
+		const pipeline = new InputPipeline();
+
+		const processEvent = jest.fn((event: InputEvt) => event);
+		pipeline.addToTail(new FunctionMapper(processEvent));
+
+		expect(processEvent).not.toHaveBeenCalled();
+		pipeline.onEvent({ kind: InputEvtType.GestureCancelEvt });
+		expect(processEvent).toHaveBeenCalled();
+
+		pipeline.onEvent({ kind: InputEvtType.GestureCancelEvt });
+		expect(processEvent).toHaveBeenCalledTimes(2);
+
+		const mockEmitListener = jest.fn();
+		pipeline.setEmitListener(mockEmitListener);
+
+		pipeline.onEvent({ kind: InputEvtType.GestureCancelEvt });
+		expect(processEvent).toHaveBeenCalledTimes(3);
+		expect(mockEmitListener).toHaveBeenCalledTimes(1);
+	});
+});

package/src/tools/InputFilter/InputPipeline.ts

@@ -0,0 +1,34 @@
+import { InputEvt } from '../../inputEvents';
+import InputMapper from './InputMapper';
+
+/**
+ * The composition of multiple `InputMapper`s.
+ */
+export default class InputPipeline extends InputMapper {
+	#head: InputMapper|null = null;
+	#tail: InputMapper|null = null;
+
+	public override onEvent(event: InputEvt): boolean {
+		if (this.#head === null) {
+			return this.emit(event);
+		} else {
+			return this.#head.onEvent(event);
+		}
+	}
+
+	/**
+	 * Adds a new `InputMapper` to the *tail* of this pipeline.
+	 * Note that an instance of an `InputMapper` can only be used in a single
+	 * pipeline.
+	 */
+	public addToTail(mapper: InputMapper) {
+		if (!this.#tail) {
+			this.#head = mapper;
+			this.#tail = this.#head;
+		} else {
+			this.#tail.setEmitListener(mapper);
+			this.#tail = mapper;
+		}
+		this.#tail.setEmitListener(event => this.emit(event));
+	}
+}

package/src/tools/InputFilter/InputStabilizer.ts

@@ -0,0 +1,254 @@
+import { GestureCancelEvt, InputEvt, InputEvtType, PointerEvt, PointerMoveEvt, isPointerEvt } from '../../inputEvents';
+import InputMapper from './InputMapper';
+import Viewport from '../../Viewport';
+import Editor from '../../Editor';
+import { Point2, Vec2 } from '@js-draw/math';
+import untilNextAnimationFrame from '../../util/untilNextAnimationFrame';
+
+enum StabilizerType {
+	IntertialStabilizer,
+}
+
+interface InputStabilizerOptions {
+	kind: StabilizerType.IntertialStabilizer,
+
+	mass: number;
+	springConstant: number;
+	frictionCoefficient: number;
+
+	maxPointDist: number;
+
+	// Minimum cosine similarity between the velocity vector and the displacement to
+	// the stroke endpoint to connect them.
+	minSimilarityToFinalize: number;
+
+	// Fraction of how much should be inertia based and how much should be
+	// moving in the direction of the pointer.
+	inertiaFraction: number;
+
+	// In addition to friction, decreases the velocity by this fraction at each
+	// time step.
+	velocityDecayFactor: number;
+}
+
+const defaultOptions: InputStabilizerOptions = {
+	kind: StabilizerType.IntertialStabilizer,
+
+	mass: 0.4, // kg
+	springConstant: 100.0, // N/m
+	frictionCoefficient: 0.28,
+
+	maxPointDist: 10, // screen units
+
+	inertiaFraction: 0.75,
+
+	minSimilarityToFinalize: 0.0,
+	velocityDecayFactor: 0.1,
+};
+
+// Stabilizes input for a single cursor
+class StylusInputStabilizer {
+	private runLoop: boolean = true;
+	private lastUpdateTime: number = 0;
+	private targetInterval: number;
+	private velocity: Vec2 = Vec2.zero;
+
+	private strokePoint: Point2;
+	private targetPoint: Point2;
+
+	public constructor(
+		// The initial starting point of the pointer.
+		start: Point2,
+
+		// Emits a pointer motion event, returns true if the event was handled.
+		private updatePointer: (screenPoint: Point2, timeStamp: number)=>boolean,
+
+		private readonly options: InputStabilizerOptions
+	) {
+		this.strokePoint = start;
+		this.targetPoint = start;
+		this.targetInterval = 10; // ms
+		void this.loop();
+	}
+
+	private async loop() {
+		this.lastUpdateTime = performance.now();
+		while (this.runLoop) {
+			this.update(false);
+			await untilNextAnimationFrame();
+		}
+	}
+
+	public setTarget(point: Point2) {
+		this.targetPoint = point;
+	}
+
+	private getNextVelocity(deltaTimeMs: number) {
+		const toTarget = this.targetPoint.minus(this.strokePoint);
+
+		const springForce = toTarget.times(this.options.springConstant);
+
+		const gravityAccel = 10;
+		const normalForceMagnitude = this.options.mass * gravityAccel;
+		const frictionForce = this.velocity.normalizedOrZero().times(
+			-this.options.frictionCoefficient * normalForceMagnitude
+		);
+		const acceleration = (springForce.plus(frictionForce)).times(1/this.options.mass);
+
+		const decayFactor = this.options.velocityDecayFactor;
+		const springVelocity = this.velocity.times(1 - decayFactor).plus(acceleration.times(deltaTimeMs / 1000));
+
+		// An alternate velocity that goes directly towards the target.
+		const toTargetVelocity = toTarget.normalizedOrZero().times(springVelocity.length());
+
+		return toTargetVelocity.lerp(springVelocity, this.options.inertiaFraction);
+	}
+
+	public update(force: boolean): boolean {
+		const nowTime = performance.now();
+		const deltaTime = nowTime - this.lastUpdateTime;
+
+		const reachedTarget = this.strokePoint.eq(this.targetPoint);
+
+		if (deltaTime > this.targetInterval || force) {
+			if (!reachedTarget) {
+				let velocity: Vec2;
+				let deltaX: Vec2;
+				let parts = 1;
+
+				do {
+					velocity = this.getNextVelocity(deltaTime / parts);
+					deltaX = velocity.times(deltaTime / 1000);
+
+					parts ++;
+				} while (deltaX.magnitude() > this.options.maxPointDist && parts < 10);
+
+				for (let i = 0; i < parts; i++) {
+					this.velocity = this.getNextVelocity(deltaTime / parts);
+					deltaX = this.velocity.times(deltaTime / 1000);
+					this.strokePoint = this.strokePoint.plus(deltaX);
+
+					// Allows the last updatePointer to be returned.
+					if (i < parts - 1) {
+						this.updatePointer(this.strokePoint, nowTime);
+					}
+				}
+			}
+
+			// Even if we have reached the target, ensure that lastUpdateTime is updated
+			// (prevent large deltaTime).
+			this.lastUpdateTime = nowTime;
+
+			if (force || !reachedTarget) {
+				return this.updatePointer(this.strokePoint, nowTime);
+			}
+		}
+
+		return false;
+	}
+
+	/** Finalizes the current stroke. */
+	public finish() {
+		this.runLoop = false;
+
+		const toTarget = this.targetPoint.minus(this.strokePoint);
+		if (this.velocity.dot(toTarget) > this.options.minSimilarityToFinalize) {
+			// Connect the stroke to its end point
+			this.updatePointer(this.targetPoint, performance.now());
+		}
+	}
+
+	public cancel() {
+		this.runLoop = false;
+	}
+}
+
+export default class InputStabilizer extends InputMapper {
+	private stabilizer: StylusInputStabilizer|null = null;
+	private lastPointerEvent: PointerEvt|null = null;
+
+	public constructor(
+		private viewport: Viewport,
+		private readonly options: InputStabilizerOptions = defaultOptions,
+	) {
+		super();
+	}
+
+	private mapPointerEvent(event: PointerEvt|GestureCancelEvt) {
+		// Don't store the last pointer event for use with pressure/button data --
+		// this information can be very different for a pointerup event.
+		if (isPointerEvt(event) && event.kind !== InputEvtType.PointerUpEvt) {
+			this.lastPointerEvent = event;
+		}
+
+		// Only apply smoothing if there is a single pointer.
+		if (event.kind === InputEvtType.GestureCancelEvt || event.allPointers.length > 1 || this.stabilizer === null) {
+			return this.emit(event);
+		}
+
+		this.stabilizer.setTarget(event.current.screenPos);
+
+		if (event.kind === InputEvtType.PointerMoveEvt) {
+			return this.stabilizer.update(true);
+		} else if (event.kind === InputEvtType.PointerUpEvt) {
+			this.stabilizer.finish();
+			return this.emit(event);
+		} else {
+			return this.emit(event);
+		}
+	}
+
+	// Assumes that there is exactly one pointer that is currently down.
+	private emitPointerMove(screenPoint: Point2, timeStamp: number) {
+		if (!this.lastPointerEvent) {
+			return false;
+		}
+
+		const pointer = this.lastPointerEvent.current
+			.withScreenPosition(screenPoint, this.viewport)
+			.withTimestamp(timeStamp);
+
+		const event: PointerMoveEvt = {
+			kind: InputEvtType.PointerMoveEvt,
+			current: pointer,
+			allPointers: [ pointer ],
+		};
+
+		const handled = this.emit(event);
+		return handled;
+	}
+
+	public override onEvent(event: InputEvt): boolean {
+		if (isPointerEvt(event) || event.kind === InputEvtType.GestureCancelEvt
+		) {
+			if (event.kind === InputEvtType.PointerDownEvt) {
+				if (this.stabilizer === null) {
+					this.stabilizer = new StylusInputStabilizer(
+						event.current.screenPos,
+						(screenPoint, timeStamp) => this.emitPointerMove(screenPoint, timeStamp),
+						this.options,
+					);
+				} else if (event.allPointers.length > 1) {
+					// Do not attempt to stabilize multiple pointers.
+					this.stabilizer.cancel();
+					this.stabilizer = null;
+				}
+			}
+
+			const handled = this.mapPointerEvent(event);
+
+			if (event.kind === InputEvtType.PointerUpEvt || event.kind === InputEvtType.GestureCancelEvt) {
+				this.stabilizer?.cancel();
+				this.stabilizer = null;
+			}
+
+			return handled;
+		}
+
+		return this.emit(event);
+	}
+
+	public static fromEditor(editor: Editor) {
+		return new InputStabilizer(editor.viewport);
+	}
+}

package/src/tools/InputFilter/StrokeKeyboardControl.ts

@@ -0,0 +1,104 @@
+import { InputEvt, InputEvtType, PointerEvt } from '../../inputEvents';
+import InputMapper from './InputMapper';
+import KeyboardShortcutManager from '../../shortcuts/KeyboardShortcutManager';
+import { lineLockKeyboardShortcutId, snapToGridKeyboardShortcutId } from '../keybindings';
+import Viewport from '../../Viewport';
+import Pointer from '../../Pointer';
+import { Point2 } from '@js-draw/math';
+import Editor from '../../Editor';
+
+/**
+ * Provides keyboard shortcuts that provide some amount of control over
+ * drawing (e.g. snap to grid, plane lock).
+ */
+export default class StrokeKeyboardControl extends InputMapper {
+	private snapToGridEnabled: boolean = false;
+	private angleLockEnabled: boolean = false;
+
+	// The point at which the last pointerDown event happened (or null if
+	// no such event has occurred).
+	private startPointCanvas: Point2|null = null;
+
+	public constructor(
+		private shortcuts: KeyboardShortcutManager, private viewport: Viewport
+	) {
+		super();
+	}
+
+	// Snap the given pointer to the nearer of the x/y axes.
+	private xyAxesSnap(pointer: Pointer) {
+		if (!this.startPointCanvas) {
+			return pointer;
+		}
+
+		// Convert this.startPointCanvas here because the viewport might change
+		// while drawing a stroke.
+		const screenPos = this.viewport.canvasToScreen(this.startPointCanvas);
+		return pointer.lockedToXYAxesScreen(screenPos, this.viewport);
+	}
+
+	private mapPointerEvent(event: PointerEvt): PointerEvt {
+		const mapPointer = (pointer: Pointer) => {
+			// Only map if there's exactly one pointer.
+			if (event.allPointers.length > 1) {
+				return pointer;
+			}
+
+			if (this.snapToGridEnabled) {
+				return pointer.snappedToGrid(this.viewport);
+			}
+
+			if (this.angleLockEnabled && this.startPointCanvas) {
+				return this.xyAxesSnap(pointer);
+			}
+
+			return pointer;
+		};
+
+		return {
+			kind: event.kind,
+			current: mapPointer(event.current),
+			allPointers: event.allPointers.map(mapPointer),
+		};
+	}
+
+	public override onEvent(event: InputEvt): boolean {
+		const shortcuts = this.shortcuts;
+
+		if (event.kind === InputEvtType.PointerDownEvt || event.kind === InputEvtType.PointerMoveEvt || event.kind === InputEvtType.PointerUpEvt) {
+			if (event.kind === InputEvtType.PointerDownEvt) {
+				this.startPointCanvas = event.current.canvasPos;
+			}
+
+			event = this.mapPointerEvent(event);
+		}
+
+		let handled = this.emit(event);
+
+		if (// Always check keyUpEvents (in case we handled the corresponding keyDown event)
+			event.kind === InputEvtType.KeyUpEvent
+
+			// Only handle key press events if another tool isn't handling it. We don't want
+			// snap to grid/angle lock to conflict with selection/another tool's shortcuts.
+			|| (!handled && event.kind === InputEvtType.KeyPressEvent)
+		) {
+			const isKeyPress = event.kind === InputEvtType.KeyPressEvent;
+
+			if (shortcuts.matchesShortcut(snapToGridKeyboardShortcutId, event)) {
+				this.snapToGridEnabled = isKeyPress;
+				handled = true;
+			}
+
+			if (shortcuts.matchesShortcut(lineLockKeyboardShortcutId, event)) {
+				this.angleLockEnabled = isKeyPress;
+				handled = true;
+			}
+		}
+
+		return handled;
+	}
+
+	public static fromEditor(editor: Editor) {
+		return new StrokeKeyboardControl(editor.shortcuts, editor.viewport);
+	}
+}

package/src/tools/PanZoom.test.ts

@@ -3,7 +3,7 @@ import Editor from '../Editor';
 import { Mat33, Vec2 } from '../lib';
 import createEditor from '../testing/createEditor';
 import sendTouchEvent from '../testing/sendTouchEvent';
-import { InputEvtType } from '../types';
+import { InputEvtType } from '../inputEvents';
 import waitForTimeout from '../util/waitForTimeout';
 import PanZoom, { PanZoomMode } from './PanZoom';
 
@@ -328,21 +328,11 @@ describe('PanZoom', () => {
 
 		expect(transformedVec(Vec2.unitX).length()).toBeCloseTo(1);
 
-		editor.toolController.dispatchInputEvent({
-			kind: InputEvtType.KeyPressEvent,
-			ctrlKey: false,
-			altKey: false,
-			key: 'r',
-		});
+		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'r');
 		expect(transformedVec(Vec2.unitX).length()).toBeCloseTo(1);
 		expect(transformedVec(Vec2.unitX)).not.objEq(Vec2.unitX, tolerableError);
 
-		editor.toolController.dispatchInputEvent({
-			kind: InputEvtType.KeyPressEvent,
-			ctrlKey: false,
-			altKey: false,
-			key: 'R',
-		});
+		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'R');
 		expect(transformedVec(Vec2.unitX).length()).toBeCloseTo(1);
 		expect(transformedVec(Vec2.unitX)).objEq(Vec2.unitX, tolerableError);
 	});