js-draw 1.9.1 → 1.11.0

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;

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

@@ -0,0 +1,166 @@
+import { Rect2, LineSegment2 } from '@js-draw/math';
+const makeShapeFitAutocorrect = (sourceFactory) => {
+    return (startPoint, viewport) => {
+        return new ShapeFitBuilder(sourceFactory, startPoint, viewport);
+    };
+};
+export 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 = 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 = 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 LineSegment2(prevTemplatePoint, currentTemplatePoint);
+                        const currentToNext = new 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/mjs/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/mjs/components/builders/autocorrect/makeSnapToGridAutocorrect.mjs

@@ -0,0 +1,44 @@
+const makeSnapToGridAutocorrect = (sourceFactory) => {
+    return (startPoint, viewport) => {
+        return new SnapToGridAutocompleteBuilder(sourceFactory, startPoint, viewport);
+    };
+};
+export 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/mjs/components/builders/types.d.ts

@@ -7,6 +7,18 @@ export interface ComponentBuilder {
     getBBox(): Rect2;
     build(): AbstractComponent;
     preview(renderer: AbstractRenderer): void;
+    /**
+     * Called when the pen is stationary (or the user otherwise
+     * activates autocomplete). This might attempt to fit the user's
+     * drawing to a particular shape.
+     *
+     * The shape returned by this function may be ignored if it has
+     * an empty bounding box.
+     *
+     * Although this returns a Promise, it should return *as fast as
+     * possible*.
+     */
+    autocorrectShape?: () => Promise<AbstractComponent | null>;
     addPoint(point: StrokeDataPoint): void;
 }
 export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;

package/dist/mjs/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/mjs/image/EditorImage.mjs

@@ -180,6 +180,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);
@@ -207,10 +210,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.empty;

package/dist/mjs/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/mjs/rendering/RenderablePathSpec.mjs

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

package/dist/mjs/toolbar/AbstractToolbar.d.ts

