js-draw 1.9.0 → 1.10.0

package/dist/cjs/util/ReactiveValue.js

@@ -34,6 +34,8 @@ const noOpSetUpdateListener = () => {
  *
  * Static methods in the `ReactiveValue` and `MutableReactiveValue` classes are
  * constructors (e.g. `fromImmutable`).
+ *
+ * Avoid extending this class from an external library, as that may not be stable.
  */
 class ReactiveValue {
     /** Creates a `ReactiveValue` with an initial value, `initialValue`. */

package/dist/cjs/util/lib.d.ts

@@ -1 +1,2 @@
 export { default as adjustEditorThemeForContrast } from './adjustEditorThemeForContrast';
+export { ReactiveValue, MutableReactiveValue } from './ReactiveValue';

package/dist/cjs/util/lib.js

@@ -3,6 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.adjustEditorThemeForContrast = void 0;
+exports.MutableReactiveValue = exports.ReactiveValue = exports.adjustEditorThemeForContrast = void 0;
 var adjustEditorThemeForContrast_1 = require("./adjustEditorThemeForContrast");
 Object.defineProperty(exports, "adjustEditorThemeForContrast", { enumerable: true, get: function () { return __importDefault(adjustEditorThemeForContrast_1).default; } });
+var ReactiveValue_1 = require("./ReactiveValue");
+Object.defineProperty(exports, "ReactiveValue", { enumerable: true, get: function () { return ReactiveValue_1.ReactiveValue; } });
+Object.defineProperty(exports, "MutableReactiveValue", { enumerable: true, get: function () { return ReactiveValue_1.MutableReactiveValue; } });

package/dist/cjs/util/waitForImageLoaded.d.ts

@@ -0,0 +1,2 @@
+declare const waitForImageLoad: (image: HTMLImageElement) => Promise<void>;
+export default waitForImageLoad;

package/dist/cjs/util/waitForImageLoaded.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const waitForImageLoad = async (image) => {
+    if (!image.complete) {
+        await new Promise((resolve, reject) => {
+            image.onload = event => resolve(event);
+            image.onerror = event => reject(event);
+            image.onabort = event => reject(event);
+        });
+    }
+};
+exports.default = waitForImageLoad;

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.9.0',
+    number: '1.10.0',
 };

package/dist/mjs/Editor.d.ts

@@ -156,6 +156,38 @@ export declare class Editor {
     readonly toolController: ToolController;
     /**
      * Global event dispatcher/subscriber.
+     *
+     * @example
+     *
+     * ```ts,runnable
+     * import { Editor, EditorEventType, SerializableCommand } from 'js-draw';
+     *
+     * // Create a minimal editor
+     * const editor = new Editor(document.body);
+     * editor.addToolbar();
+     *
+     * // Create a place to show text output
+     * const log = document.createElement('textarea');
+     * document.body.appendChild(log);
+     * log.style.width = '100%';
+     * log.style.height = '200px';
+     *
+     * // Listen for CommandDone events (there's also a CommandUndone)
+     * editor.notifier.on(EditorEventType.CommandDone, event => {
+     *   // Type narrowing for TypeScript -- event will always be of kind CommandDone,
+     *   // but TypeScript doesn't know this.
+     *   if (event.kind !== EditorEventType.CommandDone) return;
+     *
+     *   log.value = `Command done ${event.command.description(editor, editor.localization)}\n`;
+     *
+     *   if (event.command instanceof SerializableCommand) {
+     *     log.value += `serializes to: ${JSON.stringify(event.command.serialize())}`;
+     *   }
+     * });
+     *
+     * // Dispatch an initial command to trigger the event listener for the first time
+     * editor.dispatch(editor.image.setAutoresizeEnabled(true));
+     * ```
      */
     readonly notifier: EditorNotifier;
     private loadingWarning;
@@ -395,6 +427,12 @@ export declare class Editor {
      * @see {@link sendPenEvent} {@link sendTouchEvent}
      */
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
+    /**
+     * Adds all components in `components` such that they are in the center of the screen.
+     * This is a convenience method that creates **and applies** a single command.
+     *
+     * If `selectComponents` is true (the default), the components are selected.
+     */
     addAndCenterComponents(components: AbstractComponent[], selectComponents?: boolean): Promise<void>;
     /**
      * Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
@@ -403,6 +441,9 @@ export declare class Editor {
      *
      * The export resolution is the same as the size of the drawing canvas, unless `outputSize`
      * is given.
+     *
+     * **Example**:
+     * [[include:doc-pages/inline-examples/adding-an-image-and-data-urls.md]]
      */
     toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp', outputSize?: Vec2): string;
     /**

package/dist/mjs/Editor.mjs

@@ -160,19 +160,30 @@ export class Editor {
         this.hideLoadingWarning();
         // Enforce zoom limits.
         this.notifier.on(EditorEventType.ViewportChanged, evt => {
-            if (evt.kind === EditorEventType.ViewportChanged) {
-                const zoom = evt.newTransform.transformVec3(Vec2.unitX).length();
-                if (zoom > this.settings.maxZoom || zoom < this.settings.minZoom) {
-                    const oldZoom = evt.oldTransform.transformVec3(Vec2.unitX).length();
-                    let resetTransform = Mat33.identity;
-                    if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
-                        resetTransform = evt.oldTransform;
-                    }
-                    else {
-                        // If 1x zoom isn't acceptable, try a zoom between the minimum and maximum.
-                        resetTransform = Mat33.scaling2D((this.settings.minZoom + this.settings.maxZoom) / 2);
-                    }
-                    this.viewport.resetTransform(resetTransform);
+            if (evt.kind !== EditorEventType.ViewportChanged)
+                return;
+            const getZoom = (mat) => mat.transformVec3(Vec2.unitX).length();
+            const zoom = getZoom(evt.newTransform);
+            if (zoom > this.settings.maxZoom || zoom < this.settings.minZoom) {
+                const oldZoom = getZoom(evt.oldTransform);
+                let resetTransform = Mat33.identity;
+                if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
+                    resetTransform = evt.oldTransform;
+                }
+                else {
+                    // If 1x zoom isn't acceptable, try a zoom between the minimum and maximum.
+                    resetTransform = Mat33.scaling2D((this.settings.minZoom + this.settings.maxZoom) / 2);
+                }
+                this.viewport.resetTransform(resetTransform);
+            }
+            else if (!isFinite(zoom)) {
+                // Recover from possible division-by-zero
+                console.warn(`Non-finite zoom (${zoom}) detected. Resetting the viewport. This was likely caused by division by zero.`);
+                if (isFinite(getZoom(evt.oldTransform))) {
+                    this.viewport.resetTransform(evt.oldTransform);
+                }
+                else {
+                    this.viewport.resetTransform();
                 }
             }
         });
@@ -875,6 +886,12 @@ export class Editor {
     allPointers) {
         sendPenEvent(this, eventType, point, allPointers);
     }
+    /**
+     * Adds all components in `components` such that they are in the center of the screen.
+     * This is a convenience method that creates **and applies** a single command.
+     *
+     * If `selectComponents` is true (the default), the components are selected.
+     */
     async addAndCenterComponents(components, selectComponents = true) {
         let bbox = null;
         for (const component of components) {
@@ -921,6 +938,9 @@ export class Editor {
      *
      * The export resolution is the same as the size of the drawing canvas, unless `outputSize`
      * is given.
+     *
+     * **Example**:
+     * [[include:doc-pages/inline-examples/adding-an-image-and-data-urls.md]]
      */
     toDataURL(format = 'image/png', outputSize) {
         const canvas = document.createElement('canvas');

package/dist/mjs/Pointer.mjs

@@ -112,7 +112,7 @@ export default class Pointer {
     // Intended for unit tests.
     static ofCanvasPoint(canvasPos, isDown, viewport, id = 0, device = PointerDevice.Pen, isPrimary = true, pressure = null) {
         const screenPos = viewport.canvasToScreen(canvasPos);
-        const timeStamp = (new Date()).getTime();
+        const timeStamp = performance.now();
         return new Pointer(screenPos, canvasPos, pressure, isPrimary, isDown, device, id, timeStamp);
     }
 }

package/dist/mjs/Viewport.d.ts

@@ -50,6 +50,11 @@ export declare class Viewport {
     private getScaleFactorToNearestPowerOf;
     /** Returns the size of a grid cell (in canvas units) as used by {@link snapToGrid}. */
     static getGridSize(scaleFactor: number): number;
+    /**
+     * Snaps `canvasPos` to the nearest grid cell corner.
+     *
+     * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
+     */
     snapToGrid(canvasPos: Point2): Vec3;
     /** Returns the size of one screen pixel in canvas units. */
     getSizeOfPixelOnCanvas(): number;
@@ -65,6 +70,7 @@ export declare class Viewport {
      * its original location. This is useful for preparing data for base-10 conversion.
      */
     static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
+    /** Round a point with a tolerance of ±1 screen unit. */
     roundPoint(point: Point2): Point2;
     static roundScaleRatio(scaleRatio: number, roundAmount?: number): number;
     computeZoomToTransform(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Mat33;

package/dist/mjs/Viewport.mjs

@@ -97,6 +97,11 @@ export class Viewport {
     static getGridSize(scaleFactor) {
         return 50 / scaleFactor;
     }
+    /**
+     * Snaps `canvasPos` to the nearest grid cell corner.
+     *
+     * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
+     */
     snapToGrid(canvasPos) {
         const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
         const snapCoordinate = (coordinate) => {
@@ -133,7 +138,7 @@ export class Viewport {
         }
         return point.map(roundComponent);
     }
-    // Round a point with a tolerance of ±1 screen unit.
+    /** Round a point with a tolerance of ±1 screen unit. */
     roundPoint(point) {
         return Viewport.roundPoint(point, 1 / this.getScaleFactor());
     }

package/dist/mjs/commands/Erase.d.ts

@@ -5,8 +5,28 @@ import SerializableCommand from './SerializableCommand';
 /**
  * Removes the given {@link AbstractComponent}s from the image.
  *
- * @example
- * ```ts
+ * **Example**:
+ * ```ts,runnable
+ * import { Editor, Erase, uniteCommands, Color4, Path, Stroke, Rect2, pathToRenderable } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * editor.addToolbar();
+ *
+ * // Add a large number of strokes
+ * const commands = [];
+ * for (let x = -20; x < 20; x++) {
+ *   for (let y = 0; y < 60; y++) {
+ *     const stroke = new Stroke([
+ *       pathToRenderable(
+ *         Path.fromString(`m${x * 5},${y * 5}l1,1`),
+ *         { fill: Color4.transparent, stroke: {width: 2, color: Color4.ofRGB(x / 10, y / 10, 0.5)}} )
+ *       ]);
+ *     commands.push(editor.image.addElement(stroke));
+ *   }
+ * }
+ * await editor.dispatch(uniteCommands(commands, 100));
+ *
+ * ---visible---
  * // Given some editor...
  *
  * // Find all elements intersecting the rectangle with top left (-10,-30) and

package/dist/mjs/commands/Erase.mjs

@@ -5,8 +5,28 @@ import  SerializableCommand  from './SerializableCommand.mjs';
 /**
  * Removes the given {@link AbstractComponent}s from the image.
  *
- * @example
- * ```ts
+ * **Example**:
+ * ```ts,runnable
+ * import { Editor, Erase, uniteCommands, Color4, Path, Stroke, Rect2, pathToRenderable } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * editor.addToolbar();
+ *
+ * // Add a large number of strokes
+ * const commands = [];
+ * for (let x = -20; x < 20; x++) {
+ *   for (let y = 0; y < 60; y++) {
+ *     const stroke = new Stroke([
+ *       pathToRenderable(
+ *         Path.fromString(`m${x * 5},${y * 5}l1,1`),
+ *         { fill: Color4.transparent, stroke: {width: 2, color: Color4.ofRGB(x / 10, y / 10, 0.5)}} )
+ *       ]);
+ *     commands.push(editor.image.addElement(stroke));
+ *   }
+ * }
+ * await editor.dispatch(uniteCommands(commands, 100));
+ *
+ * ---visible---
  * // Given some editor...
  *
  * // Find all elements intersecting the rectangle with top left (-10,-30) and

package/dist/mjs/commands/uniteCommands.d.ts

@@ -1,4 +1,40 @@
 import Command from './Command';
 import SerializableCommand from './SerializableCommand';
+/**
+ * Creates a single command from `commands`. This is useful when undoing should undo *all* commands
+ * in `commands` at once, rather than one at a time.
+ *
+ * @example
+ *
+ * ```ts,runnable
+ * import { Editor, pathToRenderable, Stroke, uniteCommands } from 'js-draw';
+ * import { Path, Color4 } from '@js-draw/math';
+ *
+ * const editor = new Editor(document.body);
+ * editor.addToolbar();
+ *
+ * // Create strokes!
+ * const strokes = [];
+ * for (let i = 0; i < 10; i++) {
+ *   const renderablePath = pathToRenderable(
+ *     Path.fromString(`M0,${i * 10} L100,100 L300,30 z`),
+ *     { fill: Color4.transparent, stroke: { color: Color4.red, width: 1, } }
+ *   );
+ *   strokes.push(new Stroke([ renderablePath ]));
+ * }
+ *
+ * // Convert to commands
+ * const addStrokesCommands = strokes.map(stroke => editor.image.addElement(stroke));
+ *
+ * // Apply all as a single undoable command (try applying each in a loop instead!)
+ * await editor.dispatch(uniteCommands(addStrokesCommands));
+ *
+ * // The second parameter to uniteCommands is for very large numbers of commands, when
+ * // applying them shouldn't be done all at once (which would block the UI).
+ *
+ * // The second parameter to uniteCommands is for very large numbers of commands, when
+ * // applying them shouldn't be done all at once (which would block the UI).
+ * ```
+ */
 declare const uniteCommands: <T extends Command>(commands: T[], applyChunkSize?: number) => T extends SerializableCommand ? SerializableCommand : Command;
 export default uniteCommands;

package/dist/mjs/commands/uniteCommands.mjs

@@ -84,6 +84,42 @@ class SerializableUnion extends SerializableCommand {
         return this.nonserializableCommand.description(editor, localizationTable);
     }
 }
+/**
+ * Creates a single command from `commands`. This is useful when undoing should undo *all* commands
+ * in `commands` at once, rather than one at a time.
+ *
+ * @example
+ *
+ * ```ts,runnable
+ * import { Editor, pathToRenderable, Stroke, uniteCommands } from 'js-draw';
+ * import { Path, Color4 } from '@js-draw/math';
+ *
+ * const editor = new Editor(document.body);
+ * editor.addToolbar();
+ *
+ * // Create strokes!
+ * const strokes = [];
+ * for (let i = 0; i < 10; i++) {
+ *   const renderablePath = pathToRenderable(
+ *     Path.fromString(`M0,${i * 10} L100,100 L300,30 z`),
+ *     { fill: Color4.transparent, stroke: { color: Color4.red, width: 1, } }
+ *   );
+ *   strokes.push(new Stroke([ renderablePath ]));
+ * }
+ *
+ * // Convert to commands
+ * const addStrokesCommands = strokes.map(stroke => editor.image.addElement(stroke));
+ *
+ * // Apply all as a single undoable command (try applying each in a loop instead!)
+ * await editor.dispatch(uniteCommands(addStrokesCommands));
+ *
+ * // The second parameter to uniteCommands is for very large numbers of commands, when
+ * // applying them shouldn't be done all at once (which would block the UI).
+ *
+ * // The second parameter to uniteCommands is for very large numbers of commands, when
+ * // applying them shouldn't be done all at once (which would block the UI).
+ * ```
+ */
 const uniteCommands = (commands, applyChunkSize) => {
     let allSerializable = true;
     for (const command of commands) {

package/dist/mjs/components/ImageComponent.d.ts

@@ -2,12 +2,24 @@ import { Mat33Array, Rect2, Mat33, LineSegment2 } from '@js-draw/math';
 import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
+/**
+ * Represents a raster image.
+ *
+ * **Example: Adding images**:
+ * [[include:doc-pages/inline-examples/adding-an-image-and-data-urls.md]]
+ */
 export default class ImageComponent extends AbstractComponent {
     protected contentBBox: Rect2;
     private image;
     constructor(image: RenderableImage);
     private getImageRect;
     private recomputeBBox;
+    /**
+     * Load from an image. Waits for the image to load if incomplete.
+     *
+     * The image, `elem`, must not [taint](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#security_and_tainted_canvases)
+     * an HTMLCanvasElement when rendered.
+     */
     static fromImage(elem: HTMLImageElement, transform: Mat33): Promise<ImageComponent>;
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;

package/dist/mjs/components/ImageComponent.mjs

@@ -1,7 +1,13 @@
 import { Rect2, Mat33 } from '@js-draw/math';
 import  { assertIsNumber, assertIsNumberArray }  from '../util/assertions.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
-// Represents a raster image.
+import  waitForImageLoaded  from '../util/waitForImageLoaded.mjs';
+/**
+ * Represents a raster image.
+ *
+ * **Example: Adding images**:
+ * [[include:doc-pages/inline-examples/adding-an-image-and-data-urls.md]]
+ */
 export default class ImageComponent extends AbstractComponent {
     constructor(image) {
         super('image-component');
@@ -24,15 +30,14 @@ export default class ImageComponent extends AbstractComponent {
         this.contentBBox = this.getImageRect();
         this.contentBBox = this.contentBBox.transformedBoundingBox(this.image.transform);
     }
-    // Load from an image. Waits for the image to load if incomplete.
+    /**
+     * Load from an image. Waits for the image to load if incomplete.
+     *
+     * The image, `elem`, must not [taint](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#security_and_tainted_canvases)
+     * an HTMLCanvasElement when rendered.
+     */
     static async fromImage(elem, transform) {
-        if (!elem.complete) {
-            await new Promise((resolve, reject) => {
-                elem.onload = resolve;
-                elem.onerror = reject;
-                elem.onabort = reject;
-            });
-        }
+        await waitForImageLoaded(elem);
         let width, height;
         if (typeof elem.width === 'number' && typeof elem.height === 'number'
             && elem.width !== 0 && elem.height !== 0) {
@@ -74,6 +79,7 @@ export default class ImageComponent extends AbstractComponent {
         canvas.drawImage(this.image);
         canvas.endObject(this.getLoadSaveData());
     }
+    // A *very* rough estimate of how long it takes to render this component
     getProportionalRenderingTime() {
         // Estimate: Equivalent to a stroke with 10 segments.
         return 10;
@@ -98,6 +104,7 @@ export default class ImageComponent extends AbstractComponent {
     getAltText() {
         return this.image.label;
     }
+    // The base64 image URL of this image.
     getURL() {
         return this.image.base64Url;
     }

package/dist/mjs/components/Stroke.d.ts

@@ -5,7 +5,7 @@ import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
-import RenderablePathSpec from '../rendering/RenderablePathSpec';
+import RenderablePathSpec, { RenderablePathSpecWithPath } from '../rendering/RenderablePathSpec';
 /**
  * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
  *
@@ -21,6 +21,9 @@ import RenderablePathSpec from '../rendering/RenderablePathSpec';
  * ```ts
  * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
  * ```
+ *
+ * **Adding**:
+ * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
  */
 export default class Stroke extends AbstractComponent implements RestyleableComponent {
     private parts;
@@ -39,7 +42,7 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
      *
      * const stroke = new Stroke([
      *     // Fill with red
-     *     pathToRenderable({ fill: Color4.red })
+     *     pathToRenderable(path, { fill: Color4.red })
      * ]);
      * ```
      */
@@ -57,6 +60,17 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
     private bboxForPart;
     getExactBBox(): Rect2;
     protected applyTransformation(affineTransfm: Mat33): void;
+    /**
+     * @returns A list of the parts that make up this path. Many paths only have one part.
+     *
+     * Each part (a {@link RenderablePathSpec}) contains information about the style and geometry
+     * of that part of the stroke. Use the `.path` property to do collision detection and other
+     * operations involving the stroke's geometry.
+     *
+     * Note that many of {@link Path}'s methods (e.g. {@link Path.intersection}) take a
+     * `strokeWidth` parameter that can be gotten from {@link RenderablePathSpec.style} `.stroke.width`.
+     */
+    getParts(): Readonly<RenderablePathSpecWithPath>[];
     /**
      * @returns the {@link Path.union} of all paths that make up this stroke.
      */

package/dist/mjs/components/Stroke.mjs

@@ -18,6 +18,9 @@ import  { pathFromRenderable, pathToRenderable, simplifyPathToFullScreenOrEmpty
  * ```ts
  * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
  * ```
+ *
+ * **Adding**:
+ * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
  */
 export default class Stroke extends AbstractComponent {
     /**
@@ -32,7 +35,7 @@ export default class Stroke extends AbstractComponent {
      *
      * const stroke = new Stroke([
      *     // Fill with red
-     *     pathToRenderable({ fill: Color4.red })
+     *     pathToRenderable(path, { fill: Color4.red })
      * ]);
      * ```
      */
@@ -290,6 +293,19 @@ export default class Stroke extends AbstractComponent {
             };
         });
     }
+    /**
+     * @returns A list of the parts that make up this path. Many paths only have one part.
+     *
+     * Each part (a {@link RenderablePathSpec}) contains information about the style and geometry
+     * of that part of the stroke. Use the `.path` property to do collision detection and other
+     * operations involving the stroke's geometry.
+     *
+     * Note that many of {@link Path}'s methods (e.g. {@link Path.intersection}) take a
+     * `strokeWidth` parameter that can be gotten from {@link RenderablePathSpec.style} `.stroke.width`.
+     */
+    getParts() {
+        return [...this.parts];
+    }
     /**
      * @returns the {@link Path.union} of all paths that make up this stroke.
      */

package/dist/mjs/components/builders/ArrowBuilder.mjs

@@ -1,8 +1,9 @@
 import { Path, PathCommandType } from '@js-draw/math';
 import  Stroke  from '../Stroke.mjs';
-export const makeArrowBuilder = (initialPoint, viewport) => {
+import  makeSnapToGridAutocorrect  from './autocorrect/makeSnapToGridAutocorrect.mjs';
+export const makeArrowBuilder = makeSnapToGridAutocorrect((initialPoint, viewport) => {
     return new ArrowBuilder(initialPoint, viewport);
-};
+});
 export default class ArrowBuilder {
     constructor(startPoint, viewport) {
         this.startPoint = startPoint;

package/dist/mjs/components/builders/CircleBuilder.mjs

@@ -2,9 +2,10 @@ import { Vec2, Path, PathCommandType, Color4 } from '@js-draw/math';
 import  { pathToRenderable }  from '../../rendering/RenderablePathSpec.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  Stroke  from '../Stroke.mjs';
-export const makeOutlinedCircleBuilder = (initialPoint, viewport) => {
+import  makeSnapToGridAutocorrect  from './autocorrect/makeSnapToGridAutocorrect.mjs';
+export const makeOutlinedCircleBuilder = makeSnapToGridAutocorrect((initialPoint, viewport) => {
     return new CircleBuilder(initialPoint, viewport);
-};
+});
 class CircleBuilder {
     constructor(startPoint, viewport) {
         this.startPoint = startPoint;

package/dist/mjs/components/builders/FreehandLineBuilder.mjs

@@ -2,13 +2,14 @@ import { Vec2, Rect2, Color4, PathCommandType } from '@js-draw/math';
 import  Stroke  from '../Stroke.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  { StrokeSmoother }  from '../util/StrokeSmoother.mjs';
-export const makeFreehandLineBuilder = (initialPoint, viewport) => {
+import  makeShapeFitAutocorrect  from './autocorrect/makeShapeFitAutocorrect.mjs';
+export const makeFreehandLineBuilder = makeShapeFitAutocorrect((initialPoint, viewport) => {
     // Don't smooth if input is more than ± 3 pixels from the true curve, do smooth if
     // less than ±1 px from the curve.
     const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
     const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
     return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist, viewport);
-};
+});
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 export default class FreehandLineBuilder {
     constructor(startPoint, minFitAllowed, maxFitAllowed, viewport) {

package/dist/mjs/components/builders/LineBuilder.mjs

@@ -1,9 +1,10 @@
 import { Path, PathCommandType } from '@js-draw/math';
 import  { pathToRenderable }  from '../../rendering/RenderablePathSpec.mjs';
 import  Stroke  from '../Stroke.mjs';
-export const makeLineBuilder = (initialPoint, viewport) => {
+import  makeSnapToGridAutocorrect  from './autocorrect/makeSnapToGridAutocorrect.mjs';
+export const makeLineBuilder = makeSnapToGridAutocorrect((initialPoint, viewport) => {
     return new LineBuilder(initialPoint, viewport);
-};
+});
 export default class LineBuilder {
     constructor(startPoint, viewport) {
         this.startPoint = startPoint;

package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.mjs

@@ -3,13 +3,14 @@ import { Vec2, Rect2, PathCommandType } from '@js-draw/math';
 import  Stroke  from '../Stroke.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  { StrokeSmoother }  from '../util/StrokeSmoother.mjs';
-export const makePressureSensitiveFreehandLineBuilder = (initialPoint, viewport) => {
+import  makeShapeFitAutocorrect  from './autocorrect/makeShapeFitAutocorrect.mjs';
+export const makePressureSensitiveFreehandLineBuilder = makeShapeFitAutocorrect((initialPoint, viewport) => {
     // Don't smooth if input is more than ± 3 pixels from the true curve, do smooth if
     // less than ±1 px from the curve.
     const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
     const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
     return new PressureSensitiveFreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist, viewport);
-};
+});
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 export default class PressureSensitiveFreehandLineBuilder {
     constructor(startPoint, 

package/dist/mjs/components/builders/RectangleBuilder.mjs

@@ -1,12 +1,13 @@
 import { Mat33, Rect2, Path } from '@js-draw/math';
 import  { pathToRenderable }  from '../../rendering/RenderablePathSpec.mjs';
 import  Stroke  from '../Stroke.mjs';
-export const makeFilledRectangleBuilder = (initialPoint, viewport) => {
+import  makeSnapToGridAutocorrect  from './autocorrect/makeSnapToGridAutocorrect.mjs';
+export const makeFilledRectangleBuilder = makeSnapToGridAutocorrect((initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, true, viewport);
-};
-export const makeOutlinedRectangleBuilder = (initialPoint, viewport) => {
+});
+export const makeOutlinedRectangleBuilder = makeSnapToGridAutocorrect((initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, false, viewport);
-};
+});
 export default class RectangleBuilder {
     constructor(startPoint, filled, viewport) {
         this.startPoint = startPoint;

package/dist/mjs/components/builders/autocorrect/makeShapeFitAutocorrect.d.ts

@@ -0,0 +1,3 @@
+import { ComponentBuilderFactory } from '../types';
+declare const makeShapeFitAutocorrect: (sourceFactory: ComponentBuilderFactory) => ComponentBuilderFactory;
+export default makeShapeFitAutocorrect;