js-draw 0.1.11 → 0.2.0

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/components/lib.d.ts

@@ -0,0 +1,4 @@
+import AbstractComponent from './AbstractComponent';
+import Stroke from './Stroke';
+import Text from './Text';
+export { AbstractComponent, Stroke, Text, };

package/dist/src/components/lib.js

@@ -0,0 +1,4 @@
+import AbstractComponent from './AbstractComponent';
+import Stroke from './Stroke';
+import Text from './Text';
+export { AbstractComponent, Stroke, Text, };

package/dist/src/lib.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The main entrypoint for the NPM package. Everything exported by this file
+ * is available through the `js-draw` package.
+ *
+ * @example
+ * ```
+ * import { Editor, Vec3, Mat33 } from 'js-draw';
+ * ```
+ *
+ * @see
+ * {@link Editor!}
+ *
+ * @packageDocumentation
+ */
+import Editor from './Editor';
+export { EditorEventType } from './types';
+export { default as getLocalizationTable } from './localizations/getLocalizationTable';
+export * from './localization';
+export { default as Color4 } from './Color4';
+export * from './math/lib';
+export * from './components/lib';
+export * from './commands/lib';
+export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
+export { Editor };
+export default Editor;

package/dist/src/lib.js

@@ -0,0 +1,25 @@
+/**
+ * The main entrypoint for the NPM package. Everything exported by this file
+ * is available through the `js-draw` package.
+ *
+ * @example
+ * ```
+ * import { Editor, Vec3, Mat33 } from 'js-draw';
+ * ```
+ *
+ * @see
+ * {@link Editor!}
+ *
+ * @packageDocumentation
+ */
+import Editor from './Editor';
+export { EditorEventType } from './types';
+export { default as getLocalizationTable } from './localizations/getLocalizationTable';
+export * from './localization';
+export { default as Color4 } from './Color4';
+export * from './math/lib';
+export * from './components/lib';
+export * from './commands/lib';
+export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
+export { Editor };
+export default Editor;

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/math/Mat33.d.ts

@@ -0,0 +1,78 @@
+import { Point2, Vec2 } from './Vec2';
+import Vec3 from './Vec3';
+/**
+ * Represents a three dimensional linear transformation or
+ * a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
+ * **and** translates while a linear transformation just scales/rotates/shears).
+ */
+export default class Mat33 {
+    readonly a1: number;
+    readonly a2: number;
+    readonly a3: number;
+    readonly b1: number;
+    readonly b2: number;
+    readonly b3: number;
+    readonly c1: number;
+    readonly c2: number;
+    readonly c3: number;
+    private readonly rows;
+    /**
+     * Creates a matrix from inputs in the form,
+     * ```
+     * ⎡ a1 a2 a3 ⎤
+     * ⎢ b1 b2 b3 ⎥
+     * ⎣ c1 c2 c3 ⎦
+     * ```
+     */
+    constructor(a1: number, a2: number, a3: number, b1: number, b2: number, b3: number, c1: number, c2: number, c3: number);
+    /**
+     * Creates a matrix from the given rows:
+     * ```
+     *  ⎡ r1.x r1.y r1.z ⎤
+     *  ⎢ r2.x r2.y r2.z ⎥
+     *  ⎣ r3.x r3.y r3.z ⎦
+     * ```
+     */
+    static ofRows(r1: Vec3, r2: Vec3, r3: Vec3): Mat33;
+    static identity: Mat33;
+    /**
+     * Either returns the inverse of this, or, if this matrix is singular/uninvertable,
+     * returns Mat33.identity.
+     *
+     * This may cache the computed inverse and return the cached version instead of recomputing
+     * it.
+     */
+    inverse(): Mat33;
+    invertable(): boolean;
+    private cachedInverse;
+    private computeInverse;
+    transposed(): Mat33;
+    rightMul(other: Mat33): Mat33;
+    /**
+     * Applies this as an affine transformation to the given vector.
+     * Returns a transformed version of `other`.
+     */
+    transformVec2(other: Vec2): Vec2;
+    /**
+     * Applies this as a linear transformation to the given vector (doesn't translate).
+     * This is the standard way of transforming vectors in ℝ³.
+     */
+    transformVec3(other: Vec3): Vec3;
+    /** Returns true iff this = other ± fuzz */
+    eq(other: Mat33, fuzz?: number): boolean;
+    toString(): string;
+    /**
+     * ```
+     * result[0] = top left element
+     * result[1] = element at row zero, column 1
+     * ...
+     * ```
+     */
+    toArray(): number[];
+    /** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
+    static translation(amount: Vec2): Mat33;
+    static zRotation(radians: number, center?: Point2): Mat33;
+    static scaling2D(amount: number | Vec2, center?: Point2): Mat33;
+    /** Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33. */
+    static fromCSSMatrix(cssString: string): Mat33;
+}

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

@@ -1,12 +1,19 @@
 import { Vec2 } from './Vec2';
 import Vec3 from './Vec3';
