js-draw 0.11.3 → 0.13.0

package/src/toolbar/IconProvider.ts

@@ -43,7 +43,7 @@ export default class IconProvider {
 		return this.makeRedoIcon(true);
 	}
 
-	// @param mirror - reflect across the x-axis @internal
+	// @param mirror - reflect across the x-axis. This parameter is internal.
 	// @returns a redo icon.
 	public makeRedoIcon(mirror: boolean = false): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');
@@ -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;
 	}
 	
@@ -355,52 +383,119 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makePenIcon(tipThickness: number, color: string|Color4, roundedTip?: boolean): IconType {
+	public makePenIcon(strokeSize: number, color: string|Color4, rounded?: boolean): IconType {
 		if (color instanceof Color4) {
 			color = color.toHexString();
 		}
 	
 		const icon = document.createElementNS(svgNamespace, 'svg');
 		icon.setAttribute('viewBox', '0 0 100 100');
-	
-		const halfThickness = tipThickness / 2;
-	
-		// Draw a pen-like shape
-		const penTipLeft = 50 - halfThickness;
-		const penTipRight = 50 + halfThickness;
+		const tipThickness = strokeSize / 2;
+
+		const inkTipPath = `
+			M ${15 - tipThickness},${80 - tipThickness}
+			  ${15 - tipThickness},${80 + tipThickness}
+			  30,83
+			  15,65
+			Z
+		`;
+		const trailStartEndY = 80 + tipThickness;
+		const inkTrailPath = `
+			m ${15 - tipThickness * 1.1},${trailStartEndY}
+			c 35,10 55,15 60,30
+			l ${35 + tipThickness * 1.2},${-10 - tipThickness}
+			C 80.47,98.32 50.5,${90 + tipThickness} 20,${trailStartEndY} Z
+		`;
+
+		const colorBubblePath = `
+			M 72.45,35.67
+			A 10,15 41.8 0 1 55,40.2 10,15 41.8 0 1 57.55,22.3 10,15 41.8 0 1 75,17.8 10,15 41.8 0 1 72.5,35.67
+			Z
+		`;
 
-		let tipCenterPrimaryPath = `L${penTipLeft},95 L${penTipRight},90`;
-		let tipCenterBackgroundPath = `L${penTipLeft},85 L${penTipRight},83`;
+		let gripMainPath = 'M 85,-25 25,35 h 10 v 10 h 10 v 10 h 10 v 10 h 10 l -5,10 60,-60 z';
+		let gripShadow1Path = 'M 25,35 H 35 L 90,-15 85,-25 Z';
+		let gripShadow2Path = 'M 60,75 65,65 H 55 l 55,-55 10,5 z';
 
-		if (roundedTip) {
-			tipCenterPrimaryPath = `L${penTipLeft},95 q${halfThickness},10 ${2 * halfThickness},-5`;
-			tipCenterBackgroundPath = `L${penTipLeft},87 q${halfThickness},10 ${2 * halfThickness},-3`;
+		if (rounded) {
+			gripMainPath = 'M 85,-25 25,35 c 15,0 40,30 35,40 l 60,-60 z';
+			gripShadow1Path = 'm 25,35 c 3.92361,0.384473 7.644275,0.980572 10,3 l 55,-53 -5,-10 z';
+			gripShadow2Path = 'M 60,75 C 61,66 59,65 56,59 l 54,-54 10,10 z';
 		}
 
-		const primaryStrokeTipPath = `M14,63 ${tipCenterPrimaryPath} L88,60 Z`;
-		const backgroundStrokeTipPath = `M14,63 ${tipCenterBackgroundPath} L88,60 Z`;
+		const penTipPath = `M 25,35 ${10 - tipThickness / 4},${70 - tipThickness / 2} 20,75 25,85 60,75 70,55 45,25 Z`;
 
-		icon.innerHTML = `
-		<defs>
-			${checkerboardPatternDef}
-		</defs>
-		<g>
-			<!-- Pen grip -->
+		const pencilTipColor = Color4.fromHex('#f4d7d7');
+		const tipColor = pencilTipColor.mix(
+			Color4.fromString(color), tipThickness / 40 - 0.1
+		).toHexString();
+
+		const ink = `
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${inkTipPath}"
+			/>
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${inkTrailPath}"
+			/>
+			<path
+				fill="${color}"
+				d="${inkTipPath}"
+			/>
+			<path
+				fill="${color}"
+				d="${inkTrailPath}"
+			/>
+		`;
+
+		const penTip = `
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${penTipPath}"
+			/>
+			<path
+				fill="${tipColor}"
+				stroke="${color}"
+				d="${penTipPath}"
+			/>
+		`;
+
+		const grip = `
 			<path
-				d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
 				${iconColorStrokeFill}
+				d="${gripMainPath}"
 			/>
-		</g>
-		<g>
-			<!-- Checkerboard background for slightly transparent pens -->
-			<path d='${backgroundStrokeTipPath}' fill='${checkerboardPatternRef}'/>
-	
-			<!-- Actual pen tip -->
+
+			<!-- shadows -->
 			<path
-				d='${primaryStrokeTipPath}'
-				fill='${color}'
-				stroke='${color}'
+				fill="rgba(150, 150, 150, 0.3)"
+				d="${gripShadow1Path}"
 			/>
+			<path
+				fill="rgba(100, 100, 100, 0.2)"
+				d="${gripShadow2Path}"
+			/>
+
+			<!-- color bubble -->
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${colorBubblePath}"
+			/>
+			<path
+				fill="${color}"
+				d="${colorBubblePath}"
+			/>
+		`;
+
+		icon.innerHTML = `
+		<defs>
+			${checkerboardPatternDef}
+		</defs>
+		<g>
+			${ink}
+			${penTip}
+			${grip}
 		</g>
 		`;
 		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/PanZoom.ts

@@ -338,7 +338,7 @@ export default class PanZoom extends BaseTool {
 			toCanvas.transformVec3(
 				Vec3.of(-delta.x, -delta.y, 0)
 			);
-		const pinchZoomScaleFactor = 1.04;
+		const pinchZoomScaleFactor = 1.03;
 		const transformUpdate = Mat33.scaling2D(
 			Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos
 		).rightMul(

package/src/tools/PasteHandler.ts

@@ -1,8 +1,3 @@
-/**
- * A tool that handles paste events.
- * @packageDocumentation
- */
-
 import Editor from '../Editor';
 import { AbstractComponent, TextComponent } from '../components/lib';
 import SVGLoader from '../SVGLoader';
@@ -14,12 +9,23 @@ import Color4 from '../Color4';
 import { TextStyle } from '../components/TextComponent';
 import ImageComponent from '../components/ImageComponent';
 
-// { @inheritDoc PasteHandler! }
+/**
+ * A tool that handles paste events (e.g. as triggered by ctrl+V).
+ * 
+ * @example
+ * While `ToolController` has a `PasteHandler` in its default list of tools,
+ * if a non-default set is being used, `PasteHandler` can be added as follows:
+ * ```ts
+ * const toolController = editor.toolController;
+ * toolController.addTool(new PasteHandler(editor));
+ * ```
+ */
 export default class PasteHandler extends BaseTool {
 	public constructor(private editor: Editor) {
 		super(editor.notifier, editor.localization.pasteHandler);
 	}
 
+	// @internal
 	public onPaste(event: PasteEvent): boolean {
 		const mime = event.mime.toLowerCase();
 

package/src/tools/Pen.test.ts

@@ -1,8 +1,12 @@
 
-import { Rect2 } from '../lib';
+import PenTool from './Pen';
 import { Vec2 } from '../math/Vec2';
 import createEditor from '../testing/createEditor';
 import { InputEvtType } from '../types';
+import Rect2 from '../math/Rect2';
+import StrokeComponent from '../components/Stroke';
+import Mat33 from '../math/Mat33';
+import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
 
 describe('Pen', () => {
 	it('should draw horizontal lines', () => {
@@ -147,4 +151,43 @@ describe('Pen', () => {
 		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(420, 24), 32); // ± 32
 		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(420, 340), 25); // ± 25
 	});
+
+	it('ctrl+z should finalize then undo the current stroke', async () => {
+		const editor = createEditor();
+
+		expect(editor.history.undoStackSize).toBe(0);
+
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(10, 10)); 
+		jest.advanceTimersByTime(100);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(20, 10));
+
+		const ctrlKeyDown = true;
+		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'z', ctrlKeyDown);
+
+		// Stroke should have been undone
+		expect(editor.history.redoStackSize).toBe(1);
+
+		// Lifting the pointer up shouldn't clear the redo stack.
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(420, 340));
+		expect(editor.history.redoStackSize).toBe(1);
+	});
+
+	it('holding ctrl should snap the stroke to grid', () => {
+		const editor = createEditor();
+		editor.viewport.resetTransform(Mat33.identity);
+
+		const penTool = editor.toolController.getMatchingTools(PenTool)[0];
+		penTool.setStrokeFactory(makeFreehandLineBuilder);
+
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0.1, 0.1)); 
+		jest.advanceTimersByTime(100);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(10.1, 10.1));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(10.1, 10.1));
+
+		const allElems = editor.image.getAllElements();
+		expect(allElems).toHaveLength(1);
+
+		const firstStroke = allElems[0] as StrokeComponent;
+		expect(firstStroke.getPath().bbox).objEq(new Rect2(0, 0, 10, 10));
+	});
 });