Merge pull request #591 from d-i-t-a/develop

2.3.17
d-i-t-a · Oct 20, 2023 · 5001ff1 · 5001ff1
2 parents 78db06b + 80f28e6
commit 5001ff1
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 115 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@d-i-t-a/reader",
-  "version": "2.3.16",
+  "version": "2.3.17",
   "description": "A viewer application for EPUB files.",
   "repository": "https://github.com/d-i-t-a/R2D2BC",
   "license": "Apache-2.0",

diff --git a/src/modules/highlight/TextHighlighter.ts b/src/modules/highlight/TextHighlighter.ts
@@ -665,11 +665,9 @@ export class TextHighlighter {
 
     el.addEventListener("mousedown", this.mousedown.bind(this));
     el.addEventListener("mouseup", this.mouseup.bind(this));
-    el.addEventListener("mousemove", this.mousemove.bind(this));
 
     el.addEventListener("touchstart", this.mousedown.bind(this));
     el.addEventListener("touchend", this.mouseup.bind(this));
-    el.addEventListener("touchmove", this.mousemove.bind(this));
 
     this.hasEventListener = true;
   }
@@ -2271,11 +2269,11 @@ export class TextHighlighter {
 
   async processMouseEvent(ev: MouseEvent) {
     const doc = this.navigator.iframes[0].contentWindow?.document;
-    // relative to fixed window top-left corner
-    // (unlike pageX/Y which is relative to top-left rendered content area, subject to scrolling)
-    const x = ev.clientX;
-    const y = ev.clientY;
-    if (!doc) {
+
+    if (
+      !doc ||
+      !(ev.type === "mouseup" || ev.type === "click" || ev.type === "touchup")
+    ) {
       return;
     }
     if (
@@ -2288,58 +2286,10 @@ export class TextHighlighter {
       return;
     }
 
-    const paginated = this.navigator.view?.isPaginated();
-    const bodyRect = doc.body.getBoundingClientRect();
-    const scrollElement = this.getScrollingElement(doc);
-
-    const xOffset = paginated ? -scrollElement.scrollLeft : bodyRect.left;
-    const yOffset = paginated ? -scrollElement.scrollTop : bodyRect.top;
-
-    let foundHighlight: IHighlight | undefined;
-    let foundElement: IHTMLDivElementWithRect | undefined;
-
-    for (let i = _highlights.length - 1; i >= 0; i--) {
-      const highlight = _highlights[i];
-
-      let highlightParent = doc.getElementById(`${highlight.id}`);
-      if (!highlightParent) {
-        // ??!!
-        let container = doc.getElementById(
-          HighlightContainer.R2_ID_HIGHLIGHTS_CONTAINER
-        );
-        if (container) {
-          highlightParent = container.querySelector(`#${highlight.id}`); // .${CLASS_HIGHLIGHT_CONTAINER}
-        }
-      }
-      if (!highlightParent) {
-        // what?
-        continue;
-      }
-
-      let hit = false;
-      const highlightFragments = highlightParent.querySelectorAll(
-        `.${CLASS_HIGHLIGHT_AREA}`
-      );
-      for (const highlightFragment of highlightFragments) {
-        const withRect = highlightFragment as unknown as IWithRect;
-        const left = withRect.rect.left + xOffset; // (paginated ? withRect.xOffset : xOffset);
-        const top = withRect.rect.top + yOffset; // (paginated ? withRect.yOffset : yOffset);
-        if (
-          x >= left &&
-          x < left + withRect.rect.width &&
-          y >= top &&
-          y < top + withRect.rect.height
-        ) {
-          hit = true;
-          break;
-        }
-      }
-      if (hit) {
-        foundHighlight = highlight;
-        foundElement = highlightParent as IHTMLDivElementWithRect;
-        break;
-      }
-    }
+    const foundElement = ev.target as HTMLElement;
+    const foundHighlight = _highlights.find(
+      (el) => el.id === (ev.target as HTMLElement).parentElement?.id
+    );
 
     if (!foundHighlight || !foundElement) {
       for (let id in HighlightContainer) {
@@ -2365,56 +2315,6 @@ export class TextHighlighter {
 
     if (foundElement.getAttribute("data-click")) {
       if (
-        (ev.type === "mousemove" || ev.type === "touchmove") &&
-        foundElement.parentElement?.style.display !== "none"
-      ) {
-        const foundElementHighlightAreas = Array.from(
-          foundElement.querySelectorAll(`.${CLASS_HIGHLIGHT_AREA}`)
-        );
-
-        for (let id in HighlightContainer) {
-          let container = doc.getElementById(id);
-          if (container) {
-            const allHighlightAreas = container.querySelectorAll(
-              `.${CLASS_HIGHLIGHT_AREA}`
-            );
-            for (const highlightArea of allHighlightAreas) {
-              if (foundElementHighlightAreas.indexOf(highlightArea) < 0) {
-                this.resetHighlightAreaStyle(highlightArea as HTMLElement, id);
-              }
-            }
-          }
-        }
-
-        this.setHighlightAreaStyle(
-          doc,
-          foundElementHighlightAreas as HTMLElement[],
-          foundHighlight
-        );
-
-        const foundElementHighlightBounding = foundElement.querySelector(
-          `.${CLASS_HIGHLIGHT_BOUNDING_AREA}`
-        );
-
-        for (let id in HighlightContainer) {
-          let container = doc.getElementById(id);
-          if (container) {
-            const allHighlightBoundings = container.querySelectorAll(
-              `.${CLASS_HIGHLIGHT_BOUNDING_AREA}`
-            );
-            for (const highlightBounding of allHighlightBoundings) {
-              if (
-                !foundElementHighlightBounding ||
-                highlightBounding !== foundElementHighlightBounding
-              ) {
-                this.resetHighlightBoundingStyle(
-                  highlightBounding as HTMLElement
-                );
-              }
-            }
-          }
-        }
-      } else if (
         (ev.type === "mouseup" ||
           ev.type === "click" ||
           ev.type === "touchup") &&
@@ -2800,6 +2700,61 @@ export class TextHighlighter {
     highlightParent.style.setProperty("pointer-events", "none");
     if (highlight.pointerInteraction) {
       highlightParent.setAttribute("data-click", "1");
+      highlightParent.addEventListener("mouseover", (ev) => {
+        if (
+          (ev.target as HTMLElement).classList.contains(
+            "R2_CLASS_HIGHLIGHT_AREA"
+          )
+        ) {
+          const foundElement = ev.currentTarget as HTMLElement;
+          const foundHighlight = _highlights.find(
+            (el) => el.id === (ev.currentTarget as HTMLElement).id
+          );
+          if (
+            ev.type === "mouseover" &&
+            foundElement.parentElement?.style.display !== "none" &&
+            foundHighlight
+          ) {
+            const foundElementHighlightAreas = Array.from(
+              foundElement.querySelectorAll(`.${CLASS_HIGHLIGHT_AREA}`)
+            );
+            this.setHighlightAreaStyle(
+              doc,
+              foundElementHighlightAreas as HTMLElement[],
+              foundHighlight
+            );
+          }
+        }
+      });
+      highlightParent.addEventListener("mouseleave", (ev) => {
+        const foundElement = ev.currentTarget as HTMLElement;
+        const foundElementHighlightAreas = Array.from(
+          foundElement.querySelectorAll(`.${CLASS_HIGHLIGHT_AREA}`)
+        );
+
+        for (const highlightArea of foundElementHighlightAreas) {
+          this.resetHighlightAreaStyle(
+            highlightArea as HTMLElement,
+            foundElement.id
+          );
+        }
+
+        const foundElementHighlightBounding = foundElement.querySelector(
+          `.${CLASS_HIGHLIGHT_BOUNDING_AREA}`
+        );
+
+        const allHighlightBoundings = foundElement.querySelectorAll(
+          `.${CLASS_HIGHLIGHT_BOUNDING_AREA}`
+        );
+        for (const highlightBounding of allHighlightBoundings) {
+          if (
+            !foundElementHighlightBounding ||
+            highlightBounding !== foundElementHighlightBounding
+          ) {
+            this.resetHighlightBoundingStyle(highlightBounding as HTMLElement);
+          }
+        }
+      });
     }
 
     const paginated = this.navigator.view?.isPaginated();
@@ -2948,7 +2903,18 @@ export class TextHighlighter {
         }
       }
 
-      highlightArea.style.setProperty("pointer-events", "none");
+      if (
+        highlight.type === HighlightType.Search ||
+        highlight.type === HighlightType.ReadAloud ||
+        highlight.type === HighlightType.LineFocus ||
+        highlight.type === HighlightType.PageBreak
+      ) {
+        highlightArea.style.setProperty("pointer-events", "none");
+      } else {
+        highlightArea.style.setProperty("pointer-events", "all");
+        highlightArea.style.setProperty("cursor", "hand");
+      }
+
       highlightArea.style.position = "absolute";
       highlightArea.scale = scale;
       highlightArea.rect = {
@@ -2988,7 +2954,19 @@ export class TextHighlighter {
           "style",
           `background-color: rgba(${color.red}, ${color.green}, ${color.blue}, ${DEFAULT_BACKGROUND_COLOR_OPACITY}) !important;`
         );
-        highlightAreaLine.style.setProperty("pointer-events", "none");
+
+        if (
+          highlight.type === HighlightType.Search ||
+          highlight.type === HighlightType.ReadAloud ||
+          highlight.type === HighlightType.LineFocus ||
+          highlight.type === HighlightType.PageBreak
+        ) {
+          highlightAreaLine.style.setProperty("pointer-events", "none");
+        } else {
+          highlightAreaLine.style.setProperty("pointer-events", "all");
+          highlightAreaLine.style.setProperty("cursor", "hand");
+        }
+
         highlightAreaLine.style.position = "absolute";
         highlightAreaLine.scale = scale;
         highlightAreaLine.rect = {
@@ -3240,7 +3218,18 @@ export class TextHighlighter {
       }
     }
 
-    highlightAreaIcon.style.setProperty("pointer-events", "all");
+    if (
+      highlight.type === HighlightType.Search ||
+      highlight.type === HighlightType.ReadAloud ||
+      highlight.type === HighlightType.LineFocus ||
+      highlight.type === HighlightType.PageBreak
+    ) {
+      highlightAreaIcon.style.setProperty("pointer-events", "none");
+    } else {
+      highlightAreaIcon.style.setProperty("pointer-events", "all");
+      highlightAreaIcon.style.setProperty("cursor", "hand");
+    }
+
     let self = this;
     if (
       highlight.type !== HighlightType.PageBreak &&