js-draw 1.17.0 → 1.18.0

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,16 +50,24 @@ 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.distanceTo(this.lastPoint) === 0) {
             return;
@@ -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/PasteHandler.mjs

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

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

@@ -1,6 +1,3 @@
-/**
- * @packageDocumentation
- */
 export { default as BaseTool } from './BaseTool';
 export { default as ToolController } from './ToolController';
 export { default as ToolEnabledGroup } from './ToolEnabledGroup';
@@ -11,7 +8,7 @@ export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
-export { default as EraserTool } from './Eraser';
+export { default as EraserTool, EraserMode } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
 export { default as SoundUITool } from './SoundUITool';
 export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/dist/mjs/tools/lib.mjs

@@ -1,6 +1,3 @@
-/**
- * @packageDocumentation
- */
 export  { default as BaseTool }  from './BaseTool.mjs';
 export  { default as ToolController }  from './ToolController.mjs';
 export  { default as ToolEnabledGroup }  from './ToolEnabledGroup.mjs';
@@ -11,7 +8,7 @@ export  { default as PenTool }  from './Pen.mjs';
 export  { default as TextTool }  from './TextTool.mjs';
 export  { default as SelectionTool }  from './SelectionTool/SelectionTool.mjs';
 export  { default as SelectAllShortcutHandler }  from './SelectionTool/SelectAllShortcutHandler.mjs';
-export  { default as EraserTool }  from './Eraser.mjs';
+export  { default as EraserTool, EraserMode }  from './Eraser.mjs';
 export  { default as PasteHandler }  from './PasteHandler.mjs';
 export  { default as SoundUITool }  from './SoundUITool.mjs';
 export  { default as ToolbarShortcutHandler }  from './ToolbarShortcutHandler.mjs';

package/dist/mjs/version.mjs

@@ -4,5 +4,5 @@
  * @internal
  */
 export default {
-    number: '1.17.0',
+    number: '1.18.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -64,7 +64,7 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.17.0",
+    "@js-draw/math": "^1.18.0",
     "@melloware/coloris": "0.22.0"
   },
   "devDependencies": {
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "d0eff585750ab5670af3acda8ddff090e8825bd3"
+  "gitHead": "73c0d802a8439b5d408ba1e60f91be029db7e402"
 }