js-draw 0.17.2 → 0.17.4

package/src/testing/sendTouchEvent.ts

@@ -3,7 +3,42 @@ import { Vec2 } from '../math/Vec2';
 import Pointer, { PointerDevice } from '../Pointer';
 import { InputEvtType } from '../types';
 
-
+/**
+ * Dispatch a touch event to the currently selected tool. Intended for unit tests.
+ * 
+ * @see {@link sendPenEvent}
+ * 
+ * @example
+ * **Simulating a horizontal swipe gesture:**
+ * ```ts
+ * sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * for (let i = 1; i <= 10; i++) {
+ *   jest.advanceTimersByTime(10);
+ *   sendTouchEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(i * 10, 0));
+ * }
+ * ```
+ * 
+ * @example
+ * **Simulating a pinch gesture.** This example assumes that you're using [Jest with timer mocks enabled](https://jestjs.io/docs/timer-mocks).
+ * ```ts
+ * let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(100, 0), [ firstPointer ]);
+ * 
+ * // Simulate a pinch
+ * const maxIterations = 10;
+ * for (let i = 0; i < maxIterations; i++) {
+ *   // Use the unit testing framework's tool for increasing the current time
+ *   // returned by (new Date()).getTime(), etc.
+ *   jest.advanceTimersByTime(100);
+ * 
+ *   const point1 = Vec2.of(-i * 5, 0);
+ *   const point2 = Vec2.of(i * 5 + 100, 0);
+ * 
+ *   firstPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point1, [ secondPointer ]);
+ *   secondPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point2, [ firstPointer ]);
+ * }
+ * ```
+ */
 const sendTouchEvent = (
 	editor: Editor,
 	eventType: InputEvtType.PointerDownEvt|InputEvtType.PointerMoveEvt|InputEvtType.PointerUpEvt,

package/src/toolbar/toolbar.css

@@ -206,3 +206,8 @@
 	background-color: var(--secondary-background-color);
 	--icon-color: var(--secondary-foreground-color);
 }
+
+.toolbar-spacedList > * {
+	padding-bottom: 5px;
+	padding-top: 5px;
+}

package/src/toolbar/widgets/DocumentPropertiesWidget.ts

@@ -1,9 +1,9 @@
 import Color4 from '../../Color4';
-import ImageBackground from '../../components/ImageBackground';
 import Editor from '../../Editor';
 import { EditorImageEventType } from '../../EditorImage';
 import Rect2 from '../../math/Rect2';
 import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { ToolbarLocalization } from '../localization';
 import makeColorInput from '../makeColorInput';
 import BaseWidget from './BaseWidget';
@@ -56,31 +56,12 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 		}
 	}
 
-	private getBackgroundElem() {
-		const backgroundComponents = [];
-
-		for (const component of this.editor.image.getBackgroundComponents()) {
-			if (component instanceof ImageBackground) {
-				backgroundComponents.push(component);
-			}
-		}
-
-		if (backgroundComponents.length === 0) {
-			return null;
-		}
-
-		// Return the last background component in the list — the component with highest z-index.
-		return backgroundComponents[backgroundComponents.length - 1];
-	}
-
 	private setBackgroundColor(color: Color4) {
 		this.editor.dispatch(this.editor.setBackgroundColor(color));
 	}
 
 	private getBackgroundColor() {
-		const background = this.getBackgroundElem();
-
-		return background?.getStyle()?.color ?? Color4.transparent;
+		return this.editor.estimateBackgroundColor();
 	}
 
 	private updateImportExportRectSize(size: { width?: number, height?: number }) {
@@ -109,6 +90,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
+		container.classList.add(`${toolbarCSSPrefix}spacedList`);
 
 		const backgroundColorRow = document.createElement('div');
 		const backgroundColorLabel = document.createElement('label');
@@ -121,7 +103,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 			}
 		});
 
