added react-mosaic-component to IdeContainer.js

web/package.json

@@ -35,6 +35,7 @@
     "react-ga": "^3.3.0",
     "react-helmet": "^6.1.0",
     "react-image-crop": "^8.6.6",
+    "react-mosaic-component": "^4.1.1",
     "rich-markdown-editor": "^11.0.2",
     "styled-components": "^5.2.0",
     "three": "^0.118.3"

web/src/components/IdeConsole/IdeConsole.js

@@ -4,7 +4,7 @@ import { IdeContext } from 'src/components/IdeToolbarNew'
 const IdeConsole = () => {
   const { state } = useContext(IdeContext)
   return (
-    <div className="p-8 border-2 m-2">
+    <div className="p-8 border-2 m-2 overflow-y-auto">
       <div className="pb-4">hi I'm console</div>
       <div>
         {state.consoleMessages?.map(({ type, message }, index) => (

web/src/components/IdeContainer/IdeContainer.js

@@ -1,18 +1,31 @@
+import { useContext } from 'react'
+import { Mosaic, MosaicWindow } from 'react-mosaic-component'
+import { IdeContext } from 'src/components/IdeToolbarNew'
 import IdeEditor from 'src/components/IdeEditor'
 import IdeViewer from 'src/components/IdeViewer'
 import IdeConsole from 'src/components/IdeConsole'
+import 'react-mosaic-component/react-mosaic-component.css'
 
-const IdeContainer = () => {
-  return (
-    <div className="p-8 border-2">
-      <h2>hi I'm IDE container</h2>
-      <div className="flex">
-        <IdeEditor />
-        <IdeViewer />
-        <IdeConsole />
-      </div>
-    </div>
-  )
+const ELEMENT_MAP = {
+  Editor: <IdeEditor/>,
+  Viewer: <IdeViewer/>,
+  Console: <IdeConsole/>,
 }
 
-export default IdeContainer
+const IdeContainer = () => {
+  const { state, dispatch } = useContext(IdeContext)
+
+  return (<div className='h-screen'>
+    <Mosaic
+      renderTile={ (id, path) => (
+        <MosaicWindow path={path} title={id}>
+          { ELEMENT_MAP[id] }
+        </MosaicWindow>
+      )}
+      value={state.layout}
+      onChange={newLayout => dispatch({ type: 'updateLayout', payload: { message: newLayout } })}
+    />
+  </div>)
+}
+
+export default IdeContainer

web/src/helpers/hooks/useIdeState.js

@@ -13,6 +13,16 @@ export const useIdeState = () => {
       type: 'stl',
       data: 'some binary',
     },
+    layout: {
+      direction: 'row',
+      first: 'Editor',
+      second: {
+        direction: 'column',
+        first: 'Viewer',
+        second: 'Console',
+        splitPercentage: 70,
+      },
+    }
   }
   const reducer = (state, { type, payload }) => {
     switch (type) {
@@ -41,6 +51,11 @@ export const useIdeState = () => {
           ...state,
           ideType: payload.message,
         }
+      case 'updateLayout':
+        return {
+          ...state,
+          layout: payload.message,
+        }
     }
   }