diff --git a/app/web/src/components/Customizer/Customizer.tsx b/app/web/src/components/Customizer/Customizer.tsx index 37e8c1a..9010328 100644 --- a/app/web/src/components/Customizer/Customizer.tsx +++ b/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 (
{ className="mr-6" type="checkbox" checked={checked} - onChange={({ target }) => { + onChange={() => { const newValue = !checked - if (newValue) handleRender2() + if (newValue) handleRender() setChecked(newValue) }} /> diff --git a/app/web/src/components/IdeWrapper/useRender.ts b/app/web/src/components/IdeWrapper/useRender.ts index 17824d6..4ac6312 100644 --- a/app/web/src/components/IdeWrapper/useRender.ts +++ b/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) diff --git a/app/web/src/helpers/cadPackages/common.ts b/app/web/src/helpers/cadPackages/common.ts index 95a60c3..7c17760 100644 --- a/app/web/src/helpers/cadPackages/common.ts +++ b/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, } } diff --git a/app/web/src/helpers/cadPackages/jsCad/jsCadController.ts b/app/web/src/helpers/cadPackages/jsCad/jsCadController.ts index 6cabb4a..c40594d 100644 --- a/app/web/src/helpers/cadPackages/jsCad/jsCadController.ts +++ b/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 diff --git a/app/web/src/helpers/cadPackages/jsCad/jscadParams.ts b/app/web/src/helpers/cadPackages/jsCad/jscadParams.ts index b43911a..a397e45 100644 --- a/app/web/src/helpers/cadPackages/jsCad/jscadParams.ts +++ b/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 += '
' @@ -179,7 +179,7 @@ export function genParams( }) } -export function getParams(target: HTMLElement): RawCustomizerParams { +function getParams(target: HTMLElement): RawCustomizerParams { const params = {} if (!target) return params diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts index 2de05d4..7423dab 100644 --- a/app/web/src/helpers/hooks/useIdeState.ts +++ b/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