Add live update checkbox to customizer

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

@@ -4,6 +4,7 @@ import { genParams, getParams  } from 'src/helpers/cadPackages/jscadParams'
 
 const Customizer = () => {
   const [open, setOpen] = React.useState(true)
+  const [checked, setChecked] = React.useState(false)
   const ref = React.useRef()
   const jsCadCustomizerElement = ref.current
   const { state } = useIdeContext()
@@ -13,13 +14,12 @@ const Customizer = () => {
   const handleRender2 = ()=>handleRender(getParams(ref.current))
 
   React.useEffect(() => {
-    console.log({ jsCadCustomizerElement, customizerParams, lastParameters })
-    if (jsCadCustomizerElement && customizerParams) {
-      genParams(customizerParams, jsCadCustomizerElement, lastParameters || {}, (values)=>{
-        handleRender(values)
-      },[])
+    if ((jsCadCustomizerElement && customizerParams)) {
+      genParams(customizerParams, jsCadCustomizerElement, lastParameters || {}, checked ? (values)=>{
+        handleRender(values)}: () => {}
+      ,[])
     }
-  }, [jsCadCustomizerElement, customizerParams, lastParameters])
+  }, [jsCadCustomizerElement, customizerParams, lastParameters, checked])
   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 ${
@@ -33,12 +33,19 @@ const Customizer = () => {
           </button>
           <div>Parameters</div>
         </div>
-        <button
-          className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800"
-          onClick={handleRender2}
-        >
-          Update
-        </button>
+        <div className='flex items-center'>
+          <input className='mr-6' type='checkbox' checked={checked} onChange={({target}) => {
+            const newValue = !checked
+            if (newValue) handleRender2()
+            setChecked(newValue)}}/>
+          <button
+            className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800"
+            onClick={handleRender2}
+          >
+            Update
+          </button>
+        </div>
+
       </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/jsCadController.ts

@@ -103,8 +103,7 @@ export const render: DefaultKernelExport['render'] = async ({
     let parameterDefinitions = []
     scriptWorker.addEventListener('message', (e) => {
       const data = e.data
-      if (data.action == 'parameterDefinitions') {        
-        console.log('message',data)
+      if (data.action == 'parameterDefinitions') {
         parameterDefinitions = data.data
       } else if (data.action == 'entities') {
         if (data.error) {
@@ -123,7 +122,7 @@ export const render: DefaultKernelExport['render'] = async ({
         callResolve()
       }
     })
-    
+
     callResolve()
     response = null
     scriptWorker.postMessage({ action: 'init', baseURI, alias: [] })

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

@@ -180,7 +180,7 @@ export const useIdeState = (): [State, (actionOrThunk: any) => any] => {
             ...state.objectData,
             type: payload.objectData?.type,
             data: payload.objectData?.data,
-            customizerParams: payload.customizerParams,
+            customizerParams: payload.customizerParams || state.objectData.customizerParams,
             lastParameters: payload.lastParameters,
           },
           consoleMessages: payload.message