diff --git a/src/main/frontend/extensions/pdf/highlights.cljs b/src/main/frontend/extensions/pdf/highlights.cljs index 8ad9406da6..ad9357865d 100644 --- a/src/main/frontend/extensions/pdf/highlights.cljs +++ b/src/main/frontend/extensions/pdf/highlights.cljs @@ -19,6 +19,42 @@ [] (state/set-state! :pdf/current nil)) +(rum/defc pdf-resizer + [^js viewer] + (let [el-ref (rum/use-ref nil) + adjust-main-size! + (front-utils/debounce + 200 (fn [width] + (let [root-el js/document.documentElement] + (.setProperty (.-style root-el) "--ph-view-container-width" width) + (pdf-utils/adjust-viewer-size! viewer))))] + + ;; draggable handler + (rum/use-effect! + (fn [] + (when-let [el (and (fn? js/window.interact) (rum/deref el-ref))] + (-> (js/interact el) + (.draggable + (bean/->js + {:listeners + {:move + (fn [^js/MouseEvent e] + (let [width js/document.documentElement.clientWidth + offset (.-left (.-rect e)) + el-ratio (.toFixed (/ offset width) 6) + target-el (js/document.getElementById "pdf-layout-container")] + (when target-el + (let [width (str (* el-ratio 100) "vw")] + (.setProperty (.-style target-el) "width" width) + (adjust-main-size! width)))))}})) + + (.styleCursor false) + (.on "dragstart" #(.. js/document.documentElement -classList (add "is-resizing-buf"))) + (.on "dragend" #(.. js/document.documentElement -classList (remove "is-resizing-buf"))))) + #()) + []) + [:span.extensions__pdf-resizer {:ref el-ref}])) + (rum/defc pdf-highlights-ctx-menu [^js viewer {:keys [highlight vw-pos point]} {:keys [clear-ctx-tip! add-hl! upd-hl! del-hl!]}] @@ -117,7 +153,9 @@ (rum/defc pdf-highlights [^js el ^js viewer initial-hls loaded-pages {:keys [set-dirty-hls!]}] - (let [*mounted (rum/use-ref false) + (let [^js doc (.-ownerDocument el) + ^js win (.-defaultView doc) + *mounted (rum/use-ref false) [sel-state, set-sel-state!] (rum/use-state {:range nil :collapsed nil :point nil}) [highlights, set-highlights!] (rum/use-state initial-hls) [tip-state, set-tip-state!] (rum/use-state {:highlight nil :vw-pos nil :point nil}) @@ -125,7 +163,10 @@ show-ctx-tip! (fn [^js viewer hl point] (let [vw-pos (pdf-utils/scaled-to-vw-pos viewer (:position hl))] (set-tip-state! {:highlight hl :vw-pos vw-pos :point point}))) - add-hl! (fn [hl] (if (:id hl) (set-highlights! (conj highlights hl)))) + add-hl! (fn [hl] (when (:id hl) + ;; fix js object + (let [highlights (map #(if (map? %) % (bean/->clj %)) highlights)] + (set-highlights! (conj highlights hl))))) upd-hl! (fn [hl] (when-let [pp (medley/find-first #(= (:id (second %)) (:id hl)) (medley/indexed highlights))] (set-highlights! (assoc-in highlights [(first pp)] hl)))) @@ -164,19 +205,28 @@ (fn [^js e] (and @*dirty (fn-selection-ok e)) (js/document.removeEventListener "selectionchange" fn-dirty)) - #js {:once true})))] + #js {:once true}))) + + fn-resize + (partial pdf-utils/adjust-viewer-size! viewer)] ;;(doto (.-eventBus viewer)) (doto el (.addEventListener "mousedown" fn-selection)) + (doto win + (.addEventListener "resize" fn-resize)) + ;; destroy #(do ;;(doto (.-eventBus viewer)) (doto el - (.removeEventListener "mousedown" fn-selection))))) + (.removeEventListener "mousedown" fn-selection)) + + (doto win + (.removeEventListener "resize" fn-resize))))) [viewer]) @@ -332,12 +382,15 @@ [:div.pdfViewer "viewer pdf"] [:div.pp-holder]] - (if (:viewer state) - (pdf-highlights - (:el state) (:viewer state) - initial-hls - (:loaded-pages ano-state) - ops))])) + (if-let [^js viewer (:viewer state)] + [(rum/with-key + (pdf-highlights + (:el state) viewer + initial-hls (:loaded-pages ano-state) + ops) "pdf-highlights") + + (rum/with-key + (pdf-resizer viewer) "pdf-resizer")])])) (rum/defc pdf-toolbar [] @@ -354,7 +407,7 @@ repo-cur (state/get-current-repo) repo-dir (config/get-repo-dir repo-cur) set-dirty-hls! (fn [latest-hls] ;; TODO: incremental - (set-hls-state! (merge hls-state {:latest-hls latest-hls})))] + (set-hls-state! {:initial-hls [] :latest-hls latest-hls}))] ;; load highlights (rum/use-effect! @@ -364,7 +417,7 @@ res (fs/read-file repo-dir hls-file) data (if res (bean/->clj (js/JSON.parse res)) [])] - (dd "[initial hls] " res) + (dd "[initial hls] " data) (set-hls-state! {:initial-hls data})) @@ -382,6 +435,7 @@ (fn [] (when-let [hls (:latest-hls hls-state)] (dd "latest hls ===>" hls) + (p/catch (p/let [hls (if hls (js/JSON.stringify (bean/->js hls) nil 2) @@ -458,7 +512,7 @@ #(set-ready! false)) [pdf-current]) - [:div.extensions__pdf-container + [:div#pdf-layout-container.extensions__pdf-container (if (and prepared pdf-current ready) (pdf-loader pdf-current))])) diff --git a/src/main/frontend/extensions/pdf/pdf.css b/src/main/frontend/extensions/pdf/pdf.css index 29c085da73..756e1d2aa1 100644 --- a/src/main/frontend/extensions/pdf/pdf.css +++ b/src/main/frontend/extensions/pdf/pdf.css @@ -76,6 +76,18 @@ } } + &-resizer { + position: absolute; + width: 3px; + height: 88vh; + background-color: rgba(0, 0, 0, 0); + overflow: hidden; + z-index: 4; + top: 10vh; + cursor: col-resize; + right: 0;; + } + &-hls-text-region { position: absolute; opacity: 1; diff --git a/src/main/frontend/extensions/pdf/utils.cljs b/src/main/frontend/extensions/pdf/utils.cljs index b614e8711b..0f6a4594a4 100644 --- a/src/main/frontend/extensions/pdf/utils.cljs +++ b/src/main/frontend/extensions/pdf/utils.cljs @@ -1,6 +1,7 @@ (ns frontend.extensions.pdf.utils (:require [promesa.core :as p] [cljs-bean.core :as bean] + [frontend.util :as front-utils] ["/frontend/extensions/pdf/utils" :as js-utils] [frontend.loader :refer [load]])) @@ -58,6 +59,10 @@ [] (.removeAllRanges (js/window.getSelection))) +(def adjust-viewer-size! + (front-utils/debounce + 200 (fn [^js viewer] (set! (. viewer -currentScaleValue) "auto")))) + (defn gen-id [] (str (.toString (js/Date.now) 36) (.. (js/Math.random) (toString 36) (substr 2 4))))