js-draw 0.24.1 → 0.25.0

package/src/toolbar/widgets/PenToolWidget.ts

@@ -31,6 +31,9 @@ export default class PenToolWidget extends BaseToolWidget {
 	private updateInputs: ()=> void = () => {};
 	protected penTypes: PenTypeRecord[];
 
+	// A counter variable that ensures different HTML elements are given unique names/ids.
+	private static idCounter: number = 0;
+
 	public constructor(
 		editor: Editor, private tool: Pen, localization?: ToolbarLocalization
 	) {
@@ -39,13 +42,13 @@ export default class PenToolWidget extends BaseToolWidget {
 		// Default pen types
 		this.penTypes = [
 			{
-				name: this.localizationTable.pressureSensitiveFreehandPen,
+				name: this.localizationTable.flatTipPen,
 				id: 'pressure-sensitive-pen',
 
 				factory: makePressureSensitiveFreehandLineBuilder,
 			},
 			{
-				name: this.localizationTable.freehandPen,
+				name: this.localizationTable.roundedTipPen,
 				id: 'freehand-pen',
 
 				factory: makeFreehandLineBuilder,
@@ -123,43 +126,173 @@ export default class PenToolWidget extends BaseToolWidget {
 		return null;
 	}
 
-	protected createIcon(): Element {
-		const strokeFactory = this.tool.getStrokeFactory();
-		if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
+	private createIconForRecord(record: PenTypeRecord|null) {
+		const color = this.tool.getColor();
+
+		const strokeFactory = record?.factory;
+		if (!strokeFactory || strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
 			// Use a square-root scale to prevent the pen's tip from overflowing.
 			const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
-			const color = this.tool.getColor();
 			const roundedTip = strokeFactory === makeFreehandLineBuilder;
 
 			return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
 		} else {
-			const strokeFactory = this.tool.getStrokeFactory();
-			return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory);
+			const hasTransparency = color.a < 1;
+			return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory, hasTransparency);
 		}
 	}
 
-	private static idCounter: number = 0;
+	protected createIcon(): Element {
+		return this.createIconForRecord(this.getCurrentPenType());
+	}
+
+
+	// Creates a widget that allows selecting different pen types
+	private createPenTypeSelector() {
+		const outerContainer = document.createElement('div');
+		outerContainer.classList.add(`${toolbarCSSPrefix}pen-type-selector`);
+
+		const scrollingContainer = document.createElement('div');
+		scrollingContainer.setAttribute('role', 'menu');
+		scrollingContainer.id = `${toolbarCSSPrefix}-pen-type-selector-id-${PenToolWidget.idCounter++}`;
+
+		scrollingContainer.onwheel = (event) => {
+			const hasScroll = scrollingContainer.clientWidth !== scrollingContainer.scrollWidth
+							&& event.deltaX !== 0;
+			const eventScrollsPastLeft =
+				scrollingContainer.scrollLeft + event.deltaX <= 0;
+			const scrollRight = scrollingContainer.scrollLeft + scrollingContainer.clientWidth;
+			const eventScrollsPastRight =
+				scrollRight + event.deltaX > scrollingContainer.scrollWidth;
+
+			// Stop the editor from receiving the event if it will scroll the pen type selector
+			// instead.
+			if (hasScroll && !eventScrollsPastLeft && !eventScrollsPastRight) {
+				event.stopPropagation();
+			}
+		};
+
+		const label = document.createElement('label');
+		label.innerText = this.localizationTable.selectPenType;
+		label.htmlFor = scrollingContainer.id;
+		outerContainer.appendChild(label);
+
+		// All buttons in a radiogroup need the same name attribute.
+		const radiogroupName = `${toolbarCSSPrefix}-pen-type-selector-${PenToolWidget.idCounter++}`;
+
+		const createTypeSelectorButton = (record: PenTypeRecord) => {
+			const buttonContainer = document.createElement('div');
+			buttonContainer.classList.add('pen-type-button');
+
+			const button = document.createElement('input');
+			button.type = 'radio';
+			button.name = radiogroupName;
+			button.id = `${toolbarCSSPrefix}-pen-type-button-${PenToolWidget.idCounter++}`;
+
+			const labelContainer = document.createElement('label');
+
+			const rebuildLabel = () => {
+				const labelText = document.createElement('span');
+
+				const icon = this.createIconForRecord(record);
+				icon.classList.add('icon');
+
+				// The title of the record
+				labelText.innerText = record.name;
+				labelContainer.htmlFor = button.id;
+
+				labelContainer.replaceChildren(icon, labelText);
+			};
+			rebuildLabel();
+
+			const updateButtonCSS = () => {
+				if (button.checked) {
+					buttonContainer.classList.add('checked');
+				} else {
+					buttonContainer.classList.remove('checked');
+				}
+			};
+
+			button.oninput = () => {
+				// Setting the stroke factory fires an event that causes the value
+				// of this button to be set.
+				if (button.checked) {
+					this.tool.setStrokeFactory(record.factory);
+				}
+
+				updateButtonCSS();
+			};
+
+			buttonContainer.replaceChildren(button, labelContainer);
+			scrollingContainer.appendChild(buttonContainer);
+
+			// Set whether the button is checked, assuming the stroke factory associated
+			// with the button was set elsewhere.
+			const setChecked = (checked: boolean) => {
+				button.checked = checked;
+				updateButtonCSS();
+
+				if (checked) {
+					button.scrollIntoView();
+				}
+			};
+			setChecked(false);
+
+			// Updates the factory's icon based on the current style of the tool.
+			const updateIcon = () => {
+				rebuildLabel();
+			};
+
+			return { setChecked, updateIcon };
+		};
+
+		const buttons: Array<ReturnType<typeof createTypeSelectorButton>> = [];
+		for (const penType of this.penTypes) {
+			buttons.push(createTypeSelectorButton(penType));
+		}
+		// invariant: buttons.length = this.penTypes.length
+
+		outerContainer.appendChild(scrollingContainer);
+
+		return {
+			setValue: (penTypeIndex: number) => {
+				// Select the value specified
+				if (penTypeIndex < 0 || penTypeIndex >= this.penTypes.length) {
+					console.error('Invalid pen type index', penTypeIndex);
+					return;
+				}
+
+				for (let i = 0; i < buttons.length; i++) {
+					buttons[i].setChecked(i === penTypeIndex);
+				}
+			},
+
+			updateIcons: () => {
+				buttons.forEach(button => button.updateIcon());
+			},
+
+			addTo: (parent: HTMLElement) => {
+				parent.appendChild(outerContainer);
+			},
+		};
+	}
+
 	protected override fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
 		container.classList.add(`${toolbarCSSPrefix}spacedList`);
 
 		const thicknessRow = document.createElement('div');
-		const objectTypeRow = document.createElement('div');
 
 		// Thickness: Value of the input is squared to allow for finer control/larger values.
 		const thicknessLabel = document.createElement('label');
 		const thicknessInput = document.createElement('input');
-		const objectSelectLabel = document.createElement('label');
-		const objectTypeSelect = document.createElement('select');
+		const penTypeSelect = this.createPenTypeSelector();
 
 		// Give inputs IDs so we can label them with a <label for=...>Label text</label>
 		thicknessInput.id = `${toolbarCSSPrefix}penThicknessInput${PenToolWidget.idCounter++}`;
-		objectTypeSelect.id = `${toolbarCSSPrefix}penBuilderSelect${PenToolWidget.idCounter++}`;
 
 		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
 		thicknessLabel.setAttribute('for', thicknessInput.id);
-		objectSelectLabel.innerText = this.localizationTable.selectPenType;
-		objectSelectLabel.setAttribute('for', objectTypeSelect.id);
 
 		// Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
 		const inverseThicknessInputFn = (t: number) => Math.log10(t);
@@ -175,18 +308,6 @@ export default class PenToolWidget extends BaseToolWidget {
 		thicknessRow.appendChild(thicknessLabel);
 		thicknessRow.appendChild(thicknessInput);
 
-		objectTypeSelect.oninput = () => {
-			const penTypeIdx = parseInt(objectTypeSelect.value);
-			if (penTypeIdx < 0 || penTypeIdx >= this.penTypes.length) {
-				console.error('Invalid pen type index', penTypeIdx);
-				return;
-			}
-
-			this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
-		};
-		objectTypeRow.appendChild(objectSelectLabel);
-		objectTypeRow.appendChild(objectTypeSelect);
-
 		const colorRow = document.createElement('div');
 		const colorLabel = document.createElement('label');
 		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
@@ -204,28 +325,15 @@ export default class PenToolWidget extends BaseToolWidget {
 			setColorInputValue(this.tool.getColor());
 			thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
 
-			// Update the list of stroke factories
-			objectTypeSelect.replaceChildren();
-			for (let i = 0; i < this.penTypes.length; i ++) {
-				const penType = this.penTypes[i];
-				const option = document.createElement('option');
-				option.value = i.toString();
-				option.innerText = penType.name;
-
-				objectTypeSelect.appendChild(option);
-			}
+			penTypeSelect.updateIcons();
 
 			// Update the selected stroke factory.
-			const strokeFactoryIdx = this.getCurrentPenTypeIdx();
-			if (strokeFactoryIdx === -1) {
-				objectTypeSelect.value = '';
-			} else {
-				objectTypeSelect.value = strokeFactoryIdx.toString();
-			}
+			penTypeSelect.setValue(this.getCurrentPenTypeIdx());
 		};
 		this.updateInputs();
 
-		container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
+		container.replaceChildren(colorRow, thicknessRow);
+		penTypeSelect.addTo(container);
 		dropdown.replaceChildren(container);
 		return true;
 	}
@@ -246,6 +354,10 @@ export default class PenToolWidget extends BaseToolWidget {
 			}
 		}
 
+		// Run any default actions registered by the parent class.
+		if (super.onKeyPress(event)) {
+			return true;
+		}
 		return false;
 	}
 

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -180,6 +180,10 @@ export default class SelectionToolWidget extends BaseToolWidget {
 			return true;
 		}
 
+		// If we didn't handle the event, allow the superclass to handle it.
+		if (super.onKeyPress(event)) {
+			return true;
+		}
 		return false;
 	}
 

package/src/tools/BaseTool.ts

@@ -5,9 +5,21 @@ export default abstract class BaseTool implements PointerEvtListener {
 	private enabled: boolean = true;
 	private group: ToolEnabledGroup|null = null;
 
+	/**
+	 * Returns true iff the tool handled the event and thus should receive additional
+	 * events.
+	 */
 	public onPointerDown(_event: PointerEvt): boolean { return false; }
 	public onPointerMove(_event: PointerEvt) { }
-	public onPointerUp(_event: PointerEvt) { }
+
+	/**
+	 * 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: PointerEvt): boolean|void { }
+
 	public onGestureCancel() { }
 
 	protected constructor(private notifier: EditorNotifier, public readonly description: string) {
@@ -33,6 +45,15 @@ export default abstract class BaseTool implements PointerEvtListener {
 		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 = enabled;
 

package/src/tools/Pen.test.ts

@@ -8,6 +8,7 @@ import StrokeComponent from '../components/Stroke';
 import Mat33 from '../math/Mat33';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
 import sendPenEvent from '../testing/sendPenEvent';
+import sendTouchEvent from '../testing/sendTouchEvent';
 
 describe('Pen', () => {
 	it('should draw horizontal lines', () => {
@@ -153,6 +154,73 @@ describe('Pen', () => {
 		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(420, 340), 25); // ± 25
 	});
 
+	// if `mainEventIsPen` is false, tests with touch events.
+	const testEventCancelation = (mainEventIsPen: boolean) => {
+		const editor = createEditor();
+
+		expect(editor.image.getElementsIntersectingRegion(new Rect2(0, 0, 1000, 1000))).toHaveLength(0);
+
+		const sendMainEvent = mainEventIsPen ? sendPenEvent : sendTouchEvent;
+
+		// Start the drawing
+		const mainPointer = sendMainEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(417, 24));
+		jest.advanceTimersByTime(245);
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 197));
+		jest.advanceTimersByTime(20);
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 199));
+		jest.advanceTimersByTime(12);
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 201));
+		jest.advanceTimersByTime(40);
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 203));
+		jest.advanceTimersByTime(14);
+
+		// Attempt to cancel the drawing
+		let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0), [ mainPointer ]);
+		let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(100, 0), [ firstPointer, mainPointer ]);
+
+		const maxIterations = 10;
+		for (let i = 0; i < maxIterations; i++) {
+			jest.advanceTimersByTime(100);
+
+			const point1 = Vec2.of(-i * 5, 0);
+			const point2 = Vec2.of(i * 5 + 100, 0);
+
+			const eventType = InputEvtType.PointerMoveEvt;
+			firstPointer = sendTouchEvent(editor, eventType, point1, [ secondPointer, mainPointer ]);
+			secondPointer = sendTouchEvent(editor, eventType, point2, [ firstPointer, mainPointer ]);
+
+			if (i === maxIterations - 1) {
+				jest.advanceTimersByTime(10);
+
+				sendTouchEvent(editor, InputEvtType.PointerUpEvt, point1, [ secondPointer, mainPointer ]);
+				sendTouchEvent(editor, InputEvtType.PointerUpEvt, point2, [ mainPointer ]);
+			}
+
+			jest.advanceTimersByTime(100);
+		}
+
+		// Finish the drawing
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 333), [firstPointer, secondPointer]);
+		jest.advanceTimersByTime(8);
+		sendMainEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 340), [firstPointer, secondPointer]);
+		sendMainEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(420, 340), [firstPointer, secondPointer]);
+
+		const elementsInDrawingArea = editor.image.getElementsIntersectingRegion(new Rect2(0, 0, 1000, 1000));
+		if (mainEventIsPen) {
+			expect(elementsInDrawingArea).toHaveLength(1);
+		} else {
+			expect(elementsInDrawingArea).toHaveLength(0);
+		}
+	};
+
+	it('pen events should not be cancelable by touch events', () => {
+		testEventCancelation(true);
+	});
+
+	it('touch events should be cancelable by touch events', () => {
+		testEventCancelation(false);
+	});
+
 	it('ctrl+z should finalize then undo the current stroke', async () => {
 		const editor = createEditor();
 

package/src/tools/Pen.ts

@@ -20,6 +20,7 @@ export default class Pen extends BaseTool {
 	protected builder: ComponentBuilder|null = null;
 	private lastPoint: StrokeDataPoint|null = null;
 	private startPoint: StrokeDataPoint|null = null;
+	private currentDeviceType: PointerDevice|null = null;
 
 	private snapToGridEnabled: boolean = false;
 	private angleLockEnabled: boolean = false;
@@ -94,7 +95,8 @@ export default class Pen extends BaseTool {
 		this.previewStroke();
 	}
 
-	public override onPointerDown({ current, allPointers }: PointerEvt): boolean {
+	public override onPointerDown(event: PointerEvt): boolean {
+		const { current, allPointers } = event;
 		const isEraser = current.device === PointerDevice.Eraser;
 
 		let anyDeviceIsStylus = false;
@@ -105,24 +107,57 @@ export default class Pen extends BaseTool {
 			}
 		}
 
+		// Avoid canceling an existing stroke
+		if (this.builder && !this.eventCanCancelStroke(event)) {
+			return true;
+		}
+
 		if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
 			this.startPoint = this.toStrokePoint(current);
 			this.builder = this.builderFactory(this.startPoint, this.editor.viewport);
+			this.currentDeviceType = current.device;
 			return true;
 		}
 
 		return false;
 	}
 
+	private eventCanCancelStroke(event: PointerEvt) {
+		// If there has been a delay since the last input event,
+		// it's always okay to cancel
+		const lastInputTime = this.lastPoint?.time ?? 0;
+		if (event.current.timeStamp - lastInputTime > 1000) {
+			return true;
+		}
+
+		const isPenStroke = this.currentDeviceType === PointerDevice.Pen;
+		const isTouchEvent = event.current.device === PointerDevice.Touch;
+
+		// Don't allow pen strokes to be cancelled by touch events.
+		if (isPenStroke && isTouchEvent) {
+			return false;
+		}
+
+		return true;
+	}
+
+	public override eventCanBeDeliveredToNonActiveTool(event: PointerEvt) {
+		return this.eventCanCancelStroke(event);
+	}
+
 	public override onPointerMove({ current }: PointerEvt): void {
 		if (!this.builder) return;
+		if (current.device !== this.currentDeviceType) return;
 
 		this.addPointToStroke(this.toStrokePoint(current));
 	}
 
-	public override onPointerUp({ current }: PointerEvt): void {
-		if (!this.builder) {
-			return;
+	public override onPointerUp({ current }: PointerEvt) {
+		if (!this.builder) return false;
+		if (current.device !== this.currentDeviceType) {
+			// this.builder still exists, so we're handling events from another
+			// device type.
+			return true;
 		}
 
 		// onPointerUp events can have zero pressure. Use the last pressure instead.
@@ -137,9 +172,12 @@ export default class Pen extends BaseTool {
 		if (current.isPrimary) {
 			this.finalizeStroke();
 		}
+
+		return false;
 	}
 
 	public override onGestureCancel() {
+		this.builder = null;
 		this.editor.clearWetInk();
 	}
 

package/src/tools/ToolController.ts

@@ -115,7 +115,16 @@ export default class ToolController {
 	public dispatchInputEvent(event: InputEvt): boolean {
 		let handled = false;
 		if (event.kind === InputEvtType.PointerDownEvt) {
+			let canOnlySendToActiveTool = false;
+			if (this.activeTool && !this.activeTool.eventCanBeDeliveredToNonActiveTool(event)) {
+				canOnlySendToActiveTool = true;
+			}
+
 			for (const tool of this.tools) {
+				if (canOnlySendToActiveTool && tool !== this.activeTool) {
+					continue;
+				}
+
 				if (tool.isEnabled() && tool.onPointerDown(event)) {
 					if (this.activeTool !== tool) {
 						this.activeTool?.onGestureCancel();
@@ -127,8 +136,14 @@ export default class ToolController {
 				}
 			}
 		} else if (event.kind === InputEvtType.PointerUpEvt) {
-			this.activeTool?.onPointerUp(event);
-			this.activeTool = null;
+			const upResult = this.activeTool?.onPointerUp(event);
+			const continueHandlingEvents = upResult && event.allPointers.length > 1;
+
+			// Should the active tool continue handling events (without an additional pointer down?)
+			if (!continueHandlingEvents) {
+				// No -- Remove the current tool
+				this.activeTool = null;
+			}
 			handled = true;
 		} else if (event.kind === InputEvtType.PointerMoveEvt) {
 			if (this.activeTool !== null) {