tldraw/components/editor.tsx
2021-06-21 22:35:28 +01:00

57 lines
1.3 KiB
TypeScript

import useKeyboardEvents from 'hooks/useKeyboardEvents'
import useLoadOnMount from 'hooks/useLoadOnMount'
import Canvas from './canvas/canvas'
import StatusBar from './status-bar'
import ToolsPanel from './tools-panel/tools-panel'
import StylePanel from './style-panel/style-panel'
import styled from 'styles'
import PagePanel from './page-panel/page-panel'
// import dynamic from 'next/dynamic'
// import ControlsPanel from './controls-panel/controls-panel'
// import { useSelector } from 'state'
// const CodePanel = dynamic(() => import('./code-panel/code-panel'))
export default function Editor(): JSX.Element {
useKeyboardEvents()
useLoadOnMount()
// const hasControls = useSelector(
// (s) => Object.keys(s.data.codeControls).length > 0
// )
return (
<Layout>
{/* <CodePanel /> */}
<PagePanel />
<Spacer />
<StylePanel />
<Canvas />
<ToolsPanel />
<StatusBar />
</Layout>
)
}
const Spacer = styled('div', {
flexGrow: 2,
})
const Layout = styled('main', {
position: 'fixed',
overflow: 'hidden',
top: 0,
left: 0,
bottom: 0,
right: 0,
height: '100%',
width: '100%',
padding: '8px 8px 0 8px',
zIndex: 200,
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'flex-start',
pointerEvents: 'none',
'& > *': {
PointerEvent: 'all',
},
})