-// Represents a three dimensional linear transformation or
-// a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
-// **and** translates while a linear transformation just scales/rotates/shears).
+/**
+ * Represents a three dimensional linear transformation or
+ * a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
+ * **and** translates while a linear transformation just scales/rotates/shears).
+ */
 export default class Mat33 {
-    // ⎡ a1 a2 a3 ⎤
-    // ⎢ b1 b2 b3 ⎥
-    // ⎣ c1 c2 c3 ⎦
+    /**
+     * Creates a matrix from inputs in the form,
+     * ```
+     * ⎡ a1 a2 a3 ⎤
+     * ⎢ b1 b2 b3 ⎥
+     * ⎣ c1 c2 c3 ⎦
+     * ```
+     */
     constructor(a1, a2, a3, b1, b2, b3, c1, c2, c3) {
         this.a1 = a1;
         this.a2 = a2;
@@ -24,11 +31,24 @@ export default class Mat33 {
             Vec3.of(c1, c2, c3),
         ];
     }
+    /**
+     * Creates a matrix from the given rows:
+     * ```
+     *  ⎡ r1.x r1.y r1.z ⎤
+     *  ⎢ r2.x r2.y r2.z ⎥
+     *  ⎣ r3.x r3.y r3.z ⎦
+     * ```
+     */
     static ofRows(r1, r2, r3) {
         return new Mat33(r1.x, r1.y, r1.z, r2.x, r2.y, r2.z, r3.x, r3.y, r3.z);
     }
-    // Either returns the inverse of this, or, if this matrix is singular/uninvertable,
-    // returns Mat33.identity.
+    /**
+     * Either returns the inverse of this, or, if this matrix is singular/uninvertable,
+     * returns Mat33.identity.
+     *
+     * This may cache the computed inverse and return the cached version instead of recomputing
+     * it.
+     */
     inverse() {
         var _a;
         return (_a = this.computeInverse()) !== null && _a !== void 0 ? _a : Mat33.identity;
@@ -109,8 +129,10 @@ export default class Mat33 {
         };
         return new Mat33(at(0, 0), at(0, 1), at(0, 2), at(1, 0), at(1, 1), at(1, 2), at(2, 0), at(2, 1), at(2, 2));
     }
-    // Applies this as an affine transformation to the given vector.
-    // Returns a transformed version of [other].
+    /**
+     * Applies this as an affine transformation to the given vector.
+     * Returns a transformed version of `other`.
+     */
     transformVec2(other) {
         // When transforming a Vec2, we want to use the z transformation
         // components of this for translation:
@@ -124,12 +146,14 @@ export default class Mat33 {
         // Drop the z=1 to allow magnitude to work as expected
         return Vec2.of(intermediate.x, intermediate.y);
     }
-    // Applies this as a linear transformation to the given vector (doesn't translate).
-    // This is the standard way of transforming vectors in ℝ³.
+    /**
+     * Applies this as a linear transformation to the given vector (doesn't translate).
+     * This is the standard way of transforming vectors in ℝ³.
+     */
     transformVec3(other) {
         return Vec3.of(this.rows[0].dot(other), this.rows[1].dot(other), this.rows[2].dot(other));
     }
-    // Returns true iff this = other ± fuzz
+    /** Returns true iff this = other ± fuzz */
     eq(other, fuzz = 0) {
         for (let i = 0; i < 3; i++) {
             if (!this.rows[i].eq(other.rows[i], fuzz)) {
@@ -143,11 +167,15 @@ export default class Mat33 {
 ⎡ ${this.a1},\t ${this.a2},\t ${this.a3}\t ⎤
 ⎢ ${this.b1},\t ${this.b2},\t ${this.b3}\t ⎥
 ⎣ ${this.c1},\t ${this.c2},\t ${this.c3}\t ⎦
-		`.trimRight();
-    }
-    // result[0] = top left element
-    // result[1] = element at row zero, column 1
-    // ...
+		`.trimEnd().trimStart();
+    }
+    /**
+     * ```
+     * result[0] = top left element
+     * result[1] = element at row zero, column 1
+     * ...
+     * ```
+     */
     toArray() {
         return [
             this.a1, this.a2, this.a3,
@@ -155,7 +183,7 @@ export default class Mat33 {
             this.c1, this.c2, this.c3,
         ];
     }
-    // Constructs a 3x3 translation matrix (for translating Vec2s)
+    /** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
     static translation(amount) {
         // When transforming Vec2s by a 3x3 matrix, we give the input
         // Vec2s z = 1. As such,
@@ -186,7 +214,7 @@ export default class Mat33 {
         // Translate such that [center] goes to (0, 0)
         return result.rightMul(Mat33.translation(center.times(-1)));
     }
-    // Converts a CSS-form matrix(a, b, c, d, e, f) to a Mat33.
+    /** Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33. */
     static fromCSSMatrix(cssString) {
         if (cssString === '' || cssString === 'none') {
             return Mat33.identity;

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;
 }