-		colorInput.id = `document-properties-color-input-${DocumentPropertiesWidget.idCounter++}`;
+		colorInput.id = `${toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
 		backgroundColorLabel.htmlFor = colorInput.id;
 
 		backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
@@ -135,7 +117,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 			label.innerText = labelContent;
 			input.type = 'number';
 			input.min = '0';
-			input.id = `document-properties-dimension-row-${DocumentPropertiesWidget.idCounter++}`;
+			input.id = `${toolbarCSSPrefix}docPropertiesDimensionRow-${DocumentPropertiesWidget.idCounter++}`;
 			label.htmlFor = input.id;
 
 			spacer.style.flexGrow = '1';

package/src/toolbar/widgets/PenToolWidget.ts

@@ -134,6 +134,7 @@ export default class PenToolWidget extends BaseToolWidget {
 	private static idCounter: number = 0;
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
+		container.classList.add(`${toolbarCSSPrefix}spacedList`);
 
 		const thicknessRow = document.createElement('div');
 		const objectTypeRow = document.createElement('div');

package/src/toolbar/widgets/TextToolWidget.ts

@@ -32,6 +32,8 @@ export default class TextToolWidget extends BaseToolWidget {
 
 	private static idCounter: number = 0;
 	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		container.classList.add(`${toolbarCSSPrefix}spacedList`);
 		const fontRow = document.createElement('div');
 		const colorRow = document.createElement('div');
 		const sizeRow = document.createElement('div');
@@ -108,7 +110,8 @@ export default class TextToolWidget extends BaseToolWidget {
 		};
 		this.updateDropdownInputs();
 
-		dropdown.replaceChildren(colorRow, sizeRow, fontRow);
+		container.replaceChildren(colorRow, sizeRow, fontRow);
+		dropdown.appendChild(container);
 		return true;
 	}
 

package/src/tools/Eraser.test.ts

@@ -3,6 +3,7 @@ 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';
 
@@ -23,9 +24,9 @@ describe('Eraser', () => {
 		const editor = createEditor();
 
 		// Draw a line
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
 		jest.advanceTimersByTime(100);
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(200, 200));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(200, 200));
 
 		// Should have drawn a line
 		const strokes = getAllStrokes(editor);
@@ -35,9 +36,9 @@ describe('Eraser', () => {
 		selectEraser(editor);
 
 		// Erase the line.
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 0));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(200, 0));
 		jest.advanceTimersByTime(400);
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(0, 200));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(0, 200));
 
 		// Should have erased the line
 		expect(getAllStrokes(editor)).toHaveLength(0);
@@ -64,16 +65,16 @@ describe('Eraser', () => {
 		eraser.setThickness(10);
 
 		// Erase the first stroke
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(3, 0));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(3, 0));
 		jest.advanceTimersByTime(100);
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(3, 0));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(3, 0));
 
 		expect(getAllStrokes(editor)).toHaveLength(1);
 
 		// Erase the remaining stroke
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(47, 47));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(47, 47));
 		jest.advanceTimersByTime(100);
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(47, 47));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(47, 47));
 
 		expect(getAllStrokes(editor)).toHaveLength(0);
 	});
@@ -92,9 +93,9 @@ describe('Eraser', () => {
 		eraser.setThickness(100);
 
 		// Try to erase it.
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
 		jest.advanceTimersByTime(100);
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(3, 0));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(3, 0));
 
 		// Should not have been erased
 		expect(editor.image.getAllElements()).toHaveLength(1);

package/src/tools/PanZoom.test.ts

@@ -68,7 +68,7 @@ describe('PanZoom', () => {
 			firstPointer = sendTouchEvent(editor, eventType, point1, [ secondPointer ]);
 			secondPointer = sendTouchEvent(editor, eventType, point2, [ firstPointer ]);
 			expectedScale = point1.minus(point2).magnitude() / 100;
-			Vec2.zero;
+
 			if (i === maxIterations - 1) {
 				jest.advanceTimersByTime(10);
 

package/src/tools/Pen.test.ts

@@ -7,16 +7,17 @@ import Rect2 from '../math/Rect2';
 import StrokeComponent from '../components/Stroke';
 import Mat33 from '../math/Mat33';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
+import sendPenEvent from '../testing/sendPenEvent';
 
 describe('Pen', () => {
 	it('should draw horizontal lines', () => {
 		const editor = createEditor();
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
 		for (let i = 0; i < 10; i++) {
-			editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(i, 0));
+			sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(i, 0));
 			jest.advanceTimersByTime(200);
 		}
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(200, 0));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(200, 0));
 
 		const elems = editor.image.getElementsIntersectingRegion(new Rect2(0, 10, 10, -10));
 		expect(elems).toHaveLength(1);
@@ -29,12 +30,12 @@ describe('Pen', () => {
 
 	it('should draw vertical line', () => {
 		const editor = createEditor();
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
 		for (let i = 0; i < 10; i++) {
-			editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(0, i * 20));
+			sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(0, i * 20));
 			jest.advanceTimersByTime(200);
 		}
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(0, 150));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(0, 150));
 
 		const elems = editor.image.getElementsIntersectingRegion(Rect2.unitSquare);
 		expect(elems).toHaveLength(1);
@@ -46,104 +47,104 @@ describe('Pen', () => {
 	it('should draw vertical line with slight bend', () => {
 		const editor = createEditor();
 
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(417, 24)); 
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(417, 24)); 
 		jest.advanceTimersByTime(245);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 197));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 197));
 		jest.advanceTimersByTime(20);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 199));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 199));
 		jest.advanceTimersByTime(12);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 201));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 201));
 		jest.advanceTimersByTime(40);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 203));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 203));
 		jest.advanceTimersByTime(14);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 206));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 206));
 		jest.advanceTimersByTime(35);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 208));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 208));
 		jest.advanceTimersByTime(16);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 211));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 211));
 		jest.advanceTimersByTime(51);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 215));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 215));
 		jest.advanceTimersByTime(32);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 218));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 218));
 		jest.advanceTimersByTime(30);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 220));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 220));
 		jest.advanceTimersByTime(24);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 222));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 222));
 		jest.advanceTimersByTime(14);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 224));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 224));
 		jest.advanceTimersByTime(32);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 227));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 227));
 		jest.advanceTimersByTime(17);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 229));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 229));
 		jest.advanceTimersByTime(53);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 234));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 234));
 		jest.advanceTimersByTime(34);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 236));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 236));
 		jest.advanceTimersByTime(17);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 238));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 238));
 		jest.advanceTimersByTime(39);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 240));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 240));
 		jest.advanceTimersByTime(10);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 243));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 243));
 		jest.advanceTimersByTime(34);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 250));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 250));
 		jest.advanceTimersByTime(57);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 252));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(423, 252));
 		jest.advanceTimersByTime(8);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(422, 256));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(422, 256));
 		jest.advanceTimersByTime(28);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(422, 258));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(422, 258));
 		jest.advanceTimersByTime(21);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(421, 262));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(421, 262));
 		jest.advanceTimersByTime(34);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 264));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 264));
 		jest.advanceTimersByTime(5);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 266));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 266));
 		jest.advanceTimersByTime(22);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 268));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 268));
 		jest.advanceTimersByTime(22);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 271));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 271));
 		jest.advanceTimersByTime(18);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 274));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 274));
 		jest.advanceTimersByTime(33);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 277));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 277));
 		jest.advanceTimersByTime(16);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 279));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 279));
 		jest.advanceTimersByTime(36);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 282));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 282));
 		jest.advanceTimersByTime(15);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 284));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 284));
 		jest.advanceTimersByTime(48);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 289));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 289));
 		jest.advanceTimersByTime(16);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 291));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 291));
 		jest.advanceTimersByTime(31);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 295));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 295));
 		jest.advanceTimersByTime(23);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 301));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 301));
 		jest.advanceTimersByTime(31);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 306));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 306));
 		jest.advanceTimersByTime(18);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 308));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 308));
 		jest.advanceTimersByTime(20);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 310));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 310));
 		jest.advanceTimersByTime(13);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 313));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 313));
 		jest.advanceTimersByTime(17);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 317));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 317));
 		jest.advanceTimersByTime(33);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 321));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 321));
 		jest.advanceTimersByTime(15);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 324));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 324));
 		jest.advanceTimersByTime(23);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 326));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 326));
 		jest.advanceTimersByTime(14);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 329));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(419, 329));
 		jest.advanceTimersByTime(36);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 333));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 333));
 		jest.advanceTimersByTime(8);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 340));
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(420, 340));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(420, 340));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(420, 340));
 
 		const elems = editor.image.getElementsIntersectingRegion(new Rect2(0, 0, 1000, 1000));
 		expect(elems).toHaveLength(1);
@@ -157,9 +158,9 @@ describe('Pen', () => {
 
 		expect(editor.history.undoStackSize).toBe(0);
 
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(10, 10)); 
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(10, 10)); 
 		jest.advanceTimersByTime(100);
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(20, 10));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(20, 10));
 
 		const ctrlKeyDown = true;
 		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'z', ctrlKeyDown);
@@ -168,7 +169,7 @@ describe('Pen', () => {
 		expect(editor.history.redoStackSize).toBe(1);
 
 		// Lifting the pointer up shouldn't clear the redo stack.
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(420, 340));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(420, 340));
 		expect(editor.history.redoStackSize).toBe(1);
 	});
 
@@ -179,10 +180,10 @@ describe('Pen', () => {
 		const penTool = editor.toolController.getMatchingTools(PenTool)[0];
 		penTool.setStrokeFactory(makeFreehandLineBuilder);
 
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0.1, 0.1)); 
+		sendPenEvent(editor, 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));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(10.1, 10.1));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(10.1, 10.1));
 
 		const allElems = editor.image.getAllElements();
 		expect(allElems).toHaveLength(1);

package/src/tools/SelectionTool/SelectionTool.test.ts

@@ -10,6 +10,7 @@ import SelectionTool from './SelectionTool';
 import createEditor from '../../testing/createEditor';
 import Pointer from '../../Pointer';
 import { Rect2 } from '../../lib';
+import sendPenEvent from '../../testing/sendPenEvent';
 
 const getSelectionTool = (editor: Editor): SelectionTool => {
 	return editor.toolController.getMatchingTools(SelectionTool)[0];
@@ -33,9 +34,9 @@ const createEditorWithSingleObjectSelection = (objectSize: number = 50) => {
 	// Select the object
 	const selectionTool = getSelectionTool(editor);
 	selectionTool.setEnabled(true);
-	editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
-	editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(10, 10));
-	editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(5, 5));
+	sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+	sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(10, 10));
+	sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(5, 5));
 
 	return { editor, testStroke, selectionTool };
 };
@@ -61,9 +62,9 @@ describe('SelectionTool', () => {
 
 		const selectionTool = getSelectionTool(editor);
 		selectionTool.setEnabled(true);
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
-		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(0.1, 0.1));
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(0.1, 0.1));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		sendPenEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(0.1, 0.1));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(0.1, 0.1));
 
 		// Should surround the selected object (which has bbox = (0, 0, 1, 1))
 		// with extra space.
@@ -125,8 +126,8 @@ describe('SelectionTool', () => {
 		selectionTool.setEnabled(true);
 
 		// Select the smaller rectangle
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(40, 40));
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(100, 100));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(40, 40));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(100, 100));
 
 		expect(selectionTool.getSelectedObjects()).toHaveLength(1);
 
@@ -134,21 +135,21 @@ describe('SelectionTool', () => {
 		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'Shift');
 
 		// Select the larger stroke.
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(600, 600));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(600, 600));
 
 		expect(selectionTool.getSelectedObjects()).toHaveLength(2);
 
 		editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, 'Shift');
 
 		// Select the larger stroke without shift pressed
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(600, 600));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(600, 600));
 		expect(selectionTool.getSelectedObjects()).toHaveLength(1);
 
 		// Select nothing
-		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
-		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(201, 201));
+		sendPenEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		sendPenEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(201, 201));
 		expect(selectionTool.getSelectedObjects()).toHaveLength(0);
 	});
 

package/src/tools/SelectionTool/SelectionTool.ts

@@ -379,24 +379,22 @@ export default class SelectionTool extends BaseTool {
 
 		const exportViewport = new Viewport(() => {});
 		exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
-		exportViewport.resetTransform(Mat33.translation(bbox.topLeft));
-
-		const svgNameSpace = 'http://www.w3.org/2000/svg';
-		const exportElem = document.createElementNS(svgNameSpace, 'svg');
+		exportViewport.resetTransform(Mat33.translation(bbox.topLeft.times(-1)));
 
 		const sanitize = true;
-		const renderer = new SVGRenderer(exportElem, exportViewport, sanitize);
+		const { element: svgExportElem, renderer: svgRenderer } = SVGRenderer.fromViewport(exportViewport, sanitize);
 
 		const text: string[] = [];
 		for (const elem of selectedElems) {
-			elem.render(renderer);
+			elem.render(svgRenderer);
 
 			if (elem instanceof TextComponent) {
 				text.push(elem.getText());
 			}
 		}
 
-		event.setData('image/svg+xml', exportElem.outerHTML);
+		event.setData('image/svg+xml', svgExportElem.outerHTML);
+		event.setData('text/html', svgExportElem.outerHTML);
 		if (text.length > 0) {
 			event.setData('text/plain', text.join('\n'));
 		}