js-draw 1.0.1 → 1.1.0

package/src/tools/InputFilter/InputMapper.ts

@@ -1,41 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,254 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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);
-	}
-}