js-draw 1.12.0 → 1.13.1

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

@@ -20,6 +20,7 @@ const ToolbarShortcutHandler_1 = __importDefault(require("../../tools/ToolbarSho
 const inputEvents_1 = require("../../inputEvents");
 const constants_1 = require("../constants");
 const DropdownLayoutManager_1 = __importDefault(require("./layout/DropdownLayoutManager"));
+const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../util/addLongPressOrHoverCssClasses"));
 /**
  * A set of labels that allow toolbar themes to treat buttons differently.
  */
@@ -66,6 +67,7 @@ class BaseWidget {
         this.button.oncontextmenu = event => {
             event.preventDefault();
         };
+        (0, addLongPressOrHoverCssClasses_1.default)(this.button);
     }
     /**
      * Should return a constant true or false value. If true (the default),

package/dist/cjs/toolbar/widgets/components/makeGridSelector.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const ReactiveValue_1 = require("../../../util/ReactiveValue");
 const stopPropagationOfScrollingWheelEvents_1 = __importDefault(require("../../../util/stopPropagationOfScrollingWheelEvents"));
+const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../../util/addLongPressOrHoverCssClasses"));
 const constants_1 = require("../../constants");
 let idCounter = 0;
 /**
@@ -36,6 +37,9 @@ labelText, defaultId, choices) => {
         const button = document.createElement('input');
         button.type = 'radio';
         button.id = `${constants_1.toolbarCSSPrefix}-grid-select-button-${idCounter++}`;
+        // Some toolbars only show the label on hover. Having long press or hover
+        // CSS classes are helpful here.
+        (0, addLongPressOrHoverCssClasses_1.default)(buttonContainer);
         // Clicking any part of labelContainer triggers the radio button.
         const labelContainer = document.createElement('label');
         const rebuildLabel = () => {
@@ -81,6 +85,12 @@ labelText, defaultId, choices) => {
         button.onblur = () => {
             buttonContainer.classList.remove('focus-visible');
         };
+        // Prevent the right-click menu from being shown on long-press
+        // (important for some toolbars that use long-press gestures to
+        // show grid selector labels).
+        buttonContainer.oncontextmenu = event => {
+            event.preventDefault();
+        };
         buttonContainer.replaceChildren(button, labelContainer);
         menuContainer.appendChild(buttonContainer);
         // Set whether the current button is checked

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

@@ -0,0 +1,10 @@
+/**
+ * When a pointer is inside `element`, after a delay, adds the `has-long-press-or-hover`
+ * CSS class to `element`.
+ *
+ * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
+ */
+declare const addLongPressOrHoverCssClasses: (element: HTMLElement) => {
+    removeEventListeners: () => void;
+};
+export default addLongPressOrHoverCssClasses;

package/dist/cjs/util/addLongPressOrHoverCssClasses.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const listenForLongPressOrHover_1 = __importDefault(require("./listenForLongPressOrHover"));
+/**
+ * When a pointer is inside `element`, after a delay, adds the `has-long-press-or-hover`
+ * CSS class to `element`.
+ *
+ * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
+ */
+const addLongPressOrHoverCssClasses = (element) => {
+    const hasLongPressClass = 'has-long-press-or-hover';
+    const noLongPressClass = 'no-long-press-or-hover';
+    element.classList.add('no-long-press-or-hover');
+    const { removeListeners } = (0, listenForLongPressOrHover_1.default)(element, {
+        onStart() {
+            element.classList.remove(noLongPressClass);
+            element.classList.add(hasLongPressClass);
+        },
+        onEnd() {
+            element.classList.add(noLongPressClass);
+            element.classList.remove(hasLongPressClass);
+        },
+    });
+    return {
+        removeEventListeners: () => {
+            element.classList.remove(noLongPressClass);
+            removeListeners();
+        },
+    };
+};
+exports.default = addLongPressOrHoverCssClasses;

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

@@ -0,0 +1,13 @@
+type Options = {
+    onStart: () => void;
+    onEnd: () => void;
+    longPressTimeout?: number;
+};
+/**
+ * Calls `options.onStart` at the start of a long press or hover.
+ * Calls `options.onEnd` when no pointers are within the container.
+ */
+declare const listenForLongPressOrHover: (target: HTMLElement, options: Options) => {
+    removeListeners: () => void;
+};
+export default listenForLongPressOrHover;

package/dist/cjs/util/listenForLongPressOrHover.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Calls `options.onStart` at the start of a long press or hover.
+ * Calls `options.onEnd` when no pointers are within the container.
+ */
+const listenForLongPressOrHover = (target, options) => {
+    const pointersInside = new Map();
+    let timeoutId = null;
+    let isLongPressInProgress = false;
+    const updateTimeout = () => {
+        if (pointersInside.size === 0) {
+            if (isLongPressInProgress) {
+                isLongPressInProgress = false;
+                options.onEnd();
+            }
+            else if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+        }
+        else {
+            const nowTime = Date.now();
+            let timeSinceFirstPointer = 0; // ms
+            for (const record of pointersInside.values()) {
+                const timeSince = nowTime - record.timeEnter;
+                timeSinceFirstPointer = Math.max(timeSince, timeSinceFirstPointer);
+            }
+            const longPressTimeout = options.longPressTimeout ?? 700; // ms
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            const timeLeft = longPressTimeout - timeSinceFirstPointer;
+            if (timeLeft <= 0) {
+                options.onStart();
+                isLongPressInProgress = true;
+            }
+            else {
+                timeoutId = setTimeout(() => {
+                    timeoutId = null;
+                    updateTimeout();
+                }, timeLeft);
+            }
+        }
+    };
+    // Detects long press
+    const pointerEventListener = (event) => {
+        const eventRecord = {
+            timeEnter: Date.now(),
+        };
+        if (event.type === 'pointerenter') {
+            pointersInside.set(event.pointerId, eventRecord);
+        }
+        else if (event.type === 'pointerleave' || event.type === 'pointercancel') {
+            // In some cases (for example, a click with a stylus on Android/Chrome), moving the pen
+            // over the target, clicking, then moving the pen out of the target produces input
+            // similar to this:
+            // - pointerenter (pointerId: 4)
+            // - pointerleave (pointerId: 4)
+            // - pointerenter (pointerId: 6)
+            // - pointerenter (pointerId: 1)
+            // - pointerleave (pointerId: 6)
+            // Observe that no pointerleave event was fired for the pointer with ID 1.
+            pointersInside.clear();
+        }
+        updateTimeout();
+    };
+    target.addEventListener('pointerenter', pointerEventListener);
+    target.addEventListener('pointerleave', pointerEventListener);
+    target.addEventListener('pointercancel', pointerEventListener);
+    return {
+        removeListeners: () => {
+            target.removeEventListener('pointerenter', pointerEventListener);
+            target.removeEventListener('pointerleave', pointerEventListener);
+            target.removeEventListener('pointercancel', pointerEventListener);
+        },
+    };
+};
+exports.default = listenForLongPressOrHover;

package/dist/cjs/util/listenForLongPressOrHover.test.d.ts

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

package/dist/cjs/version.js

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

package/dist/mjs/Editor.d.ts

@@ -253,6 +253,8 @@ export declare class Editor {
     addToolbar(defaultLayout?: boolean): AbstractToolbar;
     private registerListeners;
     private updateEditorSizeVariables;
+    /** @internal */
+    protected handleHTMLWheelEvent(event: WheelEvent): boolean | undefined;
     private pointers;
     private getPointerList;
     /**
@@ -312,9 +314,9 @@ export declare class Editor {
         remove: () => void;
     };
     /** @internal */
-    protected handleHTMLKeyDownEvent(htmlEvent: KeyboardEvent): void;
+    protected handleHTMLKeyDownEvent(htmlEvent: KeyboardEvent): boolean;
     /** @internal */
-    protected handleHTMLKeyUpEvent(htmlEvent: KeyboardEvent): void;
+    protected handleHTMLKeyUpEvent(htmlEvent: KeyboardEvent): boolean;
     /**
      * Adds event listners for keypresses (and drop events) on `elem` and forwards those
      * events to the editor.

package/dist/mjs/Editor.mjs

@@ -239,41 +239,7 @@ export class Editor {
         this.handleKeyEventsFrom(this.renderingRegion);
         this.handlePointerEventsFrom(this.accessibilityAnnounceArea);
         this.container.addEventListener('wheel', evt => {
-            let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
-            // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
-            // pinch-zooming.
-            if (!evt.ctrlKey && !evt.metaKey) {
-                if (!this.settings.wheelEventsEnabled) {
-                    return;
-                }
-                else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
-                    const focusedChild = this.container.querySelector(':focus');
-                    if (!focusedChild) {
-                        return;
-                    }
-                }
-            }
-            if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
-                delta = delta.times(15);
-            }
-            else if (evt.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
-                delta = delta.times(100);
-            }
-            if (evt.ctrlKey || evt.metaKey) {
-                delta = Vec3.of(0, 0, evt.deltaY);
-            }
-            // Ensure that `pos` is relative to `this.renderingRegion`
-            const bbox = this.renderingRegion.getBoundingClientRect();
-            const pos = Vec2.of(evt.clientX, evt.clientY).minus(Vec2.of(bbox.left, bbox.top));
-            if (this.toolController.dispatchInputEvent({
-                kind: InputEvtType.WheelEvt,
-                delta,
-                screenPos: pos,
-            })) {
-                evt.preventDefault();
-                return true;
-            }
-            return false;
+            this.handleHTMLWheelEvent(evt);
         });
         const handleResize = () => {
             this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
@@ -317,6 +283,44 @@ export class Editor {
         this.container.style.setProperty('--editor-current-display-width-px', `${this.renderingRegion.clientWidth}px`);
         this.container.style.setProperty('--editor-current-display-height-px', `${this.renderingRegion.clientHeight}px`);
     }
+    /** @internal */
+    handleHTMLWheelEvent(event) {
+        let delta = Vec3.of(event.deltaX, event.deltaY, event.deltaZ);
+        // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
+        // pinch-zooming.
+        if (!event.ctrlKey && !event.metaKey) {
+            if (!this.settings.wheelEventsEnabled) {
+                return;
+            }
+            else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+                const focusedChild = this.container.querySelector(':focus');
+                if (!focusedChild) {
+                    return;
+                }
+            }
+        }
+        if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+            delta = delta.times(15);
+        }
+        else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+            delta = delta.times(100);
+        }
+        if (event.ctrlKey || event.metaKey) {
+            delta = Vec3.of(0, 0, event.deltaY);
+        }
+        // Ensure that `pos` is relative to `this.renderingRegion`
+        const bbox = this.renderingRegion.getBoundingClientRect();
+        const pos = Vec2.of(event.clientX, event.clientY).minus(Vec2.of(bbox.left, bbox.top));
+        if (this.toolController.dispatchInputEvent({
+            kind: InputEvtType.WheelEvt,
+            delta,
+            screenPos: pos,
+        })) {
+            event.preventDefault();
+            return true;
+        }
+        return false;
+    }
     getPointerList() {
         const nowTime = performance.now();
         const res = [];
@@ -625,14 +629,18 @@ export class Editor {
         const event = keyPressEventFromHTMLEvent(htmlEvent);
         if (this.toolController.dispatchInputEvent(event)) {
             htmlEvent.preventDefault();
+            return true;
         }
         else if (event.key === 't' || event.key === 'T') {
             htmlEvent.preventDefault();
             this.display.rerenderAsText();
+            return true;
         }
         else if (event.key === 'Escape') {
             this.renderingRegion.blur();
+            return true;
         }
+        return false;
     }
     /** @internal */
     handleHTMLKeyUpEvent(htmlEvent) {
@@ -640,7 +648,9 @@ export class Editor {
         const event = keyUpEventFromHTMLEvent(htmlEvent);
         if (this.toolController.dispatchInputEvent(event)) {
             htmlEvent.preventDefault();
+            return true;
         }
+        return false;
     }
     /**
      * Adds event listners for keypresses (and drop events) on `elem` and forwards those
@@ -1160,8 +1170,9 @@ export class Editor {
                 `    ${this.viewport.getScaleFactor()}x zoom, ${180 / Math.PI * this.viewport.getRotationAngle()}° rotation`,
                 `    ${this.image.estimateNumElements()} components`,
                 `    auto-resize: ${this.image.getAutoresizeEnabled() ? 'enabled' : 'disabled'}`,
-                `    ${this.getImportExportRect().w}x${this.getImportExportRect().h} image size`,
-                `    ${screenSize.x}x${screenSize.y} screen size`,
+                `    image size: ${this.getImportExportRect().w}x${this.getImportExportRect().h}`,
+                `    screen size: ${screenSize.x}x${screenSize.y}`,
+                `    device pixel ratio: ${this.display.getDevicePixelRatio()}`,
                 '    cache:',
                 `        ${this.display.getCache().getDebugInfo()
                     // Indent

package/dist/mjs/components/AbstractComponent.d.ts

@@ -114,6 +114,13 @@ export default abstract class AbstractComponent {
     intersectsRect(rect: Rect2): boolean;
     protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
+    /**
+     * Returns a command that, when applied, transforms this by [affineTransfm] and
+     * updates the editor.
+     *
+     * The transformed component is also moved to the top (use
+     * {@link AbstractComponent.setZIndexAndTransformBy} to avoid this behavior).
+     */
     transformBy(affineTransfm: Mat33): SerializableCommand;
     setZIndex(newZIndex: number): SerializableCommand;
     /**

package/dist/mjs/components/AbstractComponent.mjs

@@ -136,11 +136,13 @@ class AbstractComponent {
         const testLines = rect.getEdges();
         return testLines.some(edge => this.intersects(edge));
     }
-    // Returns a command that, when applied, transforms this by [affineTransfm] and
-    // updates the editor.
-    //
-    // The transformed component is also moved to the top (use {@link setZIndexAndTransformBy} to
-    // avoid this behavior).
+    /**
+     * Returns a command that, when applied, transforms this by [affineTransfm] and
+     * updates the editor.
+     *
+     * The transformed component is also moved to the top (use
+     * {@link AbstractComponent.setZIndexAndTransformBy} to avoid this behavior).
+     */
     transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
     }

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

@@ -15,7 +15,6 @@ export declare class StrokeSmoother {
     private onCurveAdded;
     private isFirstSegment;
     private buffer;
-    private centerOfMass;
     private lastPoint;
     private lastExitingVec;
     private currentCurve;

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

@@ -12,7 +12,6 @@ export class StrokeSmoother {
         this.maxFitAllowed = maxFitAllowed;
         this.onCurveAdded = onCurveAdded;
         this.isFirstSegment = true;
-        this.centerOfMass = null;
         this.lastExitingVec = null;
         this.currentCurve = null;
         this.lastPoint = this.startPoint;
@@ -58,7 +57,6 @@ export class StrokeSmoother {
             this.buffer[this.buffer.length - 2], lastPoint,
         ];
         this.currentCurve = null;
-        this.centerOfMass = null;
         this.isFirstSegment = false;
     }
     // Returns [upper curve, connector, lower curve]
@@ -106,20 +104,10 @@ export class StrokeSmoother {
             if (shouldSnapToInitial) {
                 return;
             }
-            if (!this.centerOfMass) {
-                this.centerOfMass = newPoint.pos;
-            }
-            else {
-                this.centerOfMass = this.centerOfMass
-                    .times(this.buffer.length)
-                    .plus(newPoint.pos).times(1 / (this.buffer.length + 1));
-            }
-            const toCenterOfMass = this.centerOfMass.minus(newPoint.pos);
             const deltaTimeSeconds = deltaTime / 1000;
             const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / deltaTimeSeconds);
             // TODO: Do we need momentum smoothing? (this.momentum.lerp(velocity, 0.9);)
-            const k = 1;
-            this.momentum = velocity.plus(toCenterOfMass.times(k));
+            this.momentum = velocity;
         }
         const lastPoint = this.lastPoint ?? newPoint;
         this.lastPoint = newPoint;
@@ -156,7 +144,7 @@ export class StrokeSmoother {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 1.6;
+        const maxRelativeLength = 1.7;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();
@@ -185,9 +173,10 @@ export class StrokeSmoother {
                 .lerp(segmentStart.plus(enteringVec.times(startEndDist)), 0.25);
         }
         // Equal to an endpoint?
-        if (segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
-            // Position the control point between the two end points
-            controlPoint = segmentStart.lerp(segmentEnd, 0.5);
+        else 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 / 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/localizations/es.mjs

@@ -1,5 +1,5 @@
 import  { defaultEditorLocalization }  from '../localization.mjs';
-// A partial Spanish localization, created with /scripts/markdownTranslationFormToTs.ts
+// A partial Spanish localization
 const localization = {
     ...defaultEditorLocalization,
     pen: 'Lapiz',
@@ -7,6 +7,8 @@ const localization = {
     select: 'Selecciona',
     handTool: 'Mover',
     image: 'Imagen',
+    inputAltText: 'Texto alternativo',
+    resetImage: 'Reiniciar',
     chooseFile: 'Seleccionar archivo',
     cancel: 'Cancelar',
     resetView: 'Reiniciar vista',
@@ -28,7 +30,9 @@ const localization = {
     backgroundColor: 'Color de fondo',
     imageWidthOption: 'Ancho',
     imageHeightOption: 'Alto',
+    enableAutoresizeOption: 'Redimensionar automático',
     toggleOverflow: 'Más',
+    about: 'Acerca de',
     touchPanning: 'Mover la pantalla con un dedo',
     roundedTipPen: 'Lapiz Redondeado',
     arrowPen: 'Flecha',
@@ -44,10 +48,11 @@ const localization = {
     colorChangedAnnouncement: (color) => { return `Color fue cambiado a ${color}`; },
     imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`,
     imageLoadError: (message) => `Error cargando imagen: ${message}`,
-    penTool: (penId) => { return `Lapiz ${penId}`; },
+    penTool: (penId) => `Lapiz ${penId}`,
     selectionTool: 'Selecciona',
     eraserTool: 'Borrador',
     touchPanTool: 'Instrumento de mover la pantalla con un dedo',
+    undoRedoTool: 'Deshace/rehace',
     pipetteTool: 'Seleccione un color de la pantalla',
     keyboardPanZoom: 'Mover la pantalla con el teclado',
     textTool: 'Texto',
@@ -55,29 +60,13 @@ const localization = {
     findLabel: 'Buscar',
     toNextMatch: 'Próxima',
     closeDialog: 'Cerrar',
-    focusedFoundText: (matchIdx, totalMatches) => `Viewing match ${matchIdx} of ${totalMatches}`,
     anyDevicePanning: 'Mover la pantalla con todo dispotivo',
     copied: (count, description) => `Copied ${count} ${description}`,
     pasted: (count, description) => `Pasted ${count} ${description}`,
-    toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
-    toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
-    transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
-    resizeOutputCommand: (newSize) => `Resized image to ${newSize.w}x${newSize.h}`,
-    addElementAction: (componentDescription) => `Added ${componentDescription}`,
-    eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
-    duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,
-    unionOf: (actionDescription, actionCount) => `Union: ${actionCount} ${actionDescription}`,
-    inverseOf: (actionDescription) => `Inverse of ${actionDescription}`,
-    rotatedBy: (degrees) => `Rotated by ${Math.abs(degrees)} degrees ${degrees < 0 ? 'clockwise' : 'counter-clockwise'}`,
-    selectedElements: (count) => `Selected ${count} element${count === 1 ? '' : 's'}`,
-    filledBackgroundWithColor: (color) => `Filled background (${color})`,
-    text: (text) => `Text object: ${text}`,
-    imageNode: (label) => `Image: ${label}`,
-    restyledElement: (elementDescription) => `Restyled ${elementDescription}`,
-    pathNodeCount: (count) => `There are ${count} visible path objects.`,
-    textNodeCount: (count) => `There are ${count} visible text nodes.`,
-    imageNodeCount: (nodeCount) => `There are ${nodeCount} visible image nodes.`,
-    textNode: (content) => `Text: ${content}`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} fue activado`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} fue desactivado`,
+    resizeOutputCommand: (newSize) => `Tamaño de imagen fue cambiado a ${newSize.w}x${newSize.h}`,
+    eraseAction: (componentDescription, numElems) => `Borrado: ${numElems} ${componentDescription}`,
     rerenderAsText: 'Redibuja la pantalla al texto',
     loading: (percentage) => `Cargando: ${percentage}%...`,
     imageEditor: 'Editor de dibujos',

package/dist/mjs/rendering/Display.d.ts

@@ -55,6 +55,8 @@ export default class Display {
      * @internal
      */
     setDevicePixelRatio(dpr: number): Promise<void> | undefined;
+    /** @internal */
+    getDevicePixelRatio(): number;
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.

package/dist/mjs/rendering/Display.mjs

@@ -199,6 +199,10 @@ export default class Display {
         }
         return undefined;
     }
+    /** @internal */
+    getDevicePixelRatio() {
+        return this.devicePixelRatio;
+    }
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.

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

@@ -21,12 +21,14 @@ import AbstractToolbar, { SpacerOptions } from './AbstractToolbar';
  * });
  * ```
  *
+ * Returns a subclass of {@link AbstractToolbar}.
+ *
  * @see
  * - {@link makeEdgeToolbar}
  * - {@link AbstractToolbar.addSaveButton}
  * - {@link AbstractToolbar.addExitButton}
  */
-export declare const makeDropdownToolbar: (editor: Editor) => AbstractToolbar;
+export declare const makeDropdownToolbar: (editor: Editor) => DropdownToolbar;
 export default class DropdownToolbar extends AbstractToolbar {
     protected container: HTMLElement;
     private resizeObserver;

package/dist/mjs/toolbar/DropdownToolbar.mjs

@@ -21,6 +21,8 @@ import  { toolbarCSSPrefix }  from './constants.mjs';
  * });
  * ```
  *
+ * Returns a subclass of {@link AbstractToolbar}.
+ *
  * @see
  * - {@link makeEdgeToolbar}
  * - {@link AbstractToolbar.addSaveButton}

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -136,8 +136,10 @@ export default class EdgeToolbar extends AbstractToolbar {
                 this.sidebarContainer.style.animation = `${animationProperties} ${toolbarCSSPrefix}-edgemenu-transition-in`;
                 this.menuContainer.style.animation = `${animationProperties} ${toolbarCSSPrefix}-edgemenu-container-transition-in`;
                 this.menuContainer.style.opacity = '1';
-                // Focus the close button when first shown.
-                this.closeButton.focus();
+                // 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
+                // visible).
+                this.closeButton.focus({ preventScroll: true, });
             }
             else {
                 this.closeColorPickers();
@@ -265,9 +267,8 @@ export default class EdgeToolbar extends AbstractToolbar {
             if (event.target === this.menuContainer) {
                 if (eventName === 'pointerdown') {
                     this.sidebarVisible.set(false);
-                }
-                if (eventName === 'pointerup') {
-                    this.editor.focus();
+                    // A delay seems necessary for the editor
+                    setTimeout(() => this.editor.focus(), 0);
                 }
                 return true;
             }

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

@@ -14,6 +14,7 @@ import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
 import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent }  from '../../inputEvents.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  DropdownLayoutManager  from './layout/DropdownLayoutManager.mjs';
+import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
 /**
  * A set of labels that allow toolbar themes to treat buttons differently.
  */
@@ -60,6 +61,7 @@ class BaseWidget {
         this.button.oncontextmenu = event => {
             event.preventDefault();
         };
+        addLongPressOrHoverCssClasses(this.button);
     }
     /**
      * Should return a constant true or false value. If true (the default),

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

@@ -1,5 +1,6 @@
 import  { MutableReactiveValue }  from '../../../util/ReactiveValue.mjs';
 import  stopPropagationOfScrollingWheelEvents  from '../../../util/stopPropagationOfScrollingWheelEvents.mjs';
+import  addLongPressOrHoverCssClasses  from '../../../util/addLongPressOrHoverCssClasses.mjs';
 import  { toolbarCSSPrefix }  from '../../constants.mjs';
 let idCounter = 0;
 /**
@@ -31,6 +32,9 @@ labelText, defaultId, choices) => {
         const button = document.createElement('input');
         button.type = 'radio';
         button.id = `${toolbarCSSPrefix}-grid-select-button-${idCounter++}`;
+        // Some toolbars only show the label on hover. Having long press or hover
+        // CSS classes are helpful here.
+        addLongPressOrHoverCssClasses(buttonContainer);
         // Clicking any part of labelContainer triggers the radio button.
         const labelContainer = document.createElement('label');
         const rebuildLabel = () => {
@@ -76,6 +80,12 @@ labelText, defaultId, choices) => {
         button.onblur = () => {
             buttonContainer.classList.remove('focus-visible');
         };
+        // Prevent the right-click menu from being shown on long-press
+        // (important for some toolbars that use long-press gestures to
+        // show grid selector labels).
+        buttonContainer.oncontextmenu = event => {
+            event.preventDefault();
+        };
         buttonContainer.replaceChildren(button, labelContainer);
         menuContainer.appendChild(buttonContainer);
         // Set whether the current button is checked