structure relayout

app/modules/LowerPanel/LowerPanel.tsx

@@ -1,20 +1,20 @@
-import { useState } from 'react'
+import { useState } from "react";
 
-interface LowerPanelPropsI{
+interface LowerPanelPropsI {
   children: React.ReactNode;
 }
 
-export const LowerPanel =({
-  children,
-}:LowerPanelPropsI)=>{
-  const [open, setOpen] = useState(false)
-  const handleOpen = ()=>{
+export const LowerPanel = ({ children }: LowerPanelPropsI) => {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => {
     setOpen(true);
-  }
+  };
 
-  return (<>
-    <div className="fixed w-screen top-3/4 h-1/4 bg-ui-panel border-t border-ui-panel-border">
-      {children}
-    </div>
-  </>);
-}
+  return (
+    <>
+      <div className="absolute top-3/4 h-1/4 w-screen border-t border-ui-panel-border bg-ui-panel">
+        {children}
+      </div>
+    </>
+  );
+};

app/modules/SidePanel/SidePanel.tsx

@@ -38,7 +38,7 @@ export const SidePanel = ({ title, children }: SidePanelPropsI) => {
                   leaveFrom="translate-x-0"
                   leaveTo="translate-x-full"
                 >
-                  <Dialog.Panel className="pointer-events-auto lg:max-w-full">
+                  <Dialog.Panel className="pointer-events-auto w-screen lg:max-w-md">
                     <SidePanelInner title={title} closeCallback={handleClose}>
                       {children}
                     </SidePanelInner>

app/pages/PageEnigma/PageEnigma.tsx

@@ -1,118 +1,166 @@
-import {
-  useCallback,
-  useEffect,
-  useRef,
-} from 'react';
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import {
   faChevronLeft,
   faWandSparkles,
 } from "@fortawesome/pro-solid-svg-icons";
 
+import { Button, ButtonLink } from "~/components";
+import { ButtonDialogue } from "~/modules/ButtonDialogue";
+import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet";
+// import { SidePanel } from "~/modules/SidePanel";
+import { Tabs } from "~/modules/Tabs";
+import { Controls3D } from "./comps/Controls3D";
+import { ControlsVideo } from "./comps/ControlsVideo";
+import { Timeline } from "./comps/Timeline";
 
-import {
-  Button,
-  ButtonLink,
-} from '~/components';
-import { ButtonDialogue } from '~/modules/ButtonDialogue';
-import { TopBarHelmet } from '~/modules/TopBarHelmet/TopBarHelmet';
-import { SidePanel } from '~/modules/SidePanel';
-import { Tabs } from '~/modules/Tabs';
-import { Controls3D } from './comps/Controls3D';
-import { ControlsVideo } from './comps/ControlsVideo';
-import { Timeline } from './comps/Timeline';
-
-import Editor from './js/editor';
+import Editor from "./js/editor";
 
 export const PageEnigma = () => {
   // const { setTopBarInner } = useContext(TopBarInnerContext) || {};
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const editorRef = useRef<Editor | null>(null);
+  const [timelineHeight, setTimelineHeight] = useState(0);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const timelineRef = useRef<HTMLDivElement | null>(null);
 
   const editorCallback = useCallback(() => {
     // handle editorCallback here
-  },[]);
+  }, []);
+
+  useEffect(() => {
+    //componentDidMount
 
-  useEffect(() => { //componentDidMount
-    
     if (editorRef.current == null) {
       editorRef.current = new Editor();
       editorRef.current.initialize();
     }
-
   }, []);
 
-  const handleButtonSave = ()=>{
+  const handleButtonSave = () => {
     editorRef.current?.save();
-  }
+  };
 
-  const handleButtonCameraView = ()=> {
+  const handleButtonCameraView = () => {
     editorRef.current?.change_camera_view();
-  }
+  };
 
-  const handleButtonPlayBack = ()=> {
+  const handleButtonPlayBack = () => {
     editorRef.current?.start_playback();
-  }
+  };
 
-  return(
+  const updateTimelineHeight = useCallback(() => {
+    if (timelineRef.current) {
+      setTimelineHeight(timelineRef.current.offsetHeight);
+    }
+  }, []);
+
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        updateTimelineHeight();
+      }
+    });
+
+    if (timelineRef.current) {
+      observer.observe(timelineRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [updateTimelineHeight]);
+
+  return (
     <div>
       <TopBarHelmet>
         <div className="flex grow justify-between">
-            <ButtonLink
-              to={"/"}
-              variant='secondary'
-              icon={faChevronLeft}
-            >
-              Back to Dashboard
-            </ButtonLink>
-            <Button
-              icon={faWandSparkles}
-            >
-                Generate Movie
-            </Button>
-            <span className="w-8"/>
-          </div>
+          <ButtonLink to={"/"} variant="secondary" icon={faChevronLeft}>
+            Back to Dashboard
+          </ButtonLink>
+          <Button icon={faWandSparkles}>Generate Movie</Button>
+          <span className="w-8" />
+        </div>
       </TopBarHelmet>
-      <canvas ref={canvasRef} id="video-scene" width="1280px" height="720px" />
-      <div className='fixed top-20 left-4'>
-        <div className="flex mt-2 gap-2">
-          <Button variant="secondary" onClick={handleButtonPlayBack}>Toggle Camera View</Button>
-          <Button variant="secondary" onClick={handleButtonSave}>Save Scene</Button>
-          <ButtonDialogue
-            buttonProps={{
-              variant: 'secondary',
-              label: 'Help'
-            }}
-            title="Help"
-          >
-            <p>Do you need help?</p>
-            <p>Ask Michael about this project</p>
-            <p>Ask Miles about ThreeJS</p>
-            <p>Ask Wil about React</p>
-          </ButtonDialogue>
-          <Controls3D/>
-          <ControlsVideo/>
+
+      <div style={{ height: "calc(100vh - 73px)" }}>
+        {/* Engine section/side panel */}
+        <div
+          className="flex"
+          style={{ height: `calc(100% - ${timelineHeight}px)` }}
+        >
+          <div className="relative w-full overflow-hidden bg-gray-400">
+            <canvas
+              ref={canvasRef}
+              id="video-scene"
+              width="1280px"
+              height="720px"
+              className="hidden"
+            />
+
+            {/* Top controls */}
+            <div className="absolute left-0 top-0 w-full">
+              <div className="grid grid-cols-3 gap-4">
+                <div className="flex gap-2 pl-3 pt-3">
+                  <Button variant="secondary" onClick={handleButtonPlayBack}>
+                    Toggle Camera View
+                  </Button>
+                  <Button variant="secondary" onClick={handleButtonSave}>
+                    Save Scene
+                  </Button>
+                  <ButtonDialogue
+                    buttonProps={{
+                      variant: "secondary",
+                      label: "Help",
+                    }}
+                    title="Help"
+                  >
+                    <p>Do you need help?</p>
+                    <p>Ask Michael about this project</p>
+                    <p>Ask Miles about ThreeJS</p>
+                    <p>Ask Wil about React</p>
+                  </ButtonDialogue>
+                </div>
+
+                <Controls3D />
+              </div>
+            </div>
+
+            {/* Bottom controls */}
+            <div className="absolute bottom-0 left-0 w-full">
+              <ControlsVideo />
+            </div>
+          </div>
+
+          {/* Side panel */}
+          <div>
+            <Tabs
+              tabs={[
+                {
+                  header: "Animation",
+                  children: <p>Animation Tab</p>,
+                },
+                {
+                  header: "Camera",
+                  children: <p>Camera Tab</p>,
+                },
+                {
+                  header: "Audio",
+                  children: <p>Audio Tab</p>,
+                },
+                {
+                  header: "Styling",
+                  children: <p>Styling Tab</p>,
+                },
+              ]}
+            />
+          </div>
+        </div>
+
+        {/* Timeline */}
+        <div ref={timelineRef}>
+          <Timeline editorCurrent={editorRef.current} />
         </div>
       </div>
-      <SidePanel>
-        <Tabs tabs={[
-          {
-            header: 'Animation',
-            children: <p>Animation Tab</p>
-          },{
-            header: 'Camera',
-            children: <p>Camera Tab</p>
-          },{
-            header: 'Audio',
-            children: <p>Audio Tab</p>
-          },{
-            header: 'Styling',
-            children: <p>Styling Tab</p>
-          }
-        ]}/>
-      </SidePanel>
-      <Timeline editorCurrent={editorRef.current}/>
     </div>
   );
-}
+};

