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

Threed app ts
marty-mcgee · Oct 3, 2024 · fd03eb2 · fd03eb2
2 parents f4fc284 + 600f466
commit fd03eb2
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 68 deletions.
diff --git a/src/app/participate/page.tsx b/src/app/participate/page.tsx
@@ -27,14 +27,20 @@ import {
 // import Typography from '@mui/material/Typography'
 // import CardContent from '@mui/material/CardContent'
 
-// ** THREED GARDEN Imports
-// import ThreeDGarden from '#/lib/threed/ThreeDGarden'
-const ThreeDGarden = dynamic(() => import('#/lib/threed/ThreeDGarden'), { ssr: false })
+// ** THREED Imports
+// import ThreeD from '~/src/lib/threed/threed'
+const ThreeD = dynamic(() => import('#/lib/threed/threed'), { ssr: false })
+// import ThreeDControls from '~/src/lib/threed/Controls'
+// const ThreeDControls = dynamic(() => import('#/lib/threed/Controls'), { ssr: false })
+// import ThreeDGarden from '~/src/lib/threed/ThreeDGarden'
+// const ThreeDGarden = dynamic(() => import('#/lib/threed/ThreeDGarden'), { ssr: false })
+// import ThreeDControls from '#/lib/threed/components/controls/Controls'
+// const ThreeDControls = dynamic(() => import('#/lib/threed/components/controls/Controls'), { ssr: false })
 
 // ** HELPER Imports
-// // import Spinner from '#/layout/ui/spinner'
+import Spinner from '#/layout/ui/spinner'
 // ** HELPFUL UTIL: COLORFUL CONSOLE MESSAGES (ccm)
-import ccm from '#/lib/utils/console-colors'
+// import ccm from '#/lib/utils/console-colors'
 
 const ParticipatePage: TNextPageWithProps = (): JSX.Element => {
 // const ParticipatePage: TNextPageWithProps = async () => {
@@ -67,19 +73,24 @@ const ParticipatePage: TNextPageWithProps = (): JSX.Element => {
 
   return (
     <>
-    {/* <Suspense fallback={<Spinner />}> */}
+    <Suspense fallback={<Spinner />}>
 
       <Grid
         // container
         // spacing={1}
       >
 
         {/* [MM] HEY HEY HEY -- ThreeDGarden Component */}
-        <ThreeDGarden />
+        <ThreeD />
+        {/* <ThreeDGarden /> */}
+        {/* <ThreeDControls /> */}
         {/* [MM] HEY HEY HEY -- End ThreeDGarden Component */}
 
-        {/* {ability?.can('read', 'analytics') && ( */}
-        {/* <Grid
+
+        {/* {ability?.can('read-write', 'analytics') && ( */}
+
+        {/* 
+        <Grid
           item
           md={6}
           xs={12}
@@ -105,6 +116,7 @@ const ParticipatePage: TNextPageWithProps = (): JSX.Element => {
             </CardContent>
           </Card>
         </Grid>
+
         <Grid
           item
           md={6}
@@ -129,11 +141,12 @@ const ParticipatePage: TNextPageWithProps = (): JSX.Element => {
               )}
             </CardContent>
           </Card>
-        </Grid> */}
+        </Grid> 
+        */}
 
 
       </Grid>
-    {/* </Suspense> */}
+    </Suspense>
     </>
   )
 }

diff --git a/src/lib/threed/ThreeDGarden.tsx b/src/lib/threed/ThreeDGarden.tsx
@@ -1,4 +1,4 @@
-// 'use client'
+'use client'
 // ^ needs the 'use client' pragma (inheriting from parent page)
 // ==============================================================
 // ** RESOURCES
@@ -91,7 +91,7 @@ import ThreeDCanvasViewer from '#/lib/threed/components/canvas/CanvasViewer'
 // import { ThreeDEnvironment } from '#/lib/threed/components/canvas/Canvas'
 
 // ** ThreeD Controls Imports
-import ThreeDControls from '#/lib/threed/components/controls/Controls'
+// import ThreeDControls from '~/src/lib/threed/Controls'
 
 // // ** ThreeD using Leva GUI
 // import { ThreeDLevaControls, ThreeDLevaComponent } from '#/lib/threed/components/controls/LevaControls'
@@ -455,7 +455,7 @@ const ThreeDGarden = (): React.ReactNode => {
             //   // borderTop: '1px solid darkgreen',
             // }}
           >
-            <ThreeDControls />
+            {/* <ThreeDControls /> */}
 
             {/* THREED CONTROLS: LEVA GUI + CUSTOMIZED */}
             {/* <Flex

diff --git a/src/lib/threed/components/controls/Controls.tsx b/src/lib/threed/components/controls/Controls.tsx
diff --git a/src/lib/threed/components/controls/LevaControls.tsx b/src/lib/threed/components/controls/LevaControls.tsx
@@ -404,7 +404,7 @@ export function ThreeDLevaControls() {
           // 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={true} // default = false. true makes the pane fill the parent dom node it's rendered in
+          fill={false} // 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
@@ -437,42 +437,54 @@ export function ThreeDLevaControls() {
   )
 }
 
-export const ThreeDLevaComponent = ({ projectName, setProjectName }) => {
+export const ThreeDLevaComponent = (
+  { 
+    projectName,
+    setProjectName,
+    projectNameFromLeva,
+    setProjectNameFromLeva,
+  }:
+  { 
+    projectName: string,
+    setProjectName: Function,
+    projectNameFromLeva: string,
+    setProjectNameFromLeva: Function,
+  }
+) => {
   // **
   const word = `[MM] ThreeDLevaComponent @ ${new Date().toISOString()}`
   // **
-  // var [{ projectNameFromLeva }, set] = useControls(
+  // const [{ projectNameFromLeva }, set] = useControls(
   //   () => (
   //     {
-  //       // projectNameFromLeva: projectName,
   //       projectName: projectName,
-  //       doAutoLoadData: doAutoLoadData,
-  //       doAutoRotate: doAutoRotate,
+  //       projectNameFromLeva: projectName,
   //       word: word,
   //     }
   //   )
   // )
 
-  // // ** onMount (on component loaded)
-  // useEffect(() => {
-  //   // leva set store (from react state)
-  //   set({ projectNameFromLeva: projectName })
-  //   // react set state
-  //   setProjectName(projectName)
-  //   // **
-  // }, [projectName, set])
-  // // }, [projectName])
-
-  // // console.debug('MyComponent')
-  // useEffect(() => {
-  //   setProjectName(projectName)
-  // //   console.debug('MyComponent onMount')
-  // //   return () => {
-  // //     console.debug('MyComponent onUnmount')
-  // //   }
-  // }, [projectName])
-
-  // return <div>{projectNameFromLeva}: {projectName}</div>
+  // ** onMount (on component loaded)
+  useEffect(() => {
+    // react set state
+    // setProjectName(projectName)
+    setProjectName(projectNameFromLeva)
+    // leva set store (from react state)
+    setProjectNameFromLeva(projectName)
+    // setProjectNameFromLeva(projectNameFromLeva)
+    // **
+  }, [projectName, projectNameFromLeva])
+
+  return (
+    <>
+      {/* <div>
+        {projectNameFromLeva}: {projectName}
+      </div>
+      <div>
+        {projectName}: {projectNameFromLeva}
+      </div> */}
+    </>
+  )
 }
 
 export default ThreeDLevaControls
