Enhance/pdf minor tweaks (#2598)

* fix(pdf): restrict the max width of pdf viewer

* improve(pdf): change shift key as area highlight shortcut on Win32

* fix(ui): svg component warning

* improve(feat): support go to annotation block within highlight ctx menu

* improve(pdf): resolved #2567

* improve(pdf): resolved #2572

* improve(pdf): polish title display of hls page

* style(pdf): fix container layout

* improve(pdf): restrict minimum width of viewer

src/main/frontend/components/block.cljs

@@ -445,7 +445,6 @@
                     path
                     (.. util/node-path (join repo-path (config/get-local-asset-absolute-path path))))
         ext-name (util/get-file-ext full-path)
-        ext-name (and ext-name (string/lower-case ext-name))
         title-or-path (cond
                         (string? title)
                         title
@@ -602,13 +601,15 @@
       (if block
         [:div.block-ref-wrap.inline
 
-         {:data-type (name (or block-type :default))
+         {:data-type    (name (or block-type :default))
           :data-hl-type hl-type
           :on-mouse-down
-          (fn [e]
-            (util/stop e)
+          (fn [^js/MouseEvent e]
+            (when (or (gobj/get e "shiftKey")
+                      (not (.. e -target (closest ".blank"))))
+              (util/stop e)
 
-            (if (gobj/get e "shiftKey")
+              (if (gobj/get e "shiftKey")
                 (state/sidebar-add-block!
                   (state/get-current-repo)
                   (:db/id block)
@@ -616,12 +617,12 @@
                   {:block block})
 
                 (match [block-type (util/electron?)]
-                  ;; pdf annotation
-                  [:annotation true] (pdf-assets/open-block-ref! block)
+                       ;; pdf annotation
+                       [:annotation true] (pdf-assets/open-block-ref! block)
 
-                  ;; default open block page
-                  :else (route-handler/redirect! {:to          :page
-                                                  :path-params {:name id}}))))}
+                       ;; default open block page
+                       :else (route-handler/redirect! {:to          :page
+                                                       :path-params {:name id}})))))}
 
          (let [title (let [title (:block/title block)
                            block-content (block-content (assoc config :block-ref? true)
@@ -1544,7 +1545,9 @@
                             :annotation (pdf-assets/open-block-ref! t)
                             (.preventDefault %))}
 
-              [:span.hl-page (str "P" (or (:hl-page properties) "?"))]
+              [:span.hl-page
+               [:strong.forbid-edit (str "P" (or (:hl-page properties) "?"))]
+               [:label.blank " "]]
 
               (when-let [st (and (= :area (keyword (:hl-type properties)))
                                  (:hl-stamp properties))]
@@ -1666,6 +1669,7 @@
         button (gobj/get e "buttons")]
     (when (contains? #{1 0} button)
       (when-not (or
+                 (d/has-class? target "forbid-edit")
                  (d/has-class? target "bullet")
                  (util/link? target)
                  (util/input? target)

src/main/frontend/components/page.cljs

@@ -382,15 +382,17 @@
                                                  :page
                                                  {:page page}))))}
                  [:h1.title {:style {:margin-left -2}}
-                  (if page-original-name
-                    (if (and (string/includes? page-original-name "[[")
-                             (string/includes? page-original-name "]]"))
-                      (let [ast (mldoc/->edn page-original-name (mldoc/default-config format))]
-                        (block/markup-element-cp {} (ffirst ast)))
-                      page-original-name)
-                    (or
-                     page-name
-                     path-page-name))]]]
+                  (let [title (if page-original-name
+                                (if (and (string/includes? page-original-name "[[")
+                                         (string/includes? page-original-name "]]"))
+                                  (let [ast (mldoc/->edn page-original-name (mldoc/default-config format))]
+                                    (block/markup-element-cp {} (ffirst ast)))
+                                  page-original-name)
+                                (or
+                                  page-name
+                                  path-page-name))]
+                    (if (pdf-assets/hls-file? title)
+                      (pdf-assets/human-hls-filename-display title) title))]]]
                (when (not config/publishing?)
                  [:div.flex.flex-row
                   (when plugin-handler/lsp-enabled?

src/main/frontend/components/svg.cljs

@@ -591,7 +591,7 @@
      :stroke-linecap  "round"}]])
 
 (def home
-  [:svg.h-6.w-6 {:fill "none" :viewbox "0 0 24 24" :stroke "currentColor"}
+  [:svg.h-6.w-6 {:fill "none" :viewBox "0 0 24 24" :stroke "currentColor"}
    [:path {:stroke-linecap "round" :stroke-linejoin "round" :stroke-width "2" :d "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"}]])
 
 (defn zoom-in

src/main/frontend/dicts.cljs

@@ -303,7 +303,8 @@
         :help/shortcut-page-title "Keyboard shortcuts"
 
         :pdf/copy-ref "Copy ref"
-        :pdf/copy-text "Copy text"}
+        :pdf/copy-text "Copy text"
+        :pdf/linked-ref "Goto annotation"}
 
    :de {:help/about "Über Logseq"
         :help/bug "Fehlerbericht"
@@ -965,7 +966,8 @@
            :user/delete-account-notice "你在 logseq.com 发布的页面（假如有的话）也会被删除。"
 
            :pdf/copy-ref "复制引用"
-           :pdf/copy-text "复制文本"}
+           :pdf/copy-text "复制文本"
+           :pdf/linked-ref "转到注解"}
 
 
    :zh-Hant {:on-boarding/title "你好，歡迎使用 Logseq！"
@@ -1199,7 +1201,8 @@
              :remove-background "去除背景"
 
              :pdf/copy-ref "復製引用"
-             :pdf/copy-text "復製文本"}
+             :pdf/copy-text "復製文本"
+             :pdf/linked-ref "轉到註解"}
 
    :af {:on-boarding/title "Hi, welcome to Logseq!"
         :on-boarding/sharing "meedeling"

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

@@ -8,8 +8,9 @@
             [frontend.state :as state]
             [frontend.config :as config]
             [frontend.fs :as fs]
-            [medley.core :as medley]
             [frontend.components.svg :as svg]
+            [reitit.frontend.easy :as rfe]
+            [medley.core :as medley]
             [cljs.reader :as reader]
             [promesa.core :as p]
             [clojure.string :as string]
@@ -17,6 +18,10 @@
 
 (defonce *asset-uploading? (atom false))
 
+(defn hls-file?
+  [filename]
+  (and filename (string/starts-with? filename "hls__")))
+
 (defn inflate-asset
   [full-path]
   (let [filename (util/node-path.basename full-path)
@@ -29,12 +34,13 @@
 
               :else
               (util/node-path.join
-               "file://"                                  ;; TODO: bfs
-               (config/get-repo-dir (state/get-current-repo))
-               "assets" filename))]
+                "file://"                                   ;; TODO: bfs
+                (config/get-repo-dir (state/get-current-repo))
+                "assets" filename))
+        ext-name (util/get-file-ext filename)]
     (when-let [key (and
-                    (string/ends-with? filename ".pdf")
-                    (string/replace-first filename ".pdf" ""))]
+                     (= ext-name "pdf")
+                     (subs filename 0 (- (count filename) 4)))]
       {:key      key
        :identity (subs key (- (count key) 15))
        :filename filename
@@ -83,31 +89,31 @@
 
       (when-let [^js ctx (.getContext canvas' "2d")]
         (.drawImage
-         ctx canvas
-         (* left dpr) (* top dpr) (* width dpr) (* height dpr)
-         0 0 width height)
+          ctx canvas
+          (* left dpr) (* top dpr) (* width dpr) (* height dpr)
+          0 0 width height)
 
         (let [callback (fn [^js png]
                          ;; write image file
                          (p/catch
-                             (p/let [_ (js/console.time :write-area-image)
-                                     ^js png (.arrayBuffer png)
-                                     {:keys [key]} current
-                                     ;; dir
-                                     fstamp (get-in new-hl [:content :image])
-                                     old-fstamp (and old-hl (get-in old-hl [:content :image]))
-                                     fname (str (:page new-hl) "_" (:id new-hl))
-                                     fdir (str config/local-assets-dir "/" key)
-                                     _ (fs/mkdir-if-not-exists (str repo-dir "/" fdir))
-                                     new-fpath (str fdir "/" fname "_" fstamp ".png")
-                                     old-fpath (and old-fstamp (str fdir "/" fname "_" old-fstamp ".png"))
-                                     _ (and old-fpath (apply fs/rename! repo-cur (map #(util/node-path.join repo-dir %) [old-fpath new-fpath])))
-                                     _ (fs/write-file! repo-cur repo-dir new-fpath png {:skip-mtime? true})]
-
-                               (js/console.timeEnd :write-area-image))
-
-                             (fn [err]
-                               (js/console.error "[write area image Error]" err))))]
+                           (p/let [_ (js/console.time :write-area-image)
+                                   ^js png (.arrayBuffer png)
+                                   {:keys [key]} current
+                                   ;; dir
+                                   fstamp (get-in new-hl [:content :image])
+                                   old-fstamp (and old-hl (get-in old-hl [:content :image]))
+                                   fname (str (:page new-hl) "_" (:id new-hl))
+                                   fdir (str config/local-assets-dir "/" key)
+                                   _ (fs/mkdir-if-not-exists (str repo-dir "/" fdir))
+                                   new-fpath (str fdir "/" fname "_" fstamp ".png")
+                                   old-fpath (and old-fstamp (str fdir "/" fname "_" old-fstamp ".png"))
+                                   _ (and old-fpath (apply fs/rename! repo-cur (map #(util/node-path.join repo-dir %) [old-fpath new-fpath])))
+                                   _ (fs/write-file! repo-cur repo-dir new-fpath png {:skip-mtime? true})]
+
+                             (js/console.timeEnd :write-area-image))
+
+                           (fn [err]
+                             (js/console.error "[write area image Error]" err))))]
 
           (.toBlob canvas' callback))
         ))))
@@ -117,7 +123,7 @@
   (when-let [block (and (area-highlight? highlight)
                         (db-model/get-block-by-uuid (:id highlight)))]
     (editor-handler/set-block-property!
-     (:block/uuid block) :hl-stamp (get-in highlight [:content :image]))))
+      (:block/uuid block) :hl-stamp (get-in highlight [:content :image]))))
 
 (defn unlink-hl-area-image$
   [^js viewer current hl]
@@ -140,18 +146,18 @@
         format (state/get-preferred-format)]
     (if-not page
       (do
-        (page-handler/create! page-name {:redirect? false :create-first-block? false
+        (page-handler/create! page-name {:redirect?        false :create-first-block? false
                                          :split-namespace? false
-                                         :format format
-                                         :properties {:file (case format
-                                                              :markdown
-                                                              (util/format "[%s](%s)" page-name url)
+                                         :format           format
+                                         :properties       {:file      (case format
+                                                                         :markdown
+                                                                         (util/format "[%s](%s)" page-name url)
 
-                                                              :org
-                                                              (util/format "[[%s][%s]]" url page-name)
+                                                                         :org
+                                                                         (util/format "[[%s][%s]]" url page-name)
 
-                                                              url)
-                                                      :file-path url}})
+                                                                         url)
+                                                            :file-path url}})
         (db-model/get-page page-name))
       page)))
 
