js-draw 0.1.9 → 0.1.12

package/src/components/UnknownSVGObject.ts

@@ -1,6 +1,6 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';

package/src/components/builders/ArrowBuilder.ts

@@ -1,5 +1,5 @@
-import { PathCommandType } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
+import { PathCommandType } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/src/components/builders/FreehandLineBuilder.ts

@@ -1,9 +1,9 @@
 import { Bezier } from 'bezier-js';
 import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
-import { Point2, Vec2 } from '../../geometry/Vec2';
-import Rect2 from '../../geometry/Rect2';
-import { PathCommand, PathCommandType } from '../../geometry/Path';
-import LineSegment2 from '../../geometry/LineSegment2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/Rect2';
+import { LinePathCommand, PathCommandType, QuadraticBezierPathCommand } from '../../math/Path';
+import LineSegment2 from '../../math/LineSegment2';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 import { StrokeDataPoint } from '../../types';
@@ -22,9 +22,35 @@ export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: S
 	);
 };
 
+type CurrentSegmentToPathResult = {
+	upperCurve: QuadraticBezierPathCommand,
+	lowerToUpperConnector: LinePathCommand,
+	upperToLowerConnector: LinePathCommand,
+	lowerCurve: QuadraticBezierPathCommand,
+};
+
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 export default class FreehandLineBuilder implements ComponentBuilder {
-	private segments: RenderablePathSpec[];
+	private isFirstSegment: boolean = true;
+	private pathStartConnector: LinePathCommand|null = null;
+	private mostRecentConnector: LinePathCommand|null = null;
+
+	//    Beginning of the list of lower parts
+	//        ↓
+	//        /---pathStartConnector---/ ← Beginning of the list of upper parts
+	//    ___/                      __/
+	//   /                         /
+	//  /--Most recent connector--/ ← most recent upper part goes here
+	//  ↑    
+	//  most recent lower part goes here
+	//
+	// The upperSegments form a path that goes in reverse from the most recent edge to the
+	// least recent edge.
+	// The lowerSegments form a path that goes from the least recent edge to the most
+	// recent edge.
+	private upperSegments: QuadraticBezierPathCommand[];
+	private lowerSegments: QuadraticBezierPathCommand[];
+
 	private buffer: Point2[];
 	private lastPoint: StrokeDataPoint;
 	private lastExitingVec: Vec2;
@@ -47,7 +73,9 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		private maxFitAllowed: number
 	) {
 		this.lastPoint = this.startPoint;
-		this.segments = [];
+		this.upperSegments = [];
+		this.lowerSegments = [];
+
 		this.buffer = [this.startPoint.pos];
 		this.momentum = Vec2.zero;
 		this.currentCurve = null;
@@ -65,19 +93,82 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		};
 	}
 
