diff --git a/app/web/src/components/Customizer/Customizer.tsx b/app/web/src/components/Customizer/Customizer.tsx index 733a444..6273cf2 100644 --- a/app/web/src/components/Customizer/Customizer.tsx +++ b/app/web/src/components/Customizer/Customizer.tsx @@ -14,12 +14,20 @@ import { } from './customizerConverter' const Customizer = () => { - const [open, setOpen] = React.useState(false) const [shouldLiveUpdate, setShouldLiveUpdate] = React.useState(false) const { state, thunkDispatch } = useIdeContext() + const isOpen = state.isCustomizerOpen const customizerParams = state?.customizerParams const currentParameters = state?.currentParameters || {} const handleRender = useRender() + const toggleOpen = () => { + const newOpenState = !isOpen + thunkDispatch({type: 'setCustomizerOpenState', payload: newOpenState}) + if(!newOpenState) { + // render on close + setTimeout(() => handleRender()) + } + } const updateCustomizerParam = (paramName: string, paramValue: any) => { const payload = { @@ -33,20 +41,20 @@ const Customizer = () => { return (
-
Parameters
- {open && ( + {isOpen && ( <>
Auto Update
@@ -79,7 +87,7 @@ const Customizer = () => { )}
-
+
{customizerParams.map((param, index) => { const otherProps = { diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts index f378e49..ee6d337 100644 --- a/app/web/src/helpers/hooks/useIdeState.ts +++ b/app/web/src/helpers/hooks/useIdeState.ts @@ -45,6 +45,7 @@ export interface State { } customizerParams: CadhubParams[] currentParameters?: RawCustomizerParams + isCustomizerOpen: boolean layout: any camera: { dist?: number @@ -83,6 +84,7 @@ export const initialState: State = { quality: 'low', }, customizerParams: [], + isCustomizerOpen: false, layout: initialLayout, camera: {}, viewerSize: { width: 0, height: 0 }, @@ -107,13 +109,15 @@ const reducer = (state: State, { type, payload }): State => { case 'updateCode': return { ...state, code: payload } case 'healthyRender': - const customizerParams: CadhubParams[] = payload.customizerParams || [] const currentParameters = {} + + const customizerParams: CadhubParams[] = payload.customizerParams || [] customizerParams.forEach((param) => { + currentParameters[param.name] = - typeof state?.currentParameters?.[param.name] !== 'undefined' - ? state?.currentParameters?.[param.name] - : param.initial + typeof state?.currentParameters?.[param.name] === 'undefined' || !state.isCustomizerOpen + ? param.initial + : state?.currentParameters?.[param.name] }) return { ...state, @@ -143,6 +147,11 @@ const reducer = (state: State, { type, payload }): State => { ...state, currentParameters: payload, } + case 'setCustomizerOpenState': + return { + ...state, + isCustomizerOpen: payload + } case 'setLayout': return { ...state, @@ -290,7 +299,7 @@ export const requestRender = ({ return renderFn({ code, settings: { - parameters, + parameters: state.isCustomizerOpen ? parameters : {}, camera, viewerSize, quality,