@@ -168,13 +174,13 @@
                             (assoc % :hl-type "area" :hl-stamp stamp) %)]
 
           (editor-handler/api-insert-new-block!
-           text {:page        (:block/name ref-page)
-                 :custom-uuid id
-                 :properties  (wrap-props
-                               {:ls-type "annotation"
-                                :hl-page page
-                                ;; force custom uuid
-                                :id      (str id)})}))))))
+            text {:page        (:block/name ref-page)
+                  :custom-uuid id
+                  :properties  (wrap-props
+                                 {:ls-type "annotation"
+                                  :hl-page page
+                                  ;; force custom uuid
+                                  :id      (str id)})}))))))
 
 (defn del-ref-block!
   [{:keys [id]}]
@@ -204,6 +210,14 @@
               (state/set-state! :pdf/current (inflate-asset file-path)))
             (js/console.debug "[Unmatched highlight ref]" block)))))))
 
+(defn goto-block-ref!
+  [{:keys [id]}]
+  (when-let [block (db-model/get-block-by-uuid id)]
+    (when-let [page (:block/page block)]
+      (rfe/push-state :page
+                      {:name (:block/name page)}
+                      {:anchor (str "block-content-" + id)}))))
+
 (rum/defc area-display
   [block stamp]
   (let [id (:block/uuid block)
@@ -212,6 +226,15 @@
       (when-let [group-key (string/replace-first (:block/original-name page) #"^hls__" "")]
         (when-let [hl-page (:hl-page props)]
           (let [asset-path (editor-handler/make-asset-url
-                            (str "/" config/local-assets-dir "/" group-key "/" (str hl-page "_" id "_" stamp ".png")))]
+                             (str "/" config/local-assets-dir "/" group-key "/" (str hl-page "_" id "_" stamp ".png")))]
             [:span.hl-area
              [:img {:src asset-path}]]))))))
