js-draw 1.14.0 → 1.15.0

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

@@ -18,7 +18,7 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
     container.classList.add('selection-format-menu', `${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}indentedList`);
     const colorRow = document.createElement('div');
     const colorLabel = document.createElement('label');
-    const { input: colorInput, container: colorInputContainer, setValue: setColorInputValue } = (0, makeColorInput_1.default)(editor, color => {
+    const colorInputControl = (0, makeColorInput_1.default)(editor, color => {
         const selection = selectionTool.getSelection();
         if (selection) {
             const updateStyleCommands = [];
@@ -31,6 +31,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();
@@ -46,12 +47,12 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
                     }
                 }
             }
-            setColorInputValue(math_1.Color4.average(colors));
+            colorInputControl.setValue(math_1.Color4.average(colors));
         }
         else {
             colorInput.disabled = true;
             container.classList.add('disabled');
-            setColorInputValue(math_1.Color4.transparent);
+            colorInputControl.setValue(math_1.Color4.transparent);
         }
     };
     colorRow.replaceChildren(colorLabel, colorInputContainer);
@@ -61,6 +62,10 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
             parent.appendChild(container);
         },
         update,
+        registerHelpText: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(colorRow, localizationTable.selectionDropdown__changeColorHelpText);
+            colorInputControl.registerWithHelpTextDisplay(helpDisplay);
+        },
     };
 };
 class SelectionToolWidget extends BaseToolWidget_1.default {
@@ -71,16 +76,19 @@ class SelectionToolWidget extends BaseToolWidget_1.default {
         const resizeButton = new ActionButtonWidget_1.default(editor, 'resize-btn', () => editor.icons.makeResizeImageToSelectionIcon(), this.localizationTable.resizeImageToSelection, () => {
             this.resizeImageToSelection();
         }, localization);
+        resizeButton.setHelpText(this.localizationTable.selectionDropdown__resizeToHelpText);
         const deleteButton = new ActionButtonWidget_1.default(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_1.default(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);
@@ -129,8 +137,11 @@ class SelectionToolWidget extends BaseToolWidget_1.default {
     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(`${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
         dropdown.appendChild(controlsContainer);
@@ -138,6 +149,9 @@ class SelectionToolWidget extends BaseToolWidget_1.default {
         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/cjs/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/cjs/toolbar/widgets/components/makeColorInput.js

@@ -9,13 +9,16 @@ const PipetteTool_1 = __importDefault(require("../../../tools/PipetteTool"));
 const types_1 = require("../../../types");
 // Returns [ color input, input container, callback to change the color value ].
 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).
@@ -50,7 +53,7 @@ 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.
@@ -66,7 +69,7 @@ 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();
@@ -82,13 +85,17 @@ 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);
+        },
     };
 };
 exports.makeColorInput = makeColorInput;
@@ -143,6 +150,9 @@ const addPipetteTool = (editor, container, onColorChange) => {
         cancel: () => {
             endColorSelectMode();
         },
+        registerWithHelpTextDisplay: (helpDisplay) => {
+            helpDisplay.registerTextHelpForElement(pipetteButton, editor.localization.colorPickerPipetteHelpText);
+        },
     };
 };
 exports.default = exports.makeColorInput;

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

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

package/dist/cjs/tools/FindTool.js

@@ -7,6 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const TextComponent_1 = __importDefault(require("../components/TextComponent"));
+const ImageComponent_1 = __importDefault(require("../components/ImageComponent"));
 const BaseTool_1 = __importDefault(require("./BaseTool"));
 const keybindings_1 = require("./keybindings");
 const cssPrefix = 'find-tool';
@@ -25,11 +26,23 @@ class FindTool extends BaseTool_1.default {
         return true;
     }
     getMatches(searchFor) {
-        searchFor = searchFor.toLocaleLowerCase();
-        const allTextComponents = this.editor.image.getAllElements()
-            .filter(elem => elem instanceof TextComponent_1.default);
-        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_1.default) {
+                text = component.getText();
+            }
+            else if (component instanceof ImageComponent_1.default) {
+                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/cjs/util/addLongPressOrHoverCssClasses.d.ts

@@ -4,7 +4,9 @@
  *
  * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
  */
-declare const addLongPressOrHoverCssClasses: (element: HTMLElement) => {
+declare const addLongPressOrHoverCssClasses: (element: HTMLElement, options?: {
+    timeout: number;
+}) => {
     removeEventListeners: () => void;
 };
 export default addLongPressOrHoverCssClasses;

package/dist/cjs/util/addLongPressOrHoverCssClasses.js

@@ -10,7 +10,7 @@ const listenForLongPressOrHover_1 = __importDefault(require("./listenForLongPres
  *
  * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
  */
-const addLongPressOrHoverCssClasses = (element) => {
+const addLongPressOrHoverCssClasses = (element, options) => {
     const hasLongPressClass = 'has-long-press-or-hover';
     const noLongPressClass = 'no-long-press-or-hover';
     element.classList.add('no-long-press-or-hover');
@@ -23,6 +23,7 @@ const addLongPressOrHoverCssClasses = (element) => {
             element.classList.add(noLongPressClass);
             element.classList.remove(hasLongPressClass);
         },
+        longPressTimeout: options?.timeout,
     });
     return {
         removeEventListeners: () => {

package/dist/cjs/util/cloneElementWithStyles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Makes a clone of `element` and recursively applies styles from the original to the
+ * clone's children.
+ */
+declare const cloneElementWithStyles: (element: HTMLElement) => HTMLElement;
+export default cloneElementWithStyles;

package/dist/cjs/util/cloneElementWithStyles.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Makes a clone of `element` and recursively applies styles from the original to the
+ * clone's children.
+ */
+const cloneElementWithStyles = (element) => {
+    const restyle = (originalElement, clonedElement) => {
+        const originalComputedStyle = getComputedStyle(originalElement);
+        // jsdom doesn't support iterators in CSSStyleDeclarations. Iterate with
+        // an index.
+        for (let index = 0; index < originalComputedStyle.length; index++) {
+            const propertyName = originalComputedStyle.item(index);
+            const propertyValue = originalComputedStyle.getPropertyValue(propertyName);
+            clonedElement.style.setProperty(propertyName, propertyValue);
+        }
+        for (let i = 0; i < originalElement.children.length; i++) {
+            const originalChild = originalElement.children.item(i);
+            const clonedChild = clonedElement.children.item(i);
+            if (originalChild && clonedChild) {
+                restyle(originalChild, clonedChild);
+            }
+            else {
+                console.warn('CloneElement: Missing child');
+            }
+        }
+    };
+    const elementClone = element.cloneNode(true);
+    restyle(element, elementClone);
+    return elementClone;
+};
+exports.default = cloneElementWithStyles;

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.14.0',
+    number: '1.15.0',
 };

package/dist/mjs/Editor.mjs

@@ -1198,6 +1198,11 @@ export class Editor {
                 '',
                 '== Bezier.js ==',
                 mitLicenseAttribution('2023 Mike "Pomax" Kamermans'),
+                '',
+                '',
+                '== js-draw ==',
+                mitLicenseAttribution('2023 Henry Heino'),
+                '',
             ].join('\n'),
             minimized: true,
         });

package/dist/mjs/components/util/StrokeSmoother.mjs

@@ -144,7 +144,7 @@ export class StrokeSmoother {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2.4;
+        const maxRelativeLength = 1.7;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();
@@ -165,11 +165,18 @@ export class StrokeSmoother {
         if (intersection) {
             controlPoint = intersection.point;
         }
-        // No intersection or the intersection is one of the end points?
-        if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
+        // No intersection?
+        if (!controlPoint) {
+            // Estimate the control point position based on the entering tangent line
+            controlPoint = segmentStart
+                .lerp(segmentEnd, 0.5)
+                .lerp(segmentStart.plus(enteringVec.times(startEndDist)), 0.1);
+        }
+        // Equal to an endpoint?
+        if (segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
             // Position the control point closer to the first -- the connecting
             // segment will be roughly a line.
-            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
+            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 5));
         }
         console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
         console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');

package/dist/mjs/rendering/caching/CacheRecordManager.mjs

@@ -49,7 +49,7 @@ export class CacheRecordManager {
                 numberAllocd++;
             }
         }
-        averageReassignedCount /= Math.max(this.cacheRecords.length, 0);
+        averageReassignedCount /= Math.max(this.cacheRecords.length, 1);
         const debugInfo = [
             `${this.cacheRecords.length} cache records (max ${this.maxCanvases})`,
             `${numberAllocd} assigned to screen regions`,

package/dist/mjs/testing/sendHtmlSwipe.d.ts

@@ -0,0 +1,4 @@
+import { Point2 } from '@js-draw/math';
+/** Swipes `element` using HTML pointer events. */
+declare const sendHtmlSwipe: (element: HTMLElement, start: Point2, end: Point2, timeMs?: number) => Promise<void>;
+export default sendHtmlSwipe;

package/dist/mjs/testing/sendHtmlSwipe.mjs

@@ -0,0 +1,12 @@
+/** Swipes `element` using HTML pointer events. */
+const sendHtmlSwipe = async (element, start, end, timeMs = 300) => {
+    element.dispatchEvent(new PointerEvent('pointerdown', { isPrimary: true, clientX: start.x, clientY: start.y, }));
+    const step = 0.1;
+    for (let i = 0; i < 1; i += step) {
+        await jest.advanceTimersByTimeAsync(timeMs * step);
+        const currentPoint = start.lerp(end, i);
+        element.dispatchEvent(new PointerEvent('pointermove', { isPrimary: true, clientX: currentPoint.x, clientY: currentPoint.y, }));
+    }
+    element.dispatchEvent(new PointerEvent('pointerup', { isPrimary: true, clientX: end.x, clientY: end.y, }));
+};
+export default sendHtmlSwipe;

package/dist/mjs/toolbar/EdgeToolbar.d.ts

@@ -44,6 +44,7 @@ export default class EdgeToolbar extends AbstractToolbar {
     private sidebarVisible;
     private sidebarY;
     private sidebarTitle;
+    private clearDragListeners;
     /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable: ToolbarLocalization);
     private listenForVisibilityChanges;

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -4,6 +4,7 @@ import  EdgeToolbarLayoutManager  from './widgets/layout/EdgeToolbarLayoutManage
 import  { MutableReactiveValue, ReactiveValue }  from '../util/ReactiveValue.mjs';
 import  AbstractToolbar  from './AbstractToolbar.mjs';
 import  stopPropagationOfScrollingWheelEvents  from '../util/stopPropagationOfScrollingWheelEvents.mjs';
+import  makeDraggable  from './utils/makeDraggable.mjs';
 /**
  * Creates an `EdgeToolbar`.
  *
@@ -39,6 +40,7 @@ export default class EdgeToolbar extends AbstractToolbar {
     /** @internal */
     constructor(editor, parent, localizationTable) {
         super(editor, localizationTable);
+        this.clearDragListeners = null;
         this.toolbarContainer = document.createElement('div');
         this.toolbarContainer.classList.add(`${toolbarCSSPrefix}root`);
         this.toolbarContainer.classList.add(`${toolbarCSSPrefix}element`);
@@ -124,8 +126,11 @@ export default class EdgeToolbar extends AbstractToolbar {
             // to animate it to 1.
             this.menuContainer.style.opacity = '0';
         }
+        const prefersReduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)') ?? '';
         this.sidebarVisible.onUpdate(visible => {
             const animationProperties = `${animationDuration}ms ease`;
+            // We need to use different animations when reducing motion.
+            const reduceMotion = prefersReduceMotion.matches ? '-reduce-motion' : '';
             if (visible) {
                 this.sidebarY.set(this.snappedSidebarY());
                 if (animationTimeout) {
@@ -133,8 +138,10 @@ export default class EdgeToolbar extends AbstractToolbar {
                     animationTimeout = null;
                 }
                 this.menuContainer.style.display = '';
-                this.sidebarContainer.style.animation = `${animationProperties} ${toolbarCSSPrefix}-edgemenu-transition-in`;
-                this.menuContainer.style.animation = `${animationProperties} ${toolbarCSSPrefix}-edgemenu-container-transition-in`;
+                this.sidebarContainer.style.animation =
+                    `${animationProperties} ${toolbarCSSPrefix}-edgemenu-transition-in${reduceMotion}`;
+                this.menuContainer.style.animation =
+                    `${animationProperties} ${toolbarCSSPrefix}-edgemenu-container-transition-in${reduceMotion}`;
                 this.menuContainer.style.opacity = '1';
                 // Focus the close button when first shown, but prevent scroll because the button
                 // is likely at the bottom of the screen (and we want the full sidebar to remain
@@ -144,8 +151,10 @@ export default class EdgeToolbar extends AbstractToolbar {
             else {
                 this.closeColorPickers();
                 if (animationTimeout === null) {
-                    this.sidebarContainer.style.animation = ` ${animationProperties} ${toolbarCSSPrefix}-edgemenu-transition-out`;
-                    this.menuContainer.style.animation = `${animationProperties} ${toolbarCSSPrefix}-edgemenu-container-transition-out`;
+                    this.sidebarContainer.style.animation =
+                        `${animationProperties} ${toolbarCSSPrefix}-edgemenu-transition-out${reduceMotion}`;
+                    this.menuContainer.style.animation =
+                        `${animationProperties} ${toolbarCSSPrefix}-edgemenu-container-transition-out${reduceMotion}`;
                     // Manually set the container's opacity to prevent flickering when closing
                     // the toolbar.
                     this.menuContainer.style.opacity = '0';
@@ -254,15 +263,12 @@ export default class EdgeToolbar extends AbstractToolbar {
         this.toolbarContainer.remove();
         this.menuContainer.remove();
         this.toolRowResizeObserver.disconnect();
+        this.clearDragListeners?.();
     }
     initDragListeners() {
-        let lastX = 0;
-        let lastY = 0;
-        let startX = 0;
-        let startY = 0;
-        let pointerDown = false;
-        let capturedPointerId = null;
         const dragElements = [this.closeButton, this.sidebarContainer, this.sidebarContent];
+        // Forward longer touch events from the menu background to the
+        // editor (and close the sidebar).
         this.manageListener(this.editor.handlePointerEventsExceptClicksFrom(this.menuContainer, (eventName, event) => {
             if (event.target === this.menuContainer) {
                 if (eventName === 'pointerdown') {
@@ -281,113 +287,27 @@ export default class EdgeToolbar extends AbstractToolbar {
         }, (_eventName, event) => {
             return event.target === this.menuContainer;
         }));
-        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 (ancestor === this.sidebarContainer) {
-                    hasSuitableAncestors = true;
-                    break;
-                }
-                ancestor = ancestor.parentElement;
-            }
-            return !undraggableElementTypes.includes(element.tagName) && hasSuitableAncestors;
-        };
-        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;
-        this.sidebarContainer.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 });
+        // Set lastGestureWasRoughlyClick to `true` initially because on page load
+        // performance.now() is zero.
+        let lastGestureWasRoughlyClick = true;
         let gestureEndTimestamp = 0;
-        const onGestureEnd = (_event) => {
-            // If the pointerup/pointercancel event was for a pointer not being tracked,
-            if (!pointerDown) {
-                return;
-            }
-            gestureEndTimestamp = performance.now();
-            if (capturedPointerId !== null) {
-                this.sidebarContainer.releasePointerCapture(capturedPointerId);
-                capturedPointerId = null;
-            }
-            this.finalizeDrag();
-            pointerDown = false;
-            startedDragging = false;
-        };
-        this.sidebarContainer.onpointermove = 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()) {
-                this.sidebarContainer.setPointerCapture(event.pointerId);
-                capturedPointerId = event.pointerId;
-            }
-            const x = event.clientX;
-            const y = event.clientY;
-            const dx = x - lastX;
-            const dy = y - lastY;
-            if (Math.abs(y - startY) > clickThreshold || startedDragging) {
-                this.handleDrag(dx, dy);
-                lastX = x;
-                lastY = y;
-                startedDragging = true;
-            }
-        };
-        this.sidebarContainer.onpointerleave = event => {
-            {
-                // Capture the pointer if it exits the container while dragging.
-                if (capturedPointerId === null && pointerDown && event.isPrimary) {
-                    this.sidebarContainer.setPointerCapture(event.pointerId);
-                    capturedPointerId = event.pointerId;
-                }
-            }
-        };
+        const dragController = makeDraggable(this.sidebarContainer, {
+            draggableChildElements: dragElements,
+            onDrag: (deltaX, deltaY) => this.handleDrag(deltaX, deltaY),
+            onDragEnd: (dragStatistics) => {
+                gestureEndTimestamp = dragStatistics.endTimestamp;
+                lastGestureWasRoughlyClick = dragStatistics.roughlyClick;
+                this.finalizeDrag();
+            },
+        });
+        this.clearDragListeners = () => dragController.removeListeners();
         this.closeButton.onclick = () => {
             const wasJustDragging = performance.now() - gestureEndTimestamp < 100;
-            const roughlyClick = isRoughlyClick();
             // Ignore the click event if it was caused by dragging the button.
-            if (wasJustDragging && roughlyClick || !wasJustDragging) {
+            if ((wasJustDragging && lastGestureWasRoughlyClick) || !wasJustDragging) {
                 this.sidebarVisible.set(false);
             }
         };
-        this.sidebarContainer.onpointerup = onGestureEnd;
-        this.sidebarContainer.onpointercancel = onGestureEnd;
     }
     /**
      * Updates the position of this menu **during** a drag. After a drag ends,

package/dist/mjs/toolbar/IconProvider.d.ts

@@ -66,6 +66,7 @@ export default class IconProvider {
     makeSaveIcon(): IconElemType;
     makeConfigureDocumentIcon(): IconElemType;
     makeOverflowIcon(): IconElemType;
+    makeHelpIcon(): IconElemType;
     /**
      * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
      * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.

package/dist/mjs/toolbar/IconProvider.mjs

@@ -779,6 +779,33 @@ class IconProvider {
 			z
 		`);
     }
+    makeHelpIcon() {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.innerHTML = `
+			<circle
+				style="stroke-width:1.587; stroke: var(--icon-color);"
+				fill="none"
+				cx="13.23"
+				cy="13.23"
+				r="11.9"
+			/>
+			<path
+				style="stroke-width: 3; stroke-linecap: butt; stroke: var(--icon-color);"
+				fill="none"
+				d="M 9.26,6.61 C 18.7,3.25 19.95,10.4 14.3,13.4 c -1.15,0.61 -1.32,1.32 -1.32,2.65 v 2.12"
+			/>
+			<circle
+				style="fill: var(--icon-color);"
+				cx="13"
+				cy="21.32"
+				r="1.9"
+			/>
+		`;
+        svg.setAttribute('viewBox', '0 0 26.46 26.46');
+        svg.setAttribute('width', '100');
+        svg.setAttribute('height', '100');
+        return svg;
+    }
     /**
      * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
      * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.