kopia lustrzana https://github.com/Tldraw/Tldraw
69 wiersze
1.5 KiB
TypeScript
69 wiersze
1.5 KiB
TypeScript
import useKeyboardEvents from "hooks/useKeyboardEvents"
|
|
import useLoadOnMount from "hooks/useLoadOnMount"
|
|
import Canvas from "./canvas/canvas"
|
|
import StatusBar from "./status-bar"
|
|
import Toolbar from "./toolbar"
|
|
import CodePanel from "./code-panel/code-panel"
|
|
import ControlsPanel from "./controls-panel/controls-panel"
|
|
import styled from "styles"
|
|
import StylePanel from "./style-panel/style-panel"
|
|
import { useSelector } from "state"
|
|
|
|
export default function Editor() {
|
|
useKeyboardEvents()
|
|
useLoadOnMount()
|
|
|
|
const hasControls = useSelector(
|
|
(s) => Object.keys(s.data.codeControls).length > 0
|
|
)
|
|
|
|
return (
|
|
<Layout>
|
|
<Canvas />
|
|
<StatusBar />
|
|
<Toolbar />
|
|
<LeftPanels>
|
|
<CodePanel />
|
|
{hasControls && <ControlsPanel />}
|
|
</LeftPanels>
|
|
<RightPanels>
|
|
<StylePanel />
|
|
</RightPanels>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
const Layout = styled("div", {
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
display: "grid",
|
|
gridTemplateRows: "40px 1fr 40px",
|
|
gridTemplateColumns: "minmax(50%, 400px) 1fr auto",
|
|
gridTemplateAreas: `
|
|
"toolbar toolbar toolbar"
|
|
"leftPanels main rightPanels"
|
|
"statusbar statusbar statusbar"
|
|
`,
|
|
})
|
|
|
|
const LeftPanels = styled("main", {
|
|
display: "grid",
|
|
gridArea: "leftPanels",
|
|
gridTemplateRows: "1fr auto",
|
|
padding: 8,
|
|
gap: 8,
|
|
})
|
|
|
|
const RightPanels = styled("main", {
|
|
display: "grid",
|
|
gridArea: "rightPanels",
|
|
gridTemplateRows: "auto",
|
|
height: "fit-content",
|
|
justifyContent: "flex-end",
|
|
padding: 8,
|
|
gap: 8,
|
|
})
|