From 14600d38997317fecfbcc76ae7d5c60649bf0e9c Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Sat, 21 Aug 2021 11:07:09 +1000
Subject: [PATCH] live customizer attempt

---
 app/web/src/components/Customizer/Customizer.tsx | 4 ++++
 app/web/src/components/IdeWrapper/useRender.ts   | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/web/src/components/Customizer/Customizer.tsx b/app/web/src/components/Customizer/Customizer.tsx
index 53f170e..73d5b3a 100644
--- a/app/web/src/components/Customizer/Customizer.tsx
+++ b/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))})
             }
           }}
         >
diff --git a/app/web/src/components/IdeWrapper/useRender.ts b/app/web/src/components/IdeWrapper/useRender.ts
index 4ac6312..904c497 100644
--- a/app/web/src/components/IdeWrapper/useRender.ts
+++ b/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)