js-draw 0.24.1 → 0.25.1

package/dist/mjs/testing/sendTouchEvent.mjs

@@ -9,6 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import  Pointer, { PointerDevice }  from '../Pointer.mjs';
 import  { InputEvtType }  from '../types.mjs';
+import  getUniquePointerId  from './getUniquePointerId.mjs';
 /**
  * Dispatch a touch event to the currently selected tool. Intended for unit tests.
  *
@@ -47,17 +48,9 @@ import  { InputEvtType }  from '../types.mjs';
  */
 var sendTouchEvent = function (editor, eventType, screenPos, allOtherPointers) {
     var canvasPos = editor.viewport.screenToCanvas(screenPos);
-    var ptrId = 0;
-    var maxPtrId = 0;
     // Get a unique ID for the main pointer
     // (try to use id=0, but don't use it if it's already in use).
-    for (var _i = 0, _a = allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []; _i < _a.length; _i++) {
-        var pointer = _a[_i];
-        maxPtrId = Math.max(pointer.id, maxPtrId);
-        if (pointer.id === ptrId) {
-            ptrId = maxPtrId + 1;
-        }
-    }
+    var ptrId = getUniquePointerId(allOtherPointers !== null && allOtherPointers !== void 0 ? allOtherPointers : []);
     var mainPointer = Pointer.ofCanvasPoint(canvasPos, eventType !== InputEvtType.PointerUpEvt, editor.viewport, ptrId, PointerDevice.Touch);
     editor.toolController.dispatchInputEvent({
         kind: eventType,

package/dist/mjs/toolbar/IconProvider.d.ts

@@ -49,7 +49,7 @@ export default class IconProvider {
     makeInsertImageIcon(): IconType;
     makeTextIcon(textStyle: TextRenderingStyle): IconType;
     makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
-    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
+    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory, includeTransparencyGrid?: boolean): IconType;
     makePipetteIcon(color?: Color4): IconType;
     makeFormatSelectionIcon(): IconType;
     makeResizeViewportIcon(): IconType;

package/dist/mjs/toolbar/IconProvider.mjs

@@ -1,3 +1,18 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 import  Color4  from '../Color4.mjs';
 import  { Vec2 }  from '../math/Vec2.mjs';
 import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
@@ -5,8 +20,13 @@ import  Viewport  from '../Viewport.mjs';
 var svgNamespace = 'http://www.w3.org/2000/svg';
 var iconColorFill = "\n\tstyle='fill: var(--icon-color);'\n";
 var iconColorStrokeFill = "\n\tstyle='fill: var(--icon-color); stroke: var(--icon-color);'\n";
-var checkerboardPatternDef = "\n\t<pattern\n\t\tid='checkerboard'\n\t\tviewBox='0,0,10,10'\n\t\twidth='20%'\n\t\theight='20%'\n\t\tpatternUnits='userSpaceOnUse'\n\t>\n\t\t<rect x=0 y=0 width=10 height=10 fill='white'/>\n\t\t<rect x=0 y=0 width=5 height=5 fill='gray'/>\n\t\t<rect x=5 y=5 width=5 height=5 fill='gray'/>\n\t</pattern>\n";
-var checkerboardPatternRef = 'url(#checkerboard)';
+var checkerboardIdCounter = 0;
+var makeCheckerboardPattern = function () {
+    var id = "checkerboard-".concat(checkerboardIdCounter++);
+    var patternDef = "\n\t\t<pattern\n\t\t\tid='".concat(id, "'\n\t\t\tviewBox='0,0,10,10'\n\t\t\twidth='20%'\n\t\t\theight='20%'\n\t\t\tpatternUnits='userSpaceOnUse'\n\t\t>\n\t\t\t<rect x=0 y=0 width=10 height=10 fill='white'/>\n\t\t\t<rect x=0 y=0 width=5 height=5 fill='gray'/>\n\t\t\t<rect x=5 y=5 width=5 height=5 fill='gray'/>\n\t\t</pattern>\n\t");
+    var patternRef = "url(#".concat(id, ")");
+    return { patternDef: patternDef, patternRef: patternRef };
+};
 /**
  * Provides icons that can be used in the toolbar, etc.
  * Extend this class and override methods to customize icons.
@@ -176,13 +196,17 @@ var IconProvider = /** @class */ (function () {
         var penTipPath = "M 25,35 ".concat(10 - tipThickness / 4, ",").concat(70 - tipThickness / 2, " 20,75 25,85 60,75 70,55 45,25 Z");
         var pencilTipColor = Color4.fromHex('#f4d7d7');
         var tipColor = pencilTipColor.mix(Color4.fromString(color), tipThickness / 40 - 0.1).toHexString();
-        var ink = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPatternRef, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPatternRef, "\"\n\t\t\t\td=\"").concat(inkTrailPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(inkTrailPath, "\"\n\t\t\t/>\n\t\t");
-        var penTip = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPatternRef, "\"\n\t\t\t\td=\"").concat(penTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(tipColor, "\"\n\t\t\t\tstroke=\"").concat(color, "\"\n\t\t\t\td=\"").concat(penTipPath, "\"\n\t\t\t/>\n\t\t");
-        var grip = "\n\t\t\t<path\n\t\t\t\t".concat(iconColorStrokeFill, "\n\t\t\t\td=\"").concat(gripMainPath, "\"\n\t\t\t/>\n\n\t\t\t<!-- shadows -->\n\t\t\t<path\n\t\t\t\tfill=\"rgba(150, 150, 150, 0.3)\"\n\t\t\t\td=\"").concat(gripShadow1Path, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"rgba(100, 100, 100, 0.2)\"\n\t\t\t\td=\"").concat(gripShadow2Path, "\"\n\t\t\t/>\n\n\t\t\t<!-- color bubble -->\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPatternRef, "\"\n\t\t\t\td=\"").concat(colorBubblePath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(colorBubblePath, "\"\n\t\t\t/>\n\t\t");
-        icon.innerHTML = "\n\t\t<defs>\n\t\t\t".concat(checkerboardPatternDef, "\n\t\t</defs>\n\t\t<g>\n\t\t\t").concat(ink, "\n\t\t\t").concat(penTip, "\n\t\t\t").concat(grip, "\n\t\t</g>\n\t\t");
+        var checkerboardPattern = makeCheckerboardPattern();
+        var ink = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(inkTrailPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(inkTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(inkTrailPath, "\"\n\t\t\t/>\n\t\t");
+        var penTip = "\n\t\t\t<path\n\t\t\t\tfill=\"".concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(penTipPath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(tipColor, "\"\n\t\t\t\tstroke=\"").concat(color, "\"\n\t\t\t\td=\"").concat(penTipPath, "\"\n\t\t\t/>\n\t\t");
+        var grip = "\n\t\t\t<path\n\t\t\t\t".concat(iconColorStrokeFill, "\n\t\t\t\td=\"").concat(gripMainPath, "\"\n\t\t\t/>\n\n\t\t\t<!-- shadows -->\n\t\t\t<path\n\t\t\t\tfill=\"rgba(150, 150, 150, 0.3)\"\n\t\t\t\td=\"").concat(gripShadow1Path, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"rgba(100, 100, 100, 0.2)\"\n\t\t\t\td=\"").concat(gripShadow2Path, "\"\n\t\t\t/>\n\n\t\t\t<!-- color bubble -->\n\t\t\t<path\n\t\t\t\tfill=\"").concat(checkerboardPattern.patternRef, "\"\n\t\t\t\td=\"").concat(colorBubblePath, "\"\n\t\t\t/>\n\t\t\t<path\n\t\t\t\tfill=\"").concat(color, "\"\n\t\t\t\td=\"").concat(colorBubblePath, "\"\n\t\t\t/>\n\t\t");
+        icon.innerHTML = "\n\t\t<defs>\n\t\t\t".concat(checkerboardPattern.patternDef, "\n\t\t</defs>\n\t\t<g>\n\t\t\t").concat(ink, "\n\t\t\t").concat(penTip, "\n\t\t\t").concat(grip, "\n\t\t</g>\n\t\t");
         return icon;
     };
-    IconProvider.prototype.makeIconFromFactory = function (pen, factory) {
+    IconProvider.prototype.makeIconFromFactory = function (pen, factory, 
+    // If true, attempts to guess the location of a transparency grid
+    includeTransparencyGrid) {
+        if (includeTransparencyGrid === void 0) { includeTransparencyGrid = false; }
         // Increase the thickness we use to generate the icon less with larger actual thicknesses.
         // We want the icon to be recognisable with a large range of thicknesses.
         var thickness = Math.sqrt(pen.getThickness()) * 3;
@@ -205,8 +229,49 @@ var IconProvider = /** @class */ (function () {
         var icon = document.createElementNS(svgNamespace, 'svg');
         icon.setAttribute('viewBox', '0 0 100 100');
         viewport.updateScreenSize(Vec2.of(100, 100));
-        var renderer = new SVGRenderer(icon, viewport);
+        var renderer;
+        if (includeTransparencyGrid) {
+            var checkerboardPattern_1 = makeCheckerboardPattern();
+            var defs = document.createElementNS(svgNamespace, 'defs');
+            defs.innerHTML = checkerboardPattern_1.patternDef;
+            icon.appendChild(defs);
+            var background_1 = document.createElementNS(svgNamespace, 'g');
+            icon.appendChild(background_1);
+            renderer = new /** @class */ (function (_super) {
+                __extends(class_1, _super);
+                function class_1() {
+                    return _super.call(this, icon, viewport) || this;
+                }
+                class_1.prototype.addPathToSVG = function () {
+                    var addedPath = _super.prototype.addPathToSVG.call(this);
+                    if (addedPath) {
+                        // Add a copy of the path on the background
+                        var copy = addedPath.cloneNode(true);
+                        copy.style.zIndex = '-1';
+                        // Make the
+                        if (copy.hasAttribute('fill')
+                            && copy.getAttribute('fill') !== 'transparent'
+                            && copy.getAttribute('fill') !== 'none') {
+                            copy.setAttribute('fill', checkerboardPattern_1.patternRef);
+                        }
+                        if (copy.hasAttribute('stroke')) {
+                            copy.setAttribute('stroke', checkerboardPattern_1.patternRef);
+                        }
+                        background_1.appendChild(copy);
+                    }
+                    return addedPath;
+                };
+                return class_1;
+            }(SVGRenderer))();
+        }
+        else {
+            renderer = new SVGRenderer(icon, viewport);
+        }
         builder.preview(renderer);
+        // If only a single path was rendered, try to give it a checkerboard background to
+        // emphasize transparency. TODO: This is very fragile
+        var bbox = builder.getBBox();
+        icon.setAttribute('viewBox', "".concat(bbox.x, " ").concat(bbox.y, " ").concat(bbox.w, " ").concat(bbox.h));
         return icon;
     };
     IconProvider.prototype.makePipetteIcon = function (color) {
@@ -215,8 +280,9 @@ var IconProvider = /** @class */ (function () {
         pipette.setAttribute('d', "\n\t\t\tM 47,6\n\t\t\tC 35,5 25,15 35,30\n\t\t\tc -9.2,1.3 -15,0 -15,3\n\t\t\t\t0,2 5,5 15,7\n\t\t\tV 81\n\t\t\tL 40,90\n\t\t\th 6\n\t\t\tL 40,80\n\t\t\tV 40\n\t\t\th 15\n\t\t\tv 40\n\t\t\tl -6,10\n\t\t\th 6\n\t\t\tl 5,-9.2\n\t\t\tV 40\n\t\t\tC 70,38 75,35 75,33\n\t\t\t\t75,30 69.2,31.2 60,30\n\t\t\t\t65,15 65,5      47,6\n\t\t\tZ\n\t\t");
         pipette.style.fill = 'var(--icon-color)';
         if (color) {
+            var checkerboardPattern = makeCheckerboardPattern();
             var defs = document.createElementNS(svgNamespace, 'defs');
-            defs.innerHTML = checkerboardPatternDef;
+            defs.innerHTML = checkerboardPattern.patternDef;
             icon.appendChild(defs);
             var fluidBackground = document.createElementNS(svgNamespace, 'path');
             var fluid = document.createElementNS(svgNamespace, 'path');
@@ -224,7 +290,7 @@ var IconProvider = /** @class */ (function () {
             fluid.setAttribute('d', fluidPathData);
             fluidBackground.setAttribute('d', fluidPathData);
             fluid.style.fill = color.toHexString();
-            fluidBackground.style.fill = checkerboardPatternRef;
+            fluidBackground.style.fill = checkerboardPattern.patternRef;
             icon.appendChild(fluidBackground);
             icon.appendChild(fluid);
         }

package/dist/mjs/toolbar/localization.d.ts

@@ -13,8 +13,8 @@ export interface ToolbarLocalization {
     chooseFile: string;
     cancel: string;
     submit: string;
-    freehandPen: string;
-    pressureSensitiveFreehandPen: string;
+    roundedTipPen: string;
+    flatTipPen: string;
     selectPenType: string;
     colorLabel: string;
     pen: string;

package/dist/mjs/toolbar/localization.mjs

@@ -32,8 +32,8 @@ export var defaultToolbarLocalization = {
     useGridOption: 'Grid: ',
     toggleOverflow: 'More',
     touchPanning: 'Touchscreen panning',
-    freehandPen: 'Freehand',
-    pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
+    roundedTipPen: 'Rounded Tip',
+    flatTipPen: 'Flat Tip',
     arrowPen: 'Arrow',
     linePen: 'Line',
     outlinedRectanglePen: 'Outlined rectangle',

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

@@ -1,10 +1,12 @@
 import Editor from '../../Editor';
 import BaseTool from '../../tools/BaseTool';
+import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default abstract class BaseToolWidget extends BaseWidget {
     protected targetTool: BaseTool;
     constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
     protected handleClick(): void;
+    protected onKeyPress(event: KeyPressEvent): boolean;
     addTo(parent: HTMLElement): HTMLElement;
 }

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

@@ -52,6 +52,13 @@ var BaseToolWidget = /** @class */ (function (_super) {
             this.targetTool.setEnabled(!this.targetTool.isEnabled());
         }
     };
+    BaseToolWidget.prototype.onKeyPress = function (event) {
+        if (this.isSelected() && event.key === ' ' && this.hasDropdown) {
+            this.handleClick();
+            return true;
+        }
+        return false;
+    };
     BaseToolWidget.prototype.addTo = function (parent) {
         var result = _super.prototype.addTo.call(this, parent);
         this.setSelected(this.targetTool.isEnabled());

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

@@ -14,12 +14,14 @@ export default class PenToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
     protected penTypes: PenTypeRecord[];
+    private static idCounter;
     constructor(editor: Editor, tool: Pen, localization?: ToolbarLocalization);
     protected getTitle(): string;
     private getCurrentPenTypeIdx;
     private getCurrentPenType;
+    private createIconForRecord;
     protected createIcon(): Element;
-    private static idCounter;
+    private createPenTypeSelector;
     protected fillDropdown(dropdown: HTMLElement): boolean;
     protected onKeyPress(event: KeyPressEvent): boolean;
     serializeState(): SavedToolbuttonState;

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

@@ -45,12 +45,12 @@ var PenToolWidget = /** @class */ (function (_super) {
         // Default pen types
         _this.penTypes = [
             {
-                name: _this.localizationTable.pressureSensitiveFreehandPen,
+                name: _this.localizationTable.flatTipPen,
                 id: 'pressure-sensitive-pen',
                 factory: makePressureSensitiveFreehandLineBuilder,
             },
             {
-                name: _this.localizationTable.freehandPen,
+                name: _this.localizationTable.roundedTipPen,
                 id: 'freehand-pen',
                 factory: makeFreehandLineBuilder,
             },
@@ -117,38 +117,140 @@ var PenToolWidget = /** @class */ (function (_super) {
         }
         return null;
     };
-    PenToolWidget.prototype.createIcon = function () {
-        var strokeFactory = this.tool.getStrokeFactory();
-        if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
+    PenToolWidget.prototype.createIconForRecord = function (record) {
+        var color = this.tool.getColor();
+        var strokeFactory = record === null || record === void 0 ? void 0 : record.factory;
+        if (!strokeFactory || strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
             // Use a square-root scale to prevent the pen's tip from overflowing.
             var scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
-            var color = this.tool.getColor();
             var roundedTip = strokeFactory === makeFreehandLineBuilder;
             return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
         }
         else {
-            var strokeFactory_1 = this.tool.getStrokeFactory();
-            return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory_1);
+            var hasTransparency = color.a < 1;
+            return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory, hasTransparency);
         }
     };
+    PenToolWidget.prototype.createIcon = function () {
+        return this.createIconForRecord(this.getCurrentPenType());
+    };
+    // Creates a widget that allows selecting different pen types
+    PenToolWidget.prototype.createPenTypeSelector = function () {
+        var _this = this;
+        var outerContainer = document.createElement('div');
+        outerContainer.classList.add("".concat(toolbarCSSPrefix, "pen-type-selector"));
+        var scrollingContainer = document.createElement('div');
+        scrollingContainer.setAttribute('role', 'menu');
+        scrollingContainer.id = "".concat(toolbarCSSPrefix, "-pen-type-selector-id-").concat(PenToolWidget.idCounter++);
+        scrollingContainer.onwheel = function (event) {
+            var hasScroll = scrollingContainer.clientWidth !== scrollingContainer.scrollWidth
+                && event.deltaX !== 0;
+            var eventScrollsPastLeft = scrollingContainer.scrollLeft + event.deltaX <= 0;
+            var scrollRight = scrollingContainer.scrollLeft + scrollingContainer.clientWidth;
+            var eventScrollsPastRight = scrollRight + event.deltaX > scrollingContainer.scrollWidth;
+            // Stop the editor from receiving the event if it will scroll the pen type selector
+            // instead.
+            if (hasScroll && !eventScrollsPastLeft && !eventScrollsPastRight) {
+                event.stopPropagation();
+            }
+        };
+        var label = document.createElement('label');
+        label.innerText = this.localizationTable.selectPenType;
+        label.htmlFor = scrollingContainer.id;
+        outerContainer.appendChild(label);
+        // All buttons in a radiogroup need the same name attribute.
+        var radiogroupName = "".concat(toolbarCSSPrefix, "-pen-type-selector-").concat(PenToolWidget.idCounter++);
+        var createTypeSelectorButton = function (record) {
+            var buttonContainer = document.createElement('div');
+            buttonContainer.classList.add('pen-type-button');
+            var button = document.createElement('input');
+            button.type = 'radio';
+            button.name = radiogroupName;
+            button.id = "".concat(toolbarCSSPrefix, "-pen-type-button-").concat(PenToolWidget.idCounter++);
+            var labelContainer = document.createElement('label');
+            var rebuildLabel = function () {
+                var labelText = document.createElement('span');
+                var icon = _this.createIconForRecord(record);
+                icon.classList.add('icon');
+                // The title of the record
+                labelText.innerText = record.name;
+                labelContainer.htmlFor = button.id;
+                labelContainer.replaceChildren(icon, labelText);
+            };
+            rebuildLabel();
+            var updateButtonCSS = function () {
+                if (button.checked) {
+                    buttonContainer.classList.add('checked');
+                }
+                else {
+                    buttonContainer.classList.remove('checked');
+                }
+            };
+            button.oninput = function () {
+                // Setting the stroke factory fires an event that causes the value
+                // of this button to be set.
+                if (button.checked) {
+                    _this.tool.setStrokeFactory(record.factory);
+                }
+                updateButtonCSS();
+            };
+            buttonContainer.replaceChildren(button, labelContainer);
+            scrollingContainer.appendChild(buttonContainer);
+            // Set whether the button is checked, assuming the stroke factory associated
+            // with the button was set elsewhere.
+            var setChecked = function (checked) {
+                button.checked = checked;
+                updateButtonCSS();
+                if (checked) {
+                    button.scrollIntoView();
+                }
+            };
+            setChecked(false);
+            // Updates the factory's icon based on the current style of the tool.
+            var updateIcon = function () {
+                rebuildLabel();
+            };
+            return { setChecked: setChecked, updateIcon: updateIcon };
+        };
+        var buttons = [];
+        for (var _i = 0, _a = this.penTypes; _i < _a.length; _i++) {
+            var penType = _a[_i];
+            buttons.push(createTypeSelectorButton(penType));
+        }
+        // invariant: buttons.length = this.penTypes.length
+        outerContainer.appendChild(scrollingContainer);
+        return {
+            setValue: function (penTypeIndex) {
+                // Select the value specified
+                if (penTypeIndex < 0 || penTypeIndex >= _this.penTypes.length) {
+                    console.error('Invalid pen type index', penTypeIndex);
+                    return;
+                }
+                for (var i = 0; i < buttons.length; i++) {
+                    buttons[i].setChecked(i === penTypeIndex);
+                }
+            },
+            updateIcons: function () {
+                buttons.forEach(function (button) { return button.updateIcon(); });
+            },
+            addTo: function (parent) {
+                parent.appendChild(outerContainer);
+            },
+        };
+    };
     PenToolWidget.prototype.fillDropdown = function (dropdown) {
         var _this = this;
         var container = document.createElement('div');
         container.classList.add("".concat(toolbarCSSPrefix, "spacedList"));
         var thicknessRow = document.createElement('div');
-        var objectTypeRow = document.createElement('div');
         // Thickness: Value of the input is squared to allow for finer control/larger values.
         var thicknessLabel = document.createElement('label');
         var thicknessInput = document.createElement('input');
-        var objectSelectLabel = document.createElement('label');
-        var objectTypeSelect = document.createElement('select');
+        var penTypeSelect = this.createPenTypeSelector();
         // Give inputs IDs so we can label them with a <label for=...>Label text</label>
         thicknessInput.id = "".concat(toolbarCSSPrefix, "penThicknessInput").concat(PenToolWidget.idCounter++);
-        objectTypeSelect.id = "".concat(toolbarCSSPrefix, "penBuilderSelect").concat(PenToolWidget.idCounter++);
         thicknessLabel.innerText = this.localizationTable.thicknessLabel;
         thicknessLabel.setAttribute('for', thicknessInput.id);
-        objectSelectLabel.innerText = this.localizationTable.selectPenType;
-        objectSelectLabel.setAttribute('for', objectTypeSelect.id);
         // Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
         var inverseThicknessInputFn = function (t) { return Math.log10(t); };
         var thicknessInputFn = function (t) { return Math.pow(10, t); };
@@ -161,16 +263,6 @@ var PenToolWidget = /** @class */ (function (_super) {
         };
         thicknessRow.appendChild(thicknessLabel);
         thicknessRow.appendChild(thicknessInput);
-        objectTypeSelect.oninput = function () {
-            var penTypeIdx = parseInt(objectTypeSelect.value);
-            if (penTypeIdx < 0 || penTypeIdx >= _this.penTypes.length) {
-                console.error('Invalid pen type index', penTypeIdx);
-                return;
-            }
-            _this.tool.setStrokeFactory(_this.penTypes[penTypeIdx].factory);
-        };
-        objectTypeRow.appendChild(objectSelectLabel);
-        objectTypeRow.appendChild(objectTypeSelect);
         var colorRow = document.createElement('div');
         var colorLabel = document.createElement('label');
         var _a = makeColorInput(this.editor, function (color) {
@@ -184,26 +276,13 @@ var PenToolWidget = /** @class */ (function (_super) {
         this.updateInputs = function () {
             setColorInputValue(_this.tool.getColor());
             thicknessInput.value = inverseThicknessInputFn(_this.tool.getThickness()).toString();
-            // Update the list of stroke factories
-            objectTypeSelect.replaceChildren();
-            for (var i = 0; i < _this.penTypes.length; i++) {
-                var penType = _this.penTypes[i];
-                var option = document.createElement('option');
-                option.value = i.toString();
-                option.innerText = penType.name;
-                objectTypeSelect.appendChild(option);
-            }
+            penTypeSelect.updateIcons();
             // Update the selected stroke factory.
-            var strokeFactoryIdx = _this.getCurrentPenTypeIdx();
-            if (strokeFactoryIdx === -1) {
-                objectTypeSelect.value = '';
-            }
-            else {
-                objectTypeSelect.value = strokeFactoryIdx.toString();
-            }
+            penTypeSelect.setValue(_this.getCurrentPenTypeIdx());
         };
         this.updateInputs();
-        container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
+        container.replaceChildren(colorRow, thicknessRow);
+        penTypeSelect.addTo(container);
         dropdown.replaceChildren(container);
         return true;
     };
@@ -221,6 +300,10 @@ var PenToolWidget = /** @class */ (function (_super) {
                 }
             }
         }
+        // Run any default actions registered by the parent class.
+        if (_super.prototype.onKeyPress.call(this, event)) {
+            return true;
+        }
         return false;
     };
     PenToolWidget.prototype.serializeState = function () {
@@ -256,6 +339,7 @@ var PenToolWidget = /** @class */ (function (_super) {
             }
         }
     };
+    // A counter variable that ensures different HTML elements are given unique names/ids.
     PenToolWidget.idCounter = 0;
     return PenToolWidget;
 }(BaseToolWidget));

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

@@ -198,6 +198,10 @@ var SelectionToolWidget = /** @class */ (function (_super) {
             this.resizeImageToSelection();
             return true;
         }
+        // If we didn't handle the event, allow the superclass to handle it.
+        if (_super.prototype.onKeyPress.call(this, event)) {
+            return true;
+        }
         return false;
     };
     SelectionToolWidget.prototype.getTitle = function () {

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

@@ -5,9 +5,19 @@ export default abstract class BaseTool implements PointerEvtListener {
     readonly description: string;
     private enabled;
     private group;
+    /**
+     * Returns true iff the tool handled the event and thus should receive additional
+     * events.
+     */
     onPointerDown(_event: PointerEvt): boolean;
     onPointerMove(_event: PointerEvt): void;
-    onPointerUp(_event: PointerEvt): 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: PointerEvt): boolean | void;
     onGestureCancel(): void;
     protected constructor(notifier: EditorNotifier, description: string);
     onWheel(_event: WheelEvt): boolean;
@@ -15,6 +25,12 @@ export default abstract class BaseTool implements PointerEvtListener {
     onPaste(_event: PasteEvent): boolean;
     onKeyPress(_event: KeyPressEvent): boolean;
     onKeyUp(_event: KeyUpEvent): 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;
     setToolGroup(group: ToolEnabledGroup): void;

package/dist/mjs/tools/BaseTool.mjs

@@ -6,8 +6,18 @@ var BaseTool = /** @class */ (function () {
         this.enabled = true;
         this.group = null;
     }
+    /**
+     * Returns true iff the tool handled the event and thus should receive additional
+     * events.
+     */
     BaseTool.prototype.onPointerDown = function (_event) { return false; };
     BaseTool.prototype.onPointerMove = function (_event) { };
+    /**
+     * 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.
+     */
     BaseTool.prototype.onPointerUp = function (_event) { };
     BaseTool.prototype.onGestureCancel = function () { };
     BaseTool.prototype.onWheel = function (_event) {
@@ -25,6 +35,14 @@ var BaseTool = /** @class */ (function () {
     BaseTool.prototype.onKeyUp = function (_event) {
         return false;
     };
+    /**
+     * 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
+     */
+    BaseTool.prototype.eventCanBeDeliveredToNonActiveTool = function (_event) {
+        return true;
+    };
     BaseTool.prototype.setEnabled = function (enabled) {
         var _a;
         this.enabled = enabled;

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

@@ -15,6 +15,7 @@ export default class Pen extends BaseTool {
     protected builder: ComponentBuilder | null;
     private lastPoint;
     private startPoint;
+    private currentDeviceType;
     private snapToGridEnabled;
     private angleLockEnabled;
     constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
@@ -23,9 +24,11 @@ export default class Pen extends BaseTool {
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
     protected previewStroke(): void;
     protected addPointToStroke(point: StrokeDataPoint): void;
-    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerDown(event: PointerEvt): boolean;
+    private eventCanCancelStroke;
+    eventCanBeDeliveredToNonActiveTool(event: PointerEvt): boolean;
     onPointerMove({ current }: PointerEvt): void;
-    onPointerUp({ current }: PointerEvt): void;
+    onPointerUp({ current }: PointerEvt): boolean;
     onGestureCancel(): void;
     private finalizeStroke;
     private noteUpdated;