Merge pull request #17506 from calixteman/editor_free_highlight

[Editor] Add the ability to make a free highlight (i.e. without having to select some text) (bug 1856218)

src/display/draw_layer.js

@@ -28,6 +28,8 @@ class DrawLayer {
 
   #mapping = new Map();
 
+  #toUpdate = new Map();
+
   constructor({ pageIndex }) {
     this.pageIndex = pageIndex;
   }
@@ -53,7 +55,7 @@ class DrawLayer {
     return shadow(this, "_svgFactory", new DOMSVGFactory());
   }
 
-  static #setBox(element, { x, y, width, height }) {
+  static #setBox(element, { x = 0, y = 0, width = 1, height = 1 } = {}) {
     const { style } = element;
     style.top = `${100 * y}%`;
     style.left = `${100 * x}%`;
@@ -83,10 +85,13 @@ class DrawLayer {
     return clipPathId;
   }
 
-  highlight(outlines, color, opacity) {
+  highlight(outlines, color, opacity, isPathUpdatable = false) {
     const id = this.#id++;
     const root = this.#createSVG(outlines.box);
     root.classList.add("highlight");
+    if (outlines.free) {
+      root.classList.add("free");
+    }
     const defs = DrawLayer._svgFactory.createElement("defs");
     root.append(defs);
     const path = DrawLayer._svgFactory.createElement("path");
@@ -95,6 +100,10 @@ class DrawLayer {
     path.setAttribute("id", pathId);
     path.setAttribute("d", outlines.toSVGPath());
 
+    if (isPathUpdatable) {
+      this.#toUpdate.set(id, path);
+    }
+
     // Create the clipping path for the editor div.
     const clipPathId = this.#createClipPath(defs, pathId);
 
@@ -139,6 +148,22 @@ class DrawLayer {
     return id;
   }
 
+  finalizeLine(id, line) {
+    const path = this.#toUpdate.get(id);
+    this.#toUpdate.delete(id);
+    this.updateBox(id, line.box);
+    path.setAttribute("d", line.toSVGPath());
+  }
+
+  removeFreeHighlight(id) {
+    this.remove(id);
+    this.#toUpdate.delete(id);
+  }
+
+  updatePath(id, line) {
+    this.#toUpdate.get(id).setAttribute("d", line.toSVGPath());
+  }
+
   updateBox(id, box) {
     DrawLayer.#setBox(this.#mapping.get(id), box);
   }

src/display/editor/annotation_editor_layer.js

@@ -67,6 +67,8 @@ class AnnotationEditorLayer {
 
   #boundPointerdown = this.pointerdown.bind(this);
 
+  #boundTextLayerPointerDown = this.#textLayerPointerDown.bind(this);
+
   #editorFocusTimeoutId = null;
 
   #boundSelectionStart = this.selectionStart.bind(this);
@@ -199,7 +201,7 @@ class AnnotationEditorLayer {
       }
     }
 
-    const editor = this.#createAndAddNewEditor(
+    const editor = this.createAndAddNewEditor(
       { offsetX: 0, offsetY: 0 },
       /* isCentered = */ false
     );
@@ -328,12 +330,34 @@ class AnnotationEditorLayer {
   enableTextSelection() {
     if (this.#textLayer?.div) {
       document.addEventListener("selectstart", this.#boundSelectionStart);
+      this.#textLayer.div.addEventListener(
+        "pointerdown",
+        this.#boundTextLayerPointerDown
+      );
+      this.#textLayer.div.classList.add("drawing");
     }
   }
 
   disableTextSelection() {
     if (this.#textLayer?.div) {
       document.removeEventListener("selectstart", this.#boundSelectionStart);
+      this.#textLayer.div.removeEventListener(
+        "pointerdown",
+        this.#boundTextLayerPointerDown
+      );
+      this.#textLayer.div.classList.remove("drawing");
+    }
+  }
+
+  #textLayerPointerDown(event) {
+    if (event.target === this.#textLayer.div) {
+      const { isMac } = FeatureTest.platform;
+      if (event.button !== 0 || (event.ctrlKey && isMac)) {
+        // Do nothing on right click.
+        return;
+      }
+      HighlightEditor.startHighlighting(this, event);
+      event.preventDefault();
     }
   }
 
@@ -565,7 +589,7 @@ class AnnotationEditorLayer {
    * @param [Object] data
    * @returns {AnnotationEditor}
    */
-  #createAndAddNewEditor(event, isCentered, data = {}) {
+  createAndAddNewEditor(event, isCentered, data = {}) {
     const id = this.getNextId();
     const editor = this.#createNewEditor({
       parent: this,
@@ -603,10 +627,7 @@ class AnnotationEditorLayer {
    * Create and add a new editor.
    */
   addNewEditor() {
-    this.#createAndAddNewEditor(
-      this.#getCenterPoint(),
-      /* isCentered = */ true
-    );
+    this.createAndAddNewEditor(this.#getCenterPoint(), /* isCentered = */ true);
   }
 
   /**
@@ -726,7 +747,7 @@ class AnnotationEditorLayer {
       boxes.push(rotator(x, y, width, height));
     }
     if (boxes.length !== 0) {
-      this.#createAndAddNewEditor(event, false, {
+      this.createAndAddNewEditor(event, false, {
         boxes,
       });
     }
@@ -767,7 +788,7 @@ class AnnotationEditorLayer {
       return;
     }
 
-    this.#createAndAddNewEditor(event, /* isCentered = */ false);
+    this.createAndAddNewEditor(event, /* isCentered = */ false);
   }
 
   /**
@@ -901,6 +922,10 @@ class AnnotationEditorLayer {
     const { pageWidth, pageHeight } = this.viewport.rawDims;
     return [pageWidth, pageHeight];
   }
+
+  get scale() {
+    return this.#uiManager.viewParameters.realScale;
+  }
 }
 
 export { AnnotationEditorLayer };