js-draw 0.24.1 → 0.25.0

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

@@ -47,12 +47,12 @@ var PenToolWidget = /** @class */ (function (_super) {
         // Default pen types
         _this.penTypes = [
             {
-                name: _this.localizationTable.pressureSensitiveFreehandPen,
+                name: _this.localizationTable.flatTipPen,
                 id: 'pressure-sensitive-pen',
                 factory: PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder,
             },
             {
-                name: _this.localizationTable.freehandPen,
+                name: _this.localizationTable.roundedTipPen,
                 id: 'freehand-pen',
                 factory: FreehandLineBuilder_1.makeFreehandLineBuilder,
             },
@@ -119,38 +119,140 @@ var PenToolWidget = /** @class */ (function (_super) {
         }
         return null;
     };
-    PenToolWidget.prototype.createIcon = function () {
-        var strokeFactory = this.tool.getStrokeFactory();
-        if (strokeFactory === FreehandLineBuilder_1.makeFreehandLineBuilder || strokeFactory === PressureSensitiveFreehandLineBuilder_1.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 === FreehandLineBuilder_1.makeFreehandLineBuilder || strokeFactory === PressureSensitiveFreehandLineBuilder_1.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 === FreehandLineBuilder_1.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(HTMLToolbar_1.toolbarCSSPrefix, "pen-type-selector"));
+        var scrollingContainer = document.createElement('div');
+        scrollingContainer.setAttribute('role', 'menu');
+        scrollingContainer.id = "".concat(HTMLToolbar_1.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(HTMLToolbar_1.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(HTMLToolbar_1.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(HTMLToolbar_1.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(HTMLToolbar_1.toolbarCSSPrefix, "penThicknessInput").concat(PenToolWidget.idCounter++);
-        objectTypeSelect.id = "".concat(HTMLToolbar_1.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); };
@@ -163,16 +265,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 = (0, makeColorInput_1.default)(this.editor, function (color) {
@@ -186,26 +278,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;
     };
@@ -223,6 +302,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 () {
@@ -258,6 +341,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_1.default));

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

@@ -200,6 +200,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/cjs/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/cjs/tools/BaseTool.js

@@ -8,8 +8,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) {
@@ -27,6 +37,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/cjs/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;

package/dist/cjs/tools/Pen.js

@@ -44,6 +44,7 @@ var Pen = /** @class */ (function (_super) {
         _this.builder = null;
         _this.lastPoint = null;
         _this.startPoint = null;
+        _this.currentDeviceType = null;
         _this.snapToGridEnabled = false;
         _this.angleLockEnabled = false;
         return _this;
@@ -100,8 +101,8 @@ var Pen = /** @class */ (function (_super) {
         this.lastPoint = point;
         this.previewStroke();
     };
-    Pen.prototype.onPointerDown = function (_a) {
-        var current = _a.current, allPointers = _a.allPointers;
+    Pen.prototype.onPointerDown = function (event) {
+        var current = event.current, allPointers = event.allPointers;
         var isEraser = current.device === Pointer_1.PointerDevice.Eraser;
         var anyDeviceIsStylus = false;
         for (var _i = 0, allPointers_1 = allPointers; _i < allPointers_1.length; _i++) {
@@ -111,24 +112,54 @@ var Pen = /** @class */ (function (_super) {
                 break;
             }
         }
+        // Avoid canceling an existing stroke
+        if (this.builder && !this.eventCanCancelStroke(event)) {
+            return true;
+        }
         if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
             this.startPoint = this.toStrokePoint(current);
             this.builder = this.builderFactory(this.startPoint, this.editor.viewport);
+            this.currentDeviceType = current.device;
             return true;
         }
         return false;
     };
+    Pen.prototype.eventCanCancelStroke = function (event) {
+        var _a, _b;
+        // If there has been a delay since the last input event,
+        // it's always okay to cancel
+        var lastInputTime = (_b = (_a = this.lastPoint) === null || _a === void 0 ? void 0 : _a.time) !== null && _b !== void 0 ? _b : 0;
+        if (event.current.timeStamp - lastInputTime > 1000) {
+            return true;
+        }
+        var isPenStroke = this.currentDeviceType === Pointer_1.PointerDevice.Pen;
+        var isTouchEvent = event.current.device === Pointer_1.PointerDevice.Touch;
+        // Don't allow pen strokes to be cancelled by touch events.
+        if (isPenStroke && isTouchEvent) {
+            return false;
+        }
+        return true;
+    };
+    Pen.prototype.eventCanBeDeliveredToNonActiveTool = function (event) {
+        return this.eventCanCancelStroke(event);
+    };
     Pen.prototype.onPointerMove = function (_a) {
         var current = _a.current;
         if (!this.builder)
             return;
+        if (current.device !== this.currentDeviceType)
+            return;
         this.addPointToStroke(this.toStrokePoint(current));
     };
     Pen.prototype.onPointerUp = function (_a) {
         var _b, _c;
         var current = _a.current;
-        if (!this.builder) {
-            return;
+        if (!this.builder)
+            return false;
+        if (current.device !== this.currentDeviceType) {
+            // this.builder still exists, so we're handling events from another
+            // device type.
+            return true;
         }
         // onPointerUp events can have zero pressure. Use the last pressure instead.
         var currentPoint = this.toStrokePoint(current);
@@ -137,8 +168,10 @@ var Pen = /** @class */ (function (_super) {
         if (current.isPrimary) {
             this.finalizeStroke();
         }
+        return false;
     };
     Pen.prototype.onGestureCancel = function () {
+        this.builder = null;
         this.editor.clearWetInk();
     };
     Pen.prototype.finalizeStroke = function () {

package/dist/cjs/tools/ToolController.js

@@ -108,8 +108,15 @@ var ToolController = /** @class */ (function () {
         var _a, _b;
         var handled = false;
         if (event.kind === types_1.InputEvtType.PointerDownEvt) {
+            var canOnlySendToActiveTool = false;
+            if (this.activeTool && !this.activeTool.eventCanBeDeliveredToNonActiveTool(event)) {
+                canOnlySendToActiveTool = true;
+            }
             for (var _i = 0, _c = this.tools; _i < _c.length; _i++) {
                 var tool = _c[_i];
+                if (canOnlySendToActiveTool && tool !== this.activeTool) {
+                    continue;
+                }
                 if (tool.isEnabled() && tool.onPointerDown(event)) {
                     if (this.activeTool !== tool) {
                         (_a = this.activeTool) === null || _a === void 0 ? void 0 : _a.onGestureCancel();
@@ -121,8 +128,13 @@ var ToolController = /** @class */ (function () {
             }
         }
         else if (event.kind === types_1.InputEvtType.PointerUpEvt) {
-            (_b = this.activeTool) === null || _b === void 0 ? void 0 : _b.onPointerUp(event);
-            this.activeTool = null;
+            var upResult = (_b = this.activeTool) === null || _b === void 0 ? void 0 : _b.onPointerUp(event);
+            var continueHandlingEvents = upResult && event.allPointers.length > 1;
+            // Should the active tool continue handling events (without an additional pointer down?)
+            if (!continueHandlingEvents) {
+                // No -- Remove the current tool
+                this.activeTool = null;
+            }
             handled = true;
         }
         else if (event.kind === types_1.InputEvtType.PointerMoveEvt) {

package/dist/mjs/localizations/de.mjs

@@ -11,5 +11,5 @@ var __assign = (this && this.__assign) || function () {
 };
 import  { defaultEditorLocalization }  from '../localization.mjs';
 // German localization
-var localization = __assign(__assign({}, defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', image: 'Bild', inputAltText: 'Alt-Text: ', chooseFile: 'Wähle Datei: ', submit: 'Absenden', cancel: 'Abbrechen', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', textSize: 'Größe: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectPenType: 'Objekt-Typ: ', freehandPen: 'Freihand', pressureSensitiveFreehandPen: 'Stift (druckempfindlich)', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', lockRotation: 'Sperre Rotation', paste: 'Einfügen', dropdownShown: function (toolName) { return "Dropdown-Men\u00FC f\u00FCr ".concat(toolName, " angezeigt"); }, dropdownHidden: function (toolName) { return "Dropdown-Men\u00FC f\u00FCr ".concat(toolName, " versteckt"); }, zoomLevel: function (zoomPercent) { return "Verg\u00F6\u00DFerung: ".concat(zoomPercent, "%"); }, colorChangedAnnouncement: function (color) { return "Farbe zu ".concat(color, " ge\u00E4ndert"); }, imageSize: function (size, units) { return "Bild-Gr\u00F6\u00DFe: ".concat(size, " ").concat(units); }, imageLoadError: function (message) { return "Fehler beim Laden des Bildes: ".concat(message); }, errorImageHasZeroSize: 'Fehler: Bild hat Größe Null', penTool: function (penNumber) { return "Stift ".concat(penNumber); }, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', changeTool: 'Wechsle Werkzeug', pasteHandler: 'Copy-Paste-Handler', findLabel: 'Finde', toNextMatch: 'Nächstes', closeFindDialog: 'Schließen', findDialogShown: 'Finde-Dialog angezeigt', findDialogHidden: 'Finde-Dialog versteckt', focusedFoundText: function (matchIdx, totalMatches) { return "Sieh Treffer ".concat(matchIdx, " von ").concat(totalMatches, " an"); }, toolEnabledAnnouncement: function (toolName) { return "".concat(toolName, " aktiviert"); }, toolDisabledAnnouncement: function (toolName) { return "".concat(toolName, " deaktiviert"); }, updatedViewport: 'Transformierte Ansicht', transformedElements: function (elemCount) { return "".concat(elemCount, " Element").concat(1 === elemCount ? '' : 'e', " transformiert"); }, resizeOutputCommand: function (newSize) { return "Bildgr\u00F6\u00DFe auf ".concat(newSize.w, "x").concat(newSize.h, " ge\u00E4ndert"); }, addElementAction: function (componentDescription) { return "".concat(componentDescription, " hinzugef\u00FCgt"); }, eraseAction: function (elemDescription, countErased) { return "".concat(countErased, " ").concat(elemDescription, " gel\u00F6scht"); }, duplicateAction: function (elemDescription, countErased) { return "".concat(countErased, " ").concat(elemDescription, " dupliziert"); }, inverseOf: function (actionDescription) { return "".concat(actionDescription, " umgekehrt"); }, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: function (degrees) { return "".concat(Math.abs(degrees), " Grad ").concat(degrees < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn', " gedreht"); }, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: function (count) { return "".concat(count, " Element").concat(1 === count ? '' : 'e', " ausgew\u00E4hlt"); }, stroke: 'Strich', svgObject: 'SVG-Objekt', text: function (text) { return "Text-Objekt: ".concat(text); }, pathNodeCount: function (count) { return "Es gibt ".concat(count, " sichtbare Pfad-Objekte."); }, textNodeCount: function (count) { return "Es gibt ".concat(count, " sichtbare Text-Knotenpunkte."); }, textNode: function (content) { return "Text: ".concat(content); }, imageNodeCount: function (nodeCount) { return "Es gibt ".concat(nodeCount, " sichtbare Bild-Knoten."); }, imageNode: function (label) { return "Bild: ".concat(label); }, unlabeledImageNode: 'Bild ohne Label', rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: function (percentage) { return "Laden ".concat(percentage, "%..."); }, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " r\u00FCckg\u00E4ngig gemacht"); }, redoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " wiederholt"); }, reformatSelection: 'Formatiere Auswahl', documentProperties: 'Seite', backgroundColor: 'Hintergrundfarbe: ', imageWidthOption: 'Breite: ', imageHeightOption: 'Höhe: ', useGridOption: 'Gitter: ', toggleOverflow: 'Mehr', selectAllTool: 'Alle auswählen', soundExplorer: 'Klangbasierte Bilderkundung', disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung', enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung', copied: function (count, description) { return "".concat(count, " ").concat(description, " kopiert"); }, pasted: function (count, description) { return "".concat(count, " ").concat(description, " eingef\u00FCgt"); }, unionOf: function (actionDescription, actionCount) { return "Vereinigung: ".concat(actionCount, " ").concat(actionDescription); }, emptyBackground: 'Leerer Hintergrund', filledBackgroundWithColor: function (color) { return "Gef\u00FCllter Hintergrund (".concat(color, ")"); }, restyledElement: function (elementDescription) { return "".concat(elementDescription, " umgestaltet"); } });
+var localization = __assign(__assign({}, defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', image: 'Bild', inputAltText: 'Alt-Text: ', chooseFile: 'Wähle Datei: ', submit: 'Absenden', cancel: 'Abbrechen', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', textSize: 'Größe: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectPenType: 'Objekt-Typ: ', roundedTipPen: 'Freihand', flatTipPen: 'Stift (druckempfindlich)', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', lockRotation: 'Sperre Rotation', paste: 'Einfügen', dropdownShown: function (toolName) { return "Dropdown-Men\u00FC f\u00FCr ".concat(toolName, " angezeigt"); }, dropdownHidden: function (toolName) { return "Dropdown-Men\u00FC f\u00FCr ".concat(toolName, " versteckt"); }, zoomLevel: function (zoomPercent) { return "Verg\u00F6\u00DFerung: ".concat(zoomPercent, "%"); }, colorChangedAnnouncement: function (color) { return "Farbe zu ".concat(color, " ge\u00E4ndert"); }, imageSize: function (size, units) { return "Bild-Gr\u00F6\u00DFe: ".concat(size, " ").concat(units); }, imageLoadError: function (message) { return "Fehler beim Laden des Bildes: ".concat(message); }, errorImageHasZeroSize: 'Fehler: Bild hat Größe Null', penTool: function (penNumber) { return "Stift ".concat(penNumber); }, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', changeTool: 'Wechsle Werkzeug', pasteHandler: 'Copy-Paste-Handler', findLabel: 'Finde', toNextMatch: 'Nächstes', closeFindDialog: 'Schließen', findDialogShown: 'Finde-Dialog angezeigt', findDialogHidden: 'Finde-Dialog versteckt', focusedFoundText: function (matchIdx, totalMatches) { return "Sieh Treffer ".concat(matchIdx, " von ").concat(totalMatches, " an"); }, toolEnabledAnnouncement: function (toolName) { return "".concat(toolName, " aktiviert"); }, toolDisabledAnnouncement: function (toolName) { return "".concat(toolName, " deaktiviert"); }, updatedViewport: 'Transformierte Ansicht', transformedElements: function (elemCount) { return "".concat(elemCount, " Element").concat(1 === elemCount ? '' : 'e', " transformiert"); }, resizeOutputCommand: function (newSize) { return "Bildgr\u00F6\u00DFe auf ".concat(newSize.w, "x").concat(newSize.h, " ge\u00E4ndert"); }, addElementAction: function (componentDescription) { return "".concat(componentDescription, " hinzugef\u00FCgt"); }, eraseAction: function (elemDescription, countErased) { return "".concat(countErased, " ").concat(elemDescription, " gel\u00F6scht"); }, duplicateAction: function (elemDescription, countErased) { return "".concat(countErased, " ").concat(elemDescription, " dupliziert"); }, inverseOf: function (actionDescription) { return "".concat(actionDescription, " umgekehrt"); }, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: function (degrees) { return "".concat(Math.abs(degrees), " Grad ").concat(degrees < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn', " gedreht"); }, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: function (count) { return "".concat(count, " Element").concat(1 === count ? '' : 'e', " ausgew\u00E4hlt"); }, stroke: 'Strich', svgObject: 'SVG-Objekt', text: function (text) { return "Text-Objekt: ".concat(text); }, pathNodeCount: function (count) { return "Es gibt ".concat(count, " sichtbare Pfad-Objekte."); }, textNodeCount: function (count) { return "Es gibt ".concat(count, " sichtbare Text-Knotenpunkte."); }, textNode: function (content) { return "Text: ".concat(content); }, imageNodeCount: function (nodeCount) { return "Es gibt ".concat(nodeCount, " sichtbare Bild-Knoten."); }, imageNode: function (label) { return "Bild: ".concat(label); }, unlabeledImageNode: 'Bild ohne Label', rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: function (percentage) { return "Laden ".concat(percentage, "%..."); }, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " r\u00FCckg\u00E4ngig gemacht"); }, redoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " wiederholt"); }, reformatSelection: 'Formatiere Auswahl', documentProperties: 'Seite', backgroundColor: 'Hintergrundfarbe: ', imageWidthOption: 'Breite: ', imageHeightOption: 'Höhe: ', useGridOption: 'Gitter: ', toggleOverflow: 'Mehr', selectAllTool: 'Alle auswählen', soundExplorer: 'Klangbasierte Bilderkundung', disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung', enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung', copied: function (count, description) { return "".concat(count, " ").concat(description, " kopiert"); }, pasted: function (count, description) { return "".concat(count, " ").concat(description, " eingef\u00FCgt"); }, unionOf: function (actionDescription, actionCount) { return "Vereinigung: ".concat(actionCount, " ").concat(actionDescription); }, emptyBackground: 'Leerer Hintergrund', filledBackgroundWithColor: function (color) { return "Gef\u00FCllter Hintergrund (".concat(color, ")"); }, restyledElement: function (elementDescription) { return "".concat(elementDescription, " umgestaltet"); } });
 export default localization;

package/dist/mjs/localizations/es.mjs

@@ -17,7 +17,7 @@ var localization = __assign(__assign({}, defaultEditorLocalization), {
     loading: function (percentage) { return "Cargando: ".concat(percentage, "%..."); }, imageEditor: 'Editor de dibujos', undoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " fue deshecho"); }, redoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " fue rehecho"); }, undo: 'Deshace', redo: 'Rehace', 
     // Strings for the toolbar
     // (see src/toolbar/localization.ts)
-    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectPenType: 'Forma de dibuja:', handTool: 'Mover', zoom: 'Zoom', resetView: 'Reiniciar vista', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFromScreen: 'Selecciona un color de la pantalla', clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color', dropdownShown: function (toolName) {
+    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', roundedTipPen: 'Lapiz Redondeado', selectPenType: 'Forma de dibuja:', handTool: 'Mover', zoom: 'Zoom', resetView: 'Reiniciar vista', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFromScreen: 'Selecciona un color de la pantalla', clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color', dropdownShown: function (toolName) {
         return "Men\u00FA por ".concat(toolName, " es visible");
     }, dropdownHidden: function (toolName) {
         return "Men\u00FA por ".concat(toolName, " fue ocultado");

package/dist/mjs/rendering/renderers/CanvasRenderer.mjs

@@ -103,6 +103,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
         this.ctx.moveTo(startPoint.x, startPoint.y);
     };
     CanvasRenderer.prototype.endPath = function (style) {
+        this.ctx.save();
         this.ctx.fillStyle = style.fill.toHexString();
         this.ctx.fill();
         if (style.stroke) {
@@ -113,6 +114,7 @@ var CanvasRenderer = /** @class */ (function (_super) {
             this.ctx.stroke();
         }
         this.ctx.closePath();
+        this.ctx.restore();
     };
     CanvasRenderer.prototype.lineTo = function (point) {
         point = this.canvasToScreen(point);

package/dist/mjs/rendering/renderers/SVGRenderer.d.ts

@@ -30,7 +30,7 @@ export default class SVGRenderer extends AbstractRenderer {
     setRootSVGAttribute(name: string, value: string | null): void;
     displaySize(): Vec2;
     clear(): void;
-    private addPathToSVG;
+    protected addPathToSVG(): SVGPathElement;
     drawPath(pathSpec: RenderablePathSpec): void;
     private transformFrom;
     private textContainer;

package/dist/mjs/rendering/renderers/SVGRenderer.mjs

@@ -110,11 +110,12 @@ var SVGRenderer = /** @class */ (function (_super) {
             this.overwrittenAttrs = {};
         }
     };
-    // Push [this.fullPath] to the SVG
+    // Push `this.fullPath` to the SVG. Returns the path added to the SVG, if any.
+    // @internal
     SVGRenderer.prototype.addPathToSVG = function () {
         var _a;
         if (!this.lastPathStyle || this.lastPathString.length === 0) {
-            return;
+            return null;
         }
         var pathElem = document.createElementNS(svgNameSpace, 'path');
         pathElem.setAttribute('d', this.lastPathString.join(' '));
@@ -131,6 +132,7 @@ var SVGRenderer = /** @class */ (function (_super) {
         }
         this.elem.appendChild(pathElem);
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
+        return pathElem;
     };
     SVGRenderer.prototype.drawPath = function (pathSpec) {
         var style = pathSpec.style;

package/dist/mjs/testing/getUniquePointerId.d.ts

@@ -0,0 +1,4 @@
+import Pointer from '../Pointer';
+/** Returns the smallest ID not used by the pointers in the given list. */
+declare const getUniquePointerId: (pointers: Pointer[]) => number;
+export default getUniquePointerId;

package/dist/mjs/testing/getUniquePointerId.mjs

@@ -0,0 +1,14 @@
+/** Returns the smallest ID not used by the pointers in the given list. */
+var getUniquePointerId = function (pointers) {
+    var ptrId = 0;
+    var pointerIds = pointers.map(function (ptr) { return ptr.id; });
+    pointerIds.sort();
+    for (var _i = 0, pointerIds_1 = pointerIds; _i < pointerIds_1.length; _i++) {
+        var pointerId = pointerIds_1[_i];
+        if (ptrId === pointerId) {
+            ptrId = pointerId + 1;
+        }
+    }
+    return ptrId;
+};
+export default getUniquePointerId;

package/dist/mjs/testing/sendPenEvent.d.ts

@@ -8,5 +8,5 @@ import { InputEvtType } from '../types';
  *
  * @see {@link sendTouchEvent}
  */
-declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]) => void;
+declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]) => Pointer;
 export default sendPenEvent;

package/dist/mjs/testing/sendPenEvent.mjs

@@ -1,5 +1,6 @@
 import  Pointer  from '../Pointer.mjs';
 import  { InputEvtType }  from '../types.mjs';
+import  getUniquePointerId  from './getUniquePointerId.mjs';
 /**
  * Dispatch a pen event to the currently selected tool.
  * Intended for unit tests.
@@ -7,7 +8,8 @@ import  { InputEvtType }  from '../types.mjs';
  * @see {@link sendTouchEvent}
  */
 var sendPenEvent = function (editor, eventType, point, allPointers) {
-    var mainPointer = Pointer.ofCanvasPoint(point, eventType !== InputEvtType.PointerUpEvt, editor.viewport);
+    var id = getUniquePointerId(allPointers !== null && allPointers !== void 0 ? allPointers : []);
+    var mainPointer = Pointer.ofCanvasPoint(point, eventType !== InputEvtType.PointerUpEvt, editor.viewport, id);
     editor.toolController.dispatchInputEvent({
         kind: eventType,
         allPointers: allPointers !== null && allPointers !== void 0 ? allPointers : [
@@ -15,5 +17,6 @@ var sendPenEvent = function (editor, eventType, point, allPointers) {
         ],
         current: mainPointer,
     });
+    return mainPointer;
 };
 export default sendPenEvent;

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,