js-draw 1.10.0 → 1.11.0

package/dist/cjs/tools/SelectionTool/Selection.js

@@ -41,6 +41,7 @@ const Duplicate_1 = __importDefault(require("../../commands/Duplicate"));
 const TransformMode_1 = require("./TransformMode");
 const types_1 = require("./types");
 const EditorImage_1 = __importDefault(require("../../image/EditorImage"));
+const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
 const updateChunkSize = 100;
 const maxPreviewElemCount = 500;
 // @internal
@@ -51,6 +52,7 @@ class Selection {
         // @see getTightBoundingBox
         this.selectionTightBoundingBox = null;
         this.transform = math_1.Mat33.identity;
+        // invariant: sorted by increasing z-index
         this.selectedElems = [];
         this.hasParent = true;
         // Maps IDs to whether we removed the component from the image
@@ -161,6 +163,16 @@ class Selection {
             this.previewTransformCmds();
         }
     }
+    getDeltaZIndexToMoveSelectionToTop() {
+        if (this.selectedElems.length === 0) {
+            return 0;
+        }
+        const selectedBottommostZIndex = this.selectedElems[0].getZIndex();
+        const visibleObjects = this.editor.image.getElementsIntersectingRegion(this.region);
+        const topMostVisibleZIndex = visibleObjects[visibleObjects.length - 1]?.getZIndex() ?? selectedBottommostZIndex;
+        const deltaZIndex = (topMostVisibleZIndex + 1) - selectedBottommostZIndex;
+        return deltaZIndex;
+    }
     // Applies the current transformation to the selection
     finalizeTransform() {
         const fullTransform = this.transform;
@@ -169,17 +181,35 @@ class Selection {
         this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
         this.transform = math_1.Mat33.identity;
         this.scrollTo();
+        let transformPromise = undefined;
         // Make the commands undo-able.
         // Don't check for non-empty transforms because this breaks changing the
         // z-index of the just-transformed commands.
-        //
-        // TODO: Check whether the selectedElems are already all toplevel.
-        const transformPromise = this.editor.dispatch(new _a.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        if (this.selectedElems.length > 0) {
+            const deltaZIndex = this.getDeltaZIndexToMoveSelectionToTop();
+            transformPromise = this.editor.dispatch(new _a.ApplyTransformationCommand(this, selectedElems, fullTransform, deltaZIndex));
+        }
         // Clear renderings of any in-progress transformations
         const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();
         return transformPromise;
     }
+    /** Sends all selected elements to the bottom of the visible image. */
+    sendToBack() {
+        const visibleObjects = this.editor.image.getElementsIntersectingRegion(this.editor.viewport.visibleRect);
+        // VisibleObjects and selectedElems should both be sorted by z-index
+        const lowestVisibleZIndex = visibleObjects[0]?.getZIndex() ?? 0;
+        const highestSelectedZIndex = this.selectedElems[this.selectedElems.length - 1]?.getZIndex() ?? 0;
+        const targetHighestZIndex = lowestVisibleZIndex - 1;
+        const deltaZIndex = targetHighestZIndex - highestSelectedZIndex;
+        if (deltaZIndex !== 0) {
+            const commands = this.selectedElems.map(elem => {
+                return elem.setZIndex(elem.getZIndex() + deltaZIndex);
+            });
+            return (0, uniteCommands_1.default)(commands, updateChunkSize);
+        }
+        return null;
+    }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
         if (this.selectedElems.length === 0) {
@@ -193,7 +223,7 @@ class Selection {
         const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();
         wetInkRenderer.pushTransform(this.transform);
-        const viewportVisibleRect = this.editor.viewport.visibleRect;
+        const viewportVisibleRect = this.editor.viewport.visibleRect.union(this.region);
         const visibleRect = viewportVisibleRect.transformedBoundingBox(this.transform.inverse());
         for (const elem of this.selectedElems) {
             elem.render(wetInkRenderer, visibleRect);
@@ -439,7 +469,8 @@ class Selection {
         if (wasTransforming) {
             // Don't update the selection's focus when redoing/undoing
             const selectionToUpdate = null;
-            tmpApplyCommand = new _a.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform);
+            const deltaZIndex = this.getDeltaZIndexToMoveSelectionToTop();
+            tmpApplyCommand = new _a.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform, deltaZIndex);
             // Transform to ensure that the duplicates are in the correct location
             await tmpApplyCommand.apply(this.editor);
             // Show items again
@@ -480,6 +511,8 @@ class Selection {
         this.originalRegion = bbox;
         this.selectionTightBoundingBox = bbox;
         this.selectedElems = objects.filter(object => object.isSelectable());
+        // Enforce increasing z-index invariant
+        this.selectedElems.sort((a, b) => a.getZIndex() - b.getZIndex());
         this.padRegion();
         this.updateUI();
     }
@@ -493,7 +526,8 @@ _a = Selection;
         // The selection box is lost when serializing/deserializing. No need to store box rotation
         const fullTransform = new math_1.Mat33(...json.transform);
         const elemIds = (json.elems ?? []);
-        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform);
+        const deltaZIndex = parseInt(json.deltaZIndex ?? 0);
+        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform, deltaZIndex);
     });
 })();
 Selection.ApplyTransformationCommand = class extends SerializableCommand_1.default {
@@ -501,10 +535,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
     // If a `string[]`, selectedElems is a list of element IDs.
     selectedElems, 
     // Full transformation used to transform elements.
-    fullTransform) {
+    fullTransform, deltaZIndex) {
         super('selection-tool-transform');
         this.selection = selection;
         this.fullTransform = fullTransform;
+        this.deltaZIndex = deltaZIndex;
         const isIDList = (arr) => {
             return typeof arr[0] === 'string';
         };
@@ -515,11 +550,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
         else {
             this.selectedElemIds = selectedElems.map(elem => elem.getId());
             this.transformCommands = selectedElems.map(elem => {
-                return elem.transformBy(this.fullTransform);
+                return elem.setZIndexAndTransformBy(this.fullTransform, elem.getZIndex() + deltaZIndex);
             });
         }
     }
