js-draw 1.21.3 → 1.23.1

package/dist/mjs/rendering/renderers/SVGRenderer.mjs

@@ -1,5 +1,5 @@
 import { Mat33, Vec2, toRoundedString } from '@js-draw/math';
-import  { svgAttributesDataKey, svgLoaderAttributeContainerID, svgStyleAttributesDataKey }  from '../../SVGLoader/SVGLoader.mjs';
+import  { svgAttributesDataKey, svgLoaderAttributeContainerID, svgStyleAttributesDataKey, }  from '../../SVGLoader/SVGLoader.mjs';
 import  { stylesEqual }  from '../RenderingStyle.mjs';
 import  AbstractRenderer  from './AbstractRenderer.mjs';
 import  { pathFromRenderable }  from '../RenderablePathSpec.mjs';
@@ -43,7 +43,7 @@ export default class SVGRenderer extends AbstractRenderer {
         if (!this.elem.querySelector(`#${renderedStylesheetId}`)) {
             // Default to rounded strokes.
             const styleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-            styleSheet.innerHTML = `
+            styleSheet.appendChild(document.createTextNode(`
 				path {
 					stroke-linecap: round;
 					stroke-linejoin: round;
@@ -52,7 +52,7 @@ export default class SVGRenderer extends AbstractRenderer {
 				text {
 					white-space: pre;
 				}
-			`.replace(/\s+/g, '');
+			`.replace(/\s+/g, '')));
             styleSheet.setAttribute('id', renderedStylesheetId);
             this.elem.appendChild(styleSheet);
         }
@@ -120,7 +120,9 @@ export default class SVGRenderer extends AbstractRenderer {
         const style = pathSpec.style;
         const path = pathFromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
         // Try to extend the previous path, if possible
-        if (this.lastPathString.length === 0 || !this.lastPathStyle || !stylesEqual(this.lastPathStyle, style)) {
+        if (this.lastPathString.length === 0 ||
+            !this.lastPathStyle ||
+            !stylesEqual(this.lastPathStyle, style)) {
             this.addPathToSVG();
             this.lastPathStyle = style;
             this.lastPathString = [];
@@ -130,7 +132,9 @@ export default class SVGRenderer extends AbstractRenderer {
     // Apply [elemTransform] to [elem]. Uses both a `matrix` and `.x`, `.y` properties if `setXY` is true.
     // Otherwise, just uses a `matrix`.
     transformFrom(elemTransform, elem, inCanvasSpace = false) {
-        const transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
+        const transform = !inCanvasSpace
+            ? this.getCanvasToScreenTransform().rightMul(elemTransform)
+            : elemTransform;
         if (!transform.eq(Mat33.identity)) {
             const matrixString = transform.toCSSMatrix();
             elem.style.transform = matrixString;
@@ -255,15 +259,15 @@ export default class SVGRenderer extends AbstractRenderer {
                     containerIDList = containerIDData[0];
                 }
             }
-            if (containerIDList.length > 0
+            if (containerIDList.length > 0 &&
                 // containerIDList must share a prefix with the last ID list
                 // otherwise, the z order of elements may have been changed from
                 // the original image.
                 // In the case that the z order has been changed, keep the current
                 // element as a child of the root to preserve z order.
-                && listPrefixMatch(this.lastContainerIDList, containerIDList)
+                listPrefixMatch(this.lastContainerIDList, containerIDList) &&
                 // The component can add at most one more parent than the previous item.
-                && this.lastContainerIDList.length >= containerIDList.length - 1) {
+                this.lastContainerIDList.length >= containerIDList.length - 1) {
                 // Select the last
                 const containerID = containerIDList[containerIDList.length - 1];
                 const containerCandidates = this.elem.querySelectorAll(`g#${containerID}`);
@@ -272,7 +276,8 @@ export default class SVGRenderer extends AbstractRenderer {
                     // If this is the first time we're entering the group, the
                     // group should be empty.
                     // Otherwise, this may be a case that would break z-ordering.
-                    if (container.children.length === 0 || this.lastContainerIDList.length >= containerIDList.length) {
+                    if (container.children.length === 0 ||
+                        this.lastContainerIDList.length >= containerIDList.length) {
                         // Move all objectElems to the found container
                         for (const elem of this.objectElems) {
                             elem.remove();
@@ -306,15 +311,29 @@ export default class SVGRenderer extends AbstractRenderer {
         }
     }
     // Not implemented -- use drawPath instead.
-    unimplementedMessage() { throw new Error('Not implemenented!'); }
-    beginPath(_startPoint) { this.unimplementedMessage(); }
-    endPath(_style) { this.unimplementedMessage(); }
-    lineTo(_point) { this.unimplementedMessage(); }
-    moveTo(_point) { this.unimplementedMessage(); }
-    traceCubicBezierCurve(_controlPoint1, _controlPoint2, _endPoint) { this.unimplementedMessage(); }
-    traceQuadraticBezierCurve(_controlPoint, _endPoint) { this.unimplementedMessage(); }
+    unimplementedMessage() {
+        throw new Error('Not implemenented!');
+    }
+    beginPath(_startPoint) {
+        this.unimplementedMessage();
+    }
+    endPath(_style) {
+        this.unimplementedMessage();
+    }
+    lineTo(_point) {
+        this.unimplementedMessage();
+    }
+    moveTo(_point) {
+        this.unimplementedMessage();
+    }
+    traceCubicBezierCurve(_controlPoint1, _controlPoint2, _endPoint) {
+        this.unimplementedMessage();
+    }
+    traceQuadraticBezierCurve(_controlPoint, _endPoint) {
+        this.unimplementedMessage();
+    }
     drawPoints(...points) {
-        points.map(point => {
+        points.map((point) => {
             const elem = document.createElementNS(svgNameSpace, 'circle');
             elem.setAttribute('cx', `${point.x}`);
             elem.setAttribute('cy', `${point.y}`);
@@ -328,7 +347,8 @@ export default class SVGRenderer extends AbstractRenderer {
             return;
         }
         // Don't add multiple copies of the default stylesheet.
-        if (elem.tagName.toLowerCase() === 'style' && elem.getAttribute('id') === renderedStylesheetId) {
+        if (elem.tagName.toLowerCase() === 'style' &&
+            elem.getAttribute('id') === renderedStylesheetId) {
             return;
         }
         const elemToDraw = elem.cloneNode(true);
@@ -363,9 +383,7 @@ export default class SVGRenderer extends AbstractRenderer {
         let viewBoxComponents;
         if (useViewBoxForPositioning) {
             const exportRect = viewport.visibleRect;
-            viewBoxComponents = [
-                exportRect.x, exportRect.y, exportRect.w, exportRect.h,
-            ];
+            viewBoxComponents = [exportRect.x, exportRect.y, exportRect.w, exportRect.h];
             // Replace the viewport with a copy that has a modified transform.
             // (Avoids modifying the original viewport).
             viewport = viewport.getTemporaryClone();
@@ -377,7 +395,7 @@ export default class SVGRenderer extends AbstractRenderer {
             viewBoxComponents = [0, 0, screenRectSize.x, screenRectSize.y];
         }
         // rect.x -> size of rect in x direction, rect.y -> size of rect in y direction.
-        result.setAttribute('viewBox', viewBoxComponents.map(part => toRoundedString(part)).join(' '));
+        result.setAttribute('viewBox', viewBoxComponents.map((part) => toRoundedString(part)).join(' '));
         result.setAttribute('width', toRoundedString(screenRectSize.x));
         result.setAttribute('height', toRoundedString(screenRectSize.y));
         // Ensure the image can be identified as an SVG if downloaded.

package/dist/mjs/rendering/renderers/TextOnlyRenderer.mjs

@@ -24,35 +24,33 @@ export default class TextOnlyRenderer extends AbstractRenderer {
         return [
             this.localizationTable.pathNodeCount(this.pathCount),
             ...(this.textNodeCount > 0 ? [this.localizationTable.textNodeCount(this.textNodeCount)] : []),
-            ...(this.imageNodeCount > 0 ? [this.localizationTable.imageNodeCount(this.imageNodeCount)] : []),
-            ...this.descriptionBuilder
+            ...(this.imageNodeCount > 0
+                ? [this.localizationTable.imageNodeCount(this.imageNodeCount)]
+                : []),
+            ...this.descriptionBuilder,
         ].join('\n');
     }
-    beginPath(_startPoint) {
-    }
+    beginPath(_startPoint) { }
     endPath(_style) {
         this.pathCount++;
     }
-    lineTo(_point) {
-    }
-    moveTo(_point) {
-    }
-    traceCubicBezierCurve(_p1, _p2, _p3) {
-    }
-    traceQuadraticBezierCurve(_controlPoint, _endPoint) {
-    }
+    lineTo(_point) { }
+    moveTo(_point) { }
+    traceCubicBezierCurve(_p1, _p2, _p3) { }
+    traceQuadraticBezierCurve(_controlPoint, _endPoint) { }
     drawText(text, _transform, _style) {
         this.descriptionBuilder.push(this.localizationTable.textNode(text));
         this.textNodeCount++;
     }
     drawImage(image) {
-        const label = image.label ? this.localizationTable.imageNode(image.label) : this.localizationTable.unlabeledImageNode;
+        const label = image.label
+            ? this.localizationTable.imageNode(image.label)
+            : this.localizationTable.unlabeledImageNode;
         this.descriptionBuilder.push(label);
         this.imageNodeCount++;
     }
     isTooSmallToRender(rect) {
         return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
     }
-    drawPoints(..._points) {
-    }
+    drawPoints(..._points) { }
 }

package/dist/mjs/shortcuts/KeyBinding.mjs

@@ -1,12 +1,8 @@
 const isUppercaseLetter = (text) => {
-    return text.toUpperCase() === text
-        && text.toLowerCase() !== text
-        && text.length === 1;
+    return text.toUpperCase() === text && text.toLowerCase() !== text && text.length === 1;
 };
 const isLowercaseLetter = (text) => {
-    return text.toLowerCase() === text
-        && text.toUpperCase() !== text
-        && text.length === 1;
+    return text.toLowerCase() === text && text.toUpperCase() !== text && text.length === 1;
 };
 /** Represents a key combination that can trigger a keyboard shortcut. */
 export default class KeyBinding {
@@ -49,12 +45,10 @@ export default class KeyBinding {
         const shortcutControlOrMeta = this.controlOrMeta;
         // Match ctrl/meta if the shortcut doesn't have controlOrMeta specified
         // (controlOrMeta should match either).
-        const ctrlAndMetaMatches = ctrlKey === this.ctrlKey
-            && metaKey === this.metaKey
-            && !shortcutControlOrMeta;
-        const matches = (ctrlAndMetaMatches || (shortcutControlOrMeta && keyEventHasCtrlOrMeta))
-            && altKey === this.altKey
-            && (shiftKey === this.shiftKey || this.shiftKey === undefined);
+        const ctrlAndMetaMatches = ctrlKey === this.ctrlKey && metaKey === this.metaKey && !shortcutControlOrMeta;
+        const matches = (ctrlAndMetaMatches || (shortcutControlOrMeta && keyEventHasCtrlOrMeta)) &&
+            altKey === this.altKey &&
+            (shiftKey === this.shiftKey || this.shiftKey === undefined);
         return matches;
     }
     /**

package/dist/mjs/shortcuts/KeyboardShortcutManager.mjs

@@ -77,8 +77,8 @@ class KeyboardShortcutManager {
             return false;
         }
         // Convert the strings to shortcut maps.
-        const shortcutsAsShortcuts = shortcuts.map(shortcut => {
-            if (typeof (shortcut) === 'string') {
+        const shortcutsAsShortcuts = shortcuts.map((shortcut) => {
+            if (typeof shortcut === 'string') {
                 return KeyBinding.fromString(shortcut);
             }
             return shortcut;

package/dist/mjs/testing/createEditor.mjs

@@ -1,9 +1,14 @@
 import  { RenderingMode }  from '../rendering/Display.mjs';
 import  Editor  from '../Editor.mjs';
+import  getLocalizationTable  from '../localizations/getLocalizationTable.mjs';
 /** Creates an editor. Should only be used in test files. */
 export default (settings) => {
     if (jest === undefined) {
         throw new Error('Files in the testing/ folder should only be used in tests!');
     }
-    return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer, ...settings });
+    return new Editor(document.body, {
+        renderingMode: RenderingMode.DummyRenderer,
+        localization: getLocalizationTable(['en']),
+        ...settings,
+    });
 };

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

@@ -1,3 +1,6 @@
+interface Options {
+    tag?: string;
+}
 /** Returns the first node or element with `textContent` matching `expectedText`. */
-declare const findNodeWithText: (expectedText: string, parent: Node) => Node | null;
+declare const findNodeWithText: (expectedText: string, parent: Node, options?: Options) => Node | null;
 export default findNodeWithText;

package/dist/mjs/testing/findNodeWithText.mjs

@@ -1,10 +1,19 @@
 /** Returns the first node or element with `textContent` matching `expectedText`. */
-const findNodeWithText = (expectedText, parent) => {
+const findNodeWithText = (expectedText, parent, options = {}) => {
+    const { tag } = options;
     if (parent.textContent === expectedText) {
-        return parent;
+        const matchesTag = (() => {
+            // No tag check necessary?
+            if (!tag)
+                return true;
+            return parent instanceof Element && tag.toUpperCase() === parent.tagName;
+        })();
+        if (matchesTag) {
+            return parent;
+        }
     }
     for (const child of parent.childNodes) {
-        const results = findNodeWithText(expectedText, child);
+        const results = findNodeWithText(expectedText, child, options);
         if (results) {
             return results;
         }

package/dist/mjs/testing/getUniquePointerId.mjs

@@ -1,7 +1,7 @@
 /** Returns the smallest ID not used by the pointers in the given list. */
 const getUniquePointerId = (pointers) => {
     let ptrId = 0;
-    const pointerIds = pointers.map(ptr => ptr.id);
+    const pointerIds = pointers.map((ptr) => ptr.id);
     pointerIds.sort();
     for (const pointerId of pointerIds) {
         if (ptrId === pointerId) {

package/dist/mjs/testing/sendHtmlSwipe.mjs

@@ -1,12 +1,16 @@
 /** 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, }));
+    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('pointermove', {
+            isPrimary: true,
+            clientX: currentPoint.x,
+            clientY: currentPoint.y,
+        }));
     }
-    element.dispatchEvent(new PointerEvent('pointerup', { isPrimary: true, clientX: end.x, clientY: end.y, }));
+    element.dispatchEvent(new PointerEvent('pointerup', { isPrimary: true, clientX: end.x, clientY: end.y }));
 };
 export default sendHtmlSwipe;

package/dist/mjs/testing/sendPenEvent.mjs

@@ -12,9 +12,7 @@ const sendPenEvent = (editor, eventType, point, allPointers, deviceType = Pointe
     const mainPointer = Pointer.ofCanvasPoint(point, eventType !== InputEvtType.PointerUpEvt, editor.viewport, id, deviceType);
     editor.toolController.dispatchInputEvent({
         kind: eventType,
-        allPointers: allPointers ?? [
-            mainPointer,
-        ],
+        allPointers: allPointers ?? [mainPointer],
         current: mainPointer,
     });
     return mainPointer;

package/dist/mjs/testing/sendTouchEvent.mjs

@@ -45,10 +45,7 @@ const sendTouchEvent = (editor, eventType, screenPos, allOtherPointers) => {
     const mainPointer = Pointer.ofCanvasPoint(canvasPos, eventType !== InputEvtType.PointerUpEvt, editor.viewport, ptrId, PointerDevice.Touch);
     editor.toolController.dispatchInputEvent({
         kind: eventType,
-        allPointers: [
-            ...(allOtherPointers ?? []),
-            mainPointer,
-        ],
+        allPointers: [...(allOtherPointers ?? []), mainPointer],
         current: mainPointer,
     });
     return mainPointer;

package/dist/mjs/testing/startPinchGesture.mjs

@@ -17,7 +17,9 @@ const startPinchGesture = (editor, center, initialDistance, initialRotation) =>
     };
     let [touchPoint1, touchPoint2] = computeTouchPoints(center, initialDistance, initialRotation);
     let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, touchPoint1);
-    let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, touchPoint2, [firstPointer]);
+    let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, touchPoint2, [
+        firstPointer,
+    ]);
     return {
         update(center, distance, rotation) {
             const eventType = InputEvtType.PointerMoveEvt;

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

@@ -110,6 +110,25 @@ export default abstract class AbstractToolbar {
      * as being the value of `mustBeToplevel`.
      *
      * @return The added button.
+     *
+     * **Example**:
+     * ```ts,runnable
+     * import { Editor } from 'js-draw';
+     * const editor = new Editor(document.body);
+     * const toolbar = editor.addToolbar();
+     *
+     * function makeTrashIcon() {
+     *   const container = document.createElement('div');
+     *   container.textContent = '🗑️';
+     *   return container;
+     * }
+     *
+     * toolbar.addActionButton({
+     *   icon: makeTrashIcon(), // can be any Element not in the DOM
+     *   label: 'Delete all',
+     * }, () => {
+     *   alert('to-do!');
+     * });
      */
     addActionButton(title: string | ActionButtonIcon, command: () => void, options?: ToolbarActionButtonOptions | boolean): BaseWidget;
     /**

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -133,7 +133,7 @@ class AbstractToolbar {
                 initColoris();
             }
         };
-        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
+        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.notifier.on(EditorEventType.ColorPickerToggled, (event) => {
             if (event.kind !== EditorEventType.ColorPickerToggled) {
                 return;
             }
@@ -144,7 +144,7 @@ class AbstractToolbar {
             }
         }));
         // Add newly-selected colors to the swatch.
-        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
+        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, (event) => {
             if (event.kind === EditorEventType.ColorPickerColorSelected) {
                 addColorToSwatch(event.color.toHexString());
             }
@@ -188,7 +188,7 @@ class AbstractToolbar {
         const id = widget.getUniqueIdIn(__classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f"));
         this.removeWidgetInternal(widget);
         delete __classPrivateFieldGet(this, _AbstractToolbar_widgetsById, "f")[id];
-        __classPrivateFieldSet(this, _AbstractToolbar_widgetList, __classPrivateFieldGet(this, _AbstractToolbar_widgetList, "f").filter(otherWidget => otherWidget !== widget), "f");
+        __classPrivateFieldSet(this, _AbstractToolbar_widgetList, __classPrivateFieldGet(this, _AbstractToolbar_widgetList, "f").filter((otherWidget) => otherWidget !== widget), "f");
     }
     /** Returns a snapshot of the state of widgets in the toolbar. */
     serializeState() {
@@ -264,6 +264,25 @@ class AbstractToolbar {
      * as being the value of `mustBeToplevel`.
      *
      * @return The added button.
+     *
+     * **Example**:
+     * ```ts,runnable
+     * import { Editor } from 'js-draw';
+     * const editor = new Editor(document.body);
+     * const toolbar = editor.addToolbar();
+     *
+     * function makeTrashIcon() {
+     *   const container = document.createElement('div');
+     *   container.textContent = '🗑️';
+     *   return container;
+     * }
+     *
+     * toolbar.addActionButton({
+     *   icon: makeTrashIcon(), // can be any Element not in the DOM
+     *   label: 'Delete all',
+     * }, () => {
+     *   alert('to-do!');
+     * });
      */
     addActionButton(title, command, options = true) {
         const widget = this.makeActionButton(title, command, options);
@@ -331,19 +350,15 @@ class AbstractToolbar {
      */
     addUndoRedoButtons(undoFirst = true) {
         const makeUndo = () => {
-            return this.addTaggedActionButton([
-                ToolbarWidgetTag.Undo,
-            ], {
+            return this.addTaggedActionButton([ToolbarWidgetTag.Undo], {
                 label: this.localizationTable.undo,
-                icon: this.editor.icons.makeUndoIcon()
+                icon: this.editor.icons.makeUndoIcon(),
             }, () => {
                 this.editor.history.undo();
             });
         };
         const makeRedo = () => {
-            return this.addTaggedActionButton([
-                ToolbarWidgetTag.Redo,
-            ], {
+            return this.addTaggedActionButton([ToolbarWidgetTag.Redo], {
                 label: this.localizationTable.redo,
                 icon: this.editor.icons.makeRedoIcon(),
             }, () => {
@@ -362,7 +377,7 @@ class AbstractToolbar {
         }
         undoButton.setDisabled(true);
         redoButton.setDisabled(true);
-        this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, event => {
+        this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, (event) => {
             if (event.kind !== EditorEventType.UndoRedoStackUpdated) {
                 throw new Error('Wrong event type!');
             }

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -72,7 +72,7 @@ export default class EdgeToolbar extends AbstractToolbar {
         this.sidebarContainer.classList.add(`${toolbarCSSPrefix}tool-properties`);
         this.sidebarContent = document.createElement('div');
         // Setup resizing/dragging
-        this.sidebarY.onUpdateAndNow(y => {
+        this.sidebarY.onUpdateAndNow((y) => {
             const belowEdgeClassName = 'dropdown-below-edge';
             if (y > 0) {
                 this.sidebarContainer.style.transform = `translate(0, ${y}px)`;
@@ -89,12 +89,12 @@ export default class EdgeToolbar extends AbstractToolbar {
         this.closeButton.classList.add('drag-elem');
         // The close button has default focus -- forward its events to the main editor so that keyboard
         // shortcuts still work.
-        this.editor.handleKeyEventsFrom(this.closeButton, event => {
+        this.editor.handleKeyEventsFrom(this.closeButton, (event) => {
             // Don't send
             return event.code !== 'Space' && event.code !== 'Enter' && event.code !== 'Tab';
         });
         // Close the sidebar when pressing escape
-        this.sidebarContainer.addEventListener('keyup', event => {
+        this.sidebarContainer.addEventListener('keyup', (event) => {
             if (!event.defaultPrevented && event.code === 'Escape') {
                 this.sidebarVisible.set(false);
                 event.preventDefault();
@@ -108,7 +108,7 @@ export default class EdgeToolbar extends AbstractToolbar {
         };
         this.sidebarTitle = MutableReactiveValue.fromInitialValue('');
         this.layoutManager = new EdgeToolbarLayoutManager(setSidebarContent, this.sidebarTitle, this.sidebarVisible, editor.announceForAccessibility.bind(editor), localizationTable);
-        this.sidebarTitle.onUpdateAndNow(title => {
+        this.sidebarTitle.onUpdateAndNow((title) => {
             this.closeButton.setAttribute('aria-label', localizationTable.closeSidebar(title));
         });
         // Make things visible/keep hidden.
@@ -127,7 +127,7 @@ export default class EdgeToolbar extends AbstractToolbar {
             this.menuContainer.style.opacity = '0';
         }
         const prefersReduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)') ?? '';
-        this.sidebarVisible.onUpdate(visible => {
+        this.sidebarVisible.onUpdate((visible) => {
             const animationProperties = `${animationDuration}ms ease`;
             // We need to use different animations when reducing motion.
             const reduceMotion = prefersReduceMotion.matches ? '-reduce-motion' : '';
@@ -138,23 +138,19 @@ export default class EdgeToolbar extends AbstractToolbar {
                     animationTimeout = null;
                 }
                 this.menuContainer.style.display = '';
-                this.sidebarContainer.style.animation =
-                    `${animationProperties} ${toolbarCSSPrefix}-edgemenu-transition-in${reduceMotion}`;
-                this.menuContainer.style.animation =
-                    `${animationProperties} ${toolbarCSSPrefix}-edgemenu-container-transition-in${reduceMotion}`;
+                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
                 // visible).
-                this.closeButton.focus({ preventScroll: true, });
+                this.closeButton.focus({ preventScroll: true });
             }
             else {
                 this.closeColorPickers();
                 if (animationTimeout === null) {
-                    this.sidebarContainer.style.animation =
-                        `${animationProperties} ${toolbarCSSPrefix}-edgemenu-transition-out${reduceMotion}`;
-                    this.menuContainer.style.animation =
-                        `${animationProperties} ${toolbarCSSPrefix}-edgemenu-container-transition-out${reduceMotion}`;
+                    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';
@@ -197,7 +193,7 @@ export default class EdgeToolbar extends AbstractToolbar {
                     break;
                 }
             }
-            const perButtonPadding = Math.round(extraPadding / numVisibleButtons * 10) / 10;
+            const perButtonPadding = Math.round((extraPadding / numVisibleButtons) * 10) / 10;
             this.toolbarToolRow.style.setProperty('--extra-left-right-padding', `${perButtonPadding}px`);
         };
         const actionRowBBox = this.toolbarActionRow.getBoundingClientRect();

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

@@ -80,9 +80,13 @@ export default class IconProvider {
      * @returns An object with both the definition of a checkerboard pattern and the syntax to
      * reference that pattern. The defs provided by this function should be wrapped within a
      * `<defs></defs>` element.
+     *
+     * **Note**: This function's return value includes both `patternDefElement` (which returns
+     * an Element) and a (deprecated) `patternDef` string. Avoid using the `patternDef` result.
      */
     protected makeCheckerboardPattern(): {
-        patternDef: string;
+        patternDefElement: SVGElement;
+        readonly patternDef: string;
         patternRef: string;
     };
     /**