js-draw 1.0.1 → 1.1.0

package/src/tools/BaseTool.ts

@@ -1,169 +0,0 @@
-import { EditorNotifier, EditorEventType } from '../types';
-import { WheelEvt, PointerEvt, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent, InputEvt, InputEvtType, GestureCancelEvt, PointerDownEvt, PointerMoveEvt, PointerUpEvt } from '../inputEvents';
-import ToolEnabledGroup from './ToolEnabledGroup';
-import InputMapper, { InputEventListener } from './InputFilter/InputMapper';
-import { MutableReactiveValue, ReactiveValue } from '../util/ReactiveValue';
-
-export default abstract class BaseTool implements InputEventListener {
-	#enabled: MutableReactiveValue<boolean>;
-	#group: ToolEnabledGroup|null = null;
-
-	#inputMapper: InputMapper|null = null;
-
-	protected constructor(private notifier: EditorNotifier, public readonly description: string) {
-		this.#enabled = ReactiveValue.fromInitialValue(true);
-		this.#enabled.onUpdate(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 setInputMapper(mapper: InputMapper|null) {
-		this.#inputMapper = mapper;
-		if (mapper) {
-			mapper.setEmitListener(event => this.dispatchEventToCallback(event));
-		}
-	}
-
-	public getInputMapper() {
-		return this.#inputMapper;
-	}
-
-	private dispatchEventToCallback(event: InputEvt) {
-		let exhaustivenessCheck: never;
-		switch (event.kind) {
-		case InputEvtType.PointerDownEvt:
-			return this.onPointerDown(event);
-		case InputEvtType.PointerMoveEvt:
-			this.onPointerMove(event);
-			break;
-		case InputEvtType.PointerUpEvt:
-			return this.onPointerUp(event) ?? false;
-		case InputEvtType.GestureCancelEvt:
-			this.onGestureCancel(event);
-			break;
-		case InputEvtType.WheelEvt:
-			return this.onWheel(event);
-		case InputEvtType.KeyPressEvent:
-			return this.onKeyPress(event);
-		case InputEvtType.KeyUpEvent:
-			return this.onKeyUp(event);
-		case InputEvtType.CopyEvent:
-			return this.onCopy(event);
-		case InputEvtType.PasteEvent:
-			return this.onPaste(event);
-		default:
-			exhaustivenessCheck = event;
-			return exhaustivenessCheck;
-		}
-		return true;
-	}
-
-	// @internal
-	public onEvent(event: InputEvt): boolean {
-		if (this.#inputMapper) {
-			return this.#inputMapper.onEvent(event);
-		}
-		return this.dispatchEventToCallback(event);
-	}
-
-	/**
-	 * Returns true iff the tool handled the event and thus should receive additional
-	 * events.
-	 */
-	public onPointerDown(_event: PointerDownEvt): boolean { return false; }
-	public onPointerMove(_event: PointerMoveEvt) { }
-
-	/**
-	 * Returns true iff there are additional pointers down and the tool should
-	 * remain active to handle the additional events.
-	 *
-	 * For most purposes, this should return `false` or nothing.
-	 */
-	public onPointerUp(_event: PointerUpEvt): boolean|void { }
-
-	public onGestureCancel(_event: GestureCancelEvt) { }
-
-	public onWheel(_event: WheelEvt): boolean {
-		return false;
-	}
-
-	public onCopy(_event: CopyEvent): boolean {
-		return false;
-	}
-
-	public onPaste(_event: PasteEvent): boolean {
-		return false;
-	}
-
-	public onKeyPress(_event: KeyPressEvent): boolean {
-		return false;
-	}
-
-	public onKeyUp(_event: KeyUpEvent): boolean {
-		return false;
-	}
-
-	/**
-	 * Return true if, while this tool is active, `_event` can be delivered to
-	 * another tool that is higher priority than this.
-	 * @internal May be renamed
-	 */
-	public eventCanBeDeliveredToNonActiveTool(_event: PointerEvt) {
-		return true;
-	}
-
-	public setEnabled(enabled: boolean) {
-		this.#enabled.set(enabled);
-	}
-
-	public isEnabled(): boolean {
-		return this.#enabled.get();
-	}
-
-	/**
-	 * Returns a {@link ReactiveValue} that updates based on whether this tool is
-	 * enabled.
-	 *
-	 * @example
-	 * ```ts
-	 * const tool = new SomeTool();
-	 *
-	 * // Watch for changes in enabled status
-	 * tool.enabledValue().onUpdate(enabled => doSomething(enabled));
-	 * ```
-	 */
-	public enabledValue(): ReactiveValue<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;
-	}
-
-	public getToolGroup(): ToolEnabledGroup|null {
-		if (this.#group) {
-			return this.#group;
-		}
-
-		return null;
-	}
-}
-

