js-draw 1.17.0 → 1.18.0

package/dist/cjs/image/EditorImage.js

@@ -660,7 +660,7 @@ class ImageNode {
             this.bbox = math_1.Rect2.union(...this.children.map(child => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
-            if (!this.bbox.containsRect(oldBBox)) {
+            if (this.bbox.containsRect(oldBBox)) {
                 this.parent?.unionBBoxWith(this.bbox);
             }
             else {

package/dist/cjs/localizations/de.js

@@ -29,7 +29,7 @@ const localization = {
     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',
-    selectPenTip: 'Objekt-Typ: ',
+    selectPenType: 'Objekt-Typ: ',
     roundedTipPen: 'Freihand',
     flatTipPen: 'Stift (druckempfindlich)',
     arrowPen: 'Pfeil',

package/dist/cjs/localizations/es.js

@@ -24,7 +24,7 @@ const localization = {
     save: 'Guardar',
     undo: 'Deshace',
     redo: 'Rehace',
-    selectPenTip: 'Punta',
+    selectPenType: 'Punta',
     selectShape: 'Forma',
     pickColorFromScreen: 'Selecciona un color de la pantalla',
     clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color',

package/dist/cjs/testing/createEditor.d.ts

@@ -1,4 +1,4 @@
-import Editor from '../Editor';
+import Editor, { EditorSettings } from '../Editor';
 /** Creates an editor. Should only be used in test files. */
-declare const _default: () => Editor;
+declare const _default: (settings?: Partial<EditorSettings>) => Editor;
 export default _default;

package/dist/cjs/testing/createEditor.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Display_1 = require("../rendering/Display");
 const Editor_1 = __importDefault(require("../Editor"));
 /** Creates an editor. Should only be used in test files. */
-exports.default = () => {
+exports.default = (settings) => {
     if (jest === undefined) {
         throw new Error('Files in the testing/ folder should only be used in tests!');
     }
-    return new Editor_1.default(document.body, { renderingMode: Display_1.RenderingMode.DummyRenderer });
+    return new Editor_1.default(document.body, { renderingMode: Display_1.RenderingMode.DummyRenderer, ...settings });
 };

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

@@ -1,6 +1,7 @@
 import { Color4 } from '@js-draw/math';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import { PenStyle } from '../tools/Pen';
+import { EraserMode } from '../tools/Eraser';
 export type IconElemType = HTMLImageElement | SVGElement;
 /**
  * Provides icons that can be used in the toolbar and other locations.
@@ -39,7 +40,7 @@ export default class IconProvider {
     makeUndoIcon(): IconElemType;
     makeRedoIcon(): IconElemType;
     makeDropdownIcon(): IconElemType;
-    makeEraserIcon(eraserSize?: number): IconElemType;
+    makeEraserIcon(eraserSize?: number, mode?: EraserMode): IconElemType;
     makeSelectionIcon(): IconElemType;
     makeRotateIcon(): IconElemType;
     makeHandToolIcon(): IconElemType;
@@ -88,6 +89,7 @@ export default class IconProvider {
      * @returns true if the given `penStyle` is known to match a rounded tip type of pen.
      */
     protected isRoundedTipPen(penStyle: PenStyle): boolean;
+    protected isPolylinePen(penStyle: PenStyle): boolean;
     /** Must be overridden by icon packs that need attribution. */
     licenseInfo(): string | null;
 }

package/dist/cjs/toolbar/IconProvider.js

@@ -13,6 +13,8 @@ const math_1 = require("@js-draw/math");
 const SVGRenderer_1 = __importDefault(require("../rendering/renderers/SVGRenderer"));
 const Viewport_1 = __importDefault(require("../Viewport"));
 const FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
+const PolylineBuilder_1 = require("../components/builders/PolylineBuilder");
+const Eraser_1 = require("../tools/Eraser");
 const svgNamespace = 'http://www.w3.org/2000/svg';
 const iconColorFill = `
 	style='fill: var(--icon-color);'
@@ -117,16 +119,23 @@ class IconProvider {
         icon.setAttribute('viewBox', '-10 -10 110 110');
         return icon;
     }
-    makeEraserIcon(eraserSize) {
+    makeEraserIcon(eraserSize, mode) {
         const icon = document.createElementNS(svgNamespace, 'svg');
         eraserSize ??= 10;
         const scaledSize = eraserSize / 4;
         const eraserColor = '#ff70af';
         // Draw an eraser-like shape. Created with Inkscape
         icon.innerHTML = `
+		<defs>
+			<linearGradient id="dash-pattern">
+				<stop offset="80%" stop-color="${eraserColor}"/>
+				<stop offset="85%" stop-color="white"/>
+				<stop offset="90%" stop-color="${eraserColor}"/>
+			</linearGradient>
+		</defs>
 		<g>
 			<path
-				style="fill:${eraserColor}"
+				style="fill:${mode === Eraser_1.EraserMode.PartialStroke ? 'url(#dash-pattern)' : eraserColor}"
 				stroke="black"
 				transform="rotate(41.35)"
 				d="M 52.5 27
@@ -840,7 +849,10 @@ class IconProvider {
      * @returns true if the given `penStyle` is known to match a rounded tip type of pen.
      */
     isRoundedTipPen(penStyle) {
-        return penStyle.factory === FreehandLineBuilder_1.makeFreehandLineBuilder;
+        return penStyle.factory === FreehandLineBuilder_1.makeFreehandLineBuilder || penStyle.factory === PolylineBuilder_1.makePolylineBuilder;
+    }
+    isPolylinePen(penStyle) {
+        return penStyle.factory === PolylineBuilder_1.makePolylineBuilder;
     }
     /** Must be overridden by icon packs that need attribution. */
     licenseInfo() { return null; }

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

@@ -18,8 +18,9 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     cancel: string;
     submit: string;
     roundedTipPen: string;
+    roundedTipPen2: string;
     flatTipPen: string;
-    selectPenTip: string;
+    selectPenType: string;
     selectShape: string;
     colorLabel: string;
     pen: string;
@@ -30,6 +31,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     resizeImageToSelection: string;
     deleteSelection: string;
     duplicateSelection: string;
+    fullStrokeEraser: string;
     pickColorFromScreen: string;
     clickToPickColorAnnouncement: string;
     colorSelectionCanceledAnnouncement: string;
@@ -66,7 +68,10 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     handDropdown__zoomOutHelpText: string;
     handDropdown__resetViewHelpText: string;
     handDropdown__touchPanningHelpText: string;
+    eraserDropdown__baseHelpText: string;
+    eraserDropdown__fullStrokeEraserHelpText: string;
     handDropdown__lockRotationHelpText: string;
+    eraserDropdown__thicknessHelpText: string;
     selectionDropdown__baseHelpText: string;
     selectionDropdown__resizeToHelpText: string;
     selectionDropdown__deleteHelpText: string;

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/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.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);
@@ -26,6 +27,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
         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
@@ -39,6 +41,11 @@ 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
             {
@@ -72,7 +79,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
                 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!');
@@ -116,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 {
@@ -136,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,16 +56,24 @@ 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.distanceTo(this.lastPoint) === 0) {
             return;
@@ -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/PasteHandler.js

@@ -49,7 +49,6 @@ class PasteHandler extends BaseTool_1.default {
             return event.data.substring(event.data.search(/<svg/i), svgEnd);
         })();
         if (svgData) {
-            console.log('svgpaste', svgData);
             void this.doSVGPaste(svgData);
             return true;
         }