js-draw 1.16.1 → 1.18.0

package/dist/cjs/toolbar/localization.js

@@ -30,7 +30,8 @@ exports.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',
@@ -48,6 +49,7 @@ exports.defaultToolbarLocalization = {
     strokeAutocorrect: 'Autocorrect',
     touchPanning: 'Touchscreen panning',
     roundedTipPen: 'Round',
+    roundedTipPen2: 'Polyline',
     flatTipPen: 'Flat',
     arrowPen: 'Arrow',
     linePen: 'Line',
@@ -62,7 +64,7 @@ exports.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.',
@@ -72,6 +74,9 @@ exports.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/cjs/toolbar/widgets/DocumentPropertiesWidget.js

@@ -194,7 +194,30 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
             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/cjs/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/cjs/toolbar/widgets/EraserToolWidget.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const Eraser_1 = require("../../tools/Eraser");
 const types_1 = require("../../types");
 const constants_1 = require("../constants");
 const BaseToolWidget_1 = __importDefault(require("./BaseToolWidget"));
@@ -19,26 +20,57 @@ class EraserToolWidget extends BaseToolWidget_1.default {
             }
         });
     }
+    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 = `${constants_1.toolbarCSSPrefix}eraserToolWidget-${EraserToolWidget.idCounter++}`;
+        labelElement.htmlFor = checkboxElement.id;
+        labelElement.innerText = this.localizationTable.fullStrokeEraser;
+        checkboxElement.type = 'checkbox';
+        checkboxElement.oninput = () => {
+            this.tool.getModeValue().set(checkboxElement.checked ? Eraser_1.EraserMode.FullStroke : Eraser_1.EraserMode.PartialStroke);
+        };
+        const updateValue = () => {
+            checkboxElement.checked = this.tool.getModeValue().get() === Eraser_1.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(`${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
         const thicknessSlider = (0, makeThicknessSlider_1.default)(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;
     }
@@ -46,6 +78,7 @@ class EraserToolWidget extends BaseToolWidget_1.default {
         return {
             ...super.serializeState(),
             thickness: this.tool.getThickness(),
+            mode: this.tool.getModeValue().get(),
         };
     }
     deserializeFrom(state) {
@@ -57,6 +90,13 @@ class EraserToolWidget extends BaseToolWidget_1.default {
             }
             this.tool.setThickness(parsedThickness);
         }
+        if (state.mode) {
+            const mode = state.mode;
+            if (Object.values(Eraser_1.EraserMode).includes(mode)) {
+                this.tool.getModeValue().set(mode);
+            }
+        }
     }
 }
+EraserToolWidget.idCounter = 0;
 exports.default = EraserToolWidget;

package/dist/cjs/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/cjs/toolbar/widgets/PenToolWidget.js

@@ -17,6 +17,7 @@ const keybindings_1 = require("./keybindings");
 const constants_1 = require("../constants");
 const makeThicknessSlider_1 = __importDefault(require("./components/makeThicknessSlider"));
 const makeGridSelector_1 = __importDefault(require("./components/makeGridSelector"));
+const PolylineBuilder_1 = require("../../components/builders/PolylineBuilder");
 class PenToolWidget extends BaseToolWidget_1.default {
     constructor(editor, tool, localization) {
         super(editor, tool, 'pen', localization);
@@ -24,8 +25,12 @@ class PenToolWidget extends BaseToolWidget_1.default {
         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',
@@ -36,6 +41,13 @@ class PenToolWidget extends BaseToolWidget_1.default {
                 id: 'freehand-pen',
                 factory: FreehandLineBuilder_1.makeFreehandLineBuilder,
             },
+            {
+                name: this.localizationTable.roundedTipPen2,
+                id: 'polyline-pen',
+                factory: PolylineBuilder_1.makePolylineBuilder,
+            },
+            ...(additionalPens.filter(pen => !pen.isShapeBuilder)),
+            // Shape pens
             {
                 name: this.localizationTable.arrowPen,
                 id: 'arrow',
@@ -65,8 +77,9 @@ class PenToolWidget extends BaseToolWidget_1.default {
                 id: 'outlined-circle',
                 isShapeBuilder: true,
                 factory: CircleBuilder_1.makeOutlinedCircleBuilder,
-            }
-        ];
+            },
+            ...(additionalPens.filter(pen => pen.isShapeBuilder)),
+        ].filter(filterPens);
         this.editor.notifier.on(types_1.EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind !== types_1.EditorEventType.ToolUpdated) {
                 throw new Error('Invalid event type!');
@@ -110,7 +123,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
             style.factory = record.factory;
         }
         const strokeFactory = record?.factory;
-        if (!strokeFactory || strokeFactory === FreehandLineBuilder_1.makeFreehandLineBuilder || strokeFactory === PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder) {
+        if (!strokeFactory || strokeFactory === FreehandLineBuilder_1.makeFreehandLineBuilder || strokeFactory === PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder || strokeFactory === PolylineBuilder_1.makePolylineBuilder) {
             return this.editor.icons.makePenIcon(style);
         }
         else {
@@ -130,7 +143,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
                 isShapeBuilder: penType.isShapeBuilder ?? false,
             };
         });
-        const penSelector = (0, makeGridSelector_1.default)(this.localizationTable.selectPenTip, this.getCurrentPenTypeIdx(), allChoices.filter(choice => !choice.isShapeBuilder));
+        const penSelector = (0, makeGridSelector_1.default)(this.localizationTable.selectPenType, this.getCurrentPenTypeIdx(), allChoices.filter(choice => !choice.isShapeBuilder));
         const shapeSelector = (0, makeGridSelector_1.default)(this.localizationTable.selectShape, this.getCurrentPenTypeIdx(), allChoices.filter(choice => choice.isShapeBuilder));
         const onSelectorUpdate = (newPenTypeIndex) => {
             this.tool.setStrokeFactory(this.penTypes[newPenTypeIndex].factory);

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

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

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

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

package/dist/cjs/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/cjs/tools/Eraser.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.EraserMode = void 0;
 const types_1 = require("../types");
 const BaseTool_1 = __importDefault(require("./BaseTool"));
 const math_1 = require("@js-draw/math");
@@ -10,15 +11,24 @@ const Erase_1 = __importDefault(require("../commands/Erase"));
 const Pointer_1 = require("../Pointer");
 const keybindings_1 = require("./keybindings");
 const ReactiveValue_1 = require("../util/ReactiveValue");
+const EditorImage_1 = __importDefault(require("../image/EditorImage"));
+const uniteCommands_1 = __importDefault(require("../commands/uniteCommands"));
+const RenderablePathSpec_1 = require("../rendering/RenderablePathSpec");
+var EraserMode;
+(function (EraserMode) {
+    EraserMode["PartialStroke"] = "partial-stroke";
+    EraserMode["FullStroke"] = "full-stroke";
+})(EraserMode || (exports.EraserMode = EraserMode = {}));
 class Eraser extends BaseTool_1.default {
-    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_1.ReactiveValue.fromInitialValue(this.thickness);
         this.thicknessValue.onUpdate(value => {
             this.thickness = value;
@@ -27,6 +37,13 @@ class Eraser extends BaseTool_1.default {
                 tool: this,
             });
         });
+        this.modeValue = ReactiveValue_1.ReactiveValue.fromInitialValue(options?.mode ?? EraserMode.FullStroke);
+        this.modeValue.onUpdate(_value => {
+            this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
+                kind: types_1.EditorEventType.ToolUpdated,
+                tool: this,
+            });
+        });
     }
     clearPreview() {
         this.editor.clearWetInk();
@@ -39,18 +56,26 @@ class Eraser extends BaseTool_1.default {
         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: math_1.Color4.gray,
+            fill: math_1.Color4.transparent,
+            stroke: { width: size / 10, color: math_1.Color4.gray },
         };
-        renderer.drawRect(rect, size / 4, fill);
+        renderer.drawPath((0, RenderablePathSpec_1.pathToRenderable)(math_1.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 = math_1.Vec2.of(size / 2, size / 2);
         return math_1.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;
@@ -65,13 +90,55 @@ class Eraser extends BaseTool_1.default {
         });
         // 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_1.default([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_1.default([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 = math_1.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_1.default(toErase);
+            const newAddCommands = toAdd.map(elem => EditorImage_1.default.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_1.default(finalToErase));
+            this.addCommands.push(...newAddCommands);
+        }
         this.drawPreviewAt(currentPoint);
         this.lastPoint = currentPoint;
     }
@@ -79,6 +146,7 @@ class Eraser extends BaseTool_1.default {
         if (event.allPointers.length === 1 || event.current.device === Pointer_1.PointerDevice.Eraser) {
             this.lastPoint = event.current.canvasPos;
             this.toRemove = [];
+            this.toAdd = [];
             this.isFirstEraseEvt = true;
             this.drawPreviewAt(event.current.canvasPos);
             return true;
@@ -91,18 +159,32 @@ class Eraser extends BaseTool_1.default {
     }
     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_1.default.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_1.default(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((0, uniteCommands_1.default)(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) {
@@ -121,9 +203,14 @@ class Eraser extends BaseTool_1.default {
         }
         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.
@@ -131,8 +218,8 @@ class Eraser extends BaseTool_1.default {
     getThicknessValue() {
         return this.thicknessValue;
     }
-    setThickness(thickness) {
-        this.thicknessValue.set(thickness);
+    getModeValue() {
+        return this.modeValue;
     }
 }
 exports.default = Eraser;

package/dist/cjs/tools/InputFilter/InputStabilizer.js

@@ -13,10 +13,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/cjs/tools/PasteHandler.js

@@ -28,8 +28,28 @@ class PasteHandler extends BaseTool_1.default {
     // @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') {
@@ -43,16 +63,21 @@ class PasteHandler extends BaseTool_1.default {
         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_1.default.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_1.default.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_1.default);

package/dist/cjs/tools/Pen.js

@@ -102,8 +102,8 @@ class Pen extends BaseTool_1.default {
             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_1.default(current, stationaryDetectionConfig, pointer => this.autocorrectShape(pointer));