js-draw 1.0.0 → 1.0.1

package/src/tools/Pen.test.ts

@@ -0,0 +1,260 @@
+
+import PenTool from './Pen';
+import { Mat33, Rect2, Vec2 } from '@js-draw/math';
+import createEditor from '../testing/createEditor';
+import { InputEvtType } from '../inputEvents';
+import StrokeComponent from '../components/Stroke';
+import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
+import sendPenEvent from '../testing/sendPenEvent';
+import sendTouchEvent from '../testing/sendTouchEvent';
+
+describe('Pen', () => {
+	it('should draw horizontal lines', () => {
+		const editor = createEditor();
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		for (let i = 0; i < 10; i++) {
+			sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(i, 0));
+			jest.advanceTimersByTime(200);
+		}
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(200, 0));
+
+		const elems = editor.image.getElementsIntersectingRegion(new Rect2(0, 10, 10, -10));
+		expect(elems).toHaveLength(1);
+
+		// Account for stroke width
+		const tolerableError = 8;
+		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(0, 0), tolerableError);
+		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(200, 0), tolerableError);
+	});
+
+	it('should draw vertical line', () => {
+		const editor = createEditor();
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		for (let i = 0; i < 10; i++) {
+			sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(0, i * 20));
+			jest.advanceTimersByTime(200);
+		}
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(0, 150));
+
+		const elems = editor.image.getElementsIntersectingRegion(Rect2.unitSquare);
+		expect(elems).toHaveLength(1);
+
+		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(0, 0), 8); // ± 8
+		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(0, 175), 25); // ± 25
+	});
+
+	it('should draw vertical line with slight bend', () => {
+		const editor = createEditor();
+
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(417, 24));
+		jest.advanceTimersByTime(245);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 197));
+		jest.advanceTimersByTime(20);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 199));
+		jest.advanceTimersByTime(12);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 201));
+		jest.advanceTimersByTime(40);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 203));
+		jest.advanceTimersByTime(14);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 206));
+		jest.advanceTimersByTime(35);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 208));
+		jest.advanceTimersByTime(16);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 211));
+		jest.advanceTimersByTime(51);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 215));
+		jest.advanceTimersByTime(32);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 218));
+		jest.advanceTimersByTime(30);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 220));
+		jest.advanceTimersByTime(24);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 222));
+		jest.advanceTimersByTime(14);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 224));
+		jest.advanceTimersByTime(32);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 227));
+		jest.advanceTimersByTime(17);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 229));
+		jest.advanceTimersByTime(53);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 234));
+		jest.advanceTimersByTime(34);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 236));
+		jest.advanceTimersByTime(17);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 238));
+		jest.advanceTimersByTime(39);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 240));
+		jest.advanceTimersByTime(10);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 243));
+		jest.advanceTimersByTime(34);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 250));
+		jest.advanceTimersByTime(57);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 252));
+		jest.advanceTimersByTime(8);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(422, 256));
+		jest.advanceTimersByTime(28);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(422, 258));
+		jest.advanceTimersByTime(21);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(421, 262));
+		jest.advanceTimersByTime(34);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 264));
+		jest.advanceTimersByTime(5);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 266));
+		jest.advanceTimersByTime(22);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 268));
+		jest.advanceTimersByTime(22);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 271));
+		jest.advanceTimersByTime(18);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 274));
+		jest.advanceTimersByTime(33);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 277));
+		jest.advanceTimersByTime(16);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 279));
+		jest.advanceTimersByTime(36);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 282));
+		jest.advanceTimersByTime(15);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 284));
+		jest.advanceTimersByTime(48);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 289));
+		jest.advanceTimersByTime(16);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 291));
+		jest.advanceTimersByTime(31);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 295));
+		jest.advanceTimersByTime(23);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 301));
+		jest.advanceTimersByTime(31);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 306));
+		jest.advanceTimersByTime(18);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 308));
+		jest.advanceTimersByTime(20);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 310));
+		jest.advanceTimersByTime(13);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 313));
+		jest.advanceTimersByTime(17);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 317));
+		jest.advanceTimersByTime(33);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 321));
+		jest.advanceTimersByTime(15);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 324));
+		jest.advanceTimersByTime(23);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 326));
+		jest.advanceTimersByTime(14);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 329));
+		jest.advanceTimersByTime(36);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 333));
+		jest.advanceTimersByTime(8);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 340));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(420, 340));
+
+		const elems = editor.image.getElementsIntersectingRegion(new Rect2(0, 0, 1000, 1000));
+		expect(elems).toHaveLength(1);
+
+		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(420, 24), 32); // ± 32
+		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(420, 340), 25); // ± 25
+	});
+
+	// if `mainEventIsPen` is false, tests with touch events.
+	const testEventCancelation = (mainEventIsPen: boolean) => {
+		const editor = createEditor();
+
+		expect(editor.image.getElementsIntersectingRegion(new Rect2(0, 0, 1000, 1000))).toHaveLength(0);
+
+		const sendMainEvent = mainEventIsPen ? sendPenEvent : sendTouchEvent;
+
+		// Start the drawing
+		const mainPointer = sendMainEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(417, 24));
+		jest.advanceTimersByTime(245);
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 197));
+		jest.advanceTimersByTime(20);
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 199));
+		jest.advanceTimersByTime(12);
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 201));
+		jest.advanceTimersByTime(40);
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 203));
+		jest.advanceTimersByTime(14);
+
+		// Attempt to cancel the drawing
+		let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0), [ mainPointer ]);
+		let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(100, 0), [ firstPointer, mainPointer ]);
+
+		const maxIterations = 10;
+		for (let i = 0; i < maxIterations; i++) {
+			jest.advanceTimersByTime(100);
+
+			const point1 = Vec2.of(-i * 5, 0);
+			const point2 = Vec2.of(i * 5 + 100, 0);
+
+			const eventType = InputEvtType.PointerMoveEvt;
+			firstPointer = sendTouchEvent(editor, eventType, point1, [ secondPointer, mainPointer ]);
+			secondPointer = sendTouchEvent(editor, eventType, point2, [ firstPointer, mainPointer ]);
+
+			if (i === maxIterations - 1) {
+				jest.advanceTimersByTime(10);
+
+				sendTouchEvent(editor, InputEvtType.PointerUpEvt, point1, [ secondPointer, mainPointer ]);
+				sendTouchEvent(editor, InputEvtType.PointerUpEvt, point2, [ mainPointer ]);
+			}
+
+			jest.advanceTimersByTime(100);
+		}
+
+		// Finish the drawing
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 333), [firstPointer, secondPointer]);
+		jest.advanceTimersByTime(8);
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 340), [firstPointer, secondPointer]);
+		sendMainEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(420, 340), [firstPointer, secondPointer]);
+
+		const elementsInDrawingArea = editor.image.getElementsIntersectingRegion(new Rect2(0, 0, 1000, 1000));
+		if (mainEventIsPen) {
+			expect(elementsInDrawingArea).toHaveLength(1);
+		} else {
+			expect(elementsInDrawingArea).toHaveLength(0);
+		}
+	};
+
+	it('pen events should not be cancelable by touch events', () => {
+		testEventCancelation(true);
+	});
+
+	it('touch events should be cancelable by touch events', () => {
+		testEventCancelation(false);
+	});
+
+	it('ctrl+z should finalize then undo the current stroke', async () => {
+		const editor = createEditor();
+
+		expect(editor.history.undoStackSize).toBe(0);
+
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(10, 10));
+		jest.advanceTimersByTime(100);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(20, 10));
+
+		const ctrlKeyDown = true;
+		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'z', ctrlKeyDown);
+
+		// Stroke should have been undone
+		expect(editor.history.redoStackSize).toBe(1);
+
+		// Lifting the pointer up shouldn't clear the redo stack.
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(420, 340));
+		expect(editor.history.redoStackSize).toBe(1);
+	});
+
+	it('holding ctrl should snap the stroke to grid', () => {
+		const editor = createEditor();
+		editor.viewport.resetTransform(Mat33.identity);
+
+		const penTool = editor.toolController.getMatchingTools(PenTool)[0];
+		penTool.setStrokeFactory(makeFreehandLineBuilder);
+
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0.1, 0.1));
+		jest.advanceTimersByTime(100);
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(10.1, 10.1));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(10.1, 10.1));
+
+		const allElems = editor.image.getAllElements();
+		expect(allElems).toHaveLength(1);
+
+		const firstStroke = allElems[0] as StrokeComponent;
+		expect(firstStroke.getPath().bbox).objEq(new Rect2(0, 0, 10, 10));
+	});
+});