diff --git a/src/lib/threed/components/controls/Toolbar.tsx b/src/lib/threed/components/controls/Toolbar.tsx
@@ -1102,7 +1102,10 @@ const ThreeDToolbar: FC = (): React.ReactNode => {
           </Box>
 
           <Box
-            sx={{ flexGrow: 0 }} // , display: { xs: 'none', md: 'flex' }
+            sx={{ 
+              display: 'none', // , display: { xs: 'none', md: 'flex' }
+              flexGrow: 0 
+            }}
           >
             <Tooltip title='Pointer Tool'>
               <IconButton

diff --git a/src/lib/threed/Demo-old.tsx → src/lib/threed/demos/Demo-old.tsx b/src/lib/threed/Demo-old.tsx → src/lib/threed/demos/Demo-old.tsx
diff --git a/src/lib/threed/Demo.tsx → src/lib/threed/demos/Demo.tsx b/src/lib/threed/Demo.tsx → src/lib/threed/demos/Demo.tsx
diff --git a/src/lib/threed/demo-b3.mm.js → src/lib/threed/demos/demo-b3.mm.js b/src/lib/threed/demo-b3.mm.js → src/lib/threed/demos/demo-b3.mm.js
diff --git a/src/lib/threed/threed.tsx b/src/lib/threed/threed.tsx
@@ -0,0 +1,45 @@
+// @ :) ts-no-check
+
+// THREED: this
+
+// THREED: COMPONENTS
+// ** ThreeD: Garden
+import ThreeDGarden from '~/src/lib/threed/ThreeDGarden'
+
+// ** ThreeD using Leva GUI
+import { 
+  ThreeDLevaControls, 
+  ThreeDLevaComponent,
+} from '#/lib/threed/components/controls/LevaControls'
+
+// ** 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'
+
+// ** ThreeD : JSX Export
+// export default
+const ThreeDControls = () => {
+
+  // ** THREED CONTROL(S)
+  // 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> */}
+    </>
+  )
+}
+
+export default ThreeDControls