js-draw 0.18.2 → 0.19.0

package/src/tools/BaseTool.ts

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

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

@@ -1,139 +0,0 @@
-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.ts

@@ -1,152 +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 '../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);
-		}
-	}
-}