From bc26ef22a571c0ecd0ae98a633e2458b98ef8ac4 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Mon, 20 Jun 2022 22:48:44 +0800
Subject: [PATCH] zoomToFit when opened

---
 tldraw/apps/tldraw-logseq/src/app.tsx       | 17 ++++++++++-------
 tldraw/packages/core/src/lib/TLApp/TLApp.ts |  8 +++++++-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/app.tsx b/tldraw/apps/tldraw-logseq/src/app.tsx
index 43788e1617..e17ab4d907 100644
--- a/tldraw/apps/tldraw-logseq/src/app.tsx
+++ b/tldraw/apps/tldraw-logseq/src/app.tsx
@@ -5,7 +5,8 @@ import {
   AppCanvas,
   AppProvider,
   TLReactCallbacks,
-  TLReactComponents, TLReactToolConstructor
+  TLReactComponents,
+  TLReactToolConstructor,
 } from '@tldraw/react'
 import * as React from 'react'
 import { AppUI } from '~components/AppUI'
@@ -25,7 +26,7 @@ import {
   PencilTool,
   PolygonTool,
   TextTool,
-  YouTubeTool
+  YouTubeTool,
 } from '~lib/tools'
 
 const components: TLReactComponents<Shape> = {
@@ -54,16 +55,18 @@ interface LogseqTldrawProps {
   onPersist?: TLReactCallbacks<Shape>['onPersist']
 }
 
-export const App = function App(props: LogseqTldrawProps): JSX.Element {
+export const App = function App({
+  searchHandler,
+  PageComponent,
+  ...props
+}: LogseqTldrawProps): JSX.Element {
   const onFileDrop = useFileDrop()
   const onPaste = usePaste()
 
-  const Page = React.useMemo(() => React.memo(props.PageComponent), [])
-
+  const Page = React.useMemo(() => React.memo(PageComponent), [])
   return (
-    <LogseqContext.Provider value={{ Page, search: props.searchHandler }}>
+    <LogseqContext.Provider value={{ Page, search: searchHandler }}>
       <AppProvider
-        onMount={props.onMount}
         Shapes={shapes}
         Tools={tools}
         onFileDrop={onFileDrop}
diff --git a/tldraw/packages/core/src/lib/TLApp/TLApp.ts b/tldraw/packages/core/src/lib/TLApp/TLApp.ts
index d216dcf73d..53ceeb61ee 100644
--- a/tldraw/packages/core/src/lib/TLApp/TLApp.ts
+++ b/tldraw/packages/core/src/lib/TLApp/TLApp.ts
@@ -191,6 +191,9 @@ export class TLApp<
   loadDocumentModel(model: TLDocumentModel<S>): this {
     this.history.deserialize(model)
     if (model.assets) this.addAssets(model.assets)
+
+    // Viewport should be focused to existing shapes
+    this.api.zoomToFit()
     return this
   }
 
@@ -471,7 +474,10 @@ export class TLApp<
       this.selectionRotation = 0
     }
     if (process.env.NODE_ENV === 'development') {
-      console.log('setSelectedShapes', newSelectedShapes.map(s => toJS(s.serialized)))
+      console.log(
+        'setSelectedShapes',
+        newSelectedShapes.map(s => toJS(s.serialized))
+      )
     }
     return this
   }