live customizer attempt

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

@@ -7,6 +7,7 @@ import {
   CadhubBooleanParam,
   CadhubNumberParam,
 } from './customizerConverter'
+import { debounce } from 'lodash'
 
 const Customizer = () => {
   const [open, setOpen] = React.useState(false)
@@ -186,6 +187,8 @@ function NumberParam({
   const [localValue, localValueSetter] = React.useState(0)
   const [isLocked, isLockedSetter] = React.useState(false)
   const [pixelsDragged, pixelsDraggedSetter] = React.useState(0)
+  const handleRender = useRender()
+  const liveRenderHandler = debounce((a) => handleRender(a), 250)
   const step = param.step || 1
   const commitChange = () => {
     let num = localValue
@@ -246,6 +249,7 @@ function NumberParam({
             if (isLocked && movementX) {
               pixelsDraggedSetter(pixelsDragged + (movementX * step) / 8) // one step per 8 pixels
               localValueSetter(Number(pixelsDragged.toFixed(2)))
+              liveRenderHandler({[param.name]: Number(pixelsDragged.toFixed(2))})
             }
           }}
         >

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

@@ -3,7 +3,7 @@ import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 
 export const useRender = () => {
   const { state, thunkDispatch } = useIdeContext()
-  return () => {
+  return (paramOverrides: {[key: string]: any} = {}) => {
     thunkDispatch((dispatch, getState) => {
       const state = getState()
       dispatch({ type: 'setLoading' })
@@ -13,7 +13,10 @@ export const useRender = () => {
         code: state.code,
         viewerSize: state.viewerSize,
         camera: state.camera,
-        parameters: state.currentParameters,
+        parameters: {
+          ...state.currentParameters,
+          ...paramOverrides,
+        },
       })
     })
     localStorage.setItem(makeCodeStoreKey(state.ideType), state.code)