package/src/tools/Eraser.test.ts

@@ -1,103 +0,0 @@
-import UnknownSVGObject from '../components/UnknownSVGObject';
-import Editor from '../Editor';
-import { EditorImage, Rect2, StrokeComponent } from '../lib';
-import { Vec2 } from '@js-draw/math';
-import createEditor from '../testing/createEditor';
-import sendPenEvent from '../testing/sendPenEvent';
-import { InputEvtType } from '../inputEvents';
-import Eraser from './Eraser';
-
-const selectEraser = (editor: Editor) => {
-	const tools = editor.toolController;
-	const eraser = tools.getMatchingTools(Eraser)[0];
-	eraser.setEnabled(true);
-
-	return eraser;
-};
-
-const getAllStrokes = (editor: Editor) => {
-	return editor.image.getAllElements().filter(elem => elem instanceof StrokeComponent);
-};
-
-describe('Eraser', () => {
-	it('should erase object between locations of events', () => {
-		const editor = createEditor();
-
-		// Draw a line
-		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
-		jest.advanceTimersByTime(100);
-		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(200, 200));
-
-		// Should have drawn a line
-		const strokes = getAllStrokes(editor);
-		expect(strokes).toHaveLength(1);
-		expect(strokes[0].getBBox().area).toBeGreaterThanOrEqual(200 * 200);
-
-		selectEraser(editor);
-
-		// Erase the line.
-		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(200, 0));
-		jest.advanceTimersByTime(400);
-		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(0, 200));
-
-		// Should have erased the line
-		expect(getAllStrokes(editor)).toHaveLength(0);
-	});
-
-	it('should erase objects within eraser.thickness of an event when not zoomed', async () => {
-		const editor = createEditor();
-
-		await editor.loadFromSVG(`
-			<svg>
-				<path d='m0,0 l2,0 l0,2 l-2,0 z' fill="#ff0000"/>
-				<path d='m50,50 l2,0 l0,2 l-2,0 z' fill="#ff0000"/>
-			</svg>
-		`, true);
-
-		editor.viewport.resetTransform();
-
-		const allStrokes = getAllStrokes(editor);
-		expect(allStrokes).toHaveLength(2);
-		expect(allStrokes[0].getBBox()).objEq(new Rect2(0, 0, 2, 2));
-		expect(allStrokes[1].getBBox()).objEq(new Rect2(50, 50, 2, 2));
-
-		const eraser = selectEraser(editor);
-		eraser.setThickness(10);
-
-		// Erase the first stroke
-		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(3, 0));
-		jest.advanceTimersByTime(100);
-		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(3, 0));
-
-		expect(getAllStrokes(editor)).toHaveLength(1);
-
-		// Erase the remaining stroke
-		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(47, 47));
-		jest.advanceTimersByTime(100);
-		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(47, 47));
-
-		expect(getAllStrokes(editor)).toHaveLength(0);
-	});
-
-	it('should not erase unselectable objects', () => {
-		const editor = createEditor();
-		const unerasableObj = new UnknownSVGObject(document.createElementNS('http://www.w3.org/2000/svg', 'arc'));
-
-		// Add to the image
-		expect(editor.image.getAllElements()).toHaveLength(0);
-		editor.dispatch(EditorImage.addElement(unerasableObj));
-		expect(editor.image.getAllElements()).toHaveLength(1);
-
-
-		const eraser = selectEraser(editor);
-		eraser.setThickness(100);
-
-		// Try to erase it.
-		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
-		jest.advanceTimersByTime(100);
-		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(3, 0));
-
-		// Should not have been erased
-		expect(editor.image.getAllElements()).toHaveLength(1);
-	});
-});

package/src/tools/Eraser.ts

