js-draw 1.14.0 → 1.16.0

package/dist/cjs/toolbar/utils/makeDraggable.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const makeDraggable = (dragElement, options) => {
+    const dragElements = [
+        ...options.draggableChildElements,
+        dragElement,
+    ];
+    let lastX = 0;
+    let lastY = 0;
+    let startX = 0;
+    let startY = 0;
+    let pointerDown = false;
+    let capturedPointerId = null;
+    const isDraggableElement = (element) => {
+        if (!element) {
+            return false;
+        }
+        if (dragElements.includes(element)) {
+            return true;
+        }
+        // Some inputs handle dragging themselves. Don't also interpret such gestures
+        // as dragging the dropdown.
+        const undraggableElementTypes = ['INPUT', 'SELECT', 'IMG'];
+        let hasSuitableAncestors = false;
+        let ancestor = element.parentElement;
+        while (ancestor) {
+            if (undraggableElementTypes.includes(ancestor.tagName)) {
+                break;
+            }
+            if (dragElements.includes(ancestor)) {
+                hasSuitableAncestors = true;
+                break;
+            }
+            ancestor = ancestor.parentElement;
+        }
+        return !undraggableElementTypes.includes(element.tagName) && hasSuitableAncestors;
+    };
+    const removeEventListenerCallbacks = [];
+    const addEventListener = (listenerType, listener, options) => {
+        dragElement.addEventListener(listenerType, listener, options);
+        removeEventListenerCallbacks.push(() => {
+            dragElement.removeEventListener(listenerType, listener);
+        });
+    };
+    const clickThreshold = 5;
+    // Returns whether the current (or if no current, **the last**) gesture is roughly a click.
+    // Because this can be called **after** a gesture has just ended, it should not require
+    // the gesture to be in progress.
+    const isRoughlyClick = () => {
+        return Math.hypot(lastX - startX, lastY - startY) < clickThreshold;
+    };
+    let startedDragging = false;
+    addEventListener('pointerdown', event => {
+        if (event.defaultPrevented || !isDraggableElement(event.target)) {
+            return;
+        }
+        if (event.isPrimary) {
+            startedDragging = false;
+            lastX = event.clientX;
+            lastY = event.clientY;
+            startX = event.clientX;
+            startY = event.clientY;
+            capturedPointerId = null;
+            pointerDown = true;
+        }
+    }, { passive: true });
+    const onGestureEnd = (_event) => {
+        // If the pointerup/pointercancel event was for a pointer not being tracked,
+        if (!pointerDown) {
+            return;
+        }
+        if (capturedPointerId !== null) {
+            dragElement.releasePointerCapture(capturedPointerId);
+            capturedPointerId = null;
+        }
+        options.onDragEnd({
+            roughlyClick: isRoughlyClick(),
+            endTimestamp: performance.now(),
+            displacement: math_1.Vec2.of(lastX - startX, lastY - startY),
+        });
+        pointerDown = false;
+        startedDragging = false;
+    };
+    addEventListener('pointermove', event => {
+        if (!event.isPrimary || !pointerDown) {
+            return undefined;
+        }
+        // Mouse event and no buttons pressed? Cancel the event.
+        // This can happen if the event was canceled by a focus change (e.g. by opening a
+        // right-click menu).
+        if (event.pointerType === 'mouse' && event.buttons === 0) {
+            onGestureEnd(event);
+            return undefined;
+        }
+        // Only capture after motion -- capturing early prevents click events in Chrome.
+        if (capturedPointerId === null && !isRoughlyClick()) {
+            dragElement.setPointerCapture(event.pointerId);
+            capturedPointerId = event.pointerId;
+        }
+        const x = event.clientX;
+        const y = event.clientY;
+        const dx = x - lastX;
+        const dy = y - lastY;
+        const isClick = Math.abs(x - startX) <= clickThreshold && Math.abs(y - startY) <= clickThreshold;
+        if (!isClick || startedDragging) {
+            options.onDrag(dx, dy, math_1.Vec2.of(x - startX, y - startY));
+            lastX = x;
+            lastY = y;
+            startedDragging = true;
+        }
+    });
+    addEventListener('pointerleave', event => {
+        // Capture the pointer if it exits the container while dragging.
+        if (capturedPointerId === null && pointerDown && event.isPrimary) {
+            dragElement.setPointerCapture(event.pointerId);
+            capturedPointerId = event.pointerId;
+        }
+    });
+    addEventListener('pointerup', onGestureEnd);
+    addEventListener('pointercancel', onGestureEnd);
+    return {
+        removeListeners: () => {
+            for (const removeListenerCallback of removeEventListenerCallbacks) {
+                removeListenerCallback();
+            }
+        },
+    };
+};
+exports.default = makeDraggable;

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

