js-draw 1.21.3 → 1.22.0

package/dist/mjs/toolbar/EdgeToolbar.mjs

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

package/dist/mjs/toolbar/IconProvider.mjs

@@ -566,7 +566,7 @@ class IconProvider {
             icon.appendChild(defs);
             const background = document.createElementNS(svgNamespace, 'g');
             icon.appendChild(background);
-            renderer = new class extends SVGRenderer {
+            renderer = new (class extends SVGRenderer {
                 constructor() {
                     super(icon, viewport);
                 }
@@ -588,7 +588,7 @@ class IconProvider {
                     }
                     return addedPath;
                 }
-            }();
+            })();
         }
         else {
             renderer = new SVGRenderer(icon, viewport);
@@ -855,7 +855,9 @@ class IconProvider {
         return penStyle.factory === makePolylineBuilder;
     }
     /** Must be overridden by icon packs that need attribution. */
-    licenseInfo() { return null; }
+    licenseInfo() {
+        return null;
+    }
 }
 _IconProvider_instances = new WeakSet(), _IconProvider_makeXIcon = function _IconProvider_makeXIcon() {
     const strokeWidth = '6px';

package/dist/mjs/toolbar/localization.mjs

@@ -62,7 +62,7 @@ export const defaultToolbarLocalization = {
     fileInput__andNMoreFiles: (n) => `(...${n} more)`,
     // Help text
     penDropdown__baseHelpText: 'This tool draws shapes or freehand lines.',
-    penDropdown__colorHelpText: 'Changes the pen\'s color',
+    penDropdown__colorHelpText: "Changes the pen's color",
     penDropdown__thicknessHelpText: 'Changes the thickness of strokes drawn by the pen.',
     penDropdown__penTypeHelpText: 'Changes the pen style.\n\nEither a “pen” style or “shape” can be chosen. Choosing a “pen” style draws freehand lines. Choosing a “shape” draws shapes.',
     penDropdown__autocorrectHelpText: 'Converts approximate freehand lines and rectangles to perfect ones.\n\nThe pen must be held stationary at the end of a stroke to trigger a correction.',
@@ -78,11 +78,11 @@ export const defaultToolbarLocalization = {
     eraserDropdown__thicknessHelpText: 'Changes the size of the eraser.',
     eraserDropdown__fullStrokeEraserHelpText: 'When in full-stroke mode, entire shapes are erased.\n\nWhen not in full-stroke mode, shapes can be partially erased.',
     selectionDropdown__baseHelpText: 'Selects content and manipulates the selection',
-    selectionDropdown__resizeToHelpText: 'Crops the drawing to the size of what\'s currently selected.\n\nIf auto-resize is enabled, it will be disabled.',
+    selectionDropdown__resizeToHelpText: "Crops the drawing to the size of what's currently selected.\n\nIf auto-resize is enabled, it will be disabled.",
     selectionDropdown__deleteHelpText: 'Erases selected items.',
     selectionDropdown__duplicateHelpText: 'Makes a copy of selected items.',
     selectionDropdown__changeColorHelpText: 'Changes the color of selected items.',
-    pageDropdown__baseHelpText: 'Controls the drawing canvas\' background color, pattern, and size.',
+    pageDropdown__baseHelpText: "Controls the drawing canvas' background color, pattern, and size.",
     pageDropdown__backgroundColorHelpText: 'Changes the background color of the drawing canvas.',
     pageDropdown__gridCheckboxHelpText: 'Enables/disables a background grid pattern.',
     pageDropdown__autoresizeCheckboxHelpText: 'When checked, the page grows to fit the drawing.\n\nWhen unchecked, the page is visible and its size can be set manually.',

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

@@ -41,7 +41,7 @@ const createHelpPage = (helpItems, onItemClick, onBackgroundClick, context) => {
     let clonedElementContainers = [];
     // Clicking on the background of the help area should send an event (e.g. to allow the
     // help container to be closed).
-    container.addEventListener('click', event => {
+    container.addEventListener('click', (event) => {
         // If clicking directly on the container (and not on a child)
         if (event.target === container) {
             onBackgroundClick();
@@ -53,7 +53,7 @@ const createHelpPage = (helpItems, onItemClick, onBackgroundClick, context) => {
         if (!currentItem) {
             return Rect2.empty;
         }
-        const itemBoundingBoxes = currentItem.targetElements.map(element => Rect2.of(element.getBoundingClientRect()));
+        const itemBoundingBoxes = currentItem.targetElements.map((element) => Rect2.of(element.getBoundingClientRect()));
         return Rect2.union(...itemBoundingBoxes);
     };
     // Updates each cloned element's click listener and CSS classes based on whether
@@ -218,7 +218,9 @@ class HelpDisplay {
             const label = this.context.localization.close;
             closeButton.setAttribute('aria-label', label);
             closeButton.setAttribute('title', label);
-            closeButton.onclick = () => { closeOverlay(); };
+            closeButton.onclick = () => {
+                closeOverlay();
+            };
             return closeButton;
         };
         // Wraps the label and clickable help elements
@@ -226,7 +228,7 @@ class HelpDisplay {
             const currentPage = MutableReactiveValue.fromInitialValue(0);
             const content = document.createElement('div');
             content.classList.add('navigation-content');
-            const helpPage = createHelpPage(__classPrivateFieldGet(this, _HelpDisplay_helpData, "f"), newPageIndex => currentPage.set(newPageIndex), onBackgroundClick, this.context);
+            const helpPage = createHelpPage(__classPrivateFieldGet(this, _HelpDisplay_helpData, "f"), (newPageIndex) => currentPage.set(newPageIndex), onBackgroundClick, this.context);
             helpPage.addToParent(content);
             const showPage = (pageIndex) => {
                 if (pageIndex >= __classPrivateFieldGet(this, _HelpDisplay_helpData, "f").length || pageIndex < 0) {
@@ -375,12 +377,12 @@ class HelpDisplay {
         // Close the overlay when clicking on the background (*directly* on any of the
         // elements in closeOverlayTriggers).
         const closeOverlayTriggers = [navigation.content, navigationButtons, overlay];
-        overlay.onclick = event => {
+        overlay.onclick = (event) => {
             if (closeOverlayTriggers.includes(event.target)) {
                 onBackgroundClick();
             }
         };
-        overlay.onkeyup = event => {
+        overlay.onkeyup = (event) => {
             if (event.code === 'Escape') {
                 closeOverlay();
                 event.preventDefault();

package/dist/mjs/toolbar/utils/makeDraggable.mjs

@@ -1,9 +1,6 @@
 import { Vec2 } from '@js-draw/math';
 const makeDraggable = (dragElement, options) => {
-    const dragElements = [
-        ...options.draggableChildElements,
-        dragElement,
-    ];
+    const dragElements = [...options.draggableChildElements, dragElement];
     let lastX = 0;
     let lastY = 0;
     let startX = 0;
@@ -49,7 +46,7 @@ const makeDraggable = (dragElement, options) => {
         return Math.hypot(lastX - startX, lastY - startY) < clickThreshold;
     };
     let startedDragging = false;
-    addEventListener('pointerdown', event => {
+    addEventListener('pointerdown', (event) => {
         if (event.defaultPrevented || !isDraggableElement(event.target)) {
             return;
         }
@@ -80,7 +77,7 @@ const makeDraggable = (dragElement, options) => {
         pointerDown = false;
         startedDragging = false;
     };
-    addEventListener('pointermove', event => {
+    addEventListener('pointermove', (event) => {
         if (!event.isPrimary || !pointerDown) {
             return undefined;
         }
@@ -108,7 +105,7 @@ const makeDraggable = (dragElement, options) => {
             startedDragging = true;
         }
     });
-    addEventListener('pointerleave', event => {
+    addEventListener('pointerleave', (event) => {
         // Capture the pointer if it exits the container while dragging.
         if (capturedPointerId === null && pointerDown && event.isPrimary) {
             dragElement.setPointerCapture(event.pointerId);

package/dist/mjs/toolbar/widgets/BaseToolWidget.mjs

@@ -2,13 +2,14 @@ import  BaseWidget  from './BaseWidget.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 const isToolWidgetFocused = () => {
     const currentFocus = [...document.querySelectorAll('*:focus')];
-    return currentFocus.length && currentFocus.some(elem => elem.classList.contains(`${toolbarCSSPrefix}button`));
+    return (currentFocus.length &&
+        currentFocus.some((elem) => elem.classList.contains(`${toolbarCSSPrefix}button`)));
 };
 export default class BaseToolWidget extends BaseWidget {
     constructor(editor, targetTool, id, localizationTable) {
         super(editor, id, localizationTable);
         this.targetTool = targetTool;
-        this.targetTool.enabledValue().onUpdateAndNow(enabled => {
+        this.targetTool.enabledValue().onUpdateAndNow((enabled) => {
             if (enabled) {
                 this.setSelected(true);
                 // Transfer focus to the current button, only if another toolbar button is

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);