+
+(rum/defc human-hls-filename-display
+  [title]
+  (let [local-asset? (re-find #"[0-9]{13}_\d$" title)]
+    [:a.asset-ref.is-pdf
+     (-> title
+         (subs 0 (- (count title) (if local-asset? 15 0)))
+         (string/replace #"^hls__" "")
+         (string/replace "_" " "))]))

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

@@ -75,7 +75,7 @@
                             el-ratio (.toFixed (/ offset width) 6)
                             target-el (js/document.getElementById "pdf-layout-container")]
                         (when target-el
-                          (let [width (str (* el-ratio 100) "vw")]
+                          (let [width (str (min (max (* el-ratio 100) 20) 80) "vw")]
                             (.setProperty (.-style target-el) "width" width)
                             (adjust-main-size! width)))))}}))
 
@@ -126,6 +126,10 @@
                           (front-utils/copy-to-clipboard! (:text content))
                           (pdf-utils/clear-all-selection))
 
+                        "link"
+                        (do
+                          (pdf-assets/goto-block-ref! highlight))
+
                         "del"
                         (do
                           (del-hl! highlight)
@@ -158,6 +162,8 @@
 
        (and (not (:image content)) [:li.item {:data-action "copy"} (t :pdf/copy-text)])
 
+       (and id [:li.item {:data-action "link"} (t :pdf/linked-ref)])
+
        (and id [:li.item {:data-action "del"} (t :delete)])
        ])))
 
@@ -321,7 +327,7 @@
                                       (.contains (.-classList target) "extensions__pdf-hls-area-region"))
                                     (.closest target ".page"))
                            (and e (or (.-metaKey e)
-                                      (.-altKey e)
+                                      (and front-utils/win32? (.-shiftKey e))
                                       @*area-mode?)))))
 
         reset-coords #(do
@@ -799,7 +805,7 @@
 
          ;; selection
          [:a.button
-          {:title    (str "Area highlight (" (if front-utils/mac? "⌘" "alt") ")")
+          {:title    (str "Area highlight (" (if front-utils/mac? "⌘" "Shift") ")")
            :class    (if area-mode? "is-active")
            :on-click #(set-area-mode! (not area-mode?))}
           (svg/icon-area 18)]

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

@@ -469,11 +469,11 @@
     }
 
     .extensions__pdf-toolbar {
-        background: linear-gradient(0deg, rgba(255, 255, 255, 0) 3%, #eee8d5 100%);
+      background: linear-gradient(0deg, rgba(255, 255, 255, 0) 3%, #eee8d5 100%);
 
-        .buttons {
-            background-color: #f6efdf;
-        }
+      .buttons {
+        background-color: #f6efdf;
+      }
     }
   }
 }
@@ -505,6 +505,10 @@
         display: block;
         border: none;
       }
+
+      .prefix-link > .hl-area {
+        cursor: alias;
+      }
     }
   }
 }
@@ -530,10 +534,22 @@
       a.prefix-link {
         display: inline;
       }
+
+      .hl-page {
+        display: inline-flex;
+        justify-content: space-between;
+        width: 85%;
+
+        > label {
+          flex: 1;
+          cursor: text;
+        }
+      }
     }
 
     .hl-area {
       display: block;
+      cursor: text;
 
       img {
         margin: 0;
@@ -544,11 +560,6 @@
 }
 
 body[data-page] {
-  #main-content-container {
-    margin: 0 !important;
-    padding: 0 !important;
-  }
-
   .extensions__pdf-loader {
     width: 100%;
   }

src/main/frontend/util.cljc

@@ -1105,7 +1105,7 @@
   (and
    (string? file)
    (string/includes? file ".")
-   (last (string/split file #"\."))))
+   (some-> (last (string/split file #"\.")) string/lower-case)))
 
 (defn get-dir-and-basename
   [path]