Add live update checkbox to customizer

This commit is contained in:
Kurt Hutten
2021-08-05 07:44:21 +10:00
parent 2b2080c232
commit c9e3d3a708
3 changed files with 22 additions and 16 deletions

View File

@@ -4,6 +4,7 @@ import { genParams, getParams } from 'src/helpers/cadPackages/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()
@@ -13,13 +14,12 @@ const Customizer = () => {
const handleRender2 = ()=>handleRender(getParams(ref.current))
React.useEffect(() => {
console.log({ jsCadCustomizerElement, customizerParams, lastParameters })
if (jsCadCustomizerElement && customizerParams) {
genParams(customizerParams, jsCadCustomizerElement, lastParameters || {}, (values)=>{
handleRender(values)
},[])
if ((jsCadCustomizerElement && customizerParams)) {
genParams(customizerParams, jsCadCustomizerElement, lastParameters || {}, checked ? (values)=>{
handleRender(values)}: () => {}
,[])
}
}, [jsCadCustomizerElement, customizerParams, lastParameters])
}, [jsCadCustomizerElement, customizerParams, lastParameters, checked])
return (
<div
className={`absolute inset-x-0 bottom-0 bg-ch-gray-600 bg-opacity-60 text-ch-gray-300 text-lg font-fira-sans ${
@@ -33,6 +33,11 @@ const Customizer = () => {
</button>
<div>Parameters</div>
</div>
<div className='flex items-center'>
<input className='mr-6' type='checkbox' checked={checked} onChange={({target}) => {
const newValue = !checked
if (newValue) handleRender2()
setChecked(newValue)}}/>
<button
className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800"
onClick={handleRender2}
@@ -40,6 +45,8 @@ const Customizer = () => {
Update
</button>
</div>
</div>
<div className={`${open ? 'h-full' : 'h-0'} overflow-y-auto py-3 px-12`}>
<div id="jscad-customizer-block" ref={ref}>
<p>lots of lines should cause scroll</p>

View File

@@ -104,7 +104,6 @@ export const render: DefaultKernelExport['render'] = async ({
scriptWorker.addEventListener('message', (e) => {
const data = e.data
if (data.action == 'parameterDefinitions') {
console.log('message',data)
parameterDefinitions = data.data
} else if (data.action == 'entities') {
if (data.error) {

View File

@@ -180,7 +180,7 @@ export const useIdeState = (): [State, (actionOrThunk: any) => any] => {
...state.objectData,
type: payload.objectData?.type,
data: payload.objectData?.data,
customizerParams: payload.customizerParams,
customizerParams: payload.customizerParams || state.objectData.customizerParams,
lastParameters: payload.lastParameters,
},
consoleMessages: payload.message