@@ -1,173 +0,0 @@
-import { EditorEventType } from '../types';
-import { KeyPressEvent, PointerEvt } from '../inputEvents';
-import BaseTool from './BaseTool';
-import Editor from '../Editor';
-import { Point2, Vec2, LineSegment2, Color4, Rect2 } from '@js-draw/math';
-import Erase from '../commands/Erase';
-import AbstractComponent from '../components/AbstractComponent';
-import { PointerDevice } from '../Pointer';
-import RenderingStyle from '../rendering/RenderingStyle';
-import { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId } from './keybindings';
-import { MutableReactiveValue, ReactiveValue } from '../util/ReactiveValue';
-
-export default class Eraser extends BaseTool {
-	private lastPoint: Point2|null = null;
-	private isFirstEraseEvt: boolean = true;
-	private toRemove: AbstractComponent[];
-	private thickness: number = 10;
-	private thicknessValue: MutableReactiveValue<number>;
-
-	// Commands that each remove one element
-	private partialCommands: Erase[] = [];
-
-	public constructor(private editor: Editor, description: string) {
-		super(editor.notifier, description);
-
-		this.thicknessValue = ReactiveValue.fromInitialValue(this.thickness);
-		this.thicknessValue.onUpdate(value => {
-			this.thickness = value;
-
-			this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-				kind: EditorEventType.ToolUpdated,
-				tool: this,
-			});
-		});
-	}
-
-	private clearPreview() {
-		this.editor.clearWetInk();
-	}
-
-	private getSizeOnCanvas() {
-		return this.thickness / this.editor.viewport.getScaleFactor();
-	}
-
-	private drawPreviewAt(point: Point2) {
-		this.clearPreview();
-
-		const size = this.getSizeOnCanvas();
-
-		const renderer = this.editor.display.getWetInkRenderer();
-		const rect = this.getEraserRect(point);
-		const fill: RenderingStyle = {
-			fill: Color4.gray,
-		};
-		renderer.drawRect(rect, size / 4, fill);
-	}
-
-	private getEraserRect(centerPoint: Point2) {
-		const size = this.getSizeOnCanvas();
-		const halfSize = Vec2.of(size / 2, size / 2);
-		return Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
-	}
-
-	private eraseTo(currentPoint: Point2) {
-		if (!this.isFirstEraseEvt && currentPoint.minus(this.lastPoint!).magnitude() === 0) {
-			return;
-		}
-		this.isFirstEraseEvt = false;
-
-		// Currently only objects within eraserRect or that intersect a straight line
-		// from the center of the current rect to the previous are erased. TODO: Erase
-		// all objects as if there were pointerMove events between the two points.
-		const eraserRect = this.getEraserRect(currentPoint);
-		const line = new LineSegment2(this.lastPoint!, currentPoint);
-		const region = Rect2.union(line.bbox, eraserRect);
-
-		const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
-			return component.intersects(line) || component.intersectsRect(eraserRect);
-		});
-
-		// Only erase components that could be selected (and thus interacted with)
-		// by the user.
-		const toErase = intersectingElems.filter(elem => elem.isSelectable());
-
-		// Remove any intersecting elements.
-		this.toRemove.push(...toErase);
-
-		// Create new Erase commands for the now-to-be-erased elements and apply them.
-		const newPartialCommands = toErase.map(elem => new Erase([ elem ]));
-		newPartialCommands.forEach(cmd => cmd.apply(this.editor));
-
-		this.partialCommands.push(...newPartialCommands);
-
-		this.drawPreviewAt(currentPoint);
-		this.lastPoint = currentPoint;
-	}
-
-	public override onPointerDown(event: PointerEvt): boolean {
-		if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
-			this.lastPoint = event.current.canvasPos;
-			this.toRemove = [];
-			this.isFirstEraseEvt = true;
-
-			this.drawPreviewAt(event.current.canvasPos);
-			return true;
-		}
-
-		return false;
-	}
-
-	public override onPointerMove(event: PointerEvt): void {
-		const currentPoint = event.current.canvasPos;
-
-		this.eraseTo(currentPoint);
-	}
-
-	public override onPointerUp(event: PointerEvt): void {
-		this.eraseTo(event.current.canvasPos);
-
-		if (this.toRemove.length > 0) {
-			// Undo commands for each individual component and unite into a single command.
-			this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
-			this.partialCommands = [];
-
-			const command = new Erase(this.toRemove);
-			this.editor.dispatch(command); // dispatch: Makes undo-able.
-		}
-
-		this.clearPreview();
-	}
-
-	public override onGestureCancel(): void {
-		this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
-		this.partialCommands = [];
-		this.clearPreview();
-	}
-
-
-	public override onKeyPress(event: KeyPressEvent): boolean {
-		const shortcuts = this.editor.shortcuts;
-
-		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), 200);
-			this.setThickness(newThickness);
-			return true;
-		}
-
-		return false;
-	}
-
-	public getThickness() {
-		return this.thickness;
-	}
-
-	/**
-	 * Returns a {@link MutableReactiveValue} that can be used to watch
-	 * this tool's thickness.
-	 */
-	public getThicknessValue() {
-		return this.thicknessValue;
-	}
-
-	public setThickness(thickness: number) {
-		this.thicknessValue.set(thickness);
-	}
-}

