js-draw 0.0.1

package/src/tools/BaseTool.ts

@@ -0,0 +1,58 @@
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, EditorEventType, KeyPressEvent } from '../types';
+import { ToolType } from './ToolController';
+import ToolEnabledGroup from './ToolEnabledGroup';
+
+export default abstract class BaseTool implements PointerEvtListener {
+	private enabled: boolean = true;
+	private group: ToolEnabledGroup|null = null;
+
+	public abstract onPointerDown(event: PointerEvt): boolean;
+	public abstract onPointerMove(event: PointerEvt): void;
+	public abstract onPointerUp(event: PointerEvt): void;
+	public abstract onGestureCancel(): void;
+	public abstract readonly kind: ToolType;
+
+	protected constructor(private notifier: EditorNotifier, public readonly description: string) {
+	}
+
+	public onWheel(_event: WheelEvt): boolean {
+		return false;
+	}
+
+	public onKeyPress(_event: KeyPressEvent): boolean {
+		return false;
+	}
+
+	public setEnabled(enabled: boolean) {
+		this.enabled = enabled;
+
+		// Ensure that at most one tool in the group is enabled.
+		if (enabled) {
+			this.group?.notifyEnabled(this);
+			this.notifier.dispatch(EditorEventType.ToolEnabled, {
+				kind: EditorEventType.ToolEnabled,
+				tool: this,
+			});
+		} else {
+			this.notifier.dispatch(EditorEventType.ToolDisabled, {
+				kind: EditorEventType.ToolDisabled,
+				tool: this,
+			});
+		}
+	}
+
+	public isEnabled(): boolean {
+		return this.enabled;
+	}
+
+	// Connect this tool to a set of other tools, ensuring that at most one
+	// of the tools in the group is enabled.
+	public setToolGroup(group: ToolEnabledGroup) {
+		if (this.isEnabled()) {
+			group.notifyEnabled(this);
+		}
+
+		this.group = group;
+	}
+}
+

package/src/tools/Eraser.ts

@@ -0,0 +1,67 @@
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import Editor from '../Editor';
+import { Point2 } from '../geometry/Vec2';
+import LineSegment2 from '../geometry/LineSegment2';
+import Erase from '../commands/Erase';
+import { ToolType } from './ToolController';
+import AbstractComponent from '../components/AbstractComponent';
+import { PointerDevice } from '../Pointer';
+
+export default class Eraser extends BaseTool {
+	private lastPoint: Point2;
+	private command: Erase|null = null;
+	public kind: ToolType = ToolType.Eraser;
+	private toRemove: AbstractComponent[];
+
+	public constructor(private editor: Editor, description: string) {
+		super(editor.notifier, description);
+	}
+
+	public onPointerDown(event: PointerEvt): boolean {
+		if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
+			this.lastPoint = event.current.canvasPos;
+			this.toRemove = [];
+			return true;
+		}
+
+		return false;
+	}
+
+	public onPointerMove(event: PointerEvt): void {
+		const currentPoint = event.current.canvasPos;
+		if (currentPoint.minus(this.lastPoint).magnitude() === 0) {
+			return;
+		}
+
+		const line = new LineSegment2(this.lastPoint, currentPoint);
+		const region = line.bbox;
+
+		// Remove any intersecting elements.
+		this.toRemove.push(...this.editor.image
+			.getElementsIntersectingRegion(region).filter(component => {
+				return component.intersects(line);
+			}));
+
+		this.command?.unapply(this.editor);
+		this.command = new Erase(this.toRemove);
+		this.command.apply(this.editor);
+
+		this.lastPoint = currentPoint;
+	}
+
+	public onPointerUp(_event: PointerEvt): void {
+		if (this.command && this.toRemove.length > 0) {
+			this.command?.unapply(this.editor);
+
+			// Dispatch the command to make it undo-able
+			this.editor.dispatch(this.command);
+		}
+		this.command = null;
+	}
+
+	public onGestureCancel(): void {
+		this.command?.unapply(this.editor);
+		this.command = null;
+	}
+}

package/src/tools/PanZoom.ts

