js-draw 0.18.1 → 0.18.2

package/src/tools/BaseTool.ts

@@ -0,0 +1,76 @@
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, EditorEventType, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent } from '../types';
+import ToolEnabledGroup from './ToolEnabledGroup';
+
+export default abstract class BaseTool implements PointerEvtListener {
+	private enabled: boolean = true;
+	private group: ToolEnabledGroup|null = null;
+
+	public onPointerDown(_event: PointerEvt): boolean { return false; }
+	public onPointerMove(_event: PointerEvt) { }
+	public onPointerUp(_event: PointerEvt) { }
+	public onGestureCancel() { }
+
+	protected constructor(private notifier: EditorNotifier, public readonly description: string) {
+	}
+
+	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;
+	}
+
+	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;
+	}
+
+	public getToolGroup(): ToolEnabledGroup|null {
+		if (this.group) {
+			return this.group;
+		}
+
+		return null;
+	}
+}
+

package/src/tools/Eraser.test.ts

@@ -0,0 +1,103 @@
+import UnknownSVGObject from '../components/UnknownSVGObject';
+import Editor from '../Editor';
+import { EditorImage, Rect2, StrokeComponent } from '../lib';
+import { Vec2 } from '../math/Vec2';
+import createEditor from '../testing/createEditor';
+import sendPenEvent from '../testing/sendPenEvent';
+import { InputEvtType } from '../types';
+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

@@ -0,0 +1,139 @@
+import { EditorEventType, PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import Editor from '../Editor';
+import { Point2, Vec2 } from '../math/Vec2';
+import LineSegment2 from '../math/LineSegment2';
+import Erase from '../commands/Erase';
+import AbstractComponent from '../components/AbstractComponent';
+import { PointerDevice } from '../Pointer';
+import Color4 from '../Color4';
+import Rect2 from '../math/Rect2';
+import RenderingStyle from '../rendering/RenderingStyle';
+
+export default class Eraser extends BaseTool {
+	private lastPoint: Point2|null = null;
+	private isFirstEraseEvt: boolean = true;
+	private toRemove: AbstractComponent[];
+	private thickness: number = 10;
+
+	// Commands that each remove one element
+	private partialCommands: Erase[] = [];
+
+	public constructor(private editor: Editor, description: string) {
+		super(editor.notifier, description);
+	}
+
+	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 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 onPointerMove(event: PointerEvt): void {
+		const currentPoint = event.current.canvasPos;
+
+		this.eraseTo(currentPoint);
+	}
+
+	public 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 onGestureCancel(): void {
+		this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
+		this.partialCommands = [];
+		this.clearPreview();
+	}
+
+	public getThickness() {
+		return this.thickness;
+	}
+
+	public setThickness(thickness: number) {
+		this.thickness = thickness;
+
+		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+			kind: EditorEventType.ToolUpdated,
+			tool: this,
+		});
+	}
+}

package/src/tools/FindTool.css

@@ -0,0 +1,7 @@
+
+.find-tool-overlay {
+    /* Show at the bottom of the screen. */
+    order: -1;
+
+    position: absolute;
+}

package/src/tools/FindTool.ts

@@ -0,0 +1,152 @@
+// 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 '../math/Rect2';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+
+export 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.closeFindDialog;
+
+		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 (ev.key === 'f' && ev.ctrlKey) {
+				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 onKeyPress(event: KeyPressEvent): boolean {
+		if (event.ctrlKey && event.key === 'f') {
+			this.toggleVisible();
+
+			return true;
+		}
+
+		return false;
+	}
+
+	public setEnabled(enabled: boolean) {
+		super.setEnabled(enabled);
+
+		if (enabled) {
+			this.setVisible(false);
+		}
+	}
+}