js-draw 0.4.0 → 0.4.1

package/src/components/builders/FreehandLineBuilder.ts

@@ -173,7 +173,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	}
 
 	public build(): Stroke {
-		if (this.lastPoint) {
+		if (this.lastPoint && (this.lowerSegments.length === 0 || this.approxCurrentCurveLength() > this.curveStartWidth * 2)) {
 			this.finalizeCurrentCurve();
 		}
 		return this.previewStroke()!;
@@ -189,6 +189,19 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		return Viewport.roundPoint(point, minFit);
 	}
 
+	// Returns the distance between the start, control, and end points of the curve.
+	private approxCurrentCurveLength() {
+		if (!this.currentCurve) {
+			return 0;
+		}
+		const startPt = Vec2.ofXY(this.currentCurve.points[0]);
+		const controlPt = Vec2.ofXY(this.currentCurve.points[1]);
+		const endPt = Vec2.ofXY(this.currentCurve.points[2]);
+		const toControlDist = startPt.minus(controlPt).length();
+		const toEndDist = endPt.minus(controlPt).length();
+		return toControlDist + toEndDist;
+	}
+
 	private finalizeCurrentCurve() {
 		// Case where no points have been added
 		if (!this.currentCurve) {
@@ -285,10 +298,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		startVec = startVec.times(this.curveStartWidth / 2);
 		endVec = endVec.times(this.curveEndWidth / 2);
 
-		if (isNaN(startVec.magnitude())) {
-			// TODO: This can happen when events are too close together. Find out why and
-			// 		 fix.
-			console.error('startVec is NaN', startVec, endVec, this.currentCurve);
+		if (!isFinite(startVec.magnitude())) {
+			console.error('Warning: startVec is NaN or ∞', startVec, endVec, this.currentCurve);
 			startVec = endVec;
 		}
 
@@ -307,39 +318,22 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		}
 
 		const halfVecT = projectionT;
-		let halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
+		const halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
 			.normalized().times(
 				this.curveStartWidth / 2 * halfVecT
 				+ this.curveEndWidth / 2 * (1 - halfVecT)
 			);
 
-		// Computes a boundary curve. [direction] should be either +1 or -1 (determines the side
-		// of the center curve to place the boundary).
-		const computeBoundaryCurve = (direction: number, halfVec: Vec2) => {
-			return new Bezier(
-				startPt.plus(startVec.times(direction)),
-				controlPoint.plus(halfVec.times(direction)),
-				endPt.plus(endVec.times(direction)),
-			);
-		};
-
-		const boundariesIntersect = () => {
-			const upperBoundary = computeBoundaryCurve(1, halfVec);
-			const lowerBoundary = computeBoundaryCurve(-1, halfVec);
-			return upperBoundary.intersects(lowerBoundary).length > 0;
-		};
-
-		// If the boundaries have intersections, increasing the half vector's length could fix this.
-		if (boundariesIntersect()) {
-			halfVec = halfVec.times(1.1);
-		}
-
 		// Each starts at startPt ± startVec
+		const lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
+		const lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
+		const upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
+		const upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
 
 		const lowerCurve: QuadraticBezierPathCommand = {
 			kind: PathCommandType.QuadraticBezierTo,
-			controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
-			endPoint: this.roundPoint(endPt.plus(endVec)),
+			controlPoint: lowerCurveControlPoint,
+			endPoint: lowerCurveEndPoint,
 		};
 
 		// From the end of the upperCurve to the start of the lowerCurve:
@@ -351,12 +345,12 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		// From the end of lowerCurve to the start of upperCurve:
 		const lowerToUpperConnector: LinePathCommand = {
 			kind: PathCommandType.LineTo,
-			point: this.roundPoint(endPt.minus(endVec))
+			point: upperCurveStartPoint,
 		};
 
 		const upperCurve: QuadraticBezierPathCommand = {
 			kind: PathCommandType.QuadraticBezierTo,
-			controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
+			controlPoint: upperCurveControlPoint,
 			endPoint: this.roundPoint(startPt.minus(startVec)),
 		};
 
@@ -374,7 +368,6 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			const fuzzEq = 1e-10;
 			const deltaTime = newPoint.time - this.lastPoint.time;
 			if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
-				console.warn('Discarding identical point');
 				return;
 			} else if (isNaN(newPoint.pos.magnitude())) {
 				console.warn('Discarding NaN point.', newPoint);
@@ -433,23 +426,23 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		let exitingVec = this.computeExitingVec();
 
 		// Find the intersection between the entering vector and the exiting vector
-		const maxRelativeLength = 2;
+		const maxRelativeLength = 3;
 		const segmentStart = this.buffer[0];
 		const segmentEnd = newPoint.pos;
 		const startEndDist = segmentEnd.minus(segmentStart).magnitude();
 		const maxControlPointDist = maxRelativeLength * startEndDist;
 
 		// Exit in cases where we would divide by zero
-		if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || isNaN(exitingVec.magnitude())) {
+		if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
 			return;
 		}
 
-		console.assert(!isNaN(enteringVec.magnitude()));
+		console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
 
 		enteringVec = enteringVec.normalized();
 		exitingVec = exitingVec.normalized();
 
-		console.assert(!isNaN(enteringVec.magnitude()));
+		console.assert(isFinite(enteringVec.magnitude()), 'Normalized enteringVec has NaN or ∞ magnitude!');
 
 		const lineFromStart = new LineSegment2(
 			segmentStart,
@@ -462,18 +455,20 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		const intersection = lineFromEnd.intersection(lineFromStart);
 
 		// Position the control point at this intersection
-		let controlPoint: Point2;
+		let controlPoint: Point2|null = null;
 		if (intersection) {
 			controlPoint = intersection.point;
-		} else {
+		}
+
+		// No intersection or the intersection is one of the end points?
+		if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
 			// Position the control point closer to the first -- the connecting
 			// segment will be roughly a line.
 			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
 		}
 
-		if (isNaN(controlPoint.magnitude()) || isNaN(segmentStart.magnitude())) {
-			console.error('controlPoint is NaN', intersection, 'Start:', segmentStart, 'End:', segmentEnd, 'in:', enteringVec, 'out:', exitingVec);
-		}
+		console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
+		console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
 
 		const prevCurve = this.currentCurve;
 		this.currentCurve = new Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
@@ -502,8 +497,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			return true;
 		};
 
-		const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
-		if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 3) {
+		if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth) {
 			if (!curveMatchesPoints(this.currentCurve)) {
 				// Use a curve that better fits the points
 				this.currentCurve = prevCurve;

package/src/language/assertions.ts

@@ -2,5 +2,5 @@
 // Compile-time assertion that a branch of code is unreachable.
 // See https://stackoverflow.com/a/39419171/17055750
 export const assertUnreachable = (key: never): never => {
-    throw new Error(`Should be unreachable. Key: ${key}.`);
-};
+	throw new Error(`Should be unreachable. Key: ${key}.`);
+};

package/src/math/LineSegment2.test.ts

@@ -1,9 +1,7 @@
 import LineSegment2 from './LineSegment2';
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import { Vec2 } from './Vec2';
 import Mat33 from './Mat33';
 
-loadExpectExtensions();
 
 describe('Line2', () => {
 	it('x and y axes should intersect at (0, 0)', () => {
@@ -14,13 +12,13 @@ describe('Line2', () => {
 	});
 
 	it('y = -2x + 2 and y = 2x - 2 should intersect at (1,0)', () => {
-		// y = -2x + 2
+		// y = -4x + 2
 		const line1 = new LineSegment2(Vec2.of(0, 2), Vec2.of(1, -2));
-		// y = 2x - 2
+		// y = 4x - 2
 		const line2 = new LineSegment2(Vec2.of(0, -2), Vec2.of(1, 2));
 
-		expect(line1.intersection(line2)?.point).objEq(Vec2.of(1, 0));
-		expect(line2.intersection(line1)?.point).objEq(Vec2.of(1, 0));
+		expect(line1.intersection(line2)?.point).objEq(Vec2.of(0.5, 0));
+		expect(line2.intersection(line1)?.point).objEq(Vec2.of(0.5, 0));
 	});
 
 	it('line from (10, 10) to (-100, 10) should intersect with the y-axis at t = 10', () => {
@@ -81,14 +79,14 @@ describe('Line2', () => {
 		expect(line.closestPointTo(Vec2.zero)).objEq(Vec2.of(1, 0));
 	});
 
-	it('Closest point from (-1,2) to segment((1,1) -> (2,4)) should be (1,1)', () => {
+	it('Closest point from (-1,-2) to segment((1,1) -> (2,4)) should be (1,1)', () => {
 		const line = new LineSegment2(Vec2.of(1, 1), Vec2.of(2, 4));
-		expect(line.closestPointTo(Vec2.of(-1, 2))).objEq(Vec2.of(1, 1));
+		expect(line.closestPointTo(Vec2.of(-1, -2))).objEq(Vec2.of(1, 1));
 	});
 
-	it('Closest point from (5,2) to segment((1,1) -> (2,4)) should be (2,4)', () => {
+	it('Closest point from (5,8) to segment((1,1) -> (2,4)) should be (2,4)', () => {
 		const line = new LineSegment2(Vec2.of(1, 1), Vec2.of(2, 4));
-		expect(line.closestPointTo(Vec2.of(5, 2))).objEq(Vec2.of(2, 4));
+		expect(line.closestPointTo(Vec2.of(5, 8))).objEq(Vec2.of(2, 4));
 	});
 
 	it('Should translate when translated by a translation matrix', () => {

package/src/math/Mat33.test.ts

@@ -1,9 +1,7 @@
 import Mat33 from './Mat33';
 import { Vec2 } from './Vec2';
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import Vec3 from './Vec3';
 
-loadExpectExtensions();
 
 describe('Mat33 tests', () => {
 	it('equality', () => {

package/src/math/Rect2.test.ts

@@ -1,11 +1,8 @@
 
 import Rect2 from './Rect2';
 import { Vec2 } from './Vec2';
-import loadExpectExtensions from '../testing/loadExpectExtensions';
 import Mat33 from './Mat33';
 
-loadExpectExtensions();
-
 describe('Rect2', () => {
 	it('width, height should always be positive', () => {
 		expect(new Rect2(-1, -2, -3, 4)).objEq(new Rect2(-4, -2, 3, 4));

package/src/math/Vec2.test.ts

@@ -1,8 +1,5 @@
 import { Vec2 } from './Vec2';
 import Vec3 from './Vec3';
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
-
-loadExpectExtensions();
 
 describe('Vec2', () => {
 	it('Magnitude', () => {

package/src/math/Vec3.test.ts

@@ -1,9 +1,6 @@
 
-import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import Vec3 from './Vec3';
 
-loadExpectExtensions();
-
 describe('Vec3', () => {
 	it('.xy should contain the x and y components', () => {
 		const vec = Vec3.of(1, 2, 3);

package/src/math/Vec3.ts

@@ -196,7 +196,7 @@ export default class Vec3 {
 	 * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 2.99); // → false
 	 * ```
 	 */
-	public eq(other: Vec3, fuzz: number): boolean {
+	public eq(other: Vec3, fuzz: number = 1e-10): boolean {
 		for (let i = 0; i < 3; i++) {
 			if (Math.abs(other.at(i) - this.at(i)) > fuzz) {
 				return false;

package/src/testing/beforeEachFile.ts

@@ -0,0 +1,3 @@
+import loadExpectExtensions from './loadExpectExtensions';
+loadExpectExtensions();
+jest.useFakeTimers();

package/src/testing/createEditor.ts

@@ -1,4 +1,11 @@
 import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
 
-export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+/** Creates an editor. Should only be used in test files. */
+export default () => {
+	if (jest === undefined) {
+		throw new Error('Files in the testing/ folder should only be used in tests!');
+	}
+
+	return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+};

package/src/testing/global.d.ts

@@ -0,0 +1,17 @@
+
+
+// Type declarations for custom matchers
+interface CustomMatchers<R = unknown> {
+	objEq(expected: {
+		eq: (other: any, ...args: any)=> boolean;
+	}, ...opts: any): R;
+}
+
+declare namespace jest {
+	interface Expect extends CustomMatchers {}
+	interface Matchers<R> extends CustomMatchers<R> {}
+	interface AsyncAsymmetricMatchers extends CustomMatchers {}
+}
+
+declare interface JestMatchers<T> extends CustomMatchers<T> {
+}

package/src/testing/loadExpectExtensions.ts

@@ -22,19 +22,4 @@ export const loadExpectExtensions = () => {
 	});
 };
 
-// Type declarations for custom matchers
-export interface CustomMatchers<R = unknown> {
-	objEq(expected: {
-		eq: (other: any, ...args: any)=> boolean;
-	}, ...opts: any): R;
-}
-
-declare global {
-	export namespace jest {
-		interface Expect extends CustomMatchers {}
-		interface Matchers<R> extends CustomMatchers<R> {}
-		interface AsyncAsymmetricMatchers extends CustomMatchers {}
-	}
-}
-
 export default loadExpectExtensions;

package/src/toolbar/toolbar.css

@@ -34,7 +34,8 @@
 }
 
 .toolbar-button.disabled {
-	filter: opacity(0.8) saturate(0.1);
+	filter: opacity(0.5) sepia(0.2);
+	cursor: unset;
 }
 
 .toolbar-button, .toolbar-root button {
@@ -75,7 +76,7 @@
 	width: 6em;
 }
 
-.toolbar-button:hover, .toolbar-root button:not(:disabled):hover {
+.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {
 	box-shadow: 0px 2px 4px var(--primary-shadow-color);
 }
 

package/src/tools/Pen.test.ts

@@ -0,0 +1,150 @@
+
+import { Rect2 } from '../lib';
+import { Vec2 } from '../math/Vec2';
+import createEditor from '../testing/createEditor';
+import { InputEvtType } from '../types';
+
+describe('Pen', () => {
+	it('should draw horizontal lines', () => {
+		const editor = createEditor();
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		for (let i = 0; i < 10; i++) {
+			editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(i, 0));
+			jest.advanceTimersByTime(200);
+		}
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(200, 0));
+
+		const elems = editor.image.getElementsIntersectingRegion(new Rect2(0, 10, 10, -10));
+		expect(elems).toHaveLength(1);
+
+		// Account for stroke width
+		const tolerableError = 8;
+		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(0, 0), tolerableError);
+		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(200, 0), tolerableError);
+	});
+
+	it('should draw vertical line', () => {
+		const editor = createEditor();
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		for (let i = 0; i < 10; i++) {
+			editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(0, i * 20));
+			jest.advanceTimersByTime(200);
+		}
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(0, 150));
+
+		const elems = editor.image.getElementsIntersectingRegion(Rect2.unitSquare);
+		expect(elems).toHaveLength(1);
+
+		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(0, 0), 8); // ± 8
+		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(0, 175), 25); // ± 25
+	});
+
+	it('should draw vertical line with slight bend', () => {
+		const editor = createEditor();
+
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(417, 24)); 
+		jest.advanceTimersByTime(245);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 197));
+		jest.advanceTimersByTime(20);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 199));
+		jest.advanceTimersByTime(12);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 201));
+		jest.advanceTimersByTime(40);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 203));
+		jest.advanceTimersByTime(14);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 206));
+		jest.advanceTimersByTime(35);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 208));
+		jest.advanceTimersByTime(16);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 211));
+		jest.advanceTimersByTime(51);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 215));
+		jest.advanceTimersByTime(32);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 218));
+		jest.advanceTimersByTime(30);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 220));
+		jest.advanceTimersByTime(24);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 222));
+		jest.advanceTimersByTime(14);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 224));
+		jest.advanceTimersByTime(32);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 227));
+		jest.advanceTimersByTime(17);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 229));
+		jest.advanceTimersByTime(53);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 234));
+		jest.advanceTimersByTime(34);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 236));
+		jest.advanceTimersByTime(17);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 238));
+		jest.advanceTimersByTime(39);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 240));
+		jest.advanceTimersByTime(10);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 243));
+		jest.advanceTimersByTime(34);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 250));
+		jest.advanceTimersByTime(57);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 252));
+		jest.advanceTimersByTime(8);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(422, 256));
+		jest.advanceTimersByTime(28);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(422, 258));
+		jest.advanceTimersByTime(21);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(421, 262));
+		jest.advanceTimersByTime(34);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 264));
+		jest.advanceTimersByTime(5);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 266));
+		jest.advanceTimersByTime(22);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 268));
+		jest.advanceTimersByTime(22);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 271));
+		jest.advanceTimersByTime(18);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 274));
+		jest.advanceTimersByTime(33);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 277));
+		jest.advanceTimersByTime(16);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 279));
+		jest.advanceTimersByTime(36);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 282));
+		jest.advanceTimersByTime(15);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 284));
+		jest.advanceTimersByTime(48);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 289));
+		jest.advanceTimersByTime(16);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 291));
+		jest.advanceTimersByTime(31);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 295));
+		jest.advanceTimersByTime(23);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 301));
+		jest.advanceTimersByTime(31);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 306));
+		jest.advanceTimersByTime(18);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 308));
+		jest.advanceTimersByTime(20);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 310));
+		jest.advanceTimersByTime(13);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 313));
+		jest.advanceTimersByTime(17);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 317));
+		jest.advanceTimersByTime(33);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 321));
+		jest.advanceTimersByTime(15);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 324));
+		jest.advanceTimersByTime(23);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 326));
+		jest.advanceTimersByTime(14);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 329));
+		jest.advanceTimersByTime(36);
+		editor.sendPenEvent(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));
+
+		const elems = editor.image.getElementsIntersectingRegion(new Rect2(0, 0, 1000, 1000));
+		expect(elems).toHaveLength(1);
+
+		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(420, 24), 8); // ± 8
+		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(420, 340), 25); // ± 25
+	});
+});

package/src/tools/SelectionTool/SelectionTool.ts

@@ -12,6 +12,7 @@ import Viewport from '../../Viewport';
 import BaseTool from '../BaseTool';
 import SVGRenderer from '../../rendering/renderers/SVGRenderer';
 import Selection from './Selection';
+import TextComponent from '../../components/Text';
 
 export const cssPrefix = 'selection-tool-';
 
@@ -272,11 +273,19 @@ export default class SelectionTool extends BaseTool {
 		const sanitize = true;
 		const renderer = new SVGRenderer(exportElem, exportViewport, sanitize);
 
+		const text: string[] = [];
 		for (const elem of selectedElems) {
 			elem.render(renderer);
+
+			if (elem instanceof TextComponent) {
+				text.push(elem.getText());
+			}
 		}
 
 		event.setData('image/svg+xml', exportElem.outerHTML);
+		if (text.length > 0) {
+			event.setData('text/plain', text.join('\n'));
+		}
 		return true;
 	}
 

package/tsconfig.json

@@ -23,10 +23,12 @@
 		"**/node_modules",
 
 		// Files that don't need transpilation
-		"**/*.test.ts",
+		// "**/*.test.ts", <- vscode requires .test.ts files to be transpiled for other settings to apply.
 		"__mocks__/*",
 
 		// Output files
 		"./dist/**"
 	],
+
+	"files": [ "./src/testing/global.d.ts" ]
 }