@@ -0,0 +1,253 @@
+
+import { Editor } from '../Editor';
+import Mat33 from '../geometry/Mat33';
+import { Point2, Vec2 } from '../geometry/Vec2';
+import Vec3 from '../geometry/Vec3';
+import Pointer, { PointerDevice } from '../Pointer';
+import { KeyPressEvent, PointerEvt, WheelEvt } from '../types';
+import { Viewport } from '../Viewport';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+
+interface PinchData {
+	canvasCenter: Point2;
+	screenCenter: Point2;
+	angle: number;
+	dist: number;
+}
+
+export enum PanZoomMode {
+	// Handle one-pointer gestures (touchscreen only unless AnyDevice is set)
+	OneFingerGestures = 0x1,
+
+	// Handle two-pointer gestures (touchscreen only unless AnyDevice is set)
+	TwoFingerGestures = 0x1 << 1,
+
+	// / Handle gestures from any device, rather than just touch
+	AnyDevice = 0x1 << 2,
+}
+
+export default class PanZoom extends BaseTool {
+	public readonly kind: ToolType.PanZoom|ToolType.TouchPanZoom = ToolType.PanZoom;
+	private transform: Viewport.ViewportTransform|null = null;
+
+	private lastAngle: number;
+	private lastDist: number;
+	private lastScreenCenter: Point2;
+
+	public constructor(private editor: Editor, private mode: PanZoomMode, description: string) {
+		super(editor.notifier, description);
+
+		if (mode === PanZoomMode.OneFingerGestures) {
+			this.kind = ToolType.TouchPanZoom;
+		}
+	}
+
+	// Returns information about the pointers in a gesture
+	public computePinchData(p1: Pointer, p2: Pointer): PinchData {
+		const screenBetween = p2.screenPos.minus(p1.screenPos);
+		const angle = screenBetween.angle();
+		const dist = screenBetween.magnitude();
+		const canvasCenter = p2.canvasPos.plus(p1.canvasPos).times(0.5);
+		const screenCenter = p2.screenPos.plus(p1.screenPos).times(0.5);
+
+		return { canvasCenter, screenCenter, angle, dist };
+	}
+
+	private pointersHaveCorrectDeviceType(pointers: Pointer[]) {
+		return this.mode & PanZoomMode.AnyDevice || pointers.every(
+			pointer => pointer.device === PointerDevice.Touch
+		);
+	}
+
+	public onPointerDown({ allPointers }: PointerEvt): boolean {
+		let handlingGesture = false;
+
+		if (!this.pointersHaveCorrectDeviceType(allPointers)) {
+			handlingGesture = false;
+		} else if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
+			const { screenCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+			this.lastAngle = angle;
+			this.lastDist = dist;
+			this.lastScreenCenter = screenCenter;
+			handlingGesture = true;
+		} else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
+			this.lastScreenCenter = allPointers[0].screenPos;
+			handlingGesture = true;
+		}
+
+		if (handlingGesture) {
+			this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
+		}
+
+		return handlingGesture;
+	}
+
+	// Returns the change in position of the center of the given group of pointers.
+	// Assumes this.lastScreenCenter has been set appropriately.
+	private getCenterDelta(screenCenter: Point2): Vec2 {
+		// Use transformVec3 to avoid translating the delta
+		const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenCenter.minus(this.lastScreenCenter));
+		return delta;
+	}
+
+	private handleTwoFingerMove(allPointers: Pointer[]) {
+		const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+
+		const delta = this.getCenterDelta(screenCenter);
+
+		const transformUpdate = Mat33.translation(delta)
+			.rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
+			.rightMul(Mat33.zRotation(angle - this.lastAngle, canvasCenter));
+		this.lastScreenCenter = screenCenter;
+		this.lastDist = dist;
+		this.lastAngle = angle;
+		this.transform = new Viewport.ViewportTransform(
+			this.transform!.transform.rightMul(transformUpdate)
+		);
+	}
+
+	private handleOneFingerMove(pointer: Pointer) {
+		const delta = this.getCenterDelta(pointer.screenPos);
+		this.transform = new Viewport.ViewportTransform(
+			this.transform!.transform.rightMul(
+				Mat33.translation(delta)
+			)
+		);
+		this.lastScreenCenter = pointer.screenPos;
+	}
+
+	public onPointerMove({ allPointers }: PointerEvt): void {
+		this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
+
+		const lastTransform = this.transform;
+		if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
+			this.handleTwoFingerMove(allPointers);
+		} else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
+			this.handleOneFingerMove(allPointers[0]);
+		}
+		lastTransform.unapply(this.editor);
+		this.transform.apply(this.editor);
+	}
+
+	public onPointerUp(_event: PointerEvt): void {
+		if (this.transform) {
+			this.transform.unapply(this.editor);
+			this.editor.dispatch(this.transform, false);
+		}
+
+		this.transform = null;
+	}
+
+	public onGestureCancel(): void {
+		this.transform?.unapply(this.editor);
+		this.transform = null;
+	}
+
+	// Applies [transformUpdate] to the editor. This stacks on top of the
+	// current transformation, if it exists.
+	private updateTransform(transformUpdate: Mat33) {
+		let newTransform = transformUpdate;
+		if (this.transform) {
+			newTransform = this.transform.transform.rightMul(transformUpdate);
+		}
+
+		this.transform?.unapply(this.editor);
+		this.transform = new Viewport.ViewportTransform(newTransform);
+		this.transform.apply(this.editor);
+	}
+
+	public onWheel({ delta, screenPos }: WheelEvt): boolean {
+		if (this.transform === null) {
+			this.transform = new Viewport.ViewportTransform(Mat33.identity);
+		}
+
+		const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
+		const toCanvas = this.editor.viewport.screenToCanvasTransform;
+
+		// Transform without including translation
+		const translation =
+			toCanvas.transformVec3(
+				Vec3.of(-delta.x, -delta.y, 0)
+			);
+		const pinchZoomScaleFactor = 1.04;
+		const transformUpdate = Mat33.scaling2D(
+			Math.pow(pinchZoomScaleFactor, -delta.z), canvasPos
+		).rightMul(
+			Mat33.translation(translation)
+		);
+		this.updateTransform(transformUpdate);
+
+		return true;
+	}
+
+	public onKeyPress({ key }: KeyPressEvent): boolean {
+		let translation = Vec2.zero;
+		let scale = 1;
+		let rotation = 0;
+
+		// Keyboard shortcut handling
+		switch (key) {
+		case 'a':
+		case 'h':
+		case 'ArrowLeft':
+			translation = Vec2.of(-1, 0);
+			break;
+		case 'd':
+		case 'l':
+		case 'ArrowRight':
+			translation = Vec2.of(1, 0);
+			break;
+		case 'k':
+		case 'ArrowUp':
+			translation = Vec2.of(0, -1);
+			break;
+		case 'j':
+		case 'ArrowDown':
+			translation = Vec2.of(0, 1);
+			break;
+		case 'w':
+			scale = 1 / 2;
+			break;
+		case 's':
+			scale = 2;
+			break;
+		case 'r':
+			rotation = 1;
+			break;
+		case 'R':
+			rotation = -1;
+			break;
+		default:
+			return false;
+		}
+
+		// For each keypress,
+		translation = translation.times(30); // Move at most 30 units
+		rotation *= Math.PI / 8; // Rotate at most a sixteenth of a rotation
+
+		// Transform the canvas, not the viewport:
+		translation = translation.times(-1);
+		rotation = rotation * -1;
+		scale = 1 / scale;
+
+		const toCanvas = this.editor.viewport.screenToCanvasTransform;
+
+		// Transform without translating (treat toCanvas as a linear instead of
+		// an affine transformation).
+		translation = toCanvas.transformVec3(translation);
+
+		// Rotate/scale about the center of the canvas
+		const transformCenter = this.editor.viewport.visibleRect.center;
+		const transformUpdate = Mat33.scaling2D(
+			scale, transformCenter
+		).rightMul(Mat33.zRotation(
+			rotation, transformCenter
+		)).rightMul(Mat33.translation(
+			translation
+		));
+		this.updateTransform(transformUpdate);
+
+		return true;
+	}
+}

