feat: zoom into searched text shape

src/main/frontend/components/search.cljs

@@ -151,7 +151,7 @@
         (if page
           (cond
             (model/whiteboard-page? page-name)
-            (route/redirect-to-whiteboard! page-name)
+            (route/redirect-to-whiteboard! page-name {:block-id block-uuid})
 
             (or collapsed? long-page?)
             (route/redirect-to-page! block-uuid)

src/main/frontend/components/whiteboard.cljs

@@ -20,12 +20,12 @@
            (p/let [_ (loader/load :tldraw)]
              (reset! tldraw-loaded? true))
            state)}
-  [name]
+  [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))))
+      (draw-component name shape-id))))
 
 (rum/defc tldraw-preview < rum/reactive
   {:init (fn [state]
@@ -59,7 +59,7 @@
                 :small? true
                 :on-click (fn [e]
                             (util/stop e)
-                            (route-handler/redirect-to-whiteboard! (d/squuid) true)))
+                            (route-handler/redirect-to-whiteboard! (d/squuid) {:new? true})))
      [:div.gap-8.py-4.grid.grid-rows-auto.md:grid-cols-3.lg:grid-cols-4.grid-cols-1
       (for [whiteboard-name whiteboard-names]
         [:<> {:key whiteboard-name} (dashboard-card whiteboard-name)])]]))
@@ -75,8 +75,7 @@
 (rum/defc whiteboard
   [route-match]
   (let [name (get-in route-match [:parameters :path :name])
-
-        new? (get-in route-match [:parameters :query :new?])]
+        {:keys [new? block-id]} (get-in route-match [:parameters :query])]
 
     (rum/use-effect! (fn [_]
                        (when new? (create-new-whiteboard-page! name))
@@ -99,4 +98,4 @@
 
       (whiteboard-references name)]
 
-     (tldraw-app name)]))
+     (tldraw-app name block-id)]))

src/main/frontend/extensions/tldraw.cljs

@@ -16,8 +16,8 @@
 
 (rum/defcs tldraw-app < rum/reactive
   (rum/local false ::view-mode?)
-  [state name]
-  (let [data (page-name->tldr name)]
+  [state name block-id]
+  (let [data (page-name->tldr name block-id)]
     (when (and name (not-empty (gobj/get data "currentPageId")))
       [:div.draw.tldraw.relative.w-full.h-full
        {:style {:overscroll-behavior "none"}

src/main/frontend/handler/route.cljs

@@ -55,12 +55,13 @@
 
 (defn redirect-to-whiteboard!
   ([name]
-   (redirect-to-whiteboard! name false))
-  ([name new?]
+   (redirect-to-whiteboard! name nil))
+  ([name {:keys [new? block-id]}]
    (recent-handler/add-page-to-recent! (state/get-current-repo) name)
    (redirect! {:to :whiteboard
                :path-params {:name (str name)}
-               :query-params (when new? {:new? 1})})))
+               :query-params (merge {:block-id block-id}
+                                    (when new? {:new? 1}))})))
 
 (defn get-title
   [name path-params]

src/main/frontend/handler/whiteboard.cljs

@@ -75,7 +75,7 @@
         blocks (model/get-page-blocks-no-cache page-name)]
     [page-block blocks]))
 
-(defn- whiteboard-clj->tldr [page-block blocks]
+(defn- whiteboard-clj->tldr [page-block blocks shape-id]
   (let [id (str (:block/uuid page-block))
         shapes (map block->shape blocks)
         page-properties (:block/properties page-block)
@@ -83,15 +83,18 @@
         page-properties (dissoc page-properties :assets)]
     (clj->js {:currentPageId id
               :assets (or assets #js[])
-              :selectedIds #js[]
+              :selectedIds (if shape-id #js[shape-id] #js[])
               :pages [(merge page-properties
                              {:id id
                               :name "page"
                               :shapes shapes})]})))
 
-(defn page-name->tldr [page-name]
-  (let [[page-block blocks] (get-whiteboard-clj page-name)]
-    (whiteboard-clj->tldr page-block blocks)))
+(defn page-name->tldr 
+  ([page-name]
+   (page-name->tldr page-name nil))
+  ([page-name shape-id]
+   (let [[page-block blocks] (get-whiteboard-clj page-name)]
+     (whiteboard-clj->tldr page-block blocks shape-id))))
 
 (defn get-whiteboard-entity [page-name]
   (db-utils/entity [:block/name page-name]))

tldraw/packages/core/src/lib/TLViewport.ts

@@ -137,7 +137,7 @@ export class TLViewport {
       (bounds.height - FIT_TO_SCREEN_PADDING) / height
     )
     zoom = Math.min(
-      TLViewport.maxZoom,
+      1,
       Math.max(
         TLViewport.minZoom,
         camera.zoom === zoom || camera.zoom < 1 ? Math.min(1, zoom) : zoom

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

@@ -84,7 +84,11 @@ export function useResizeObserver<T extends HTMLElement>(
   React.useLayoutEffect(() => {
     updateBounds()
     setTimeout(() => {
-      app.api.cameraToCenter()
+      if (app.selectedIds.size) {
+        app.api.zoomToSelection()
+      } else {
+        app.api.cameraToCenter()
+      }
     }, 50)
   }, [ref])
 }