js-draw 1.21.2 → 1.22.0

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

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _BaseWidget_instances, _a, _BaseWidget_hasDropdown, _BaseWidget_disabledDueToReadOnlyEditor, _BaseWidget_tags, _BaseWidget_removeEditorListeners, _BaseWidget_addEditorListeners;
 import  ToolbarShortcutHandler  from '../../tools/ToolbarShortcutHandler.mjs';
-import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent }  from '../../inputEvents.mjs';
+import  { keyPressEventFromHTMLEvent, keyUpEventFromHTMLEvent, }  from '../../inputEvents.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  DropdownLayoutManager  from './layout/DropdownLayoutManager.mjs';
 import  addLongPressOrHoverCssClasses  from '../../util/addLongPressOrHoverCssClasses.mjs';
@@ -67,7 +67,7 @@ class BaseWidget {
         this.button.tabIndex = 0;
         // Disable the context menu. This allows long-press gestures to trigger the button's
         // tooltip instead.
-        this.button.oncontextmenu = event => {
+        this.button.oncontextmenu = (event) => {
             event.preventDefault();
         };
         addLongPressOrHoverCssClasses(this.button);
@@ -165,7 +165,7 @@ class BaseWidget {
         return this.setUpButtonEventListeners(button);
     }
     setUpButtonEventListeners(button) {
-        const clickTriggers = { Enter: true, ' ': true, };
+        const clickTriggers = { Enter: true, ' ': true };
         button.onkeydown = (evt) => {
             let handled = false;
             if (evt.key in clickTriggers) {
@@ -183,7 +183,7 @@ class BaseWidget {
                 evt.preventDefault();
             }
         };
-        button.onkeyup = htmlEvent => {
+        button.onkeyup = (htmlEvent) => {
             if (htmlEvent.key in clickTriggers) {
                 return;
             }
@@ -199,7 +199,7 @@ class BaseWidget {
             }
         };
         // Prevent double-click zoom on some devices.
-        button.ondblclick = event => {
+        button.ondblclick = (event) => {
             event.preventDefault();
         };
     }
@@ -251,7 +251,7 @@ class BaseWidget {
         this.container.replaceChildren();
         this.button.replaceChildren(this.icon, this.label);
         this.container.appendChild(this.button);
-        const helpDisplay = new HelpDisplay(content => this.editor.createHTMLOverlay(content), this.editor);
+        const helpDisplay = new HelpDisplay((content) => this.editor.createHTMLOverlay(content), this.editor);
         const helpText = this.getHelpText();
         if (helpText) {
             helpDisplay.registerTextHelpForElement(this.dropdownContent, [this.getTitle(), helpText].join('\n\n'));
@@ -271,7 +271,7 @@ class BaseWidget {
                 getTitle: () => this.getTitle(),
                 isToplevel: () => this.toplevel,
             });
-            this.dropdown.visible.onUpdate(visible => {
+            this.dropdown.visible.onUpdate((visible) => {
                 if (visible) {
                     this.container.classList.add('dropdownVisible');
                 }
@@ -469,7 +469,7 @@ _a = BaseWidget, _BaseWidget_hasDropdown = new WeakMap(), _BaseWidget_disabledDu
             handler.removeListener(keyPressListener);
         };
     }
-    const readOnlyListener = this.editor.isReadOnlyReactiveValue().onUpdateAndNow(readOnly => {
+    const readOnlyListener = this.editor.isReadOnlyReactiveValue().onUpdateAndNow((readOnly) => {
         if (readOnly && this.shouldAutoDisableInReadOnlyEditor() && !this.disabled) {
             this.setDisabled(true);
             __classPrivateFieldSet(this, _BaseWidget_disabledDueToReadOnlyEditor, true, "f");

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

@@ -101,7 +101,7 @@ class DocumentPropertiesWidget extends BaseWidget {
             const backgroundColorRow = document.createElement('div');
             const backgroundColorLabel = document.createElement('label');
             backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
-            const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue, registerWithHelpTextDisplay: registerHelpForInputs, } = makeColorInput(this.editor, color => {
+            const { input: colorInput, container: backgroundColorInputContainer, setValue: setBgColorInputValue, registerWithHelpTextDisplay: registerHelpForInputs, } = makeColorInput(this.editor, (color) => {
                 if (!color.eq(this.getBackgroundColor())) {
                     this.setBackgroundColor(color);
                 }
@@ -116,7 +116,7 @@ class DocumentPropertiesWidget extends BaseWidget {
                 helpDisplay?.registerTextHelpForElement(backgroundColorRow, this.localizationTable.pageDropdown__backgroundColorHelpText);
                 registerHelpForInputs(helpDisplay);
             };
-            return { setBgColorInputValue, backgroundColorRow, registerWithHelp, };
+            return { setBgColorInputValue, backgroundColorRow, registerWithHelp };
         };
         const { backgroundColorRow, setBgColorInputValue, registerWithHelp: registerBackgroundRowWithHelp, } = makeBackgroundColorInput();
         const makeCheckboxRow = (labelText, onChange) => {

package/dist/mjs/toolbar/widgets/EraserToolWidget.mjs

@@ -8,7 +8,7 @@ class EraserToolWidget extends BaseToolWidget {
         super(editor, tool, 'eraser-tool-widget', localizationTable);
         this.tool = tool;
         this.updateInputs = () => { };
-        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+        this.editor.notifier.on(EditorEventType.ToolUpdated, (toolEvt) => {
             if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === this.tool) {
                 this.updateInputs();
                 this.updateIcon();
@@ -36,7 +36,9 @@ class EraserToolWidget extends BaseToolWidget {
         labelElement.innerText = this.localizationTable.fullStrokeEraser;
         checkboxElement.type = 'checkbox';
         checkboxElement.oninput = () => {
-            this.tool.getModeValue().set(checkboxElement.checked ? EraserMode.FullStroke : EraserMode.PartialStroke);
+            this.tool
+                .getModeValue()
+                .set(checkboxElement.checked ? EraserMode.FullStroke : EraserMode.PartialStroke);
         };
         const updateValue = () => {
             checkboxElement.checked = this.tool.getModeValue().get() === EraserMode.FullStroke;
@@ -53,7 +55,7 @@ class EraserToolWidget extends BaseToolWidget {
     fillDropdown(dropdown, helpDisplay) {
         const container = document.createElement('div');
         container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
-        const thicknessSlider = makeThicknessSlider(this.editor, thickness => {
+        const thicknessSlider = makeThicknessSlider(this.editor, (thickness) => {
             this.tool.setThickness(thickness);
         });
         thicknessSlider.setBounds(10, 55);

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

@@ -69,7 +69,7 @@ class HandModeWidget extends BaseWidget {
         this.makeIcon = makeIcon;
         this.title = title;
         this.helpText = helpText;
-        editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+        editor.notifier.on(EditorEventType.ToolUpdated, (toolEvt) => {
             if (toolEvt.kind === EditorEventType.ToolUpdated && toolEvt.tool === tool) {
                 const allEnabled = !!(tool.getMode() & PanZoomMode.SinglePointerGestures);
                 this.setSelected(!!(tool.getMode() & flag) || allEnabled);
@@ -112,12 +112,12 @@ export default class HandToolWidget extends BaseToolWidget {
     // If the primary, the override will be gotten from the editor's tool controller.
     tool, localizationTable) {
         const isGivenToolPrimary = editor.toolController.getPrimaryTools().includes(tool);
-        const primaryTool = (isGivenToolPrimary ? tool : HandToolWidget.getPrimaryHandTool(editor.toolController))
-            ?? tool;
+        const primaryTool = (isGivenToolPrimary ? tool : HandToolWidget.getPrimaryHandTool(editor.toolController)) ??
+            tool;
         super(editor, primaryTool, 'hand-tool-widget', localizationTable);
         this.overridePanZoomTool =
-            (isGivenToolPrimary ? HandToolWidget.getOverrideHandTool(editor.toolController) : tool)
-                ?? tool;
+            (isGivenToolPrimary ? HandToolWidget.getOverrideHandTool(editor.toolController) : tool) ??
+                tool;
         // Only allow toggling a hand tool if we're using the primary hand tool and not the override
         // hand tool for this button.
         this.allowTogglingBaseTool = primaryTool !== null;
@@ -132,7 +132,9 @@ export default class HandToolWidget extends BaseToolWidget {
         this.addSubWidget(rotationLockWidget);
     }
     static getPrimaryHandTool(toolController) {
-        const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom);
+        const primaryPanZoomToolList = toolController
+            .getPrimaryTools()
+            .filter((tool) => tool instanceof PanZoom);
         const primaryPanZoomTool = primaryPanZoomToolList[0];
         return primaryPanZoomTool;
     }

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

@@ -34,7 +34,7 @@ class InsertImageWidget extends BaseWidget {
         super(editor, 'insert-image-widget', localization);
         // Make the dropdown showable
         this.container.classList.add('dropdownShowable');
-        editor.notifier.on(EditorEventType.SelectionUpdated, event => {
+        editor.notifier.on(EditorEventType.SelectionUpdated, (event) => {
             if (event.kind === EditorEventType.SelectionUpdated && this.isDropdownVisible()) {
                 this.updateInputs();
             }
@@ -67,7 +67,7 @@ class InsertImageWidget extends BaseWidget {
     fillDropdown(dropdown) {
         const container = document.createElement('div');
         container.classList.add('insert-image-widget-dropdown-content', `${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
-        const { container: chooseImageRow, selectedFiles, } = makeFileInput(this.localizationTable.chooseFile, this.editor, {
+        const { container: chooseImageRow, selectedFiles } = makeFileInput(this.localizationTable.chooseFile, this.editor, {
             accepts: 'image/*',
             allowMultiSelect: true,
             customPickerAction: this.editor.getCurrentSettings().image?.showImagePicker,
@@ -115,7 +115,7 @@ class InsertImageWidget extends BaseWidget {
                     this.statusView.innerText = errorMessage;
                     return [];
                 }
-                return renderableImages.map(image => {
+                return renderableImages.map((image) => {
                     const { wrapper, preview } = ImageWrapper.fromRenderable(image, () => this.onImageDataUpdate());
                     return {
                         data: wrapper,
@@ -183,7 +183,9 @@ class InsertImageWidget extends BaseWidget {
             this.statusView.appendChild(resetSizeButton);
         }
         else {
-            const hasLargeOrChangedImages = this.images.get().some(image => image.data?.isChanged() || image.data?.isLarge());
+            const hasLargeOrChangedImages = this.images
+                .get()
+                .some((image) => image.data?.isChanged() || image.data?.isLarge());
             if (hasLargeOrChangedImages) {
                 // Still show the button -- prevents the layout from readjusting while
                 // scrolling through the image list
@@ -202,7 +204,7 @@ class InsertImageWidget extends BaseWidget {
         };
         resetInputs();
         const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
-        const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
+        const selectedObjects = selectionTools.map((tool) => tool.getSelectedObjects()).flat();
         // Check: Is there a selected image that can be edited?
         let editingImage = null;
         if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent) {
@@ -214,7 +216,7 @@ class InsertImageWidget extends BaseWidget {
         }
         else if (selectedObjects.length > 0) {
             // If not, clear the selection.
-            selectionTools.forEach(tool => tool.clearSelection());
+            selectionTools.forEach((tool) => tool.clearSelection());
         }
         // Show the submit button only when there is data to submit.
         this.submitButton.style.display = 'none';
@@ -270,10 +272,7 @@ class InsertImageWidget extends BaseWidget {
                     for (const component of newComponents) {
                         commands.push(EditorImage.addElement(component), component.transformBy(originalTransform.rightMul(widthAdjustTransform)), component.setZIndex(editingImage.getZIndex()));
                     }
-                    this.editor.dispatch(uniteCommands([
-                        ...commands,
-                        eraseCommand,
-                    ]));
+                    this.editor.dispatch(uniteCommands([...commands, eraseCommand]));
                     selectionTools[0]?.setSelection(newComponents);
                 }
                 else {

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

@@ -2,7 +2,7 @@ import  { makeArrowBuilder }  from '../../components/builders/ArrowBuilder.mjs';
 import  { makeFreehandLineBuilder }  from '../../components/builders/FreehandLineBuilder.mjs';
 import  { makePressureSensitiveFreehandLineBuilder }  from '../../components/builders/PressureSensitiveFreehandLineBuilder.mjs';
 import  { makeLineBuilder }  from '../../components/builders/LineBuilder.mjs';
-import  { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder }  from '../../components/builders/RectangleBuilder.mjs';
+import  { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder, }  from '../../components/builders/RectangleBuilder.mjs';
 import  { makeOutlinedCircleBuilder }  from '../../components/builders/CircleBuilder.mjs';
 import  { EditorEventType }  from '../../types.mjs';
 import  makeColorInput  from './components/makeColorInput.mjs';
@@ -46,7 +46,7 @@ class PenToolWidget extends BaseToolWidget {
                 id: 'polyline-pen',
                 factory: makePolylineBuilder,
             },
-            ...(additionalPens.filter(pen => !pen.isShapeBuilder)),
+            ...additionalPens.filter((pen) => !pen.isShapeBuilder),
             // Shape pens
             {
                 name: this.localizationTable.arrowPen,
@@ -78,9 +78,9 @@ class PenToolWidget extends BaseToolWidget {
                 isShapeBuilder: true,
                 factory: makeOutlinedCircleBuilder,
             },
-            ...(additionalPens.filter(pen => pen.isShapeBuilder)),
+            ...additionalPens.filter((pen) => pen.isShapeBuilder),
         ].filter(filterPens);
-        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+        this.editor.notifier.on(EditorEventType.ToolUpdated, (toolEvt) => {
             if (toolEvt.kind !== EditorEventType.ToolUpdated) {
                 throw new Error('Invalid event type!');
             }
@@ -123,7 +123,10 @@ class PenToolWidget extends BaseToolWidget {
             style.factory = record.factory;
         }
         const strokeFactory = record?.factory;
-        if (!strokeFactory || strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder || strokeFactory === makePolylineBuilder) {
+        if (!strokeFactory ||
+            strokeFactory === makeFreehandLineBuilder ||
+            strokeFactory === makePressureSensitiveFreehandLineBuilder ||
+            strokeFactory === makePolylineBuilder) {
             return this.editor.icons.makePenIcon(style);
         }
         else {
@@ -143,8 +146,10 @@ class PenToolWidget extends BaseToolWidget {
                 isShapeBuilder: penType.isShapeBuilder ?? false,
             };
         });
-        const penSelector = makeGridSelector(this.localizationTable.selectPenType, this.getCurrentPenTypeIdx(), allChoices.filter(choice => !choice.isShapeBuilder));
-        const shapeSelector = makeGridSelector(this.localizationTable.selectShape, this.getCurrentPenTypeIdx(), allChoices.filter(choice => choice.isShapeBuilder));
+        const penItems = allChoices.filter((choice) => !choice.isShapeBuilder);
+        const penSelector = makeGridSelector(this.localizationTable.selectPenType, this.getCurrentPenTypeIdx(), penItems);
+        const shapeItems = allChoices.filter((choice) => choice.isShapeBuilder);
+        const shapeSelector = makeGridSelector(this.localizationTable.selectShape, this.getCurrentPenTypeIdx(), shapeItems);
         const onSelectorUpdate = (newPenTypeIndex) => {
             this.tool.setStrokeFactory(this.penTypes[newPenTypeIndex].factory);
         };
@@ -161,8 +166,12 @@ class PenToolWidget extends BaseToolWidget {
                 shapeSelector.updateIcons();
             },
             addTo: (parent) => {
-                penSelector.addTo(parent);
-                shapeSelector.addTo(parent);
+                if (penItems.length) {
+                    penSelector.addTo(parent);
+                }
+                if (shapeItems.length) {
+                    shapeSelector.addTo(parent);
+                }
             },
         };
     }
@@ -200,11 +209,11 @@ class PenToolWidget extends BaseToolWidget {
             return result;
         };
         const stabilizationOption = addToggleButton(this.localizationTable.inputStabilization, this.editor.icons.makeStrokeSmoothingIcon());
-        stabilizationOption.setOnInputListener(enabled => {
+        stabilizationOption.setOnInputListener((enabled) => {
             this.tool.setHasStabilization(enabled);
         });
         const autocorrectOption = addToggleButton(this.localizationTable.strokeAutocorrect, this.editor.icons.makeShapeAutocorrectIcon());
-        autocorrectOption.setOnInputListener(enabled => {
+        autocorrectOption.setOnInputListener((enabled) => {
             this.tool.setStrokeAutocorrectEnabled(enabled);
         });
         // Help text
@@ -227,12 +236,12 @@ class PenToolWidget extends BaseToolWidget {
         const container = document.createElement('div');
         container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
         // Thickness: Value of the input is squared to allow for finer control/larger values.
-        const { container: thicknessRow, setValue: setThickness } = makeThicknessSlider(this.editor, thickness => {
+        const { container: thicknessRow, setValue: setThickness } = makeThicknessSlider(this.editor, (thickness) => {
             this.tool.setThickness(thickness);
         });
         const colorRow = document.createElement('div');
         const colorLabel = document.createElement('label');
-        const colorInputControl = makeColorInput(this.editor, color => {
+        const colorInputControl = makeColorInput(this.editor, (color) => {
             this.tool.setColor(color);
         });
         const { input: colorInput, container: colorInputContainer } = colorInputControl;
@@ -301,7 +310,7 @@ class PenToolWidget extends BaseToolWidget {
     deserializeFrom(state) {
         super.deserializeFrom(state);
         const verifyPropertyType = (propertyName, expectedType) => {
-            const actualType = typeof (state[propertyName]);
+            const actualType = typeof state[propertyName];
             if (actualType !== expectedType) {
                 throw new Error(`Deserializing property ${propertyName}: Invalid type. Expected ${expectedType},` +
                     ` was ${actualType}.`);

package/dist/mjs/toolbar/widgets/SelectionToolWidget.mjs

@@ -13,7 +13,7 @@ const makeFormatMenu = (editor, selectionTool, localizationTable) => {
     container.classList.add('selection-format-menu', `${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}indentedList`);
     const colorRow = document.createElement('div');
     const colorLabel = document.createElement('label');
-    const colorInputControl = makeColorInput(editor, color => {
+    const colorInputControl = makeColorInput(editor, (color) => {
         const selection = selectionTool.getSelection();
         if (selection) {
             const updateStyleCommands = [];
@@ -94,7 +94,7 @@ export default class SelectionToolWidget extends BaseToolWidget {
         };
         updateDisabled(true);
         // Enable/disable actions based on whether items are selected
-        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+        this.editor.notifier.on(EditorEventType.ToolUpdated, (toolEvt) => {
             if (toolEvt.kind !== EditorEventType.ToolUpdated) {
                 throw new Error('Invalid event type!');
             }

package/dist/mjs/toolbar/widgets/TextToolWidget.mjs

@@ -8,7 +8,7 @@ class TextToolWidget extends BaseToolWidget {
         super(editor, tool, 'text-tool-widget', localization);
         this.tool = tool;
         this.updateDropdownInputs = null;
-        editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+        editor.notifier.on(EditorEventType.ToolUpdated, (evt) => {
             if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
                 this.updateIcon();
                 this.updateDropdownInputs?.();
@@ -32,7 +32,7 @@ class TextToolWidget extends BaseToolWidget {
         const fontLabel = document.createElement('label');
         const sizeInput = document.createElement('input');
         const sizeLabel = document.createElement('label');
-        const { input: colorInput, container: colorInputContainer, setValue: setColorInputValue } = makeColorInput(this.editor, color => {
+        const { input: colorInput, container: colorInputContainer, setValue: setColorInputValue, } = makeColorInput(this.editor, (color) => {
             this.tool.setColor(color);
         });
         const colorLabel = document.createElement('label');
@@ -100,13 +100,13 @@ class TextToolWidget extends BaseToolWidget {
         };
     }
     deserializeFrom(state) {
-        if (state.fontFamily && typeof (state.fontFamily) === 'string') {
+        if (state.fontFamily && typeof state.fontFamily === 'string') {
             this.tool.setFontFamily(state.fontFamily);
         }
-        if (state.color && typeof (state.color) === 'string') {
+        if (state.color && typeof state.color === 'string') {
             this.tool.setColor(Color4.fromHex(state.color));
         }
-        if (state.textSize && typeof (state.textSize) === 'number') {
+        if (state.textSize && typeof state.textSize === 'number') {
             this.tool.setFontSize(state.textSize);
         }
         super.deserializeFrom(state);

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

@@ -42,7 +42,7 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
             icon.style.display = 'none';
         }
         else if (files.length > 0) {
-            const fileNames = files.map(file => file.name);
+            const fileNames = files.map((file) => file.name);
             const maxNames = 5;
             if (fileNames.length <= maxNames) {
                 descriptionText.textContent = fileNames.join('\n');
@@ -84,15 +84,15 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
     };
     const addFileEventListeners = () => {
         // Support dropping files
-        label.addEventListener('dragover', event => {
+        label.addEventListener('dragover', (event) => {
             event.preventDefault();
             label.classList.add('drag-target');
         });
-        label.addEventListener('dragenter', event => {
+        label.addEventListener('dragenter', (event) => {
             event.preventDefault();
             label.classList.add('drag-target');
         });
-        label.addEventListener('dragleave', event => {
+        label.addEventListener('dragleave', (event) => {
             event.preventDefault();
             // Ensure the event wasn't targeting a child.
             // See https://stackoverflow.com/a/54271161 and
@@ -103,7 +103,7 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
             }
         });
         // See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop#process_the_drop
-        label.addEventListener('drop', event => {
+        label.addEventListener('drop', (event) => {
             event.preventDefault();
             label.classList.remove('drag-target');
             const fileList = [];
@@ -132,7 +132,7 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
                 const data = await customPickerAction({
                     setOnCancelCallback: (onCancel) => {
                         if (!loading) {
-                            throw new Error('Task already completed. Can\'t register cancel handler.');
+                            throw new Error("Task already completed. Can't register cancel handler.");
                         }
                         cancelLoading = () => {
                             cancelLoading = null;
@@ -154,7 +154,7 @@ const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = f
         };
         input.onclick = promptForFiles;
     }
-    selectedFiles.onUpdate(files => {
+    selectedFiles.onUpdate((files) => {
         if (files.length === 0 && input.files && input.files.length > 0) {
             input.value = '';
         }

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

@@ -21,7 +21,7 @@ labelText, defaultId, choices) => {
     menuContainer.id = `${toolbarCSSPrefix}-grid-select-id-${idCounter++}`;
     stopPropagationOfScrollingWheelEvents(menuContainer);
     const label = document.createElement('label');
-    label.innerText = labelText;
+    label.textContent = labelText;
     label.htmlFor = menuContainer.id;
     outerContainer.appendChild(label);
     // All buttons in a radiogroup need the same name attribute.
@@ -83,7 +83,7 @@ labelText, defaultId, choices) => {
         // Prevent the right-click menu from being shown on long-press
         // (important for some toolbars that use long-press gestures to
         // show grid selector labels).
-        buttonContainer.oncontextmenu = event => {
+        buttonContainer.oncontextmenu = (event) => {
             event.preventDefault();
         };
         buttonContainer.replaceChildren(button, labelContainer);
@@ -102,7 +102,7 @@ labelText, defaultId, choices) => {
             choiceRecord: record,
             setChecked,
             updateIcon,
-            updateButtonRadiogroupName
+            updateButtonRadiogroupName,
         };
     };
     const buttons = [];
@@ -113,7 +113,7 @@ labelText, defaultId, choices) => {
     // However, it is still possible that selectedValue does not correspond
     // to a choice in `choices`. This is acceptable.
     outerContainer.appendChild(menuContainer);
-    selectedValue.onUpdateAndNow(choiceId => {
+    selectedValue.onUpdateAndNow((choiceId) => {
         for (let i = 0; i < buttons.length; i++) {
             buttons[i].setChecked(buttons[i].choiceRecord.id === choiceId);
         }
@@ -129,7 +129,7 @@ labelText, defaultId, choices) => {
             }
         },
         updateIcons: () => {
-            buttons.forEach(button => button.updateIcon());
+            buttons.forEach((button) => button.updateIcon());
         },
         getRootElement() {
             return outerContainer;

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

@@ -17,7 +17,10 @@ const makeSnappedList = (itemsValue) => {
         // TODO: Does it make sense for the page marker list to be focusable?
         markerContainer.setAttribute('tabindex', '-1');
         const markers = [];
-        const pairedItems = ReactiveValue.union([visibleIndex, itemsValue]);
+        const pairedItems = ReactiveValue.union([
+            visibleIndex,
+            itemsValue,
+        ]);
         pairedItems.onUpdateAndNow(([currentVisibleIndex, items]) => {
             let addedOrRemovedMarkers = false;
             // Items may have been removed from the list of pages. Make the markers reflect that.
@@ -51,7 +54,8 @@ const makeSnappedList = (itemsValue) => {
                 }
                 const markerIndex = i;
                 marker.onclick = () => {
-                    wrappedItems.get()[markerIndex]?.element?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                    wrappedItems
+                        .get()[markerIndex]?.element?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                 };
             }
             // Only call .replaceChildren when necessary -- doing so on every change would
@@ -99,7 +103,7 @@ const makeSnappedList = (itemsValue) => {
             observer = null;
         }
     };
-    const wrappedItems = ReactiveValue.map(itemsValue, items => {
+    const wrappedItems = ReactiveValue.map(itemsValue, (items) => {
         return items.map((item, index) => {
             const wrapper = document.createElement('div');
             if (item.element.parentElement)
@@ -114,7 +118,7 @@ const makeSnappedList = (itemsValue) => {
         });
     });
     const lastItems = [];
-    wrappedItems.onUpdateAndNow(items => {
+    wrappedItems.onUpdateAndNow((items) => {
         visibleIndex.set(-1);
         for (const item of lastItems) {
             observer?.unobserve(item.element);
@@ -144,7 +148,7 @@ const makeSnappedList = (itemsValue) => {
             }
         }
     });
-    const visibleItem = ReactiveValue.map(visibleIndex, index => {
+    const visibleItem = ReactiveValue.map(visibleIndex, (index) => {
         const values = itemsValue.get();
         if (0 <= index && index < values.length) {
             return values[index].data;

package/dist/mjs/toolbar/widgets/keybindings.mjs

@@ -3,10 +3,10 @@ import  KeyboardShortcutManager  from '../../shortcuts/KeyboardShortcutManager.m
 export const resizeImageToSelectionKeyboardShortcut = 'jsdraw.toolbar.SelectionTool.resizeImageToSelection';
 KeyboardShortcutManager.registerDefaultKeyboardShortcut(resizeImageToSelectionKeyboardShortcut, ['ctrlOrMeta+r'], 'Resize image to selection');
 // Pen tool
-export const selectStrokeTypeKeyboardShortcutIds = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(id => `jsdraw.toolbar.PenTool.select-pen-${id}`);
+export const selectStrokeTypeKeyboardShortcutIds = [1, 2, 3, 4, 5, 6, 7, 8, 9].map((id) => `jsdraw.toolbar.PenTool.select-pen-${id}`);
 for (let i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
     const id = selectStrokeTypeKeyboardShortcutIds[i];
-    KeyboardShortcutManager.registerDefaultKeyboardShortcut(id, [`CtrlOrMeta+Digit${(i + 1)}`], 'Select pen style ' + (i + 1));
+    KeyboardShortcutManager.registerDefaultKeyboardShortcut(id, [`CtrlOrMeta+Digit${i + 1}`], 'Select pen style ' + (i + 1));
 }
 // Save
 export const saveKeyboardShortcut = 'jsdraw.toolbar.SaveActionWidget.save';

package/dist/mjs/toolbar/widgets/layout/DropdownLayoutManager.mjs

@@ -44,7 +44,7 @@ class Dropdown {
         }
         // Shift the dropdown if it's off the screen, but only if doing so moves it on to the screen
         // (prevents dropdowns from going almost completely offscreen on small screens).
-        if (dropdownBBox.bottom > screenHeight && (dropdownBBox.top - dropdownBBox.height > 0)) {
+        if (dropdownBBox.bottom > screenHeight && dropdownBBox.top - dropdownBBox.height > 0) {
             const targetElem = this.parent.target;
             translateY = `calc(-${targetElem.clientHeight}px - 100%)`;
         }
@@ -131,7 +131,7 @@ export default class DropdownLayoutManager {
                 return;
             announceForAccessibility(this.localization.dropdownShown(dropdown.parent.getTitle()));
             // Share the event with other connected notifiers
-            this.connectedNotifiers.forEach(notifier => {
+            this.connectedNotifiers.forEach((notifier) => {
                 notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
                     kind: EditorEventType.ToolbarDropdownShown,
                     fromToplevelDropdown,
@@ -168,7 +168,7 @@ export default class DropdownLayoutManager {
     refreshListeners() {
         const clearListeners = () => {
             // Remove all listeners & resources that won't be garbage collected.
-            this.listeners.forEach(l => l.remove());
+            this.listeners.forEach((l) => l.remove());
             this.listeners = [];
         };
         if (this.dropdowns.size === 0) {
@@ -176,11 +176,11 @@ export default class DropdownLayoutManager {
         }
         else if (this.listeners.length !== this.connectedNotifiers.length) {
             clearListeners();
-            this.listeners = this.connectedNotifiers.map(notifier => {
+            this.listeners = this.connectedNotifiers.map((notifier) => {
                 return notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
-                    if (evt.kind !== EditorEventType.ToolbarDropdownShown
+                    if (evt.kind !== EditorEventType.ToolbarDropdownShown ||
                         // Don't forward to ourselves events that we originally triggered.
-                        || evt.layoutManager === this) {
+                        evt.layoutManager === this) {
                         return;
                     }
                     this.notifier.dispatch(DropdownEventType.DropdownShown, {

package/dist/mjs/tools/BaseTool.d.ts

@@ -0,0 +1,61 @@
+import { EditorNotifier } from '../types';
+import { WheelEvt, PointerEvt, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent, InputEvt, GestureCancelEvt, PointerDownEvt, PointerMoveEvt, PointerUpEvt, ContextMenuEvt } from '../inputEvents';
+import ToolEnabledGroup from './ToolEnabledGroup';
+import InputMapper, { InputEventListener } from './InputFilter/InputMapper';
+import { ReactiveValue } from '../util/ReactiveValue';
+export default abstract class BaseTool implements InputEventListener {
+    #private;
+    private notifier;
+    readonly description: string;
+    protected constructor(notifier: EditorNotifier, description: string);
+    /** Override this to allow this tool to be enabled in a read-only editor */
+    canReceiveInputInReadOnlyEditor(): boolean;
+    setInputMapper(mapper: InputMapper | null): void;
+    getInputMapper(): InputMapper | null;
+    private dispatchEventToCallback;
+    onEvent(event: InputEvt): boolean;
+    /**
+     * Returns true iff the tool handled the event and thus should receive additional
+     * events.
+     */
+    onPointerDown(_event: PointerDownEvt): boolean;
+    onPointerMove(_event: PointerMoveEvt): void;
+    /**
+     * Returns true iff there are additional pointers down and the tool should
+     * remain active to handle the additional events.
+     *
+     * For most purposes, this should return `false` or nothing.
+     */
+    onPointerUp(_event: PointerUpEvt): boolean | void;
+    onGestureCancel(_event: GestureCancelEvt): void;
+    onWheel(_event: WheelEvt): boolean;
+    onCopy(_event: CopyEvent): boolean;
+    onPaste(_event: PasteEvent): boolean;
+    onKeyPress(_event: KeyPressEvent): boolean;
+    onKeyUp(_event: KeyUpEvent): boolean;
+    onContextMenu(_event: ContextMenuEvt): boolean;
+    /**
+     * Return true if, while this tool is active, `_event` can be delivered to
+     * another tool that is higher priority than this.
+     * @internal May be renamed
+     */
+    eventCanBeDeliveredToNonActiveTool(_event: PointerEvt): boolean;
+    setEnabled(enabled: boolean): void;
+    isEnabled(): boolean;
+    /**
+     * Returns a {@link ReactiveValue} that updates based on whether this tool is
+     * enabled.
+     *
+     * @example
+     * ```ts
+     * const tool = new SomeTool();
+     *
+     * // Watch for changes in enabled status
+     * tool.enabledValue().onUpdate(enabled => doSomething(enabled));
+     * ```
+     */
+    enabledValue(): ReactiveValue<boolean>;
+    setToolGroup(group: ToolEnabledGroup): void;
+    getToolGroup(): ToolEnabledGroup | null;
+    onDestroy(): void;
+}