js-draw 0.18.2 → 0.20.0

package/src/tools/Pen.test.ts

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

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

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

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