-    resolveToElems(editor) {
+    resolveToElems(editor, isUndoing) {
         if (this.transformCommands) {
             return;
         }
@@ -528,11 +563,19 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
             if (!elem) {
                 throw new Error(`Unable to find element with ID, ${id}.`);
             }
-            return elem.transformBy(this.fullTransform);
+            let originalZIndex = elem.getZIndex();
+            let targetZIndex = elem.getZIndex() + this.deltaZIndex;
+            // If the command has already been applied, the element should currently
+            // have the target z-index.
+            if (isUndoing) {
+                targetZIndex = elem.getZIndex();
+                originalZIndex = elem.getZIndex() - this.deltaZIndex;
+            }
+            return elem.setZIndexAndTransformBy(this.fullTransform, targetZIndex, originalZIndex);
         });
     }
     async apply(editor) {
-        this.resolveToElems(editor);
+        this.resolveToElems(editor, false);
         this.selection?.setTransform(this.fullTransform, false);
         this.selection?.updateUI();
         await editor.asyncApplyCommands(this.transformCommands, updateChunkSize);
@@ -541,7 +584,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
         this.selection?.updateUI();
     }
     async unapply(editor) {
-        this.resolveToElems(editor);
+        this.resolveToElems(editor, true);
         this.selection?.setTransform(this.fullTransform.inverse(), false);
         this.selection?.updateUI();
         await editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
@@ -553,6 +596,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
         return {
             elems: this.selectedElemIds,
             transform: this.fullTransform.toArray(),
+            deltaZIndex: this.deltaZIndex,
         };
     }
     description(_editor, localizationTable) {

package/dist/cjs/tools/SelectionTool/SelectionTool.d.ts

@@ -28,6 +28,7 @@ export default class SelectionTool extends BaseTool {
     private onSelectionUpdated;
     private zoomToSelection;
     private static handleableKeys;
+    private hasUnfinalizedTransformFromKeyPress;
     onKeyPress(event: KeyPressEvent): boolean;
     onKeyUp(evt: KeyUpEvent): boolean;
     onCopy(event: CopyEvent): boolean;

package/dist/cjs/tools/SelectionTool/SelectionTool.js

@@ -27,6 +27,9 @@ class SelectionTool extends BaseTool_1.default {
         this.lastPointer = null;
         this.selectionBoxHandlingEvt = false;
         this.lastSelectedObjects = [];
+        // Whether the last keypress corresponded to an action that didn't transform the
+        // selection (and thus does not need to be finalized on onKeyUp).
+        this.hasUnfinalizedTransformFromKeyPress = false;
         this.autoscroller = new ToPointerAutoscroller_1.default(editor.viewport, (scrollBy) => {
             editor.dispatch(Viewport_1.default.transformBy(math_1.Mat33.translation(scrollBy)), false);
             // Update the selection box/content to match the new viewport.
@@ -219,7 +222,8 @@ class SelectionTool extends BaseTool_1.default {
             this.snapToGrid = true;
             return true;
         }
-        if (this.selectionBox && shortcucts.matchesShortcut(keybindings_1.duplicateSelectionShortcut, event)) {
+        if (this.selectionBox && (shortcucts.matchesShortcut(keybindings_1.duplicateSelectionShortcut, event)
+            || shortcucts.matchesShortcut(keybindings_1.sendToBackSelectionShortcut, event))) {
             // Handle duplication on key up — we don't want to accidentally duplicate
             // many times.
             return true;
@@ -303,6 +307,8 @@ class SelectionTool extends BaseTool_1.default {
             const oldTransform = this.selectionBox.getTransform();
             this.selectionBox.setTransform(oldTransform.rightMul(transform));
             this.selectionBox.scrollTo();
+            // The transformation needs to be finalized at some point (on key up)
+            this.hasUnfinalizedTransformFromKeyPress = true;
         }
         if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
             this.editor.dispatch(this.selectionBox.deleteSelectedObjects());
@@ -328,12 +334,24 @@ class SelectionTool extends BaseTool_1.default {
             });
             return true;
         }
+        if (this.selectionBox && shortcucts.matchesShortcut(keybindings_1.sendToBackSelectionShortcut, evt)) {
+            const sendToBackCommand = this.selectionBox.sendToBack();
+            if (sendToBackCommand) {
+                this.editor.dispatch(sendToBackCommand);
+            }
+            return true;
+        }
         if (evt.key === 'Shift') {
             this.shiftKeyPressed = false;
             return true;
         }
+        // If we don't need to finalize the transform
+        if (!this.hasUnfinalizedTransformFromKeyPress) {
+            return true;
+        }
         if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
             this.selectionBox.finalizeTransform();
+            this.hasUnfinalizedTransformFromKeyPress = false;
             return true;
         }
         return false;

package/dist/cjs/tools/ToolSwitcherShortcut.d.ts

@@ -7,7 +7,6 @@ import BaseTool from './BaseTool';
  *
  * This is in the default set of {@link ToolController} tools.
  *
- * @deprecated This may be replaced in the future.
  */
 export default class ToolSwitcherShortcut extends BaseTool {
     private editor;

package/dist/cjs/tools/ToolSwitcherShortcut.js

@@ -10,7 +10,6 @@ const BaseTool_1 = __importDefault(require("./BaseTool"));
  *
  * This is in the default set of {@link ToolController} tools.
  *
- * @deprecated This may be replaced in the future.
  */
 class ToolSwitcherShortcut extends BaseTool_1.default {
     constructor(editor) {

package/dist/cjs/tools/keybindings.d.ts

@@ -15,3 +15,4 @@ export declare const zoomInKeyboardShortcutId = "jsdraw.tools.PanZoom.zoomIn";
 export declare const zoomOutKeyboardShortcutId = "jsdraw.tools.PanZoom.zoomOut";
 export declare const selectAllKeyboardShortcut = "jsdraw.tools.SelectionTool.selectAll";
 export declare const duplicateSelectionShortcut = "jsdraw.tools.SelectionTool.duplicateSelection";
+export declare const sendToBackSelectionShortcut = "jsdraw.tools.SelectionTool.sendToBack";

package/dist/cjs/tools/keybindings.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.duplicateSelectionShortcut = exports.selectAllKeyboardShortcut = exports.zoomOutKeyboardShortcutId = exports.zoomInKeyboardShortcutId = exports.rotateCounterClockwiseKeyboardShortcutId = exports.rotateClockwiseKeyboardShortcutId = exports.moveDownKeyboardShortcutId = exports.moveUpKeyboardShortcutId = exports.moveRightKeyboardShortcutId = exports.moveLeftKeyboardShortcutId = exports.toggleFindVisibleShortcutId = exports.lineLockKeyboardShortcutId = exports.snapToGridKeyboardShortcutId = exports.decreaseSizeKeyboardShortcutId = exports.increaseSizeKeyboardShortcutId = exports.redoKeyboardShortcutId = exports.undoKeyboardShortcutId = void 0;
+exports.sendToBackSelectionShortcut = exports.duplicateSelectionShortcut = exports.selectAllKeyboardShortcut = exports.zoomOutKeyboardShortcutId = exports.zoomInKeyboardShortcutId = exports.rotateCounterClockwiseKeyboardShortcutId = exports.rotateClockwiseKeyboardShortcutId = exports.moveDownKeyboardShortcutId = exports.moveUpKeyboardShortcutId = exports.moveRightKeyboardShortcutId = exports.moveLeftKeyboardShortcutId = exports.toggleFindVisibleShortcutId = exports.lineLockKeyboardShortcutId = exports.snapToGridKeyboardShortcutId = exports.decreaseSizeKeyboardShortcutId = exports.increaseSizeKeyboardShortcutId = exports.redoKeyboardShortcutId = exports.undoKeyboardShortcutId = void 0;
 const KeyboardShortcutManager_1 = __importDefault(require("../shortcuts/KeyboardShortcutManager"));
 // This file contains user-overridable tool-realted keybindings.
 // Undo/redo
@@ -45,3 +45,5 @@ exports.selectAllKeyboardShortcut = 'jsdraw.tools.SelectionTool.selectAll';
 KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.selectAllKeyboardShortcut, ['CtrlOrMeta+KeyA'], 'Select all');
 exports.duplicateSelectionShortcut = 'jsdraw.tools.SelectionTool.duplicateSelection';
 KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.duplicateSelectionShortcut, ['CtrlOrMeta+KeyD'], 'Duplicate selection');
+exports.sendToBackSelectionShortcut = 'jsdraw.tools.SelectionTool.sendToBack';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.sendToBackSelectionShortcut, ['End'], 'Send to back');

package/dist/cjs/version.js

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

package/dist/mjs/commands/invertCommand.mjs

@@ -6,6 +6,11 @@ const invertCommand = (command) => {
     if (command instanceof SerializableCommand) {
         // SerializableCommand that does the inverse of [command]
         return new class extends SerializableCommand {
+            constructor() {
+                super(...arguments);
+                // For debugging
+                this._command = command;
+            }
             serializeToJSON() {
                 return command.serialize();
             }

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

@@ -116,6 +116,14 @@ export default abstract class AbstractComponent {
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): SerializableCommand;
     setZIndex(newZIndex: number): SerializableCommand;
+    /**
+     * Combines {@link transformBy} and {@link setZIndex} into a single command.
+     *
+     * @param newZIndex - The z-index this component should have after applying this command.
+     * @param originalZIndex - @internal The z-index the component should revert to after unapplying
+     *                         this command.
+     */
+    setZIndexAndTransformBy(affineTransfm: Mat33, newZIndex: number, originalZIndex?: number): SerializableCommand;
     isSelectable(): boolean;
     isBackground(): boolean;
     getProportionalRenderingTime(): number;

package/dist/mjs/components/AbstractComponent.mjs

@@ -138,13 +138,25 @@ class AbstractComponent {
     }
     // Returns a command that, when applied, transforms this by [affineTransfm] and
     // updates the editor.
-    // This also increases the element's z-index so that it is on top.
+    //
+    // The transformed component is also moved to the top (use {@link setZIndexAndTransformBy} to
+    // avoid this behavior).
     transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
     }
     // Returns a command that updates this component's z-index.
     setZIndex(newZIndex) {
-        return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex, this.getZIndex());
+        return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex);
+    }
+    /**
+     * Combines {@link transformBy} and {@link setZIndex} into a single command.
+     *
+     * @param newZIndex - The z-index this component should have after applying this command.
+     * @param originalZIndex - @internal The z-index the component should revert to after unapplying
+     *                         this command.
+     */
+    setZIndexAndTransformBy(affineTransfm, newZIndex, originalZIndex) {
+        return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this, newZIndex, originalZIndex);
     }
     // @returns true iff this component can be selected (e.g. by the selection tool.)
     isSelectable() {
@@ -215,8 +227,12 @@ class AbstractComponent {
             throw new Error(`Element with data ${json} cannot be deserialized.`);
         }
         const instance = this.deserializationCallbacks[json.name](json.data);
-        instance.zIndex = json.zIndex;
         instance.id = json.id;
+        if (isFinite(json.zIndex)) {
+            instance.zIndex = json.zIndex;
+            // Ensure that new components will be added on top.
+            AbstractComponent.zIndexCounter = Math.max(AbstractComponent.zIndexCounter, instance.zIndex + 1);
+        }
         // TODO: What should we do with json.loadSaveData?
         //       If we attach it to [instance], we create a potential security risk — loadSaveData
         //       is often used to store unrecognised attributes so they can be preserved on output.
@@ -225,6 +241,7 @@ class AbstractComponent {
     }
 }
 // Topmost z-index
+// TODO: Should be a property of the EditorImage.
 AbstractComponent.zIndexCounter = 0;
 AbstractComponent.deserializationCallbacks = {};
 AbstractComponent.transformElementCommandId = 'transform-element';
@@ -252,7 +269,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
             super.resolveComponent(image);
             this.origZIndex ??= this.component.getZIndex();
         }
-        updateTransform(editor, newTransfm) {
+        updateTransform(editor, newTransfm, targetZIndex) {
             if (!this.component) {
                 throw new Error('this.component is undefined or null!');
             }
@@ -264,7 +281,12 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
                 hadParent = true;
             }
             this.component.applyTransformation(newTransfm);
+            this.component.zIndex = targetZIndex;
             this.component.lastChangedTime = (new Date()).getTime();
+            // Ensure that new components are automatically drawn above the current component.
+            if (targetZIndex >= AbstractComponent.zIndexCounter) {
+                AbstractComponent.zIndexCounter = targetZIndex + 1;
+            }
             // Add the element back to the document.
             if (hadParent) {
                 EditorImage.addElement(this.component).apply(editor);
@@ -272,14 +294,12 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
         }
         apply(editor) {
             this.resolveComponent(editor.image);
-            this.component.zIndex = this.targetZIndex;
-            this.updateTransform(editor, this.affineTransfm);
+            this.updateTransform(editor, this.affineTransfm, this.targetZIndex);
             editor.queueRerender();
         }
         unapply(editor) {
             this.resolveComponent(editor.image);
-            this.component.zIndex = this.origZIndex;
-            this.updateTransform(editor, this.affineTransfm.inverse());
+            this.updateTransform(editor, this.affineTransfm.inverse(), this.origZIndex);
             editor.queueRerender();
         }
         description(_editor, localizationTable) {

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

@@ -7,6 +7,17 @@ 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;
 }

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

package/dist/mjs/toolbar/widgets/BaseWidget.mjs

@@ -47,7 +47,7 @@ class BaseWidget {
         this.layoutManager = defaultLayoutManager;
         this.icon = null;
         this.container = document.createElement('div');
-        this.container.classList.add(`${toolbarCSSPrefix}toolContainer`, `${toolbarCSSPrefix}toolButtonContainer`);
+        this.container.classList.add(`${toolbarCSSPrefix}toolContainer`, `${toolbarCSSPrefix}toolButtonContainer`, `${toolbarCSSPrefix}internalWidgetId--${id.replace(/[^a-zA-Z0-9_]/g, '-')}`);
         this.dropdownContent = document.createElement('div');
         __classPrivateFieldSet(this, _BaseWidget_hasDropdown, false, "f");
         this.button = document.createElement('div');

package/dist/mjs/toolbar/widgets/ExitActionWidget.d.ts

@@ -0,0 +1,12 @@
+import { KeyPressEvent } from '../../inputEvents';
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
+import { ActionButtonIcon } from '../types';
+declare class ExitActionWidget extends ActionButtonWidget {
+    constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>);
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
+    protected onKeyPress(event: KeyPressEvent): boolean;
+    mustBeInToplevelMenu(): boolean;
+}
+export default ExitActionWidget;

package/dist/mjs/toolbar/widgets/ExitActionWidget.mjs

@@ -0,0 +1,27 @@
+import  ActionButtonWidget  from './ActionButtonWidget.mjs';
+import  { ToolbarWidgetTag }  from './BaseWidget.mjs';
+import  { exitKeyboardShortcut }  from './keybindings.mjs';
+class ExitActionWidget extends ActionButtonWidget {
+    constructor(editor, localization, saveCallback, labelOverride = {}) {
+        super(editor, 'exit-button', 
+        // Creates an icon
+        () => {
+            return labelOverride.icon ?? editor.icons.makeCloseIcon();
+        }, labelOverride.label ?? localization.exit, saveCallback);
+        this.setTags([ToolbarWidgetTag.Exit]);
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
+    onKeyPress(event) {
+        if (this.editor.shortcuts.matchesShortcut(exitKeyboardShortcut, event)) {
+            this.clickAction();
+            return true;
+        }
+        return super.onKeyPress(event);
+    }
+    mustBeInToplevelMenu() {
+        return true;
+    }
+}
+export default ExitActionWidget;

package/dist/mjs/toolbar/widgets/HandToolWidget.d.ts

@@ -4,11 +4,12 @@ import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 export default class HandToolWidget extends BaseToolWidget {
-    protected overridePanZoomTool: PanZoom;
     private allowTogglingBaseTool;
-    constructor(editor: Editor, overridePanZoomTool: PanZoom, localizationTable: ToolbarLocalization);
-    protected shouldAutoDisableInReadOnlyEditor(): boolean;
+    protected overridePanZoomTool: PanZoom;
+    constructor(editor: Editor, tool: PanZoom, localizationTable: ToolbarLocalization);
     private static getPrimaryHandTool;
+    private static getOverrideHandTool;
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected getTitle(): string;
     protected createIcon(): Element;
     protected handleClick(): void;