store latest params in the store

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

@@ -1,35 +1,33 @@
 import { useRender } from 'src/components/IdeWrapper/useRender'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
-import { genParams, getParams } from 'src/helpers/cadPackages/jsCad/jscadParams'
+import { genParams } from 'src/helpers/cadPackages/jsCad/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()
-  const customizerParams = state?.objectData?.customizerParams
-  const lastParameters = state?.objectData?.lastParameters
+  const { state, thunkDispatch } = useIdeContext()
+  const customizerParams = state?.customizerParams
+  const currentParameters = state?.currentParameters
   const handleRender = useRender()
-  const handleRender2 = () => handleRender(getParams(ref.current))
 
   React.useEffect(() => {
     if (jsCadCustomizerElement && customizerParams) {
       genParams(
         customizerParams,
         jsCadCustomizerElement,
-        lastParameters || {},
+        currentParameters || {},
         (values, source) => {
-          if (source === 'group' || !checked) {
-            // save to local storage but do not render
-            return
+          thunkDispatch({ type: 'setCurrentCustomizerParams', payload: values })
+          if (checked) {
+            handleRender()
           }
-          handleRender(values)
         },
         []
       )
     }
-  }, [jsCadCustomizerElement, customizerParams, lastParameters, checked])
+  }, [jsCadCustomizerElement, customizerParams, currentParameters, 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 ${
@@ -48,15 +46,15 @@ const Customizer = () => {
             className="mr-6"
             type="checkbox"
             checked={checked}
-            onChange={({ target }) => {
+            onChange={() => {
               const newValue = !checked
-              if (newValue) handleRender2()
+              if (newValue) handleRender()
               setChecked(newValue)
             }}
           />
           <button
             className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800"
-            onClick={handleRender2}
+            onClick={handleRender}
           >
             Update
           </button>

app/web/src/components/IdeWrapper/useRender.ts

@@ -1,10 +1,9 @@
 import { makeCodeStoreKey, requestRender } from 'src/helpers/hooks/useIdeState'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
-import type { RawCustomizerParams } from 'src/helpers/cadPackages/common'
 
 export const useRender = () => {
   const { state, thunkDispatch } = useIdeContext()
-  return (parameters?: RawCustomizerParams) => {
+  return () => {
     thunkDispatch((dispatch, getState) => {
       const state = getState()
       dispatch({ type: 'setLoading' })
@@ -14,7 +13,7 @@ export const useRender = () => {
         code: state.code,
         viewerSize: state.viewerSize,
         camera: state.camera,
-        parameters,
+        parameters: state.currentParameters,
       })
     })
     localStorage.setItem(makeCodeStoreKey(state.ideType), state.code)

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

@@ -31,8 +31,8 @@ export interface HealthyResponse {
     data: any
     type: 'stl' | 'png' | 'geometry'
   }
-  customizerParams?: any
-  lastParameters?: any
+  customizerParams?: any[]
+  currentParameters?: RawCustomizerParams
 }
 
 export interface RawCustomizerParams {
@@ -45,14 +45,14 @@ export function createHealthyResponse({
   consoleMessage,
   type,
   customizerParams,
-  lastParameters,
+  currentParameters,
 }: {
   date: Date
   data: any
   consoleMessage: string
   type: HealthyResponse['objectData']['type']
   customizerParams?: any
-  lastParameters?: any
+  currentParameters?: any
 }): HealthyResponse {
   return {
     status: 'healthy',
@@ -66,7 +66,7 @@ export function createHealthyResponse({
       time: date,
     },
     customizerParams,
-    lastParameters,
+    currentParameters,
   }
 }
 

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

@@ -70,7 +70,7 @@ function CSG2Object3D(obj) {
 }
 
 let scriptWorker
-let lastParameters = {}
+let currentParameters = {}
 const scriptUrl = '/demo-worker.js'
 let resolveReference = null
 let response = null
@@ -117,7 +117,7 @@ export const render: DefaultKernelExport['render'] = async ({
             consoleMessage: data.scriptStats,
             date: new Date(),
             customizerParams: parameterDefinitions,
-            lastParameters,
+            currentParameters,
           })
         }
         callResolve()
@@ -148,7 +148,7 @@ export const render: DefaultKernelExport['render'] = async ({
   // we need this to keep the form filled with same data when new parameter definitions arrive
   // each render of the script could provide new paramaters. In case some of them are still rpesent
   // it is expected for them to stay the same and not just reset
-  lastParameters = parameters || {}
+  currentParameters = parameters || {}
 
   const waitResult = new Promise((resolve) => {
     resolveReference = resolve

app/web/src/helpers/cadPackages/jsCad/jscadParams.ts

@@ -28,7 +28,7 @@ export function genParams(
   defs,
   target,
   storedParams = {},
-  callback = undefined,
+  callback: (values: RawCustomizerParams, source: any) => void = undefined,
   buttons = ['reset', 'save', 'load', 'edit', 'link']
 ) {
   const funcs = {
@@ -140,7 +140,7 @@ export function genParams(
   if (missingKeys.length) console.log('missing param impl', missingKeys)
 
   function _callback(source = 'change') {
-    if (callback) callback(getParams(target), source)
+    if (callback && source !== 'group') callback(getParams(target), source)
   }
 
   html += '<div class="jscad-param-buttons"><div>'
@@ -179,7 +179,7 @@ export function genParams(
   })
 }
 
-export function getParams(target: HTMLElement): RawCustomizerParams {
+function getParams(target: HTMLElement): RawCustomizerParams {
   const params = {}
   if (!target) return params
 

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

@@ -1,6 +1,7 @@
 import { useReducer } from 'react'
 import { cadPackages } from 'src/helpers/cadPackages'
 import type { RootState } from '@react-three/fiber'
+import type { RawCustomizerParams } from 'src/helpers/cadPackages/common'
 
 function withThunk(dispatch, getState) {
   return (actionOrThunk) =>
@@ -114,9 +115,9 @@ export interface State {
     type: 'INIT' | 'stl' | 'png' | 'geometry'
     data: any
     quality: 'low' | 'high'
-    customizerParams?: any
-    lastParameters?: any
   }
+  customizerParams?: any[]
+  currentParameters?: RawCustomizerParams
   layout: any
   camera: {
     dist?: number
@@ -180,10 +181,9 @@ export const useIdeState = (): [State, (actionOrThunk: any) => any] => {
             ...state.objectData,
             type: payload.objectData?.type,
             data: payload.objectData?.data,
-            customizerParams:
-              payload.customizerParams || state.objectData.customizerParams,
-            lastParameters: payload.lastParameters,
           },
+          customizerParams: payload.customizerParams || state.customizerParams,
+          currentParameters: payload.currentParameters,
           consoleMessages: payload.message
             ? [...state.consoleMessages, payload.message]
             : payload.message,
@@ -197,6 +197,11 @@ export const useIdeState = (): [State, (actionOrThunk: any) => any] => {
             : payload.message,
           isLoading: false,
         }
+      case 'setCurrentCustomizerParams':
+        return {
+          ...state,
+          currentParameters: payload,
+        }
       case 'setLayout':
         return {
           ...state,
@@ -282,7 +287,13 @@ export const requestRender = ({
       },
     })
       .then(
-        ({ objectData, message, status, customizerParams, lastParameters }) => {
+        ({
+          objectData,
+          message,
+          status,
+          customizerParams,
+          currentParameters,
+        }) => {
           if (status === 'error') {
             dispatch({
               type: 'errorRender',
@@ -296,7 +307,7 @@ export const requestRender = ({
                 message,
                 lastRunCode: code,
                 customizerParams,
-                lastParameters,
+                currentParameters,
               },
             })
             return objectData