js-draw 0.1.11 → 0.1.12

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -1,8 +1,8 @@
 import { Bezier } from 'bezier-js';
-import { Vec2 } from '../../geometry/Vec2';
-import Rect2 from '../../geometry/Rect2';
-import { PathCommandType } from '../../geometry/Path';
-import LineSegment2 from '../../geometry/LineSegment2';
+import { Vec2 } from '../../math/Vec2';
+import Rect2 from '../../math/Rect2';
+import { PathCommandType } from '../../math/Path';
+import LineSegment2 from '../../math/LineSegment2';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 export const makeFreehandLineBuilder = (initialPoint, viewport) => {
@@ -24,9 +24,13 @@ export default class FreehandLineBuilder {
         this.startPoint = startPoint;
         this.minFitAllowed = minFitAllowed;
         this.maxFitAllowed = maxFitAllowed;
+        this.isFirstSegment = true;
+        this.pathStartConnector = null;
+        this.mostRecentConnector = null;
         this.currentCurve = null;
         this.lastPoint = this.startPoint;
-        this.segments = [];
+        this.upperSegments = [];
+        this.lowerSegments = [];
         this.buffer = [this.startPoint.pos];
         this.momentum = Vec2.zero;
         this.currentCurve = null;
@@ -41,24 +45,81 @@ export default class FreehandLineBuilder {
             fill: (_a = this.lastPoint.color) !== null && _a !== void 0 ? _a : null,
         };
     }
-    // Get the segments that make up this' path. Can be called after calling build()
-    getPreview() {
-        if (this.currentCurve && this.lastPoint) {
-            const currentPath = this.currentSegmentToPath();
-            return this.segments.concat(currentPath);
+    previewPath() {
+        var _a;
+        let upperPath;
+        let lowerPath;
+        let lowerToUpperCap;
+        let pathStartConnector;
+        if (this.currentCurve) {
+            const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
+            upperPath = this.upperSegments.concat(upperCurve);
+            lowerPath = this.lowerSegments.concat(lowerCurve);
+            lowerToUpperCap = lowerToUpperConnector;
+            pathStartConnector = (_a = this.pathStartConnector) !== null && _a !== void 0 ? _a : 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 {
+            // 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(),
+        };
+    }
+    previewStroke() {
+        const pathPreview = this.previewPath();
+        if (pathPreview) {
+            return new Stroke([pathPreview]);
         }
-        return this.segments;
+        return null;
     }
     preview(renderer) {
-        for (const part of this.getPreview()) {
-            renderer.drawPath(part);
+        const path = this.previewPath();
+        if (path) {
+            renderer.drawPath(path);
         }
     }
     build() {
         if (this.lastPoint) {
             this.finalizeCurrentCurve();
         }
-        return new Stroke(this.segments);
+        return this.previewStroke();
     }
     roundPoint(point) {
         return Viewport.roundPoint(point, this.minFitAllowed);
@@ -67,53 +128,61 @@ export default class FreehandLineBuilder {
         // 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:
+            this.lowerSegments.push({
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint: center.plus(Vec2.of(width, width)),
+                // Bottom of the circle
                 //    |
-                //  ----- ←
+                //  -----
                 //    |
-                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(),
+                //    ↑
+                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)
         this.buffer = [
@@ -121,6 +190,7 @@ export default class FreehandLineBuilder {
         ];
         this.currentCurve = null;
     }
+    // Returns [upper curve, connector, lower curve]
     currentSegmentToPath() {
         if (this.currentCurve == null) {
             throw new Error('Invalid State: currentCurve is null!');
@@ -163,27 +233,28 @@ export default class FreehandLineBuilder {
         if (upperBoundary.intersects(lowerBoundary).length > 0) {
             halfVec = halfVec.times(2);
         }
-        const pathCommands = [
-            {
-                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)),
-            },
-        ];
-        return {
-            startPoint: this.roundPoint(startPt.plus(startVec)),
-            commands: pathCommands,
-            style: this.getRenderingStyle(),
+        // Each starts at startPt ± startVec
+        const lowerCurve = {
+            kind: PathCommandType.QuadraticBezierTo,
+            controlPoint: this.roundPoint(controlPoint.plus(halfVec)),
+            endPoint: this.roundPoint(endPt.plus(endVec)),
+        };
+        // From the end of the upperCurve to the start of the lowerCurve:
+        const upperToLowerConnector = {
+            kind: PathCommandType.LineTo,
+            point: this.roundPoint(startPt.plus(startVec)),
+        };
+        // From the end of lowerCurve to the start of upperCurve:
+        const lowerToUpperConnector = {
+            kind: PathCommandType.LineTo,
+            point: this.roundPoint(endPt.minus(endVec))
+        };
+        const upperCurve = {
+            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
     computeExitingVec() {
@@ -205,7 +276,7 @@ export default class FreehandLineBuilder {
             }
             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.
             // This allows us to create a circle/dot at the start of the stroke.

package/dist/src/components/builders/LineBuilder.d.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 AbstractComponent from '../AbstractComponent';

package/dist/src/components/builders/LineBuilder.js

@@ -1,4 +1,4 @@
-import { PathCommandType } from '../../geometry/Path';
+import { PathCommandType } from '../../math/Path';
 import Stroke from '../Stroke';
 export const makeLineBuilder = (initialPoint, _viewport) => {
     return new LineBuilder(initialPoint);

package/dist/src/components/builders/RectangleBuilder.d.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/dist/src/components/builders/RectangleBuilder.js

@@ -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 Stroke from '../Stroke';
 export const makeFilledRectangleBuilder = (initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, true, viewport);

package/dist/src/components/builders/types.d.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/dist/src/localization.d.ts

@@ -4,6 +4,7 @@ import { TextRendererLocalization } from './rendering/localization';
 import { ToolbarLocalization } from './toolbar/localization';
 import { 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;

package/dist/src/localization.js

@@ -3,4 +3,8 @@ import { defaultComponentLocalization } from './components/localization';
 import { defaultTextRendererLocalization } from './rendering/localization';
 import { defaultToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization } from './tools/localization';
-export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), defaultTextRendererLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });
+export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultToolbarLocalization), defaultToolLocalization), 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) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });

package/dist/src/localizations/es.js

@@ -6,7 +6,7 @@ const localization = Object.assign(Object.assign({}, defaultEditorLocalization),
     loading: (percentage) => `Cargando: ${percentage}%...`, imageEditor: 'Editor de dibujos', undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`, redoAnnouncement: (commandDescription) => `${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', pickColorFronScreen: 'Selecciona un color de la pantalla', dropdownShown(toolName) {
+    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) {
         return `Menú por ${toolName} es visible`;
     }, dropdownHidden: function (toolName) {
         return `Menú por ${toolName} fue ocultado`;

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

@@ -45,6 +45,7 @@ export default class Path {
     get geometry(): Array<LineSegment2 | Bezier>;
     static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2;
     intersection(line: LineSegment2): IntersectionResult[];
+    mapPoints(mapping: (point: Point2) => Point2): Path;
     transformedBy(affineTransfm: Mat33): Path;
     union(other: Path | null): Path;
     static fromRect(rect: Rect2, lineWidth?: number | null): Path;
@@ -52,7 +53,7 @@ export default class Path {
     toRenderable(fill: RenderingStyle): RenderablePathSpec;
     toString(): string;
     serialize(): string;
-    static toString(startPoint: Point2, parts: PathCommand[]): string;
+    static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands?: boolean): string;
     static fromString(pathString: string): Path;
     static empty: Path;
 }

package/dist/src/{geometry → math}/Path.js

@@ -1,4 +1,5 @@
 import { Bezier } from 'bezier-js';
+import { toRoundedString, toStringOfSamePrecision } from './rounding';
 import LineSegment2 from './LineSegment2';
 import Rect2 from './Rect2';
 import { Vec2 } from './Vec2';
@@ -109,8 +110,8 @@ export default class Path {
         }
         return result;
     }
-    transformedBy(affineTransfm) {
-        const startPoint = affineTransfm.transformVec2(this.startPoint);
+    mapPoints(mapping) {
+        const startPoint = mapping(this.startPoint);
         const newParts = [];
         let exhaustivenessCheck;
         for (const part of this.parts) {
@@ -119,22 +120,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:
@@ -144,6 +145,9 @@ export default class Path {
         }
         return new Path(startPoint, newParts);
     }
+    transformedBy(affineTransfm) {
+        return this.mapPoints(point => affineTransfm.transformVec2(point));
+    }
     // Creates a new path by joining [other] to the end of this path
     union(other) {
         if (!other) {
@@ -201,58 +205,61 @@ export default class Path {
         };
     }
     toString() {
-        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);
     }
     serialize() {
         return this.toString();
     }
-    static toString(startPoint, parts) {
+    // [onlyAbsCommands]: True if we should avoid converting absolute coordinates to relative offsets -- such
+    //                    conversions can lead to smaller output strings, but also take time.
+    static toString(startPoint, parts, onlyAbsCommands = true) {
         const result = [];
-        const toRoundedString = (num) => {
-            // 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;
-            }
-            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;
+        let prevPoint;
+        const addCommand = (command, ...points) => {
+            const absoluteCommandParts = [];
+            const relativeCommandParts = [];
+            const makeAbsCommand = !prevPoint || onlyAbsCommands;
+            const roundedPrevX = prevPoint ? toRoundedString(prevPoint.x) : '';
+            const roundedPrevY = prevPoint ? toRoundedString(prevPoint.y) : '';
+            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}`);
+                    }
                 }
-                // parseInt(...).toString() removes leading zeroes. Add them back.
-                while (newPostDecimal.length < origPostDecimalString.length) {
-                    newPostDecimal = carry.toString(10) + newPostDecimal;
-                    carry = 0;
+                else {
+                    const xComponent = toRoundedString(point.x);
+                    const yComponent = toRoundedString(point.y);
+                    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+$/, '.');
-            // Remove trailing period
-            return text.replace(/[.]$/, '');
-        };
-        const addCommand = (command, ...points) => {
-            const parts = [];
-            for (const point of points) {
-                const xComponent = toRoundedString(point.x);
-                const yComponent = toRoundedString(point.y);
-                parts.push(`${xComponent},${yComponent}`);
+            let commandString;
+            if (makeAbsCommand) {
+                commandString = `${command}${absoluteCommandParts.join(' ')}`;
+            }
+            else {
+                commandString = `${command.toLowerCase()}${relativeCommandParts.join(' ')}`;
+            }
+            // Don't add no-ops.
+            if (commandString === 'l0,0') {
+                return;
+            }
+            result.push(commandString);
+            if (points.length > 0) {
+                prevPoint = points[points.length - 1];
             }
-            result.push(`${command}${parts.join(' ')}`);
         };
         addCommand('M', startPoint);
         let exhaustivenessCheck;

package/dist/src/{geometry → math}/Vec3.d.ts

@@ -23,7 +23,7 @@ export default class Vec3 {
     extend(distance: number, direction: Vec3): Vec3;
     lerp(target: Vec3, fractionTo: number): Vec3;
     zip(other: Vec3, zip: (componentInThis: number, componentInOther: number) => number): Vec3;
-    map(fn: (component: number) => number): Vec3;
+    map(fn: (component: number, index: number) => number): Vec3;
     asArray(): number[];
     eq(other: Vec3, fuzz: number): boolean;
     toString(): string;

package/dist/src/{geometry → math}/Vec3.js

@@ -86,7 +86,7 @@ export default class Vec3 {
     }
     // Returns a vector with each component acted on by [fn]
     map(fn) {
-        return Vec3.of(fn(this.x), fn(this.y), fn(this.z));
+        return Vec3.of(fn(this.x, 0), fn(this.y, 1), fn(this.z, 2));
     }
     asArray() {
         return [this.x, this.y, this.z];

package/dist/src/math/rounding.d.ts

@@ -0,0 +1,3 @@
+export declare const toRoundedString: (num: number) => string;
+export declare const getLenAfterDecimal: (numberAsString: string) => number;
+export declare const toStringOfSamePrecision: (num: number, ...references: string[]) => string;