js-draw 1.3.1 → 1.4.0

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

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

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

package/dist/mjs/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/mjs/tools/BaseTool.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 _BaseTool_enabled, _BaseTool_group, _BaseTool_inputMapper;
+var _BaseTool_enabled, _BaseTool_group, _BaseTool_inputMapper, _BaseTool_readOnlyEditorChangeListener;
 import  { EditorEventType }  from '../types.mjs';
 import  { InputEvtType }  from '../inputEvents.mjs';
 import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
@@ -20,6 +20,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.fromInitialValue(true), "f");
         __classPrivateFieldGet(this, _BaseTool_enabled, "f").onUpdate(enabled => {
             // Ensure that at most one tool in the group is enabled.
@@ -38,6 +39,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) {
@@ -155,6 +160,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();
 export default BaseTool;

package/dist/mjs/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/mjs/tools/FindTool.mjs

@@ -16,6 +16,9 @@ export default class FindTool extends BaseTool {
         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()
@@ -108,7 +111,7 @@ export default class FindTool extends BaseTool {
     }
     setEnabled(enabled) {
         super.setEnabled(enabled);
-        if (enabled) {
+        if (this.isEnabled()) {
             this.setVisible(false);
         }
     }

package/dist/mjs/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/mjs/tools/PanZoom.mjs

@@ -74,6 +74,10 @@ export default class PanZoom extends BaseTool {
         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/mjs/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/mjs/tools/Pen.mjs

@@ -1,5 +1,5 @@
 import { Color4 } from '@js-draw/math';
-import  EditorImage  from '../EditorImage.mjs';
+import  EditorImage  from '../image/EditorImage.mjs';
 import  { PointerDevice }  from '../Pointer.mjs';
 import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBuilder.mjs';
 import  { EditorEventType }  from '../types.mjs';
@@ -200,9 +200,6 @@ export default class Pen extends BaseTool {
     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/mjs/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/mjs/tools/PipetteTool.mjs

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

package/dist/mjs/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/mjs/tools/SelectionTool/SelectAllShortcutHandler.mjs

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

package/dist/mjs/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;

package/dist/mjs/tools/SelectionTool/Selection.mjs

@@ -5,20 +5,23 @@
 var _a;
 import  SerializableCommand  from '../../commands/SerializableCommand.mjs';
 import { Mat33, Rect2, Vec2 } from '@js-draw/math';
-import  SelectionHandle, { HandleShape, handleSize }  from './SelectionHandle.mjs';
+import  SelectionHandle, { HandleAction, handleSize }  from './SelectionHandle.mjs';
 import  { cssPrefix }  from './SelectionTool.mjs';
 import  Viewport  from '../../Viewport.mjs';
 import  Erase  from '../../commands/Erase.mjs';
 import  Duplicate  from '../../commands/Duplicate.mjs';
 import  { DragTransformer, ResizeTransformer, RotateTransformer }  from './TransformMode.mjs';
 import  { ResizeMode }  from './types.mjs';
-import  EditorImage  from '../../EditorImage.mjs';
+import  EditorImage  from '../../image/EditorImage.mjs';
 const updateChunkSize = 100;
 const maxPreviewElemCount = 500;
 // @internal
 class Selection {
     constructor(startPoint, editor) {
         this.editor = editor;
+        // The last-computed bounding box of selected content
+        // @see getTightBoundingBox
+        this.selectionTightBoundingBox = null;
         this.transform = Mat33.identity;
         this.selectedElems = [];
         this.hasParent = true;
@@ -37,10 +40,23 @@ class Selection {
         this.backgroundElem = document.createElement('div');
         this.backgroundElem.classList.add(`${cssPrefix}selection-background`);
         this.container.appendChild(this.backgroundElem);
-        const resizeHorizontalHandle = new SelectionHandle(HandleShape.Square, Vec2.of(1, 0.5), this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.HorizontalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
-        const resizeVerticalHandle = new SelectionHandle(HandleShape.Square, Vec2.of(0.5, 1), this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.VerticalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
-        const resizeBothHandle = new SelectionHandle(HandleShape.Square, Vec2.of(1, 1), this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.Both), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
-        const rotationHandle = new SelectionHandle(HandleShape.Circle, Vec2.of(0.5, 0), this, this.editor.viewport, (startPoint) => this.transformers.rotate.onDragStart(startPoint), (currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint), () => this.transformers.rotate.onDragEnd());
+        const resizeHorizontalHandle = new SelectionHandle({
+            action: HandleAction.ResizeX,
+            side: Vec2.of(1, 0.5),
+        }, this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.HorizontalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
+        const resizeVerticalHandle = new SelectionHandle({
+            action: HandleAction.ResizeY,
+            side: Vec2.of(0.5, 1),
+        }, this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.VerticalOnly), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
+        const resizeBothHandle = new SelectionHandle({
+            action: HandleAction.ResizeXY,
+            side: Vec2.of(1, 1),
+        }, this, this.editor.viewport, (startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.Both), (currentPoint) => this.transformers.resize.onDragUpdate(currentPoint), () => this.transformers.resize.onDragEnd());
+        const rotationHandle = new SelectionHandle({
+            action: HandleAction.Rotate,
+            side: Vec2.of(0.5, 0),
+            icon: this.editor.icons.makeRotateIcon(),
+        }, this, this.editor.viewport, (startPoint) => this.transformers.rotate.onDragStart(startPoint), (currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint), () => this.transformers.rotate.onDragEnd());
         this.handles = [
             resizeBothHandle,
             resizeHorizontalHandle,
@@ -167,18 +183,26 @@ class Selection {
     // Returns false if the selection is empty.
     recomputeRegion() {
         const newRegion = this.computeTightBoundingBox();
+        this.selectionTightBoundingBox = newRegion;
         if (!newRegion) {
             this.cancelSelection();
             return false;
         }
         this.originalRegion = newRegion;
+        this.padRegion();
+        return true;
+    }
+    // Applies padding to the current region if it is too small.
+    // @internal
+    padRegion() {
+        const sourceRegion = this.selectionTightBoundingBox ?? this.originalRegion;
         const minSize = this.getMinCanvasSize();
-        if (this.originalRegion.w < minSize || this.originalRegion.h < minSize) {
+        if (sourceRegion.w < minSize || sourceRegion.h < minSize) {
             // Add padding
             const padding = minSize / 2;
-            this.originalRegion = Rect2.bboxOf(this.originalRegion.corners, padding);
+            this.originalRegion = Rect2.bboxOf(sourceRegion.corners, padding);
+            this.updateUI();
         }
-        return true;
     }
     getMinCanvasSize() {
         const canvasHandleSize = handleSize / this.editor.viewport.getScaleFactor();
@@ -202,6 +226,14 @@ class Selection {
         const rotationDeg = this.screenRegionRotation * 180 / Math.PI;
         this.backgroundElem.style.transform = `rotate(${rotationDeg}deg)`;
         this.backgroundElem.style.transformOrigin = 'center';
+        // If closer to perpendicular, apply different CSS
+        const perpendicularClassName = `${cssPrefix}rotated-near-perpendicular`;
+        if (Math.abs(Math.sin(this.screenRegionRotation)) > 0.5) {
+            this.container.classList.add(perpendicularClassName);
+        }
+        else {
+            this.container.classList.remove(perpendicularClassName);
+        }
         for (const handle of this.handles) {
             handle.updatePosition();
         }
@@ -373,6 +405,7 @@ class Selection {
     }
     setToPoint(point) {
         this.originalRegion = this.originalRegion.grownToPoint(point);
+        this.selectionTightBoundingBox = null;
         this.updateUI();
     }
     cancelSelection() {
@@ -380,12 +413,15 @@ class Selection {
             this.container.remove();
         }
         this.originalRegion = Rect2.empty;
+        this.selectionTightBoundingBox = null;
         this.hasParent = false;
     }
     setSelectedObjects(objects, bbox) {
         this.addRemoveSelectionFromImage(true);
         this.originalRegion = bbox;
+        this.selectionTightBoundingBox = bbox;
         this.selectedElems = objects.filter(object => object.isSelectable());
+        this.padRegion();
         this.updateUI();
     }
     getSelectedObjects() {

package/dist/mjs/tools/SelectionTool/SelectionHandle.d.ts

@@ -2,17 +2,23 @@ import { Point2, Vec2 } from '@js-draw/math';
 import Selection from './Selection';
 import Pointer from '../../Pointer';
 import Viewport from '../../Viewport';
-export declare enum HandleShape {
-    Circle = 0,
-    Square = 1
+export declare enum HandleAction {
+    ResizeXY = "resize-xy",
+    Rotate = "rotate",
+    ResizeX = "resize-x",
+    ResizeY = "resize-y"
+}
+export interface HandlePresentation {
+    side: Vec2;
+    icon?: Element;
+    action: HandleAction;
 }
 export declare const handleSize = 30;
 export type DragStartCallback = (startPoint: Point2) => void;
 export type DragUpdateCallback = (canvasPoint: Point2) => void;
 export type DragEndCallback = () => void;
 export default class SelectionHandle {
-    readonly shape: HandleShape;
-    private readonly parentSide;
+    readonly presentation: HandlePresentation;
     private readonly parent;
     private readonly viewport;
     private readonly onDragStart;
@@ -20,7 +26,9 @@ export default class SelectionHandle {
     private readonly onDragEnd;
     private element;
     private snapToGrid;
-    constructor(shape: HandleShape, parentSide: Vec2, parent: Selection, viewport: Viewport, onDragStart: DragStartCallback, onDragUpdate: DragUpdateCallback, onDragEnd: DragEndCallback);
+    private shape;
+    private parentSide;
+    constructor(presentation: HandlePresentation, parent: Selection, viewport: Viewport, onDragStart: DragStartCallback, onDragUpdate: DragUpdateCallback, onDragEnd: DragEndCallback);
     /**
      * Adds this to `container`, where `conatiner` should be the background/selection
      * element visible on the screen.

package/dist/mjs/tools/SelectionTool/SelectionHandle.mjs

@@ -1,16 +1,22 @@
 import  { assertUnreachable }  from '../../util/assertions.mjs';
 import { Rect2, Vec2 } from '@js-draw/math';
 import  { cssPrefix }  from './SelectionTool.mjs';
-export var HandleShape;
+var HandleShape;
 (function (HandleShape) {
     HandleShape[HandleShape["Circle"] = 0] = "Circle";
     HandleShape[HandleShape["Square"] = 1] = "Square";
 })(HandleShape || (HandleShape = {}));
+export var HandleAction;
+(function (HandleAction) {
+    HandleAction["ResizeXY"] = "resize-xy";
+    HandleAction["Rotate"] = "rotate";
+    HandleAction["ResizeX"] = "resize-x";
+    HandleAction["ResizeY"] = "resize-y";
+})(HandleAction || (HandleAction = {}));
 export const handleSize = 30;
 export default class SelectionHandle {
-    constructor(shape, parentSide, parent, viewport, onDragStart, onDragUpdate, onDragEnd) {
-        this.shape = shape;
-        this.parentSide = parentSide;
+    constructor(presentation, parent, viewport, onDragStart, onDragUpdate, onDragEnd) {
+        this.presentation = presentation;
         this.parent = parent;
         this.viewport = viewport;
         this.onDragStart = onDragStart;
@@ -18,8 +24,20 @@ export default class SelectionHandle {
         this.onDragEnd = onDragEnd;
         this.dragLastPos = null;
         this.element = document.createElement('div');
-        this.element.classList.add(`${cssPrefix}handle`);
-        switch (shape) {
+        this.element.classList.add(`${cssPrefix}handle`, `${cssPrefix}${presentation.action}`);
+        this.parentSide = presentation.side;
+        const icon = presentation.icon;
+        if (icon) {
+            this.element.appendChild(icon);
+            icon.classList.add('icon');
+        }
+        if (presentation.action === HandleAction.Rotate) {
+            this.shape = HandleShape.Circle;
+        }
+        else {
+            this.shape = HandleShape.Square;
+        }
+        switch (this.shape) {
             case HandleShape.Circle:
                 this.element.classList.add(`${cssPrefix}circle`);
                 break;
@@ -27,7 +45,7 @@ export default class SelectionHandle {
                 this.element.classList.add(`${cssPrefix}square`);
                 break;
             default:
-                assertUnreachable(shape);
+                assertUnreachable(this.shape);
         }
         this.updatePosition();
     }

package/dist/mjs/tools/SelectionTool/SelectionTool.mjs

@@ -27,6 +27,11 @@ class SelectionTool extends BaseTool {
             // The selection box could be using the wet ink display if its transformation
             // hasn't been finalized yet. Clear before updating the UI.
             this.editor.clearWetInk();
+            // If not currently selecting, ensure that the selection box
+            // is large enough.
+            if (!this.expandingSelectionBox) {
+                this.selectionBox?.padRegion();
+            }
             this.selectionBox?.updateUI();
         });
         this.editor.handleKeyEventsFrom(this.handleOverlay);

package/dist/mjs/tools/SoundUITool.d.ts

@@ -14,6 +14,7 @@ export default class SoundUITool extends BaseTool {
     private toggleButton;
     private toggleButtonContainer;
     constructor(editor: Editor, description: string);
+    canReceiveInputInReadOnlyEditor(): boolean;
     private updateToggleButtonText;
     setEnabled(enabled: boolean): void;
     onKeyPress(event: KeyPressEvent): boolean;

package/dist/mjs/tools/SoundUITool.mjs

@@ -100,6 +100,9 @@ export default class SoundUITool extends BaseTool {
         this.updateToggleButtonText();
         editor.createHTMLOverlay(this.toggleButtonContainer);
     }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
     updateToggleButtonText() {
         const containerEnabledClass = 'sound-ui-tool-enabled';
         if (this.isEnabled()) {
@@ -113,7 +116,7 @@ export default class SoundUITool extends BaseTool {
     }
     setEnabled(enabled) {
         super.setEnabled(enabled);
-        if (!enabled) {
+        if (!this.isEnabled()) {
             this.soundFeedback?.close();
             this.soundFeedback = null;
         }