[Editor] Eraser editor and eraser button to be able to erase annotations

extensions/chromium/preferences_schema.json

@@ -239,6 +239,11 @@
       "type": "boolean",
       "default": false
     },
+    "enableEraser": {
+      "description": "Enable the eraser to erase annotations like Ink.",
+      "type": "boolean",
+      "default": false
+    },
     "enableOptimizedPartialRendering": {
       "description": "Enable tracking of PDF operations to optimize partial rendering.",
       "type": "boolean",

src/display/editor/annotation_editor_layer.js

@@ -31,6 +31,7 @@ import {
   FeatureTest,
 } from "../../shared/util.js";
 import { AnnotationEditor } from "./editor.js";
+import { EraserEditor } from "./eraser.js";
 import { FreeTextEditor } from "./freetext.js";
 import { HighlightEditor } from "./highlight.js";
 import { InkEditor } from "./ink.js";
@@ -99,6 +100,7 @@ class AnnotationEditorLayer {
 
   static #editorTypes = new Map(
     [
+      EraserEditor,
       FreeTextEditor,
       InkEditor,
       StampEditor,
@@ -168,13 +170,21 @@ class AnnotationEditorLayer {
    */
   updateMode(mode = this.#uiManager.getMode()) {
     this.#cleanup();
+    this.#toogleEditorPointerEvents(true);
     switch (mode) {
       case AnnotationEditorType.NONE:
         this.disableTextSelection();
         this.togglePointerEvents(false);
         this.toggleAnnotationLayerPointerEvents(true);
         this.disableClick();
         return;
+      case AnnotationEditorType.ERASER:
+        this.#toogleEditorPointerEvents(false);
+        this.disableTextSelection();
+        this.togglePointerEvents(true);
+        this.enableClick();
+        this.addNewEditor({ /* eraser */});
+        break;
       case AnnotationEditorType.INK:
         this.disableTextSelection();
         this.togglePointerEvents(true);
@@ -238,6 +248,20 @@ class AnnotationEditorLayer {
     this.#annotationLayer?.div.classList.toggle("disabled", !enabled);
   }
 
+  #toogleEditorPointerEvents(enabled = false) {
+    const value = enabled ? "" : "none";
+    for (const editor of this.#editors.values()) {
+      editor.div.style.pointerEvents = value;
+      // for highlight editors, we must also set pointer-events
+      // of the clipped child.
+      for (const child of editor.div.children) {
+        if (child.className === "internal") {
+          child.style.pointerEvents = value;
+        }
+      }
+    }
+  }
+
   /**
    * Enable pointer events on the main div in order to enable
    * editor creation.

src/display/editor/draw.js

@@ -16,6 +16,7 @@
 import { AnnotationEditorParamsType, unreachable } from "../../shared/util.js";
 import { noContextMenu, stopEvent } from "../display_utils.js";
 import { AnnotationEditor } from "./editor.js";
+import { CurrentPointers } from "./tools.js";
 
 class DrawingOptions {
   #svgProperties = Object.create(null);
@@ -81,14 +82,6 @@ class DrawingEditor extends AnnotationEditor {
 
   static #currentDrawingOptions = null;
 
-  static #currentPointerId = NaN;
-
-  static #currentPointerType = null;
-
-  static #currentPointerIds = null;
-
-  static #currentMoveTimestamp = NaN;
-
   static _INNER_MARGIN = 3;
 
   constructor(params) {
@@ -98,6 +91,10 @@ class DrawingEditor extends AnnotationEditor {
     this._addOutlines(params);
   }
 
+  get _drawOutlines() {
+    return this.#drawOutlines;
+  }
+
   _addOutlines(params) {
     if (params.drawOutlines) {
       this.#createDrawOutlines(params);
@@ -674,20 +671,15 @@ class DrawingEditor extends AnnotationEditor {
   }
 
   static startDrawing(parent, uiManager, _isLTR, event) {
-    // The _currentPointerType is set when the user starts an empty drawing
-    // session. If, in the same drawing session, the user starts using a
+    // The pointerType of CurrentPointer is set when the user starts an empty
+    // drawing session. If, in the same drawing session, the user starts using a
     // different type of pointer (e.g. a pen and then a finger), we just return.
     //
-    // The _currentPointerId  and _currentPointerIds are used to keep track of
-    // the pointers with a same type (e.g. two fingers). If the user starts to
-    // draw with a finger and then uses a second finger, we just stop the
-    // current drawing and let the user zoom the document.
+    // If the user starts to draw with a finger and then uses a second finger,
+    // we just stop the current drawing and let the user zoom the document.
 
     const { target, offsetX: x, offsetY: y, pointerId, pointerType } = event;
-    if (
-      DrawingEditor.#currentPointerType &&
-      DrawingEditor.#currentPointerType !== pointerType
-    ) {
+    if (CurrentPointers.isInitializedAndDifferentPointerType(pointerType)) {
       return;
     }
 
@@ -700,42 +692,37 @@ class DrawingEditor extends AnnotationEditor {
     const ac = (DrawingEditor.#currentDrawingAC = new AbortController());
     const signal = parent.combinedSignal(ac);
 
-    DrawingEditor.#currentPointerId ||= pointerId;
-    DrawingEditor.#currentPointerType ??= pointerType;
+    CurrentPointers.setPointer(pointerType, pointerId);
 
     window.addEventListener(
       "pointerup",
       e => {
-        if (DrawingEditor.#currentPointerId === e.pointerId) {
+        if (CurrentPointers.isSamePointerIdOrRemove(e.pointerId)) {
           this._endDraw(e);
-        } else {
-          DrawingEditor.#currentPointerIds?.delete(e.pointerId);
         }
       },
       { signal }
     );
     window.addEventListener(
       "pointercancel",
       e => {
-        if (DrawingEditor.#currentPointerId === e.pointerId) {
+        if (CurrentPointers.isSamePointerIdOrRemove(e.pointerId)) {
           this._currentParent.endDrawingSession();
-        } else {
-          DrawingEditor.#currentPointerIds?.delete(e.pointerId);
         }
       },
       { signal }
     );
     window.addEventListener(
       "pointerdown",
       e => {
-        if (DrawingEditor.#currentPointerType !== e.pointerType) {
+        if (!CurrentPointers.isSamePointerType(e.pointerType)) {
           // For example, we started with a pen and the user
           // is now using a finger.
           return;
         }
 
         // For example, the user is using a second finger.
-        (DrawingEditor.#currentPointerIds ||= new Set()).add(e.pointerId);
+        CurrentPointers.initializeAndAddPointerId(e.pointerId);
 
         // The first finger created a first point and a second finger just
         // started, so we stop the drawing and remove this only point.
@@ -761,7 +748,7 @@ class DrawingEditor extends AnnotationEditor {
     target.addEventListener(
       "touchmove",
       e => {
-        if (e.timeStamp === DrawingEditor.#currentMoveTimestamp) {
+        if (CurrentPointers.isSameTimeStamp(e.timeStamp)) {
           // This move event is used to draw so we don't want to scroll.
           stopEvent(e);
         }
@@ -808,16 +795,16 @@ class DrawingEditor extends AnnotationEditor {
   }
 
   static _drawMove(event) {
-    DrawingEditor.#currentMoveTimestamp = -1;
+    CurrentPointers.isSameTimeStamp(event.timeStamp);
     if (!DrawingEditor.#currentDraw) {
       return;
     }
     const { offsetX, offsetY, pointerId } = event;
 
-    if (DrawingEditor.#currentPointerId !== pointerId) {
+    if (!CurrentPointers.isSamePointerId(pointerId)) {
       return;
     }
-    if (DrawingEditor.#currentPointerIds?.size >= 1) {
+    if (CurrentPointers.isUsingMultiplePointers()) {
       // The user is using multiple fingers and the first one is moving.
       this._endDraw(event);
       return;
@@ -827,7 +814,7 @@ class DrawingEditor extends AnnotationEditor {
       DrawingEditor.#currentDraw.add(offsetX, offsetY)
     );
     // We track the timestamp to know if the touchmove event is used to draw.
-    DrawingEditor.#currentMoveTimestamp = event.timeStamp;
+    CurrentPointers.setTimeStamp(event.timeStamp);
     stopEvent(event);
   }
 
@@ -837,15 +824,13 @@ class DrawingEditor extends AnnotationEditor {
       this._currentParent = null;
       DrawingEditor.#currentDraw = null;
       DrawingEditor.#currentDrawingOptions = null;
-      DrawingEditor.#currentPointerType = null;
-      DrawingEditor.#currentMoveTimestamp = NaN;
+      CurrentPointers.clearTimeStamp();
     }
 
     if (DrawingEditor.#currentDrawingAC) {
       DrawingEditor.#currentDrawingAC.abort();
       DrawingEditor.#currentDrawingAC = null;
-      DrawingEditor.#currentPointerId = NaN;
-      DrawingEditor.#currentPointerIds = null;
+      CurrentPointers.clearPointerIds();
     }
   }
 

src/display/editor/editor.js

@@ -101,6 +101,8 @@ class AnnotationEditor {
 
   _editToolbar = null;
 
+  _erasable = false;
+
   _initialOptions = Object.create(null);
 
   _initialData = null;
@@ -215,6 +217,10 @@ class AnnotationEditor {
     return Object.getPrototypeOf(this).constructor._editorType;
   }
 
+  get erasable() {
+    return this._erasable;
+  }
+
   static get isDrawer() {
     return false;
   }
@@ -502,6 +508,21 @@ class AnnotationEditor {
     this.#translate(this.parentDimensions, x, y);
   }
 
+  /**
+   * Erase everything in a radius of (x,y) position.
+   * @param {number} x
+   * @param {number} y
+   * @param {number} radius
+   */
+  erase(x, y, radius) {
+    unreachable("Not implemented");
+  }
+
+  /** call once the erasing operation is done */
+  endErase() {
+    unreachable("Not implemented");
+  }
+
   /**
    * Translate the editor position within its page and adjust the scroll
    * in order to have the editor in the view.