js-draw 1.10.0 → 1.11.1

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/tools/localization.d.ts

@@ -9,6 +9,8 @@ export interface ToolLocalization {
     undoRedoTool: string;
     pipetteTool: string;
     rightClickDragPanTool: string;
+    autocorrectedTo: (description: string) => string;
+    autocorrectionCanceled: string;
     textTool: string;
     enterTextToInsert: string;
     changeTool: string;

package/dist/cjs/tools/localization.js

@@ -12,6 +12,8 @@ exports.defaultToolLocalization = {
     rightClickDragPanTool: 'Right-click drag',
     pipetteTool: 'Pick color from screen',
     keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
+    autocorrectedTo: (strokeDescription) => `Autocorrected to ${strokeDescription}`,
+    autocorrectionCanceled: 'Autocorrect cancelled',
     textTool: 'Text',
     enterTextToInsert: 'Text to insert',
     changeTool: 'Change tool',

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

@@ -2,6 +2,11 @@ interface Callbacks {
     filter(event: KeyboardEvent): boolean;
     handleKeyDown(event: KeyboardEvent): void;
     handleKeyUp(event: KeyboardEvent): void;
+    /**
+     * Should return `true` iff `source` is also registered as an event listener source.
+     * If `false` and focus leaves the original source, keyup events are fired.
+     */
+    getHandlesKeyEventsFrom(source: Node): boolean;
 }
 /**
  * Calls `callbacks` when different keys are known to be pressed.

package/dist/cjs/util/listenForKeyboardEventsFrom.js

@@ -67,7 +67,11 @@ const listenForKeyboardEventsFrom = (elem, callbacks) => {
         handleKeyEvent(htmlEvent);
     });
     elem.addEventListener('focusout', (focusEvent) => {
-        const stillHasFocus = focusEvent.relatedTarget && elem.contains(focusEvent.relatedTarget);
+        let stillHasFocus = false;
+        if (focusEvent.relatedTarget) {
+            const relatedTarget = focusEvent.relatedTarget;
+            stillHasFocus = elem.contains(relatedTarget) || callbacks.getHandlesKeyEventsFrom(relatedTarget);
+        }
         if (!stillHasFocus) {
             for (const event of keysDown) {
                 callbacks.handleKeyUp(new KeyboardEvent('keyup', {

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.1',
 };

package/dist/mjs/Editor.d.ts

@@ -255,6 +255,13 @@ export declare class Editor {
     private updateEditorSizeVariables;
     private pointers;
     private getPointerList;
+    /**
+     * A protected method that can override setPointerCapture in environments where it may fail
+     * (e.g. with synthetic events). @internal
+     */
+    protected setPointerCapture(target: HTMLElement, pointerId: number): void;
+    /** Can be overridden in a testing environment to handle synthetic events. @internal */
+    protected releasePointerCapture(target: HTMLElement, pointerId: number): void;
     /**
      * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
      * as the content of the editor.

package/dist/mjs/Editor.mjs

@@ -327,6 +327,17 @@ export class Editor {
         }
         return res;
     }
+    /**
+     * A protected method that can override setPointerCapture in environments where it may fail
+     * (e.g. with synthetic events). @internal
+     */
+    setPointerCapture(target, pointerId) {
+        target.setPointerCapture(pointerId);
+    }
+    /** Can be overridden in a testing environment to handle synthetic events. @internal */
+    releasePointerCapture(target, pointerId) {
+        target.releasePointerCapture(pointerId);
+    }
     /**
      * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
      * as the content of the editor.
@@ -337,7 +348,7 @@ export class Editor {
         if (eventType === 'pointerdown') {
             const pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
             this.pointers[pointer.id] = pointer;
-            eventTarget.setPointerCapture(pointer.id);
+            this.setPointerCapture(eventTarget, pointer.id);
             const event = {
                 kind: InputEvtType.PointerDownEvt,
                 current: pointer,
@@ -374,7 +385,7 @@ export class Editor {
                 return false;
             }
             this.pointers[pointer.id] = pointer;
-            eventTarget.releasePointerCapture(pointer.id);
+            this.releasePointerCapture(eventTarget, pointer.id);
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.PointerUpEvt,
                 current: pointer,
@@ -563,7 +574,7 @@ export class Editor {
                     startPoint: currentPos,
                 };
                 // Capture the pointer so we receive future events even if the overlay is hidden.
-                elem.setPointerCapture(event.pointerId);
+                this.setPointerCapture(elem, event.pointerId);
                 // Don't send to the editor.
                 sendToEditor = false;
             }
@@ -595,7 +606,7 @@ export class Editor {
             // pointercancel event.
             else if ((eventName === 'pointerup' || eventName === 'pointercancel')
                 && gestureData[pointerId] && gestureData[pointerId].eventBuffer.length > 0) {
-                elem.releasePointerCapture(event.pointerId);
+                this.releasePointerCapture(elem, event.pointerId);
                 // Don't send to the editor.
                 sendToEditor = false;
                 delete gestureData[pointerId];
@@ -643,6 +654,9 @@ export class Editor {
             handleKeyUp: (htmlEvent) => {
                 this.handleHTMLKeyUpEvent(htmlEvent);
             },
+            getHandlesKeyEventsFrom: (element) => {
+                return this.eventListenerTargets.includes(element);
+            },
         });
         // Allow drop.
         elem.ondragover = evt => {

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

@@ -64,5 +64,5 @@ export default class BackgroundComponent extends AbstractComponent implements Re
     protected applyTransformation(_affineTransfm: Mat33): void;
     description(localizationTable: ImageComponentLocalization): string;
     protected createClone(): AbstractComponent;
-    static deserializeFromJSON(json: any): BackgroundComponent;
+    static deserializeFromJSON(this: void, json: any): BackgroundComponent;
 }

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

@@ -37,5 +37,5 @@ export default class ImageComponent extends AbstractComponent {
         height: number;
         transform: Mat33Array;
     };
-    static deserializeFromJSON(data: any): ImageComponent;
+    static deserializeFromJSON(this: void, data: any): ImageComponent;
 }

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

@@ -15,6 +15,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     protected createClone(): SVGGlobalAttributesObject;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;
-    static deserializeFromString(_data: string): AbstractComponent;
+    static deserializeFromString(this: void, _data: string): AbstractComponent;
 }
 export {};

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

@@ -88,5 +88,5 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
         path: string;
     }[];
     /** @internal */
-    static deserializeFromJSON(json: any): Stroke;
+    static deserializeFromJSON(this: void, json: any): Stroke;
 }

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/rendering/Display.mjs

@@ -70,7 +70,9 @@ export default class Display {
             },
             blockResolution: cacheBlockResolution,
             cacheSize: 600 * 600 * 4 * 90,
-            maxScale: 1.3,
+            // On higher resolution displays, don't scale cache blocks as much to decrease blurriness.
+            // TODO: Decrease the minimum cache scale as well.
+            maxScale: Math.max(1, 1.3 / window.devicePixelRatio),
             // Require about 20 strokes with 4 parts each to cache an image in one of the
             // parts of the cache grid.
             minProportionalRenderTimePerCache: 20 * 4,

package/dist/mjs/rendering/renderers/DummyRenderer.d.ts

@@ -29,4 +29,5 @@ export default class DummyRenderer extends AbstractRenderer {
     isTooSmallToRender(_rect: Rect2): boolean;
     canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
     renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void;
+    toString(): string;
 }

package/dist/mjs/rendering/renderers/DummyRenderer.mjs

@@ -103,4 +103,7 @@ export default class DummyRenderer extends AbstractRenderer {
             return transform.transformVec2(point);
         }));
     }
