- )}
+
+
)
}
diff --git a/app/web/src/components/IdeWrapper/useRender.ts b/app/web/src/components/IdeWrapper/useRender.ts
index bc82f81..4ac6312 100644
--- a/app/web/src/components/IdeWrapper/useRender.ts
+++ b/app/web/src/components/IdeWrapper/useRender.ts
@@ -13,6 +13,7 @@ export const useRender = () => {
code: state.code,
viewerSize: state.viewerSize,
camera: state.camera,
+ 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 cbe789a..1a5acc1 100644
--- a/app/web/src/helpers/cadPackages/common.ts
+++ b/app/web/src/helpers/cadPackages/common.ts
@@ -12,6 +12,7 @@ export const stlToGeometry = (url) =>
export interface RenderArgs {
code: State['code']
+ parameters?: RawCustomizerParams
settings: {
camera: State['camera']
viewerSize: State['viewerSize']
@@ -30,6 +31,12 @@ export interface HealthyResponse {
data: any
type: 'stl' | 'png' | 'geometry'
}
+ customizerParams?: any[]
+ currentParameters?: RawCustomizerParams
+}
+
+export interface RawCustomizerParams {
+ [paramName: string]: number | string | boolean
}
export function createHealthyResponse({
@@ -37,11 +44,15 @@ export function createHealthyResponse({
data,
consoleMessage,
type,
+ customizerParams,
+ currentParameters,
}: {
date: Date
data: any
consoleMessage: string
type: HealthyResponse['objectData']['type']
+ customizerParams?: any
+ currentParameters?: any
}): HealthyResponse {
return {
status: 'healthy',
@@ -54,6 +65,8 @@ export function createHealthyResponse({
message: consoleMessage,
time: date,
},
+ customizerParams,
+ currentParameters,
}
}
diff --git a/app/web/src/helpers/cadPackages/index.ts b/app/web/src/helpers/cadPackages/index.ts
index 145717e..568e9b9 100644
--- a/app/web/src/helpers/cadPackages/index.ts
+++ b/app/web/src/helpers/cadPackages/index.ts
@@ -3,7 +3,7 @@ import type { CadPackage } from 'src/helpers/hooks/useIdeState'
import openscad from './openScadController'
import cadquery from './cadQueryController'
-import jscad from './jsCadController'
+import jscad from './jsCad/jsCadController'
export const cadPackages: { [key in CadPackage]: DefaultKernelExport } = {
openscad,
diff --git a/app/web/src/helpers/cadPackages/jsCadController.ts b/app/web/src/helpers/cadPackages/jsCad/jsCadController.ts
similarity index 66%
rename from app/web/src/helpers/cadPackages/jsCadController.ts
rename to app/web/src/helpers/cadPackages/jsCad/jsCadController.ts
index e26f92e..f0088da 100644
--- a/app/web/src/helpers/cadPackages/jsCadController.ts
+++ b/app/web/src/helpers/cadPackages/jsCad/jsCadController.ts
@@ -3,7 +3,7 @@ import {
DefaultKernelExport,
createUnhealthyResponse,
createHealthyResponse,
-} from './common'
+} from '../common'
import {
MeshPhongMaterial,
LineBasicMaterial,
@@ -70,6 +70,7 @@ function CSG2Object3D(obj) {
}
let scriptWorker
+let currentParameters = {}
const scriptUrl = '/demo-worker.js'
let resolveReference = null
let response = null
@@ -81,25 +82,32 @@ const callResolve = () => {
export const render: DefaultKernelExport['render'] = async ({
code,
+ parameters,
settings,
}: RenderArgs) => {
if (!scriptWorker) {
+ console.trace(
+ '************************** creating new worker ************************'
+ )
const baseURI = document.baseURI.toString()
const script = `let baseURI = '${baseURI}'
-importScripts(new URL('${scriptUrl}',baseURI))
-let worker = jscadWorker({
- baseURI: baseURI,
- scope:'worker',
- convertToSolids: 'buffers',
- callback:(params)=>self.postMessage(params),
-})
-self.addEventListener('message', (e)=>worker.postMessage(e.data))
-`
+ importScripts(new URL('${scriptUrl}',baseURI))
+ let worker = jscadWorker({
+ baseURI: baseURI,
+ scope:'worker',
+ convertToSolids: 'buffers',
+ callback:(params)=>self.postMessage(params),
+ })
+ self.addEventListener('message', (e)=>worker.postMessage(e.data))
+ `
const blob = new Blob([script], { type: 'text/javascript' })
scriptWorker = new Worker(window.URL.createObjectURL(blob))
+ let parameterDefinitions = []
scriptWorker.addEventListener('message', (e) => {
const data = e.data
- if (data.action == 'entities') {
+ if (data.action == 'parameterDefinitions') {
+ parameterDefinitions = data.data
+ } else if (data.action == 'entities') {
if (data.error) {
response = createUnhealthyResponse(new Date(), data.error)
} else {
@@ -108,6 +116,8 @@ self.addEventListener('message', (e)=>worker.postMessage(e.data))
data: [...data.entities.map(CSG2Object3D).filter((o) => o)],
consoleMessage: data.scriptStats,
date: new Date(),
+ customizerParams: parameterDefinitions,
+ currentParameters,
})
}
callResolve()
@@ -118,12 +128,27 @@ self.addEventListener('message', (e)=>worker.postMessage(e.data))
response = null
scriptWorker.postMessage({ action: 'init', baseURI, alias: [] })
}
- scriptWorker.postMessage({
- action: 'runScript',
- worker: 'script',
- script: code,
- url: 'jscad_script',
- })
+
+ if (parameters && currentParameters && JSON.stringify(parameters) !== JSON.stringify(currentParameters)) {
+ // we are not evaluating code, but reacting to parameters change
+ scriptWorker.postMessage({
+ action: 'updateParams',
+ worker: 'script',
+ params: parameters,
+ })
+ } else {
+ scriptWorker.postMessage({
+ action: 'runScript',
+ worker: 'script',
+ script: code,
+ params: parameters || {},
+ url: 'jscad_script',
+ })
+ }
+ // 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
+ currentParameters = parameters || {}
const waitResult = new Promise((resolve) => {
resolveReference = resolve
@@ -131,6 +156,7 @@ self.addEventListener('message', (e)=>worker.postMessage(e.data))
await waitResult
resolveReference = null
+ if (parameters) delete response.customizerParams
return response
}
diff --git a/app/web/src/helpers/cadPackages/jsCad/jscadParams.ts b/app/web/src/helpers/cadPackages/jsCad/jscadParams.ts
new file mode 100644
index 0000000..503f9f1
--- /dev/null
+++ b/app/web/src/helpers/cadPackages/jsCad/jscadParams.ts
@@ -0,0 +1,210 @@
+import type { RawCustomizerParams } from '../common'
+
+const GROUP_SELECTOR = 'DIV[type="group"]'
+const INPUT_SELECTOR = 'INPUT, SELECT'
+
+function forEachInput(
+ target: HTMLElement,
+ callback: (e: HTMLInputElement) => void
+) {
+ target.querySelectorAll(INPUT_SELECTOR).forEach(callback)
+}
+
+function forEachGroup(target: HTMLElement, callback: (e: HTMLElement) => void) {
+ target.querySelectorAll(GROUP_SELECTOR).forEach(callback)
+}
+
+const numeric = { number: 1, float: 1, int: 1, range: 1, slider: 1 }
+
+function applyRange(inp) {
+ const label = inp.previousElementSibling
+ if (label && label.tagName == 'LABEL') {
+ const info = label.querySelector('I')
+ if (info) info.innerHTML = inp.value
+ }
+}
+
+export function genParams(
+ defs,
+ target,
+ storedParams = {},
+ callback: (values: RawCustomizerParams, source: any) => void = undefined,
+ buttons = ['reset', 'save', 'load', 'edit', 'link']
+) {
+ const funcs = {
+ group: () => '',
+ choice: inputChoice,
+ radio: inputRadio,
+ float: inputNumber,
+ range: inputNumber,
+ slider: inputNumber,
+ int: inputNumber,
+ text: inputNumber,
+ url: inputNumber,
+ email: inputNumber,
+ date: inputNumber,
+ password: inputNumber,
+ color: inputNumber,
+ // TODO radio similar options as choice
+ checkbox: function ({ name, value }) {
+ const checkedStr = value === 'checked' || value === true ? 'checked' : ''
+ return ``
+ },
+ number: inputNumber,
+ }
+
+ function inputRadio({ name, type, captions, value, values }) {
+ if (!captions) captions = values
+
+ let ret = '
'
+
+ for (let i = 0; i < values.length; i++) {
+ const checked =
+ value == values[i] || value == captions[i] ? 'checked' : ''
+ ret += ``
+ }
+ return ret + '
'
+ }
+
+ function inputChoice({ name, type, captions, value, values }) {
+ if (!captions) captions = values
+
+ let ret = `'
+ }
+
+ function inputNumber(def) {
+ let { name, type, value, min, max, step, placeholder, live } = def
+ if (value === null || value === undefined) value = numeric[type] ? 0 : ''
+ let inputType = type
+ if (type == 'int' || type == 'float') inputType = 'number'
+ if (type == 'range' || type == 'slider') inputType = 'range'
+ let str = `'
+ }
+
+ let html = ''
+ let closed = false
+ const missing = {}
+
+ defs.forEach((def) => {
+ const { type, caption, name } = def
+
+ if (storedParams[name] !== undefined) {
+ def.value = storedParams[name]
+ } else {
+ def.value = def.initial || def['default'] || def.checked
+ }
+
+ if (type == 'group') {
+ closed = def.value == 'closed'
+ }
+ def.closed = closed
+
+ html += `
`
+
+ html += ``
+ if (type == 'checkbox') html += funcs[type](def)
+ html += `${caption}${def.value}`
+
+ if (funcs[type] && type != 'checkbox') html += funcs[type](def)
+
+ if (!funcs[type]) missing[type] = 1
+
+ html += '
\n'
+ })
+
+ const missingKeys = Object.keys(missing)
+ if (missingKeys.length) console.log('missing param impl', missingKeys)
+
+ function _callback(source = 'change') {
+ if (callback && source !== 'group') callback(getParams(target), source)
+ }
+
+ html += '