js-draw 0.25.1 → 1.0.1

package/src/Editor.ts

@@ -1,25 +1,19 @@
 import EditorImage from './EditorImage';
 import ToolController from './tools/ToolController';
-import { InputEvtType, PointerEvt, EditorNotifier, EditorEventType, ImageLoader, HTMLPointerEventName, HTMLPointerEventFilter } from './types';
+import { EditorNotifier, EditorEventType, ImageLoader } from './types';
+import { HTMLPointerEventName, HTMLPointerEventFilter, InputEvtType, PointerEvt, keyUpEventFromHTMLEvent, keyPressEventFromHTMLEvent, KeyPressEvent } from './inputEvents';
 import Command from './commands/Command';
 import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
 import EventDispatcher from './EventDispatcher';
-import { Point2, Vec2 } from './math/Vec2';
-import Vec3 from './math/Vec3';
-import HTMLToolbar from './toolbar/HTMLToolbar';
-import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import { Point2, Vec2, Vec3, Color4, Mat33, Rect2, toRoundedString } from '@js-draw/math';
 import Display, { RenderingMode } from './rendering/Display';
 import SVGRenderer from './rendering/renderers/SVGRenderer';
-import Color4 from './Color4';
 import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
-import Mat33 from './math/Mat33';
-import Rect2 from './math/shapes/Rect2';
 import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
 import IconProvider from './toolbar/IconProvider';
-import { toRoundedString } from './math/rounding';
 import CanvasRenderer from './rendering/renderers/CanvasRenderer';
 import untilNextAnimationFrame from './util/untilNextAnimationFrame';
 import fileToBase64 from './util/fileToBase64';
@@ -31,6 +25,13 @@ import BackgroundComponent, { BackgroundType } from './components/BackgroundComp
 import sendPenEvent from './testing/sendPenEvent';
 import KeyboardShortcutManager from './shortcuts/KeyboardShortcutManager';
 import KeyBinding from './shortcuts/KeyBinding';
