66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import React from "react";
|
|
import { Mosaic, MosaicNode, MosaicWindow } from "react-mosaic-component";
|
|
import { useDarkMode } from "./providers/dark-mode-provider";
|
|
|
|
// IDs of windows in the mosaic layout
|
|
type WINDOW_ID = "editor" | "renderer" | "input" | "output";
|
|
|
|
const WindowTitles = {
|
|
editor: "Code Editor",
|
|
renderer: "Visualization",
|
|
input: "User Input",
|
|
output: "Execution Output",
|
|
};
|
|
|
|
type Props = {
|
|
renderEditor: () => React.ReactNode;
|
|
renderRenderer: () => React.ReactNode;
|
|
renderInput: () => React.ReactNode;
|
|
renderOutput: () => React.ReactNode;
|
|
renderExecControls: () => React.ReactNode;
|
|
};
|
|
|
|
export const MainLayout = (props: Props) => {
|
|
const { isDark } = useDarkMode();
|
|
const mosaicClass = "mosaic-blueprint-theme" + (isDark ? " bp3-dark" : "");
|
|
|
|
const MOSAIC_MAP = {
|
|
editor: props.renderEditor,
|
|
renderer: props.renderRenderer,
|
|
input: props.renderInput,
|
|
output: props.renderOutput,
|
|
};
|
|
|
|
const INITIAL_LAYOUT: MosaicNode<WINDOW_ID> = {
|
|
direction: "row",
|
|
first: "editor",
|
|
second: {
|
|
direction: "column",
|
|
first: "renderer",
|
|
second: {
|
|
direction: "row",
|
|
first: "input",
|
|
second: "output",
|
|
},
|
|
},
|
|
};
|
|
|
|
return (
|
|
<Mosaic<keyof typeof MOSAIC_MAP>
|
|
className={mosaicClass}
|
|
initialValue={INITIAL_LAYOUT}
|
|
renderTile={(windowId, path) => (
|
|
<MosaicWindow<number>
|
|
path={path}
|
|
title={WindowTitles[windowId]}
|
|
toolbarControls={
|
|
windowId === "editor" ? props.renderExecControls() : <span />
|
|
}
|
|
>
|
|
{MOSAIC_MAP[windowId]()}
|
|
</MosaicWindow>
|
|
)}
|
|
/>
|
|
);
|
|
};
|