package/src/tools/Pen.ts

@@ -0,0 +1,121 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import { Vec2 } from '../geometry/Vec2';
+import Pointer, { PointerDevice } from '../Pointer';
+import StrokeBuilder from '../StrokeBuilder';
+import { EditorEventType, PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+
+export default class Pen extends BaseTool {
+	private builder: StrokeBuilder|null = null;
+	public readonly kind: ToolType = ToolType.Pen;
+
+	public constructor(
+		private editor: Editor,
+		description: string,
+		private color: Color4 = Color4.purple,
+		private thickness: number = 16.0,
+	) {
+		super(editor.notifier, description);
+	}
+
+	private getPressureMultiplier() {
+		return 1 / this.editor.viewport.getScaleFactor() * this.thickness;
+	}
+
+	private getStrokePoint(pointer: Pointer) {
+		const minPressure = 0.3;
+		const pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
+		return {
+			pos: pointer.canvasPos,
+			width: pressure * this.getPressureMultiplier(),
+			color: this.color,
+			time: pointer.timeStamp,
+		};
+	}
+
+	private addPointToStroke(pointer: Pointer) {
+		if (!this.builder) {
+			throw new Error('No stroke is currently being generated.');
+		}
+		this.builder.addPoint(this.getStrokePoint(pointer));
+
+		this.editor.clearWetInk();
+		this.editor.drawWetInk(...this.builder.preview());
+	}
+
+	public onPointerDown({ current, allPointers }: PointerEvt): boolean {
+		if (current.device === PointerDevice.Eraser) {
+			return false;
+		}
+
+		if (allPointers.length === 1 || current.device === PointerDevice.Pen) {
+			// Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
+			// less than ± 2 px from the curve.
+			const canvasTransform = this.editor.viewport.screenToCanvasTransform;
+			const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
+			const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
+
+			this.builder = new StrokeBuilder(
+				this.getStrokePoint(current), minSmoothingDist, maxSmoothingDist
+			);
+			return true;
+		}
+
+		return false;
+	}
+
+	public onPointerMove({ current }: PointerEvt): void {
+		this.addPointToStroke(current);
+	}
+
+	public onPointerUp({ current }: PointerEvt): void {
+		if (!this.builder) {
+			return;
+		}
+
+		this.addPointToStroke(current);
+		if (this.builder && current.isPrimary) {
+			const stroke = this.builder.build();
+
+			this.editor.clearWetInk();
+			this.editor.drawWetInk(...this.builder.preview());
+
+			const canFlatten = true;
+			const action = new EditorImage.AddElementCommand(stroke, canFlatten);
+			this.editor.dispatch(action);
+		}
+		this.builder = null;
+		this.editor.clearWetInk();
+	}
+
+	public onGestureCancel(): void {
+		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.color.toHexString()) {
+			this.color = color;
+			this.noteUpdated();
+		}
+	}
+
+	public setThickness(thickness: number) {
+		if (thickness !== this.thickness) {
+			this.thickness = thickness;
+			this.noteUpdated();
+		}
+	}
+
+	public getThickness() { return this.thickness; }
+	public getColor() { return this.color; }
+}

