js-draw 0.11.3 → 0.12.0

package/src/toolbar/IconProvider.ts

@@ -82,20 +82,48 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makeEraserIcon(): IconType {
+	public makeEraserIcon(eraserSize?: number): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');
+		eraserSize ??= 10;
+
+		const scaledSize = eraserSize / 4;
+		const eraserColor = '#ff70af';
 	
-		// Draw an eraser-like shape
+		// Draw an eraser-like shape. Created with Inkscape
 		icon.innerHTML = `
 		<g>
-			<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
+			<path
+				style="fill:${eraserColor}"
+				stroke="black"
+				transform="rotate(41.35)"
+				d="M 52.5 27
+					C 50 28.9 48.9 31.7 48.9 34.8
+					L 48.9 39.8
+					C 48.9 45.3 53.4 49.8 58.9 49.8
+					L 103.9 49.8
+					C 105.8 49.8 107.6 49.2 109.1 48.3
+					L 110.2 ${scaledSize + 49.5} L 159.7 ${scaledSize + 5}
+					L 157.7 ${-scaledSize + 5.2} L 112.4 ${49.5 - scaledSize}
+					C 113.4 43.5 113.9 41.7 113.9 39.8
+					L 113.9 34.8
+					C 113.9 29.3 109.4 24.8 103.9 24.8
+					L 58.9 24.8
+					C 56.5 24.8 54.3 25.7 52.5 27
+					z "
+				id="path438" />
+
 			<rect
-				x=10 y=10 width=80 height=50
+				stroke="#cc8077"
 				${iconColorFill}
-			/>
+				id="rect218"
+				width="65"
+				height="75"
+				x="48.9"
+				y="-38.7"
+				transform="rotate(41.35)" />
 		</g>
 		`;
-		icon.setAttribute('viewBox', '0 0 100 100');
+		icon.setAttribute('viewBox', '0 0 120 120');
 		return icon;
 	}
 	

package/src/toolbar/widgets/EraserToolWidget.ts

@@ -1,26 +1,85 @@
 import Editor from '../../Editor';
 import Eraser from '../../tools/Eraser';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
 
 export default class EraserToolWidget extends BaseToolWidget {
+	private thicknessInput: HTMLInputElement|null = null;
 	public constructor(
 		editor: Editor,
-		tool: Eraser,
+		private tool: Eraser,
 		localizationTable?: ToolbarLocalization
 	) {
 		super(editor, tool, 'eraser-tool-widget', localizationTable);
+
+		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+			if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === this.tool) {
+				this.updateInputs();
+				this.updateIcon();
+			}
+		});
 	}
 
 	protected getTitle(): string {
 		return this.localizationTable.eraser;
 	}
+
 	protected createIcon(): Element {
-		return this.editor.icons.makeEraserIcon();
+		return this.editor.icons.makeEraserIcon(this.tool.getThickness());
+	}
+
+	private updateInputs() {
+		if (this.thicknessInput) {
+			this.thicknessInput.value = `${this.tool.getThickness()}`;
+		}
+	}
+
+	private static nextThicknessInputId = 0;
+
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const thicknessLabel = document.createElement('label');
+		this.thicknessInput = document.createElement('input');
+
+		this.thicknessInput.type = 'range';
+		this.thicknessInput.min = '4';
+		this.thicknessInput.max = '40';
+		this.thicknessInput.oninput = () => {
+			this.tool.setThickness(parseFloat(this.thicknessInput!.value));
+		};
+		this.thicknessInput.id = `${toolbarCSSPrefix}eraserThicknessInput${EraserToolWidget.nextThicknessInputId++}`;
+
+		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
+		thicknessLabel.htmlFor = this.thicknessInput.id;
+
+		this.updateInputs();
+		dropdown.replaceChildren(thicknessLabel, this.thicknessInput);
+		return true;
+	}
+
+	public serializeState(): SavedToolbuttonState {
+		return {
+			...super.serializeState(),
+
+			thickness: this.tool.getThickness(),
+		};
 	}
 
-	protected fillDropdown(_dropdown: HTMLElement): boolean {
-		// No dropdown associated with the eraser
-		return false;
+	public deserializeFrom(state: SavedToolbuttonState) {
+		super.deserializeFrom(state);
+
+		if (state.thickness) {
+			const parsedThickness = parseFloat(state.thickness);
+
+			if (typeof parsedThickness !== 'number' || !isFinite(parsedThickness)) {
+				throw new Error(
+					`Deserializing property ${parsedThickness} is not a number or is not finite.`
+				);
+			}
+
+			this.tool.setThickness(parsedThickness);
+		}
 	}
 }

