js-draw 1.3.0 → 1.4.0

package/dist/mjs/localizations/es.mjs

@@ -1,68 +1,88 @@
 import  { defaultEditorLocalization }  from '../localization.mjs';
-// A partial Spanish localization.
+// A partial Spanish localization, created with /scripts/markdownTranslationFormToTs.ts
 const localization = {
     ...defaultEditorLocalization,
-    // Strings for the main editor interface
-    // (see src/localization.ts)
-    loading: (percentage) => `Cargando: ${percentage}%...`,
-    imageEditor: 'Editor de dibujos',
-    undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`,
-    redoAnnouncement: (commandDescription) => `${commandDescription} fue rehecho`,
-    undo: 'Deshace',
-    redo: 'Rehace',
-    // Strings for the toolbar
-    // (see src/toolbar/localization.ts)
     pen: 'Lapiz',
     eraser: 'Borrador',
     select: 'Selecciona',
-    thicknessLabel: 'Tamaño',
-    colorLabel: 'Color',
-    doneLoading: 'El cargado terminó',
-    fontLabel: 'Fuente: ',
-    anyDevicePanning: 'Mover la pantalla con todo dispotivo',
-    touchPanning: 'Mover la pantalla con un dedo',
-    touchPanTool: 'Instrumento de mover la pantalla con un dedo',
-    outlinedRectanglePen: 'Rectángulo con nada más que un borde',
-    filledRectanglePen: 'Rectángulo sin borde',
-    linePen: 'Línea',
-    arrowPen: 'Flecha',
-    roundedTipPen: 'Lapiz Redondeado',
-    selectPenTip: 'Forma de dibuja',
     handTool: 'Mover',
-    zoom: 'Zoom',
+    image: 'Imagen',
+    chooseFile: 'Seleccionar archivo',
+    cancel: 'Cancelar',
     resetView: 'Reiniciar vista',
+    thicknessLabel: 'Tamaño',
+    fontLabel: 'Fuente:',
+    textSize: 'Tamaño',
     resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado',
     deleteSelection: 'Borra la selección',
     duplicateSelection: 'Duplica la selección',
+    exit: 'Salir',
+    save: 'Guardar',
+    undo: 'Deshace',
+    redo: 'Rehace',
+    selectPenTip: 'Punta',
+    selectShape: 'Forma',
     pickColorFromScreen: 'Selecciona un color de la pantalla',
     clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color',
-    dropdownShown(toolName) {
-        return `Menú por ${toolName} es visible`;
-    },
-    dropdownHidden: function (toolName) {
-        return `Menú por ${toolName} fue ocultado`;
-    },
-    colorChangedAnnouncement: function (color) {
-        return `Color fue cambiado a ${color}`;
-    },
-    keyboardPanZoom: 'Mover la pantalla con el teclado',
-    penTool: function (penId) {
-        return `Lapiz ${penId}`;
-    },
+    documentProperties: 'Fondo',
+    backgroundColor: 'Color de fondo',
+    imageWidthOption: 'Ancho',
+    imageHeightOption: 'Alto',
+    toggleOverflow: 'Más',
+    touchPanning: 'Mover la pantalla con un dedo',
+    roundedTipPen: 'Lapiz Redondeado',
+    arrowPen: 'Flecha',
+    linePen: 'Línea',
+    outlinedRectanglePen: 'Rectángulo delineado',
+    filledRectanglePen: 'Rectángulo sin borde',
+    lockRotation: 'Bloquea rotación',
+    paste: 'Pegar',
+    closeSidebar: (toolName) => `Close sidebar for ${toolName}`,
+    dropdownShown: (toolName) => `Menú por ${toolName} es visible`,
+    dropdownHidden: (toolName) => { return `Menú por ${toolName} fue ocultado`; },
+    zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,
+    colorChangedAnnouncement: (color) => { return `Color fue cambiado a ${color}`; },
+    imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`,
+    imageLoadError: (message) => `Error cargando imagen: ${message}`,
+    penTool: (penId) => { return `Lapiz ${penId}`; },
     selectionTool: 'Selecciona',
     eraserTool: 'Borrador',
+    touchPanTool: 'Instrumento de mover la pantalla con un dedo',
+    pipetteTool: 'Seleccione un color de la pantalla',
+    keyboardPanZoom: 'Mover la pantalla con el teclado',
     textTool: 'Texto',
     enterTextToInsert: 'Entra texto',
-    textSize: 'Tamaño',
+    findLabel: 'Buscar',
+    toNextMatch: 'Próxima',
+    closeDialog: 'Cerrar',
+    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
+    anyDevicePanning: 'Mover la pantalla con todo dispotivo',
+    copied: (count, description) => `Copied ${count} ${description}`,
+    pasted: (count, description) => `Pasted ${count} ${description}`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
+    transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
+    resizeOutputCommand: (newSize) => `Resized image to ${newSize.w}x${newSize.h}`,
+    addElementAction: (componentDescription) => `Added ${componentDescription}`,
+    eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
+    duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,
+    unionOf: (actionDescription, actionCount) => `Union: ${actionCount} ${actionDescription}`,
+    inverseOf: (actionDescription) => `Inverse of ${actionDescription}`,
+    rotatedBy: (degrees) => `Rotated by ${Math.abs(degrees)} degrees ${degrees < 0 ? 'clockwise' : 'counter-clockwise'}`,
+    selectedElements: (count) => `Selected ${count} element${count === 1 ? '' : 's'}`,
+    filledBackgroundWithColor: (color) => `Filled background (${color})`,
+    text: (text) => `Text object: ${text}`,
+    imageNode: (label) => `Image: ${label}`,
+    restyledElement: (elementDescription) => `Restyled ${elementDescription}`,
+    pathNodeCount: (count) => `There are ${count} visible path objects.`,
+    textNodeCount: (count) => `There are ${count} visible text nodes.`,
+    imageNodeCount: (nodeCount) => `There are ${nodeCount} visible image nodes.`,
+    textNode: (content) => `Text: ${content}`,
     rerenderAsText: 'Redibuja la pantalla al texto',
-    lockRotation: 'Bloquea rotación',
-    image: 'Imagen',
-    imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`,
-    imageLoadError: (message) => `Error cargando imagen: ${message}`,
-    toggleOverflow: 'Más',
-    documentProperties: 'Fondo',
-    imageWidthOption: 'Ancho',
-    imageHeightOption: 'Alto',
-    backgroundColor: 'Color de fondo: '
+    loading: (percentage) => `Cargando: ${percentage}%...`,
+    imageEditor: 'Editor de dibujos',
+    doneLoading: 'El cargado terminó',
+    undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`,
+    redoAnnouncement: (commandDescription) => `${commandDescription} fue rehecho`,
 };
 export default localization;