package/src/tools/Pen.ts

@@ -0,0 +1,284 @@
+import { Color4 } from '@js-draw/math';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import Pointer, { PointerDevice } from '../Pointer';
+import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
+import { EditorEventType, StrokeDataPoint } from '../types';
+import { KeyPressEvent, PointerEvt } from '../inputEvents';
+import BaseTool from './BaseTool';
+import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
+import { undoKeyboardShortcutId } from './keybindings';
+import { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId } from './keybindings';
+import InputStabilizer from './InputFilter/InputStabilizer';
+import { MutableReactiveValue, ReactiveValue } from '../util/ReactiveValue';
+
+export interface PenStyle {
+	readonly color: Color4;
+	readonly thickness: number;
+	readonly factory: ComponentBuilderFactory;
+}
+
+export default class Pen extends BaseTool {
+	protected builder: ComponentBuilder|null = null;
+	private lastPoint: StrokeDataPoint|null = null;
+	private startPoint: StrokeDataPoint|null = null;
+	private currentDeviceType: PointerDevice|null = null;
+	private styleValue: MutableReactiveValue<PenStyle>;
+	private style: PenStyle;
+
+	public constructor(
+		private editor: Editor,
+		description: string,
+		style: Partial<PenStyle>,
+	) {
+		super(editor.notifier, description);
+
+		this.styleValue = ReactiveValue.fromInitialValue<PenStyle>({
+			factory: makeFreehandLineBuilder,
+			color: Color4.blue,
+			thickness: 4,
+			...style,
+		});
+
+		this.styleValue.onUpdateAndNow(newValue => {
+			this.style = newValue;
+			this.noteUpdated();
+		});
+	}
+
+	private getPressureMultiplier() {
+		const thickness = this.style.thickness;
+		return 1 / this.editor.viewport.getScaleFactor() * thickness;
+	}
+
+	// Converts a `pointer` to a `StrokeDataPoint`.
+	protected toStrokePoint(pointer: Pointer): StrokeDataPoint {
+		const minPressure = 0.3;
+		let pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
+
+		if (!isFinite(pressure)) {
+			console.warn('Non-finite pressure!', pointer);
+			pressure = minPressure;
+		}
+		console.assert(isFinite(pointer.canvasPos.length()), 'Non-finite canvas position!');
+		console.assert(isFinite(pointer.screenPos.length()), 'Non-finite screen position!');
+		console.assert(isFinite(pointer.timeStamp), 'Non-finite timeStamp on pointer!');
+
+		const pos = pointer.canvasPos;
+
+		return {
+			pos,
+			width: pressure * this.getPressureMultiplier(),
+			color: this.style.color,
+			time: pointer.timeStamp,
+		};
+	}
+
+	// Displays the stroke that is currently being built with the display's `wetInkRenderer`.
+	protected previewStroke() {
+		this.editor.clearWetInk();
+		this.builder?.preview(this.editor.display.getWetInkRenderer());
+	}
+
+	// Throws if no stroke builder exists.
+	protected addPointToStroke(point: StrokeDataPoint) {
+		if (!this.builder) {
+			throw new Error('No stroke is currently being generated.');
+		}
+		this.builder.addPoint(point);
+		this.lastPoint = point;
+		this.previewStroke();
+	}
+
+	public override onPointerDown(event: PointerEvt): boolean {
+		const { current, allPointers } = event;
+		const isEraser = current.device === PointerDevice.Eraser;
+
+		let anyDeviceIsStylus = false;
+		for (const pointer of allPointers) {
+			if (pointer.device === PointerDevice.Pen) {
+				anyDeviceIsStylus = true;
+				break;
+			}
+		}
+
+		// Avoid canceling an existing stroke
+		if (this.builder && !this.eventCanCancelStroke(event)) {
+			return true;
+		}
+
+		if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
+			this.startPoint = this.toStrokePoint(current);
+			this.builder = this.style.factory(this.startPoint, this.editor.viewport);
+			this.currentDeviceType = current.device;
+			return true;
+		}
+
+		return false;
+	}
+
+	private eventCanCancelStroke(event: PointerEvt) {
+		// If there has been a delay since the last input event,
+		// it's always okay to cancel
+		const lastInputTime = this.lastPoint?.time ?? 0;
+		if (event.current.timeStamp - lastInputTime > 1000) {
+			return true;
+		}
+
+		const isPenStroke = this.currentDeviceType === PointerDevice.Pen;
+		const isTouchEvent = event.current.device === PointerDevice.Touch;
+
+		// Don't allow pen strokes to be cancelled by touch events.
+		if (isPenStroke && isTouchEvent) {
+			return false;
+		}
+
+		return true;
+	}
+
+	public override eventCanBeDeliveredToNonActiveTool(event: PointerEvt) {
+		return this.eventCanCancelStroke(event);
+	}
+
+	public override onPointerMove({ current }: PointerEvt): void {
+		if (!this.builder) return;
+		if (current.device !== this.currentDeviceType) return;
+
+		this.addPointToStroke(this.toStrokePoint(current));
+	}
+
+	public override onPointerUp({ current }: PointerEvt) {
+		if (!this.builder) return false;
+		if (current.device !== this.currentDeviceType) {
+			// this.builder still exists, so we're handling events from another
+			// device type.
+			return true;
+		}
+
+		// onPointerUp events can have zero pressure. Use the last pressure instead.
+		const currentPoint = this.toStrokePoint(current);
+		const strokePoint = {
+			...currentPoint,
+			width: this.lastPoint?.width ?? currentPoint.width,
+		};
+
+		this.addPointToStroke(strokePoint);
+
+		if (current.isPrimary) {
+			this.finalizeStroke();
+		}
+
+		return false;
+	}
+
+	public override onGestureCancel() {
+		this.builder = null;
+		this.editor.clearWetInk();
+	}
+
+	private finalizeStroke() {
+		if (this.builder) {
+			const stroke = this.builder.build();
+			this.previewStroke();
+
+			if (stroke.getBBox().area > 0) {
+				const canFlatten = true;
+				const action = EditorImage.addElement(stroke, canFlatten);
+				this.editor.dispatch(action);
+			} else {
+				console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
+			}
+		}
+		this.builder = null;
+		this.lastPoint = null;
+		this.editor.clearWetInk();
+	}
+
+	private noteUpdated() {
+		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+			kind: EditorEventType.ToolUpdated,
+			tool: this,
+		});
+	}
+
+	public setColor(color: Color4): void {
+		if (color.toHexString() !== this.style.color.toHexString()) {
+			this.styleValue.set({
+				...this.style,
+				color,
+			});
+		}
+	}
+
+	public setThickness(thickness: number) {
+		if (thickness !== this.style.thickness) {
+			this.styleValue.set({
+				...this.style,
+				thickness,
+			});
+		}
+	}
+
+	public setStrokeFactory(factory: ComponentBuilderFactory) {
+		if (factory !== this.style.factory) {
+			this.styleValue.set({
+				...this.style,
+				factory,
+			});
+		}
+	}
+
+	public setHasStabilization(hasStabilization: boolean) {
+		const hasInputMapper = !!this.getInputMapper();
+
+		// TODO: Currently, this assumes that there is no other input mapper.
+		if (hasStabilization === hasInputMapper) {
+			return;
+		}
+
+		if (hasInputMapper) {
+			this.setInputMapper(null);
+		} else {
+			this.setInputMapper(new InputStabilizer(this.editor.viewport));
+		}
+		this.noteUpdated();
+	}
+
+	public getThickness() { return this.style.thickness; }
+	public getColor() { return this.style.color; }
+	public getStrokeFactory() { return this.style.factory; }
+	public getStyleValue() { return this.styleValue; }
+
+	public override setEnabled(enabled: boolean): void {
+		super.setEnabled(enabled);
+	}
+
+	public override onKeyPress(event: KeyPressEvent): boolean {
+		const shortcuts = this.editor.shortcuts;
+
+		// Ctrl+Z: End the stroke so that it can be undone/redone.
+		const isCtrlZ = shortcuts.matchesShortcut(undoKeyboardShortcutId, event);
+		if (this.builder && isCtrlZ) {
+			this.finalizeStroke();
+
+			// Return false: Allow other listeners to handle the event (e.g.
+			// undo/redo).
+			return false;
+		}
+
+		let newThickness: number|undefined;
+		if (shortcuts.matchesShortcut(decreaseSizeKeyboardShortcutId, event)) {
+			newThickness = this.getThickness() * 2/3;
+		} else if (shortcuts.matchesShortcut(increaseSizeKeyboardShortcutId, event)) {
+			newThickness = this.getThickness() * 3/2;
+		}
+
+		if (newThickness !== undefined) {
+			newThickness = Math.min(Math.max(1, newThickness), 256);
+			this.setThickness(newThickness);
+			return true;
+		}
+
+		return false;
+	}
+}

