mirror of https://github.com/logseq/logseq
imporve(pdf): add text highlights region
parent
8ec5ce0cde
commit
69f271cba5
|
@ -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)]
|
||||
|
||||
(dd "[hls]" grouped-hls))
|
||||
(rum/mount
|
||||
;; TODO: area & text hls
|
||||
(pdf-highlights-region-container viewer page-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 []
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue