logseq/src/main/frontend/components/whiteboard.cljs

(ns frontend.components.whiteboard
  (:require [cljs.math :as math]
            [datascript.core :as d]
            [frontend.components.page :as page]
            [frontend.components.reference :as reference]
            [frontend.context.i18n :refer [t]]
            [frontend.db.model :as model]
            [frontend.handler.route :as route-handler]
            [frontend.handler.user :as user-handler]
            [frontend.handler.whiteboard :as whiteboard-handler]
            [frontend.state :as state]
            [frontend.ui :as ui]
            [frontend.util :as util]
            [promesa.core :as p]
            [rum.core :as rum]
            [shadow.loader :as loader]))

(defonce tldraw-loaded? (atom false))
(rum/defc tldraw-app < rum/reactive
  {:init (fn [state]
           (p/let [_ (loader/load :tldraw)]
             (reset! tldraw-loaded? true))
           state)}
  [name shape-id]
  (let [loaded? (rum/react tldraw-loaded?)
        draw-component (when loaded?
                         (resolve 'frontend.extensions.tldraw/tldraw-app))]
    (when draw-component
      (draw-component name shape-id))))

;; TODO: make it reactive to db changes
(rum/defc tldraw-preview < rum/reactive
  {:init (fn [state]
           (p/let [_ (loader/load :tldraw)]
             (reset! tldraw-loaded? true))
           state)}
  [page-name]
  (let [loaded? (rum/react tldraw-loaded?)
        tldr (whiteboard-handler/page-name->tldr! page-name)
        generate-preview (when loaded?
                           (resolve 'frontend.extensions.tldraw/generate-preview))]
    (when generate-preview
      (generate-preview tldr))))

(rum/defc dropdown
  [label children show? outside-click-hander]
  (let [anchor-ref (rum/use-ref nil)
        content-ref (rum/use-ref nil)
        rect (util/use-component-size (when show? anchor-ref))
        _ (util/use-click-outside content-ref outside-click-hander)
        [d-open set-d-open] (rum/use-state false)
        _ (rum/use-effect! (fn [] (js/setTimeout #(set-d-open show?) 100))
                           [show?])]
    [:div.dropdown-anchor {:ref anchor-ref}
     label
     (when (and rect show? (> (.-y rect) 0))
       (ui/portal
        [:div.fixed.shadow-lg.color-level.px-2.rounded-lg.transition
         {:ref content-ref
          :style {:opacity (if d-open 1 0)
                  :width "240px"
                  :min-height "40px"
                  :left (+ (* 0.5 (.-width rect)) (.-x rect) -120)
                  :top (+ (.-y rect) (.-height rect) 8)}} children]))]))

(rum/defc page-refs-count < rum/static
  ([page-name classname]
   (page-refs-count page-name classname nil))
  ([page-name classname render-fn]
   (let [page-entity (model/get-page page-name)
         block-uuid (:block/uuid page-entity)
         ref (rum/use-ref nil)
         refs-count (count (:block/_refs page-entity))
         [open-flag set-open-flag] (rum/use-state 0)
         open? (not= open-flag 0)
         d-open-flag (rum/use-memo #(util/debounce 200 set-open-flag) [])]
     ;; TODO: move click outside to the utility? 
     (rum/use-effect!
      (let [listener (fn [e]
                       (when (and (.-current ref)
                                  (not (.contains (.-current ref) (.-target e))))
                         (d-open-flag 0)))]
        (.addEventListener js/document.body "mousedown" listener true)
        #(.removeEventListener js/document.body "mousedown" listener))
      [ref])
     (when (> refs-count 0)
       (dropdown
        [:div.flex.items-center.gap-2.whiteboard-page-refs-count
         {:class (str classname (when open? " open"))
          :on-mouse-enter (fn [] (d-open-flag #(if (= % 0) 1 %)))
          :on-mouse-leave (fn [] (d-open-flag #(if (= % 2) % 0)))
          :on-click (fn [e]
                      (util/stop e)
                      (d-open-flag (fn [o] (if (not= o 2) 2 0))))}
         [:div.open-page-ref-link refs-count]
         (when render-fn (render-fn open?))]
        (reference/block-linked-references block-uuid)
        open?
        #(set-open-flag 0))))))

(defn- get-page-display-name
  [page-name]
  (let [page-entity (model/get-page page-name)]
    (or
     (get-in page-entity [:block/properties :title] nil)
     (:block/original-name page-entity)
     page-name)))

;; This is not accurate yet
(defn- get-page-human-update-time
  [page-name]
  (let [page-entity (model/get-page page-name)
        {:block/keys [updated-at created-at]} page-entity]
    (str (if (= created-at updated-at) "Created " "Edited ")
         (util/time-ago (js/Date. updated-at)))))

(rum/defc dashboard-preview-card
  [page-name {:keys [checked on-checked-change show-checked?]}]
  [:div.dashboard-card.dashboard-preview-card.cursor-pointer.hover:shadow-lg
   {:data-checked checked
    :on-click
    (fn [e]
      (util/stop e)
      (route-handler/redirect-to-whiteboard! page-name))}
   [:div.dashboard-card-title
    [:div.flex.w-full.items-center
     [:div.dashboard-card-title-name.font-bold
      (if (parse-uuid page-name)
        [:span.opacity-50 (t :untitled)]
        (get-page-display-name page-name))]
     [:div.flex-1]
     [:div.dashboard-card-checkbox
      {:style {:visibility (when show-checked? "visible")}
       :on-click util/stop-propagation}
      (ui/checkbox {:checked checked
                    :on-change (fn [] (on-checked-change (not checked)))})]]
    [:div.flex.w-full.opacity-50
     [:div (get-page-human-update-time page-name)]
     [:div.flex-1]
     (page-refs-count page-name nil)]]
   [:div.p-4.h-64.flex.justify-center
    (tldraw-preview page-name)]])

(rum/defc dashboard-create-card
  []
  [:div.dashboard-card.dashboard-create-card.cursor-pointer#tl-create-whiteboard
   {:on-click
    (fn [e]
      (util/stop e)
      (let [name (str (d/squuid))]
        (whiteboard-handler/create-new-whiteboard-page! name)
        (route-handler/redirect-to-whiteboard! name)))}
   (ui/icon "plus")
   [:span.dashboard-create-card-caption.select-none
    "New whiteboard"]])

(rum/defc whiteboard-dashboard
  []
  (if (user-handler/alpha-user?)
    (let [whiteboards (->> (model/get-all-whiteboards (state/get-current-repo))
                           (sort-by :block/updated-at)
                           reverse)
          whiteboard-names (map :block/name whiteboards)
          ref (rum/use-ref nil)
          rect (util/use-component-size ref)
          [container-width] (when rect [(.-width rect) (.-height rect)])
          cols (cond (< container-width 600) 1
                     (< container-width 900) 2
                     (< container-width 1200) 3
                     :else 4)
          total-whiteboards (count whiteboards)
          empty-cards (- (max (* (math/ceil (/ (inc total-whiteboards) cols)) cols) (* 2 cols))
                         (inc total-whiteboards))
          [checked-page-names set-checked-page-names] (rum/use-state #{})
          has-checked? (not-empty checked-page-names)]
      [:<>
       [:h1.select-none.flex.items-center.whiteboard-dashboard-title.title
        "All whiteboards"
        [:span.opacity-50
         (str " · " total-whiteboards)]
        [:div.flex-1]
        (when has-checked?
          [:button.ui__button.m-0.inline-flex.items-center.bg-red-800
           {:on-click
            (fn []
              (state/set-modal! (page/batch-delete-dialog
                                 (map (fn [name]
                                        (some (fn [w] (when (= (:block/name w) name) w)) whiteboards))
                                      checked-page-names)
                                 false route-handler/redirect-to-whiteboard-dashboard!)))}
           [:span.flex.gap-2.items-center
            [:span.opacity-50 (ui/icon "trash" {:style {:font-size 15}})]
            (t :delete)
            [:span.opacity-50
             (str " · " (count checked-page-names))]]])]
       [:div
        {:ref ref}
        [:div.gap-8.grid.grid-rows-auto
         {:style {:visibility (when (nil? container-width) "hidden")
                  :grid-template-columns (str "repeat(" cols ", minmax(0, 1fr))")}}
         (dashboard-create-card)
         (for [whiteboard-name whiteboard-names]
           [:<> {:key whiteboard-name}
            (dashboard-preview-card whiteboard-name
                                    {:show-checked? has-checked?
                                     :checked (boolean (checked-page-names whiteboard-name))
                                     :on-checked-change (fn [checked]
                                                          (set-checked-page-names (if checked
                                                                               (conj checked-page-names whiteboard-name)
                                                                               (disj checked-page-names whiteboard-name))))})])
         (for [n (range empty-cards)]
           [:div.dashboard-card.dashboard-bg-card {:key n}])]]])
    [:div "This feature is not public available yet."]))

(rum/defc whiteboard-page
  [name block-id]
  [:div.absolute.w-full.h-full.whiteboard-page

   ;; makes sure the whiteboard will not cover the borders
   {:key name
    :style {:padding "0.5px" :z-index 0
            :transform "translateZ(0)"
            :text-rendering "geometricPrecision"
            :-webkit-font-smoothing "subpixel-antialiased"}}

   [:div.whiteboard-page-title-root
    [:span.whiteboard-page-title
     {:style {:color "var(--ls-primary-text-color)"
              :user-select "none"}}
     (page/page-title name
                      [:span.tie.tie-whiteboard
                       {:style {:font-size "0.9em"}}]
                      (get-page-display-name name)
                      nil
                      false)]

    (page-refs-count name
                     "text-md px-3 py-2 cursor-default whiteboard-page-refs-count"
                     (fn [open?] [:<> "References" (ui/icon (if open? "references-hide" "references-show")
                                                            {:extension? true})]))]
   (tldraw-app name block-id)])

(rum/defc whiteboard-route
  [route-match]
  (when (user-handler/alpha-user?)
    (let [name (get-in route-match [:parameters :path :name])
          {:keys [block-id]} (get-in route-match [:parameters :query])]
      (whiteboard-page name block-id))))