+import AbstractToolbar from './toolbar/AbstractToolbar';
+import EdgeToolbar from './toolbar/EdgeToolbar';
+import StrokeKeyboardControl from './tools/InputFilter/StrokeKeyboardControl';
+import guessKeyCodeFromKey from './util/guessKeyCodeFromKey';
+import RenderablePathSpec from './rendering/RenderablePathSpec';
+import makeAboutDialog, { AboutDialogEntry } from './dialogs/makeAboutDialog';
+import version from './version';
 
 export interface EditorSettings {
 	/** Defaults to `RenderingMode.CanvasRenderer` */
@@ -48,6 +49,8 @@ export interface EditorSettings {
 
 	/** Minimum zoom fraction (e.g. 0.5 → 50% zoom). */
 	minZoom: number,
+
+	/** Maximum zoom fraction (e.g. 2 → 200% zoom). */
 	maxZoom: number,
 
 	/**
@@ -62,7 +65,41 @@ export interface EditorSettings {
 	 */
 	keyboardShortcutOverrides: Record<string, Array<KeyBinding>>,
 
+	/**
+	 * Provides a set of icons for the editor.
+	 *
+	 * See, for example, the `@js-draw/material-icons` package.
+	 *
+	 * @example
+	 * ```ts
+	 * import * as jsdraw from 'js-draw';
+	 * import MaterialIconProvider from '@js-draw/material-icons';
+	 * import 'js-draw/styles';
+	 *
+	 * const settings: Partial<jsdraw.EditorSettings> = {
+	 *   // Default to material icons
+	 *   iconProvider: new MaterialIconProvider(),
+	 *
+	 *   // Only scroll the editor if it's focused.
+	 *   wheelEventsEnabled: 'only-if-focused',
+	 * };
+	 *
+	 * // Add an editor to the document, using the above settings
+	 * const editor = new jsdraw.Editor(document.body, settings);
+	 *
+	 * // Add a toolbar to the editor
+	 * const toolbar = jsdraw.makeEdgeToolbar(editor);
+	 *
+	 * // Add the default tool items
+	 * toolbar.addDefaults();
+	 * ```
+	 */
 	iconProvider: IconProvider,
+
+	/**
+	 * Additional messages to show in the "about" dialog.
+	 */
+	notices: AboutDialogEntry[],
 }
 
 /**
@@ -207,6 +244,7 @@ export class Editor {
 			maxZoom: settings.maxZoom ?? 1e12,
 			keyboardShortcutOverrides: settings.keyboardShortcutOverrides ?? {},
 			iconProvider: settings.iconProvider ?? new IconProvider(),
+			notices: [],
 		};
 		this.icons = this.settings.iconProvider;
 
@@ -215,7 +253,7 @@ export class Editor {
 		this.container = document.createElement('div');
 		this.renderingRegion = document.createElement('div');
 		this.container.appendChild(this.renderingRegion);
-		this.container.className = 'imageEditorContainer';
+		this.container.classList.add('imageEditorContainer', 'js-draw');
 
 		this.loadingWarning = document.createElement('div');
 		this.loadingWarning.classList.add('loadingMessage');
@@ -253,6 +291,9 @@ export class Editor {
 		this.history = new UndoRedoHistory(this, this.announceRedoCallback, this.announceUndoCallback);
 		this.toolController = new ToolController(this, this.localization);
 
+		// TODO: Make this pipeline configurable (e.g. allow users to add global input stabilization)
+		this.toolController.addInputMapper(StrokeKeyboardControl.fromEditor(this));
+
 		parent.appendChild(this.container);
 
 		this.viewport.updateScreenSize(
@@ -327,8 +368,8 @@ export class Editor {
 	 * Creates a toolbar. If `defaultLayout` is true, default buttons are used.
 	 * @returns a reference to the toolbar.
 	 */
-	public addToolbar(defaultLayout: boolean = true): HTMLToolbar {
-		const toolbar = new HTMLToolbar(this, this.container, this.localization);
+	public addToolbar(defaultLayout: boolean = true): AbstractToolbar {
+		const toolbar = new EdgeToolbar(this, this.container, this.localization);
 
 		if (defaultLayout) {
 			toolbar.addDefaults();
@@ -383,25 +424,17 @@ export class Editor {
 			return false;
 		});
 
-		this.notifier.on(EditorEventType.DisplayResized, _event => {
+		const handleResize = () => {
 			this.viewport.updateScreenSize(
 				Vec2.of(this.display.width, this.display.height)
 			);
-			this.queueRerender();
-		});
-
-		const handleResize = () => {
-			this.notifier.dispatch(EditorEventType.DisplayResized, {
-				kind: EditorEventType.DisplayResized,
-				newSize: Vec2.of(
-					this.display.width,
-					this.display.height
-				),
-			});
+			this.rerender();
+			this.updateEditorSizeVariables();
 		};
 
 		if ('ResizeObserver' in (window as any)) {
 			const resizeObserver = new ResizeObserver(handleResize);
+			resizeObserver.observe(this.renderingRegion);
 			resizeObserver.observe(this.container);
 		} else {
 			addEventListener('resize', handleResize);
@@ -433,9 +466,20 @@ export class Editor {
 		});
 	}
 
+	private updateEditorSizeVariables() {
+		// Add CSS variables so that absolutely-positioned children of the editor can
+		// still fill the screen.
+		this.container.style.setProperty(
+			'--editor-current-width-px', `${this.container.clientWidth}px`
+		);
+		this.container.style.setProperty(
+			'--editor-current-height-px', `${this.container.clientHeight}px`
+		);
+	}
+
 	private pointers: Record<number, Pointer> = {};
 	private getPointerList() {
-		const nowTime = (new Date()).getTime();
+		const nowTime = performance.now();
 
 		const res: Pointer[] = [];
 		for (const id in this.pointers) {
@@ -610,6 +654,13 @@ export class Editor {
 	 * Forward pointer events from `elem` to this editor. Such that right-click/right-click drag
 	 * events are also forwarded, `elem`'s contextmenu is disabled.
 	 *
+	 * `filter` is called once per pointer event, before doing any other processing. If `filter` returns `true` the event is
+	 * forwarded to the editor.
+	 *
+	 * **Note**: `otherEventsFilter` is like `filter`, but is called for other pointer-related
+	 * events that could also be forwarded to the editor. To forward just pointer events,
+	 * for example, `otherEventsFilter` could be given as `()=>false`.
+	 *
 	 * @example
 	 * ```ts
 	 * const overlay = document.createElement('div');
@@ -625,11 +676,25 @@ export class Editor {
 	 * });
 	 * ```
 	 */
-	public handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter) {
+	public handlePointerEventsFrom(
+		elem: HTMLElement,
+		filter?: HTMLPointerEventFilter,
+		otherEventsFilter?: (eventName: string, event: Event)=>boolean,
+	) {
 		// May be required to prevent text selection on iOS/Safari:
 		// See https://stackoverflow.com/a/70992717/17055750
-		const touchstartListener = (evt: Event) => evt.preventDefault();
+		const touchstartListener = (evt: Event) => {
+			if (otherEventsFilter && !otherEventsFilter('touchstart', evt)) {
+				return;
+			}
+
+			evt.preventDefault();
+		};
 		const contextmenuListener = (evt: Event) => {
+			if (otherEventsFilter && !otherEventsFilter('contextmenu', evt)) {
+				return;
+			}
+
 			// Don't show a context menu
 			evt.preventDefault();
 		};
@@ -646,7 +711,7 @@ export class Editor {
 				const event = evt as PointerEvent;
 
 				if (filter && !filter(eventName, event)) {
-					return true;
+					return undefined;
 				}
 
 				return this.handleHTMLPointerEvent(eventName, event);
@@ -668,32 +733,171 @@ export class Editor {
 		};
 	}
 
-	/** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
-	public handleKeyEventsFrom(elem: HTMLElement) {
-		elem.addEventListener('keydown', evt => {
-			if (evt.key === 't' || evt.key === 'T') {
-				evt.preventDefault();
+	/**
+	 * Like {@link handlePointerEventsFrom} except ignores short input gestures like clicks.
+	 *
+	 * `filter` is called once per event, before doing any other processing. If `filter` returns `true` the event is
+	 * forwarded to the editor.
+	 *
+	 * `otherEventsFilter` is passed unmodified to `handlePointerEventsFrom`.
+	 */
+	public handlePointerEventsExceptClicksFrom(
+		elem: HTMLElement,
+		filter?: HTMLPointerEventFilter,
+		otherEventsFilter?: (eventName: string, event: Event)=>boolean,
+	) {
+		type GestureRecord = {
+			// Buffer events: Send events to the editor only if the pointer has moved enough to
+			// suggest that the user is attempting to draw, rather than click to close the color picker.
+			eventBuffer: [ HTMLPointerEventName, PointerEvent ][];
+			startPoint: Point2;
+		};
+
+		// Maps pointer IDs to gesture start points
+		const gestureData: Record<number, GestureRecord> = Object.create(null);
+
+		return this.handlePointerEventsFrom(elem, (eventName, event) => {
+			if (filter && !filter(eventName, event)) {
+				return false;
+			}
+
+			// Position of the current event.
+			const currentPos = Vec2.of(event.pageX, event.pageY);
+
+			const pointerId = event.pointerId ?? 0;
+
+			// Whether to send the current event to the editor
+			let sendToEditor = true;
+
+			if (eventName === 'pointerdown') {
+				// Buffer the event, but don't send it to the editor yet.
+				// We don't want to send single-click events, but we do want to send full strokes.
+				gestureData[pointerId] = {
+					eventBuffer: [ [eventName, event] ],
+					startPoint: currentPos,
+				};
+
+				// Capture the pointer so we receive future events even if the overlay is hidden.
+				elem.setPointerCapture(event.pointerId);
+
+				// Don't send to the editor.
+				sendToEditor = false;
+			}
+			else if (eventName === 'pointermove' && gestureData[pointerId]) {
+				const gestureStartPos = gestureData[pointerId].startPoint;
+				const eventBuffer = gestureData[pointerId].eventBuffer;
+
+				// Skip if the pointer hasn't moved enough to not be a "click".
+				const strokeStartThreshold = 10;
+				const isWithinClickThreshold = gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold;
+				if (isWithinClickThreshold) {
+					eventBuffer.push([ eventName, event ]);
+					sendToEditor = false;
+				} else {
+					// Send all buffered events to the editor -- start the stroke.
+					for (const [ eventName, event ] of eventBuffer) {
+						this.handleHTMLPointerEvent(eventName, event);
+					}
+
+					gestureData[pointerId].eventBuffer = [];
+					sendToEditor = true;
+				}
+			}
+			// Pointers that aren't down -- send to the editor.
+			else if (eventName === 'pointermove') {
+				sendToEditor = true;
+			}
+			// Otherwise, if we received a pointerup/pointercancel without flushing all pointerevents from the
+			// buffer, the gesture wasn't recognised as a stroke. Thus, the editor isn't expecting a pointerup/
+			// pointercancel event.
+			else if (
+				(eventName === 'pointerup' || eventName === 'pointercancel')
+				&& gestureData[pointerId] && gestureData[pointerId].eventBuffer.length > 0
+			) {
+				elem.releasePointerCapture(event.pointerId);
+
+				// Don't send to the editor.
+				sendToEditor = false;
+
+				delete gestureData[pointerId];
+			}
+
+			// Forward all other events to the editor.
+			return sendToEditor;
+		}, otherEventsFilter);
+	}
+
+	/**
+	 * Adds event listners for keypresses (and drop events) on `elem` and forwards those
+	 * events to the editor.
+	 *
+	 * If the given `filter` returns `false` for an event, the event is ignored and not
+	 * passed to the editor.
+	 */
+	public handleKeyEventsFrom(
+		elem: HTMLElement,
+		filter: (event: KeyboardEvent)=>boolean = ()=>true
+	) {
+		// Track which keys are down so we can release them when the element
+		// loses focus. This is particularly important for keys like Control
+		// that can trigger shortcuts that cause the editor to lose focus before
+		// the keyup event is triggered.
+		let keysDown: KeyPressEvent[] = [];
+
+		type KeyEventLike = { key: string; code: string };
+
+		// Return whether two objects that are similar to keyboard events represent the
+		// same key.
+		const keyEventsMatch = (a: KeyEventLike, b: KeyEventLike) => {
+			return a.key === b.key && a.code === b.code;
+		};
+
+		elem.addEventListener('keydown', htmlEvent => {
+			if (!filter(htmlEvent)) {
+				return;
+			}
+
+			const event = keyPressEventFromHTMLEvent(htmlEvent);
+
+			// Add event to the list of keys that are down (so long as it
+			// isn't a duplicate).
+			if (!keysDown.some(other => keyEventsMatch(other, event))) {
+				keysDown.push(event);
+			}
+
+			if (event.key === 't' || event.key === 'T') {
+				htmlEvent.preventDefault();
 				this.display.rerenderAsText();
-			} else if (this.toolController.dispatchInputEvent({
-				kind: InputEvtType.KeyPressEvent,
-				key: evt.key,
-				ctrlKey: evt.ctrlKey || evt.metaKey,
-				altKey: evt.altKey,
-			})) {
-				evt.preventDefault();
-			} else if (evt.key === 'Escape') {
+			} else if (this.toolController.dispatchInputEvent(event)) {
+				htmlEvent.preventDefault();
+			} else if (event.key === 'Escape') {
 				this.renderingRegion.blur();
 			}
 		});
 
-		elem.addEventListener('keyup', evt => {
-			if (this.toolController.dispatchInputEvent({
-				kind: InputEvtType.KeyUpEvent,
-				key: evt.key,
-				ctrlKey: evt.ctrlKey || evt.metaKey,
-				altKey: evt.altKey,
-			})) {
-				evt.preventDefault();
+		elem.addEventListener('keyup', htmlEvent => {
+			// Remove the key from keysDown -- it's no longer down.
+			keysDown = keysDown.filter(event => {
+				const matches = keyEventsMatch(event, htmlEvent);
+				return !matches;
+			});
+
+			if (!filter(htmlEvent)) {
+				return;
+			}
+
+			const event = keyUpEventFromHTMLEvent(htmlEvent);
+			if (this.toolController.dispatchInputEvent(event)) {
+				htmlEvent.preventDefault();
+			}
+		});
+
+		elem.addEventListener('blur', () => {
+			for (const event of keysDown) {
+				this.toolController.dispatchInputEvent({
+					...event,
+					kind: InputEvtType.KeyUpEvent,
+				});
 			}
 		});
 
@@ -850,12 +1054,12 @@ export class Editor {
 			return;
 		}
 
-		// Draw a rectangle around the region that will be visible on save
 		const renderer = this.display.getDryInkRenderer();
 
 		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
 
 		if (showImageBounds) {
+			// Draw a rectangle around the region that will be visible on save
 			const exportRectFill = { fill: Color4.fromHex('#44444455') };
 			const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
 			renderer.drawRect(
@@ -922,19 +1126,34 @@ export class Editor {
 		return styleSheet;
 	}
 
-	// Dispatch a keyboard event to the currently selected tool.
-	// Intended for unit testing
+	/**
+	 * Dispatch a keyboard event to the currently selected tool.
+	 * Intended for unit testing.
+	 *
+	 * If `shiftKey` is undefined, it is guessed from `key`.
+	 *
+	 * At present, the **key code** dispatched is guessed from the given key and,
+	 * while this works for ASCII alphanumeric characters, this does not work for
+	 * most non-alphanumeric keys.
+	 *
+	 * Because guessing the key code from `key` is problematic, **only use this for testing**.
+	 */
 	public sendKeyboardEvent(
 		eventType: InputEvtType.KeyPressEvent|InputEvtType.KeyUpEvent,
 		key: string,
 		ctrlKey: boolean = false,
 		altKey: boolean = false,
+		shiftKey: boolean|undefined = undefined,
 	) {
+		shiftKey ??= key.toUpperCase() === key && key.toLowerCase() !== key;
+
 		this.toolController.dispatchInputEvent({
 			kind: eventType,
 			key,
+			code: guessKeyCodeFromKey(key),
 			ctrlKey,
 			altKey,
+			shiftKey,
 		});
 	}
 
@@ -1157,7 +1376,7 @@ export class Editor {
 	}
 
 	/**
-	 * Alias for loadFrom(SVGLoader.fromString).
+	 * Alias for `loadFrom(SVGLoader.fromString)`.
 	 *
 	 * This is particularly useful when accessing a bundled version of the editor,
 	 * where `SVGLoader.fromString` is unavailable.
@@ -1166,6 +1385,59 @@ export class Editor {
 		const loader = SVGLoader.fromString(svgData, sanitize);
 		await this.loadFrom(loader);
 	}
+
+	private closeAboutDialog: (()=>void)|null = null;
+
+	/**
+	 * Shows an information dialog with legal notices.
+	 */
+	public showAboutDialog() {
+		const iconLicenseText = this.icons.licenseInfo();
+
+		const notices: AboutDialogEntry[] = [];
+		notices.push({
+			heading: 'js-draw',
+			text: [
+				`v${version.number}`,
+				'',
+				'Image debug information (from when this dialog was opened):',
+				`    ${this.viewport.getScaleFactor()}x zoom, ${180/Math.PI * this.viewport.getRotationAngle()} rotation`,
+				`    ${this.image.estimateNumElements()} components`,
+				`    ${this.getImportExportRect().w}x${this.getImportExportRect().h} size`,
+			].join('\n'),
+		});
+
+		notices.push({
+			heading: 'Libraries',
+			text: [
+				'js-draw uses several libraries at runtime. Particularly noteworthy are:',
+				' - The Coloris color picker: https://github.com/mdbassit/Coloris',
+				' - The bezier.js Bézier curve library: https://github.com/Pomax/bezierjs'
+			].join('\n'),
+			minimized: true,
+		});
+
+		if (iconLicenseText) {
+			notices.push({
+				heading: 'Icon Pack',
+				text: iconLicenseText,
+				minimized: true,
+			});
+		}
+
+		notices.push(...this.settings.notices);
+
+
+		this.closeAboutDialog?.();
+		this.closeAboutDialog = makeAboutDialog(this, notices).close;
+	}
+
+	/** Removes and destroys the editor */
+	public remove() {
+		this.container.remove();
+
+		// TODO: Is additional cleanup necessary here?
+	}
 }
 
 export default Editor;

package/src/EditorImage.test.ts

@@ -1,14 +1,11 @@
 import EditorImage from './EditorImage';
 import Stroke from './components/Stroke';
-import { Vec2 } from './math/Vec2';
-import Path, { PathCommandType } from './math/shapes/Path';
-import Color4 from './Color4';
+import { Vec2, Color4, Path, PathCommandType, Rect2, Mat33 } from '@js-draw/math';
 import DummyRenderer from './rendering/renderers/DummyRenderer';
 import createEditor from './testing/createEditor';
 import RenderingStyle from './rendering/RenderingStyle';
-import Rect2 from './math/shapes/Rect2';
-import Mat33 from './math/Mat33';
 import { SerializableCommand } from './lib';
+import { pathToRenderable } from './rendering/RenderablePathSpec';
 
 describe('EditorImage', () => {
 	const testStroke = new Stroke([
@@ -60,12 +57,12 @@ describe('EditorImage', () => {
 		const image = editor.image;
 
 		const leftmostStroke = new Stroke([
-			Path.fromString('M0,0L1,1L0,1').toRenderable(testFill),
+			pathToRenderable(Path.fromString('M0,0L1,1L0,1'), testFill),
 		]);
 
 		// Lowercase ls: lineTo(Δx, Δy) instead of lineTo(x, y)
 		const rightmostStroke = new Stroke([
-			Path.fromString('M-10,0 l1,1 l0,-1').toRenderable(testFill),
+			pathToRenderable(Path.fromString('M-10,0 l1,1 l0,-1'), testFill),
 		]);
 
 		expect(!leftmostStroke.getBBox().intersects(rightmostStroke.getBBox()));

package/src/EditorImage.ts

@@ -2,13 +2,11 @@ import Editor from './Editor';
 import AbstractRenderer from './rendering/renderers/AbstractRenderer';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
-import Rect2 from './math/shapes/Rect2';
+import { Rect2, Vec2, Mat33, Mat33Array } from '@js-draw/math';
 import { EditorLocalization } from './localization';
 import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
 import EventDispatcher from './EventDispatcher';
-import { Vec2 } from './math/Vec2';
-import Mat33, { Mat33Array } from './math/Mat33';
 import { assertIsNumber, assertIsNumberArray } from './util/assertions';
 
 // @internal Sort by z-index, low to high
@@ -27,6 +25,7 @@ export default class EditorImage {
 	private root: ImageNode;
 	private background: ImageNode;
 	private componentsById: Record<string, AbstractComponent>;
+	private componentCount: number = 0;
 
 	/** Viewport for the exported/imported image. */
 	private importExportViewport: Viewport;
@@ -117,6 +116,11 @@ export default class EditorImage {
 		return leaves.map(leaf => leaf.getContent()!);
 	}
 
+	/** Returns the number of elements added to this image. @internal */
+	public estimateNumElements() {
+		return this.componentCount;
+	}
+
 	/** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
 	public getElementsIntersectingRegion(region: Rect2): AbstractComponent[] {
 		const leaves = this.root.getLeavesIntersectingRegion(region);
@@ -125,8 +129,9 @@ export default class EditorImage {
 		return leaves.map(leaf => leaf.getContent()!);
 	}
 
-	/** @internal */
+	/** Called whenever an element is completely removed. @internal */
 	public onDestroyElement(elem: AbstractComponent) {
+		this.componentCount --;
 		delete this.componentsById[elem.getId()];
 	}
 
@@ -142,6 +147,7 @@ export default class EditorImage {
 	private addElementDirectly(elem: AbstractComponent): ImageNode {
 		elem.onAddToImage(this);
 
+		this.componentCount ++;
 		this.componentsById[elem.getId()] = elem;
 
 		// If a background component, add to the background. Else,

package/src/Pointer.ts

@@ -1,4 +1,4 @@
-import { Point2, Vec2 } from './math/Vec2';
+import { Point2, Vec2 } from '@js-draw/math';
 import Viewport from './Viewport';
 
 export enum PointerDevice {
@@ -31,7 +31,7 @@ export default class Pointer {
 		// Unique ID for the pointer
 		public readonly id: number,
 
-		// Numeric timestamp (milliseconds, as from `(new Date).getTime()`)
+		// Numeric timestamp (milliseconds, as from `performance.now()`).
 		public readonly timeStamp: number,
 	) {
 	}
@@ -76,6 +76,20 @@ export default class Pointer {
 		return this.withCanvasPosition(canvasPos, viewport);
 	}
 
+	/** Returns a copy of this pointer with a changed timestamp. */
+	public withTimestamp(timeStamp: number) {
+		return new Pointer(
+			this.screenPos,
+			this.canvasPos,
+			this.pressure,
+			this.isPrimary,
+			this.down,
+			this.device,
+			this.id,
+			timeStamp
+		);
+	}
+
 	/**
 	 * Returns a copy of this pointer with a new position. The screen position is determined
 	 * by the given `canvasPos`.
@@ -116,15 +130,14 @@ export default class Pointer {
 			device = PointerDevice.Eraser;
 		}
 
-		const timeStamp = (new Date()).getTime();
+		const timeStamp = evt.timeStamp;
 		const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
 
 		if (device === PointerDevice.PrimaryButtonMouse) {
 			if (evt.buttons & 0x2) {
 				device = PointerDevice.RightButtonMouse;
 			}
-			// Commented out to work around a bug in old versions of Chrome:
-			// Left mouse up events were being given type "other".
+			// Commented out: Mouse up events seem to not satisfy this condition on mouse up.
 			// else if (!(evt.buttons & 0x1)) {
 			//	device = PointerDevice.Other;
 			//}