Merge pull request #18586 from Snuffleupagus/editor-AbortSignal-any

[Editor] Remove event listeners with `AbortSignal.any()`

Author: Snuffleupagus

src/display/editor/annotation_editor_layer.js

@@ -61,11 +61,7 @@ class AnnotationEditorLayer {
 
   #annotationLayer = null;
 
-  #boundPointerup = null;
-
-  #boundPointerdown = null;
-
-  #boundTextLayerPointerDown = null;
+  #clickAC = null;
 
   #editorFocusTimeoutId = null;
 
@@ -79,6 +75,8 @@ class AnnotationEditorLayer {
 
   #textLayer = null;
 
+  #textSelectionAC = null;
+
   #uiManager;
 
   static _initialized = false;
@@ -365,25 +363,25 @@ class AnnotationEditorLayer {
 
   enableTextSelection() {
     this.div.tabIndex = -1;
-    if (this.#textLayer?.div && !this.#boundTextLayerPointerDown) {
-      this.#boundTextLayerPointerDown = this.#textLayerPointerDown.bind(this);
+    if (this.#textLayer?.div && !this.#textSelectionAC) {
+      this.#textSelectionAC = new AbortController();
+      const signal = this.#uiManager.combinedSignal(this.#textSelectionAC);
+
       this.#textLayer.div.addEventListener(
         "pointerdown",
-        this.#boundTextLayerPointerDown,
-        { signal: this.#uiManager._signal }
+        this.#textLayerPointerDown.bind(this),
+        { signal }
       );
       this.#textLayer.div.classList.add("highlighting");
     }
   }
 
   disableTextSelection() {
     this.div.tabIndex = 0;
-    if (this.#textLayer?.div && this.#boundTextLayerPointerDown) {
-      this.#textLayer.div.removeEventListener(
-        "pointerdown",
-        this.#boundTextLayerPointerDown
-      );
-      this.#boundTextLayerPointerDown = null;
+    if (this.#textLayer?.div && this.#textSelectionAC) {
+      this.#textSelectionAC.abort();
+      this.#textSelectionAC = null;
+
       this.#textLayer.div.classList.remove("highlighting");
     }
   }
@@ -428,26 +426,23 @@ class AnnotationEditorLayer {
   }
 
   enableClick() {
-    if (this.#boundPointerdown) {
+    if (this.#clickAC) {
       return;
     }
-    const signal = this.#uiManager._signal;
-    this.#boundPointerdown = this.pointerdown.bind(this);
-    this.#boundPointerup = this.pointerup.bind(this);
-    this.div.addEventListener("pointerdown", this.#boundPointerdown, {
+    this.#clickAC = new AbortController();
+    const signal = this.#uiManager.combinedSignal(this.#clickAC);
+
+    this.div.addEventListener("pointerdown", this.pointerdown.bind(this), {
+      signal,
+    });
+    this.div.addEventListener("pointerup", this.pointerup.bind(this), {
       signal,
     });
-    this.div.addEventListener("pointerup", this.#boundPointerup, { signal });
   }
 
   disableClick() {
-    if (!this.#boundPointerdown) {
-      return;
-    }
-    this.div.removeEventListener("pointerdown", this.#boundPointerdown);
-    this.div.removeEventListener("pointerup", this.#boundPointerup);
-    this.#boundPointerdown = null;
-    this.#boundPointerup = null;
+    this.#clickAC?.abort();
+    this.#clickAC = null;
   }
 
   attach(editor) {
@@ -611,8 +606,8 @@ class AnnotationEditorLayer {
     return AnnotationEditorLayer.#editorTypes.get(this.#uiManager.getMode());
   }
 
-  get _signal() {
-    return this.#uiManager._signal;
+  combinedSignal(ac) {
+    return this.#uiManager.combinedSignal(ac);
   }
 
   /**

src/display/editor/editor.js

@@ -54,9 +54,7 @@ class AnnotationEditor {
 
   #savedDimensions = null;
 
-  #boundFocusin = this.focusin.bind(this);
-
-  #boundFocusout = this.focusout.bind(this);
+  #focusAC = null;
 
   #focusedResizerName = "";
 
@@ -758,16 +756,17 @@ class AnnotationEditor {
 
     this.#altText?.toggle(false);
 
-    const boundResizerPointermove = this.#resizerPointermove.bind(this, name);
     const savedDraggable = this._isDraggable;
     this._isDraggable = false;
-    const signal = this._uiManager._signal;
-    const pointerMoveOptions = { passive: true, capture: true, signal };
+
+    const ac = new AbortController();
+    const signal = this._uiManager.combinedSignal(ac);
+
     this.parent.togglePointerEvents(false);
     window.addEventListener(
       "pointermove",
-      boundResizerPointermove,
-      pointerMoveOptions
+      this.#resizerPointermove.bind(this, name),
+      { passive: true, capture: true, signal }
     );
     window.addEventListener("contextmenu", noContextMenu, { signal });
     const savedX = this.x;
@@ -780,17 +779,10 @@ class AnnotationEditor {
       window.getComputedStyle(event.target).cursor;
 
     const pointerUpCallback = () => {
+      ac.abort();
       this.parent.togglePointerEvents(true);
       this.#altText?.toggle(true);
       this._isDraggable = savedDraggable;
-      window.removeEventListener("pointerup", pointerUpCallback);
-      window.removeEventListener("blur", pointerUpCallback);
-      window.removeEventListener(
-        "pointermove",
-        boundResizerPointermove,
-        pointerMoveOptions
-      );
-      window.removeEventListener("contextmenu", noContextMenu);
       this.parent.div.style.cursor = savedParentCursor;
       this.div.style.cursor = savedCursor;
 
@@ -1069,10 +1061,7 @@ class AnnotationEditor {
     }
 
     this.setInForeground();
-
-    const signal = this._uiManager._signal;
-    this.div.addEventListener("focusin", this.#boundFocusin, { signal });
-    this.div.addEventListener("focusout", this.#boundFocusout, { signal });
+    this.#addFocusListeners();
 
     const [parentWidth, parentHeight] = this.parentDimensions;
     if (this.parentRotation % 180 !== 0) {
@@ -1132,14 +1121,14 @@ class AnnotationEditor {
     const isSelected = this._uiManager.isSelected(this);
     this._uiManager.setUpDragSession();
 
-    let pointerMoveOptions, pointerMoveCallback;
-    const signal = this._uiManager._signal;
+    const ac = new AbortController();
+    const signal = this._uiManager.combinedSignal(ac);
+
     if (isSelected) {
       this.div.classList.add("moving");
-      pointerMoveOptions = { passive: true, capture: true, signal };
       this.#prevDragX = event.clientX;
       this.#prevDragY = event.clientY;
-      pointerMoveCallback = e => {
+      const pointerMoveCallback = e => {
         const { clientX: x, clientY: y } = e;
         const [tx, ty] = this.screenToPageTranslation(
           x - this.#prevDragX,
@@ -1149,23 +1138,17 @@ class AnnotationEditor {
         this.#prevDragY = y;
         this._uiManager.dragSelectedEditors(tx, ty);
       };
-      window.addEventListener(
-        "pointermove",
-        pointerMoveCallback,
-        pointerMoveOptions
-      );
+      window.addEventListener("pointermove", pointerMoveCallback, {
+        passive: true,
+        capture: true,
+        signal,
+      });
     }
 
     const pointerUpCallback = () => {
-      window.removeEventListener("pointerup", pointerUpCallback);
-      window.removeEventListener("blur", pointerUpCallback);
+      ac.abort();
       if (isSelected) {
         this.div.classList.remove("moving");
-        window.removeEventListener(
-          "pointermove",
-          pointerMoveCallback,
-          pointerMoveOptions
-        );
       }
 
       this.#hasBeenClicked = false;
@@ -1323,15 +1306,24 @@ class AnnotationEditor {
     return this.div && !this.isAttachedToDOM;
   }
 
+  #addFocusListeners() {
+    if (this.#focusAC || !this.div) {
+      return;
+    }
+    this.#focusAC = new AbortController();
+    const signal = this._uiManager.combinedSignal(this.#focusAC);
+
+    this.div.addEventListener("focusin", this.focusin.bind(this), { signal });
+    this.div.addEventListener("focusout", this.focusout.bind(this), { signal });
+  }
+
   /**
    * Rebuild the editor in case it has been removed on undo.
    *
    * To implement in subclasses.
    */
   rebuild() {
-    const signal = this._uiManager._signal;
-    this.div?.addEventListener("focusin", this.#boundFocusin, { signal });
-    this.div?.addEventListener("focusout", this.#boundFocusout, { signal });
+    this.#addFocusListeners();
   }
 
   /**
@@ -1401,8 +1393,8 @@ class AnnotationEditor {
    * It's used on ctrl+backspace action.
    */
   remove() {
-    this.div.removeEventListener("focusin", this.#boundFocusin);
-    this.div.removeEventListener("focusout", this.#boundFocusout);
+    this.#focusAC?.abort();
+    this.#focusAC = null;
 
     if (!this.isEmpty()) {
       // The editor is removed but it can be back at some point thanks to

src/display/editor/freetext.js

@@ -38,22 +38,14 @@ const EOL_PATTERN = /\r\n?|\n/g;
  * Basic text editor in order to create a FreeTex annotation.
  */
 class FreeTextEditor extends AnnotationEditor {
-  #boundEditorDivBlur = this.editorDivBlur.bind(this);
-
-  #boundEditorDivFocus = this.editorDivFocus.bind(this);
-
-  #boundEditorDivInput = this.editorDivInput.bind(this);
-
-  #boundEditorDivKeydown = this.editorDivKeydown.bind(this);
-
-  #boundEditorDivPaste = this.editorDivPaste.bind(this);
-
   #color;
 
   #content = "";
 
   #editorDivId = `${this.id}-editor`;
 
+  #editModeAC = null;
+
   #fontSize;
 
   #initialData = null;
@@ -307,20 +299,31 @@ class FreeTextEditor extends AnnotationEditor {
     this.editorDiv.contentEditable = true;
     this._isDraggable = false;
     this.div.removeAttribute("aria-activedescendant");
-    const signal = this._uiManager._signal;
-    this.editorDiv.addEventListener("keydown", this.#boundEditorDivKeydown, {
-      signal,
-    });
-    this.editorDiv.addEventListener("focus", this.#boundEditorDivFocus, {
+
+    if (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) {
+      assert(
+        !this.#editModeAC,
+        "No `this.#editModeAC` AbortController should exist."
+      );
+    }
+    this.#editModeAC = new AbortController();
+    const signal = this._uiManager.combinedSignal(this.#editModeAC);
+
+    this.editorDiv.addEventListener(
+      "keydown",
+      this.editorDivKeydown.bind(this),
+      { signal }
+    );
+    this.editorDiv.addEventListener("focus", this.editorDivFocus.bind(this), {
       signal,
     });
-    this.editorDiv.addEventListener("blur", this.#boundEditorDivBlur, {
+    this.editorDiv.addEventListener("blur", this.editorDivBlur.bind(this), {
       signal,
     });
-    this.editorDiv.addEventListener("input", this.#boundEditorDivInput, {
+    this.editorDiv.addEventListener("input", this.editorDivInput.bind(this), {
       signal,
     });
-    this.editorDiv.addEventListener("paste", this.#boundEditorDivPaste, {
+    this.editorDiv.addEventListener("paste", this.editorDivPaste.bind(this), {
       signal,
     });
   }
@@ -337,11 +340,9 @@ class FreeTextEditor extends AnnotationEditor {
     this.editorDiv.contentEditable = false;
     this.div.setAttribute("aria-activedescendant", this.#editorDivId);
     this._isDraggable = true;
-    this.editorDiv.removeEventListener("keydown", this.#boundEditorDivKeydown);
-    this.editorDiv.removeEventListener("focus", this.#boundEditorDivFocus);
-    this.editorDiv.removeEventListener("blur", this.#boundEditorDivBlur);
-    this.editorDiv.removeEventListener("input", this.#boundEditorDivInput);
-    this.editorDiv.removeEventListener("paste", this.#boundEditorDivPaste);
+
+    this.#editModeAC?.abort();
+    this.#editModeAC = null;
 
     // On Chrome, the focus is given to <body> when contentEditable is set to
     // false, hence we focus the div.

src/display/editor/highlight.js

@@ -700,34 +700,33 @@ class HighlightEditor extends AnnotationEditor {
       width: parentWidth,
       height: parentHeight,
     } = textLayer.getBoundingClientRect();
-    const pointerMove = e => {
-      this.#highlightMove(parent, e);
-    };
-    const signal = parent._signal;
-    const pointerDownOptions = { capture: true, passive: false, signal };
+
+    const ac = new AbortController();
+    const signal = parent.combinedSignal(ac);
+
     const pointerDown = e => {
       // Avoid to have undesired clicks during the drawing.
       e.preventDefault();
       e.stopPropagation();
     };
     const pointerUpCallback = e => {
-      textLayer.removeEventListener("pointermove", pointerMove);
-      window.removeEventListener("blur", pointerUpCallback);
-      window.removeEventListener("pointerup", pointerUpCallback);
-      window.removeEventListener(
-        "pointerdown",
-        pointerDown,
-        pointerDownOptions
-      );
-      window.removeEventListener("contextmenu", noContextMenu);
+      ac.abort();
       this.#endHighlight(parent, e);
     };
     window.addEventListener("blur", pointerUpCallback, { signal });
     window.addEventListener("pointerup", pointerUpCallback, { signal });
-    window.addEventListener("pointerdown", pointerDown, pointerDownOptions);
+    window.addEventListener("pointerdown", pointerDown, {
+      capture: true,
+      passive: false,
+      signal,
+    });
     window.addEventListener("contextmenu", noContextMenu, { signal });
 
-    textLayer.addEventListener("pointermove", pointerMove, { signal });
+    textLayer.addEventListener(
+      "pointermove",
+      this.#highlightMove.bind(this, parent),
+      { signal }
+    );
     this._freeHighlight = new FreeOutliner(
       { x, y },
       [layerX, layerY, parentWidth, parentHeight],