fix: move camera to center

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

@@ -1,3 +1,4 @@
+import Vec from '@tldraw/vec'
 import type { TLApp, TLPage, TLShapeModel, TLShape } from '~lib'
 import type { TLEventMap } from '~types'
 import { BoundsUtils } from '~utils'
@@ -132,6 +133,19 @@ export class TLApi<S extends TLShape = TLShape, K extends TLEventMap = TLEventMa
     return this
   }
 
+  cameraToCenter = (): this => {
+    const { shapes } = this.app.currentPage
+    // Viewport should be focused to existing shapes
+    const commonBounds = BoundsUtils.getCommonBounds(shapes.map(shape => shape.bounds))
+    this.app.viewport.update({
+      point: Vec.add(Vec.neg(BoundsUtils.getBoundsCenter(commonBounds)), [
+        this.app.viewport.currentView.width / 2,
+        this.app.viewport.currentView.height/ 2,
+      ]),
+    })
+    return this
+  }
+
   /** Zoom to fit the current selection in the viewport. */
   zoomToSelection = (): this => {
     const { selectionBounds } = this.app

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

@@ -192,8 +192,6 @@ export class TLApp<
     this.history.deserialize(model)
     if (model.assets) this.addAssets(model.assets)
 
-    // Viewport should be focused to existing shapes
-    this.api.zoomToFit()
     return this
   }
 

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

@@ -1,5 +1,6 @@
 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
@@ -25,6 +26,7 @@ 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)
@@ -81,5 +83,8 @@ export function useResizeObserver<T extends HTMLElement>(
 
   React.useLayoutEffect(() => {
     updateBounds()
+    setTimeout(() => {
+      app.api.cameraToCenter()
+    })
   }, [ref])
 }