format project

app/web/src/components/Customizer/Customizer.tsx

@@ -1,4 +1,4 @@
-import { useRender,  } from 'src/components/IdeWrapper/useRender'
+import { useRender } from 'src/components/IdeWrapper/useRender'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { genParams, getParams } from 'src/helpers/cadPackages/jscadParams'
 
@@ -15,13 +15,19 @@ const Customizer = () => {
 
   React.useEffect(() => {
     if (jsCadCustomizerElement && customizerParams) {
-      genParams(customizerParams, jsCadCustomizerElement, lastParameters || {}, (values, source)=>{
+      genParams(
+        customizerParams,
+        jsCadCustomizerElement,
+        lastParameters || {},
+        (values, source) => {
           if (source === 'group') {
             // save to local storage but do not render
             return
           }
           if (checked) handleRender(values)
-      },[])
+        },
+        []
+      )
     }
   }, [jsCadCustomizerElement, customizerParams, lastParameters, checked])
   return (
@@ -37,11 +43,17 @@ const Customizer = () => {
           </button>
           <div>Parameters</div>
         </div>
-        <div className='flex items-center'>
+        <div className="flex items-center">
-          <input className='mr-6' type='checkbox' checked={checked} onChange={({target}) => {
+          <input
+            className="mr-6"
+            type="checkbox"
+            checked={checked}
+            onChange={({ target }) => {
               const newValue = !checked
               if (newValue) handleRender2()
-            setChecked(newValue)}}/>
+              setChecked(newValue)
+            }}
+          />
           <button
             className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800"
             onClick={handleRender2}
@@ -49,7 +61,6 @@ 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}>

app/web/src/helpers/cadPackages/common.ts

@@ -12,7 +12,7 @@ export const stlToGeometry = (url) =>
 
 export interface RenderArgs {
   code: State['code']
-  parameters: any,
+  parameters: any
   settings: {
     camera: State['camera']
     viewerSize: State['viewerSize']

app/web/src/helpers/cadPackages/jsCadController.ts

@@ -86,7 +86,9 @@ export const render: DefaultKernelExport['render'] = async ({
   settings,
 }: RenderArgs) => {
   if (!scriptWorker) {
-    console.trace('************************** creating new worker ************************')
+    console.trace(
+      '************************** creating new worker ************************'
+    )
     const baseURI = document.baseURI.toString()
     const script = `let baseURI = '${baseURI}'
     importScripts(new URL('${scriptUrl}',baseURI))

app/web/src/helpers/cadPackages/jscadParams.js

@@ -19,8 +19,13 @@ function applyRange(inp){
   }
 }
 
-export function genParams(defs, target, storedParams={}, callback=undefined, buttons=['reset','save','load','edit','link']){
+export function genParams(
-
+  defs,
+  target,
+  storedParams = {},
+  callback = undefined,
+  buttons = ['reset', 'save', 'load', 'edit', 'link']
+) {
   let funcs = {
     group: function ({ name, type, caption, captions, value, min, max }) {
       return ''
@@ -38,8 +43,17 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
     password: inputNumber,
     color: inputNumber,
     // TODO radio similar options as choice
-		checkbox :function({name,type, caption, captions, value, checked, min,max}){
+    checkbox: function ({
-			let checkedStr = (value === 'checked' || value === true) ? 'checked':''
+      name,
+      type,
+      caption,
+      captions,
+      value,
+      checked,
+      min,
+      max,
+    }) {
+      let checkedStr = value === 'checked' || value === true ? 'checked' : ''
       return `<input type="checkbox" name="${name}" ${checkedStr}/>`
     },
     number: inputNumber,
@@ -51,8 +65,10 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
     let ret = '<div type="radio">'
 
     for (let i = 0; i < values.length; i++) {
-			let checked = (value == values[i] || value == captions[i] ) ? 'checked':''
+      let checked = value == values[i] || value == captions[i] ? 'checked' : ''
-			ret += `<label><input type="radio" _type="${type}" name="${name}" numeric="${typeof values[0] == 'number' ? '1':'0'}" value="${values[i]}" ${checked}/>${captions[i]}</label>`
+      ret += `<label><input type="radio" _type="${type}" name="${name}" numeric="${
+        typeof values[0] == 'number' ? '1' : '0'
+      }" value="${values[i]}" ${checked}/>${captions[i]}</label>`
     }
     return ret + '</div>'
   }
@@ -60,10 +76,12 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
   function inputChoice({ name, type, captions, value, values }) {
     if (!captions) captions = values
 
-		let ret = `<select _type="${type}" name="${name}" numeric="${typeof values[0] == 'number' ? '1':'0'}">`
+    let ret = `<select _type="${type}" name="${name}" numeric="${
+      typeof values[0] == 'number' ? '1' : '0'
+    }">`
 
     for (let i = 0; i < values.length; i++) {
-			let checked = (value == values[i] || value == captions[i] ) ? 'selected':''
+      let checked = value == values[i] || value == captions[i] ? 'selected' : ''
       ret += `<option value="${values[i]}" ${checked}>${captions[i]}</option>`
     }
     return ret + '</select>'
@@ -71,7 +89,7 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
 
   function inputNumber(def) {
     let { name, type, value, min, max, step, placeholder, live } = def
-		if(value === null || value === undefined) value = numeric[type] ? 0:'';
+    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'
@@ -82,18 +100,18 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
     if (value !== undefined) str += ` value="${value}"`
     if (live !== undefined) str += ` live="${live ? 1 : 0}"`
     if (placeholder !== undefined) str += ` placeholder="${placeholder}"`
-		return str+'/>';
+    return str + '/>'
   }
 
-	let html = '';
+  let html = ''
   let closed = false
   let missing = {}
 
-	defs.forEach(def=>{
+  defs.forEach((def) => {
     let { type, caption, name } = def
 
     if (storedParams[name] !== undefined) {
-			def.value = storedParams[name];
+      def.value = storedParams[name]
     } else {
       def.value = def.initial || def['default'] || def.checked
     }
@@ -103,7 +121,9 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
     }
     def.closed = closed
 
-		html +=`<div class="form-line" type="${def.type}" closed="${closed ? 1:0}" `
+    html += `<div class="form-line" type="${def.type}" closed="${
+      closed ? 1 : 0
+    }" `
     if (type == 'group') html += ` name="${name}"`
     html += `">`
 
@@ -121,14 +141,14 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
   })
 
   let missingKeys = Object.keys(missing)
-	if(missingKeys.length) console.log('missing param impl',missingKeys);
+  if (missingKeys.length) console.log('missing param impl', missingKeys)
 
   function _callback(source = 'change') {
     if (callback) callback(getParams(target), source)
   }
 
   html += '<div class="jscad-param-buttons"><div>'
-	buttons.forEach(b=>{
+  buttons.forEach((b) => {
     if (typeof b === 'string') b = { id: b, name: b }
     let { id, name } = b
     html += `<button action="${id}"><b>${name}</b></button>`
@@ -137,20 +157,20 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
 
   target.innerHTML = html
 
-	forEachInput(target, inp=>{
+  forEachInput(target, (inp) => {
     let type = inp.type
     inp.addEventListener('input', function (evt) {
       applyRange(inp)
-			if(inp.getAttribute('live') === '1') _callback('live');
+      if (inp.getAttribute('live') === '1') _callback('live')
     })
-		if(inp.getAttribute('live') !== '1') inp.addEventListener('change', _callback)
+    if (inp.getAttribute('live') !== '1')
-		
+      inp.addEventListener('change', _callback)
   })
 
   function groupClick(evt) {
     var groupDiv = evt.target
     if (groupDiv.tagName === 'LABEL') groupDiv = groupDiv.parentNode
-		var closed = (groupDiv.getAttribute('closed') == '1') ? '0':'1'
+    var closed = groupDiv.getAttribute('closed') == '1' ? '0' : '1'
     var name = evt.target.getAttribute('name')
     do {
       groupDiv.setAttribute('closed', closed)
@@ -159,7 +179,7 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
     _callback('group')
   }
 
-	forEachGroup(target, div=>{
+  forEachGroup(target, (div) => {
     div.onclick = groupClick
   })
 }
@@ -168,12 +188,12 @@ export function getParams(target){
   let params = {}
   if (!target) return params
 
-    forEachGroup(target,elem=>{
+  forEachGroup(target, (elem) => {
     let name = elem.getAttribute('name')
-        params[name] = (elem.getAttribute('closed') == '1') ? 'closed':''
+    params[name] = elem.getAttribute('closed') == '1' ? 'closed' : ''
   })
 
-    forEachInput(target,elem=>{
+  forEachInput(target, (elem) => {
     let name = elem.name
     let value = elem.value
     if (elem.tagName == 'INPUT') {
@@ -181,12 +201,15 @@ export function getParams(target){
       if (elem.type == 'range' || elem.type == 'color') applyRange(elem)
     }
 
-        if(numeric[elem.getAttribute('type')] || elem.getAttribute('numeric') == '1') value = parseFloat(value || 0)
+    if (
+      numeric[elem.getAttribute('type')] ||
+      elem.getAttribute('numeric') == '1'
+    )
+      value = parseFloat(value || 0)
 
     if (elem.type == 'radio' && !elem.checked) return // skip if not checked radio button
 
     params[name] = value
   })
-    return params;
+  return params
 }
-

app/web/src/helpers/hooks/useIdeState.ts

@@ -180,7 +180,8 @@ export const useIdeState = (): [State, (actionOrThunk: any) => any] => {
             ...state.objectData,
             type: payload.objectData?.type,
             data: payload.objectData?.data,
-            customizerParams: payload.customizerParams || state.objectData.customizerParams,
+            customizerParams:
+              payload.customizerParams || state.objectData.customizerParams,
             lastParameters: payload.lastParameters,
           },
           consoleMessages: payload.message
@@ -246,7 +247,7 @@ export const useIdeState = (): [State, (actionOrThunk: any) => any] => {
 interface RequestRenderArgs {
   state: State
   dispatch: any
-  parameters: any,
+  parameters: any
   code: State['code']
   camera: State['camera']
   viewerSize: State['viewerSize']
@@ -280,7 +281,8 @@ export const requestRender = ({
         quality,
       },
     })
-      .then(({ objectData, message, status, customizerParams, lastParameters }) => {
+      .then(
+        ({ objectData, message, status, customizerParams, lastParameters }) => {
           if (status === 'error') {
             dispatch({
               type: 'errorRender',
@@ -299,7 +301,8 @@ export const requestRender = ({
             })
             return objectData
           }
-      })
+        }
+      )
       .catch(() => dispatch({ type: 'resetLoading' })) // TODO should probably display something to the user here
   }
 }