js-draw 1.16.1 → 1.18.0

package/dist/mjs/toolbar/localization.mjs

@@ -27,7 +27,8 @@ export const defaultToolbarLocalization = {
     save: 'Save',
     undo: 'Undo',
     redo: 'Redo',
-    selectPenTip: 'Pen tip',
+    fullStrokeEraser: 'Full stroke eraser',
+    selectPenType: 'Pen type',
     selectShape: 'Shape',
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
@@ -45,6 +46,7 @@ export const defaultToolbarLocalization = {
     strokeAutocorrect: 'Autocorrect',
     touchPanning: 'Touchscreen panning',
     roundedTipPen: 'Round',
+    roundedTipPen2: 'Polyline',
     flatTipPen: 'Flat',
     arrowPen: 'Arrow',
     linePen: 'Line',
@@ -59,7 +61,7 @@ export const defaultToolbarLocalization = {
     penDropdown__baseHelpText: 'This tool draws shapes or freehand lines.',
     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 tip” style or “shape” can be chosen. Choosing a “pen tip” style draws freehand lines. Choosing a “shape” draws shapes.',
+    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.',
     penDropdown__stabilizationHelpText: 'Draws smoother strokes.\n\nThis also adds a short delay between the mouse/stylus and the stroke.',
     handDropdown__baseHelpText: 'This tool is responsible for scrolling, rotating, and zooming the editor.',
@@ -69,6 +71,9 @@ export const defaultToolbarLocalization = {
     handDropdown__zoomDisplayHelpText: 'Shows the current zoom level. 100% shows the image at its actual size.',
     handDropdown__touchPanningHelpText: 'When enabled, touch gestures move the image rather than select or draw.',
     handDropdown__lockRotationHelpText: 'When enabled, prevents touch gestures from rotating the screen.',
+    eraserDropdown__baseHelpText: 'This tool removes strokes, images, and text under the cursor.',
+    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__deleteHelpText: 'Erases selected items.',

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

@@ -166,7 +166,30 @@ class DocumentPropertiesWidget extends BaseWidget {
             row.replaceChildren(label, input);
             return {
                 setValue: (value) => {
-                    input.value = value.toString();
+                    // Slightly improve the case where the user tries to change the
+                    // first digit of a dimension like 600.
+                    //
+                    // As changing the value also gives the image zero size (which is unsupported,
+                    // .setValue is called immediately). We work around this by trying to select
+                    // the added/changed digits.
+                    //
+                    // See https://github.com/personalizedrefrigerator/js-draw/issues/58.
+                    if (document.activeElement === input && input.value.match(/^0*$/)) {
+                        // We need to switch to type="text" and back to type="number" because
+                        // number inputs don't support selection.
+                        //
+                        // See https://stackoverflow.com/q/22381837
+                        const originalValue = input.value;
+                        input.type = 'text';
+                        input.value = value.toString();
+                        // Select the added digits
+                        const lengthToSelect = Math.max(1, input.value.length - originalValue.length);
+                        input.setSelectionRange(0, lengthToSelect);
+                        input.type = 'number';
+                    }
+                    else {
+                        input.value = value.toString();
+                    }
                 },
                 setIsAutomaticSize: (automatic) => {
                     input.disabled = automatic;

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

@@ -1,15 +1,20 @@
 import Editor from '../../Editor';
 import Eraser from '../../tools/Eraser';
 import { ToolbarLocalization } from '../localization';
+import HelpDisplay from '../utils/HelpDisplay';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 export default class EraserToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
     constructor(editor: Editor, tool: Eraser, localizationTable?: ToolbarLocalization);
+    protected getHelpText(): string;
     protected getTitle(): string;
+    private makeIconForType;
     protected createIcon(): Element;
-    protected fillDropdown(dropdown: HTMLElement): boolean;
+    private static idCounter;
+    private makeEraserTypeSelector;
+    protected fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean;
     serializeState(): SavedToolbuttonState;
     deserializeFrom(state: SavedToolbuttonState): void;
 }

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

@@ -1,8 +1,9 @@
+import  { EraserMode }  from '../../tools/Eraser.mjs';
 import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
 import  makeThicknessSlider  from './components/makeThicknessSlider.mjs';
-export default class EraserToolWidget extends BaseToolWidget {
+class EraserToolWidget extends BaseToolWidget {
     constructor(editor, tool, localizationTable) {
         super(editor, tool, 'eraser-tool-widget', localizationTable);
         this.tool = tool;
@@ -14,26 +15,57 @@ export default class EraserToolWidget extends BaseToolWidget {
             }
         });
     }
+    getHelpText() {
+        return this.localizationTable.eraserDropdown__baseHelpText;
+    }
     getTitle() {
         return this.localizationTable.eraser;
     }
+    makeIconForType(mode) {
+        return this.editor.icons.makeEraserIcon(this.tool.getThickness(), mode);
+    }
     createIcon() {
-        return this.editor.icons.makeEraserIcon(this.tool.getThickness());
+        return this.makeIconForType(this.tool.getModeValue().get());
+    }
+    makeEraserTypeSelector(helpDisplay) {
+        const container = document.createElement('div');
+        const labelElement = document.createElement('label');
+        const checkboxElement = document.createElement('input');
+        checkboxElement.id = `${toolbarCSSPrefix}eraserToolWidget-${EraserToolWidget.idCounter++}`;
+        labelElement.htmlFor = checkboxElement.id;
+        labelElement.innerText = this.localizationTable.fullStrokeEraser;
+        checkboxElement.type = 'checkbox';
+        checkboxElement.oninput = () => {
+            this.tool.getModeValue().set(checkboxElement.checked ? EraserMode.FullStroke : EraserMode.PartialStroke);
+        };
+        const updateValue = () => {
+            checkboxElement.checked = this.tool.getModeValue().get() === EraserMode.FullStroke;
+        };
+        container.replaceChildren(labelElement, checkboxElement);
+        helpDisplay?.registerTextHelpForElement(container, this.localizationTable.eraserDropdown__fullStrokeEraserHelpText);
+        return {
+            addTo: (parent) => {
+                parent.appendChild(container);
+            },
+            updateValue,
+        };
     }
-    fillDropdown(dropdown) {
+    fillDropdown(dropdown, helpDisplay) {
         const container = document.createElement('div');
         container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
         const thicknessSlider = makeThicknessSlider(this.editor, thickness => {
             this.tool.setThickness(thickness);
         });
         thicknessSlider.setBounds(10, 55);
+        helpDisplay?.registerTextHelpForElement(thicknessSlider.container, this.localizationTable.eraserDropdown__thicknessHelpText);
+        const modeSelector = this.makeEraserTypeSelector(helpDisplay);
         this.updateInputs = () => {
             thicknessSlider.setValue(this.tool.getThickness());
+            modeSelector.updateValue();
         };
         this.updateInputs();
-        const spacer = document.createElement('div');
-        spacer.style.height = '5px';
-        container.replaceChildren(thicknessSlider.container, spacer);
+        container.replaceChildren(thicknessSlider.container);
+        modeSelector.addTo(container);
         dropdown.replaceChildren(container);
         return true;
     }
@@ -41,6 +73,7 @@ export default class EraserToolWidget extends BaseToolWidget {
         return {
             ...super.serializeState(),
             thickness: this.tool.getThickness(),
+            mode: this.tool.getModeValue().get(),
         };
     }
     deserializeFrom(state) {
@@ -52,5 +85,13 @@ export default class EraserToolWidget extends BaseToolWidget {
             }
             this.tool.setThickness(parsedThickness);
         }
+        if (state.mode) {
+            const mode = state.mode;
+            if (Object.values(EraserMode).includes(mode)) {
+                this.tool.getModeValue().set(mode);
+            }
+        }
     }
 }
+EraserToolWidget.idCounter = 0;
+export default EraserToolWidget;

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

@@ -15,7 +15,7 @@ export interface PenTypeRecord {
 export default class PenToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
-    protected penTypes: PenTypeRecord[];
+    protected penTypes: Readonly<PenTypeRecord>[];
     protected shapelikeIDs: string[];
     private static idCounter;
     constructor(editor: Editor, tool: Pen, localization?: ToolbarLocalization);

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

@@ -12,6 +12,7 @@ import  { selectStrokeTypeKeyboardShortcutIds }  from './keybindings.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  makeThicknessSlider  from './components/makeThicknessSlider.mjs';
 import  makeGridSelector  from './components/makeGridSelector.mjs';
+import  { makePolylineBuilder }  from '../../components/builders/PolylineBuilder.mjs';
 class PenToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'pen', localization);
@@ -19,8 +20,12 @@ class PenToolWidget extends BaseToolWidget {
         this.updateInputs = () => { };
         // Pen types that correspond to
         this.shapelikeIDs = ['pressure-sensitive-pen', 'freehand-pen'];
+        // Additional client-specified pens.
+        const additionalPens = editor.getCurrentSettings().pens?.additionalPenTypes ?? [];
+        const filterPens = editor.getCurrentSettings().pens?.filterPenTypes ?? (() => true);
         // Default pen types
         this.penTypes = [
+            // Non-shape pens
             {
                 name: this.localizationTable.flatTipPen,
                 id: 'pressure-sensitive-pen',
@@ -31,6 +36,13 @@ class PenToolWidget extends BaseToolWidget {
                 id: 'freehand-pen',
                 factory: makeFreehandLineBuilder,
             },
+            {
+                name: this.localizationTable.roundedTipPen2,
+                id: 'polyline-pen',
+                factory: makePolylineBuilder,
+            },
+            ...(additionalPens.filter(pen => !pen.isShapeBuilder)),
+            // Shape pens
             {
                 name: this.localizationTable.arrowPen,
                 id: 'arrow',
@@ -60,8 +72,9 @@ class PenToolWidget extends BaseToolWidget {
                 id: 'outlined-circle',
                 isShapeBuilder: true,
                 factory: makeOutlinedCircleBuilder,
-            }
-        ];
+            },
+            ...(additionalPens.filter(pen => pen.isShapeBuilder)),
+        ].filter(filterPens);
         this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolUpdated) {
                 throw new Error('Invalid event type!');
@@ -105,7 +118,7 @@ class PenToolWidget extends BaseToolWidget {
             style.factory = record.factory;
         }
         const strokeFactory = record?.factory;
-        if (!strokeFactory || strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
+        if (!strokeFactory || strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder || strokeFactory === makePolylineBuilder) {
             return this.editor.icons.makePenIcon(style);
         }
         else {
@@ -125,7 +138,7 @@ class PenToolWidget extends BaseToolWidget {
                 isShapeBuilder: penType.isShapeBuilder ?? false,
             };
         });
-        const penSelector = makeGridSelector(this.localizationTable.selectPenTip, this.getCurrentPenTypeIdx(), allChoices.filter(choice => !choice.isShapeBuilder));
+        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 onSelectorUpdate = (newPenTypeIndex) => {
             this.tool.setStrokeFactory(this.penTypes[newPenTypeIndex].factory);

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -2,30 +2,50 @@ import { KeyPressEvent, PointerEvt } from '../inputEvents';
 import BaseTool from './BaseTool';
 import Editor from '../Editor';
 import { MutableReactiveValue } from '../util/ReactiveValue';
+export declare enum EraserMode {
+    PartialStroke = "partial-stroke",
+    FullStroke = "full-stroke"
+}
+export interface InitialEraserOptions {
+    thickness?: number;
+    mode?: EraserMode;
+}
 export default class Eraser extends BaseTool {
     private editor;
     private lastPoint;
     private isFirstEraseEvt;
-    private toRemove;
     private thickness;
     private thicknessValue;
-    private partialCommands;
-    constructor(editor: Editor, description: string);
+    private modeValue;
+    private toRemove;
+    private toAdd;
+    private eraseCommands;
+    private addCommands;
+    constructor(editor: Editor, description: string, options?: InitialEraserOptions);
     private clearPreview;
     private getSizeOnCanvas;
     private drawPreviewAt;
+    /**
+     * @returns the eraser rectangle in canvas coordinates.
+     *
+     * For now, all erasers are rectangles or points.
+     */
     private getEraserRect;
+    /** Erases in a line from the last point to the current. */
     private eraseTo;
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
     onPointerUp(event: PointerEvt): void;
     onGestureCancel(): void;
     onKeyPress(event: KeyPressEvent): boolean;
+    /** Returns the side-length of the tip of this eraser. */
     getThickness(): number;
+    /** Sets the side-length of this' tip. */
+    setThickness(thickness: number): void;
     /**
      * Returns a {@link MutableReactiveValue} that can be used to watch
      * this tool's thickness.
      */
     getThicknessValue(): MutableReactiveValue<number>;
-    setThickness(thickness: number): void;
+    getModeValue(): MutableReactiveValue<EraserMode>;
 }

package/dist/mjs/tools/Eraser.mjs

@@ -1,19 +1,28 @@
 import  { EditorEventType }  from '../types.mjs';
 import  BaseTool  from './BaseTool.mjs';
-import { Vec2, LineSegment2, Color4, Rect2 } from '@js-draw/math';
+import { Vec2, LineSegment2, Color4, Rect2, Path } from '@js-draw/math';
 import  Erase  from '../commands/Erase.mjs';
 import  { PointerDevice }  from '../Pointer.mjs';
 import  { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId }  from './keybindings.mjs';
 import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
+import  EditorImage  from '../image/EditorImage.mjs';
+import  uniteCommands  from '../commands/uniteCommands.mjs';
+import  { pathToRenderable }  from '../rendering/RenderablePathSpec.mjs';
+export var EraserMode;
+(function (EraserMode) {
+    EraserMode["PartialStroke"] = "partial-stroke";
+    EraserMode["FullStroke"] = "full-stroke";
+})(EraserMode || (EraserMode = {}));
 export default class Eraser extends BaseTool {
-    constructor(editor, description) {
+    constructor(editor, description, options) {
         super(editor.notifier, description);
         this.editor = editor;
         this.lastPoint = null;
         this.isFirstEraseEvt = true;
-        this.thickness = 10;
         // Commands that each remove one element
-        this.partialCommands = [];
+        this.eraseCommands = [];
+        this.addCommands = [];
+        this.thickness = options?.thickness ?? 10;
         this.thicknessValue = ReactiveValue.fromInitialValue(this.thickness);
         this.thicknessValue.onUpdate(value => {
             this.thickness = value;
@@ -22,6 +31,13 @@ export default class Eraser extends BaseTool {
                 tool: this,
             });
         });
+        this.modeValue = ReactiveValue.fromInitialValue(options?.mode ?? EraserMode.FullStroke);
+        this.modeValue.onUpdate(_value => {
+            this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+                kind: EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        });
     }
     clearPreview() {
         this.editor.clearWetInk();
@@ -34,18 +50,26 @@ export default class Eraser extends BaseTool {
         const size = this.getSizeOnCanvas();
         const renderer = this.editor.display.getWetInkRenderer();
         const rect = this.getEraserRect(point);
+        const rect2 = this.getEraserRect(this.lastPoint ?? point);
         const fill = {
-            fill: Color4.gray,
+            fill: Color4.transparent,
+            stroke: { width: size / 10, color: Color4.gray },
         };
-        renderer.drawRect(rect, size / 4, fill);
+        renderer.drawPath(pathToRenderable(Path.fromConvexHullOf([...rect.corners, ...rect2.corners]), fill));
     }
+    /**
+     * @returns the eraser rectangle in canvas coordinates.
+     *
+     * For now, all erasers are rectangles or points.
+     */
     getEraserRect(centerPoint) {
         const size = this.getSizeOnCanvas();
         const halfSize = Vec2.of(size / 2, size / 2);
         return Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
     }
+    /** Erases in a line from the last point to the current. */
     eraseTo(currentPoint) {
-        if (!this.isFirstEraseEvt && currentPoint.minus(this.lastPoint).magnitude() === 0) {
+        if (!this.isFirstEraseEvt && currentPoint.distanceTo(this.lastPoint) === 0) {
             return;
         }
         this.isFirstEraseEvt = false;
@@ -60,13 +84,55 @@ export default class Eraser extends BaseTool {
         });
         // Only erase components that could be selected (and thus interacted with)
         // by the user.
-        const toErase = intersectingElems.filter(elem => elem.isSelectable());
-        // Remove any intersecting elements.
-        this.toRemove.push(...toErase);
-        // Create new Erase commands for the now-to-be-erased elements and apply them.
-        const newPartialCommands = toErase.map(elem => new Erase([elem]));
-        newPartialCommands.forEach(cmd => cmd.apply(this.editor));
-        this.partialCommands.push(...newPartialCommands);
+        const eraseableElems = intersectingElems.filter(elem => elem.isSelectable());
+        if (this.modeValue.get() === EraserMode.FullStroke) {
+            // Remove any intersecting elements.
+            this.toRemove.push(...eraseableElems);
+            // Create new Erase commands for the now-to-be-erased elements and apply them.
+            const newPartialCommands = eraseableElems.map(elem => new Erase([elem]));
+            newPartialCommands.forEach(cmd => cmd.apply(this.editor));
+            this.eraseCommands.push(...newPartialCommands);
+        }
+        else {
+            const toErase = [];
+            const toAdd = [];
+            for (const targetElem of eraseableElems) {
+                toErase.push(targetElem);
+                // Completely delete items that can't be divided.
+                if (!targetElem.withRegionErased) {
+                    continue;
+                }
+                // Completely delete items that are completely or almost completely
+                // contained within the eraser.
+                const grownRect = eraserRect.grownBy(eraserRect.maxDimension / 3);
+                if (grownRect.containsRect(targetElem.getExactBBox())) {
+                    continue;
+                }
+                // Join the current and previous rectangles so that points between events are also
+                // erased.
+                const erasePath = Path.fromConvexHullOf([
+                    ...eraserRect.corners, ...this.getEraserRect(this.lastPoint ?? currentPoint).corners
+                ].map(p => this.editor.viewport.roundPoint(p)));
+                toAdd.push(...targetElem.withRegionErased(erasePath, this.editor.viewport));
+            }
+            const eraseCommand = new Erase(toErase);
+            const newAddCommands = toAdd.map(elem => EditorImage.addElement(elem));
+            eraseCommand.apply(this.editor);
+            newAddCommands.forEach(command => command.apply(this.editor));
+            const finalToErase = [];
+            for (const item of toErase) {
+                if (this.toAdd.includes(item)) {
+                    this.toAdd = this.toAdd.filter(i => i !== item);
+                }
+                else {
+                    finalToErase.push(item);
+                }
+            }
+            this.toRemove.push(...finalToErase);
+            this.toAdd.push(...toAdd);
+            this.eraseCommands.push(new Erase(finalToErase));
+            this.addCommands.push(...newAddCommands);
+        }
         this.drawPreviewAt(currentPoint);
         this.lastPoint = currentPoint;
     }
@@ -74,6 +140,7 @@ export default class Eraser extends BaseTool {
         if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
             this.lastPoint = event.current.canvasPos;
             this.toRemove = [];
+            this.toAdd = [];
             this.isFirstEraseEvt = true;
             this.drawPreviewAt(event.current.canvasPos);
             return true;
@@ -86,18 +153,32 @@ export default class Eraser extends BaseTool {
     }
     onPointerUp(event) {
         this.eraseTo(event.current.canvasPos);
-        if (this.toRemove.length > 0) {
+        const commands = [];
+        if (this.addCommands.length > 0) {
+            this.addCommands.forEach(cmd => cmd.unapply(this.editor));
+            commands.push(...this.toAdd.map(a => EditorImage.addElement(a)));
+            this.addCommands = [];
+        }
+        if (this.eraseCommands.length > 0) {
             // Undo commands for each individual component and unite into a single command.
-            this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
-            this.partialCommands = [];
+            this.eraseCommands.forEach(cmd => cmd.unapply(this.editor));
+            this.eraseCommands = [];
             const command = new Erase(this.toRemove);
-            this.editor.dispatch(command); // dispatch: Makes undo-able.
+            commands.push(command);
+        }
+        if (commands.length === 1) {
+            this.editor.dispatch(commands[0]); // dispatch: Makes undo-able.
+        }
+        else {
+            this.editor.dispatch(uniteCommands(commands));
         }
         this.clearPreview();
     }
     onGestureCancel() {
-        this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
-        this.partialCommands = [];
+        this.addCommands.forEach(cmd => cmd.unapply(this.editor));
+        this.eraseCommands.forEach(cmd => cmd.unapply(this.editor));
+        this.eraseCommands = [];
+        this.addCommands = [];
         this.clearPreview();
     }
     onKeyPress(event) {
@@ -116,9 +197,14 @@ export default class Eraser extends BaseTool {
         }
         return false;
     }
+    /** Returns the side-length of the tip of this eraser. */
     getThickness() {
         return this.thickness;
     }
+    /** Sets the side-length of this' tip. */
+    setThickness(thickness) {
+        this.thicknessValue.set(thickness);
+    }
     /**
      * Returns a {@link MutableReactiveValue} that can be used to watch
      * this tool's thickness.
@@ -126,7 +212,7 @@ export default class Eraser extends BaseTool {
     getThicknessValue() {
         return this.thicknessValue;
     }
-    setThickness(thickness) {
-        this.thicknessValue.set(thickness);
+    getModeValue() {
+        return this.modeValue;
     }
 }

package/dist/mjs/tools/InputFilter/InputStabilizer.mjs

@@ -8,10 +8,10 @@ var StabilizerType;
 })(StabilizerType || (StabilizerType = {}));
 const defaultOptions = {
     kind: StabilizerType.IntertialStabilizer,
-    mass: 0.4,
-    springConstant: 100.0,
+    mass: 0.4, // kg
+    springConstant: 100.0, // N/m
     frictionCoefficient: 0.28,
-    maxPointDist: 10,
+    maxPointDist: 10, // screen units
     inertiaFraction: 0.75,
     minSimilarityToFinalize: 0.0,
     velocityDecayFactor: 0.1,

package/dist/mjs/tools/PasteHandler.mjs

@@ -23,8 +23,28 @@ export default class PasteHandler extends BaseTool {
     // @internal
     onPaste(event) {
         const mime = event.mime.toLowerCase();
-        if (mime === 'image/svg+xml') {
-            void this.doSVGPaste(event.data);
+        const svgData = (() => {
+            if (mime === 'image/svg+xml') {
+                return event.data;
+            }
+            if (mime !== 'text/html') {
+                return false;
+            }
+            // text/html is sometimes handlable SVG data. Use a hueristic
+            // to determine if this is the case:
+            // We use [^] and not . so that newlines are included.
+            const match = event.data.match(/^[^]{0,200}<svg.*/i); // [^]{0,200} <- Allow for metadata near start
+            if (!match) {
+                return false;
+            }
+            // Extract the SVG element from the pasted data
+            let svgEnd = event.data.toLowerCase().lastIndexOf('</svg>');
+            if (svgEnd === -1)
+                svgEnd = event.data.length;
+            return event.data.substring(event.data.search(/<svg/i), svgEnd);
+        })();
+        if (svgData) {
+            void this.doSVGPaste(svgData);
             return true;
         }
         else if (mime === 'text/plain') {
@@ -38,16 +58,21 @@ export default class PasteHandler extends BaseTool {
         return false;
     }
     async addComponentsFromPaste(components) {
-        await this.editor.addAndCenterComponents(components);
+        await this.editor.addAndCenterComponents(components, true, this.editor.localization.pasted(components.length));
     }
     async doSVGPaste(data) {
-        const sanitize = true;
-        const loader = SVGLoader.fromString(data, sanitize);
-        const components = [];
-        await loader.start((component) => {
-            components.push(component);
-        }, (_countProcessed, _totalToProcess) => null);
-        await this.addComponentsFromPaste(components);
+        this.editor.showLoadingWarning(0);
+        try {
+            const loader = SVGLoader.fromString(data, true);
+            const components = [];
+            await loader.start((component) => {
+                components.push(component);
+            }, (_countProcessed, _totalToProcess) => null);
+            await this.addComponentsFromPaste(components);
+        }
+        finally {
+            this.editor.hideLoadingWarning();
+        }
     }
     async doTextPaste(text) {
         const textTools = this.editor.toolController.getMatchingTools(TextTool);

package/dist/mjs/tools/Pen.mjs

@@ -97,8 +97,8 @@ export default class Pen extends BaseTool {
             this.currentDeviceType = current.device;
             if (this.shapeAutocompletionEnabled) {
                 const stationaryDetectionConfig = {
-                    maxSpeed: 8.5,
-                    maxRadius: 11,
+                    maxSpeed: 8.5, // screenPx/s
+                    maxRadius: 11, // screenPx
                     minTimeSeconds: 0.5, // s
                 };
                 this.stationaryDetector = new StationaryPenDetector(current, stationaryDetectionConfig, pointer => this.autocorrectShape(pointer));