js-draw 1.30.0 → 1.30.1

package/dist/cjs/Editor.js

@@ -65,7 +65,7 @@ const makeAboutDialog_1 = __importDefault(require("./dialogs/makeAboutDialog"));
 const version_1 = __importDefault(require("./version"));
 const editorImageToSVG_1 = require("./image/export/editorImageToSVG");
 const ReactiveValue_1 = __importStar(require("./util/ReactiveValue"));
-const listenForKeyboardEventsFrom_1 = __importDefault(require("./util/listenForKeyboardEventsFrom"));
+const listenForKeyboardEventsFrom_1 = __importDefault(require("./util/dom/listenForKeyboardEventsFrom"));
 const mitLicenseAttribution_1 = __importDefault(require("./util/mitLicenseAttribution"));
 const ClipboardHandler_1 = __importDefault(require("./util/ClipboardHandler"));
 const ContextMenuRecognizer_1 = __importDefault(require("./tools/InputFilter/ContextMenuRecognizer"));

package/dist/cjs/components/ImageComponent.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const math_1 = require("@js-draw/math");
 const assertions_1 = require("../util/assertions");
 const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
-const waitForImageLoaded_1 = __importDefault(require("../util/waitForImageLoaded"));
+const waitForImageLoaded_1 = __importDefault(require("../util/dom/waitForImageLoaded"));
 /**
  * Represents a raster image.
  *

package/dist/cjs/dialogs/makeMessageDialog.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const createButton_1 = __importDefault(require("../util/dom/createButton"));
 const waitForTimeout_1 = __importDefault(require("../util/waitForTimeout"));
 const makeAboutDialog = (editor, options) => {
     const overlay = document.createElement('div');
@@ -14,9 +15,10 @@ const makeAboutDialog = (editor, options) => {
     const heading = document.createElement('h1');
     heading.textContent = options.title;
     heading.setAttribute('autofocus', 'true');
-    const closeButton = document.createElement('button');
-    closeButton.innerText = editor.localization.closeDialog;
-    closeButton.classList.add('close');
+    const closeButton = (0, createButton_1.default)({
+        text: editor.localization.closeDialog,
+        classList: ['close'],
+    });
     const scrollRegion = document.createElement('div');
     scrollRegion.classList.add('scroll');
     // Allow scrolling in the scrollable container -- don't forward wheel events.

package/dist/cjs/rendering/Display.js

@@ -11,6 +11,7 @@ const math_1 = require("@js-draw/math");
 const RenderingCache_1 = __importDefault(require("./caching/RenderingCache"));
 const TextOnlyRenderer_1 = __importDefault(require("./renderers/TextOnlyRenderer"));
 const AcceleratedInkingCanvasRenderer_1 = __importDefault(require("./renderers/AcceleratedInkingCanvasRenderer"));
+const createButton_1 = __importDefault(require("../util/dom/createButton"));
 var RenderingMode;
 (function (RenderingMode) {
     RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
@@ -183,9 +184,10 @@ class Display {
     initializeTextRendering() {
         const textRendererOutputContainer = document.createElement('div');
         textRendererOutputContainer.classList.add('textRendererOutputContainer');
-        const rerenderButton = document.createElement('button');
-        rerenderButton.classList.add('rerenderButton');
-        rerenderButton.innerText = this.editor.localization.rerenderAsText;
+        const rerenderButton = (0, createButton_1.default)({
+            classList: ['rerenderButton'],
+            text: this.editor.localization.rerenderAsText,
+        });
         this.textRerenderOutput = document.createElement('div');
         this.textRerenderOutput.setAttribute('aria-live', 'polite');
         rerenderButton.onclick = () => {

package/dist/cjs/toolbar/EdgeToolbar.js

@@ -9,8 +9,9 @@ const constants_1 = require("./constants");
 const EdgeToolbarLayoutManager_1 = __importDefault(require("./widgets/layout/EdgeToolbarLayoutManager"));
 const ReactiveValue_1 = require("../util/ReactiveValue");
 const AbstractToolbar_1 = __importDefault(require("./AbstractToolbar"));
-const stopPropagationOfScrollingWheelEvents_1 = __importDefault(require("../util/stopPropagationOfScrollingWheelEvents"));
+const stopPropagationOfScrollingWheelEvents_1 = __importDefault(require("../util/dom/stopPropagationOfScrollingWheelEvents"));
 const makeDraggable_1 = __importDefault(require("./utils/makeDraggable"));
+const createButton_1 = __importDefault(require("../util/dom/createButton"));
 /**
  * Creates an `EdgeToolbar`.
  *
@@ -92,7 +93,7 @@ class EdgeToolbar extends AbstractToolbar_1.default {
                 this.menuContainer.classList.remove(belowEdgeClassName);
             }
         });
-        this.closeButton = document.createElement('button');
+        this.closeButton = (0, createButton_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.

package/dist/cjs/toolbar/IconProvider.js

@@ -15,7 +15,7 @@ const Viewport_1 = __importDefault(require("../Viewport"));
 const FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
 const PolylineBuilder_1 = require("../components/builders/PolylineBuilder");
 const Eraser_1 = require("../tools/Eraser");
-const createElement_1 = require("../util/createElement");
+const createElement_1 = require("../util/dom/createElement");
 const types_1 = require("../tools/SelectionTool/types");
 const svgNamespace = 'http://www.w3.org/2000/svg';
 let checkerboardIdCounter = 0;

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

@@ -12,8 +12,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const math_1 = require("@js-draw/math");
 const makeDraggable_1 = __importDefault(require("./makeDraggable"));
 const ReactiveValue_1 = require("../../util/ReactiveValue");
-const cloneElementWithStyles_1 = __importDefault(require("../../util/cloneElementWithStyles"));
-const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../util/addLongPressOrHoverCssClasses"));
+const cloneElementWithStyles_1 = __importDefault(require("../../util/dom/cloneElementWithStyles"));
+const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../util/dom/addLongPressOrHoverCssClasses"));
+const createButton_1 = __importDefault(require("../../util/dom/createButton"));
 /**
  * Creates the main content of the help overlay.
  *
@@ -219,7 +220,7 @@ class HelpDisplay {
             }
         };
         const makeCloseButton = () => {
-            const closeButton = document.createElement('button');
+            const closeButton = (0, createButton_1.default)();
             closeButton.classList.add('close-button');
             closeButton.appendChild(this.context.icons.makeCloseIcon());
             const label = this.context.localization.close;
@@ -278,8 +279,8 @@ class HelpDisplay {
         const makeNavigationButtons = (navigation) => {
             const navigationButtonContainer = document.createElement('div');
             navigationButtonContainer.classList.add('navigation-buttons');
-            const nextButton = document.createElement('button');
-            const previousButton = document.createElement('button');
+            const nextButton = (0, createButton_1.default)();
+            const previousButton = (0, createButton_1.default)();
             nextButton.textContent = this.context.localization.next;
             previousButton.textContent = this.context.localization.previous;
             nextButton.classList.add('next');
@@ -429,7 +430,7 @@ class HelpDisplay {
     createToggleButton() {
         const buttonContainer = document.createElement('div');
         buttonContainer.classList.add('toolbar-help-overlay-button');
-        const helpButton = document.createElement('button');
+        const helpButton = (0, createButton_1.default)();
         helpButton.classList.add('button');
         const icon = this.context.icons.makeHelpIcon();
         icon.classList.add('icon');

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

@@ -20,7 +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"));
+const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../util/dom/addLongPressOrHoverCssClasses"));
 const HelpDisplay_1 = __importDefault(require("../utils/HelpDisplay"));
 const assertions_1 = require("../../util/assertions");
 /**

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

@@ -45,6 +45,7 @@ const types_1 = require("../../types");
 const constants_1 = require("../constants");
 const makeColorInput_1 = __importDefault(require("./components/makeColorInput"));
 const BaseWidget_1 = __importDefault(require("./BaseWidget"));
+const createButton_1 = __importDefault(require("../../util/dom/createButton"));
 class DocumentPropertiesWidget extends BaseWidget_1.default {
     constructor(editor, localizationTable) {
         super(editor, 'document-properties-widget', localizationTable);
@@ -254,9 +255,10 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
             this.editor.dispatch(image.setAutoresizeEnabled(checked));
         });
         // The "About..." button
-        const aboutButton = document.createElement('button');
-        aboutButton.classList.add('about-button');
-        aboutButton.innerText = this.localizationTable.about;
+        const aboutButton = (0, createButton_1.default)({
+            classList: ['about-button'],
+            text: this.localizationTable.about,
+        });
         aboutButton.onclick = () => {
             this.editor.showAboutDialog();
         };

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

@@ -44,11 +44,12 @@ const constants_1 = require("../constants");
 const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
 const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 const makeSeparator_1 = __importDefault(require("./components/makeSeparator"));
+const createButton_1 = __importDefault(require("../../util/dom/createButton"));
 const makeZoomControl = (localizationTable, editor, helpDisplay) => {
     const zoomLevelRow = document.createElement('div');
-    const increaseButton = document.createElement('button');
-    const decreaseButton = document.createElement('button');
-    const resetViewButton = document.createElement('button');
+    const increaseButton = (0, createButton_1.default)();
+    const decreaseButton = (0, createButton_1.default)();
+    const resetViewButton = (0, createButton_1.default)();
     const zoomLevelDisplay = document.createElement('span');
     increaseButton.innerText = '+';
     decreaseButton.innerText = '-';

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

@@ -18,6 +18,7 @@ const bytesToSizeString_1 = __importDefault(require("../../../util/bytesToSizeSt
 const ImageWrapper_1 = require("./ImageWrapper");
 const makeSnappedList_1 = __importDefault(require("../components/makeSnappedList"));
 const fileToImages_1 = __importDefault(require("./fileToImages"));
+const createButton_1 = __importDefault(require("../../../util/dom/createButton"));
 /**
  * Provides a widget that allows inserting or modifying raster images.
  *
@@ -83,7 +84,7 @@ class InsertImageWidget extends BaseWidget_1.default {
         const actionButtonRow = document.createElement('div');
         actionButtonRow.classList.add('action-button-row');
         this.statusView.classList.add('insert-image-image-status-view');
-        this.submitButton = document.createElement('button');
+        this.submitButton = (0, createButton_1.default)();
         this.selectedFiles = selectedFiles;
         this.imageAltTextInput = document.createElement('input');
         // Label the alt text input
@@ -170,16 +171,18 @@ class InsertImageWidget extends BaseWidget_1.default {
         const sizeText = document.createElement('span');
         sizeText.innerText = this.localizationTable.imageSize(Math.round(size), units);
         // Add a button to allow decreasing the size of large images.
-        const decreaseSizeButton = document.createElement('button');
-        decreaseSizeButton.innerText = this.localizationTable.decreaseImageSize;
-        decreaseSizeButton.onclick = () => {
-            currentImage?.decreaseSize();
-        };
-        const resetSizeButton = document.createElement('button');
-        resetSizeButton.innerText = this.localizationTable.resetImage;
-        resetSizeButton.onclick = () => {
-            currentImage?.reset();
-        };
+        const decreaseSizeButton = (0, createButton_1.default)({
+            text: this.localizationTable.decreaseImageSize,
+            onClick: () => {
+                currentImage?.decreaseSize();
+            },
+        });
+        const resetSizeButton = (0, createButton_1.default)({
+            text: this.localizationTable.resetImage,
+            onClick: () => {
+                currentImage?.reset();
+            },
+        });
         this.statusView.replaceChildren(sizeText);
         if (currentImage?.isLarge()) {
             this.statusView.appendChild(decreaseSizeButton);

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

@@ -18,6 +18,7 @@ const constants_1 = require("../constants");
 const makeThicknessSlider_1 = __importDefault(require("./components/makeThicknessSlider"));
 const makeGridSelector_1 = __importDefault(require("./components/makeGridSelector"));
 const PolylineBuilder_1 = require("../../components/builders/PolylineBuilder");
+const createElement_1 = __importDefault(require("../../util/dom/createElement"));
 /**
  * This toolbar widget allows a user to control a single {@link Pen} tool.
  *
@@ -184,7 +185,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
         const container = document.createElement('div');
         container.classList.add('action-button-row', `${constants_1.toolbarCSSPrefix}-pen-tool-toggle-buttons`);
         const addToggleButton = (labelText, icon) => {
-            const button = document.createElement('button');
+            const button = (0, createElement_1.default)('button', { type: 'button' });
             button.classList.add(`${constants_1.toolbarCSSPrefix}-toggle-button`);
             const iconElement = icon.cloneNode(true);
             iconElement.classList.add('icon');

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

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../../util/addLongPressOrHoverCssClasses"));
+const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../../util/dom/addLongPressOrHoverCssClasses"));
+const createButton_1 = __importDefault(require("../../../util/dom/createButton"));
 /**
  * Creates HTML `button` elements from `buttonSpecs` and displays them in a
  * grid with `columnCount` columns.
@@ -13,7 +14,7 @@ const makeButtonGrid = (buttonSpecs, columnCount) => {
     container.classList.add('toolbar-button-grid');
     container.style.setProperty('--column-count', `${columnCount}`);
     const makeButton = (buttonSpec) => {
-        const buttonElement = document.createElement('button');
+        const buttonElement = (0, createButton_1.default)();
         buttonElement.classList.add('button');
         const iconElement = buttonSpec.icon();
         iconElement.classList.add('icon');

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

@@ -7,6 +7,7 @@ exports.makeColorInput = void 0;
 const math_1 = require("@js-draw/math");
 const PipetteTool_1 = __importDefault(require("../../../tools/PipetteTool"));
 const types_1 = require("../../../types");
+const createButton_1 = __importDefault(require("../../../util/dom/createButton"));
 // Returns [ color input, input container, callback to change the color value ].
 const makeColorInput = (editor, onColorChange) => {
     const container = document.createElement('span');
@@ -100,7 +101,7 @@ const makeColorInput = (editor, onColorChange) => {
 };
 exports.makeColorInput = makeColorInput;
 const addPipetteTool = (editor, container, onColorChange) => {
-    const pipetteButton = document.createElement('button');
+    const pipetteButton = (0, createButton_1.default)();
     pipetteButton.classList.add('pipetteButton');
     pipetteButton.title = editor.localization.pickColorFromScreen;
     pipetteButton.setAttribute('alt', pipetteButton.title);

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

@@ -4,8 +4,8 @@ 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 stopPropagationOfScrollingWheelEvents_1 = __importDefault(require("../../../util/dom/stopPropagationOfScrollingWheelEvents"));
+const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../../util/dom/addLongPressOrHoverCssClasses"));
 const constants_1 = require("../../constants");
 let idCounter = 0;
 /**

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const stopPropagationOfScrollingWheelEvents_1 = __importDefault(require("../../../util/stopPropagationOfScrollingWheelEvents"));
+const stopPropagationOfScrollingWheelEvents_1 = __importDefault(require("../../../util/dom/stopPropagationOfScrollingWheelEvents"));
 const ReactiveValue_1 = require("../../../util/ReactiveValue");
 /**
  * Creates a list that snaps to each item and reports the selected item.

package/dist/cjs/tools/FindTool.js

@@ -10,6 +10,7 @@ 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 createButton_1 = __importDefault(require("../util/dom/createButton"));
 const cssPrefix = 'find-tool';
 class FindTool extends BaseTool_1.default {
     constructor(editor) {
@@ -67,8 +68,8 @@ class FindTool extends BaseTool_1.default {
     fillOverlay() {
         const label = document.createElement('label');
         this.searchInput = document.createElement('input');
-        const nextBtn = document.createElement('button');
-        const closeBtn = document.createElement('button');
+        const nextBtn = (0, createButton_1.default)();
+        const closeBtn = (0, createButton_1.default)();
         // Math.random() ensures that the ID is unique (to allow us to refer to it
         // with an htmlFor).
         this.searchInput.setAttribute('id', `${cssPrefix}-searchInput-${Math.random()}`);

package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const math_1 = require("@js-draw/math");
 const SelectionTool_1 = require("./SelectionTool");
+const createButton_1 = __importDefault(require("../../util/dom/createButton"));
 const verticalOffset = 40;
 class SelectionMenuShortcut {
     constructor(parent, viewport, icon, showContextMenu, localization) {
@@ -22,8 +26,9 @@ class SelectionMenuShortcut {
         this.updatePosition();
     }
     initUI() {
-        const button = document.createElement('button');
-        this.icon.classList.add('icon');
+        const button = (0, createButton_1.default)({
+            classList: ['icon'],
+        });
         button.replaceChildren(this.icon);
         button.ariaLabel = this.localization.selectionMenu__show;
         button.title = button.ariaLabel;

package/dist/cjs/tools/SoundUITool.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const math_1 = require("@js-draw/math");
 const BaseTool_1 = __importDefault(require("./BaseTool"));
+const createButton_1 = __importDefault(require("../util/dom/createButton"));
 class SoundFeedback {
     constructor() {
         this.closed = false;
@@ -97,10 +98,11 @@ class SoundUITool extends BaseTool_1.default {
         // Create a screen-reader-usable method of toggling the tool:
         this.toggleButtonContainer = document.createElement('div');
         this.toggleButtonContainer.classList.add('js-draw-sound-ui-toggle');
-        this.toggleButton = document.createElement('button');
-        this.toggleButton.onclick = () => {
-            this.setEnabled(!this.isEnabled());
-        };
+        this.toggleButton = (0, createButton_1.default)({
+            onClick: () => {
+                this.setEnabled(!this.isEnabled());
+            },
+        });
         this.toggleButtonContainer.appendChild(this.toggleButton);
         this.updateToggleButtonText();
         editor.createHTMLOverlay(this.toggleButtonContainer);

package/dist/cjs/tools/util/createMenuOverlay.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const waitForTimeout_1 = __importDefault(require("../../util/waitForTimeout"));
 const types_1 = require("../../types");
+const createButton_1 = __importDefault(require("../../util/dom/createButton"));
 let idCounter = 0;
 const createMenuOverlay = async (editor, canvasAnchor, options) => {
     const overlay = document.createElement('div');
@@ -101,16 +102,17 @@ const createMenuOverlay = async (editor, canvasAnchor, options) => {
             }
         });
         for (const option of options) {
-            const optionElement = document.createElement('button');
+            const optionElement = (0, createButton_1.default)({
+                classList: ['option', 'editor-popup-menu-option'],
+                onClick: (event) => {
+                    if (event.defaultPrevented)
+                        return;
+                    onOptionSelected(option.key);
+                },
+            });
             optionElement.id = `menu-overlay-option-${idCounter++}`;
             optionElement.role = 'menuitem';
-            optionElement.classList.add('option', 'editor-popup-menu-option');
             optionElement.replaceChildren(option.icon(), document.createTextNode(option.text));
-            optionElement.onclick = (event) => {
-                if (event.defaultPrevented)
-                    return;
-                onOptionSelected(option.key);
-            };
             contentElement.appendChild(optionElement);
             if (optionElements.length === 0) {
                 optionElement.autofocus = true;

package/dist/cjs/util/dom/createButton.d.ts

@@ -0,0 +1,7 @@
+interface Options {
+    onClick?: (event: MouseEvent) => void;
+    text?: string;
+    classList?: string[];
+}
+declare const createButton: ({ onClick, text, classList }?: Options) => HTMLButtonElement;
+export default createButton;

package/dist/cjs/util/dom/createButton.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const createElement_1 = __importDefault(require("./createElement"));
+const createButton = ({ onClick, text, classList = [] } = {}) => {
+    const button = (0, createElement_1.default)('button', { type: 'button' });
+    if (onClick) {
+        button.onclick = onClick;
+    }
+    if (text) {
+        button.textContent = text;
+    }
+    for (const className of classList) {
+        button.classList.add(className);
+    }
+    return button;
+};
+exports.default = createButton;

package/dist/cjs/util/{createElement.d.ts → dom/createElement.d.ts}

@@ -11,6 +11,9 @@ interface ElementToPropertiesMap {
         'stroke-width': string;
         transform: string;
     };
+    button: {
+        type: 'button';
+    };
     rect: {
         stroke: string;
         fill: string;

package/dist/cjs/version.js

@@ -7,5 +7,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 exports.default = {
     // Note: Auto-updated by prebuild.js:
-    number: '1.30.0',
+    number: '1.30.1',
 };

package/dist/mjs/Editor.mjs

@@ -26,7 +26,7 @@ import  makeAboutDialog  from './dialogs/makeAboutDialog.mjs';
 import  version  from './version.mjs';
 import  { editorImageToSVGSync, editorImageToSVGAsync }  from './image/export/editorImageToSVG.mjs';
 import  ReactiveValue, { MutableReactiveValue }  from './util/ReactiveValue.mjs';
-import  listenForKeyboardEventsFrom  from './util/listenForKeyboardEventsFrom.mjs';
+import  listenForKeyboardEventsFrom  from './util/dom/listenForKeyboardEventsFrom.mjs';
 import  mitLicenseAttribution  from './util/mitLicenseAttribution.mjs';
 import  ClipboardHandler  from './util/ClipboardHandler.mjs';
 import  ContextMenuRecognizer  from './tools/InputFilter/ContextMenuRecognizer.mjs';

package/dist/mjs/components/ImageComponent.mjs

@@ -1,7 +1,7 @@
 import { Rect2, Mat33 } from '@js-draw/math';
 import  { assertIsNumber, assertIsNumberArray }  from '../util/assertions.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
-import  waitForImageLoaded  from '../util/waitForImageLoaded.mjs';
+import  waitForImageLoaded  from '../util/dom/waitForImageLoaded.mjs';
 /**
  * Represents a raster image.
  *

package/dist/mjs/dialogs/makeMessageDialog.mjs

@@ -1,3 +1,4 @@
+import  createButton  from '../util/dom/createButton.mjs';
 import  waitForTimeout  from '../util/waitForTimeout.mjs';
 const makeAboutDialog = (editor, options) => {
     const overlay = document.createElement('div');
@@ -9,9 +10,10 @@ const makeAboutDialog = (editor, options) => {
     const heading = document.createElement('h1');
     heading.textContent = options.title;
     heading.setAttribute('autofocus', 'true');
-    const closeButton = document.createElement('button');
-    closeButton.innerText = editor.localization.closeDialog;
-    closeButton.classList.add('close');
+    const closeButton = createButton({
+        text: editor.localization.closeDialog,
+        classList: ['close'],
+    });
     const scrollRegion = document.createElement('div');
     scrollRegion.classList.add('scroll');
     // Allow scrolling in the scrollable container -- don't forward wheel events.

package/dist/mjs/rendering/Display.mjs

@@ -5,6 +5,7 @@ import { Vec2, Color4 } from '@js-draw/math';
 import  RenderingCache  from './caching/RenderingCache.mjs';
 import  TextOnlyRenderer  from './renderers/TextOnlyRenderer.mjs';
 import  AcceleratedInkingCanvasRenderer  from './renderers/AcceleratedInkingCanvasRenderer.mjs';
+import  createButton  from '../util/dom/createButton.mjs';
 export var RenderingMode;
 (function (RenderingMode) {
     RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
@@ -177,9 +178,10 @@ export default class Display {
     initializeTextRendering() {
         const textRendererOutputContainer = document.createElement('div');
         textRendererOutputContainer.classList.add('textRendererOutputContainer');
-        const rerenderButton = document.createElement('button');
-        rerenderButton.classList.add('rerenderButton');
-        rerenderButton.innerText = this.editor.localization.rerenderAsText;
+        const rerenderButton = createButton({
+            classList: ['rerenderButton'],
+            text: this.editor.localization.rerenderAsText,
+        });
         this.textRerenderOutput = document.createElement('div');
         this.textRerenderOutput.setAttribute('aria-live', 'polite');
         rerenderButton.onclick = () => {

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -3,8 +3,9 @@ import  { toolbarCSSPrefix }  from './constants.mjs';
 import  EdgeToolbarLayoutManager  from './widgets/layout/EdgeToolbarLayoutManager.mjs';
 import  { MutableReactiveValue, ReactiveValue }  from '../util/ReactiveValue.mjs';
 import  AbstractToolbar  from './AbstractToolbar.mjs';
-import  stopPropagationOfScrollingWheelEvents  from '../util/stopPropagationOfScrollingWheelEvents.mjs';
+import  stopPropagationOfScrollingWheelEvents  from '../util/dom/stopPropagationOfScrollingWheelEvents.mjs';
 import  makeDraggable  from './utils/makeDraggable.mjs';
+import  createButton  from '../util/dom/createButton.mjs';
 /**
  * Creates an `EdgeToolbar`.
  *
@@ -85,7 +86,7 @@ export default class EdgeToolbar extends AbstractToolbar {
                 this.menuContainer.classList.remove(belowEdgeClassName);
             }
         });
-        this.closeButton = document.createElement('button');
+        this.closeButton = createButton();
         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.

package/dist/mjs/toolbar/IconProvider.mjs

@@ -10,7 +10,7 @@ import  Viewport  from '../Viewport.mjs';
 import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBuilder.mjs';
 import  { makePolylineBuilder }  from '../components/builders/PolylineBuilder.mjs';
 import  { EraserMode }  from '../tools/Eraser.mjs';
-import  { createSvgElement, createSvgElements, createSvgPaths }  from '../util/createElement.mjs';
+import  { createSvgElement, createSvgElements, createSvgPaths }  from '../util/dom/createElement.mjs';
 import  { SelectionMode }  from '../tools/SelectionTool/types.mjs';
 const svgNamespace = 'http://www.w3.org/2000/svg';
 let checkerboardIdCounter = 0;

package/dist/mjs/toolbar/utils/HelpDisplay.mjs

@@ -7,8 +7,9 @@ var _HelpDisplay_helpData;
 import { Rect2 } from '@js-draw/math';
 import  makeDraggable  from './makeDraggable.mjs';
 import  { MutableReactiveValue }  from '../../util/ReactiveValue.mjs';
-import  cloneElementWithStyles  from '../../util/cloneElementWithStyles.mjs';
-import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
+import  cloneElementWithStyles  from '../../util/dom/cloneElementWithStyles.mjs';
+import  addLongPressOrHoverCssClasses  from '../../util/dom/addLongPressOrHoverCssClasses.mjs';
+import  createButton  from '../../util/dom/createButton.mjs';
 /**
  * Creates the main content of the help overlay.
  *
@@ -214,7 +215,7 @@ class HelpDisplay {
             }
         };
         const makeCloseButton = () => {
-            const closeButton = document.createElement('button');
+            const closeButton = createButton();
             closeButton.classList.add('close-button');
             closeButton.appendChild(this.context.icons.makeCloseIcon());
             const label = this.context.localization.close;
@@ -273,8 +274,8 @@ class HelpDisplay {
         const makeNavigationButtons = (navigation) => {
             const navigationButtonContainer = document.createElement('div');
             navigationButtonContainer.classList.add('navigation-buttons');
-            const nextButton = document.createElement('button');
-            const previousButton = document.createElement('button');
+            const nextButton = createButton();
+            const previousButton = createButton();
             nextButton.textContent = this.context.localization.next;
             previousButton.textContent = this.context.localization.previous;
             nextButton.classList.add('next');
@@ -424,7 +425,7 @@ class HelpDisplay {
     createToggleButton() {
         const buttonContainer = document.createElement('div');
         buttonContainer.classList.add('toolbar-help-overlay-button');
-        const helpButton = document.createElement('button');
+        const helpButton = createButton();
         helpButton.classList.add('button');
         const icon = this.context.icons.makeHelpIcon();
         icon.classList.add('icon');

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

@@ -14,7 +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';
+import  addLongPressOrHoverCssClasses  from '../../util/dom/addLongPressOrHoverCssClasses.mjs';
 import  HelpDisplay  from '../utils/HelpDisplay.mjs';
 import  { assertIsObject }  from '../../util/assertions.mjs';
 /**