@@ -8,6 +8,13 @@ export default class ActionButtonWidget extends BaseWidget {
     protected clickAction: () => void;
     protected mustBeToplevel: boolean;
     constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization, mustBeToplevel?: boolean, autoDisableInReadOnlyEditors?: boolean);
+    /**
+     * Sets the text shown in a help overlay for this button.
+     *
+     * See {@link getHelpText}.
+     */
+    setHelpText(helpText: string): void;
+    protected getHelpText(): string | undefined;
     protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected handleClick(): void;
     protected getTitle(): string;

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

@@ -13,7 +13,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _ActionButtonWidget_autoDisableInReadOnlyEditors;
+var _ActionButtonWidget_autoDisableInReadOnlyEditors, _ActionButtonWidget_helpText;
 Object.defineProperty(exports, "__esModule", { value: true });
 const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 class ActionButtonWidget extends BaseWidget_1.default {
@@ -24,8 +24,20 @@ class ActionButtonWidget extends BaseWidget_1.default {
         this.clickAction = clickAction;
         this.mustBeToplevel = mustBeToplevel;
         _ActionButtonWidget_autoDisableInReadOnlyEditors.set(this, void 0);
+        _ActionButtonWidget_helpText.set(this, undefined);
         __classPrivateFieldSet(this, _ActionButtonWidget_autoDisableInReadOnlyEditors, autoDisableInReadOnlyEditors, "f");
     }
+    /**
+     * Sets the text shown in a help overlay for this button.
+     *
+     * See {@link getHelpText}.
+     */
+    setHelpText(helpText) {
+        __classPrivateFieldSet(this, _ActionButtonWidget_helpText, helpText, "f");
+    }
+    getHelpText() {
+        return __classPrivateFieldGet(this, _ActionButtonWidget_helpText, "f");
+    }
     shouldAutoDisableInReadOnlyEditor() {
         return __classPrivateFieldGet(this, _ActionButtonWidget_autoDisableInReadOnlyEditors, "f");
     }
@@ -45,5 +57,5 @@ class ActionButtonWidget extends BaseWidget_1.default {
         return this.mustBeToplevel;
     }
 }
-_ActionButtonWidget_autoDisableInReadOnlyEditors = new WeakMap();
+_ActionButtonWidget_autoDisableInReadOnlyEditors = new WeakMap(), _ActionButtonWidget_helpText = new WeakMap();
 exports.default = ActionButtonWidget;

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

@@ -2,6 +2,7 @@ import Editor from '../../Editor';
 import { KeyPressEvent } from '../../inputEvents';
 import { ToolbarLocalization } from '../localization';
 import { WidgetContentLayoutManager } from './layout/types';
+import HelpDisplay from '../utils/HelpDisplay';
 export type SavedToolbuttonState = Record<string, any>;
 /**
  * A set of labels that allow toolbar themes to treat buttons differently.
@@ -66,7 +67,13 @@ export default abstract class BaseWidget {
     getUniqueIdIn(container: Record<string, BaseWidget>): string;
     protected abstract getTitle(): string;
     protected abstract createIcon(): Element | null;
-    protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean;
+    /**
+     * Should return a 1-2 sentence description of the widget.
+     *
+     * At present, this is only used if this widget has an associated dropdown.
+     */
+    protected getHelpText(): undefined | string;
     /** @deprecated Renamed to `setUpButtonEventListeners`. */
     protected setupActionBtnClickListener(button: HTMLElement): void;
     protected setUpButtonEventListeners(button: HTMLElement): void;

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

@@ -21,6 +21,7 @@ const inputEvents_1 = require("../../inputEvents");
 const constants_1 = require("../constants");
 const DropdownLayoutManager_1 = __importDefault(require("./layout/DropdownLayoutManager"));
 const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../util/addLongPressOrHoverCssClasses"));
+const HelpDisplay_1 = __importDefault(require("../utils/HelpDisplay"));
 /**
  * A set of labels that allow toolbar themes to treat buttons differently.
  */
@@ -133,17 +134,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);
@@ -235,10 +249,15 @@ class BaseWidget {
         this.container.replaceChildren();
         this.button.replaceChildren(this.icon, this.label);
         this.container.appendChild(this.button);
+        const helpDisplay = new HelpDisplay_1.default(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.
@@ -264,6 +283,9 @@ class BaseWidget {
                     this.focus();
                 }
             });
+            if (helpDisplay.hasHelpText()) {
+                this.dropdown.appendChild(helpDisplay.createToggleButton());
+            }
             this.dropdown.appendChild(this.dropdownContent);
         }
         this.setDropdownVisible(false);

package/dist/cjs/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/cjs/toolbar/widgets/DocumentPropertiesWidget.js

@@ -118,7 +118,10 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
         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(`${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`, `${constants_1.toolbarCSSPrefix}document-properties-widget`);
         // Background color input
