js-draw 1.3.1 → 1.4.1

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

@@ -8,6 +8,10 @@ export interface SpacerOptions {
     minSize: string;
     maxSize: string;
 }
+export type ToolbarActionButtonOptions = {
+    mustBeToplevel?: boolean;
+    autoDisableInReadOnlyEditors?: boolean;
+};
 export default abstract class AbstractToolbar {
     #private;
     protected editor: Editor;
@@ -91,18 +95,22 @@ export default abstract class AbstractToolbar {
      * @see
      * {@link addActionButton}
      */
-    protected makeActionButton(title: string | ActionButtonIcon, command: () => void, mustBeToplevel?: boolean): BaseWidget;
+    protected makeActionButton(title: string | ActionButtonIcon, command: () => void, options?: ToolbarActionButtonOptions | boolean): BaseWidget;
     /**
      * Adds an action button with `title` to this toolbar (or to the given `parent` element).
      *
+     * `options` can either be an object with properties `mustBeToplevel` and/or
+     * `autoDisableInReadOnlyEditors` or a boolean value. If a boolean, it is interpreted
+     * as being the value of `mustBeToplevel`.
+     *
      * @return The added button.
      */
-    addActionButton(title: string | ActionButtonIcon, command: () => void, mustBeToplevel?: boolean): BaseWidget;
+    addActionButton(title: string | ActionButtonIcon, command: () => void, options?: ToolbarActionButtonOptions | boolean): BaseWidget;
     /**
      * Like {@link addActionButton}, except associates `tags` with the button that allow
      * different toolbar styles to give the button tag-dependent styles.
      */
-    addTaggedActionButton(tags: (ToolbarWidgetTag | string)[], title: string | ActionButtonIcon, command: () => void, mustBeToplevel?: boolean): BaseWidget;
+    addTaggedActionButton(tags: (ToolbarWidgetTag | string)[], title: string | ActionButtonIcon, command: () => void, options?: ToolbarActionButtonOptions | boolean): BaseWidget;
     /**
      * Adds a save button that, when clicked, calls `saveCallback`.
      *

package/dist/cjs/toolbar/AbstractToolbar.js

@@ -235,7 +235,15 @@ class AbstractToolbar {
      * @see
      * {@link addActionButton}
      */
-    makeActionButton(title, command, mustBeToplevel = true) {
+    makeActionButton(title, command, options = true) {
+        // Parse options
+        if (typeof options === 'boolean') {
+            options = {
+                mustBeToplevel: options,
+            };
+        }
+        const mustBeToplevel = options.mustBeToplevel ?? true;
+        const autoDisableInReadOnlyEditors = options.autoDisableInReadOnlyEditors ?? true;
         const titleString = typeof title === 'string' ? title : title.label;
         const widgetId = 'action-button';
         const makeIcon = () => {
@@ -244,16 +252,20 @@ class AbstractToolbar {
             }
             return title.icon;
         };
-        const widget = new ActionButtonWidget_1.default(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization, mustBeToplevel);
+        const widget = new ActionButtonWidget_1.default(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization, mustBeToplevel, autoDisableInReadOnlyEditors);
         return widget;
     }
     /**
      * Adds an action button with `title` to this toolbar (or to the given `parent` element).
      *
+     * `options` can either be an object with properties `mustBeToplevel` and/or
+     * `autoDisableInReadOnlyEditors` or a boolean value. If a boolean, it is interpreted
+     * as being the value of `mustBeToplevel`.
+     *
      * @return The added button.
      */
-    addActionButton(title, command, mustBeToplevel = true) {
-        const widget = this.makeActionButton(title, command, mustBeToplevel);
+    addActionButton(title, command, options = true) {
+        const widget = this.makeActionButton(title, command, options);
         this.addWidget(widget);
         return widget;
     }
@@ -261,8 +273,8 @@ class AbstractToolbar {
      * Like {@link addActionButton}, except associates `tags` with the button that allow
      * different toolbar styles to give the button tag-dependent styles.
      */
-    addTaggedActionButton(tags, title, command, mustBeToplevel = true) {
-        const widget = this.makeActionButton(title, command, mustBeToplevel);
+    addTaggedActionButton(tags, title, command, options = true) {
+        const widget = this.makeActionButton(title, command, options);
         widget.setTags(tags);
         this.addWidget(widget);
         return widget;
@@ -308,6 +320,8 @@ class AbstractToolbar {
             icon: this.editor.icons.makeCloseIcon(),
         }, () => {
             exitCallback();
+        }, {
+            autoDisableInReadOnlyEditors: false,
         });
     }
     /**

package/dist/cjs/toolbar/EdgeToolbar.js

@@ -198,7 +198,6 @@ class EdgeToolbar extends AbstractToolbar_1.default {
         };
         const actionRowBBox = this.toolbarActionRow.getBoundingClientRect();
         const toolbarRowBBox = this.toolbarToolRow.getBoundingClientRect();
-        const inSameRow = actionRowBBox.y === toolbarRowBBox.y;
         const onDifferentRows = actionRowBBox.y + actionRowBBox.height <= toolbarRowBBox.y;
         if (onDifferentRows) {
             this.toolbarContainer.classList.remove('one-row');
@@ -208,11 +207,11 @@ class EdgeToolbar extends AbstractToolbar_1.default {
         }
         if (this.toolbarToolRow.clientWidth < this.toolbarToolRow.scrollWidth) {
             this.toolbarToolRow.classList.add('has-scroll');
-            // If both button areas are in the same row, don't change the padding --
-            // it could lead to an endless loop of reseize events.
-            if (!inSameRow) {
-                setExtraPadding();
-            }
+            // Note: This can potentially change the size of the tool row.
+            // Because this is run inside of a ResizeObserver callback, special
+            // care must be taken to ensure that this change doesn't re-trigger
+            // the resize observer.
+            setExtraPadding();
         }
         else {
             this.toolbarToolRow.classList.remove('has-scroll', 'extra-padding');

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

@@ -38,6 +38,7 @@ export default class IconProvider {
     makeDropdownIcon(): IconElemType;
     makeEraserIcon(eraserSize?: number): IconElemType;
     makeSelectionIcon(): IconElemType;
+    makeRotateIcon(): IconElemType;
     makeHandToolIcon(): IconElemType;
     makeTouchPanningIcon(): IconElemType;
     /** Unused by js-draw. @deprecated */

package/dist/cjs/toolbar/IconProvider.js

@@ -169,6 +169,49 @@ class IconProvider {
         icon.setAttribute('viewBox', '0 0 100 100');
         return icon;
     }
+    makeRotateIcon() {
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        icon.innerHTML = `
+			<defs>
+				<marker
+					id="arrow-marker"
+					viewBox="0 0 10 10"
+					refX="3" refY="5"
+					markerWidth="3" markerHeight="3"
+					orient="auto-start-reverse"
+				>
+					<path
+						d="M0,0 L8,5 L0,10z"
+						fill="var(--icon-color)"
+					/>
+				</marker>
+			</defs>
+
+			<path
+				marker-start="url(#arrow-marker)"
+				d="
+					M20,20
+					A30,30 0 1 1 80 80
+				"
+				fill="none"
+				stroke="var(--icon-color)"
+				stroke-width="12"
+			/>
+			<path
+				d="
+					M80,80
+					A30,30 0 1 1 20 20
+				"
+				fill="none"
+				stroke="var(--icon-color)"
+				stroke-width="12"
+				stroke-dasharray="30 10 20 10 20 10 10"
+				style="stroke-linecap: butt;"
+			/>
+		`;
+        icon.setAttribute('viewBox', '-5 -5 110 110');
+        return icon;
+    }
     makeHandToolIcon() {
         const fill = 'none';
         const strokeColor = 'var(--icon-color)';

package/dist/cjs/toolbar/widgets/ActionButtonWidget.d.ts

@@ -2,11 +2,13 @@ import Editor from '../../Editor';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default class ActionButtonWidget extends BaseWidget {
+    #private;
     protected makeIcon: () => Element | null;
     protected title: string;
     protected clickAction: () => void;
     protected mustBeToplevel: boolean;
-    constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization, mustBeToplevel?: boolean);
+    constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization, mustBeToplevel?: boolean, autoDisableInReadOnlyEditors?: boolean);
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected handleClick(): void;
     protected getTitle(): string;
     protected createIcon(): Element | null;

package/dist/cjs/toolbar/widgets/ActionButtonWidget.js

@@ -1,16 +1,33 @@
 "use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+var _ActionButtonWidget_autoDisableInReadOnlyEditors;
 Object.defineProperty(exports, "__esModule", { value: true });
 const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 class ActionButtonWidget extends BaseWidget_1.default {
-    constructor(editor, id, makeIcon, title, clickAction, localizationTable, mustBeToplevel = false) {
+    constructor(editor, id, makeIcon, title, clickAction, localizationTable, mustBeToplevel = false, autoDisableInReadOnlyEditors = true) {
         super(editor, id, localizationTable);
         this.makeIcon = makeIcon;
         this.title = title;
         this.clickAction = clickAction;
         this.mustBeToplevel = mustBeToplevel;
+        _ActionButtonWidget_autoDisableInReadOnlyEditors.set(this, void 0);
+        __classPrivateFieldSet(this, _ActionButtonWidget_autoDisableInReadOnlyEditors, autoDisableInReadOnlyEditors, "f");
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return __classPrivateFieldGet(this, _ActionButtonWidget_autoDisableInReadOnlyEditors, "f");
     }
     handleClick() {
         this.clickAction();
@@ -28,4 +45,5 @@ class ActionButtonWidget extends BaseWidget_1.default {
         return this.mustBeToplevel;
     }
 }
+_ActionButtonWidget_autoDisableInReadOnlyEditors = new WeakMap();
 exports.default = ActionButtonWidget;

package/dist/cjs/toolbar/widgets/BaseToolWidget.d.ts

@@ -6,6 +6,7 @@ import BaseWidget from './BaseWidget';
 export default abstract class BaseToolWidget extends BaseWidget {
     protected targetTool: BaseTool;
     constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected handleClick(): void;
     protected onKeyPress(event: KeyPressEvent): boolean;
     addTo(parent: HTMLElement): HTMLElement;

package/dist/cjs/toolbar/widgets/BaseToolWidget.js

@@ -39,6 +39,9 @@ class BaseToolWidget extends BaseWidget_1.default {
             }
         });
     }
+    shouldAutoDisableInReadOnlyEditor() {
+        return !this.targetTool.canReceiveInputInReadOnlyEditor();
+    }
     handleClick() {
         if (this.hasDropdown) {
             if (!this.targetTool.isEnabled()) {

package/dist/cjs/toolbar/widgets/BaseWidget.d.ts

@@ -29,6 +29,11 @@ export default abstract class BaseWidget {
     private toplevel;
     protected readonly localizationTable: ToolbarLocalization;
     constructor(editor: Editor, id: string, localizationTable?: ToolbarLocalization);
+    /**
+     * Should return a constant true or false value. If true (the default),
+     * this widget must be automatically disabled when its editor is read-only.
+     */
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
     getId(): string;
     /**
      * Note: Tags should be set *before* a tool widget is added to a toolbar.

package/dist/cjs/toolbar/widgets/BaseWidget.js

@@ -13,7 +13,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _BaseWidget_hasDropdown, _BaseWidget_tags;
+var _BaseWidget_hasDropdown, _BaseWidget_disabledDueToReadOnlyEditor, _BaseWidget_tags, _BaseWidget_readOnlyListener;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarWidgetTag = void 0;
 const ToolbarShortcutHandler_1 = __importDefault(require("../../tools/ToolbarShortcutHandler"));
@@ -36,11 +36,16 @@ class BaseWidget {
         this.id = id;
         this.dropdown = null;
         _BaseWidget_hasDropdown.set(this, void 0);
+        // True iff this widget is disabled.
         this.disabled = false;
+        // True iff this widget is currently disabled because the editor is read only
+        _BaseWidget_disabledDueToReadOnlyEditor.set(this, false);
         _BaseWidget_tags.set(this, []);
         // Maps subWidget IDs to subWidgets.
         this.subWidgets = {};
         this.toplevel = true;
+        // Listens for changes in whether the editor is read-only
+        _BaseWidget_readOnlyListener.set(this, null);
         this.localizationTable = localizationTable ?? editor.localization;
         // Default layout manager
         const defaultLayoutManager = new DropdownLayoutManager_1.default((text) => this.editor.announceForAccessibility(text), this.localizationTable);
@@ -68,6 +73,13 @@ class BaseWidget {
             toolbarShortcutHandlers[0].registerListener(event => this.onKeyPress(event));
         }
     }
+    /**
+     * Should return a constant true or false value. If true (the default),
+     * this widget must be automatically disabled when its editor is read-only.
+     */
+    shouldAutoDisableInReadOnlyEditor() {
+        return true;
+    }
     getId() {
         return this.id;
     }
@@ -262,6 +274,19 @@ class BaseWidget {
         if (this.container.parentElement) {
             this.container.remove();
         }
+        __classPrivateFieldSet(this, _BaseWidget_readOnlyListener, this.editor.isReadOnlyReactiveValue().onUpdateAndNow(readOnly => {
+            if (readOnly && this.shouldAutoDisableInReadOnlyEditor() && !this.disabled) {
+                this.setDisabled(true);
+                __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, true, "f");
+                if (__classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f")) {
+                    this.dropdown?.requestHide();
+                }
+            }
+            else if (!readOnly && __classPrivateFieldGet(this, _BaseWidget_disabledDueToReadOnlyEditor, "f")) {
+                __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, false, "f");
+                this.setDisabled(false);
+            }
+        }), "f");
         parent.appendChild(this.container);
         return this.container;
     }
@@ -279,6 +304,8 @@ class BaseWidget {
     }
     remove() {
         this.container.remove();
+        __classPrivateFieldGet(this, _BaseWidget_readOnlyListener, "f")?.remove();
+        __classPrivateFieldSet(this, _BaseWidget_readOnlyListener, null, "f");
     }
     updateIcon() {
         let newIcon = this.createIcon();
@@ -295,6 +322,7 @@ class BaseWidget {
     }
     setDisabled(disabled) {
         this.disabled = disabled;
+        __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, false, "f");
         if (this.disabled) {
             this.button.classList.add('disabled');
             this.button.setAttribute('aria-disabled', 'true');
@@ -415,5 +443,5 @@ class BaseWidget {
         }
     }
 }
-_BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_tags = new WeakMap();
+_BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_disabledDueToReadOnlyEditor = new WeakMap(), _BaseWidget_tags = new WeakMap(), _BaseWidget_readOnlyListener = new WeakMap();
 exports.default = BaseWidget;

package/dist/cjs/toolbar/widgets/DocumentPropertiesWidget.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Erase_1 = __importDefault(require("../../commands/Erase"));
 const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
 const BackgroundComponent_1 = __importStar(require("../../components/BackgroundComponent"));
-const EditorImage_1 = require("../../EditorImage");
+const EditorImage_1 = require("../../image/EditorImage");
 const math_1 = require("@js-draw/math");
 const types_1 = require("../../types");
 const constants_1 = require("../constants");

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

@@ -7,6 +7,7 @@ export default class HandToolWidget extends BaseToolWidget {
     protected overridePanZoomTool: PanZoom;
     private allowTogglingBaseTool;
     constructor(editor: Editor, overridePanZoomTool: PanZoom, localizationTable: ToolbarLocalization);
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
     private static getPrimaryHandTool;
     protected getTitle(): string;
     protected createIcon(): Element;

package/dist/cjs/toolbar/widgets/HandToolWidget.js

@@ -103,6 +103,9 @@ class HandModeWidget extends BaseWidget_1.default {
         });
         this.setSelected(false);
     }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
     setModeFlag(enabled) {
         this.tool.setModeEnabled(this.flag, enabled);
     }
@@ -141,6 +144,9 @@ class HandToolWidget extends BaseToolWidget_1.default {
         this.addSubWidget(touchPanningWidget);
         this.addSubWidget(rotationLockWidget);
     }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
     static getPrimaryHandTool(toolController) {
         const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom_1.default);
         const primaryPanZoomTool = primaryPanZoomToolList[0];

package/dist/cjs/toolbar/widgets/InsertImageWidget.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const ImageComponent_1 = __importDefault(require("../../components/ImageComponent"));
 const Erase_1 = __importDefault(require("../../commands/Erase"));
-const EditorImage_1 = __importDefault(require("../../EditorImage"));
+const EditorImage_1 = __importDefault(require("../../image/EditorImage"));
 const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
 const SelectionTool_1 = __importDefault(require("../../tools/SelectionTool/SelectionTool"));
 const math_1 = require("@js-draw/math");

package/dist/cjs/toolbar/widgets/OverflowWidget.d.ts

@@ -5,6 +5,7 @@ export default class OverflowWidget extends BaseWidget {
     private overflowChildren;
     private overflowContainer;
     constructor(editor: Editor, localizationTable?: ToolbarLocalization);
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected getTitle(): string;
     protected createIcon(): Element | null;
     protected handleClick(): void;

package/dist/cjs/toolbar/widgets/OverflowWidget.js

@@ -13,6 +13,9 @@ class OverflowWidget extends BaseWidget_1.default {
         this.container.classList.add('dropdownShowable');
         this.overflowContainer ??= document.createElement('div');
     }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
     getTitle() {
         return this.localizationTable.toggleOverflow;
     }

package/dist/cjs/toolbar/widgets/SaveActionWidget.d.ts

@@ -4,6 +4,7 @@ import { ToolbarLocalization } from '../localization';
 import ActionButtonWidget from './ActionButtonWidget';
 declare class SaveActionWidget extends ActionButtonWidget {
     constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void);
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected onKeyPress(event: KeyPressEvent): boolean;
     mustBeInToplevelMenu(): boolean;
 }

package/dist/cjs/toolbar/widgets/SaveActionWidget.js

@@ -11,6 +11,9 @@ class SaveActionWidget extends ActionButtonWidget_1.default {
         super(editor, 'save-button', editor.icons.makeSaveIcon, localization.save, saveCallback);
         this.setTags([BaseWidget_1.ToolbarWidgetTag.Save]);
     }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
     onKeyPress(event) {
         if (this.editor.shortcuts.matchesShortcut(keybindings_1.saveKeyboardShortcut, event)) {
             this.clickAction();

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

@@ -8,6 +8,8 @@ export default abstract class BaseTool implements InputEventListener {
     private notifier;
     readonly description: string;
     protected constructor(notifier: EditorNotifier, description: string);
+    /** Override this to allow this tool to be enabled in a read-only editor */
+    canReceiveInputInReadOnlyEditor(): boolean;
     setInputMapper(mapper: InputMapper | null): void;
     getInputMapper(): InputMapper | null;
     private dispatchEventToCallback;
@@ -54,4 +56,5 @@ export default abstract class BaseTool implements InputEventListener {
     enabledValue(): ReactiveValue<boolean>;
     setToolGroup(group: ToolEnabledGroup): void;
     getToolGroup(): ToolEnabledGroup | null;
+    onDestroy(): void;
 }

package/dist/cjs/tools/BaseTool.js

@@ -10,7 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _BaseTool_enabled, _BaseTool_group, _BaseTool_inputMapper;
+var _BaseTool_enabled, _BaseTool_group, _BaseTool_inputMapper, _BaseTool_readOnlyEditorChangeListener;
 Object.defineProperty(exports, "__esModule", { value: true });
 const types_1 = require("../types");
 const inputEvents_1 = require("../inputEvents");
@@ -22,6 +22,7 @@ class BaseTool {
         _BaseTool_enabled.set(this, void 0);
         _BaseTool_group.set(this, null);
         _BaseTool_inputMapper.set(this, null);
+        _BaseTool_readOnlyEditorChangeListener.set(this, null);
         __classPrivateFieldSet(this, _BaseTool_enabled, ReactiveValue_1.ReactiveValue.fromInitialValue(true), "f");
         __classPrivateFieldGet(this, _BaseTool_enabled, "f").onUpdate(enabled => {
             // Ensure that at most one tool in the group is enabled.
@@ -40,6 +41,10 @@ class BaseTool {
             }
         });
     }
+    /** Override this to allow this tool to be enabled in a read-only editor */
+    canReceiveInputInReadOnlyEditor() {
+        return false;
+    }
     setInputMapper(mapper) {
         __classPrivateFieldSet(this, _BaseTool_inputMapper, mapper, "f");
         if (mapper) {
@@ -157,6 +162,12 @@ class BaseTool {
         }
         return null;
     }
+    // Called when the tool is removed/when the editor is destroyed.
+    // Subclasses that override this method **must call super.onDestroy()**.
+    onDestroy() {
+        __classPrivateFieldGet(this, _BaseTool_readOnlyEditorChangeListener, "f")?.remove();
+        __classPrivateFieldSet(this, _BaseTool_readOnlyEditorChangeListener, null, "f");
+    }
 }
-_BaseTool_enabled = new WeakMap(), _BaseTool_group = new WeakMap(), _BaseTool_inputMapper = new WeakMap();
+_BaseTool_enabled = new WeakMap(), _BaseTool_group = new WeakMap(), _BaseTool_inputMapper = new WeakMap(), _BaseTool_readOnlyEditorChangeListener = new WeakMap();
 exports.default = BaseTool;

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

@@ -7,6 +7,7 @@ export default class FindTool extends BaseTool {
     private searchInput;
     private currentMatchIdx;
     constructor(editor: Editor);
+    canReceiveInputInReadOnlyEditor(): boolean;
     private getMatches;
     private focusCurrentMatch;
     private toNextMatch;

package/dist/cjs/tools/FindTool.js

@@ -21,6 +21,9 @@ class FindTool extends BaseTool_1.default {
         this.overlay.style.display = 'none';
         this.overlay.classList.add(`${cssPrefix}-overlay`);
     }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
     getMatches(searchFor) {
         searchFor = searchFor.toLocaleLowerCase();
         const allTextComponents = this.editor.image.getAllElements()
@@ -113,7 +116,7 @@ class FindTool extends BaseTool_1.default {
     }
     setEnabled(enabled) {
         super.setEnabled(enabled);
-        if (enabled) {
+        if (this.isEnabled()) {
             this.setVisible(false);
         }
     }

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

@@ -32,6 +32,7 @@ export default class PanZoom extends BaseTool {
     private inertialScroller;
     private velocity;
     constructor(editor: Editor, mode: PanZoomMode, description: string);
+    canReceiveInputInReadOnlyEditor(): boolean;
     computePinchData(p1: Pointer, p2: Pointer): PinchData;
     private allPointersAreOfType;
     onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean;

package/dist/cjs/tools/PanZoom.js

@@ -80,6 +80,10 @@ class PanZoom extends BaseTool_1.default {
         this.inertialScroller = null;
         this.velocity = null;
     }
+    // The pan/zoom tool can be used in a read-only editor.
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
     // Returns information about the pointers in a gesture
     computePinchData(p1, p2) {
         // Swap the pointers to ensure consistent ordering.

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

@@ -40,6 +40,5 @@ export default class Pen extends BaseTool {
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;
     getStyleValue(): MutableReactiveValue<PenStyle>;
-    setEnabled(enabled: boolean): void;
     onKeyPress(event: KeyPressEvent): boolean;
 }

package/dist/cjs/tools/Pen.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const math_1 = require("@js-draw/math");
-const EditorImage_1 = __importDefault(require("../EditorImage"));
+const EditorImage_1 = __importDefault(require("../image/EditorImage"));
 const Pointer_1 = require("../Pointer");
 const FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
 const types_1 = require("../types");
@@ -205,9 +205,6 @@ class Pen extends BaseTool_1.default {
     getColor() { return this.style.color; }
     getStrokeFactory() { return this.style.factory; }
     getStyleValue() { return this.styleValue; }
-    setEnabled(enabled) {
-        super.setEnabled(enabled);
-    }
     onKeyPress(event) {
         const shortcuts = this.editor.shortcuts;
         // Ctrl+Z: End the stroke so that it can be undone/redone.

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

@@ -16,6 +16,7 @@ export default class PipetteTool extends BaseTool {
     private colorPreviewListener;
     private colorSelectListener;
     constructor(editor: Editor, description: string);
+    canReceiveInputInReadOnlyEditor(): boolean;
     private updateSelectingStatus;
     setColorListener(colorPreviewListener: ColorListener, colorSelectListener: ColorListener): void;
     clearColorListener(): void;

package/dist/cjs/tools/PipetteTool.js

@@ -23,6 +23,9 @@ class PipetteTool extends BaseTool_1.default {
             this.updateSelectingStatus();
         });
     }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
     // Ensures that the root editor element correctly reflects whether color selection
     // is in progress.
     updateSelectingStatus() {

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

@@ -4,5 +4,6 @@ import BaseTool from '../BaseTool';
 export default class SelectAllShortcutHandler extends BaseTool {
     private editor;
     constructor(editor: Editor);
+    canReceiveInputInReadOnlyEditor(): boolean;
     onKeyPress(event: KeyPressEvent): boolean;
 }

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

@@ -12,6 +12,9 @@ class SelectAllShortcutHandler extends BaseTool_1.default {
         super(editor.notifier, editor.localization.selectAllTool);
         this.editor = editor;
     }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
     // @internal
     onKeyPress(event) {
         if (this.editor.shortcuts.matchesShortcut(keybindings_1.selectAllKeyboardShortcut, event)) {

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

@@ -11,6 +11,7 @@ export default class Selection {
     private editor;
     private handles;
     private originalRegion;
+    private selectionTightBoundingBox;
     private transformers;
     private transform;
     private selectedElems;
@@ -39,6 +40,7 @@ export default class Selection {
     private previewTransformCmds;
     resolveToObjects(): boolean;
     recomputeRegion(): boolean;
+    padRegion(): void;
     getMinCanvasSize(): number;
     getSelectedItemCount(): number;
     updateUI(): void;