feat: remember whiteboard camera in session storage

src/main/frontend/extensions/tldraw.cljs

@@ -72,21 +72,20 @@
                                                 (keyword type)))
    :redirectToPage (fn [page-name]
                      (if (model/whiteboard-page? page-name)
-                         (route-handler/redirect-to-whiteboard! page-name)
-                         (route-handler/redirect-to-page! page-name)))})
+                       (route-handler/redirect-to-whiteboard! page-name)
+                       (route-handler/redirect-to-page! page-name)))})
 
 (rum/defc tldraw-app
   [name block-id]
   (let [data (whiteboard-handler/page-name->tldr! name block-id)
         [tln set-tln] (rum/use-state nil)]
-    (rum/use-effect!
+    (rum/use-layout-effect!
      (fn []
        (when (and tln name)
          (when-let [^js api (gobj/get tln "api")]
-           (if (empty? block-id)
-             (. api zoomToFit)
-             (do (. api selectShapes block-id)
-                 (. api zoomToSelection)))))
+           (when block-id
+             (. api selectShapes block-id)
+             (. api zoomToSelection))))
        nil) [name block-id tln])
     (when (and (not-empty name) (not-empty (gobj/get data "currentPageId")))
       [:div.draw.tldraw.whiteboard.relative.w-full.h-full

tldraw/packages/react/src/components/Canvas/Canvas.tsx

@@ -14,6 +14,7 @@ import {
   useCursor,
   useZoom,
   useCanvasEvents,
+  useRestoreCamera,
 } from '../../hooks'
 import { useKeyboardEvents } from '../../hooks/useKeyboardEvents'
 import type { TLReactShape } from '../../lib'
@@ -96,6 +97,7 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
   usePreventNavigation(rContainer)
   useResizeObserver(rContainer, viewport, onBoundsChange)
   useGestureEvents(rContainer)
+  useRestoreCamera()
   useCursor(rContainer, cursor, cursorRotation)
   useZoom(rContainer)
   useKeyboardEvents(rContainer)

tldraw/packages/react/src/hooks/index.ts

@@ -16,3 +16,4 @@ export * from './useCursor'
 export * from './useZoom'
 export * from './useMinimapEvents'
 export * from './useDebounced'
+export * from './useRestoreCamera'

tldraw/packages/react/src/hooks/useRestoreCamera.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { reaction } from 'mobx'
+import * as React from 'react'
+import type { TLReactApp } from '../lib'
+import { useApp } from './useApp'
+
+const storingKey = 'logseq.tldraw.camera'
+
+const cacheCamera = (app: TLReactApp) => {
+  window.sessionStorage.setItem(
+    storingKey + ':' + app.currentPageId,
+    JSON.stringify(app.viewport.camera)
+  )
+}
+
+const loadCamera = (app: TLReactApp) => {
+  const camera = JSON.parse(
+    window.sessionStorage.getItem(storingKey + ':' + app.currentPageId) ?? 'null'
+  )
+  if (camera) {
+    app.viewport.update(camera)
+  } else if (app.selectedIds.size) {
+    app.api.zoomToSelection()
+  } else {
+    app.api.zoomToFit()
+  }
+}
+
+export function useRestoreCamera(): void {
+  const app = useApp()
+
+  React.useEffect(() => {
+    reaction(
+      () => ({ ...app.viewport.camera }),
+      () => cacheCamera(app)
+    )
+  }, [app.viewport.camera])
+
+  React.useEffect(() => {
+    loadCamera(app)
+  }, [app])
+}