+    toString() {
+        return '[DummyRenderer]';
+    }
 }

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;

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

@@ -96,34 +96,45 @@ class HandModeWidget extends BaseWidget {
 }
 export default class HandToolWidget extends BaseToolWidget {
     constructor(editor, 
-    // Pan zoom tool that overrides all other tools (enabling this tool for a device
-    // causes that device to pan/zoom instead of interact with the primary tools)
-    overridePanZoomTool, localizationTable) {
-        const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
-        const tool = primaryHandTool ?? overridePanZoomTool;
-        super(editor, tool, 'hand-tool-widget', localizationTable);
-        this.overridePanZoomTool = overridePanZoomTool;
+    // Can either be the primary pan/zoom tool (in the primary tools list) or
+    // the override pan/zoom tool.
+    // If the override pan/zoom tool, the primary will be gotten from the editor's
+    // tool controller.
+    // If the primary, the override will be gotten from the editor's tool controller.
+    tool, localizationTable) {
+        const isGivenToolPrimary = editor.toolController.getPrimaryTools().includes(tool);
+        const primaryTool = (isGivenToolPrimary ? tool : HandToolWidget.getPrimaryHandTool(editor.toolController))
+            ?? tool;
+        super(editor, primaryTool, 'hand-tool-widget', localizationTable);
+        this.overridePanZoomTool =
+            (isGivenToolPrimary ? HandToolWidget.getOverrideHandTool(editor.toolController) : tool)
+                ?? tool;
         // Only allow toggling a hand tool if we're using the primary hand tool and not the override
         // hand tool for this button.
-        this.allowTogglingBaseTool = primaryHandTool !== null;
+        this.allowTogglingBaseTool = primaryTool !== null;
         // Allow showing/hiding the dropdown, even if `overridePanZoomTool` isn't enabled.
         if (!this.allowTogglingBaseTool) {
             this.container.classList.add('dropdownShowable');
         }
         // Controls for the overriding hand tool.
-        const touchPanningWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
-        const rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        const touchPanningWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
         this.addSubWidget(touchPanningWidget);
         this.addSubWidget(rotationLockWidget);
     }
-    shouldAutoDisableInReadOnlyEditor() {
-        return false;
-    }
     static getPrimaryHandTool(toolController) {
         const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom);
         const primaryPanZoomTool = primaryPanZoomToolList[0];
         return primaryPanZoomTool;
     }
+    static getOverrideHandTool(toolController) {
+        const panZoomToolList = toolController.getMatchingTools(PanZoom);
+        const panZoomTool = panZoomToolList[0];
+        return panZoomTool;
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
     getTitle() {
         return this.localizationTable.handTool;
     }