118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
import { Suspense, lazy } from 'react'
|
|
import { Mosaic, MosaicWindow } from 'react-mosaic-component'
|
|
import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
|
|
import IdeConsole from 'src/components/IdeConsole'
|
|
import 'react-mosaic-component/react-mosaic-component.css'
|
|
import EditorMenu from 'src/components/EditorMenu/EditorMenu'
|
|
import PanelToolbar from 'src/components/PanelToolbar/PanelToolbar'
|
|
import { use3dViewerResize } from 'src/helpers/hooks/use3dViewerResize'
|
|
|
|
const IdeEditor = lazy(() => import('src/components/IdeEditor/IdeEditor'))
|
|
import IdeViewer from 'src/components/IdeViewer/IdeViewer'
|
|
|
|
const SmallLoadingPing = (
|
|
<div className="bg-ch-gray-800 text-gray-200 font-ropa-sans relative w-full h-full flex justify-center items-center">
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex justify-center items-center">
|
|
<div className="h-4 w-4 bg-purple-600 rounded-full animate-ping"></div>
|
|
</div>
|
|
<div className="relative">. . . loading</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
export const BigLoadingPing = (
|
|
<div className="inset-0 absolute flex items-center justify-center bg-ch-gray-800 pointer-events-none">
|
|
<div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
|
|
</div>
|
|
)
|
|
|
|
const ELEMENT_MAP = {
|
|
Editor: (
|
|
<Suspense fallback={SmallLoadingPing}>
|
|
<IdeEditor Loading={SmallLoadingPing} />
|
|
</Suspense>
|
|
),
|
|
Viewer: <IdeViewer />,
|
|
Console: <IdeConsole />,
|
|
}
|
|
|
|
const TOOLBAR_MAP = {
|
|
Editor: () => (
|
|
<div className="w-full">
|
|
<EditorMenu />
|
|
</div>
|
|
),
|
|
Viewer: (thunkDispatch) => (
|
|
<div>
|
|
<PanelToolbar
|
|
panelName="Viewer"
|
|
onClick={() =>
|
|
thunkDispatch((dispatch) =>
|
|
dispatch({
|
|
type: 'settingsButtonClicked',
|
|
payload: ['Settings', 'viewer'],
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
),
|
|
Console: (thunkDispatch) => (
|
|
<div>
|
|
<PanelToolbar
|
|
panelName="Console"
|
|
showTopGradient
|
|
onClick={() =>
|
|
thunkDispatch((dispatch) =>
|
|
dispatch({
|
|
type: 'settingsButtonClicked',
|
|
payload: ['Settings', 'console'],
|
|
})
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
const IdeContainer = () => {
|
|
const { viewerDomRef, handleViewerSizeUpdate } = use3dViewerResize()
|
|
|
|
const { state, thunkDispatch } = useIdeContext()
|
|
|
|
return (
|
|
<div
|
|
id="cadhub-ide"
|
|
className="mosaic-toolbar-overrides flex-auto h-full bg-red-500"
|
|
>
|
|
<Mosaic
|
|
renderTile={(id, path) => {
|
|
return (
|
|
<MosaicWindow
|
|
path={path}
|
|
renderToolbar={() => TOOLBAR_MAP[id](thunkDispatch)}
|
|
className={`${id.toLowerCase()} ${id.toLowerCase()}-tile`}
|
|
>
|
|
{id === 'Viewer' ? (
|
|
<div id="view-wrapper" className="h-full" ref={viewerDomRef}>
|
|
{ELEMENT_MAP[id]}
|
|
</div>
|
|
) : (
|
|
ELEMENT_MAP[id]
|
|
)}
|
|
</MosaicWindow>
|
|
)
|
|
}}
|
|
value={state.layout}
|
|
onChange={(newLayout) =>
|
|
thunkDispatch({ type: 'setLayout', payload: { message: newLayout } })
|
|
}
|
|
onRelease={handleViewerSizeUpdate}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default IdeContainer
|