package/src/tools/FindTool.test.ts

@@ -1,67 +0,0 @@
-import { InputEvtType } from '../inputEvents';
-import TextComponent from '../components/TextComponent';
-import { Mat33, Color4 } from '@js-draw/math';
-import createEditor from '../testing/createEditor';
-import FindTool from './FindTool';
-
-describe('FindTool', () => {
-	it('should open/close on ctrl+f', () => {
-		const editor = createEditor();
-		const findTool = editor.toolController.getMatchingTools(FindTool)[0];
-		expect(findTool).not.toBeFalsy();
-
-		const overlay = editor.getRootElement().querySelector('.find-tool-overlay')!;
-
-		expect(getComputedStyle(overlay).display).toBe('none');
-		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'f', true);
-
-		expect(getComputedStyle(overlay).display).not.toBe('none');
-
-		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'f', true);
-		expect(getComputedStyle(overlay).display).toBe('none');
-	});
-
-	it('should navigate to the next match on pressing enter', () => {
-		const editor = createEditor();
-		const findTool = editor.toolController.getMatchingTools(FindTool)[0];
-		expect(findTool).not.toBeFalsy();
-
-		// Reset the viewport
-		editor.viewport.resetTransform();
-		expect(editor.viewport.getScaleFactor()).toBeCloseTo(1);
-
-		// Show the find tool
-		const overlay = editor.getRootElement().querySelector('.find-tool-overlay')!;
-		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'f', true);
-		expect(getComputedStyle(overlay).display).not.toBe('none');
-
-		// Add some text to the image
-		const style = { size: 12, fontFamily: 'serif', renderingStyle: { fill: Color4.red }};
-		const text = TextComponent.fromLines([ 'test' ], Mat33.scaling2D(0.01), style);
-		editor.image.addElement(text).apply(editor);
-
-		// Should focus the search input
-		const searchInput = document.querySelector(':focus')!;
-		expect(searchInput).not.toBeFalsy();
-		expect(searchInput.tagName).toBe('INPUT');
-
-		// Should not change the view when searching for something that doesn't exist.
-		searchInput.setAttribute('value', 'testing');
-		searchInput.dispatchEvent(new KeyboardEvent('keydown', {
-			key: 'Enter',
-			code: 'Enter',
-		}));
-		expect(editor.viewport.getScaleFactor()).toBeCloseTo(1);
-
-		// Search input should still have focus
-		expect(document.querySelector(':focus')).toBe(searchInput);
-
-		// When searching for a substring that does exist, should zoom.
-		searchInput.setAttribute('value', 'test');
-		searchInput.dispatchEvent(new KeyboardEvent('keydown', {
-			key: 'Enter',
-			code: 'Enter',
-		}));
-		expect(editor.viewport.getScaleFactor()).not.toBeCloseTo(1);
-	});
-});

package/src/tools/FindTool.ts

