js-draw 1.9.0 → 1.10.0

package/dist/cjs/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/cjs/components/Stroke.js

@@ -23,6 +23,9 @@ const RenderablePathSpec_1 = require("../rendering/RenderablePathSpec");
  * ```ts
  * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
  * ```
+ *
+ * **Adding**:
+ * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
  */
 class Stroke extends AbstractComponent_1.default {
     /**
@@ -37,7 +40,7 @@ class Stroke extends AbstractComponent_1.default {
      *
      * const stroke = new Stroke([
      *     // Fill with red
-     *     pathToRenderable({ fill: Color4.red })
+     *     pathToRenderable(path, { fill: Color4.red })
      * ]);
      * ```
      */
@@ -295,6 +298,19 @@ class Stroke extends AbstractComponent_1.default {
             };
         });
     }
+    /**
+     * @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/cjs/components/builders/ArrowBuilder.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeArrowBuilder = void 0;
 const math_1 = require("@js-draw/math");
 const Stroke_1 = __importDefault(require("../Stroke"));
-const makeArrowBuilder = (initialPoint, viewport) => {
+const makeSnapToGridAutocorrect_1 = __importDefault(require("./autocorrect/makeSnapToGridAutocorrect"));
+exports.makeArrowBuilder = (0, makeSnapToGridAutocorrect_1.default)((initialPoint, viewport) => {
     return new ArrowBuilder(initialPoint, viewport);
-};
-exports.makeArrowBuilder = makeArrowBuilder;
+});
 class ArrowBuilder {
     constructor(startPoint, viewport) {
         this.startPoint = startPoint;

package/dist/cjs/components/builders/CircleBuilder.js

@@ -8,10 +8,10 @@ const math_1 = require("@js-draw/math");
 const RenderablePathSpec_1 = require("../../rendering/RenderablePathSpec");
 const Viewport_1 = __importDefault(require("../../Viewport"));
 const Stroke_1 = __importDefault(require("../Stroke"));
-const makeOutlinedCircleBuilder = (initialPoint, viewport) => {
+const makeSnapToGridAutocorrect_1 = __importDefault(require("./autocorrect/makeSnapToGridAutocorrect"));
+exports.makeOutlinedCircleBuilder = (0, makeSnapToGridAutocorrect_1.default)((initialPoint, viewport) => {
     return new CircleBuilder(initialPoint, viewport);
-};
-exports.makeOutlinedCircleBuilder = makeOutlinedCircleBuilder;
+});
 class CircleBuilder {
     constructor(startPoint, viewport) {
         this.startPoint = startPoint;

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

@@ -8,14 +8,14 @@ const math_1 = require("@js-draw/math");
 const Stroke_1 = __importDefault(require("../Stroke"));
 const Viewport_1 = __importDefault(require("../../Viewport"));
 const StrokeSmoother_1 = require("../util/StrokeSmoother");
-const makeFreehandLineBuilder = (initialPoint, viewport) => {
+const makeShapeFitAutocorrect_1 = __importDefault(require("./autocorrect/makeShapeFitAutocorrect"));
+exports.makeFreehandLineBuilder = (0, makeShapeFitAutocorrect_1.default)((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);
-};
-exports.makeFreehandLineBuilder = makeFreehandLineBuilder;
+});
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 class FreehandLineBuilder {
     constructor(startPoint, minFitAllowed, maxFitAllowed, viewport) {

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

@@ -7,10 +7,10 @@ exports.makeLineBuilder = void 0;
 const math_1 = require("@js-draw/math");
 const RenderablePathSpec_1 = require("../../rendering/RenderablePathSpec");
 const Stroke_1 = __importDefault(require("../Stroke"));
-const makeLineBuilder = (initialPoint, viewport) => {
+const makeSnapToGridAutocorrect_1 = __importDefault(require("./autocorrect/makeSnapToGridAutocorrect"));
+exports.makeLineBuilder = (0, makeSnapToGridAutocorrect_1.default)((initialPoint, viewport) => {
     return new LineBuilder(initialPoint, viewport);
-};
-exports.makeLineBuilder = makeLineBuilder;
+});
 class LineBuilder {
     constructor(startPoint, viewport) {
         this.startPoint = startPoint;

package/dist/cjs/components/builders/PressureSensitiveFreehandLineBuilder.js

@@ -9,14 +9,14 @@ const math_1 = require("@js-draw/math");
 const Stroke_1 = __importDefault(require("../Stroke"));
 const Viewport_1 = __importDefault(require("../../Viewport"));
 const StrokeSmoother_1 = require("../util/StrokeSmoother");
-const makePressureSensitiveFreehandLineBuilder = (initialPoint, viewport) => {
+const makeShapeFitAutocorrect_1 = __importDefault(require("./autocorrect/makeShapeFitAutocorrect"));
+exports.makePressureSensitiveFreehandLineBuilder = (0, makeShapeFitAutocorrect_1.default)((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);
-};
-exports.makePressureSensitiveFreehandLineBuilder = makePressureSensitiveFreehandLineBuilder;
+});
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 class PressureSensitiveFreehandLineBuilder {
     constructor(startPoint, 

package/dist/cjs/components/builders/RectangleBuilder.js

@@ -7,14 +7,13 @@ exports.makeOutlinedRectangleBuilder = exports.makeFilledRectangleBuilder = void
 const math_1 = require("@js-draw/math");
 const RenderablePathSpec_1 = require("../../rendering/RenderablePathSpec");
 const Stroke_1 = __importDefault(require("../Stroke"));
-const makeFilledRectangleBuilder = (initialPoint, viewport) => {
+const makeSnapToGridAutocorrect_1 = __importDefault(require("./autocorrect/makeSnapToGridAutocorrect"));
+exports.makeFilledRectangleBuilder = (0, makeSnapToGridAutocorrect_1.default)((initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, true, viewport);
-};
-exports.makeFilledRectangleBuilder = makeFilledRectangleBuilder;
-const makeOutlinedRectangleBuilder = (initialPoint, viewport) => {
+});
+exports.makeOutlinedRectangleBuilder = (0, makeSnapToGridAutocorrect_1.default)((initialPoint, viewport) => {
     return new RectangleBuilder(initialPoint, false, viewport);
-};
-exports.makeOutlinedRectangleBuilder = makeOutlinedRectangleBuilder;
+});
 class RectangleBuilder {
     constructor(startPoint, filled, viewport) {
         this.startPoint = startPoint;

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

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

package/dist/cjs/components/builders/autocorrect/makeShapeFitAutocorrect.js

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const makeShapeFitAutocorrect = (sourceFactory) => {
+    return (startPoint, viewport) => {
+        return new ShapeFitBuilder(sourceFactory, startPoint, viewport);
+    };
+};
+exports.default = makeShapeFitAutocorrect;
+const makeLineTemplate = (startPoint, points, _bbox) => {
+    const templatePoints = [
+        startPoint,
+        points[points.length - 1],
+    ];
+    return { points: templatePoints, };
+};
+const makeRectangleTemplate = (_startPoint, _points, bbox) => {
+    return { points: [...bbox.corners, bbox.corners[0]], };
+};
+class ShapeFitBuilder {
+    constructor(sourceFactory, startPoint, viewport) {
+        this.sourceFactory = sourceFactory;
+        this.startPoint = startPoint;
+        this.viewport = viewport;
+        this.builder = sourceFactory(startPoint, viewport);
+        this.points = [startPoint];
+    }
+    getBBox() {
+        return this.builder.getBBox();
+    }
+    build() {
+        return this.builder.build();
+    }
+    preview(renderer) {
+        this.builder.preview(renderer);
+    }
+    addPoint(point) {
+        this.points.push(point);
+        this.builder.addPoint(point);
+    }
+    async autocorrectShape() {
+        // Use screen points so that autocorrected shapes rotate with the screen.
+        const startPoint = this.viewport.canvasToScreen(this.startPoint.pos);
+        const points = this.points.map(point => this.viewport.canvasToScreen(point.pos));
+        const bbox = math_1.Rect2.bboxOf(points);
+        const snappedStartPoint = this.viewport.canvasToScreen(this.viewport.snapToGrid(this.startPoint.pos));
+        const snappedPoints = this.points.map(point => this.viewport.canvasToScreen(this.viewport.snapToGrid(point.pos)));
+        const snappedBBox = math_1.Rect2.bboxOf(snappedPoints);
+        // Only fit larger shapes
+        if (bbox.maxDimension < 32) {
+            return null;
+        }
+        const maxError = Math.min(30, bbox.maxDimension / 4);
+        // Create templates
+        const templates = [
+            {
+                ...makeLineTemplate(snappedStartPoint, snappedPoints, snappedBBox),
+                toleranceMultiplier: 0.5,
+            },
+            makeLineTemplate(startPoint, points, bbox),
+            {
+                ...makeRectangleTemplate(snappedStartPoint, snappedPoints, snappedBBox),
+                toleranceMultiplier: 0.6,
+            },
+            makeRectangleTemplate(startPoint, points, bbox),
+        ];
+        // Find a good fit fit
+        const selectTemplate = (maximumAllowedError) => {
+            for (const template of templates) {
+                const templatePoints = template.points;
+                // Maximum square error to accept the template
+                const acceptMaximumSquareError = maximumAllowedError * maximumAllowedError * (template.toleranceMultiplier ?? 1);
+                // Gets the point at index, wrapping the the start of the template if
+                // outside the array of points.
+                const templateAt = (index) => {
+                    while (index < 0) {
+                        index += templatePoints.length;
+                    }
+                    index %= templatePoints.length;
+                    return templatePoints[index];
+                };
+                let closestToFirst = null;
+                let closestToFirstSqrDist = Infinity;
+                let templateStartIndex = 0;
+                // Find the closest point to the startPoint
+                for (let i = 0; i < templatePoints.length; i++) {
+                    const current = templatePoints[i];
+                    const currentSqrDist = current.minus(startPoint).magnitudeSquared();
+                    if (!closestToFirst || currentSqrDist < closestToFirstSqrDist) {
+                        closestToFirstSqrDist = currentSqrDist;
+                        closestToFirst = current;
+                        templateStartIndex = i;
+                    }
+                }
+                // Walk through the points and find the maximum error
+                let maximumSqrError = 0;
+                let templateIndex = templateStartIndex;
+                for (const point of points) {
+                    let minimumCurrentSqrError = Infinity;
+                    let minimumErrorAtIndex = templateIndex;
+                    const windowRadius = 6;
+                    for (let i = -windowRadius; i <= windowRadius; i++) {
+                        const index = templateIndex + i;
+                        const prevTemplatePoint = templateAt(index - 1);
+                        const currentTemplatePoint = templateAt(index);
+                        const nextTemplatePoint = templateAt(index + 1);
+                        const prevToCurrent = new math_1.LineSegment2(prevTemplatePoint, currentTemplatePoint);
+                        const currentToNext = new math_1.LineSegment2(currentTemplatePoint, nextTemplatePoint);
+                        const prevToCurrentDist = prevToCurrent.distance(point);
+                        const nextToCurrentDist = currentToNext.distance(point);
+                        const error = Math.min(prevToCurrentDist, nextToCurrentDist);
+                        const squareError = error * error;
+                        if (squareError < minimumCurrentSqrError) {
+                            minimumCurrentSqrError = squareError;
+                            minimumErrorAtIndex = index;
+                        }
+                    }
+                    templateIndex = minimumErrorAtIndex;
+                    maximumSqrError = Math.max(minimumCurrentSqrError, maximumSqrError);
+                    if (maximumSqrError > acceptMaximumSquareError) {
+                        break;
+                    }
+                }
+                if (maximumSqrError < acceptMaximumSquareError) {
+                    return templatePoints;
+                }
+            }
+            return null;
+        };
+        const template = selectTemplate(maxError);
+        if (!template) {
+            return null;
+        }
+        const lastDataPoint = this.points[this.points.length - 1];
+        const startWidth = this.startPoint.width;
+        const endWidth = lastDataPoint.width;
+        const startColor = this.startPoint.color;
+        const endColor = lastDataPoint.color;
+        const startTime = this.startPoint.time;
+        const endTime = lastDataPoint.time;
+        const templateIndexToStrokeDataPoint = (index) => {
+            const prevPoint = template[Math.max(0, Math.floor(index))];
+            const nextPoint = template[Math.min(Math.ceil(index), template.length - 1)];
+            const point = prevPoint.lerp(nextPoint, index - Math.floor(index));
+            const fractionToEnd = index / template.length;
+            return {
+                pos: this.viewport.screenToCanvas(point),
+                width: startWidth * (1 - fractionToEnd) + endWidth * fractionToEnd,
+                color: startColor.mix(endColor, fractionToEnd),
+                time: startTime * (1 - fractionToEnd) + endTime * fractionToEnd,
+            };
+        };
+        const builder = this.sourceFactory(templateIndexToStrokeDataPoint(0), this.viewport);
+        // Prevent the original builder from doing stroke smoothing if the template is short
+        // enough to likely have sharp corners.
+        const preventSmoothing = template.length < 10;
+        for (let i = 0; i < template.length; i++) {
+            if (preventSmoothing) {
+                builder.addPoint(templateIndexToStrokeDataPoint(i - 0.001));
+            }
+            builder.addPoint(templateIndexToStrokeDataPoint(i));
+            if (preventSmoothing) {
+                builder.addPoint(templateIndexToStrokeDataPoint(i + 0.001));
+            }
+        }
+        return builder.build();
+    }
+}

package/dist/cjs/components/builders/autocorrect/makeSnapToGridAutocorrect.d.ts

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

package/dist/cjs/components/builders/autocorrect/makeSnapToGridAutocorrect.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const makeSnapToGridAutocorrect = (sourceFactory) => {
+    return (startPoint, viewport) => {
+        return new SnapToGridAutocompleteBuilder(sourceFactory, startPoint, viewport);
+    };
+};
+exports.default = makeSnapToGridAutocorrect;
+class SnapToGridAutocompleteBuilder {
+    constructor(sourceFactory, startPoint, viewport) {
+        this.sourceFactory = sourceFactory;
+        this.startPoint = startPoint;
+        this.viewport = viewport;
+        this.builder = sourceFactory(startPoint, viewport);
+        this.points = [startPoint];
+    }
+    getBBox() {
+        return this.builder.getBBox();
+    }
+    build() {
+        return this.builder.build();
+    }
+    preview(renderer) {
+        this.builder.preview(renderer);
+    }
+    addPoint(point) {
+        this.points.push(point);
+        this.builder.addPoint(point);
+    }
+    async autocorrectShape() {
+        const snapToGrid = (point) => {
+            return {
+                ...point,
+                pos: this.viewport.snapToGrid(point.pos),
+            };
+        };
+        // Use screen points so that snapped shapes rotate with the screen.
+        const startPoint = snapToGrid(this.startPoint);
+        const builder = this.sourceFactory(startPoint, this.viewport);
+        const points = this.points.map(point => snapToGrid(point));
+        for (const point of points) {
+            builder.addPoint(point);
+        }
+        return builder.build();
+    }
+}

package/dist/cjs/components/builders/types.d.ts

@@ -7,6 +7,7 @@ export interface ComponentBuilder {
     getBBox(): Rect2;
     build(): AbstractComponent;
     preview(renderer: AbstractRenderer): void;
+    autocorrectShape?: () => Promise<AbstractComponent | null>;
     addPoint(point: StrokeDataPoint): void;
 }
 export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;

package/dist/cjs/image/EditorImage.d.ts

@@ -87,6 +87,9 @@ export default class EditorImage {
      * rendered onto the main rendering canvas instead of doing a full re-render.
      *
      * @see {@link Display.flatten}
+     *
+     * @example
+     * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
      */
     static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
     /** @see EditorImage.addElement */
