add customizerParams to state

app/web/src/components/Customizer/Customizer.tsx

@@ -1,24 +1,41 @@
 import { useRender } from 'src/components/IdeWrapper/useRender'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 
 const Customizer = () => {
   const [open, setOpen] = React.useState(true)
   const ref = React.useRef()
   const jsCadCustomizerElement = ref.current
+  const { state } = useIdeContext()
+  const customizerParams = state?.objectData?.customizerParams
+  console.log(state)
   React.useEffect(() => {
-    console.log(jsCadCustomizerElement)
+    console.log({ jsCadCustomizerElement, customizerParams })
-    if (jsCadCustomizerElement) {
+    if (jsCadCustomizerElement && customizerParams) {
-      jsCadCustomizerElement.innerHTML = `<div>hi there</div>`
+      jsCadCustomizerElement.innerHTML = `<div>${JSON.stringify(
+        customizerParams
+      )}</div>`
     }
-  }, [jsCadCustomizerElement])
+  }, [jsCadCustomizerElement, customizerParams])
   const handleRender = useRender()
   return (
-    <div className={`absolute inset-x-0 bottom-0 bg-ch-gray-600 bg-opacity-60 text-ch-gray-300 text-lg font-fira-sans ${open ? 'h-2/3' : ''}`}>
+    <div
+      className={`absolute inset-x-0 bottom-0 bg-ch-gray-600 bg-opacity-60 text-ch-gray-300 text-lg font-fira-sans ${
+        open ? 'h-2/3' : ''
+      }`}
+    >
       <div className="flex justify-between px-6 py-2 items-center">
         <div className="flex gap-6 items-center">
-          <button className="px-2" onClick={() => setOpen(!open)}>{open ? '⬇' : '⬆'}</button>
+          <button className="px-2" onClick={() => setOpen(!open)}>
+            {open ? '⬇' : '⬆'}
+          </button>
           <div>Parameters</div>
         </div>
-        <button className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800" onClick={handleRender}>Update</button>
+        <button
+          className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800"
+          onClick={handleRender}
+        >
+          Update
+        </button>
       </div>
       <div className={`${open ? 'h-full' : 'h-0'} overflow-y-auto py-3 px-12`}>
         <div id="jscad-customizer-block" ref={ref}>

app/web/src/helpers/cadPackages/common.ts

@@ -30,6 +30,7 @@ export interface HealthyResponse {
     data: any
     type: 'stl' | 'png' | 'geometry'
   }
+  customizerParams?: any
 }
 
 export function createHealthyResponse({
@@ -37,11 +38,13 @@ export function createHealthyResponse({
   data,
   consoleMessage,
   type,
+  customizerParams,
 }: {
   date: Date
   data: any
   consoleMessage: string
   type: HealthyResponse['objectData']['type']
+  customizerParams?: any
 }): HealthyResponse {
   return {
     status: 'healthy',
@@ -54,6 +57,7 @@ export function createHealthyResponse({
       message: consoleMessage,
       time: date,
     },
+    customizerParams,
   }
 }
 

app/web/src/helpers/cadPackages/jsCadController.ts

@@ -108,6 +108,7 @@ self.addEventListener('message', (e)=>worker.postMessage(e.data))
             data: [...data.entities.map(CSG2Object3D).filter((o) => o)],
             consoleMessage: data.scriptStats,
             date: new Date(),
+            customizerParams: ['param1', 'abc'],
           })
         }
         callResolve()

app/web/src/helpers/hooks/useIdeState.ts

@@ -89,6 +89,7 @@ export interface State {
     type: 'INIT' | 'stl' | 'png' | 'geometry'
     data: any
     quality: 'low' | 'high'
+    customizerParams?: any
   }
   layout: any
   camera: {
@@ -153,6 +154,7 @@ export const useIdeState = (): [State, (actionOrThunk: any) => any] => {
             ...state.objectData,
             type: payload.objectData?.type,
             data: payload.objectData?.data,
+            customizerParams: payload.customizerParams,
           },
           consoleMessages: payload.message
             ? [...state.consoleMessages, payload.message]
@@ -248,7 +250,7 @@ export const requestRender = ({
         quality,
       },
     })
-      .then(({ objectData, message, status }) => {
+      .then(({ objectData, message, status, customizerParams }) => {
         if (status === 'error') {
           dispatch({
             type: 'errorRender',
@@ -257,7 +259,12 @@ export const requestRender = ({
         } else {
           dispatch({
             type: 'healthyRender',
-            payload: { objectData, message, lastRunCode: code },
+            payload: {
+              objectData,
+              message,
+              lastRunCode: code,
+              customizerParams,
+            },
           })
           return objectData
         }