package/src/tools/PipetteTool.ts

@@ -0,0 +1,84 @@
+// @internal @packageDocumentation
+
+import { Color4 } from '@js-draw/math';
+import Editor from '../Editor';
+import { PointerEvt } from '../inputEvents';
+import BaseTool from './BaseTool';
+
+type ColorListener = (color: Color4|null)=>void;
+
+/**
+ * A tool used internally to pick colors from the canvas.
+ *
+ * When color selection is in progress, the `pipette--color-selection-in-progress` class
+ * is added to the root element. This can be used by themes.
+ *
+ * @internal
+ */
+export default class PipetteTool extends BaseTool {
+	private colorPreviewListener: ColorListener|null = null;
+	private colorSelectListener: ColorListener|null = null;
+
+	public constructor(
+		private editor: Editor,
+		description: string,
+	) {
+		super(editor.notifier, description);
+
+		this.enabledValue().onUpdateAndNow(() => {
+			this.updateSelectingStatus();
+		});
+	}
+
+	// Ensures that the root editor element correctly reflects whether color selection
+	// is in progress.
+	private updateSelectingStatus() {
+		const className = 'pipette--color-selection-in-progress';
+
+		if (this.isEnabled() && this.colorSelectListener && this.colorPreviewListener) {
+			this.editor.getRootElement().classList.add(className);
+		}
+		else {
+			this.editor.getRootElement().classList.remove(className);
+		}
+	}
+
+	public setColorListener(
+		colorPreviewListener: ColorListener,
+
+		// Called when the gesture ends -- when the user has selected a color.
+		colorSelectListener: ColorListener,
+	) {
+		this.colorPreviewListener = colorPreviewListener;
+		this.colorSelectListener = colorSelectListener;
+
+		this.updateSelectingStatus();
+	}
+
+	public clearColorListener() {
+		this.colorPreviewListener = null;
+		this.colorSelectListener = null;
+
+		this.updateSelectingStatus();
+	}
+
+	public override onPointerDown({ current, allPointers }: PointerEvt): boolean {
+		if (this.colorPreviewListener && allPointers.length === 1) {
+			this.colorPreviewListener(this.editor.display.getColorAt(current.screenPos));
+			return true;
+		}
+		return false;
+	}
+
+	public override onPointerMove({ current }: PointerEvt): void {
+		this.colorPreviewListener?.(this.editor.display.getColorAt(current.screenPos));
+	}
+
+	public override onPointerUp({ current }: PointerEvt): void {
+		this.colorSelectListener?.(this.editor.display.getColorAt(current.screenPos));
+	}
+
+	public override onGestureCancel(): void {
+		this.colorSelectListener?.(null);
+	}
+}

package/src/tools/SelectionTool/SelectAllShortcutHandler.ts

@@ -0,0 +1,29 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../inputEvents';
+import BaseTool from '../BaseTool';
+import { selectAllKeyboardShortcut } from '../keybindings';
+import SelectionTool from './SelectionTool';
+
+// Handles ctrl+a: Select all
+export default class SelectAllShortcutHandler extends BaseTool {
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.selectAllTool);
+	}
+
+	// @internal
+	public override onKeyPress(event: KeyPressEvent): boolean {
+		if (this.editor.shortcuts.matchesShortcut(selectAllKeyboardShortcut, event)) {
+			const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+
+			if (selectionTools.length > 0) {
+				const selectionTool = selectionTools[0];
+				selectionTool.setEnabled(true);
+				selectionTool.setSelection(this.editor.image.getAllElements());
+
+				return true;
+			}
+		}
+
+		return false;
+	}
+}