js-draw 0.1.11 → 0.1.12

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/es.ts

@@ -38,7 +38,8 @@ const localization: EditorLocalization = {
 	resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado',
 	deleteSelection: 'Borra la selección',
 	duplicateSelection: 'Duplica la selección',
-	pickColorFronScreen: 'Selecciona un color de la pantalla',
+	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`;
 	},

package/src/{geometry → math}/Path.toString.test.ts

@@ -15,7 +15,7 @@ describe('Path.toString', () => {
 				point: Vec2.of(0.3, 0.4),
 			},
 		]);
-		expect(path.toString()).toBe('M0.1,0.2L0.3,0.4');
+		expect(path.toString()).toBe('M.1,.2L.3,.4');
 	});
 
 	it('should fix rounding errors', () => {
@@ -30,7 +30,8 @@ describe('Path.toString', () => {
 				point: Vec2.of(184.00482359999998, 1)
 			}
 		]);
-		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4L184.0048236,1');
+
+		expect(path.toString()).toBe('M.1,.2Q9999,-11 .0003,1.4L184.0048236,1');
 	});
 
 	it('should not remove trailing zeroes before decimal points', () => {
@@ -40,6 +41,14 @@ describe('Path.toString', () => {
 				point: Vec2.of(30.0001, 40.000000001),
 			},
 		]);
+
 		expect(path.toString()).toBe('M1000,2000000L30.0001,40');
 	});
+
+	it('deserialized path should serialize to the same/similar path, but with rounded components', () => {
+		const path1 = Path.fromString('M100,100 L101,101 Q102,102 90.000000001,89.99999999 Z');
+		expect(path1.toString()).toBe([
+			'M100,100', 'L101,101', 'Q102,102 90,90', 'L100,100'
+		].join(''));
+	});
 });

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

@@ -1,6 +1,7 @@
 import { Bezier } from 'bezier-js';
 import { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle from '../rendering/RenderingStyle';
+import { toRoundedString, toStringOfSamePrecision } from './rounding';
 import LineSegment2 from './LineSegment2';
 import Mat33 from './Mat33';
 import Rect2 from './Rect2';
@@ -170,8 +171,8 @@ export default class Path {
 		return result;
 	}
 
-	public transformedBy(affineTransfm: Mat33): Path {
-		const startPoint = affineTransfm.transformVec2(this.startPoint);
+	public mapPoints(mapping: (point: Point2)=>Point2): Path {
+		const startPoint = mapping(this.startPoint);
 		const newParts: PathCommand[] = [];
 
 		let exhaustivenessCheck: never;
@@ -181,22 +182,22 @@ export default class Path {
 			case PathCommandType.LineTo:
 				newParts.push({
 					kind: part.kind,
-					point: affineTransfm.transformVec2(part.point),
+					point: mapping(part.point),
 				});
 				break;
 			case PathCommandType.CubicBezierTo:
 				newParts.push({
 					kind: part.kind,
-					controlPoint1: affineTransfm.transformVec2(part.controlPoint1),
-					controlPoint2: affineTransfm.transformVec2(part.controlPoint2),
-					endPoint: affineTransfm.transformVec2(part.endPoint),
+					controlPoint1: mapping(part.controlPoint1),
+					controlPoint2: mapping(part.controlPoint2),
+					endPoint: mapping(part.endPoint),
 				});
 				break;
 			case PathCommandType.QuadraticBezierTo:
 				newParts.push({
 					kind: part.kind,
-					controlPoint: affineTransfm.transformVec2(part.controlPoint),
-					endPoint: affineTransfm.transformVec2(part.endPoint),
+					controlPoint: mapping(part.controlPoint),
+					endPoint: mapping(part.endPoint),
 				});
 				break;
 			default:
@@ -208,6 +209,10 @@ export default class Path {
 		return new Path(startPoint, newParts);
 	}
 
+	public transformedBy(affineTransfm: Mat33): Path {
+		return this.mapPoints(point => affineTransfm.transformVec2(point));
+	}
+
 	// Creates a new path by joining [other] to the end of this path
 	public union(other: Path|null): Path {
 		if (!other) {
@@ -280,71 +285,69 @@ export default class Path {
 	}
 
 	public toString(): string {
-		return Path.toString(this.startPoint, this.parts);
+		// Hueristic: Try to determine whether converting absolute to relative commands is worth it.
+		//            If we're near (0, 0), it probably isn't worth it and if bounding boxes are large,
+		//            it also probably isn't worth it.
+		const makeRelativeCommands =
+			Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.size.x) < 2
+			&& Math.abs(this.bbox.topLeft.y) > 10 && Math.abs(this.bbox.size.y) < 2;
+
+		return Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
 	}
 
 	public serialize(): string {
 		return this.toString();
 	}
 
-	public static toString(startPoint: Point2, parts: PathCommand[]): string {
+	// [onlyAbsCommands]: True if we should avoid converting absolute coordinates to relative offsets -- such
+	//                    conversions can lead to smaller output strings, but also take time.
+	public static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands: boolean = true): string {
 		const result: string[] = [];
 
-		const toRoundedString = (num: number): string => {
-			// Try to remove rounding errors. If the number ends in at least three/four zeroes
-			// (or nines) just one or two digits, it's probably a rounding error.
-			const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d$/;
-			const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,}\d)$/;
-
-			let text = num.toString();
-			if (text.indexOf('.') === -1) {
-				return text;
-			}
+		let prevPoint: Point2|undefined;
+		const addCommand = (command: string, ...points: Point2[]) => {
+			const absoluteCommandParts: string[] = [];
+			const relativeCommandParts: string[] = [];
+			const makeAbsCommand = !prevPoint || onlyAbsCommands;
+			const roundedPrevX = prevPoint ? toRoundedString(prevPoint.x) : '';
+			const roundedPrevY = prevPoint ? toRoundedString(prevPoint.y) : '';
 
-			const roundingDownMatch = hasRoundingDownExp.exec(text);
-			if (roundingDownMatch) {
-				const negativeSign = roundingDownMatch[1];
-				const lastDigit = parseInt(text.charAt(text.length - 1), 10);
-				const postDecimal = parseInt(roundingDownMatch[3], 10);
-				const preDecimal = parseInt(roundingDownMatch[2], 10);
-
-				const origPostDecimalString = roundingDownMatch[3];
-
-				let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
-				let carry = 0;
-				if (newPostDecimal.length > postDecimal.toString().length) {
-					// Left-shift
-					newPostDecimal = newPostDecimal.substring(1);
-					carry = 1;
-				}
+			for (const point of points) {
+				// Relative commands are often shorter as strings than absolute commands.
+				if (!makeAbsCommand) {
+					const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint!.x, roundedPrevX, roundedPrevY);
+					const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint!.y, roundedPrevX, roundedPrevY);
+
+					// No need for an additional separator if it starts with a '-'
+					if (yComponentRelative.charAt(0) === '-') {
+						relativeCommandParts.push(`${xComponentRelative}${yComponentRelative}`);
+					} else {
+						relativeCommandParts.push(`${xComponentRelative},${yComponentRelative}`);
+					}
+				} else {
+					const xComponent = toRoundedString(point.x);
+					const yComponent = toRoundedString(point.y);
 
-				// parseInt(...).toString() removes leading zeroes. Add them back.
-				while (newPostDecimal.length < origPostDecimalString.length) {
-					newPostDecimal = carry.toString(10) + newPostDecimal;
-					carry = 0;
+					absoluteCommandParts.push(`${xComponent},${yComponent}`);
 				}
-
-				text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
 			}
 
-			text = text.replace(fixRoundingUpExp, '$1');
-
-			// Remove trailing zeroes
-			text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
-			text = text.replace(/[.]0+$/, '.');
+			let commandString;
+			if (makeAbsCommand) {
+				commandString = `${command}${absoluteCommandParts.join(' ')}`;
+			} else {
+				commandString = `${command.toLowerCase()}${relativeCommandParts.join(' ')}`;
+			}
 
-			// Remove trailing period
-			return text.replace(/[.]$/, '');
-		};
+			// Don't add no-ops.
+			if (commandString === 'l0,0') {
+				return;
+			}
+			result.push(commandString);
 
-		const addCommand = (command: string, ...points: Point2[]) => {
-			const parts: string[] = [];
-			for (const point of points) {
-				const xComponent = toRoundedString(point.x);
-				const yComponent = toRoundedString(point.y);
-				parts.push(`${xComponent},${yComponent}`);
+			if (points.length > 0) {
+				prevPoint = points[points.length - 1];
 			}
-			result.push(`${command}${parts.join(' ')}`);
 		};
 
 		addCommand('M', startPoint);