js-draw 1.21.3 → 1.23.1

package/dist/cjs/rendering/renderers/CanvasRenderer.js

@@ -10,31 +10,8 @@ const RenderablePathSpec_1 = require("../RenderablePathSpec");
 /**
  * Renders onto a `CanvasRenderingContext2D`.
  *
- * @example
- * ```ts,runnable
- * import {Editor,CanvasRenderer} from 'js-draw';
- *
- * // Create an editor and load initial data -- don't add to the body (hidden editor).
- * const editor = new Editor(document.createElement('div'));
- * await editor.loadFromSVG('<svg><path d="m0,0 l100,5 l-50,60 l30,20 z" fill="green"/></svg>');
- * ---visible---
- * // Given some editor.
- * // Set up the canvas to be drawn onto.
- * const canvas = document.createElement('canvas');
- * const ctx = canvas.getContext('2d');
- *
- * // Ensure that the canvas can fit the entire rendering
- * const viewport = editor.image.getImportExportViewport();
- * canvas.width = viewport.getScreenRectSize().x;
- * canvas.height = viewport.getScreenRectSize().y;
- *
- * // Render editor.image onto the renderer
- * const renderer = new CanvasRenderer(ctx, viewport);
- * editor.image.render(renderer, viewport);
- *
- * // Add the rendered canvas to the document.
- * document.body.appendChild(canvas);
- * ```
+ * **Example**:
+ * [[include:doc-pages/inline-examples/canvas-renderer.md]]
  */
 class CanvasRenderer extends AbstractRenderer_1.default {
     /**
@@ -136,8 +113,8 @@ class CanvasRenderer extends AbstractRenderer_1.default {
         // Approximate the curve if small enough.
         const delta1 = p2.minus(p1);
         const delta2 = p3.minus(p2);
-        if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist
-            && delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
+        if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist &&
+            delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
             this.ctx.lineTo(p3.x, p3.y);
         }
         else {
@@ -230,7 +207,8 @@ class CanvasRenderer extends AbstractRenderer_1.default {
             }
         }
         // If exiting an object with a too-small-to-draw bounding box,
-        if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
+        if (this.ignoreObjectsAboveLevel !== null &&
+            this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
             this.ignoreObjectsAboveLevel = null;
             this.ignoringObject = false;
         }

package/dist/cjs/rendering/renderers/DummyRenderer.js

@@ -104,7 +104,7 @@ class DummyRenderer extends AbstractRenderer_1.default {
         this.renderedPathCount += other.renderedPathCount;
         this.lastFillStyle = other.lastFillStyle;
         this.lastPoint = other.lastPoint;
-        this.pointBuffer.push(...other.pointBuffer.map(point => {
+        this.pointBuffer.push(...other.pointBuffer.map((point) => {
             return transform.transformVec2(point);
         }));
     }

package/dist/cjs/rendering/renderers/SVGRenderer.js

@@ -49,7 +49,7 @@ class SVGRenderer extends AbstractRenderer_1.default {
         if (!this.elem.querySelector(`#${exports.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;
@@ -58,7 +58,7 @@ class SVGRenderer extends AbstractRenderer_1.default {
 				text {
 					white-space: pre;
 				}
-			`.replace(/\s+/g, '');
+			`.replace(/\s+/g, '')));
             styleSheet.setAttribute('id', exports.renderedStylesheetId);
             this.elem.appendChild(styleSheet);
         }
@@ -126,7 +126,9 @@ class SVGRenderer extends AbstractRenderer_1.default {
         const style = pathSpec.style;
         const path = (0, RenderablePathSpec_1.pathFromRenderable)(pathSpec).transformedBy(this.getCanvasToScreenTransform());
         // Try to extend the previous path, if possible
-        if (this.lastPathString.length === 0 || !this.lastPathStyle || !(0, RenderingStyle_1.stylesEqual)(this.lastPathStyle, style)) {
+        if (this.lastPathString.length === 0 ||
+            !this.lastPathStyle ||
+            !(0, RenderingStyle_1.stylesEqual)(this.lastPathStyle, style)) {
             this.addPathToSVG();
             this.lastPathStyle = style;
             this.lastPathString = [];
@@ -136,7 +138,9 @@ class SVGRenderer extends AbstractRenderer_1.default {
     // 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(math_1.Mat33.identity)) {
             const matrixString = transform.toCSSMatrix();
             elem.style.transform = matrixString;
@@ -261,15 +265,15 @@ class SVGRenderer extends AbstractRenderer_1.default {
                     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.
-                && (0, listPrefixMatch_1.default)(this.lastContainerIDList, containerIDList)
+                (0, listPrefixMatch_1.default)(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}`);
@@ -278,7 +282,8 @@ class SVGRenderer extends AbstractRenderer_1.default {
                     // 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();
@@ -312,15 +317,29 @@ class SVGRenderer extends AbstractRenderer_1.default {
         }
     }
     // 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}`);
@@ -334,7 +353,8 @@ class SVGRenderer extends AbstractRenderer_1.default {
             return;
         }
         // Don't add multiple copies of the default stylesheet.
-        if (elem.tagName.toLowerCase() === 'style' && elem.getAttribute('id') === exports.renderedStylesheetId) {
+        if (elem.tagName.toLowerCase() === 'style' &&
+            elem.getAttribute('id') === exports.renderedStylesheetId) {
             return;
         }
         const elemToDraw = elem.cloneNode(true);
@@ -369,9 +389,7 @@ class SVGRenderer extends AbstractRenderer_1.default {
         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();
@@ -383,7 +401,7 @@ class SVGRenderer extends AbstractRenderer_1.default {
             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 => (0, math_1.toRoundedString)(part)).join(' '));
+        result.setAttribute('viewBox', viewBoxComponents.map((part) => (0, math_1.toRoundedString)(part)).join(' '));
         result.setAttribute('width', (0, math_1.toRoundedString)(screenRectSize.x));
         result.setAttribute('height', (0, math_1.toRoundedString)(screenRectSize.y));
         // Ensure the image can be identified as an SVG if downloaded.

package/dist/cjs/rendering/renderers/TextOnlyRenderer.js

@@ -29,36 +29,34 @@ class TextOnlyRenderer extends AbstractRenderer_1.default {
         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) { }
 }
 exports.default = TextOnlyRenderer;

package/dist/cjs/shortcuts/KeyBinding.js

@@ -1,14 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 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. */
 class KeyBinding {
@@ -51,12 +47,10 @@ 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/cjs/shortcuts/KeyboardShortcutManager.js

@@ -82,8 +82,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_1.default.fromString(shortcut);
             }
             return shortcut;

package/dist/cjs/testing/createEditor.js

@@ -5,10 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Display_1 = require("../rendering/Display");
 const Editor_1 = __importDefault(require("../Editor"));
+const getLocalizationTable_1 = __importDefault(require("../localizations/getLocalizationTable"));
 /** Creates an editor. Should only be used in test files. */
 exports.default = (settings) => {
     if (jest === undefined) {
         throw new Error('Files in the testing/ folder should only be used in tests!');
     }
-    return new Editor_1.default(document.body, { renderingMode: Display_1.RenderingMode.DummyRenderer, ...settings });
+    return new Editor_1.default(document.body, {
+        renderingMode: Display_1.RenderingMode.DummyRenderer,
+        localization: (0, getLocalizationTable_1.default)(['en']),
+        ...settings,
+    });
 };

package/dist/cjs/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/cjs/testing/findNodeWithText.js

@@ -1,12 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 /** 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/cjs/testing/getUniquePointerId.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /** 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/cjs/testing/sendHtmlSwipe.js

@@ -2,13 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 /** 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 }));
 };
 exports.default = sendHtmlSwipe;

package/dist/cjs/testing/sendPenEvent.js

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

package/dist/cjs/testing/sendTouchEvent.js

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

package/dist/cjs/testing/startPinchGesture.js

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

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

@@ -138,7 +138,7 @@ class AbstractToolbar {
                 initColoris();
             }
         };
-        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.notifier.on(types_1.EditorEventType.ColorPickerToggled, event => {
+        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.notifier.on(types_1.EditorEventType.ColorPickerToggled, (event) => {
             if (event.kind !== types_1.EditorEventType.ColorPickerToggled) {
                 return;
             }
@@ -149,7 +149,7 @@ class AbstractToolbar {
             }
         }));
         // Add newly-selected colors to the swatch.
-        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.notifier.on(types_1.EditorEventType.ColorPickerColorSelected, event => {
+        __classPrivateFieldGet(this, _AbstractToolbar_listeners, "f").push(this.editor.notifier.on(types_1.EditorEventType.ColorPickerColorSelected, (event) => {
             if (event.kind === types_1.EditorEventType.ColorPickerColorSelected) {
                 addColorToSwatch(event.color.toHexString());
             }
@@ -193,7 +193,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() {
@@ -269,6 +269,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);
@@ -336,19 +355,15 @@ class AbstractToolbar {
      */
     addUndoRedoButtons(undoFirst = true) {
         const makeUndo = () => {
-            return this.addTaggedActionButton([
-                BaseWidget_1.ToolbarWidgetTag.Undo,
-            ], {
+            return this.addTaggedActionButton([BaseWidget_1.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([
-                BaseWidget_1.ToolbarWidgetTag.Redo,
-            ], {
+            return this.addTaggedActionButton([BaseWidget_1.ToolbarWidgetTag.Redo], {
                 label: this.localizationTable.redo,
                 icon: this.editor.icons.makeRedoIcon(),
             }, () => {
@@ -367,7 +382,7 @@ class AbstractToolbar {
         }
         undoButton.setDisabled(true);
         redoButton.setDisabled(true);
-        this.editor.notifier.on(types_1.EditorEventType.UndoRedoStackUpdated, event => {
+        this.editor.notifier.on(types_1.EditorEventType.UndoRedoStackUpdated, (event) => {
             if (event.kind !== types_1.EditorEventType.UndoRedoStackUpdated) {
                 throw new Error('Wrong event type!');
             }

package/dist/cjs/toolbar/EdgeToolbar.js

@@ -79,7 +79,7 @@ class EdgeToolbar extends AbstractToolbar_1.default {
         this.sidebarContainer.classList.add(`${constants_1.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)`;
@@ -96,12 +96,12 @@ class EdgeToolbar extends AbstractToolbar_1.default {
         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();
@@ -115,7 +115,7 @@ class EdgeToolbar extends AbstractToolbar_1.default {
         };
         this.sidebarTitle = ReactiveValue_1.MutableReactiveValue.fromInitialValue('');
         this.layoutManager = new EdgeToolbarLayoutManager_1.default(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.
@@ -134,7 +134,7 @@ class EdgeToolbar extends AbstractToolbar_1.default {
             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' : '';
@@ -145,23 +145,19 @@ class EdgeToolbar extends AbstractToolbar_1.default {
                     animationTimeout = null;
                 }
                 this.menuContainer.style.display = '';
-                this.sidebarContainer.style.animation =
-                    `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-transition-in${reduceMotion}`;
-                this.menuContainer.style.animation =
-                    `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-container-transition-in${reduceMotion}`;
+                this.sidebarContainer.style.animation = `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-transition-in${reduceMotion}`;
+                this.menuContainer.style.animation = `${animationProperties} ${constants_1.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} ${constants_1.toolbarCSSPrefix}-edgemenu-transition-out${reduceMotion}`;
-                    this.menuContainer.style.animation =
-                        `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-container-transition-out${reduceMotion}`;
+                    this.sidebarContainer.style.animation = `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-transition-out${reduceMotion}`;
+                    this.menuContainer.style.animation = `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-container-transition-out${reduceMotion}`;
                     // Manually set the container's opacity to prevent flickering when closing
                     // the toolbar.
                     this.menuContainer.style.opacity = '0';
@@ -204,7 +200,7 @@ class EdgeToolbar extends AbstractToolbar_1.default {
                     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/cjs/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;
     };
     /**