improve(pdf): scroll to hightlight

src/main/frontend/extensions/pdf/highlights.cljs

@@ -231,8 +231,15 @@
 
          (.querySelector el ".pp-holder")))
 
-     [:pre
-      (js/JSON.stringify (bean/->js highlights) nil 2)]]))
+     [:ul
+      (for [hl highlights]
+        [:li
+         [:a
+          {:on-click #(pdf-utils/scroll-to-highlight viewer hl)}
+          (str "#" (:id hl) "#  ")]
+         (:text (:content hl))])
+      ;;(js/JSON.stringify (bean/->js highlights) nil 2)
+      ]]))
 
 (rum/defc pdf-viewer
   [url initial-hls ^js pdf-document]

src/main/frontend/extensions/pdf/pdf.css

@@ -29,6 +29,7 @@
   &-hls-text-region {
     position: absolute;
     opacity: 1;
+    z-index: 2;
   }
 
   &-hls-ctx-menu {

src/main/frontend/extensions/pdf/utils.cljs

@@ -49,6 +49,11 @@
           layer)
         layer))))
 
+(defn scroll-to-highlight
+  [^js viewer hl]
+  (when-let [js-hl (bean/->js hl)]
+    (js-utils/scrollToHighlight viewer js-hl)))
+
 (defn clear-all-selection
   []
   (.removeAllRanges (js/window.getSelection)))

src/main/frontend/extensions/pdf/utils.js

@@ -92,3 +92,19 @@ export const getBoundingRect = (clientRects) => {
     height: Y1 - Y0,
   }
 }
+
+export const scrollToHighlight = (viewer, highlight) => {
+  if (!highlight) return
+  const { page, bounding } = highlight.position
+  const viewport = viewer.getPageView(page - 1)?.viewport
+  if (!viewport) return
+
+  viewer.scrollPageIntoView({
+    pageNumber: page,
+    destArray: [
+      null, { name: 'XYZ' },
+      ...viewport.convertToPdfPoint(0, scaledToViewport(bounding, viewport).top - 100),
+      0 // scale
+    ]
+  })
+}