js-draw 1.14.0 → 1.16.0

package/dist/mjs/toolbar/widgets/BaseWidget.mjs

@@ -15,6 +15,7 @@ import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent }  from '../../inp
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  DropdownLayoutManager  from './layout/DropdownLayoutManager.mjs';
 import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
+import  HelpDisplay  from '../utils/HelpDisplay.mjs';
 /**
  * A set of labels that allow toolbar themes to treat buttons differently.
  */
@@ -127,17 +128,30 @@ class BaseWidget {
     }
     // Add content to the widget's associated dropdown menu.
     // Returns true if such a menu should be created, false otherwise.
-    fillDropdown(dropdown) {
+    fillDropdown(dropdown, helpDisplay) {
         if (Object.keys(this.subWidgets).length === 0) {
             return false;
         }
         for (const widgetId in this.subWidgets) {
             const widget = this.subWidgets[widgetId];
-            widget.addTo(dropdown);
+            const widgetElement = widget.addTo(dropdown);
             widget.setIsToplevel(false);
+            // Add help information
+            const helpText = widget.getHelpText();
+            if (helpText) {
+                helpDisplay?.registerTextHelpForElement(widgetElement, helpText);
+            }
         }
         return true;
     }
+    /**
+     * Should return a 1-2 sentence description of the widget.
+     *
+     * At present, this is only used if this widget has an associated dropdown.
+     */
+    getHelpText() {
+        return undefined;
+    }
     /** @deprecated Renamed to `setUpButtonEventListeners`. */
     setupActionBtnClickListener(button) {
         return this.setUpButtonEventListeners(button);
@@ -229,10 +243,15 @@ class BaseWidget {
         this.container.replaceChildren();
         this.button.replaceChildren(this.icon, this.label);
         this.container.appendChild(this.button);
+        const helpDisplay = new HelpDisplay(content => this.editor.createHTMLOverlay(content), this.editor);
+        const helpText = this.getHelpText();
+        if (helpText) {
+            helpDisplay.registerTextHelpForElement(this.dropdownContent, [this.getTitle(), helpText].join('\n\n'));
+        }
         // Clear the dropdownContainer in case this element is being moved to another
         // parent.
         this.dropdownContent.replaceChildren();
-        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, this.fillDropdown(this.dropdownContent), "f");
+        __classPrivateFieldSet(this, _BaseWidget_hasDropdown, this.fillDropdown(this.dropdownContent, helpDisplay), "f");
         if (__classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f")) {
             this.button.classList.add('has-dropdown');
             // We're re-creating the dropdown.
@@ -258,6 +277,9 @@ class BaseWidget {
                     this.focus();
                 }
             });
+            if (helpDisplay.hasHelpText()) {
+                this.dropdown.appendChild(helpDisplay.createToggleButton());
+            }
             this.dropdown.appendChild(this.dropdownContent);
         }
         this.setDropdownVisible(false);

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

@@ -1,6 +1,7 @@
 import Editor from '../../Editor';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
+import HelpDisplay from '../utils/HelpDisplay';
 export default class DocumentPropertiesWidget extends BaseWidget {
     private updateDropdownContent;
     constructor(editor: Editor, localizationTable?: ToolbarLocalization);
@@ -18,6 +19,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     /** Returns the type of the topmost background component */
     private getBackgroundType;
     private updateImportExportRectSize;
+    protected getHelpText(): string;
     private static idCounter;
-    protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean;
 }

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

@@ -90,7 +90,10 @@ class DocumentPropertiesWidget extends BaseWidget {
         this.editor.dispatch(this.editor.image.setImportExportRect(newRect));
         this.editor.queueRerender();
     }
