fix: blink issue

src/main/frontend/components/whiteboard.cljs

@@ -74,7 +74,7 @@
   [name block-id]
   [:div.absolute.w-full.h-full.whiteboard-page
 
-     ;; makes sure the whiteboard will not cover the borders
+   ;; makes sure the whiteboard will not cover the borders
    {:key name
     :style {:padding "0.5px" :z-index 0
             :transform "translateZ(0)"

src/main/frontend/extensions/tldraw.cljs

@@ -2,9 +2,8 @@
   (:require ["/tldraw-logseq" :as TldrawLogseq]
             [frontend.components.block :as block]
             [frontend.components.page :as page]
-            [frontend.handler.whiteboard :refer [page-name->tldr!
-                                                 transact-tldr!
-                                                 add-new-block-shape!]]
+            [frontend.handler.whiteboard :refer [add-new-block-shape!
+                                                 page-name->tldr! transact-tldr!]]
             [frontend.rum :as r]
             [frontend.search :as search]
             [frontend.state :as state]
@@ -35,10 +34,19 @@
           client-y (gobj/get e "clientY")]
       (add-new-block-shape! uuid client-x client-y))))
 
-(rum/defcs tldraw-app < rum/reactive
-  (rum/local false ::view-mode?)
-  [state name block-id]
-  (let [data (page-name->tldr! name block-id)]
+(rum/defc tldraw-app
+  [name block-id]
+  (let [data (page-name->tldr! name block-id)
+        [tln set-tln] (rum/use-state nil)]
+    (rum/use-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)))))
+       nil) [name block-id tln])
     (when (and name (not-empty (gobj/get data "currentPageId")))
       [:div.draw.tldraw.whiteboard.relative.w-full.h-full
        {:style {:overscroll-behavior "none"}
@@ -51,8 +59,8 @@
                             :Breadcrumb breadcrumb
                             :PageNameLink page-name-link}
                 :searchHandler (comp clj->js vec search/page-search)
+                :onMount (fn [app] (set-tln ^js app))
                 :onPersist (fn [app]
                              (let [document (gobj/get app "serialized")]
                                (transact-tldr! name document)))
                 :model data})])))
-

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

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { TLViewport, TLBounds, debounce } from '@tldraw/core'
-import { useApp } from './useApp'
 
 const getNearestScrollableContainer = (element: HTMLElement): HTMLElement | Document => {
   let parent = element.parentElement
@@ -26,7 +25,6 @@ export function useResizeObserver<T extends HTMLElement>(
   viewport: TLViewport,
   onBoundsChange?: (bounds: TLBounds) => void
 ) {
-  const app = useApp()
   const rIsMounted = React.useRef(false)
 
   // When the element resizes, update the bounds (stored in inputs)
@@ -83,12 +81,5 @@ export function useResizeObserver<T extends HTMLElement>(
 
   React.useLayoutEffect(() => {
     updateBounds()
-    setTimeout(() => {
-      if (app.selectedIds.size) {
-        app.api.zoomToSelection()
-      } else {
-        app.api.zoomToFit()
-      }
-    }, 50)
   }, [ref])
 }