diff --git a/app/modules/LowerPanel/LowerPanel.tsx b/app/modules/LowerPanel/LowerPanel.tsx index dd04237b5e..3fee99c41a 100644 --- a/app/modules/LowerPanel/LowerPanel.tsx +++ b/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 (<> -
- {children} -
- ); -} \ No newline at end of file + return ( + <> +
+ {children} +
+ + ); +}; diff --git a/app/modules/SidePanel/SidePanel.tsx b/app/modules/SidePanel/SidePanel.tsx index 1bf4a0cfdf..3313b0327e 100644 --- a/app/modules/SidePanel/SidePanel.tsx +++ b/app/modules/SidePanel/SidePanel.tsx @@ -38,7 +38,7 @@ export const SidePanel = ({ title, children }: SidePanelPropsI) => { leaveFrom="translate-x-0" leaveTo="translate-x-full" > - + {children} diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 53ac6bde4c..9c29022965 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/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(null); const editorRef = useRef(null); + const [timelineHeight, setTimelineHeight] = useState(0); + const containerRef = useRef(null); + const timelineRef = useRef(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 (
- - Back to Dashboard - - - -
+ + Back to Dashboard + + + +
- -
-
- - - -

Do you need help?

-

Ask Michael about this project

-

Ask Miles about ThreeJS

-

Ask Wil about React

- - - + +
+ {/* Engine section/side panel */} +
+
+ + + {/* Top controls */} +
+
+
+ + + +

Do you need help?

+

Ask Michael about this project

+

Ask Miles about ThreeJS

+

Ask Wil about React

+ +
+ + +
+
+ + {/* Bottom controls */} +
+ +
+
+ + {/* Side panel */} +
+ Animation Tab

, + }, + { + header: "Camera", + children:

Camera Tab

, + }, + { + header: "Audio", + children:

Audio Tab

, + }, + { + header: "Styling", + children:

Styling Tab

, + }, + ]} + /> +
+
+ + {/* Timeline */} +
+
- - Animation Tab

- },{ - header: 'Camera', - children:

Camera Tab

- },{ - header: 'Audio', - children:

Audio Tab

- },{ - header: 'Styling', - children:

Styling Tab

- } - ]}/> - -
); -} \ No newline at end of file +}; diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx index ef99e19b2c..15d0865a06 100644 --- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx +++ b/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( -
-
- - - - - - - - + return ( +
+
+
+
+ + + + + + + + +
+
); -} \ No newline at end of file +}; diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx index e9f5b8befd..d447e772a9 100644 --- a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx +++ b/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( -
-
- - - - - + return ( +
+
+
+
+ + + + + +
+
); -}; \ No newline at end of file +};