step and decimal calculation proposal

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,7 +187,18 @@ 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 live = false // TODO get from param
+  let decimal = 0
+  if('decimal' in param){
+    decimal = param.decimal
+  }else{
+    let str = String(step)
+    const idx = str.indexOf('.')
+    if(idx !== -1) decimal = str.length - idx - 1
+  }
   const commitChange = () => {
     let num = localValue
     if (typeof param.step === 'number') {
@@ -198,7 +210,7 @@ function NumberParam({
     if (typeof param.max === 'number') {
       num = Math.min(param.max, num)
     }
-    num = Number(num.toFixed(2))
+    num = Number(num.toFixed(decimal))
     localValueSetter(num)
     onChange(num)
   }
@@ -245,7 +257,9 @@ function NumberParam({
           onMouseMove={({ movementX }) => {
             if (isLocked && movementX) {
               pixelsDraggedSetter(pixelsDragged + (movementX * step) / 8) // one step per 8 pixels
-              localValueSetter(Number(pixelsDragged.toFixed(2)))
+              const decimalFixed = Number((Math.round(pixelsDragged / step) * step).toFixed(decimal))
+              localValueSetter(decimalFixed)
+              if(live) liveRenderHandler({[param.name]: decimalFixed})
             }
           }}
         >

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)