@@ -3,6 +3,7 @@ import { ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
 import BaseWidget, { ToolbarWidgetTag } from './widgets/BaseWidget';
 import { DispatcherEventListener } from '../EventDispatcher';
+import { BaseTool } from '../lib';
 export interface SpacerOptions {
     grow: number;
     minSize: string;
@@ -131,7 +132,7 @@ export default abstract class AbstractToolbar {
     /**
      * Adds an "Exit" button that, when clicked, calls `exitCallback`.
      *
-     * **Note**: This is roughly equivalent to
+     * **Note**: This is *roughly* equivalent to
      * ```ts
      * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
      *   label: this.editor.localization.exit,
@@ -154,9 +155,24 @@ export default abstract class AbstractToolbar {
      */
     addUndoRedoButtons(undoFirst?: boolean): void;
     /**
-     * Adds toolbar widgets based on the enabled tools.
+     * Adds widgets for pen/eraser/selection/text/pan-zoom primary tools.
+     *
+     * If `filter` returns `false` for a tool, no widget is added for that tool.
+     * See {@link addDefaultToolWidgets}
+     */
+    addWidgetsForPrimaryTools(filter?: (tool: BaseTool) => boolean): void;
+    /**
+     * Adds toolbar widgets based on the enabled tools, and additional tool-like
+     * buttons (e.g. {@link DocumentPropertiesWidget} and {@link InsertImageWidget}).
      */
     addDefaultToolWidgets(): void;
+    /**
+     * Adds widgets that don't correspond to tools, but do allow the user to control
+     * the editor in some way.
+     *
+     * By default, this includes {@link DocumentPropertiesWidget} and {@link InsertImageWidget}.
+     */
+    addDefaultEditorControlWidgets(): void;
     addDefaultActionButtons(): void;
     /**
      * Adds both the default tool widgets and action buttons.

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -30,6 +30,7 @@ import  DocumentPropertiesWidget  from './widgets/DocumentPropertiesWidget.mjs';
 import { Color4 } from '@js-draw/math';
 import  { toolbarCSSPrefix }  from './constants.mjs';
 import  SaveActionWidget  from './widgets/SaveActionWidget.mjs';
+import  ExitActionWidget  from './widgets/ExitActionWidget.mjs';
 class AbstractToolbar {
     /** @internal */
     constructor(editor, localizationTable = defaultToolbarLocalization) {
@@ -292,14 +293,13 @@ class AbstractToolbar {
      */
     addSaveButton(saveCallback, labelOverride = {}) {
         const widget = new SaveActionWidget(this.editor, this.localizationTable, saveCallback, labelOverride);
-        widget.setTags([ToolbarWidgetTag.Save]);
         this.addWidget(widget);
         return widget;
     }
     /**
      * Adds an "Exit" button that, when clicked, calls `exitCallback`.
      *
-     * **Note**: This is roughly equivalent to
+     * **Note**: This is *roughly* equivalent to
      * ```ts
      * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
      *   label: this.editor.localization.exit,
@@ -316,15 +316,9 @@ class AbstractToolbar {
      * @final
      */
     addExitButton(exitCallback, labelOverride = {}) {
-        return this.addTaggedActionButton([ToolbarWidgetTag.Exit], {
-            label: this.editor.localization.exit,
-            icon: this.editor.icons.makeCloseIcon(),
-            ...labelOverride,
-        }, () => {
-            exitCallback();
-        }, {
-            autoDisableInReadOnlyEditors: false,
-        });
+        const widget = new ExitActionWidget(this.editor, this.localizationTable, exitCallback, labelOverride);
+        this.addWidget(widget);
+        return widget;
     }
     /**
      * Adds undo and redo buttons that trigger the editor's built-in undo and redo
@@ -372,27 +366,49 @@ class AbstractToolbar {
         });
     }
     /**
-     * Adds toolbar widgets based on the enabled tools.
+     * Adds widgets for pen/eraser/selection/text/pan-zoom primary tools.
+     *
+     * If `filter` returns `false` for a tool, no widget is added for that tool.
+     * See {@link addDefaultToolWidgets}
      */
-    addDefaultToolWidgets() {
-        const toolController = this.editor.toolController;
-        for (const tool of toolController.getMatchingTools(PenTool)) {
-            const widget = new PenToolWidget(this.editor, tool, this.localizationTable);
-            this.addWidget(widget);
-        }
-        for (const tool of toolController.getMatchingTools(EraserTool)) {
-            this.addWidget(new EraserWidget(this.editor, tool, this.localizationTable));
-        }
-        for (const tool of toolController.getMatchingTools(SelectionTool)) {
-            this.addWidget(new SelectionToolWidget(this.editor, tool, this.localizationTable));
-        }
-        for (const tool of toolController.getMatchingTools(TextTool)) {
-            this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
-        }
-        const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
-        if (panZoomTool) {
-            this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
+    addWidgetsForPrimaryTools(filter) {
+        for (const tool of this.editor.toolController.getPrimaryTools()) {
+            if (filter && !filter?.(tool)) {
+                continue;
+            }
+            if (tool instanceof PenTool) {
+                const widget = new PenToolWidget(this.editor, tool, this.localizationTable);
+                this.addWidget(widget);
+            }
+            else if (tool instanceof EraserTool) {
+                this.addWidget(new EraserWidget(this.editor, tool, this.localizationTable));
+            }
+            else if (tool instanceof SelectionTool) {
+                this.addWidget(new SelectionToolWidget(this.editor, tool, this.localizationTable));
+            }
+            else if (tool instanceof TextTool) {
+                this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
+            }
+            else if (tool instanceof PanZoomTool) {
+                this.addWidget(new HandToolWidget(this.editor, tool, this.localizationTable));
+            }
         }
+    }
+    /**
+     * Adds toolbar widgets based on the enabled tools, and additional tool-like
+     * buttons (e.g. {@link DocumentPropertiesWidget} and {@link InsertImageWidget}).
+     */
+    addDefaultToolWidgets() {
+        this.addWidgetsForPrimaryTools();
+        this.addDefaultEditorControlWidgets();
+    }
+    /**
+     * Adds widgets that don't correspond to tools, but do allow the user to control
+     * the editor in some way.
+     *
+     * By default, this includes {@link DocumentPropertiesWidget} and {@link InsertImageWidget}.
+     */
+    addDefaultEditorControlWidgets() {
         this.addWidget(new DocumentPropertiesWidget(this.editor, this.localizationTable));
         this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
     }