@@ -105,8 +108,36 @@ export default class EditorImage {
      * autoresize (if it was previously enabled).
      */
     setImportExportRect(imageRect: Rect2): SerializableCommand;
+    /** @see {@link setAutoresizeEnabled} */
     getAutoresizeEnabled(): boolean;
-    /** Returns a `Command` that sets whether the image should autoresize. */
+    /**
+     * Returns a `Command` that sets whether the image should autoresize when
+     * {@link AbstractComponent}s are added/removed.
+     *
+     * @example
+     *
+     * ```ts,runnable
+     * import { Editor } from 'js-draw';
+     *
+     * const editor = new Editor(document.body);
+     * const toolbar = editor.addToolbar();
+     *
+     * // Add a save button to demonstrate what the output looks like
+     * // (it should change size to fit whatever was drawn)
+     * toolbar.addSaveButton(() => {
+     *   document.body.replaceChildren(editor.toSVG({ sanitize: true }));
+     * });
+     *
+     * // Actually using setAutoresizeEnabled:
+     * //
+     * // To set autoresize without announcing for accessibility/making undoable
+     * const addToHistory = false;
+     * editor.dispatchNoAnnounce(editor.image.setAutoresizeEnabled(true), addToHistory);
+     *
+     * // Add to undo history **and** announce for accessibility
+     * //editor.dispatch(editor.image.setAutoresizeEnabled(true), true);
+     * ```
+     */
     setAutoresizeEnabled(autoresize: boolean): Command;
     private setAutoresizeEnabledDirectly;
     /** Updates the size/position of the viewport */

package/dist/cjs/image/EditorImage.js

@@ -210,6 +210,9 @@ class EditorImage {
      * rendered onto the main rendering canvas instead of doing a full re-render.
      *
      * @see {@link Display.flatten}
+     *
+     * @example
+     * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
      */
     static addElement(elem, applyByFlattening = false) {
         return new _a.AddElementCommand(elem, applyByFlattening);
@@ -237,10 +240,38 @@ class EditorImage {
     setImportExportRect(imageRect) {
         return _a.SetImportExportRectCommand.of(this, imageRect, false);
     }
+    /** @see {@link setAutoresizeEnabled} */
     getAutoresizeEnabled() {
         return this.shouldAutoresizeExportViewport;
     }
-    /** Returns a `Command` that sets whether the image should autoresize. */
+    /**
+     * Returns a `Command` that sets whether the image should autoresize when
+     * {@link AbstractComponent}s are added/removed.
+     *
+     * @example
+     *
+     * ```ts,runnable
+     * import { Editor } from 'js-draw';
+     *
+     * const editor = new Editor(document.body);
+     * const toolbar = editor.addToolbar();
+     *
+     * // Add a save button to demonstrate what the output looks like
+     * // (it should change size to fit whatever was drawn)
+     * toolbar.addSaveButton(() => {
+     *   document.body.replaceChildren(editor.toSVG({ sanitize: true }));
+     * });
+     *
+     * // Actually using setAutoresizeEnabled:
+     * //
+     * // To set autoresize without announcing for accessibility/making undoable
+     * const addToHistory = false;
+     * editor.dispatchNoAnnounce(editor.image.setAutoresizeEnabled(true), addToHistory);
+     *
+     * // Add to undo history **and** announce for accessibility
+     * //editor.dispatch(editor.image.setAutoresizeEnabled(true), true);
+     * ```
+     */
     setAutoresizeEnabled(autoresize) {
         if (autoresize === this.shouldAutoresizeExportViewport) {
             return Command_1.default.empty;

package/dist/cjs/rendering/Display.js

@@ -138,6 +138,9 @@ class Display {
                 // Ensure correct drawing operations on high-resolution screens.
                 // See
                 // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#scaling_for_high_resolution_displays
+                //
+                // This scaling causes the rendering contexts to automatically convert
+                // between screen coordinates and pixel coordinates.
                 wetInkCtx.resetTransform();
                 dryInkCtx.resetTransform();
                 dryInkCtx.scale(this.devicePixelRatio, this.devicePixelRatio);
@@ -156,7 +159,11 @@ class Display {
             dryInkCtx.restore();
         };
         this.getColorAt = (screenPos) => {
-            const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+            // getImageData isn't affected by a transformation matrix -- we need to
+            // pre-transform screenPos to convert it from screen coordinates into pixel
+            // coordinates.
+            const adjustedScreenPos = screenPos.times(this.devicePixelRatio);
+            const pixel = dryInkCtx.getImageData(adjustedScreenPos.x, adjustedScreenPos.y, 1, 1);
             const data = pixel?.data;
             if (data) {
                 const color = math_1.Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);

package/dist/cjs/rendering/RenderablePathSpec.d.ts

@@ -6,11 +6,15 @@ interface RenderablePathSpec {
     style: RenderingStyle;
     path?: Path;
 }
-interface RenderablePathSpecWithPath extends RenderablePathSpec {
+export interface RenderablePathSpecWithPath extends RenderablePathSpec {
     path: Path;
 }
 /** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
 export declare const pathFromRenderable: (renderable: RenderablePathSpec) => Path;
+/**
+ * Converts `path` into a format that can be rendered (by passing to a {@link Stroke} constructor
+ * or directly to an {@link AbstractRenderer.drawPath}).
+ */
 export declare const pathToRenderable: (path: Path, style: RenderingStyle) => RenderablePathSpecWithPath;
 interface RectangleSimplificationResult {
     rectangle: Rect2;

package/dist/cjs/rendering/RenderablePathSpec.js

@@ -10,6 +10,10 @@ const pathFromRenderable = (renderable) => {
     return new math_1.Path(renderable.startPoint, renderable.commands);
 };
 exports.pathFromRenderable = pathFromRenderable;
+/**
+ * Converts `path` into a format that can be rendered (by passing to a {@link Stroke} constructor
+ * or directly to an {@link AbstractRenderer.drawPath}).
+ */
 const pathToRenderable = (path, style) => {
     return {
         startPoint: path.startPoint,

package/dist/cjs/toolbar/IconProvider.d.ts

@@ -51,6 +51,8 @@ export default class IconProvider {
     makePenIcon(penStyle: PenStyle): IconElemType;
     makeIconFromFactory(penStyle: PenStyle): IconElemType;
     makePipetteIcon(color?: Color4): IconElemType;
+    makeShapeAutocorrectIcon(): IconElemType;
+    makeStrokeSmoothingIcon(): IconElemType;
     /** Unused. @deprecated */
     makeFormatSelectionIcon(): IconElemType;
     makeResizeImageToSelectionIcon(): IconElemType;

package/dist/cjs/toolbar/IconProvider.js

@@ -649,6 +649,23 @@ class IconProvider {
         icon.setAttribute('viewBox', '5 -40 140 140');
         return icon;
     }
+    makeShapeAutocorrectIcon() {
+        const fill = 'none';
+        const strokeColor = 'var(--icon-color)';
+        return this.makeIconFromPath(`
+			m 79.129476,33.847107 9.967823,-0.03218 v 55 h -55 l 0.03218,-9.96782
+			M 71.1,40.8 a 30,30 0 0 1 -30,30 30,30 0 0 1 -30,-30 30,30 0 0 1 30,-30 30,30 0 0 1 30,30 L 71.1,40.8
+			M 34.1,58.8 v -25 h 25 v 0
+		`, fill, strokeColor, '7px');
+    }
+    makeStrokeSmoothingIcon() {
+        const fill = 'none';
+        const strokeColor = 'var(--icon-color)';
+        return this.makeIconFromPath(`
+			m 31,83.2 c -50,0 30,-65 -20,-65
+			M 75,17.3 40,59.7 38.2,77.6 55.5,72.4 90.5,30 Z
+		`, fill, strokeColor, '7px');
+    }
     /** Unused. @deprecated */
     makeFormatSelectionIcon() {
         return this.makeIconFromPath(`

package/dist/cjs/toolbar/localization.d.ts

@@ -10,6 +10,8 @@ export interface ToolbarLocalization {
     arrowPen: string;
     image: string;
     inputAltText: string;
+    decreaseImageSize: string;
+    resetImage: string;
     chooseFile: string;
     dragAndDropHereOrBrowse: string;
     cancel: string;
@@ -48,6 +50,7 @@ export interface ToolbarLocalization {
     toggleOverflow: string;
     about: string;
     inputStabilization: string;
+    strokeAutocorrect: string;
     errorImageHasZeroSize: string;
     closeSidebar: (toolName: string) => string;
     dropdownShown: (toolName: string) => string;

package/dist/cjs/toolbar/localization.js

@@ -10,6 +10,8 @@ exports.defaultToolbarLocalization = {
     image: 'Image',
     reformatSelection: 'Format selection',
     inputAltText: 'Alt text',
+    decreaseImageSize: 'Decrease size',
+    resetImage: 'Reset',
     chooseFile: 'Choose file',
     dragAndDropHereOrBrowse: 'Drag and drop here\nor\n{{browse}}',
     submit: 'Submit',
@@ -40,7 +42,8 @@ exports.defaultToolbarLocalization = {
     enableAutoresizeOption: 'Auto-resize',
     toggleOverflow: 'More',
     about: 'About',
-    inputStabilization: 'Input stabilization',
+    inputStabilization: 'Stabilization',
+    strokeAutocorrect: 'Autocorrect',
     touchPanning: 'Touchscreen panning',
     roundedTipPen: 'Round',
     flatTipPen: 'Flat',