Adds multiple pages, pageStates to state object (groan)

This commit is contained in:
Steve Ruiz 2021-08-16 15:01:03 +01:00
parent 9c45e0a5a5
commit 594bc7c2ff
7 changed files with 491 additions and 370 deletions

View file

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

View file

@ -10,12 +10,11 @@ import {
DropdownMenuButton, DropdownMenuButton,
DropdownMenuSubMenu, DropdownMenuSubMenu,
DropdownMenuDivider, DropdownMenuDivider,
DropdownMenuCheckboxItem,
IconWrapper, IconWrapper,
Kbd, Kbd,
} from '~components/shared' } from '~components/shared'
import { useTLDrawContext, useTheme } from '~hooks' import { useTLDrawContext } from '~hooks'
import type { Data } from '~types' import { Preferences } from './preferences'
export const Menu = React.memo(() => { export const Menu = React.memo(() => {
const { tlstate } = useTLDrawContext() const { tlstate } = useTLDrawContext()
@ -96,31 +95,3 @@ function RecentFiles() {
</DropdownMenuSubMenu> </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>
)
}

View file

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

View file

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

View file

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

File diff suppressed because it is too large Load diff

View file

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