js-draw 1.21.2 → 1.22.0

package/dist/mjs/tools/TextTool.mjs

@@ -0,0 +1,281 @@
+import  TextComponent  from '../components/TextComponent.mjs';
+import  EditorImage  from '../image/EditorImage.mjs';
+import { Rect2, Mat33, Vec2, Color4 } from '@js-draw/math';
+import  { PointerDevice }  from '../Pointer.mjs';
+import  { EditorEventType }  from '../types.mjs';
+import  BaseTool  from './BaseTool.mjs';
+import  Erase  from '../commands/Erase.mjs';
+import  uniteCommands  from '../commands/uniteCommands.mjs';
+import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
+const overlayCSSClass = 'textEditorOverlay';
+export default class TextTool extends BaseTool {
+    constructor(editor, description, localizationTable) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.localizationTable = localizationTable;
+        this.textInputElem = null;
+        this.textTargetPosition = null;
+        this.textMeasuringCtx = null;
+        this.textScale = Vec2.of(1, 1);
+        this.removeExistingCommand = null;
+        const editorFonts = editor.getCurrentSettings().text?.fonts ?? [];
+        this.textStyleValue = ReactiveValue.fromInitialValue({
+            size: 32,
+            fontFamily: editorFonts.length > 0 ? editorFonts[0] : 'sans-serif',
+            renderingStyle: {
+                fill: Color4.purple,
+            },
+        });
+        this.textStyleValue.onUpdateAndNow(() => {
+            this.textStyle = this.textStyleValue.get();
+            this.updateTextInput();
+            this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+                kind: EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        });
+        this.textEditOverlay = document.createElement('div');
+        this.textEditOverlay.classList.add(overlayCSSClass);
+        this.editor.addStyleSheet(`
+			.${overlayCSSClass} {
+				height: 0;
+				overflow: visible;
+
+				/* Allows absolutely-positioned textareas to scroll with
+				   the containing overlay. */
+				position: relative;
+			}
+
+			.${overlayCSSClass} textarea {
+				background-color: rgba(0, 0, 0, 0);
+
+				white-space: pre;
+				overflow: hidden;
+
+				padding: 0;
+				margin: 0;
+				border: none;
+				padding: 0;
+
+				min-width: 100px;
+				min-height: 1.1em;
+			}
+		`);
+        this.editor.createHTMLOverlay(this.textEditOverlay);
+        this.editor.notifier.on(EditorEventType.ViewportChanged, () => this.updateTextInput());
+    }
+    initTextMeasuringCanvas() {
+        this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
+    }
+    getTextAscent(text, style) {
+        this.initTextMeasuringCanvas();
+        if (this.textMeasuringCtx) {
+            this.textMeasuringCtx.textBaseline = 'alphabetic';
+            TextComponent.applyTextStyles(this.textMeasuringCtx, style);
+            const measurement = this.textMeasuringCtx.measureText(text);
+            return measurement.fontBoundingBoxAscent ?? measurement.actualBoundingBoxAscent;
+        }
+        // Estimate
+        return (style.size * 2) / 3;
+    }
+    // Take input from this' textInputElem and add it to the EditorImage.
+    // If [removeInput], the HTML input element is removed. Otherwise, its value
+    // is cleared.
+    flushInput(removeInput = true) {
+        if (this.textInputElem && this.textTargetPosition) {
+            const content = this.textInputElem.value.trimEnd();
+            this.textInputElem.value = '';
+            if (removeInput) {
+                // In some browsers, .remove() triggers a .blur event (synchronously).
+                // Clear this.textInputElem before removal
+                const input = this.textInputElem;
+                this.textInputElem = null;
+                input.remove();
+            }
+            if (content === '') {
+                return;
+            }
+            const textTransform = Mat33.translation(this.textTargetPosition)
+                .rightMul(this.getTextScaleMatrix())
+                .rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas()))
+                .rightMul(Mat33.zRotation(this.textRotation));
+            const textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
+            const action = EditorImage.addElement(textComponent);
+            if (this.removeExistingCommand) {
+                // Unapply so that `removeExistingCommand` can be added to the undo stack.
+                this.removeExistingCommand.unapply(this.editor);
+                this.editor.dispatch(uniteCommands([this.removeExistingCommand, action]));
+                this.removeExistingCommand = null;
+            }
+            else {
+                this.editor.dispatch(action);
+            }
+        }
+    }
+    getTextScaleMatrix() {
+        return Mat33.scaling2D(this.textScale.times(1 / this.editor.viewport.getSizeOfPixelOnCanvas()));
+    }
+    updateTextInput() {
+        if (!this.textInputElem || !this.textTargetPosition) {
+            this.textInputElem?.remove();
+            return;
+        }
+        const viewport = this.editor.viewport;
+        const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
+        this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
+        this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
+        this.textInputElem.style.fontStyle = this.textStyle.fontStyle ?? '';
+        this.textInputElem.style.fontVariant = this.textStyle.fontVariant ?? '';
+        this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
+        this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
+        this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
+        this.textInputElem.style.position = 'absolute';
+        this.textInputElem.style.left = `${textScreenPos.x}px`;
+        this.textInputElem.style.top = `${textScreenPos.y}px`;
+        this.textInputElem.style.margin = '0';
+        this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+        this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+        // Get the ascent based on the font, using a string of characters
+        // that is tall in most fonts.
+        const tallText = 'Testing!';
+        const ascent = this.getTextAscent(tallText, this.textStyle);
+        const vertAdjust = ascent;
+        const rotation = this.textRotation + viewport.getRotationAngle();
+        const scale = this.getTextScaleMatrix();
+        this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${(rotation * 180) / Math.PI}deg) translate(0, ${-vertAdjust}px)`;
+        this.textInputElem.style.transformOrigin = 'top left';
+        // Match the line height of default rendered text.
+        const lineHeight = Math.floor(this.textStyle.size);
+        this.textInputElem.style.lineHeight = `${lineHeight}px`;
+    }
+    startTextInput(textCanvasPos, initialText) {
+        this.flushInput();
+        this.textInputElem = document.createElement('textarea');
+        this.textInputElem.value = initialText;
+        this.textInputElem.style.display = 'inline-block';
+        this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
+        this.textRotation = -this.editor.viewport.getRotationAngle();
+        this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+        this.updateTextInput();
+        // Update the input size/position/etc. after the placeHolder has had time to appear.
+        setTimeout(() => this.updateTextInput(), 0);
+        this.textInputElem.oninput = () => {
+            if (this.textInputElem) {
+                this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+                this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+            }
+        };
+        this.textInputElem.onblur = () => {
+            // Delay removing the input -- flushInput may be called within a blur()
+            // event handler
+            const removeInput = false;
+            const input = this.textInputElem;
+            this.flushInput(removeInput);
+            this.textInputElem = null;
+            setTimeout(() => {
+                input?.remove();
+            }, 0);
+        };
+        this.textInputElem.onkeyup = (evt) => {
+            if (evt.key === 'Enter' && !evt.shiftKey) {
+                this.flushInput();
+                this.editor.focus();
+            }
+            else if (evt.key === 'Escape') {
+                // Cancel input.
+                this.textInputElem?.remove();
+                this.textInputElem = null;
+                this.editor.focus();
+                this.removeExistingCommand?.unapply(this.editor);
+                this.removeExistingCommand = null;
+            }
+        };
+        this.textEditOverlay.replaceChildren(this.textInputElem);
+        setTimeout(() => this.textInputElem?.focus(), 0);
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        if (!this.isEnabled()) {
+            this.flushInput();
+        }
+        this.textEditOverlay.style.display = enabled ? 'block' : 'none';
+    }
+    onPointerDown({ current, allPointers }) {
+        if (current.device === PointerDevice.Eraser) {
+            return false;
+        }
+        if (allPointers.length === 1) {
+            // Are we clicking on a text node?
+            const canvasPos = current.canvasPos;
+            const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+            const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
+            const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
+            let targetTextNodes = targetNodes.filter((node) => node instanceof TextComponent);
+            // Don't try to edit text nodes that contain the viewport (this allows us
+            // to zoom in on text nodes and add text on top of them.)
+            const visibleRect = this.editor.viewport.visibleRect;
+            targetTextNodes = targetTextNodes.filter((node) => !node.getBBox().containsRect(visibleRect));
+            // End any TextNodes we're currently editing.
+            this.flushInput();
+            if (targetTextNodes.length > 0) {
+                const targetNode = targetTextNodes[targetTextNodes.length - 1];
+                this.setTextStyle(targetNode.getTextStyle());
+                // Create and temporarily apply removeExistingCommand.
+                this.removeExistingCommand = new Erase([targetNode]);
+                this.removeExistingCommand.apply(this.editor);
+                this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
+                const transform = targetNode.getTransform();
+                this.textRotation = transform.transformVec3(Vec2.unitX).angle();
+                const scaleFactor = transform.transformVec3(Vec2.unitX).magnitude();
+                this.textScale = Vec2.of(1, 1).times(scaleFactor);
+                this.updateTextInput();
+            }
+            else {
+                this.removeExistingCommand = null;
+                this.startTextInput(current.canvasPos, '');
+            }
+            return true;
+        }
+        return false;
+    }
+    onGestureCancel() {
+        this.flushInput();
+        this.editor.focus();
+    }
+    setFontFamily(fontFamily) {
+        if (fontFamily !== this.textStyle.fontFamily) {
+            this.textStyleValue.set({
+                ...this.textStyle,
+                fontFamily: fontFamily,
+            });
+        }
+    }
+    setColor(color) {
+        if (!color.eq(this.textStyle.renderingStyle.fill)) {
+            this.textStyleValue.set({
+                ...this.textStyle,
+                renderingStyle: {
+                    ...this.textStyle.renderingStyle,
+                    fill: color,
+                },
+            });
+        }
+    }
+    setFontSize(size) {
+        if (size !== this.textStyle.size) {
+            this.textStyleValue.set({
+                ...this.textStyle,
+                size,
+            });
+        }
+    }
+    getTextStyle() {
+        return this.textStyle;
+    }
+    getStyleValue() {
+        return this.textStyleValue;
+    }
+    setTextStyle(style) {
+        this.textStyleValue.set(style);
+    }
+}

package/dist/mjs/tools/TextTool.test.d.ts

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

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

@@ -0,0 +1,73 @@
+import Editor from '../Editor';
+import BaseTool from './BaseTool';
+import ToolEnabledGroup from './ToolEnabledGroup';
+import { ToolLocalization } from './localization';
+import InputMapper, { InputEventListener } from './InputFilter/InputMapper';
+import { InputEvt } from '../inputEvents';
+export default class ToolController implements InputEventListener {
+    private tools;
+    private activeTool;
+    private primaryToolGroup;
+    private inputPipeline;
+    private isEditorReadOnly;
+    /** @internal */
+    constructor(editor: Editor, localization: ToolLocalization);
+    /**
+     * Replaces the current set of tools with `tools`. This should only be done before
+     * the creation of the app's toolbar (if using `AbstractToolbar`).
+     *
+     * If no `primaryToolGroup` is given, an empty one will be created.
+     */
+    setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
+    /**
+     * Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
+     *
+     * If the tool is already added to this, the tool is converted to a primary tool.
+     *
+     * This should be called before creating the app's toolbar.
+     */
+    addPrimaryTool(tool: BaseTool): void;
+    getPrimaryTools(): BaseTool[];
+    /**
+     * Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
+     * This should be called before creating the app's toolbar.
+     *
+     * If `options.addToFront`, the tool is added to the beginning of this' tool list.
+     *
+     * Does nothing if the tool is already present.
+     */
+    addTool(tool: BaseTool, options?: {
+        addToFront: boolean;
+    }): void;
+    /**
+     * Removes **and destroys** all tools in `tools` from this.
+     */
+    removeAndDestroyTools(tools: BaseTool[]): void;
+    private insertTools;
+    /**
+     * Removes a tool from this' tool list and replaces it with `replaceWith`.
+     *
+     * If any of `toolsToInsert` have already been added to this, the tools are
+     * moved.
+     *
+     * This should be called before creating the editor's toolbar.
+     */
+    insertToolsAfter(insertAfter: BaseTool, toolsToInsert: BaseTool[]): void;
+    /** @see {@link insertToolsAfter} */
+    insertToolsBefore(insertBefore: BaseTool, toolsToInsert: BaseTool[]): void;
+    private onEventInternal;
+    /** Alias for {@link dispatchInputEvent}. */
+    onEvent(event: InputEvt): boolean;
+    dispatchInputEvent(event: InputEvt): boolean;
+    /**
+     * Adds a new `InputMapper` to this' input pipeline.
+     *
+     * A `mapper` is really a relation that maps each event to no, one,
+     * or many other events.
+     *
+     * @see {@link InputMapper}.
+     */
+    addInputMapper(mapper: InputMapper): void;
+    getMatchingTools<Type extends BaseTool>(type: new (...args: any[]) => Type): Type[];
+    onEditorDestroyed(): void;
+}

package/dist/mjs/tools/ToolController.mjs

@@ -0,0 +1,281 @@
+import  { EditorEventType }  from '../types.mjs';
+import { Color4 } from '@js-draw/math';
+import  PanZoom, { PanZoomMode }  from './PanZoom.mjs';
+import  Pen  from './Pen.mjs';
+import  ToolEnabledGroup  from './ToolEnabledGroup.mjs';
+import  Eraser  from './Eraser.mjs';
+import  SelectionTool  from './SelectionTool/SelectionTool.mjs';
+import  UndoRedoShortcut  from './UndoRedoShortcut.mjs';
+import  TextTool  from './TextTool.mjs';
+import  PipetteTool  from './PipetteTool.mjs';
+import  ToolSwitcherShortcut  from './ToolSwitcherShortcut.mjs';
+import  PasteHandler  from './PasteHandler.mjs';
+import  ToolbarShortcutHandler  from './ToolbarShortcutHandler.mjs';
+import  { makePressureSensitiveFreehandLineBuilder }  from '../components/builders/PressureSensitiveFreehandLineBuilder.mjs';
+import  FindTool  from './FindTool.mjs';
+import  SelectAllShortcutHandler  from './SelectionTool/SelectAllShortcutHandler.mjs';
+import  SoundUITool  from './SoundUITool.mjs';
+import  { InputEvtType }  from '../inputEvents.mjs';
+import  InputPipeline  from './InputFilter/InputPipeline.mjs';
+import  InputStabilizer  from './InputFilter/InputStabilizer.mjs';
+import  ScrollbarTool  from './ScrollbarTool.mjs';
+export default class ToolController {
+    /** @internal */
+    constructor(editor, localization) {
+        this.activeTool = null;
+        this.isEditorReadOnly = editor.isReadOnlyReactiveValue();
+        this.inputPipeline = new InputPipeline();
+        this.inputPipeline.setEmitListener((event) => this.onEventInternal(event));
+        const primaryToolGroup = new ToolEnabledGroup();
+        this.primaryToolGroup = primaryToolGroup;
+        const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
+        const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
+        const primaryPenTool = new Pen(editor, localization.penTool(1), {
+            color: Color4.purple,
+            thickness: 8,
+        });
+        const secondaryPenTool = new Pen(editor, localization.penTool(2), {
+            color: Color4.clay,
+            thickness: 4,
+        });
+        // Stabilize the secondary pen tool.
+        secondaryPenTool.setInputMapper(new InputStabilizer(editor.viewport));
+        const eraser = new Eraser(editor, localization.eraserTool);
+        const primaryTools = [
+            // Three pens
+            primaryPenTool,
+            secondaryPenTool,
+            // Highlighter-like pen with width=40
+            new Pen(editor, localization.penTool(3), {
+                color: Color4.ofRGBA(1, 1, 0, 0.5),
+                thickness: 40,
+                factory: makePressureSensitiveFreehandLineBuilder,
+            }),
+            eraser,
+            new SelectionTool(editor, localization.selectionTool),
+            new TextTool(editor, localization.textTool, localization),
+            new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning),
+        ];
+        // Accessibility tools
+        const soundExplorer = new SoundUITool(editor, localization.soundExplorer);
+        soundExplorer.setEnabled(false);
+        this.tools = [
+            new ScrollbarTool(editor),
+            new PipetteTool(editor, localization.pipetteTool),
+            soundExplorer,
+            panZoomTool,
+            ...primaryTools,
+            keyboardPanZoomTool,
+            new UndoRedoShortcut(editor),
+            new ToolbarShortcutHandler(editor),
+            new ToolSwitcherShortcut(editor),
+            eraser.makeEraserSwitcherTool(),
+            new FindTool(editor),
+            new PasteHandler(editor),
+            new SelectAllShortcutHandler(editor),
+        ];
+        primaryTools.forEach((tool) => tool.setToolGroup(primaryToolGroup));
+        panZoomTool.setEnabled(true);
+        primaryPenTool.setEnabled(true);
+        editor.notifier.on(EditorEventType.ToolEnabled, (event) => {
+            if (event.kind === EditorEventType.ToolEnabled) {
+                editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
+            }
+        });
+        editor.notifier.on(EditorEventType.ToolDisabled, (event) => {
+            if (event.kind === EditorEventType.ToolDisabled) {
+                editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
+            }
+        });
+        this.activeTool = null;
+    }
+    /**
+     * Replaces the current set of tools with `tools`. This should only be done before
+     * the creation of the app's toolbar (if using `AbstractToolbar`).
+     *
+     * If no `primaryToolGroup` is given, an empty one will be created.
+     */
+    setTools(tools, primaryToolGroup) {
+        this.tools = tools;
+        this.primaryToolGroup = primaryToolGroup ?? new ToolEnabledGroup();
+    }
+    /**
+     * Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
+     *
+     * If the tool is already added to this, the tool is converted to a primary tool.
+     *
+     * This should be called before creating the app's toolbar.
+     */
+    addPrimaryTool(tool) {
+        tool.setToolGroup(this.primaryToolGroup);
+        if (tool.isEnabled()) {
+            this.primaryToolGroup.notifyEnabled(tool);
+        }
+        if (!this.tools.includes(tool)) {
+            this.addTool(tool);
+        }
+    }
+    getPrimaryTools() {
+        return this.tools.filter((tool) => {
+            return tool.getToolGroup() === this.primaryToolGroup;
+        });
+    }
+    /**
+     * Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
+     * This should be called before creating the app's toolbar.
+     *
+     * If `options.addToFront`, the tool is added to the beginning of this' tool list.
+     *
+     * Does nothing if the tool is already present.
+     */
+    addTool(tool, options) {
+        // Only add if not already present.
+        if (!this.tools.includes(tool)) {
+            if (options?.addToFront) {
+                this.tools.splice(0, 0, tool);
+            }
+            else {
+                this.tools.push(tool);
+            }
+        }
+    }
+    /**
+     * Removes **and destroys** all tools in `tools` from this.
+     */
+    removeAndDestroyTools(tools) {
+        const newTools = [];
+        for (const tool of this.tools) {
+            if (tools.includes(tool)) {
+                if (this.activeTool === tool) {
+                    this.activeTool = null;
+                }
+                tool.onDestroy();
+            }
+            else {
+                newTools.push(tool);
+            }
+        }
+        this.tools = newTools;
+    }
+    insertTools(insertNear, toolsToInsert, mode) {
+        this.tools = this.tools.filter((tool) => !toolsToInsert.includes(tool));
+        const newTools = [];
+        for (const tool of this.tools) {
+            if (mode === 'after') {
+                newTools.push(tool);
+            }
+            if (tool === insertNear) {
+                newTools.push(...toolsToInsert);
+            }
+            if (mode === 'before') {
+                newTools.push(tool);
+            }
+        }
+        this.tools = newTools;
+    }
+    /**
+     * Removes a tool from this' tool list and replaces it with `replaceWith`.
+     *
+     * If any of `toolsToInsert` have already been added to this, the tools are
+     * moved.
+     *
+     * This should be called before creating the editor's toolbar.
+     */
+    insertToolsAfter(insertAfter, toolsToInsert) {
+        this.insertTools(insertAfter, toolsToInsert, 'after');
+    }
+    /** @see {@link insertToolsAfter} */
+    insertToolsBefore(insertBefore, toolsToInsert) {
+        this.insertTools(insertBefore, toolsToInsert, 'before');
+    }
+    // @internal use `dispatchEvent` rather than calling `onEvent` directly.
+    onEventInternal(event) {
+        const isEditorReadOnly = this.isEditorReadOnly.get();
+        const canToolReceiveInput = (tool) => {
+            return tool.isEnabled() && (!isEditorReadOnly || tool.canReceiveInputInReadOnlyEditor());
+        };
+        let handled = false;
+        if (event.kind === InputEvtType.PointerDownEvt) {
+            let canOnlySendToActiveTool = false;
+            if (this.activeTool && !this.activeTool.eventCanBeDeliveredToNonActiveTool(event)) {
+                canOnlySendToActiveTool = true;
+            }
+            for (const tool of this.tools) {
+                if (canOnlySendToActiveTool && tool !== this.activeTool) {
+                    continue;
+                }
+                if (canToolReceiveInput(tool) && tool.onEvent(event)) {
+                    if (this.activeTool !== tool) {
+                        this.activeTool?.onEvent({ kind: InputEvtType.GestureCancelEvt });
+                    }
+                    this.activeTool = tool;
+                    handled = true;
+                    break;
+                }
+            }
+        }
+        else if (event.kind === InputEvtType.PointerUpEvt) {
+            const upResult = this.activeTool?.onEvent(event);
+            const continueHandlingEvents = upResult && event.allPointers.length > 1;
+            // Should the active tool continue handling events (without an additional pointer down?)
+            if (!continueHandlingEvents) {
+                // No -- Remove the current tool
+                this.activeTool = null;
+            }
+            handled = true;
+        }
+        else if (event.kind === InputEvtType.PointerMoveEvt) {
+            if (this.activeTool !== null) {
+                this.activeTool.onEvent(event);
+                handled = true;
+            }
+        }
+        else if (event.kind === InputEvtType.GestureCancelEvt) {
+            if (this.activeTool !== null) {
+                this.activeTool.onEvent(event);
+                this.activeTool = null;
+            }
+        }
+        else {
+            for (const tool of this.tools) {
+                if (!canToolReceiveInput(tool)) {
+                    continue;
+                }
+                handled = tool.onEvent(event);
+                if (handled) {
+                    break;
+                }
+            }
+        }
+        return handled;
+    }
+    /** Alias for {@link dispatchInputEvent}. */
+    onEvent(event) {
+        return this.dispatchInputEvent(event);
+    }
+    // Returns true if the event was handled.
+    dispatchInputEvent(event) {
+        // Feed the event through the input pipeline
+        return this.inputPipeline.onEvent(event);
+    }
+    /**
+     * Adds a new `InputMapper` to this' input pipeline.
+     *
+     * A `mapper` is really a relation that maps each event to no, one,
+     * or many other events.
+     *
+     * @see {@link InputMapper}.
+     */
+    addInputMapper(mapper) {
+        this.inputPipeline.addToTail(mapper);
+    }
+    getMatchingTools(type) {
+        return this.tools.filter((tool) => tool instanceof type);
+    }
+    // @internal
+    onEditorDestroyed() {
+        for (const tool of this.tools) {
+            tool.onDestroy();
+        }
+    }
+}

package/dist/mjs/tools/ToolController.test.d.ts

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

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

@@ -0,0 +1,6 @@
+import BaseTool from './BaseTool';
+export default class ToolEnabledGroup {
+    private activeTool;
+    constructor();
+    notifyEnabled(tool: BaseTool): void;
+}

package/dist/mjs/tools/ToolEnabledGroup.mjs

@@ -0,0 +1,10 @@
+// Connects a group of tools -- at most one tool in the group can be enabled.
+export default class ToolEnabledGroup {
+    constructor() { }
+    notifyEnabled(tool) {
+        if (tool !== this.activeTool) {
+            this.activeTool?.setEnabled(false);
+            this.activeTool = tool;
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../inputEvents';
+import BaseTool from './BaseTool';
+/**
+ * Handles keyboard events used, by default, to select tools. By default,
+ * 1 maps to the first primary tool, 2 to the second primary tool, ... .
+ *
+ * This is in the default set of {@link ToolController} tools.
+ *
+ */
+export default class ToolSwitcherShortcut extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    canReceiveInputInReadOnlyEditor(): boolean;
+    onKeyPress({ key }: KeyPressEvent): boolean;
+}