2021-05-12 11:27:33 +00:00
|
|
|
import useKeyboardEvents from "hooks/useKeyboardEvents"
|
2021-05-16 07:09:46 +00:00
|
|
|
import useLoadOnMount from "hooks/useLoadOnMount"
|
2021-05-09 13:04:42 +00:00
|
|
|
import Canvas from "./canvas/canvas"
|
|
|
|
import StatusBar from "./status-bar"
|
2021-05-15 13:54:27 +00:00
|
|
|
import Toolbar from "./toolbar"
|
2021-05-14 22:56:41 +00:00
|
|
|
import CodePanel from "./code-panel/code-panel"
|
2021-05-17 10:01:11 +00:00
|
|
|
import ControlsPanel from "./controls-panel/controls-panel"
|
|
|
|
import styled from "styles"
|
2021-05-26 10:34:10 +00:00
|
|
|
import StylePanel from "./style-panel/style-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-05-09 13:04:42 +00:00
|
|
|
return (
|
2021-05-17 10:01:11 +00:00
|
|
|
<Layout>
|
2021-05-09 13:04:42 +00:00
|
|
|
<Canvas />
|
|
|
|
<StatusBar />
|
2021-05-15 13:54:27 +00:00
|
|
|
<Toolbar />
|
2021-05-17 10:01:11 +00:00
|
|
|
<LeftPanels>
|
|
|
|
<CodePanel />
|
|
|
|
<ControlsPanel />
|
|
|
|
</LeftPanels>
|
2021-05-26 10:34:10 +00:00
|
|
|
<RightPanels>
|
|
|
|
<StylePanel />
|
|
|
|
</RightPanels>
|
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
|
|
|
|
|
|
|
const Layout = styled("div", {
|
|
|
|
position: "fixed",
|
|
|
|
top: 0,
|
|
|
|
left: 0,
|
|
|
|
bottom: 0,
|
|
|
|
right: 0,
|
|
|
|
display: "grid",
|
|
|
|
gridTemplateRows: "40px 1fr 40px",
|
2021-05-26 10:34:10 +00:00
|
|
|
gridTemplateColumns: "minmax(50%, 400px) 1fr auto",
|
2021-05-17 10:01:11 +00:00
|
|
|
gridTemplateAreas: `
|
2021-05-26 10:34:10 +00:00
|
|
|
"toolbar toolbar toolbar"
|
|
|
|
"leftPanels main rightPanels"
|
|
|
|
"statusbar statusbar statusbar"
|
2021-05-17 10:01:11 +00:00
|
|
|
`,
|
|
|
|
})
|
|
|
|
|
|
|
|
const LeftPanels = styled("main", {
|
|
|
|
display: "grid",
|
|
|
|
gridArea: "leftPanels",
|
|
|
|
gridTemplateRows: "1fr auto",
|
|
|
|
padding: 8,
|
|
|
|
gap: 8,
|
|
|
|
})
|
2021-05-26 10:34:10 +00:00
|
|
|
|
|
|
|
const RightPanels = styled("main", {
|
|
|
|
display: "grid",
|
|
|
|
gridArea: "rightPanels",
|
|
|
|
gridTemplateRows: "auto",
|
|
|
|
height: "fit-content",
|
|
|
|
justifyContent: "flex-end",
|
|
|
|
padding: 8,
|
|
|
|
gap: 8,
|
|
|
|
})
|