-    fillDropdown(dropdown) {
+    getHelpText() {
+        return this.localizationTable.pageDropdown__baseHelpText;
+    }
+    fillDropdown(dropdown, helpDisplay) {
         const container = document.createElement('div');
         container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`, `${toolbarCSSPrefix}document-properties-widget`);
         // Background color input
@@ -98,7 +101,7 @@ class DocumentPropertiesWidget extends BaseWidget {
             const backgroundColorRow = document.createElement('div');
             const backgroundColorLabel = document.createElement('label');
             backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
-            const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue } = makeColorInput(this.editor, color => {
+            const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue, registerWithHelpTextDisplay: registerHelpForInputs, } = makeColorInput(this.editor, color => {
                 if (!color.eq(this.getBackgroundColor())) {
                     this.setBackgroundColor(color);
                 }
@@ -106,9 +109,16 @@ class DocumentPropertiesWidget extends BaseWidget {
             colorInput.id = `${toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
             backgroundColorLabel.htmlFor = colorInput.id;
             backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
-            return { setBgColorInputValue, backgroundColorRow };
+            const registerWithHelp = (helpDisplay) => {
+                if (!helpDisplay) {
+                    return;
+                }
+                helpDisplay?.registerTextHelpForElement(backgroundColorRow, this.localizationTable.pageDropdown__backgroundColorHelpText);
+                registerHelpForInputs(helpDisplay);
+            };
+            return { setBgColorInputValue, backgroundColorRow, registerWithHelp, };
         };
-        const { backgroundColorRow, setBgColorInputValue } = makeBackgroundColorInput();
+        const { backgroundColorRow, setBgColorInputValue, registerWithHelp: registerBackgroundRowWithHelp, } = makeBackgroundColorInput();
         const makeCheckboxRow = (labelText, onChange) => {
             const rowContainer = document.createElement('div');
             const labelElement = document.createElement('label');
@@ -189,6 +199,11 @@ class DocumentPropertiesWidget extends BaseWidget {
         aboutButton.onclick = () => {
             this.editor.showAboutDialog();
         };
+        // Add help text
+        registerBackgroundRowWithHelp(helpDisplay);
+        helpDisplay?.registerTextHelpForElement(useGridRow, this.localizationTable.pageDropdown__gridCheckboxHelpText);
+        helpDisplay?.registerTextHelpForElement(auroresizeRow, this.localizationTable.pageDropdown__autoresizeCheckboxHelpText);
+        helpDisplay?.registerTextHelpForElement(aboutButton, this.localizationTable.pageDropdown__aboutButtonHelpText);
         this.updateDropdownContent = () => {
             setBgColorInputValue(this.getBackgroundColor());
             const autoresize = this.editor.image.getAutoresizeEnabled();

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

@@ -3,6 +3,7 @@ import PanZoom from '../../tools/PanZoom';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
+import HelpDisplay from '../utils/HelpDisplay';
 export default class HandToolWidget extends BaseToolWidget {
     private allowTogglingBaseTool;
     protected overridePanZoomTool: PanZoom;
@@ -13,7 +14,8 @@ export default class HandToolWidget extends BaseToolWidget {
     protected getTitle(): string;
     protected createIcon(): Element;
     protected handleClick(): void;
-    protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected getHelpText(): string;
+    protected fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean;
     setSelected(selected: boolean): void;
     serializeState(): SavedToolbuttonState;
     deserializeFrom(state: SavedToolbuttonState): void;

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

@@ -6,7 +6,7 @@ import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
 import  makeSeparator  from './components/makeSeparator.mjs';
-const makeZoomControl = (localizationTable, editor) => {
+const makeZoomControl = (localizationTable, editor, helpDisplay) => {
     const zoomLevelRow = document.createElement('div');
     const increaseButton = document.createElement('button');
     const decreaseButton = document.createElement('button');
@@ -55,15 +55,20 @@ const makeZoomControl = (localizationTable, editor) => {
         const addToHistory = false;
         editor.dispatch(Viewport.transformBy(editor.viewport.canvasToScreenTransform.inverse()), addToHistory);
     };
+    helpDisplay?.registerTextHelpForElement(increaseButton, localizationTable.handDropdown__zoomInHelpText);
+    helpDisplay?.registerTextHelpForElement(decreaseButton, localizationTable.handDropdown__zoomOutHelpText);
+    helpDisplay?.registerTextHelpForElement(resetViewButton, localizationTable.handDropdown__resetViewHelpText);
+    helpDisplay?.registerTextHelpForElement(zoomLevelDisplay, localizationTable.handDropdown__zoomDisplayHelpText);
     return zoomLevelRow;
 };
 class HandModeWidget extends BaseWidget {
-    constructor(editor, tool, flag, makeIcon, title, localizationTable) {
+    constructor(editor, tool, flag, makeIcon, title, helpText, localizationTable) {
         super(editor, `pan-mode-${flag}`, localizationTable);
         this.tool = tool;
         this.flag = flag;
         this.makeIcon = makeIcon;
         this.title = title;
+        this.helpText = helpText;
         editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === tool) {
                 const allEnabled = !!(tool.getMode() & PanZoomMode.SinglePointerGestures);
@@ -93,6 +98,9 @@ class HandModeWidget extends BaseWidget {
     fillDropdown(_dropdown) {
         return false;
     }
+    getHelpText() {
+        return this.helpText;
+    }
 }
 export default class HandToolWidget extends BaseToolWidget {
     constructor(editor, 
@@ -117,8 +125,8 @@ export default class HandToolWidget extends BaseToolWidget {
             this.container.classList.add('dropdownShowable');
         }
         // Controls for the overriding hand tool.
-        const touchPanningWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
-        const rotationLockWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        const touchPanningWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable.handDropdown__touchPanningHelpText, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable.handDropdown__lockRotationHelpText, localizationTable);
         this.addSubWidget(touchPanningWidget);
         this.addSubWidget(rotationLockWidget);
     }
@@ -149,13 +157,17 @@ export default class HandToolWidget extends BaseToolWidget {
             this.setDropdownVisible(!this.isDropdownVisible());
         }
     }
-    fillDropdown(dropdown) {
-        super.fillDropdown(dropdown);
+    getHelpText() {
+        return this.localizationTable.handDropdown__baseHelpText;
+    }
+    fillDropdown(dropdown, helpDisplay) {
+        super.fillDropdown(dropdown, helpDisplay);
         // The container for all actions that come after the toolbar buttons.
         const nonbuttonActionContainer = document.createElement('div');
         nonbuttonActionContainer.classList.add(`${toolbarCSSPrefix}nonbutton-controls-main-list`);
         makeSeparator().addTo(nonbuttonActionContainer);
-        nonbuttonActionContainer.appendChild(makeZoomControl(this.localizationTable, this.editor));
+        const zoomControl = makeZoomControl(this.localizationTable, this.editor, helpDisplay);
+        nonbuttonActionContainer.appendChild(zoomControl);
         dropdown.appendChild(nonbuttonActionContainer);
         return true;
     }

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

@@ -95,6 +95,7 @@ class InsertImageWidget extends BaseWidget {
         imageAltTextLabel.htmlFor = altTextInputId;
         imageAltTextLabel.innerText = this.localizationTable.inputAltText;
         this.imageAltTextInput.type = 'text';
+        this.imageAltTextInput.placeholder = this.localizationTable.describeTheImage;
         this.statusView.setAttribute('aria-live', 'polite');
         this.submitButton.innerText = this.localizationTable.submit;
         this.selectedFiles.onUpdateAndNow(async (files) => {

package/dist/mjs/toolbar/widgets/PenToolWidget.d.ts

@@ -5,6 +5,7 @@ import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
+import HelpDisplay from '../utils/HelpDisplay';
 export interface PenTypeRecord {
     name: string;
     id: string;
@@ -24,11 +25,12 @@ export default class PenToolWidget extends BaseToolWidget {
     private createIconForRecord;
     protected createIcon(): Element;
     private createPenTypeSelector;
-    protected createStrokeCorrectionOptions(): {
+    protected createStrokeCorrectionOptions(helpOverlay?: HelpDisplay): {
         update: () => void;
         addTo: (parent: HTMLElement) => void;
     };
-    protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected getHelpText(): string;
+    protected fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean;
     protected onKeyPress(event: KeyPressEvent): boolean;
     serializeState(): SavedToolbuttonState;
     deserializeFrom(state: SavedToolbuttonState): void;

package/dist/mjs/toolbar/widgets/PenToolWidget.mjs

@@ -116,7 +116,7 @@ class PenToolWidget extends BaseToolWidget {
         return this.createIconForRecord(this.getCurrentPenType());
     }
     // Creates a widget that allows selecting different pen types
-    createPenTypeSelector() {
+    createPenTypeSelector(helpOverlay) {
         const allChoices = this.penTypes.map((penType, index) => {
             return {
                 id: index,
@@ -132,6 +132,7 @@ class PenToolWidget extends BaseToolWidget {
         };
         penSelector.value.onUpdate(onSelectorUpdate);
         shapeSelector.value.onUpdate(onSelectorUpdate);
+        helpOverlay?.registerTextHelpForElements([penSelector.getRootElement(), shapeSelector.getRootElement()], this.localizationTable.penDropdown__penTypeHelpText);
         return {
             setValue: (penTypeIndex) => {
                 penSelector.value.set(penTypeIndex);
@@ -147,7 +148,7 @@ class PenToolWidget extends BaseToolWidget {
             },
         };
     }
-    createStrokeCorrectionOptions() {
+    createStrokeCorrectionOptions(helpOverlay) {
         const container = document.createElement('div');
         container.classList.add('action-button-row', `${toolbarCSSPrefix}-pen-tool-toggle-buttons`);
         const addToggleButton = (labelText, icon) => {
@@ -171,6 +172,9 @@ class PenToolWidget extends BaseToolWidget {
                 setOnInputListener(listener) {
                     onChangeListener = listener;
                 },
+                addHelpText(text) {
+                    helpOverlay?.registerTextHelpForElement(button, text);
+                },
             };
             button.onclick = () => {
                 result.setChecked(!checked);
@@ -185,6 +189,9 @@ class PenToolWidget extends BaseToolWidget {
         autocorrectOption.setOnInputListener(enabled => {
             this.tool.setStrokeAutocorrectEnabled(enabled);
         });
+        // Help text
+        autocorrectOption.addHelpText(this.localizationTable.penDropdown__autocorrectHelpText);
+        stabilizationOption.addHelpText(this.localizationTable.penDropdown__stabilizationHelpText);
         return {
             update: () => {
                 stabilizationOption.setChecked(!!this.tool.getInputMapper());
@@ -192,30 +199,42 @@ class PenToolWidget extends BaseToolWidget {
             },
             addTo: (parent) => {
                 parent.appendChild(container);
-            }
+            },
         };
     }
-    fillDropdown(dropdown) {
+    getHelpText() {
+        return this.localizationTable.penDropdown__baseHelpText;
+    }
+    fillDropdown(dropdown, helpDisplay) {
         const container = document.createElement('div');
         container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
         // Thickness: Value of the input is squared to allow for finer control/larger values.
         const { container: thicknessRow, setValue: setThickness } = makeThicknessSlider(this.editor, thickness => {
             this.tool.setThickness(thickness);
         });
-        const penTypeSelect = this.createPenTypeSelector();
         const colorRow = document.createElement('div');
         const colorLabel = document.createElement('label');
-        const { input: colorInput, container: colorInputContainer, setValue: setColorInputValue } = makeColorInput(this.editor, color => {
+        const colorInputControl = makeColorInput(this.editor, color => {
             this.tool.setColor(color);
         });
+        const { input: colorInput, container: colorInputContainer } = colorInputControl;
         colorInput.id = `${toolbarCSSPrefix}colorInput${PenToolWidget.idCounter++}`;
         colorLabel.innerText = this.localizationTable.colorLabel;
         colorLabel.setAttribute('for', colorInput.id);
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInputContainer);
-        const toggleButtonRow = this.createStrokeCorrectionOptions();
+        // Autocorrect and stabilization options
+        const toggleButtonRow = this.createStrokeCorrectionOptions(helpDisplay);
+        const penTypeSelect = this.createPenTypeSelector(helpDisplay);
+        // Add help text for color and thickness last, as these are likely to be
+        // features users are least interested in.
+        helpDisplay?.registerTextHelpForElement(colorRow, this.localizationTable.penDropdown__colorHelpText);
+        if (helpDisplay) {
+            colorInputControl.registerWithHelpTextDisplay(helpDisplay);
+        }
+        helpDisplay?.registerTextHelpForElement(thicknessRow, this.localizationTable.penDropdown__thicknessHelpText);
         this.updateInputs = () => {
-            setColorInputValue(this.tool.getColor());
+            colorInputControl.setValue(this.tool.getColor());
             setThickness(this.tool.getThickness());
             penTypeSelect.updateIcons();
             // Update the selected stroke factory.

package/dist/mjs/toolbar/widgets/SelectionToolWidget.d.ts

@@ -3,6 +3,7 @@ import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
+import HelpDisplay from '../utils/HelpDisplay';
 export default class SelectionToolWidget extends BaseToolWidget {
     private tool;
     private updateFormatMenu;
@@ -11,5 +12,6 @@ export default class SelectionToolWidget extends BaseToolWidget {
     protected onKeyPress(event: KeyPressEvent): boolean;
     protected getTitle(): string;
     protected createIcon(): Element;
-    protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected getHelpText(): string;
+    protected fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean;
 }

package/dist/mjs/toolbar/widgets/SelectionToolWidget.mjs

@@ -13,7 +13,7 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
     container.classList.add('selection-format-menu', `${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}indentedList`);
     const colorRow = document.createElement('div');
     const colorLabel = document.createElement('label');
-    const { input: colorInput, container: colorInputContainer, setValue: setColorInputValue } = makeColorInput(editor, color => {
+    const colorInputControl = makeColorInput(editor, color => {
         const selection = selectionTool.getSelection();
         if (selection) {
             const updateStyleCommands = [];
@@ -26,6 +26,7 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
             editor.dispatch(unitedCommand);
         }
     });
+    const { input: colorInput, container: colorInputContainer } = colorInputControl;
     colorLabel.innerText = localizationTable.colorLabel;
     const update = () => {
         const selection = selectionTool.getSelection();
@@ -41,12 +42,12 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
                     }
                 }
             }
-            setColorInputValue(Color4.average(colors));
+            colorInputControl.setValue(Color4.average(colors));
         }
         else {
             colorInput.disabled = true;
             container.classList.add('disabled');
-            setColorInputValue(Color4.transparent);
+            colorInputControl.setValue(Color4.transparent);
         }
     };
     colorRow.replaceChildren(colorLabel, colorInputContainer);
@@ -56,6 +57,10 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
             parent.appendChild(container);
         },
         update,
+        registerHelpText: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(colorRow, localizationTable.selectionDropdown__changeColorHelpText);
+            colorInputControl.registerWithHelpTextDisplay(helpDisplay);
+        },
     };
 };
 export default class SelectionToolWidget extends BaseToolWidget {
@@ -66,16 +71,19 @@ export default class SelectionToolWidget extends BaseToolWidget {
         const resizeButton = new ActionButtonWidget(editor, 'resize-btn', () => editor.icons.makeResizeImageToSelectionIcon(), this.localizationTable.resizeImageToSelection, () => {
             this.resizeImageToSelection();
         }, localization);
+        resizeButton.setHelpText(this.localizationTable.selectionDropdown__resizeToHelpText);
         const deleteButton = new ActionButtonWidget(editor, 'delete-btn', () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.deleteSelectedObjects());
             this.tool.clearSelection();
         }, localization);
+        deleteButton.setHelpText(this.localizationTable.selectionDropdown__deleteHelpText);
         const duplicateButton = new ActionButtonWidget(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, async () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(await selection.duplicateSelectedObjects());
             this.setDropdownVisible(false);
         }, localization);
+        duplicateButton.setHelpText(this.localizationTable.selectionDropdown__duplicateHelpText);
         this.addSubWidget(resizeButton);
         this.addSubWidget(deleteButton);
         this.addSubWidget(duplicateButton);
@@ -124,8 +132,11 @@ export default class SelectionToolWidget extends BaseToolWidget {
     createIcon() {
         return this.editor.icons.makeSelectionIcon();
     }
-    fillDropdown(dropdown) {
-        super.fillDropdown(dropdown);
+    getHelpText() {
+        return this.localizationTable.selectionDropdown__baseHelpText;
+    }
+    fillDropdown(dropdown, helpDisplay) {
+        super.fillDropdown(dropdown, helpDisplay);
         const controlsContainer = document.createElement('div');
         controlsContainer.classList.add(`${toolbarCSSPrefix}nonbutton-controls-main-list`);
         dropdown.appendChild(controlsContainer);
@@ -133,6 +144,9 @@ export default class SelectionToolWidget extends BaseToolWidget {
         const formatMenu = makeFormatMenu(this.editor, this.tool, this.localizationTable);
         formatMenu.addTo(controlsContainer);
         this.updateFormatMenu = () => formatMenu.update();
+        if (helpDisplay) {
+            formatMenu.registerHelpText(helpDisplay);
+        }
         formatMenu.update();
         return true;
     }

package/dist/mjs/toolbar/widgets/components/makeColorInput.d.ts

@@ -1,10 +1,12 @@
 import { Color4 } from '@js-draw/math';
 import Editor from '../../../Editor';
+import type HelpDisplay from '../../utils/HelpDisplay';
 type OnColorChangeListener = (color: Color4) => void;
 export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => {
     input: HTMLInputElement;
     container: HTMLSpanElement;
     setValue: (color: Color4 | string) => void;
     closePicker: () => void;
+    registerWithHelpTextDisplay: (helpDisplay: HelpDisplay) => void;
 };
 export default makeColorInput;

package/dist/mjs/toolbar/widgets/components/makeColorInput.mjs

@@ -3,13 +3,16 @@ import  PipetteTool  from '../../../tools/PipetteTool.mjs';
 import  { EditorEventType }  from '../../../types.mjs';
 // Returns [ color input, input container, callback to change the color value ].
 export const makeColorInput = (editor, onColorChange) => {
-    const colorInputContainer = document.createElement('span');
+    const container = document.createElement('span');
+    const inputWrapper = document.createElement('span');
     const colorInput = document.createElement('input');
     colorInput.type = 'button';
     colorInput.classList.add('coloris_input');
-    colorInputContainer.classList.add('color-input-container');
-    colorInputContainer.appendChild(colorInput);
-    const pipetteController = addPipetteTool(editor, colorInputContainer, (color) => {
+    container.classList.add('color-input-container');
+    inputWrapper.classList.add('color-input-wrapper');
+    inputWrapper.appendChild(colorInput);
+    container.appendChild(inputWrapper);
+    const pipetteController = addPipetteTool(editor, container, (color) => {
         colorInput.value = color.toHexString();
         onInputEnd();
         // Update the color preview, if it exists (may be managed by Coloris).
@@ -44,7 +47,7 @@ export const makeColorInput = (editor, onColorChange) => {
             open: true,
         });
         pipetteController.cancel();
-        colorInputContainer.classList.add('picker-open');
+        container.classList.add('picker-open');
         // Focus the Coloris color picker, if it exists.
         // Don't focus the text input within the color picker, however,
         // as this displays a keyboard on mobile devices.
@@ -60,7 +63,7 @@ export const makeColorInput = (editor, onColorChange) => {
         onInputEnd();
         // Restore focus to the input that opened the color picker
         colorInput.focus();
-        colorInputContainer.classList.remove('picker-open');
+        container.classList.remove('picker-open');
     };
     colorInput.addEventListener('close', () => {
         onClose();
@@ -76,13 +79,17 @@ export const makeColorInput = (editor, onColorChange) => {
     };
     return {
         input: colorInput,
-        container: colorInputContainer,
+        container,
         setValue: setColorInputValue,
         closePicker: () => {
             if (isOpen) {
                 onInputEnd();
             }
         },
+        registerWithHelpTextDisplay: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(inputWrapper, editor.localization.colorPickerToggleHelpText);
+            pipetteController.registerWithHelpTextDisplay(helpDisplay);
+        },
     };
 };
 const addPipetteTool = (editor, container, onColorChange) => {
@@ -136,6 +143,9 @@ const addPipetteTool = (editor, container, onColorChange) => {
         cancel: () => {
             endColorSelectMode();
         },
+        registerWithHelpTextDisplay: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(pipetteButton, editor.localization.colorPickerPipetteHelpText);
+        },
     };
 };
 export default makeColorInput;

package/dist/mjs/toolbar/widgets/components/makeGridSelector.d.ts

@@ -7,8 +7,14 @@ interface GridSelectChoice<ChoiceIdType> {
 }
 interface GridSelector<ChoiceIdType> {
     value: MutableReactiveValue<ChoiceIdType>;
+    /**
+     * Connects this grid selector with `other` such that only one item in
+     * either this or `other` can be selected at a time.
+     */
     linkWith: (other: GridSelector<ChoiceIdType>) => void;
+    /** Re-builds the icons shown in the grid selector. */
     updateIcons: () => void;
+    getRootElement: () => HTMLElement;
     addTo: (parent: HTMLElement) => void;
     /** Used internally @internal */
     _radiogroupName: string;

package/dist/mjs/toolbar/widgets/components/makeGridSelector.mjs

@@ -131,6 +131,9 @@ labelText, defaultId, choices) => {
         updateIcons: () => {
             buttons.forEach(button => button.updateIcon());
         },
+        getRootElement() {
+            return outerContainer;
+        },
         addTo: (parent) => {
             parent.appendChild(outerContainer);
         },

package/dist/mjs/tools/FindTool.mjs

@@ -2,6 +2,7 @@
 //
 // @packageDocumentation
 import  TextComponent  from '../components/TextComponent.mjs';
+import  ImageComponent  from '../components/ImageComponent.mjs';
 import  BaseTool  from './BaseTool.mjs';
 import  { toggleFindVisibleShortcutId }  from './keybindings.mjs';
 const cssPrefix = 'find-tool';
@@ -20,11 +21,23 @@ export default class FindTool extends BaseTool {
         return true;
     }
     getMatches(searchFor) {
-        searchFor = searchFor.toLocaleLowerCase();
-        const allTextComponents = this.editor.image.getAllElements()
-            .filter(elem => elem instanceof TextComponent);
-        const matches = allTextComponents.filter(text => text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1);
-        return matches.map(match => match.getBBox());
+        const lowerSearchFor = searchFor.toLocaleLowerCase();
+        const matchingComponents = this.editor.image.getAllElements().filter(component => {
+            let text = '';
+            if (component instanceof TextComponent) {
+                text = component.getText();
+            }
+            else if (component instanceof ImageComponent) {
+                text = component.getAltText() ?? '';
+            }
+            else {
+                return false;
+            }
+            const hasLowercaseMatch = text.toLocaleLowerCase().indexOf(lowerSearchFor) !== -1;
+            const hasSameCaseMatch = text.indexOf(searchFor) !== -1;
+            return hasLowercaseMatch || hasSameCaseMatch;
+        });
+        return matchingComponents.map(match => match.getBBox());
     }
     focusCurrentMatch() {
         const matches = this.getMatches(this.searchInput.value);

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

@@ -24,13 +24,14 @@ export default class PanZoom extends BaseTool {
     private readonly initialRotationSnapAngle;
     private readonly afterRotationStartSnapAngle;
     private readonly pinchZoomStartThreshold;
-    private startDist;
-    private lastDist;
+    private startTouchDist;
+    private lastTouchDist;
     private lastScreenCenter;
     private lastTimestamp;
     private lastPointerDownTimestamp;
     private initialTouchAngle;
     private initialViewportRotation;
+    private initialViewportScale;
     private isScaling;
     private isRotating;
     private inertialScroller;
@@ -43,6 +44,11 @@ export default class PanZoom extends BaseTool {
     private updateVelocity;
     private getCenterDelta;
     private toSnappedRotationDelta;
+    /**
+     * Given a scale update, `scaleFactor`, returns a new scale factor snapped
+     * to a power of two (if within some tolerance of that scale).
+     */
+    private toSnappedScaleFactor;
     private handleTwoFingerMove;
     private handleOneFingerMove;
     onPointerMove({ allPointers }: PointerEvt): void;