Adds multiple pages, pageStates to state object (groan)

packages/core/src/types.ts

@@ -13,6 +13,11 @@ export interface TLPage<T extends TLShape, B extends TLBinding> {
 
 export interface TLPageState {
   id: string
+  selectedIds: string[]
+  camera: {
+    point: number[]
+    zoom: number
+  }
   brush?: TLBounds
   pointedId?: string
   hoveredId?: string
@@ -20,11 +25,6 @@ export interface TLPageState {
   bindingId?: string
   boundsRotation?: number
   currentParentId?: string
-  selectedIds: string[]
-  camera: {
-    point: number[]
-    zoom: number
-  }
 }
 
 export interface TLHandle {

packages/tldraw/src/components/menu/menu.tsx

@@ -10,12 +10,11 @@ import {
   DropdownMenuButton,
   DropdownMenuSubMenu,
   DropdownMenuDivider,
-  DropdownMenuCheckboxItem,
   IconWrapper,
   Kbd,
 } from '~components/shared'
-import { useTLDrawContext, useTheme } from '~hooks'
-import type { Data } from '~types'
+import { useTLDrawContext } from '~hooks'
+import { Preferences } from './preferences'
 
 export const Menu = React.memo(() => {
   const { tlstate } = useTLDrawContext()
@@ -96,31 +95,3 @@ function RecentFiles() {
     </DropdownMenuSubMenu>
   )
 }
-
-const isDebugModeSelector = (s: Data) => s.settings.isDebugMode
-
-function Preferences() {
-  const { tlstate, useSelector } = useTLDrawContext()
-  const { theme, setTheme } = useTheme()
-
-  const isDebugMode = useSelector(isDebugModeSelector)
-  const isDarkMode = theme === 'dark'
-
-  const toggleDebugMode = React.useCallback(() => {
-    tlstate.toggleDebugMode()
-  }, [tlstate])
-
-  return (
-    <DropdownMenuSubMenu label="Preferences">
-      <DropdownMenuCheckboxItem
-        checked={isDarkMode}
-        onCheckedChange={() => setTheme(isDarkMode ? 'light' : 'dark')}
-      >
-        <span>Dark Mode</span>
-      </DropdownMenuCheckboxItem>
-      <DropdownMenuCheckboxItem checked={isDebugMode} onCheckedChange={toggleDebugMode}>
-        <span>Debug Mode</span>
-      </DropdownMenuCheckboxItem>
-    </DropdownMenuSubMenu>
-  )
-}

packages/tldraw/src/components/menu/preferences.tsx

@@ -1,15 +1,24 @@
+import * as React from 'react'
+import { DropdownMenuSubMenu, DropdownMenuCheckboxItem } from '~components/shared'
+import { useTheme, useTLDrawContext } from '~hooks'
+import type { Data } from '~types'
+
+const isDebugModeSelector = (s: Data) => s.settings.isDebugMode
+
 export function Preferences() {
-  const { theme, setTheme } = useTheme()
+  const { theme, toggle } = useTheme()
+  const { tlstate, useSelector } = useTLDrawContext()
 
-  const isDebugMode = useSelector((s) => s.data.settings.isDebugMode)
+  const isDebugMode = useSelector(isDebugModeSelector)
   const isDarkMode = theme === 'dark'
 
+  const toggleDebugMode = React.useCallback(() => {
+    tlstate.toggleDebugMode()
+  }, [tlstate])
+
   return (
     <DropdownMenuSubMenu label="Preferences">
-      <DropdownMenuCheckboxItem
-        checked={isDarkMode}
-        onCheckedChange={() => setTheme(isDarkMode ? 'light' : 'dark')}
-      >
+      <DropdownMenuCheckboxItem checked={isDarkMode} onCheckedChange={toggle}>
         <span>Dark Mode</span>
       </DropdownMenuCheckboxItem>
       <DropdownMenuCheckboxItem checked={isDebugMode} onCheckedChange={toggleDebugMode}>

packages/tldraw/src/components/page-options-dialog/page-options-dialog.test.tsx

@@ -4,6 +4,6 @@ import { mockDocument, renderWithContext } from '~test'
 
 describe('page options dialog', () => {
   test('mounts component without crashing', () => {
-    renderWithContext(<PageOptionsDialog page={mockDocument.pages.page} />)
+    renderWithContext(<PageOptionsDialog page={mockDocument.pages.page1} />)
   })
 })

packages/tldraw/src/components/tldraw/tldraw.tsx

@@ -54,7 +54,7 @@ export function TLDraw({ document, currentPageId, onMount, onChange: _onChange }
 
   React.useEffect(() => {
     if (!currentPageId) return
-    tlstate.setCurrentPageId(currentPageId)
+    tlstate.changePage(currentPageId)
   }, [currentPageId, tlstate])
 
   React.useEffect(() => {

packages/tldraw/src/types.ts

@@ -6,6 +6,7 @@ import type { TLPage, TLPageState, TLSettings } from '@tldraw/core'
 import type { StoreApi } from 'zustand'
 
 export type TLStore = StoreApi<Data>
+
 export type TLChange = Data
 
 export type TLDrawPage = TLPage<TLDrawShape, TLDrawBinding>
@@ -23,8 +24,7 @@ export interface TLDrawSettings extends TLSettings {
 }
 
 export interface Data {
-  page: TLPage<TLDrawShape, TLDrawBinding>
-  pageState: TLPageState
+  document: TLDrawDocument
   settings: TLDrawSettings
   appState: {
     selectedStyle: ShapeStyles
@@ -40,10 +40,7 @@ export interface Data {
     status: { current: TLDrawStatus; previous: TLDrawStatus }
   }
 }
-export interface PagePartial {
-  shapes: DeepPartial<Data['page']['shapes']>
-  bindings: DeepPartial<Data['page']['bindings']>
-}
+export type PagePartial = DeepPartial<TLDrawPage>
 
 export type DeepPartial<T> = T extends Function
   ? T