enhance: reactive whiteboard

This commit is contained in:
Tienson Qin
2023-11-24 15:19:53 +08:00
parent bf808f345a
commit e8acfdefea
3 changed files with 30 additions and 25 deletions

View File

@@ -35,7 +35,6 @@
(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)]

View File

@@ -136,26 +136,20 @@
(route-handler/redirect-to-whiteboard! page-name {:block-id page-name-or-uuid})
(route-handler/redirect-to-page! (model/get-redirect-page-name page-name-or-uuid))))))})
(rum/defc tldraw-app
[page-name block-id]
(rum/defc tldraw-app-inner < rum/reactive
[page-name block-id loaded-app set-loaded-app]
(let [populate-onboarding? (whiteboard-handler/should-populate-onboarding-whiteboard? page-name)
data (whiteboard-handler/page-name->tldr! page-name)
[loaded-app set-loaded-app] (rum/use-state nil)
on-mount (fn [^js tln]
(when tln
(set! (.-appUndo tln) undo)
(set! (.-appRedo tln) redo)
(when-let [^js api (gobj/get tln "api")]
(p/then (when populate-onboarding?
(whiteboard-handler/populate-onboarding-whiteboard api))
#(do (whiteboard-handler/cleanup! (.-currentPage tln))
(state/focus-whiteboard-shape tln block-id)
(set-loaded-app tln))))))]
(rum/use-effect! (fn []
(when (and loaded-app block-id)
(state/focus-whiteboard-shape loaded-app block-id))
#())
[block-id loaded-app])
(p/then (when populate-onboarding?
(whiteboard-handler/populate-onboarding-whiteboard api))
#(do (whiteboard-handler/cleanup! (.-currentPage tln))
(state/focus-whiteboard-shape tln block-id)
(set-loaded-app tln))))))
data (whiteboard-handler/page-name->tldr! page-name)]
(when data
[:div.draw.tldraw.whiteboard.relative.w-full.h-full
{:style {:overscroll-behavior "none"}
@@ -167,9 +161,9 @@
(when
(and populate-onboarding? (not loaded-app))
[:div.absolute.inset-0.flex.items-center.justify-center
{:style {:z-index 200}}
(ui/loading "Loading onboarding whiteboard ...")])
[:div.absolute.inset-0.flex.items-center.justify-center
{:style {:z-index 200}}
(ui/loading "Loading onboarding whiteboard ...")])
(tldraw {:renderers tldraw-renderers
:handlers (get-tldraw-handlers page-name)
:onMount on-mount
@@ -179,3 +173,13 @@
(util/profile "tldraw persist"
(whiteboard-handler/transact-tldr-delta! page-name app (.-replace info))))
:model data})])))
(rum/defc tldraw-app
[page-name block-id]
(let [[loaded-app set-loaded-app] (rum/use-state nil)]
(rum/use-effect! (fn []
(when (and loaded-app block-id)
(state/focus-whiteboard-shape loaded-app block-id))
#())
[block-id loaded-app])
(tldraw-app-inner page-name block-id loaded-app set-loaded-app)))

View File

@@ -220,7 +220,8 @@
(when (and page-entity
(nil? (:block/file page-entity))
(not (config/db-based-graph? (state/get-current-repo))))
(outliner-file/sync-to-file page-entity))))))
(outliner-file/sync-to-file page-entity)))
name)))
(defn create-new-whiteboard-and-redirect!
([]
@@ -259,12 +260,13 @@
(defn page-name->tldr!
([page-name]
(clj->js
(if page-name
(if-let [[page-block blocks] (get-whiteboard-clj page-name)]
(whiteboard-clj->tldr page-block blocks)
(create-new-whiteboard-page! page-name))
(create-new-whiteboard-page! nil)))))
(let [page (if (model/page-exists? page-name)
(model/get-page page-name)
(let [name (create-new-whiteboard-page! page-name)]
(model/get-page name)))
react-page (db/sub-block (:db/id page))
blocks (:block/_page react-page)]
(whiteboard-clj->tldr react-page blocks))))
(defn- get-whiteboard-blocks
"Given a page, return all the logseq blocks (exclude all shapes)"