app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx

@@ -1,76 +1,61 @@
-
 import {
   faArrowsRotate,
   faArrowsUpDownLeftRight,
   faPlus,
   faUpRightAndDownLeftFromCenter,
-} from '@fortawesome/pro-solid-svg-icons';
+} from "@fortawesome/pro-solid-svg-icons";
 import {
   fa3dCylinder,
   fa3dTorus,
   fa3dSphere,
-} from '@awesome.me/kit-fde2be5eb0/icons/kit/custom';
+} from "@awesome.me/kit-fde2be5eb0/icons/kit/custom";
 
-import { ButtonIcon } from '~/components';
+import { ButtonIcon } from "~/components";
 
-export const Controls3D = ()=>{
+export const Controls3D = () => {
   const handlePlus = () => {
-    console.log('Controls 3D: Plus button clicked');
+    console.log("Controls 3D: Plus button clicked");
   };
   const handleCylinder = () => {
-    console.log('Controls 3D: Cylinder button clicked');
+    console.log("Controls 3D: Cylinder button clicked");
   };
-  const handleTorus= () => {
-    console.log('Controls 3D: Torus Button clicked');
+  const handleTorus = () => {
+    console.log("Controls 3D: Torus Button clicked");
   };
-  const handleSphere= () => {
-    console.log('Controls 3D: Sphere Button clicked');
+  const handleSphere = () => {
+    console.log("Controls 3D: Sphere Button clicked");
   };
   const handleMoveArrows = () => {
-    console.log('Controls 3D: Move Arrows clicked');
+    console.log("Controls 3D: Move Arrows clicked");
   };
   const handleRotateArrows = () => {
-    console.log('Controls 3D: Rotate Arrows clicked');
+    console.log("Controls 3D: Rotate Arrows clicked");
   };
   const handleZoomArrows = () => {
-    console.log('Controls 3D: Zoom Arrows clicked');
+    console.log("Controls 3D: Zoom Arrows clicked");
   };
-  return(
-    <div 
-      className="fixed left-1/2 -translate-x-1/2 bg-ui-panel border-b border-x border-ui-panel-border rounded-b-md px-4 py-2 text-white"
-      style={{top: "72px"}}
-    >
-      <div className='flex gap-4'>
-        <ButtonIcon
-          icon={faPlus}
-          onClick={handlePlus}
-        />
-        <span className="w-0 h-5 border-l border-ui-panel-border" />
-        <ButtonIcon
-          icon={fa3dCylinder}
-          onClick={handleCylinder}
-        />
-        <ButtonIcon
-          icon={fa3dTorus}
-          onClick={handleTorus}
-        />
-        <ButtonIcon
-          icon={fa3dSphere}
-          onClick={handleSphere}
-        />
-        <ButtonIcon
-          icon={faArrowsUpDownLeftRight}
-          onClick={handleMoveArrows}
-        />
-        <ButtonIcon
-          icon={faArrowsRotate}
-          onClick={handleRotateArrows}
-        />
-        <ButtonIcon
-          icon={faUpRightAndDownLeftFromCenter}
-          onClick={handleZoomArrows}
-        />
+  return (
+    <div>
+      <div className="flex justify-center">
+        <div className="rounded-b-md border-x border-b border-ui-panel-border bg-ui-panel px-4 py-2 text-white">
+          <div className="flex gap-4">
+            <ButtonIcon icon={faPlus} onClick={handlePlus} />
+            <span className="h-5 w-0 border-l border-ui-panel-border" />
+            <ButtonIcon icon={fa3dCylinder} onClick={handleCylinder} />
+            <ButtonIcon icon={fa3dTorus} onClick={handleTorus} />
+            <ButtonIcon icon={fa3dSphere} onClick={handleSphere} />
+            <ButtonIcon
+              icon={faArrowsUpDownLeftRight}
+              onClick={handleMoveArrows}
+            />
+            <ButtonIcon icon={faArrowsRotate} onClick={handleRotateArrows} />
+            <ButtonIcon
+              icon={faUpRightAndDownLeftFromCenter}
+              onClick={handleZoomArrows}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );
-}
+};

app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx

@@ -4,54 +4,54 @@ import {
   faForwardFast,
   faForwardStep,
   faPlay,
-} from '@fortawesome/pro-solid-svg-icons';
-import { ButtonIcon } from '~/components';
+} from "@fortawesome/pro-solid-svg-icons";
+import { ButtonIcon } from "~/components";
 
-export const ControlsVideo = ()=>{
+export const ControlsVideo = () => {
   const handleBackwardFast = () => {
-    console.log('Controls Video: Backward-Fast clicked');
+    console.log("Controls Video: Backward-Fast clicked");
   };
   const handleBackwardStep = () => {
-    console.log('Controls Video: Backward-Step clicked');
+    console.log("Controls Video: Backward-Step clicked");
   };
-  const handlePlay= () => {
-    console.log('Controls Video: Play clicked');
+  const handlePlay = () => {
+    console.log("Controls Video: Play clicked");
   };
   const handleForwardStep = () => {
-    console.log('Controls Video: Forward-Step clicked');
+    console.log("Controls Video: Forward-Step clicked");
   };
   const handleForwardFast = () => {
-    console.log('Controls Video: Forward-Fast clicked');
+    console.log("Controls Video: Forward-Fast clicked");
   };
-  return(
-    <div className="fixed top-3/4 left-1/2 -translate-x-1/2 -mt-10 bg-ui-panel border-t border-x border-ui-panel-border rounded-t-md px-6 py-2 text-white">
-      <div className='flex gap-6 content-center	'>
-        <ButtonIcon
-          className="h-6"
-          icon={faBackwardFast}
-          onClick={handleBackwardFast}
-        />
-        <ButtonIcon
-          className="h-6"
-          icon={faBackwardStep}
-          onClick={handleBackwardStep}
-        />
-        <ButtonIcon
-          className="h-6"
-          icon={faPlay}
-          onClick={handlePlay}
-        />
-        <ButtonIcon
-          className="h-6"
-          icon={faForwardStep}
-          onClick={handleForwardStep}
-        />
-        <ButtonIcon
-          className="h-6"
-          icon={faForwardFast}
-          onClick={handleForwardFast}
-        />
+  return (
+    <div>
+      <div className="flex justify-center">
+        <div className="-mt-10 rounded-t-md border-x border-t border-ui-panel-border bg-ui-panel px-6 py-2 text-white">
+          <div className="flex content-center gap-6	">
+            <ButtonIcon
+              className="h-6"
+              icon={faBackwardFast}
+              onClick={handleBackwardFast}
+            />
+            <ButtonIcon
+              className="h-6"
+              icon={faBackwardStep}
+              onClick={handleBackwardStep}
+            />
+            <ButtonIcon className="h-6" icon={faPlay} onClick={handlePlay} />
+            <ButtonIcon
+              className="h-6"
+              icon={faForwardStep}
+              onClick={handleForwardStep}
+            />
+            <ButtonIcon
+              className="h-6"
+              icon={faForwardFast}
+              onClick={handleForwardFast}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );
-};
+};