package/src/tools/SelectionTool.test.ts

@@ -0,0 +1,85 @@
+/* @jest-environment jsdom */
+
+import Color4 from '../Color4';
+import Stroke from '../components/Stroke';
+import { RenderingMode } from '../Display';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import Path from '../geometry/Path';
+import { Vec2 } from '../geometry/Vec2';
+import { InputEvtType } from '../types';
+import SelectionTool from './SelectionTool';
+import { ToolType } from './ToolController';
+
+const getSelectionTool = (editor: Editor): SelectionTool => {
+	return editor.toolController.getMatchingTools(ToolType.Selection)[0] as SelectionTool;
+};
+
+const createEditor = () => new Editor(document.body, RenderingMode.DummyRenderer);
+
+const createSquareStroke = () => {
+	const testStroke = new Stroke([
+		// A filled unit square
+		Path.fromString('M0,0 L1,0 L1,1 L0,1 Z').toRenderable({ fill: Color4.blue }),
+	]);
+	const addTestStrokeCommand = new EditorImage.AddElementCommand(testStroke);
+
+	return { testStroke, addTestStrokeCommand };
+};
+
+describe('SelectionTool', () => {
+	it('selection should shrink/grow to bounding box of selected objects', () => {
+		const { addTestStrokeCommand } = createSquareStroke();
+
+		const editor = createEditor();
+		editor.dispatch(addTestStrokeCommand);
+
+		const selectionTool = getSelectionTool(editor);
+		selectionTool.setEnabled(true);
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(0.1, 0.1));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(0.1, 0.1));
+
+		// Should surround the selected object (which has bbox = (0, 0, 1, 1))
+		// with extra space.
+		const paddingSize = selectionTool.getSelection()!.getMinCanvasSize();
+		expect(selectionTool.getSelection()!.region).toMatchObject({
+			x: -paddingSize / 2,
+			y: -paddingSize / 2,
+			w: paddingSize + 1,
+			h: paddingSize + 1,
+		});
+	});
+
+	it('dragging the selected region should move selected items', () => {
+		const { testStroke, addTestStrokeCommand } = createSquareStroke();
+		const editor = createEditor();
+		editor.dispatch(addTestStrokeCommand);
+
+		// Select the object
+		const selectionTool = getSelectionTool(editor);
+		selectionTool.setEnabled(true);
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(10, 10));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(5, 5));
+
+		const selection = selectionTool.getSelection();
+		expect(selection).not.toBeNull();
+
+		// Drag the object
+		selection!.handleBackgroundDrag(Vec2.of(5, 5));
+		selection!.finishDragging();
+
+		expect(testStroke.getBBox().topLeft).toMatchObject({
+			x: 5,
+			y: 5,
+		});
+
+		editor.history.undo();
+
+		expect(testStroke.getBBox().topLeft).toMatchObject({
+			x: 0,
+			y: 0,
+		});
+	});
+});