imporve(pdf): add text highlights region

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

@@ -9,6 +9,27 @@
 (defn dd [& args]
   (apply js/console.debug args))
 
+(rum/defc pdf-highlights-text-region
+  [{:keys [rects bounding]}]
+
+  [:div.extensions__pdf-hls-text-region
+   (map-indexed
+     (fn [idx rect]
+       [:div.hls-text-region-item
+        {:key        idx
+         :style      rect
+         :data-color "green"}])
+     rects)])
+
+(rum/defc pdf-highlights-region-container
+  [^js viewer page-hls]
+
+  [:div.hls-region-container
+   (for [hl page-hls]
+     (let [hl (update-in hl [:position] #(pdf-utils/scaled-to-vw-pos viewer %))]
+       (rum/with-key (pdf-highlights-text-region (:position hl)) (:id hl))
+       ))])
+
 (rum/defc pdf-highlights
   [^js el ^js viewer initial-hls loaded-pages]
 
@@ -91,8 +112,17 @@
         (js/console.debug "[rebuild highlights] " (count highlights))
 
         (when-let [grouped-hls (and (seq highlights) (group-by :page highlights))]
+          (doseq [page loaded-pages]
+            (when-let [^js/HTMLDivElement hls-layer (pdf-utils/resolve-hls-layer! viewer page)]
+              (when-let [page-hls (get grouped-hls page)]
+
+                (rum/mount
+                  ;; TODO: area & text hls
+                  (pdf-highlights-region-container viewer page-hls)
 
-          (dd "[hls]" grouped-hls))
+                  hls-layer)
+                )
+              )))
 
         ;; destroy
         #())
@@ -157,7 +187,7 @@
                 fn-textlayer-ready
                 (fn [^js p]
                   (js/console.debug "text layer ready" p)
-                  (set-ano-state! {:loaded-pages (conj (:loaded-pages ano-state) (.-pageNumber p))}))
+                  (set-ano-state! {:loaded-pages (conj (:loaded-pages ano-state) (int (.-pageNumber p)))}))
 
                 fn-page-ready
                 (fn []

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

@@ -1,3 +1,13 @@
+:root {
+  --ph-highlight-color-blue: #55b8fe;
+  --ph-highlight-color-green: #46da48;
+  --ph-highlight-color-red: #fd709a;
+  --ph-highlight-color-purple: #ac8cf1;
+  --ph-highlight-color-yellow: #fcd713;
+
+  --ph-highlight-scroll-into-color: rgba(255, 75, 93, 0.67);
+}
+
 .extensions__pdf {
   &-loader {
     position: relative;
@@ -13,8 +23,58 @@
     > .viewer-container {
     }
   }
+
+  &-hls-text-region {
+    position: absolute;
+    opacity: 1;
+  }
+
+  .Highlight__popup {
+    background-color: #3d464d;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+    max-width: 300px;
+    max-height: 100px;
+    overflow-y: scroll;
+  }
+
+  .Highlight--scrolledTo .hls-text-region-item {
+    background: var(--ph-highlight-scroll-into-color);
+  }
+}
+
+.hls-text-region-item {
+  cursor: pointer;
+  position: absolute;
+  transition: background 0.3s;
+
+  background-color: rgba(252, 219, 97, 0.7);
 }
 
+.hls-text-region-item[data-color=yellow] {
+  background-color: var(--ph-highlight-color-yellow);
+  opacity: .5;
+}
+
+.hls-text-region-item[data-color=blue] {
+  background-color: var(--ph-highlight-color-blue);
+}
+
+.hls-text-region-item[data-color=green] {
+  background-color: var(--ph-highlight-color-green);
+}
+
+.hls-text-region-item[data-color=red] {
+  background-color: var(--ph-highlight-color-red);
+}
+
+.hls-text-region-item[data-color=purple] {
+  background-color: var(--ph-highlight-color-purple);
+}
+
+
 body[data-page=home] {
   #main-content-container {
     margin: 0 !important;
@@ -45,6 +105,7 @@ body[data-page=home] {
 
     &-highlights {
       padding-right: 40px;
+
       pre {
         white-space: pre-wrap;
         font-size: 12px;

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

@@ -16,7 +16,6 @@
   [bounding ^js viewport]
   (bean/->clj (js-utils/scaledToViewport (bean/->js bounding) viewport)))
 
-
 (defn vw-to-scaled-pos
   [^js viewer {:keys [page bounding rects]}]
   (when-let [^js viewport (.. viewer (getPageView (dec page)) -viewport)]
@@ -31,6 +30,19 @@
      :rects    (for [rect rects] (scaled-to-viewport rect viewport))
      :page     page}))
 
+(defn resolve-hls-layer!
+  [^js viewer page]
+  (when-let [^js text-layer (.. viewer (getPageView (dec page)) -textLayer)]
+    (let [cnt (.-textLayerDiv text-layer)
+          cls "extensions__pdf-hls-layer"
+          doc js/document
+          layer (.querySelector cnt (str "." cls))]
+      (if-not layer
+        (let [layer (.createElement doc "div")]
+          (set! (. layer -className) cls)
+          (.appendChild cnt layer)
+          layer)
+        layer))))
 
 (defn gen-id []
   (str (.toString (js/Date.now) 36)