package/src/toolbar/widgets/PenToolWidget.ts

@@ -145,8 +145,8 @@ export default class PenToolWidget extends BaseToolWidget {
 		const objectTypeSelect = document.createElement('select');
 
 		// Give inputs IDs so we can label them with a <label for=...>Label text</label>
-		thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenToolWidget.idCounter++}`;
-		objectTypeSelect.id = `${toolbarCSSPrefix}builderSelect${PenToolWidget.idCounter++}`;
+		thicknessInput.id = `${toolbarCSSPrefix}penThicknessInput${PenToolWidget.idCounter++}`;
+		objectTypeSelect.id = `${toolbarCSSPrefix}penBuilderSelect${PenToolWidget.idCounter++}`;
 
 		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
 		thicknessLabel.setAttribute('for', thicknessInput.id);

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -35,9 +35,9 @@ export default class SelectionToolWidget extends BaseToolWidget {
 			editor, 'duplicate-btn',
 			() => editor.icons.makeDuplicateSelectionIcon(),
 			this.localizationTable.duplicateSelection,
-			() => {
+			async () => {
 				const selection = this.tool.getSelection();
-				this.editor.dispatch(selection!.duplicateSelectedObjects());
+				this.editor.dispatch(await selection!.duplicateSelectedObjects());
 			},
 			localization,
 		);

package/src/tools/Eraser.test.ts

@@ -0,0 +1,79 @@
+import Editor from '../Editor';
+import { Rect2, StrokeComponent } from '../lib';
+import { Vec2 } from '../math/Vec2';
+import createEditor from '../testing/createEditor';
+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
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		jest.advanceTimersByTime(100);
+		editor.sendPenEvent(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.
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 0));
+		jest.advanceTimersByTime(400);
+		editor.sendPenEvent(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
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(3, 0));
+		jest.advanceTimersByTime(100);
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(3, 0));
+
+		expect(getAllStrokes(editor)).toHaveLength(1);
+
+		// Erase the remaining stroke
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(47, 47));
+		jest.advanceTimersByTime(100);
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(47, 47));
+
+		expect(getAllStrokes(editor)).toHaveLength(0);
+	});
+});

package/src/tools/Eraser.ts

@@ -1,15 +1,20 @@
-import { PointerEvt } from '../types';
+import { EditorEventType, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import Editor from '../Editor';
-import { Point2 } from '../math/Vec2';
+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;
+	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[] = [];
@@ -18,27 +23,48 @@ export default class Eraser extends BaseTool {
 		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;
-		}
+	private clearPreview() {
+		this.editor.clearWetInk();
+	}
 
-		return false;
+	private getSizeOnCanvas() {
+		return this.thickness / this.editor.viewport.getScaleFactor();
 	}
 
-	public onPointerMove(event: PointerEvt): void {
-		const currentPoint = event.current.canvasPos;
-		if (currentPoint.minus(this.lastPoint).magnitude() === 0) {
+	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;
 
-		const line = new LineSegment2(this.lastPoint, currentPoint);
-		const region = line.bbox;
+		// 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);
+			return component.intersects(line) || component.intersectsRect(eraserRect);
 		});
 
 		// Remove any intersecting elements.
@@ -50,10 +76,32 @@ export default class Eraser extends BaseTool {
 
 		this.partialCommands.push(...newPartialCommands);
 
+		this.drawPreviewAt(currentPoint);
 		this.lastPoint = currentPoint;
 	}
 
-	public onPointerUp(_event: PointerEvt): void {
+	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));
@@ -62,10 +110,26 @@ export default class Eraser extends BaseTool {
 			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/SelectionTool/Selection.ts

@@ -100,6 +100,11 @@ export default class Selection {
 		}
 	}
 
+	// @internal Intended for unit tests
+	public getBackgroundElem(): HTMLElement {
+		return this.backgroundElem;
+	}
+
 	public getTransform(): Mat33 {
 		return this.transform;
 	}
@@ -304,18 +309,7 @@ export default class Selection {
 		}
 
 		this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
-			if (this.region.containsRect(elem.getBBox())) {
-				return true;
-			}
-
-			// Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
-			// As such, test with more lines than just this' edges.
-			const testLines = [];
-			for (const subregion of this.region.divideIntoGrid(2, 2)) {
-				testLines.push(...subregion.getEdges());
-			}
-
-			return testLines.some(edge => elem.intersects(edge));
+			return elem.intersectsRect(this.region);
 		});
 
 		if (singleItemSelectionMode && this.selectedElems.length > 0) {
@@ -392,6 +386,9 @@ export default class Selection {
 		}
 	}
 
+	// Maps IDs to whether we removed the component from the image
+	private removedFromImage: Record<string, boolean> = {};
+
 	// Add/remove the contents of this' seleciton from the editor.
 	// Used to prevent previewed content from looking like duplicate content
 	// while dragging.
@@ -400,7 +397,7 @@ export default class Selection {
 	// the editor image is likely to be slow.)
 	//
 	// If removed from the image, selected elements are drawn as wet ink.
-	private async addRemoveSelectionFromImage(inImage: boolean) {
+	private addRemoveSelectionFromImage(inImage: boolean) {
 		// Don't hide elements if doing so will be slow.
 		if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
 			return;
@@ -409,26 +406,46 @@ export default class Selection {
 		for (const elem of this.selectedElems) {
 			const parent = this.editor.image.findParent(elem);
 
-			if (!inImage) {
-				parent?.remove();
+			if (!inImage && parent) {
+				this.removedFromImage[elem.getId()] = true;
+				parent.remove();
 			}
 			// If we're making things visible and the selected object wasn't previously
 			// visible,
-			else if (!parent) {
+			else if (!parent && this.removedFromImage[elem.getId()]) {
 				EditorImage.addElement(elem).apply(this.editor);
+
+				this.removedFromImage[elem.getId()] = false;
+				delete this.removedFromImage[elem.getId()];
 			}
 		}
 
-		await this.editor.queueRerender();
-		if (!inImage) {
-			this.previewTransformCmds();
-		}
+		// Don't await queueRerender. If we're running in a test, the re-render might never
+		// happen.
+		this.editor.queueRerender().then(() => {
+			if (!inImage) {
+				this.previewTransformCmds();
+			}
+		});
+	}
+
+	private removeDeletedElemsFromSelection() {
+		// Remove any deleted elements from the selection.
+		this.selectedElems = this.selectedElems.filter(elem => {
+			const hasParent = !!this.editor.image.findParent(elem);
+
+			// If we removed the element and haven't added it back yet, don't remove it
+			// from the selection.
+			const weRemoved = this.removedFromImage[elem.getId()];
+			return hasParent || weRemoved;
+		});
 	}
 
 	private targetHandle: SelectionHandle|null = null;
 	private backgroundDragging: boolean = false;
 	public onDragStart(pointer: Pointer, target: EventTarget): boolean {
-		void this.addRemoveSelectionFromImage(false);
+		this.removeDeletedElemsFromSelection();
+		this.addRemoveSelectionFromImage(false);
 
 		for (const handle of this.handles) {
 			if (handle.isTarget(target)) {
@@ -503,11 +520,43 @@ export default class Selection {
 	}
 
 	public deleteSelectedObjects(): Command {
+		if (this.backgroundDragging || this.targetHandle) {
+			this.onDragEnd();
+		}
+
 		return new Erase(this.selectedElems);
 	}
 
-	public duplicateSelectedObjects(): Command {
-		return new Duplicate(this.selectedElems);
+	public async duplicateSelectedObjects(): Promise<Command> {
+		const wasTransforming = this.backgroundDragging || this.targetHandle;
+		let tmpApplyCommand: Command|null = null;
+
+		if (wasTransforming) {
+			// Don't update the selection's focus when redoing/undoing
+			const selectionToUpdate: Selection|null = null;
+			tmpApplyCommand = new Selection.ApplyTransformationCommand(
+				selectionToUpdate, this.selectedElems, this.transform
+			);
+
+			// Transform to ensure that the duplicates are in the correct location
+			await tmpApplyCommand.apply(this.editor);
+
+			// Show items again
+			this.addRemoveSelectionFromImage(true);
+		}
+
+		const duplicateCommand = new Duplicate(this.selectedElems);
+
+		if (wasTransforming) {
+			// Move the selected objects back to the correct location.
+			await tmpApplyCommand?.unapply(this.editor);
+			this.addRemoveSelectionFromImage(false);
+
+			this.previewTransformCmds();
+			this.updateUI();
+		}
+
+		return duplicateCommand;
 	}
 
 	public addTo(elem: HTMLElement) {
@@ -533,6 +582,7 @@ export default class Selection {
 	}
 
 	public setSelectedObjects(objects: AbstractComponent[], bbox: Rect2) {
+		this.addRemoveSelectionFromImage(true);
 		this.originalRegion = bbox;
 		this.selectedElems = objects.filter(object => object.isSelectable());
 		this.updateUI();