js-draw 0.18.1 → 0.18.2

package/src/tools/Pen.test.ts

@@ -0,0 +1,194 @@
+
+import PenTool from './Pen';
+import { Vec2 } from '../math/Vec2';
+import createEditor from '../testing/createEditor';
+import { InputEvtType } from '../types';
+import Rect2 from '../math/Rect2';
+import StrokeComponent from '../components/Stroke';
+import Mat33 from '../math/Mat33';
+import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
+import sendPenEvent from '../testing/sendPenEvent';
+
+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
+	});
+
+	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,226 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import Pointer, { PointerDevice } from '../Pointer';
+import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
+import { EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt, StrokeDataPoint } from '../types';
+import BaseTool from './BaseTool';
+import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
+
+export interface PenStyle {
+    color: Color4;
+    thickness: number;
+}
+
+export default class Pen extends BaseTool {
+	protected builder: ComponentBuilder|null = null;
+	private lastPoint: StrokeDataPoint|null = null;
+	private ctrlKeyPressed: boolean = false;
+
+	public constructor(
+		private editor: Editor,
+		description: string,
+		private style: PenStyle,
+		private builderFactory: ComponentBuilderFactory = makeFreehandLineBuilder,
+	) {
+		super(editor.notifier, description);
+	}
+
+	private getPressureMultiplier() {
+		return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
+	}
+
+	// Converts a `pointer` to a `StrokeDataPoint`.
+	protected toStrokePoint(pointer: Pointer): StrokeDataPoint {
+		if (this.isSnappingToGrid()) {
+			pointer = pointer.snappedToGrid(this.editor.viewport);
+		}
+
+		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 onPointerDown({ current, allPointers }: PointerEvt): boolean {
+		const isEraser = current.device === PointerDevice.Eraser;
+
+		let anyDeviceIsStylus = false;
+		for (const pointer of allPointers) {
+			if (pointer.device === PointerDevice.Pen) {
+				anyDeviceIsStylus = true;
+				break;
+			}
+		}
+
+		if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
+			this.builder = this.builderFactory(this.toStrokePoint(current), this.editor.viewport);
+			return true;
+		}
+
+		return false;
+	}
+
+	public onPointerMove({ current }: PointerEvt): void {
+		if (!this.builder) return;
+
+		this.addPointToStroke(this.toStrokePoint(current));
+	}
+
+	public onPointerUp({ current }: PointerEvt): void {
+		if (!this.builder) {
+			return;
+		}
+
+		// 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();
+		}
+	}
+
+	public onGestureCancel() {
+		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.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.style = {
+				...this.style,
+				color,
+			};
+			this.noteUpdated();
+		}
+	}
+
+	public setThickness(thickness: number) {
+		if (thickness !== this.style.thickness) {
+			this.style = {
+				...this.style,
+				thickness,
+			};
+			this.noteUpdated();
+		}
+	}
+
+	public setStrokeFactory(factory: ComponentBuilderFactory) {
+		if (factory !== this.builderFactory) {
+			this.builderFactory = factory;
+			this.noteUpdated();
+		}
+	}
+
+	public getThickness() { return this.style.thickness; }
+	public getColor() { return this.style.color; }
+	public getStrokeFactory() { return this.builderFactory; }
+
+	public setEnabled(enabled: boolean): void {
+		super.setEnabled(enabled);
+
+		this.ctrlKeyPressed = false;
+	}
+
+	private isSnappingToGrid() { return this.ctrlKeyPressed; }
+
+	public onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean {
+		key = key.toLowerCase();
+
+		let newThickness: number|undefined;
+		if (key === '-' || key === '_') {
+			newThickness = this.getThickness() * 2/3;
+		} else if (key === '+' || key === '=') {
+			newThickness = this.getThickness() * 3/2;
+		}
+
+		if (newThickness !== undefined) {
+			newThickness = Math.min(Math.max(1, newThickness), 256);
+			this.setThickness(newThickness);
+			return true;
+		}
+
+		if (key === 'control' || key === 'meta') {
+			this.ctrlKeyPressed = true;
+			return true;
+		}
+
+		// Ctrl+Z: End the stroke so that it can be undone/redone.
+		if (key === 'z' && ctrlKey && this.builder) {
+			this.finalizeStroke();
+		}
+
+		return false;
+	}
+
+	public onKeyUp({ key }: KeyUpEvent): boolean {
+		key = key.toLowerCase();
+
+		if (key === 'control' || key === 'meta') {
+			this.ctrlKeyPressed = false;
+			return true;
+		}
+
+		return false;
+	}
+}

package/src/tools/PipetteTool.ts

@@ -0,0 +1,55 @@
+// @internal @packageDocumentation
+
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+
+type ColorListener = (color: Color4|null)=>void;
+
+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);
+	}
+
+	public setColorListener(
+		colorPreviewListener: ColorListener,
+
+		// Called when the gesture ends -- when the user has selected a color.
+		colorSelectListener: ColorListener,
+	) {
+		this.colorPreviewListener = colorPreviewListener;
+		this.colorSelectListener = colorSelectListener;
+	}
+
+	public clearColorListener() {
+		this.colorPreviewListener = null;
+		this.colorSelectListener = null;
+	}
+
+	public onPointerDown({ current, allPointers }: PointerEvt): boolean {
+		if (this.colorPreviewListener && allPointers.length === 1) {
+			this.colorPreviewListener(this.editor.display.getColorAt(current.screenPos));
+			return true;
+		}
+		return false;
+	}
+
+	public onPointerMove({ current }: PointerEvt): void {
+		this.colorPreviewListener?.(this.editor.display.getColorAt(current.screenPos));
+	}
+
+	public onPointerUp({ current }: PointerEvt): void {
+		this.colorSelectListener?.(this.editor.display.getColorAt(current.screenPos));
+	}
+
+	public onGestureCancel(): void {
+		this.colorSelectListener?.(null);
+	}
+}

package/src/tools/SelectionTool/SelectAllShortcutHandler.ts

@@ -0,0 +1,28 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
+import BaseTool from '../BaseTool';
+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 onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean {
+		if (ctrlKey && key === 'a') {
+			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;
+	}
+}