fix(tldraw): enable initial currentPageId prop

[with-heart]

This PR fixes tldraw/tldraw-v1#187

Opening this as a draft because I'm really not sure what the best approach would be here.

tldraw/tldraw-v1#187 occurs because TldrawApp initializes its state from TldrawApp.defaultState which doesn't reflect the reality of our intentions if we're passing custom document/currentPageId props to Tldraw:

Us: Hey Tldraw, please render page1 from our customDocument
Tldraw: Sure thing! Rendering page from TldrawApp.defaultDocument

---

For an initial attempt, I added a third initialState argument to TldrawApp#constructor that defaults to TldrawApp.defaultState. I then added a new object in the initializers in Tldraw using TldrawApp.defaultState, overriding specifically the document and appState.currentPageId keys since those are the only parts of initial state relevant to Tldraw.

This allows us to set the custom initial state we need without any breaking changes. The downside is that the initialization piece is gross af imo. Consumers probably shouldn't need to spread TldrawApp.defaultState like that, but I couldn't think of a better way to handle it.

I had considered making initialState optional and deep merging it into TldrawApp.defaultState when provided, but since we need to replace defaultState.document with props.document if it exists, deep merging isn't an option here. We could make the new argument an object of type { document: TDDocument; currentPageId: string } and do the spreading ourselves inside TldrawApp, but that feels too specific to only the Tldraw use case.

Would love some additional thoughts or context to help shape this into a better solution!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
core	✅ Ready (Inspect)	Visit Preview	Sep 2, 2022 at 2:34PM (UTC)
tldraw	✅ Ready (Inspect)	Visit Preview	Sep 2, 2022 at 2:34PM (UTC)

[steveruizok]

Wow, I spent some time working on this today and it really is a thorny issue. See what you can come up with, I'll also try some things out here.

[with-heart]

@steveruizok I spent more time on this today than I'd care to admit 😆 but I think I've come up with something that feels pretty good

Still need to actually play around with the changes in the example app just to make sure it's working the way I think it will, but gonna call it a day so will hopefully get a chance to do that tomorrow

[with-heart]

Played around with it, seems to be working!

[with-heart]

Actually I wasn't thorough enough with testing.

It works fine if document has a single page or currentPageId corresponds to the first page in document.pages.

If you have multiple pages and currentPageId is set to a non-first page, it initially renders the correct page but resets back to displaying the first page after onReady calls this.loadDocument:

tldraw/packages/tldraw/src/state/TldrawApp.ts

Lines 1351 to 1363 in ecb4bfc

	const state = {
	...TldrawApp.defaultState,
	settings: {
	...this.state.settings,
	},
	document,
	appState: {
	...TldrawApp.defaultState.appState,
	...this.state.appState,
	currentPageId: Object.keys(document.pages)[0],
	disableAssets: this.disableAssets,
	},
	}

It works if I don't reset currentPageId there, but then resetting the document won't work as expected. Need to think about how to handle that situation

[with-heart]

In the current state, we can at least pass an onMount callback that calls app.changePage(currentPageId) to set the correct page after the document loads. Maybe that's enough for a temporary solution?

Shared more detailed thoughts in tldraw/tldraw-v1#187

[steveruizok]

It might need to be for now. Quite frustrating due to the need to wait for the async indexeddb load.

[judicaelandria]

In the current state, we can at least pass an onMount callback that calls app.changePage(currentPageId) to set the correct page after the document loads. Maybe that's enough for a temporary solution?

Shared more detailed thoughts in tldraw/tldraw-v1#187

I was thinking about fixing this too, quite frustrating when it always comes back to the first page. I think you can do that IMO

[with-heart]

Sorry this has been languishing! Will try to get it updated and ready for merge later today. Gonna go with the onMount callback to make things work for now