js-draw 1.30.0 → 1.31.1

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.31.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/localizations/getLocalizationTable.mjs

@@ -1,4 +1,5 @@
 import  { defaultEditorLocalization }  from '../localization.mjs';
+import  zh  from './zh.mjs';
 import  de  from './de.mjs';
 import  en  from './en.mjs';
 import  es  from './es.mjs';
@@ -8,6 +9,7 @@ export const allLocales = {
     en,
     es,
     sk,
+    zh,
 };
 // [locale]: A string in the format languageCode_Region or just languageCode. For example, en_US.
 const languageFromLocale = (locale) => {

package/dist/mjs/localizations/zh.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;

package/dist/mjs/localizations/zh.mjs

@@ -0,0 +1,168 @@
+import  { defaultEditorLocalization }  from '../localization.mjs';
+// Chinese localization
+const localization = {
+    ...defaultEditorLocalization,
+    help: '帮助',
+    helpHidden: '帮助已隐藏',
+    next: '下一页',
+    previous: '上一页',
+    close: '关闭',
+    helpScreenNavigationHelp: '点击控件查看更多信息。',
+    helpControlsAccessibilityLabel: '控件：激活控件以显示帮助。',
+    pen: '画笔',
+    eraser: '橡皮擦',
+    select: '选择',
+    handTool: '平移',
+    zoom: '缩放',
+    image: '图片',
+    reformatSelection: '格式化选区',
+    inputAltText: '替代文本',
+    decreaseImageSize: '减小尺寸',
+    resetImage: '重置',
+    chooseFile: '选择文件',
+    dragAndDropHereOrBrowse: '将文件拖拽到此处或{{浏览}}',
+    submit: '提交',
+    addAll: '全部添加',
+    cancel: '取消',
+    resetView: '重置视图',
+    thicknessLabel: '粗细',
+    colorLabel: '颜色',
+    fontLabel: '字体',
+    textSize: '字号',
+    resizeImageToSelection: '按选区调整图片大小',
+    deleteSelection: '删除选区',
+    duplicateSelection: '复制选区',
+    exit: '退出',
+    save: '保存',
+    undo: '撤销',
+    redo: '重做',
+    fullStrokeEraser: '全笔划橡皮擦',
+    selectPenType: '工具类型',
+    selectShape: '形状',
+    pickColorFromScreen: '从屏幕取色',
+    clickToPickColorAnnouncement: '点击屏幕以选取颜色',
+    colorSelectionCanceledAnnouncement: '颜色选择已取消',
+    selectionTool__lassoSelect: '自由选区',
+    selectionTool__lassoSelect__help: '启用后，拖拽将创建自由形式（套索）选区。',
+    selectionToolKeyboardShortcuts: '选择工具：使用方向键移动所选项目，使用小写/大写 “i” 和 “o” 调整大小。',
+    documentProperties: '页面',
+    backgroundColor: '背景色',
+    imageWidthOption: '宽度',
+    imageHeightOption: '高度',
+    useGridOption: '网格',
+    enableAutoresizeOption: '自动调整大小',
+    toggleOverflow: '更多',
+    about: '关于',
+    inputStabilization: '稳定',
+    strokeAutocorrect: '自动更正',
+    pressureSensitivity: '压力',
+    touchPanning: '触屏平移',
+    roundedTipPen: '自由画笔',
+    roundedTipPen2: '折线',
+    flatTipPen: '平头笔',
+    arrowPen: '箭头',
+    linePen: '直线',
+    outlinedRectanglePen: '空心矩形',
+    filledRectanglePen: '实心矩形',
+    outlinedCirclePen: '空心圆',
+    lockRotation: '锁定旋转',
+    paste: '粘v贴',
+    errorImageHasZeroSize: '错误：图片尺寸为零',
+    describeTheImage: '图像描述',
+    fileInput__loading: '加载中...',
+    fileInput__andNMoreFiles: (n) => `(还有 ${n} 个)`,
+    closeSidebar: (toolName) => `关闭 ${toolName} 的侧边栏`,
+    dropdownShown: (toolName) => `已显示 ${toolName} 下拉菜单`,
+    dropdownHidden: (toolName) => `已隐藏 ${toolName} 下拉菜单`,
+    zoomLevel: (zoomPercent) => `缩放：${zoomPercent}%`,
+    colorChangedAnnouncement: (color) => `颜色已更改为 ${color}`,
+    imageSize: (size, units) => `图片尺寸：${size} ${units}`,
+    imageLoadError: (message) => `图片加载错误：${message}`,
+    penTool: (penId) => `画笔 ${penId}`,
+    selectionTool: '选择工具',
+    selectAllTool: '全选',
+    eraserTool: '橡皮擦工具',
+    touchPanTool: '触屏平移工具',
+    twoFingerPanZoomTool: '双指平移与缩放',
+    undoRedoTool: '撤销/重做工具',
+    rightClickDragPanTool: '右键拖拽',
+    pipetteTool: '取色器',
+    keyboardPanZoom: '键盘平移与缩放快捷键',
+    selectionMenu__show: '显示选择菜单',
+    selectionMenu__copyToClipboard: '复制到剪贴板',
+    selectionMenu__duplicate: '复制',
+    selectionMenu__delete: '删除',
+    selectionMenu__paste: '粘贴',
+    copyPasteError__heading: '复制/粘贴',
+    copyPasteError__description: '出错了——此工具可能无法访问剪贴板。',
+    copyPasteError__errorDetails: '显示错误',
+    copyPasteError__pasteRetry: '请重试：在下方输入框中粘贴：',
+    copyPasteError__copyRetry: '请重试：在下方输入框中复制文本：',
+    copyPasteError__copyMe: '点我复制！',
+    autocorrectedTo: (strokeDescription) => `已自动更正为 ${strokeDescription}`,
+    autocorrectionCanceled: '自动更正已取消',
+    textTool: '文本工具',
+    enterTextToInsert: '输入要插入的文本',
+    changeTool: '切换工具',
+    pasteHandler: '复制粘贴处理器',
+    soundExplorer: '声音探索',
+    disableAccessibilityExploreTool: '关闭声音探索',
+    enableAccessibilityExploreTool: '开启声音探索',
+    soundExplorerUsageAnnouncement: '已启用声音图像探索：点击或拖拽屏幕，即可通过声音感受图像不同区域。',
+    findLabel: '查找',
+    toNextMatch: '下一个',
+    closeDialog: '关闭',
+    findDialogShown: '已显示查找对话框',
+    findDialogHidden: '已隐藏查找对话框',
+    focusedFoundText: (matchIdx, totalMatches) => `第 ${matchIdx} 条结果，共 ${totalMatches} 条`,
+    anyDevicePanning: '任意设备平移',
+    copied: (count) => `已复制 ${count} 个项目`,
+    pasted: (count) => `已粘贴 ${count} 个项目`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} 已启用`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} 已禁用`,
+    updatedViewport: '已更新视口',
+    transformedElements: (elemCount, action) => `${elemCount} 个元素已变换 (${action})`,
+    resizeOutputCommand: (newSize) => `图片尺寸已更改为 ${newSize.w}×${newSize.h}`,
+    enabledAutoresizeOutputCommand: '已启用输出自动调整大小',
+    disabledAutoresizeOutputCommand: '已禁用输出自动调整大小',
+    addComponentAction: (componentDescription) => `已添加 ${componentDescription}`,
+    eraseAction: (componentDescription, countErased) => `已删除 ${countErased} 个 ${componentDescription}`,
+    duplicateAction: (componentDescription, countErased) => `已复制 ${countErased} 个 ${componentDescription}`,
+    unionOf: (actionDescription, actionCount) => `合并：${actionCount} 个 ${actionDescription}`,
+    inverseOf: (actionDescription) => `${actionDescription} 已反向`,
+    elements: '元素',
+    erasedNoElements: '未v删除任何内容',
+    duplicatedNoElements: '未复制任何内容',
+    rotatedBy: (degrees) => `已旋转 ${Math.abs(degrees)} 度 ${degrees < 0 ? '顺时针' : '逆时针'}`,
+    movedLeft: '已向左移动',
+    movedUp: '已向上移动',
+    movedDown: '已向下移动',
+    movedRight: '已向右移动',
+    zoomedOut: '已缩小',
+    zoomedIn: '已放大',
+    andNMoreCommands: (count) => `还有 ${count} 条命令。`,
+    selectedElements: (count) => `已选 ${count} 个元素`,
+    unlabeledImageNode: '未命名图片',
+    stroke: '笔画',
+    svgObject: 'SVG 对象',
+    emptyBackground: '空白背景',
+    gridBackground: '网格背景',
+    filledBackgroundWithColor: (color) => `已填充背景（${color}）`,
+    text: (text) => `文本对象：${text}`,
+    imageNode: (label) => `图片：${label}`,
+    restyledElement: (elementDescription) => `已重新样式化 ${elementDescription}`,
+    pathNodeCount: (count) => `可见路径对象：${count} 个`,
+    textNodeCount: (count) => `可见文本节点：${count} 个`,
+    imageNodeCount: (nodeCount) => `可见图片节点：${nodeCount} 个`,
+    textNode: (content) => `文本：${content}`,
+    rerenderAsText: '以文本形式重绘',
+    accessibilityInputInstructions: '按“t”将视口内容朗读为文本。使用方向键移动视口，点击并拖拽绘制笔画。按“w”放大，按“s”缩小。',
+    loading: (percentage) => `加载中 ${percentage}%...`,
+    imageEditor: '图片编辑器',
+    doneLoading: '加载完成',
+    undoAnnouncement: (commandDescription) => `已撤销 ${commandDescription}`,
+    redoAnnouncement: (commandDescription) => `已重做 ${commandDescription}`,
+    softwareLibraries: '软件库',
+    developerInformation: '开发者信息',
+};
+export default localization;

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';
 /**

package/dist/mjs/toolbar/widgets/DocumentPropertiesWidget.mjs

@@ -7,6 +7,7 @@ import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  makeColorInput  from './components/makeColorInput.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
+import  createButton  from '../../util/dom/createButton.mjs';
 class DocumentPropertiesWidget extends BaseWidget {
     constructor(editor, localizationTable) {
         super(editor, 'document-properties-widget', localizationTable);
@@ -216,9 +217,10 @@ class DocumentPropertiesWidget extends BaseWidget {
             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 = createButton({
+            classList: ['about-button'],
+            text: this.localizationTable.about,
+        });
         aboutButton.onclick = () => {
             this.editor.showAboutDialog();
         };

package/dist/mjs/toolbar/widgets/HandToolWidget.mjs

@@ -6,11 +6,12 @@ import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
 import  makeSeparator  from './components/makeSeparator.mjs';
+import  createButton  from '../../util/dom/createButton.mjs';
 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 = createButton();
+    const decreaseButton = createButton();
+    const resetViewButton = createButton();
     const zoomLevelDisplay = document.createElement('span');
     increaseButton.innerText = '+';
     decreaseButton.innerText = '-';

package/dist/mjs/toolbar/widgets/InsertImageWidget/InsertImageWidget.mjs

@@ -13,6 +13,7 @@ import  bytesToSizeString  from '../../../util/bytesToSizeString.mjs';
 import  { ImageWrapper }  from './ImageWrapper.mjs';
 import  makeSnappedList  from '../components/makeSnappedList.mjs';
 import  fileToImages  from './fileToImages.mjs';
+import  createButton  from '../../../util/dom/createButton.mjs';
 /**
  * Provides a widget that allows inserting or modifying raster images.
  *
@@ -78,7 +79,7 @@ class InsertImageWidget extends BaseWidget {
         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 = createButton();
         this.selectedFiles = selectedFiles;
         this.imageAltTextInput = document.createElement('input');
         // Label the alt text input
@@ -165,16 +166,18 @@ class InsertImageWidget extends BaseWidget {
         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 = createButton({
+            text: this.localizationTable.decreaseImageSize,
+            onClick: () => {
+                currentImage?.decreaseSize();
+            },
+        });
+        const resetSizeButton = createButton({
+            text: this.localizationTable.resetImage,
+            onClick: () => {
+                currentImage?.reset();
+            },
+        });
         this.statusView.replaceChildren(sizeText);
         if (currentImage?.isLarge()) {
             this.statusView.appendChild(decreaseSizeButton);

package/dist/mjs/toolbar/widgets/PenToolWidget.mjs

@@ -13,6 +13,7 @@ import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  makeThicknessSlider  from './components/makeThicknessSlider.mjs';
 import  makeGridSelector  from './components/makeGridSelector.mjs';
 import  { makePolylineBuilder }  from '../../components/builders/PolylineBuilder.mjs';
+import  createElement  from '../../util/dom/createElement.mjs';
 /**
  * This toolbar widget allows a user to control a single {@link Pen} tool.
  *
@@ -179,7 +180,7 @@ class PenToolWidget extends BaseToolWidget {
         const container = document.createElement('div');
         container.classList.add('action-button-row', `${toolbarCSSPrefix}-pen-tool-toggle-buttons`);
         const addToggleButton = (labelText, icon) => {
-            const button = document.createElement('button');
+            const button = createElement('button', { type: 'button' });
             button.classList.add(`${toolbarCSSPrefix}-toggle-button`);
             const iconElement = icon.cloneNode(true);
             iconElement.classList.add('icon');

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

@@ -1,4 +1,5 @@
-import  addLongPressOrHoverCssClasses  from '../../../util/addLongPressOrHoverCssClasses.mjs';
+import  addLongPressOrHoverCssClasses  from '../../../util/dom/addLongPressOrHoverCssClasses.mjs';
+import  createButton  from '../../../util/dom/createButton.mjs';
 /**
  * Creates HTML `button` elements from `buttonSpecs` and displays them in a
  * grid with `columnCount` columns.
@@ -8,7 +9,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 = createButton();
         buttonElement.classList.add('button');
         const iconElement = buttonSpec.icon();
         iconElement.classList.add('icon');

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

@@ -1,6 +1,7 @@
 import { Color4 } from '@js-draw/math';
 import  PipetteTool  from '../../../tools/PipetteTool.mjs';
 import  { EditorEventType }  from '../../../types.mjs';
+import  createButton  from '../../../util/dom/createButton.mjs';
 // Returns [ color input, input container, callback to change the color value ].
 export const makeColorInput = (editor, onColorChange) => {
     const container = document.createElement('span');
@@ -93,7 +94,7 @@ export const makeColorInput = (editor, onColorChange) => {
     };
 };
 const addPipetteTool = (editor, container, onColorChange) => {
-    const pipetteButton = document.createElement('button');
+    const pipetteButton = createButton();
     pipetteButton.classList.add('pipetteButton');
     pipetteButton.title = editor.localization.pickColorFromScreen;
     pipetteButton.setAttribute('alt', pipetteButton.title);

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

@@ -1,6 +1,6 @@
 import  { MutableReactiveValue }  from '../../../util/ReactiveValue.mjs';
-import  stopPropagationOfScrollingWheelEvents  from '../../../util/stopPropagationOfScrollingWheelEvents.mjs';
-import  addLongPressOrHoverCssClasses  from '../../../util/addLongPressOrHoverCssClasses.mjs';
+import  stopPropagationOfScrollingWheelEvents  from '../../../util/dom/stopPropagationOfScrollingWheelEvents.mjs';
+import  addLongPressOrHoverCssClasses  from '../../../util/dom/addLongPressOrHoverCssClasses.mjs';
 import  { toolbarCSSPrefix }  from '../../constants.mjs';
 let idCounter = 0;
 /**

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

@@ -1,4 +1,4 @@
-import  stopPropagationOfScrollingWheelEvents  from '../../../util/stopPropagationOfScrollingWheelEvents.mjs';
+import  stopPropagationOfScrollingWheelEvents  from '../../../util/dom/stopPropagationOfScrollingWheelEvents.mjs';
 import  { MutableReactiveValue, ReactiveValue }  from '../../../util/ReactiveValue.mjs';
 /**
  * Creates a list that snaps to each item and reports the selected item.

package/dist/mjs/tools/FindTool.mjs

@@ -5,6 +5,7 @@ import  TextComponent  from '../components/TextComponent.mjs';
 import  ImageComponent  from '../components/ImageComponent.mjs';
 import  BaseTool  from './BaseTool.mjs';
 import  { toggleFindVisibleShortcutId }  from './keybindings.mjs';
+import  createButton  from '../util/dom/createButton.mjs';
 const cssPrefix = 'find-tool';
 export default class FindTool extends BaseTool {
     constructor(editor) {
@@ -62,8 +63,8 @@ export default class FindTool extends BaseTool {
     fillOverlay() {
         const label = document.createElement('label');
         this.searchInput = document.createElement('input');
-        const nextBtn = document.createElement('button');
-        const closeBtn = document.createElement('button');
+        const nextBtn = createButton();
+        const closeBtn = createButton();
         // 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/mjs/tools/PanZoom.mjs

@@ -125,9 +125,15 @@ export default class PanZoom extends BaseTool {
         this.inertialScroller?.stop();
         this.velocity = inertialScrollerVelocity;
         this.lastPointerDownTimestamp = currentPointer.timeStamp;
-        const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
         const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
-        if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
+        // Work around a Chromium bug where touch events are reported to have unknown type.
+        // See https://issues.chromium.org/u/1/issues/428153664.
+        const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
+        const allAreUnknown = this.allPointersAreOfType(pointers, PointerDevice.Other);
+        const allAreProbablyTouch = allAreTouch || allAreUnknown;
+        if (allAreProbablyTouch &&
+            pointers.length === 2 &&
+            this.mode & PanZoomMode.TwoFingerTouchGestures) {
             const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
             this.lastTouchDist = dist;
             this.startTouchDist = dist;

package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs

@@ -1,5 +1,6 @@
 import { Rect2, Vec2 } from '@js-draw/math';
 import  { cssPrefix }  from './SelectionTool.mjs';
+import  createButton  from '../../util/dom/createButton.mjs';
 const verticalOffset = 40;
 export default class SelectionMenuShortcut {
     constructor(parent, viewport, icon, showContextMenu, localization) {
@@ -20,8 +21,9 @@ export default class SelectionMenuShortcut {
         this.updatePosition();
     }
     initUI() {
-        const button = document.createElement('button');
-        this.icon.classList.add('icon');
+        const button = createButton({
+            classList: ['icon'],
+        });
         button.replaceChildren(this.icon);
         button.ariaLabel = this.localization.selectionMenu__show;
         button.title = button.ariaLabel;

package/dist/mjs/tools/SoundUITool.mjs

@@ -1,5 +1,6 @@
 import { LineSegment2, Color4 } from '@js-draw/math';
 import  BaseTool  from './BaseTool.mjs';
+import  createButton  from '../util/dom/createButton.mjs';
 class SoundFeedback {
     constructor() {
         this.closed = false;
@@ -92,10 +93,11 @@ export default class SoundUITool extends BaseTool {
         // 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 = createButton({
+            onClick: () => {
+                this.setEnabled(!this.isEnabled());
+            },
+        });
         this.toggleButtonContainer.appendChild(this.toggleButton);
         this.updateToggleButtonText();
         editor.createHTMLOverlay(this.toggleButtonContainer);