-	// Get the segments that make up this' path. Can be called after calling build()
-	private getPreview(): RenderablePathSpec[] {
-		if (this.currentCurve && this.lastPoint) {
-			const currentPath = this.currentSegmentToPath();
-			return this.segments.concat(currentPath);
+	private previewPath(): RenderablePathSpec|null {
+		let upperPath: QuadraticBezierPathCommand[];
+		let lowerPath: QuadraticBezierPathCommand[];
+		let lowerToUpperCap: LinePathCommand;
+		let pathStartConnector: LinePathCommand;
+		if (this.currentCurve) {
+			const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
+			upperPath = this.upperSegments.concat(upperCurve);
+			lowerPath = this.lowerSegments.concat(lowerCurve);
+			lowerToUpperCap = lowerToUpperConnector;
+			pathStartConnector = this.pathStartConnector ?? upperToLowerConnector;
+		} else {
+			if (this.mostRecentConnector === null || this.pathStartConnector === null) {
+				return null;
+			}
+
+			upperPath = this.upperSegments.slice();
+			lowerPath = this.lowerSegments.slice();
+			lowerToUpperCap = this.mostRecentConnector;
+			pathStartConnector = this.pathStartConnector;
 		}
+		const startPoint = lowerPath[lowerPath.length - 1].endPoint;
 
-		return this.segments;
+
+		return {
+			// Start at the end of the lower curve:
+			//    Start point
+			//     ↓     
+			//  __/  __/ ← Most recent points on this end
+			// /___ /
+			//  ↑
+			//  Oldest points
+			startPoint,
+
+			commands: [
+				// Move to the most recent point on the upperPath:
+				//     ----→•     
+				//  __/  __/
+				// /___ /
+				lowerToUpperCap,
+
+				// Move to the beginning of the upperPath:
+				//  __/  __/
+				// /___ /
+				//     • ←-
+				...upperPath.reverse(),
+
+				// Move to the beginning of the lowerPath:
+				//  __/  __/
+				// /___ /
+				// •
+				pathStartConnector,
+
+				// Move back to the start point:
+				//     •
+				//  __/  __/
+				// /___ /
+				...lowerPath,
+			],
+			style: this.getRenderingStyle(),
+		};
+	}
+
+	private previewStroke(): Stroke|null {
+		const pathPreview = this.previewPath();
+
+		if (pathPreview) {
+			return new Stroke([ pathPreview ]);
+		}
+		return null;
 	}
 
 	public preview(renderer: AbstractRenderer) {
-		for (const part of this.getPreview()) {
-			renderer.drawPath(part);
+		const path = this.previewPath();
+		if (path) {
+			renderer.drawPath(path);
 		}
 	}
 
@@ -85,9 +176,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		if (this.lastPoint) {
 			this.finalizeCurrentCurve();
 		}
-		return new Stroke(
-			this.segments,
-		);
+		return this.previewStroke()!;
 	}
 
 	private roundPoint(point: Point2): Point2 {
@@ -98,59 +187,77 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		// Case where no points have been added
 		if (!this.currentCurve) {
 			// Don't create a circle around the initial point if the stroke has more than one point.
-			if (this.segments.length > 0) {
+			if (!this.isFirstSegment) {
 				return;
 			}
 
-			const width = Viewport.roundPoint(this.startPoint.width / 3, this.minFitAllowed);
+			const width = Viewport.roundPoint(this.startPoint.width / 3.5, this.minFitAllowed);
 			const center = this.roundPoint(this.startPoint.pos);
 
+			// Start on the right, cycle clockwise:
+			//    |
+			//  ----- ←
+			//    |
+			const startPoint = this.startPoint.pos.plus(Vec2.of(width, 0));
+
 			// Draw a circle-ish shape around the start point
-			this.segments.push({
-				// Start on the right, cycle clockwise:
-				//    |
-				//  ----- ←
-				//    |
-				startPoint: this.startPoint.pos.plus(Vec2.of(width, 0)),
-				commands: [
-					{
-						kind: PathCommandType.QuadraticBezierTo,
-						controlPoint: center.plus(Vec2.of(width, width)),
-
-						// Bottom of the circle
-						//    |
-						//  -----
-						//    |
-						//    ↑
-						endPoint: center.plus(Vec2.of(0, width)),
-					},
-					{
-						kind: PathCommandType.QuadraticBezierTo,
-						controlPoint: center.plus(Vec2.of(-width, width)),
-						endPoint: center.plus(Vec2.of(-width, 0)),
-					},
-					{
-						kind: PathCommandType.QuadraticBezierTo,
-						controlPoint: center.plus(Vec2.of(-width, -width)),
-						endPoint: center.plus(Vec2.of(0, -width)),
-					},
-					{
-						kind: PathCommandType.QuadraticBezierTo,
-						controlPoint: center.plus(Vec2.of(width, -width)),
-						endPoint: center.plus(Vec2.of(width, 0)),
-					},
-				],
-				style: this.getRenderingStyle(),
-			});
+			this.lowerSegments.push(
+				{
+					kind: PathCommandType.QuadraticBezierTo,
+					controlPoint: center.plus(Vec2.of(width, width)),
+
+					// Bottom of the circle
+					//    |
+					//  -----
+					//    |
+					//    ↑
+					endPoint: center.plus(Vec2.of(0, width)),
+				},
+				{
+					kind: PathCommandType.QuadraticBezierTo,
+					controlPoint: center.plus(Vec2.of(-width, width)),
+					endPoint: center.plus(Vec2.of(-width, 0)),
+				},
+				{
+					kind: PathCommandType.QuadraticBezierTo,
+					controlPoint: center.plus(Vec2.of(-width, -width)),
+					endPoint: center.plus(Vec2.of(0, -width)),
+				},
+				{
+					kind: PathCommandType.QuadraticBezierTo,
+					controlPoint: center.plus(Vec2.of(width, -width)),
+					endPoint: center.plus(Vec2.of(width, 0)),
+				}
+			);
+			this.pathStartConnector = {
+				kind: PathCommandType.LineTo,
+				point: startPoint,
+			};
+			this.mostRecentConnector = this.pathStartConnector;
+
 			return;
 		}
 
-		this.segments.push(this.currentSegmentToPath());
+		const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
+
+		if (this.isFirstSegment) {
+			// We draw the upper path (reversed), then the lower path, so we need the
+			// upperToLowerConnector to join the two paths.
+			this.pathStartConnector = upperToLowerConnector;
+			this.isFirstSegment = false;
+		}
+		// With the most recent connector, we're joining the end of the lowerPath to the most recent
+		// upperPath:
+		this.mostRecentConnector = lowerToUpperConnector;
+
+		this.upperSegments.push(upperCurve);
+		this.lowerSegments.push(lowerCurve);
+
 		const lastPoint = this.buffer[this.buffer.length - 1];
 		this.lastExitingVec = Vec2.ofXY(
 			this.currentCurve.points[2]
 		).minus(Vec2.ofXY(this.currentCurve.points[1]));
-		console.assert(this.lastExitingVec.magnitude() !== 0);
+		console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
 
 		// Use the last two points to start a new curve (the last point isn't used
 		// in the current curve and we want connected curves to share end points)
@@ -160,7 +267,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		this.currentCurve = null;
 	}
 
-	private currentSegmentToPath(): RenderablePathSpec {
+	// Returns [upper curve, connector, lower curve]
+	private currentSegmentToPath(): CurrentSegmentToPathResult {
 		if (this.currentCurve == null) {
 			throw new Error('Invalid State: currentCurve is null!');
 		}
@@ -217,31 +325,33 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			halfVec = halfVec.times(2);
 		}
 
+		// Each starts at startPt ± startVec
 
-		const pathCommands: PathCommand[] = [
-			{
-				kind: PathCommandType.QuadraticBezierTo,
-				controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
-				endPoint: this.roundPoint(endPt.plus(endVec)),
-			},
+		const lowerCurve: QuadraticBezierPathCommand = {
+			kind: PathCommandType.QuadraticBezierTo,
+			controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
+			endPoint: this.roundPoint(endPt.plus(endVec)),
+		};
 
-			{
-				kind: PathCommandType.LineTo,
-				point: this.roundPoint(endPt.minus(endVec)),
-			},
-
-			{
-				kind: PathCommandType.QuadraticBezierTo,
-				controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
-				endPoint: this.roundPoint(startPt.minus(startVec)),
-			},
-		];
+		// From the end of the upperCurve to the start of the lowerCurve:
+		const upperToLowerConnector: LinePathCommand = {
+			kind: PathCommandType.LineTo,
+			point: this.roundPoint(startPt.plus(startVec)),
+		};
 
-		return {
-			startPoint: this.roundPoint(startPt.plus(startVec)),
-			commands: pathCommands,
-			style: this.getRenderingStyle(),
+		// From the end of lowerCurve to the start of upperCurve:
+		const lowerToUpperConnector: LinePathCommand = {
+			kind: PathCommandType.LineTo,
+			point: this.roundPoint(endPt.minus(endVec))
+		};
+
+		const upperCurve: QuadraticBezierPathCommand = {
+			kind: PathCommandType.QuadraticBezierTo,
+			controlPoint: this.roundPoint(controlPoint.minus(halfVec)),
+			endPoint: this.roundPoint(startPt.minus(startVec)),
 		};
+
+		return { upperCurve, upperToLowerConnector, lowerToUpperConnector, lowerCurve };
 	}
 
 	// Compute the direction of the velocity at the end of this.buffer
@@ -264,7 +374,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			
 			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
 			const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
-				&& this.segments.length === 0;
+				&& this.isFirstSegment;
 			
 			// Snap to the starting point if the stroke is contained within a small ball centered
 			// at the starting point.

package/src/components/builders/LineBuilder.ts

@@ -1,5 +1,5 @@
-import { PathCommandType } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
+import { PathCommandType } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/src/components/builders/RectangleBuilder.ts

@@ -1,6 +1,6 @@
-import Mat33 from '../../geometry/Mat33';
-import Path from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
+import Mat33 from '../../math/Mat33';
+import Path from '../../math/Path';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/src/components/builders/types.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';

package/src/localization.ts

@@ -6,6 +6,7 @@ import { defaultToolLocalization, ToolLocalization } from './tools/localization'
 
 
 export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
+	accessibilityInputInstructions: string;
 	undoAnnouncement: (actionDescription: string)=> string;
 	redoAnnouncement: (actionDescription: string)=> string;
 	doneLoading: string;
@@ -19,6 +20,11 @@ export const defaultEditorLocalization: EditorLocalization = {
 	...defaultCommandLocalization,
 	...defaultComponentLocalization,
 	...defaultTextRendererLocalization,
+	accessibilityInputInstructions: [
+		'Press "t" to read the contents of the viewport as text.',
+		'Use the arrow keys to move the viewport, click and drag to draw strokes.',
+		'Press "w" to zoom in and "s" to zoom out.',
+	].join(' '),
 	loading: (percentage: number) => `Loading ${percentage}%...`,
 	imageEditor: 'Image Editor',
 	doneLoading: 'Done loading',

package/src/localizations/en.ts

@@ -0,0 +1,8 @@
+import { defaultEditorLocalization, EditorLocalization } from '../localization';
+
+// Default localizations are already in English.
+const localization: EditorLocalization = {
+	...defaultEditorLocalization,
+};
+
+export default localization;

package/src/localizations/es.ts

@@ -0,0 +1,63 @@
+import { defaultEditorLocalization, EditorLocalization } from '../localization';
+
+// A partial Spanish localization.
+const localization: EditorLocalization = {
+	...defaultEditorLocalization,
+
+	// Strings for the main editor interface
+	// (see src/localization.ts)
+	loading: (percentage: number) => `Cargando: ${percentage}%...`,
+	imageEditor: 'Editor de dibujos',
+
+	undoAnnouncement: (commandDescription: string) => `${commandDescription} fue deshecho`,
+	redoAnnouncement: (commandDescription: string) => `${commandDescription} fue rehecho`,
+	undo: 'Deshace',
+	redo: 'Rehace',
+
+	// Strings for the toolbar
+	// (see src/toolbar/localization.ts)
+	pen: 'Lapiz',
+	eraser: 'Borrador',
+	select: 'Selecciona',
+	thicknessLabel: 'Tamaño: ',
+	colorLabel: 'Color: ',
+	doneLoading: 'El cargado terminó',
+	fontLabel: 'Fuente: ',
+	anyDevicePanning: 'Mover la pantalla con todo dispotivo',
+	touchPanning: 'Mover la pantalla con un dedo',
+	touchPanTool: 'Instrumento de mover la pantalla con un dedo',
+	outlinedRectanglePen: 'Rectángulo con nada más que un borde',
+	filledRectanglePen: 'Rectángulo sin borde',
+	linePen: 'Línea',
+	arrowPen: 'Flecha',
+	freehandPen: 'Dibuja sin restricción de forma',
+	selectObjectType: 'Forma de dibuja:',
+	handTool: 'Mover',
+	zoom: 'Zoom',
+	resetView: 'Reiniciar vista',
+	resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado',
+	deleteSelection: 'Borra la selección',
+	duplicateSelection: 'Duplica la selección',
+	pickColorFromScreen: 'Selecciona un color de la pantalla',
+	clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color',
+	dropdownShown(toolName: string): string {
+		return `Menú por ${toolName} es visible`;
+	},
+	dropdownHidden: function (toolName: string): string {
+		return `Menú por ${toolName} fue ocultado`;
+	},
+	colorChangedAnnouncement: function (color: string): string {
+		return `Color fue cambiado a ${color}`;
+	},
+	keyboardPanZoom: 'Mover la pantalla con el teclado',
+	penTool: function (penId: number): string {
+		return `Lapiz ${penId}`;
+	},
+	selectionTool: 'Selecciona',
+	eraserTool: 'Borrador',
+	textTool: 'Texto',
+	enterTextToInsert: 'Entra texto',
+	rerenderAsText: 'Redibuja la pantalla al texto',
+};
+
+export default localization;

package/src/localizations/getLocalizationTable.test.ts

@@ -0,0 +1,27 @@
+
+import { defaultEditorLocalization } from '../localization';
+import en from './en';
+import es from './es';
+import getLocalizationTable from './getLocalizationTable';
+
+describe('getLocalizationTable', () => {
+	it('should return the en localization for es_TEST', () => {
+		expect(getLocalizationTable([ 'es_TEST' ]) === es).toBe(true);
+	});
+
+	it('should return the default localization for unsupported language', () => {
+		expect(getLocalizationTable([ 'test' ]) === defaultEditorLocalization).toBe(true);
+	});
+
+	it('should return the first localization matching a language in the list of user locales', () => {
+		expect(getLocalizationTable([ 'test_TEST1', 'test_TEST2', 'test_TEST3', 'en_TEST', 'notalanguage']) === en).toBe(true);
+	});
+
+	it('should return the default localization for unsupported language', () => {
+		expect(getLocalizationTable([ 'test' ]) === defaultEditorLocalization).toBe(true);
+	});
+
+	it('should return first of user\'s supported languages', () => {
+		expect(getLocalizationTable([ 'es_MX', 'es_ES', 'en_US' ]) === es).toBe(true);
+	});
+});

package/src/localizations/getLocalizationTable.ts

@@ -0,0 +1,53 @@
+
+import { defaultEditorLocalization, EditorLocalization } from '../localization';
+import en from './en';
+import es from './es';
+
+const allLocales: Record<string, EditorLocalization> = {
+	en,
+	es,
+};
+
+// [locale]: A string in the format languageCode_Region or just languageCode. For example, en_US.
+const languageFromLocale = (locale: string) => {
+	const matches = /^(\w+)[_-](\w+)$/.exec(locale);
+	if (!matches) {
+		// If not in languageCode_region format, the locale should be the
+		// languageCode. Return that.
+		return locale;
+	}
+
+	return matches[1];
+};
+
+const getLocalizationTable = (userLocales?: readonly string[]): EditorLocalization => {
+	userLocales ??= navigator.languages;
+
+	let prevLanguage: string|undefined;
+	for (const locale of userLocales) {
+		const language = languageFromLocale(locale);
+
+		// If the specific localization of the language is not available, but
+		// a localization for the language is,
+		if (prevLanguage && language !== prevLanguage) {
+			if (prevLanguage in allLocales) {
+				return allLocales[prevLanguage];
+			}
+		}
+
+		// If the full locale (e.g. en_US) is available,
+		if (locale in allLocales) {
+			return allLocales[locale];
+		}
+
+		prevLanguage = language;
+	}
+
+	if (prevLanguage && prevLanguage in allLocales) {
+		return allLocales[prevLanguage];
+	} else {
+		return defaultEditorLocalization;
+	}
+};
+
+export default getLocalizationTable;

package/src/{geometry → math}/LineSegment2.test.ts

@@ -74,4 +74,19 @@ describe('Line2', () => {
 		expect(line1.intersection(line2)).toBeNull();
 		expect(line2.intersection(line1)).toBeNull();
 	});
+
+	it('Closest point to (0,0) on the line x = 1 should be (1,0)', () => {
+		const line = new LineSegment2(Vec2.of(1, 100), Vec2.of(1, -100));
+		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)', () => {
+		const line = new LineSegment2(Vec2.of(1, 1), Vec2.of(2, 4));
+		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)', () => {
+		const line = new LineSegment2(Vec2.of(1, 1), Vec2.of(2, 4));
+		expect(line.closestPointTo(Vec2.of(5, 2))).objEq(Vec2.of(2, 4));
+	});
 });

package/src/{geometry → math}/LineSegment2.ts

@@ -7,6 +7,7 @@ interface IntersectionResult {
 }
 
 export default class LineSegment2 {
+	// invariant: ||direction|| = 1
 	public readonly direction: Vec2;
 	public readonly length: number;
 	public readonly bbox;
@@ -124,4 +125,23 @@ export default class LineSegment2 {
 			t: resultT,
 		};
 	}
+
+	// Returns the closest point on this to [target]
+	public closestPointTo(target: Point2) {
+		// Distance from P1 along this' direction.
+		const projectedDistFromP1 = target.minus(this.p1).dot(this.direction);
+		const projectedDistFromP2 = this.length - projectedDistFromP1;
+
+		const projection = this.p1.plus(this.direction.times(projectedDistFromP1));
+
+		if (projectedDistFromP1 > 0 && projectedDistFromP1 < this.length) {
+			return projection;
+		}
+
+		if (Math.abs(projectedDistFromP2) < Math.abs(projectedDistFromP1)) {
+			return this.p2;
+		} else {
+			return this.p1;
+		}
+	}
 }