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

extensions/chromium/preferences_schema.json

@@ -243,6 +243,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,6 +170,7 @@ class AnnotationEditorLayer {
    */
   updateMode(mode = this.#uiManager.getMode()) {
     this.#cleanup();
+    this.#toogleEditorPointerEvents(true);
     switch (mode) {
       case AnnotationEditorType.NONE:
         this.div.classList.toggle("nonEditing", true);
@@ -176,6 +179,15 @@ class AnnotationEditorLayer {
         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);
@@ -251,6 +263,20 @@ class AnnotationEditorLayer {
       : this.#uiManager.getEditors(this.pageIndex);
   }
 
+  #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

@@ -91,6 +91,10 @@ class DrawingEditor extends AnnotationEditor {
     this._addOutlines(params);
   }
 
+  get _drawOutlines() {
+    return this.#drawOutlines;
+  }
+
   /** @inheritdoc */
   onUpdatedColor() {
     this._colorPicker?.update(this.color);

src/display/editor/editor.js

@@ -101,6 +101,8 @@ class AnnotationEditor {
 
   _editToolbar = null;
 
+  _erasable = false;
+
   _initialOptions = Object.create(null);
 
   _initialData = null;
@@ -217,6 +219,10 @@ class AnnotationEditor {
     return Object.getPrototypeOf(this).constructor._editorType;
   }
 
+  get erasable() {
+    return this._erasable;
+  }
+
   static get isDrawer() {
     return false;
   }
@@ -508,6 +514,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.