2021-05-29 10:12:28 +00:00
|
|
|
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'
|
2021-06-03 12:06:39 +00:00
|
|
|
import PagePanel from './page-panel/page-panel'
|
2021-06-20 12:35:47 +00:00
|
|
|
// import dynamic from 'next/dynamic'
|
|
|
|
// import ControlsPanel from './controls-panel/controls-panel'
|
2021-06-18 14:39:07 +00:00
|
|
|
// import { useSelector } from 'state'
|
|
|
|
// const CodePanel = dynamic(() => import('./code-panel/code-panel'))
|
2021-05-09 13:04:42 +00:00
|
|
|
|
|
|
|
export default function Editor() {
|
2021-05-12 11:27:33 +00:00
|
|
|
useKeyboardEvents()
|
2021-05-16 07:09:46 +00:00
|
|
|
useLoadOnMount()
|
2021-05-12 11:27:33 +00:00
|
|
|
|
2021-06-18 14:39:07 +00:00
|
|
|
// const hasControls = useSelector(
|
|
|
|
// (s) => Object.keys(s.data.codeControls).length > 0
|
|
|
|
// )
|
2021-05-26 21:47:46 +00:00
|
|
|
|
2021-05-09 13:04:42 +00:00
|
|
|
return (
|
2021-05-17 10:01:11 +00:00
|
|
|
<Layout>
|
2021-06-18 14:39:07 +00:00
|
|
|
{/* <CodePanel /> */}
|
2021-06-03 12:06:39 +00:00
|
|
|
<PagePanel />
|
2021-06-03 16:13:23 +00:00
|
|
|
<Spacer />
|
|
|
|
<StylePanel />
|
|
|
|
<Canvas />
|
2021-05-29 10:12:28 +00:00
|
|
|
<ToolsPanel />
|
2021-06-11 20:14:43 +00:00
|
|
|
<StatusBar />
|
2021-05-17 10:01:11 +00:00
|
|
|
</Layout>
|
2021-05-09 13:04:42 +00:00
|
|
|
)
|
|
|
|
}
|
2021-05-17 10:01:11 +00:00
|
|
|
|
2021-06-03 16:13:23 +00:00
|
|
|
const Spacer = styled('div', {
|
|
|
|
flexGrow: 2,
|
|
|
|
})
|
|
|
|
|
2021-06-01 21:49:32 +00:00
|
|
|
const Layout = styled('main', {
|
2021-05-29 10:12:28 +00:00
|
|
|
position: 'fixed',
|
2021-06-18 14:39:07 +00:00
|
|
|
overflow: 'hidden',
|
2021-05-17 10:01:11 +00:00
|
|
|
top: 0,
|
|
|
|
left: 0,
|
|
|
|
bottom: 0,
|
|
|
|
right: 0,
|
2021-05-30 13:39:53 +00:00
|
|
|
height: '100%',
|
|
|
|
width: '100%',
|
2021-06-03 16:13:23 +00:00
|
|
|
padding: '8px 8px 0 8px',
|
|
|
|
zIndex: 200,
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'flex-start',
|
|
|
|
justifyContent: 'flex-start',
|
2021-06-01 21:49:32 +00:00
|
|
|
pointerEvents: 'none',
|
2021-06-03 16:13:23 +00:00
|
|
|
'& > *': {
|
|
|
|
PointerEvent: 'all',
|
|
|
|
},
|
2021-05-26 10:34:10 +00:00
|
|
|
})
|