package/dist/mjs/rendering/caching/RenderingCache.d.ts

@@ -1,4 +1,4 @@
-import { ImageNode } from '../../EditorImage';
+import { ImageNode } from '../../image/EditorImage';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheProps } from './types';

package/dist/mjs/rendering/caching/RenderingCacheNode.d.ts

@@ -1,4 +1,4 @@
-import { ImageNode } from '../../EditorImage';
+import { ImageNode } from '../../image/EditorImage';
 import { Rect2 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';

package/dist/mjs/rendering/caching/RenderingCacheNode.mjs

@@ -1,5 +1,5 @@
 // A cache record with sub-nodes.
-import  { sortLeavesByZIndex }  from '../../EditorImage.mjs';
+import  { sortLeavesByZIndex }  from '../../image/EditorImage.mjs';
 import { Rect2, Color4 } from '@js-draw/math';
 // 3x3 divisions for each node.
 const cacheDivisionSize = 3;
@@ -42,11 +42,12 @@ export default class RenderingCacheNode {
     // Generates children, if missing.
     generateChildren() {
         if (this.instantiatedChildren.length === 0) {
-            const childRects = this.region.divideIntoGrid(cacheDivisionSize, cacheDivisionSize);
-            if (this.region.size.x === 0 || this.region.size.y === 0) {
+            if (this.region.size.x / cacheDivisionSize === 0 || this.region.size.y / cacheDivisionSize === 0) {
                 console.warn('Cache element has zero size! Not generating children.');
                 return;
             }
+            const childRects = this.region.divideIntoGrid(cacheDivisionSize, cacheDivisionSize);
+            console.assert(childRects.length === cacheDivisionSize * cacheDivisionSize, 'Warning: divideIntoGrid created the wrong number of subrectangles!');
             for (const rect of childRects) {
                 const child = new RenderingCacheNode(rect, this.cacheState);
                 child.parent = this;

package/dist/mjs/rendering/renderers/SVGRenderer.mjs

@@ -129,26 +129,18 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Apply [elemTransform] to [elem]. Uses both a `matrix` and `.x`, `.y` properties if `setXY` is true.
     // Otherwise, just uses a `matrix`.
-    transformFrom(elemTransform, elem, inCanvasSpace = false, setXY = true) {
-        let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
-        const translation = transform.transformVec2(Vec2.zero);
-        if (setXY) {
-            transform = transform.rightMul(Mat33.translation(translation.times(-1)));
-        }
+    transformFrom(elemTransform, elem, inCanvasSpace = false) {
+        const transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
         if (!transform.eq(Mat33.identity)) {
-            elem.style.transform = `matrix(
-				${transform.a1}, ${transform.b1},
-				${transform.a2}, ${transform.b2},
-				${transform.a3}, ${transform.b3}
-			)`;
+            const matrixString = transform.toCSSMatrix();
+            elem.style.transform = matrixString;
+            // Most browsers round the components of CSS transforms.
+            // Include a higher precision copy of the element's transform.
+            elem.setAttribute('data-highp-transform', matrixString);
         }
         else {
             elem.style.transform = '';
         }
-        if (setXY) {
-            elem.setAttribute('x', `${toRoundedString(translation.x)}`);
-            elem.setAttribute('y', `${toRoundedString(translation.y)}`);
-        }
     }
     drawText(text, transform, style) {
         const applyTextStyles = (elem, style) => {
@@ -184,10 +176,7 @@ export default class SVGRenderer extends AbstractRenderer {
         if (!this.textContainer) {
             const container = document.createElementNS(svgNameSpace, 'text');
             container.appendChild(document.createTextNode(text));
-            // Don't set .x/.y properties (just use .style.transform).
-            // Child nodes aren't translated by .x/.y properties, but are by .style.transform.
-            const setXY = false;
-            this.transformFrom(transform, container, true, setXY);
+            this.transformFrom(transform, container, true);
             applyTextStyles(container, style);
             this.elem.appendChild(container);
             this.objectElems?.push(container);

package/dist/mjs/rendering/renderers/SVGRenderer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/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/mjs/toolbar/AbstractToolbar.mjs

@@ -230,7 +230,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 = () => {
@@ -239,16 +247,20 @@ class AbstractToolbar {
             }
             return title.icon;
         };
-        const widget = new ActionButtonWidget(this.editor, widgetId, makeIcon, titleString, command, this.editor.localization, mustBeToplevel);
+        const widget = new ActionButtonWidget(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;
     }
@@ -256,8 +268,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;
@@ -303,6 +315,8 @@ class AbstractToolbar {
             icon: this.editor.icons.makeCloseIcon(),
         }, () => {
             exitCallback();
+        }, {
+            autoDisableInReadOnlyEditors: false,
         });
     }
     /**

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -191,7 +191,6 @@ export default class EdgeToolbar extends AbstractToolbar {
         };
         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');
@@ -201,11 +200,11 @@ export default class EdgeToolbar extends AbstractToolbar {
         }
         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/mjs/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/mjs/toolbar/IconProvider.mjs

@@ -164,6 +164,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/mjs/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/mjs/toolbar/widgets/ActionButtonWidget.mjs

@@ -1,11 +1,28 @@
+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 _ActionButtonWidget_autoDisableInReadOnlyEditors;
 import  BaseWidget  from './BaseWidget.mjs';
-export default class ActionButtonWidget extends BaseWidget {
-    constructor(editor, id, makeIcon, title, clickAction, localizationTable, mustBeToplevel = false) {
+class ActionButtonWidget extends BaseWidget {
+    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();
@@ -23,3 +40,5 @@ export default class ActionButtonWidget extends BaseWidget {
         return this.mustBeToplevel;
     }
 }
+_ActionButtonWidget_autoDisableInReadOnlyEditors = new WeakMap();
+export default ActionButtonWidget;

package/dist/mjs/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/mjs/toolbar/widgets/BaseToolWidget.mjs

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

package/dist/mjs/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/mjs/toolbar/widgets/BaseWidget.mjs

@@ -9,7 +9,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 _BaseWidget_hasDropdown, _BaseWidget_tags;
+var _BaseWidget_hasDropdown, _BaseWidget_disabledDueToReadOnlyEditor, _BaseWidget_tags, _BaseWidget_readOnlyListener;
 import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
 import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent }  from '../../inputEvents.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
@@ -30,11 +30,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((text) => this.editor.announceForAccessibility(text), this.localizationTable);
@@ -62,6 +67,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;
     }
@@ -256,6 +268,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;
     }
@@ -273,6 +298,8 @@ class BaseWidget {
     }
     remove() {
         this.container.remove();
+        __classPrivateFieldGet(this, _BaseWidget_readOnlyListener, "f")?.remove();
+        __classPrivateFieldSet(this, _BaseWidget_readOnlyListener, null, "f");
     }
     updateIcon() {
         let newIcon = this.createIcon();
@@ -289,6 +316,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');
@@ -409,5 +437,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();
 export default BaseWidget;

package/dist/mjs/toolbar/widgets/DocumentPropertiesWidget.mjs

@@ -1,7 +1,7 @@
 import  Erase  from '../../commands/Erase.mjs';
 import  uniteCommands  from '../../commands/uniteCommands.mjs';
 import  BackgroundComponent, { BackgroundType }  from '../../components/BackgroundComponent.mjs';
-import  { EditorImageEventType }  from '../../EditorImage.mjs';
+import  { EditorImageEventType }  from '../../image/EditorImage.mjs';
 import { Rect2 } from '@js-draw/math';
 import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';

package/dist/mjs/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/mjs/toolbar/widgets/HandToolWidget.mjs

@@ -75,6 +75,9 @@ class HandModeWidget extends BaseWidget {
         });
         this.setSelected(false);
     }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
     setModeFlag(enabled) {
         this.tool.setModeEnabled(this.flag, enabled);
     }
@@ -113,6 +116,9 @@ export default class HandToolWidget extends BaseToolWidget {
         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];

package/dist/mjs/toolbar/widgets/InsertImageWidget.mjs

@@ -1,6 +1,6 @@
 import  ImageComponent  from '../../components/ImageComponent.mjs';
 import  Erase  from '../../commands/Erase.mjs';
-import  EditorImage  from '../../EditorImage.mjs';
+import  EditorImage  from '../../image/EditorImage.mjs';
 import  uniteCommands  from '../../commands/uniteCommands.mjs';
 import  SelectionTool  from '../../tools/SelectionTool/SelectionTool.mjs';
 import { Mat33 } from '@js-draw/math';

package/dist/mjs/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/mjs/toolbar/widgets/OverflowWidget.mjs

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