Fix line editing interface when annotation already selected (#342)

* Initial plan

* Fix line editing interface to react when annotation already selected

- Call applyCursorBehavior() in startLineEditing() if annotation already selected
- Call applyCursorBehavior() in toggleAddLines() when annotation already selected
- Call applyCursorBehavior() in toggleMergeLines() when annotation already selected
- Prevent duplicate event listener attachment with _tpenListenersAttached flag

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

* Improve event listener tracking using WeakSet

- Replace DOM property _tpenListenersAttached with WeakSet
- Add private field #elementsWithListeners to track elements
- This prevents modifying DOM elements and avoids potential memory leaks

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

* Add clarifying comment for mouseStart/mouseFinish variables

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

* Add clarifying comment about ruler usage in merge mode

Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>

* unused

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>
Co-authored-by: cubap <cubap@slu.edu>
Co-authored-by: Bryan Haberberger <bryan.j.haberberger@slu.edu>

Author: 3 people

components/annotorious-annotator/line-parser.js

@@ -1081,12 +1081,17 @@ class AnnotoriousAnnotator extends HTMLElement {
       this.shadowRoot.querySelectorAll(".toggleEditType").forEach(el => { el.classList.remove("selected") })
       e.target.classList.add("selected")
       this.#editType = "add"
-      if (this.#annotoriousInstance.getSelected().length) ruler.style.display = "block"
+      if (this.#annotoriousInstance.getSelected().length) {
+        ruler.style.display = "block"
+        // Apply cursor behavior if an annotation is already selected
+        this.applyCursorBehavior()
+      }
     }
   }
 
   toggleMergeLines(e) {
     if (!this.#isLineEditing) return
+    // Merge mode doesn't use the ruler (only add mode does)
     this.removeRuler()
     if (e.target.classList.contains("selected")) {
       e.target.classList.remove("selected")
@@ -1097,8 +1102,13 @@ class AnnotoriousAnnotator extends HTMLElement {
       this.shadowRoot.querySelectorAll(".toggleEditType").forEach(el => { el.classList.remove("selected") })
       e.target.classList.add("selected")
       this.#editType = "merge"
-      // Don't strictly HAVE to cancel, but it helps control the cursor.
-      this.#annotoriousInstance.cancelSelected()
+      // Apply cursor behavior if an annotation is already selected
+      if (this.#annotoriousInstance.getSelected().length) {
+        this.applyCursorBehavior()
+      } else {
+        // Don't strictly HAVE to cancel, but it helps control the cursor.
+        this.#annotoriousInstance.cancelSelected()
+      }
     }
   }
 
@@ -1193,6 +1203,10 @@ class AnnotoriousAnnotator extends HTMLElement {
     this.shadowRoot.querySelector(".editOptions").style.display = "block"
     this.shadowRoot.querySelectorAll(".toggleEditType").forEach(el => { el.classList.remove("selected") })
     this.#editType = ""
+    // If an annotation is already selected, update the cursor behavior
+    if (this.#annotoriousInstance.getSelected().length) {
+      this.applyCursorBehavior()
+    }
     const toast = {
       message: "You started line editing",
       status: "info"
@@ -1431,8 +1445,6 @@ class AnnotoriousAnnotator extends HTMLElement {
     const cursorHandleElem = this.#annotoriousInstance.viewer.element.querySelector(".a9s-shape-handle")
     const ruler = this.shadowRoot.getElementById("ruler")
     const _this = this
-    let mouseStart = 0
-    let mouseFinish = 0
 
     // Cursor support for editing options, applies when an Annotation is clicked and selected.
     if (this.#isLineEditing) {
@@ -1452,6 +1464,11 @@ class AnnotoriousAnnotator extends HTMLElement {
       cursorHandleElem.style.cursor = "move"
     }
 
+    // Variables for tracking mouse position during click vs drag detection
+    // Declared here so they're captured in the event listener closures below
+    let mouseStart = 0
+    let mouseFinish = 0
+
     // Further cursor support when user changes edit options while an Annotation is selected.
     elem.addEventListener('mouseenter', function(e) {
       if (_this.#isLineEditing) {