@@ -126,7 +129,7 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
             const backgroundColorRow = document.createElement('div');
             const backgroundColorLabel = document.createElement('label');
             backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
-            const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue } = (0, makeColorInput_1.default)(this.editor, color => {
+            const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue, registerWithHelpTextDisplay: registerHelpForInputs, } = (0, makeColorInput_1.default)(this.editor, color => {
                 if (!color.eq(this.getBackgroundColor())) {
                     this.setBackgroundColor(color);
                 }
@@ -134,9 +137,16 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
             colorInput.id = `${constants_1.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');
@@ -217,6 +227,11 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
         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/cjs/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/cjs/toolbar/widgets/HandToolWidget.js

@@ -34,7 +34,7 @@ const constants_1 = require("../constants");
 const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
 const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 const makeSeparator_1 = __importDefault(require("./components/makeSeparator"));
-const makeZoomControl = (localizationTable, editor) => {
+const makeZoomControl = (localizationTable, editor, helpDisplay) => {
     const zoomLevelRow = document.createElement('div');
     const increaseButton = document.createElement('button');
     const decreaseButton = document.createElement('button');
@@ -83,15 +83,20 @@ const makeZoomControl = (localizationTable, editor) => {
         const addToHistory = false;
         editor.dispatch(Viewport_1.default.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_1.default {
-    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(types_1.EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind === types_1.EditorEventType.ToolUpdated && toolEvt.tool === tool) {
                 const allEnabled = !!(tool.getMode() & PanZoom_1.PanZoomMode.SinglePointerGestures);
@@ -121,6 +126,9 @@ class HandModeWidget extends BaseWidget_1.default {
     fillDropdown(_dropdown) {
         return false;
     }
+    getHelpText() {
+        return this.helpText;
+    }
 }
 class HandToolWidget extends BaseToolWidget_1.default {
     constructor(editor, 
@@ -145,8 +153,8 @@ class HandToolWidget extends BaseToolWidget_1.default {
             this.container.classList.add('dropdownShowable');
         }
         // Controls for the overriding hand tool.
-        const touchPanningWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoom_1.PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
-        const rotationLockWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoom_1.PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        const touchPanningWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoom_1.PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable.handDropdown__touchPanningHelpText, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoom_1.PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable.handDropdown__lockRotationHelpText, localizationTable);
         this.addSubWidget(touchPanningWidget);
         this.addSubWidget(rotationLockWidget);
     }
@@ -177,13 +185,17 @@ class HandToolWidget extends BaseToolWidget_1.default {
             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(`${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
         (0, makeSeparator_1.default)().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/cjs/toolbar/widgets/InsertImageWidget.js

@@ -100,6 +100,7 @@ class InsertImageWidget extends BaseWidget_1.default {
         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/cjs/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/cjs/toolbar/widgets/PenToolWidget.js

@@ -121,7 +121,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
         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,
@@ -137,6 +137,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
         };
         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);
@@ -152,7 +153,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
             },
         };
     }
-    createStrokeCorrectionOptions() {
+    createStrokeCorrectionOptions(helpOverlay) {
         const container = document.createElement('div');
         container.classList.add('action-button-row', `${constants_1.toolbarCSSPrefix}-pen-tool-toggle-buttons`);
         const addToggleButton = (labelText, icon) => {
@@ -176,6 +177,9 @@ class PenToolWidget extends BaseToolWidget_1.default {
                 setOnInputListener(listener) {
                     onChangeListener = listener;
                 },
+                addHelpText(text) {
+                    helpOverlay?.registerTextHelpForElement(button, text);
+                },
             };
             button.onclick = () => {
                 result.setChecked(!checked);
@@ -190,6 +194,9 @@ class PenToolWidget extends BaseToolWidget_1.default {
         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());
@@ -197,30 +204,42 @@ class PenToolWidget extends BaseToolWidget_1.default {
             },
             addTo: (parent) => {
                 parent.appendChild(container);
-            }
+            },
         };
     }
-    fillDropdown(dropdown) {
+    getHelpText() {
+        return this.localizationTable.penDropdown__baseHelpText;
+    }
+    fillDropdown(dropdown, helpDisplay) {
         const container = document.createElement('div');
         container.classList.add(`${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
         // Thickness: Value of the input is squared to allow for finer control/larger values.
         const { container: thicknessRow, setValue: setThickness } = (0, makeThicknessSlider_1.default)(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 } = (0, makeColorInput_1.default)(this.editor, color => {
+        const colorInputControl = (0, makeColorInput_1.default)(this.editor, color => {
             this.tool.setColor(color);
         });
+        const { input: colorInput, container: colorInputContainer } = colorInputControl;
         colorInput.id = `${constants_1.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/cjs/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;
 }