@@ -1,153 +0,0 @@
-// Displays a find dialog that allows the user to search for and focus text.
-//
-// @packageDocumentation
-
-import Editor from '../Editor';
-import TextComponent from '../components/TextComponent';
-import { Rect2 } from '@js-draw/math';
-import { KeyPressEvent } from '../inputEvents';
-import BaseTool from './BaseTool';
-import { toggleFindVisibleShortcutId } from './keybindings';
-
-const cssPrefix = 'find-tool';
-
-export default class FindTool extends BaseTool {
-	private overlay: HTMLElement;
-	private searchInput: HTMLInputElement;
-	private currentMatchIdx: number = 0;
-
-	public constructor(private editor: Editor) {
-		super(editor.notifier, editor.localization.findLabel);
-
-		this.overlay = document.createElement('div');
-		this.fillOverlay();
-		editor.createHTMLOverlay(this.overlay);
-
-		this.overlay.style.display = 'none';
-		this.overlay.classList.add(`${cssPrefix}-overlay`);
-	}
-
-	private getMatches(searchFor: string): Rect2[] {
-		searchFor = searchFor.toLocaleLowerCase();
-		const allTextComponents = this.editor.image.getAllElements()
-			.filter(
-				elem => elem instanceof TextComponent
-			) as TextComponent[];
-
-		const matches = allTextComponents.filter(
-			text => text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1
-		);
-
-		return matches.map(match => match.getBBox());
-	}
-
-	private focusCurrentMatch() {
-		const matches = this.getMatches(this.searchInput.value);
-		let matchIdx = this.currentMatchIdx % matches.length;
-
-		if (matchIdx < 0) {
-			matchIdx = matches.length + matchIdx;
-		}
-
-		if (matchIdx < matches.length) {
-			const undoable = false;
-			this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
-			this.editor.announceForAccessibility(
-				this.editor.localization.focusedFoundText(matchIdx + 1, matches.length)
-			);
-		}
-	}
-
-	private toNextMatch() {
-		this.currentMatchIdx ++;
-		this.focusCurrentMatch();
-	}
-
-	private toPrevMatch() {
-		this.currentMatchIdx --;
-		this.focusCurrentMatch();
-	}
-
-	private fillOverlay() {
-		const label = document.createElement('label');
-		this.searchInput = document.createElement('input');
-		const nextBtn = document.createElement('button');
-		const closeBtn = document.createElement('button');
-
-		// Math.random() ensures that the ID is unique (to allow us to refer to it
-		// with an htmlFor).
-		this.searchInput.setAttribute('id', `${cssPrefix}-searchInput-${Math.random()}`);
-		label.htmlFor = this.searchInput.getAttribute('id')!;
-
-		label.innerText = this.editor.localization.findLabel;
-		nextBtn.innerText = this.editor.localization.toNextMatch;
-		closeBtn.innerText = this.editor.localization.closeDialog;
-
-		this.searchInput.onkeydown = (ev: KeyboardEvent) => {
-			if (ev.key === 'Enter') {
-				if (ev.shiftKey) {
-					this.toPrevMatch();
-				} else {
-					this.toNextMatch();
-				}
-			}
-			else if (ev.key === 'Escape') {
-				this.setVisible(false);
-			}
-			else if (this.editor.shortcuts.matchesShortcut(toggleFindVisibleShortcutId, ev)) {
-				ev.preventDefault();
-				this.toggleVisible();
-			}
-		};
-
-		nextBtn.onclick = () => {
-			this.toNextMatch();
-		};
-
-		closeBtn.onclick = () => {
-			this.setVisible(false);
-		};
-
-		this.overlay.replaceChildren(label, this.searchInput, nextBtn, closeBtn);
-	}
-
-	private isVisible() {
-		return this.overlay.style.display !== 'none';
-	}
-
-	private setVisible(visible: boolean) {
-		if (visible !== this.isVisible()) {
-			this.overlay.style.display = visible ? 'block' : 'none';
-
-			if (visible) {
-				this.searchInput.focus();
-				this.editor.announceForAccessibility(this.editor.localization.findDialogShown);
-			} else {
-				this.editor.focus();
-				this.editor.announceForAccessibility(this.editor.localization.findDialogHidden);
-			}
-		}
-	}
-
-	private toggleVisible() {
-		this.setVisible(!this.isVisible());
-	}
-
-	public override onKeyPress(event: KeyPressEvent): boolean {
-		if (this.editor.shortcuts.matchesShortcut(toggleFindVisibleShortcutId, event)) {
-			this.toggleVisible();
-
-			return true;
-		}
-
-		return false;
-	}
-
-	public override setEnabled(enabled: boolean) {
-		super.setEnabled(enabled);
-
-		if (enabled) {
-			this.setVisible(false);
-		}
-	}
-}

package/src/tools/InputFilter/FunctionMapper.ts

@@ -1,17 +0,0 @@
-import { InputEvt } from '../../inputEvents';
-import InputMapper from './InputMapper';
-
-/**
- * An `InputMapper` that applies a function to all events it receives.
- *
- * Useful for automated testing.
- */
-export default class FunctionMapper extends InputMapper {
-	public constructor(private fn: (event: InputEvt)=>InputEvt) {
-		super();
-	}
-
-	public override onEvent(event: InputEvt): boolean {
-		return this.emit(this.fn(event));
-	}
-}