Merge pull request #35 from marty-mcgee/threed-app-ts

Threed app ts
marty-mcgee · Oct 3, 2024 · 8306221 · 8306221
2 parents fd03eb2 + ec9f402
commit 8306221
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 40 deletions.
diff --git a/src/layout/header.tsx b/src/layout/header.tsx
@@ -19,30 +19,25 @@ export default async function Header() {
     <>
       <Grid
         id='ThreeDAppHeader'
-        columns='2' 
-        // gap='3'
-        // justify='end'
-        // align='center'
+        columns='2'
       >
         <Flex
-          // columns='1'
           justify='start'
           align='center'
         >
+
           {/* <Logo /> */}
           <MainNav />
+
         </Flex>
-        <Grid
-          columns='1'
-          // justify='end'
+        <Flex
+          justify='end'
           align='center'
         >
-          <Flex
-            justify='end'
-          >
-            <UserButton />
-          </Flex>
-        </Grid>
+
+          <UserButton />
+
+        </Flex>
       </Grid>
     </>
   )

diff --git a/src/lib/threed/components/controls/LevaControls.tsx b/src/lib/threed/components/controls/LevaControls.tsx
@@ -394,17 +394,17 @@ export function ThreeDLevaControls() {
           // background: '#181C20',
           position: 'absolute',
           // // zIndex: 9600,
-          top: 4,
-          left: 140,
+          top: -46,
+          left: 460,
         }}
       >
         <Leva
           isRoot={true}
           titleBar={showTitleBar && { drag, title, filter, position }} // TITLE | PROJECT_NAME
           // hideTitleBar={true} // default = false. true hides the GUI header
           theme={theme} // you can pass a custom theme (see the styling section)
-          collapsed={false} // default = false. true makes the GUI collapsed to start
-          fill={false} // default = false. true makes the pane fill the parent dom node it's rendered in
+          collapsed={true} // default = false. true makes the GUI collapsed to start
+          fill={true} // default = false. true makes the pane fill the parent dom node it's rendered in
           flat={true} // default = false. true removes border radius and shadow
           hidden={false} // default = false. true hides the GUI
           neverHide={true} // default = true. false allows hiding of the GUI

diff --git a/src/lib/threed/components/controls/Toolbar.tsx b/src/lib/threed/components/controls/Toolbar.tsx
@@ -19,6 +19,11 @@ import {
 // ** NEXT Imports
 import Image from 'next/image'
 
+// ** RADIX-UI Imports
+import {
+  Flex
+} from '@radix-ui/themes'
+
 // ** MUI Imports
 import { styled } from '@mui/material/styles'
 // mui: ui
@@ -56,7 +61,6 @@ import ccm from '#/lib/utils/console-colors'
 // DEBUG PREFERENCES FOR THIS MODULE
 const debug: boolean = true
 const DEBUG: boolean = true
-const debug_deep: boolean = false
 
 // ==========================================================
 
@@ -724,8 +728,10 @@ const ThreeDToolbar: FC = (): React.ReactNode => {
         <Toolbar
           disableGutters
         >
-          <Box
-            sx={{ flexGrow: 1 }} // , display: { xs: 'none', md: 'flex' }
+          <Flex
+            // display='none' // , display: { xs: 'none', md: 'flex' }
+            flexGrow='1'
+            justify='start'
           >
             <Button
               key='Actions'
@@ -1099,13 +1105,11 @@ const ThreeDToolbar: FC = (): React.ReactNode => {
                 <Typography onClick={() => showAbout}>Show About</Typography>
               </MenuItem>
             </Menu>
-          </Box>
+          </Flex>
 
-          <Box
-            sx={{ 
-              display: 'none', // , display: { xs: 'none', md: 'flex' }
-              flexGrow: 0 
-            }}
+          <Flex
+            display='none' // , display: { xs: 'none', md: 'flex' }
+            flexGrow='0'
           >
             <Tooltip title='Pointer Tool'>
               <IconButton
@@ -1205,7 +1209,7 @@ const ThreeDToolbar: FC = (): React.ReactNode => {
                 <ToolIconAddText />
               </IconButton>
             </Tooltip>
-          </Box>
+          </Flex>
 
         </Toolbar>
       {/* </Box> */}

diff --git a/src/lib/threed/threed.tsx b/src/lib/threed/threed.tsx
@@ -1,5 +1,9 @@
 // @ :) ts-no-check
 
+// ** REACT Imports
+import { Suspense } from 'react'
+
+// **
 // THREED: this
 
 // THREED: COMPONENTS
@@ -14,7 +18,6 @@ import {
 
 // ** ThreeD using Apollo + React to View Control + Info Panels (Apollo Store/ReactiveVar/State Access)
 import ThreeDControlPanels from '#/lib/threed/components/controls/ControlPanels'
-// const ThreeDControlPanels = dynamic(() => import('#/lib/threed/components/controls/ControlPanels'), { ssr: false })
 
 // ** ThreeD Toolbar
 import ThreeDToolbar from '#/lib/threed/components/controls/Toolbar'
@@ -27,17 +30,19 @@ const ThreeDControls = () => {
   // console.debug('THREED CONTROL[S]: ALL')
   return (
     <>
-      <ThreeDLevaControls />
-      <ThreeDControlPanels />
-      <ThreeDToolbar />
-      <ThreeDGarden />
-      <ThreeDLevaComponent 
-        projectName={'ThreeD: MM projectName'}
-        setProjectName={() => (<></>)}
-        projectNameFromLeva={'ThreeD: MM projectName'}
-        setProjectNameFromLeva={() => (<></>)}
-      />
-      {/* <h1>ThreeD Control[s]: All</h1> */}
+      {/* <ThreeDToolbar /> */}
+      <Suspense fallback={null}>
+        <ThreeDGarden />
+        <ThreeDLevaControls />
+        <ThreeDLevaComponent 
+          projectName={'ThreeD: MM projectName'}
+          setProjectName={() => (<></>)}
+          projectNameFromLeva={'ThreeD: MM projectName'}
+          setProjectNameFromLeva={() => (<></>)}
+        />
+        <ThreeDControlPanels />
+        {/* <h1>ThreeD Control[s]: All</h1> */}
+      </Suspense>
     </>
   )
 }