choice input

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

@@ -6,6 +6,9 @@ import {
   CadhubStringParam,
   CadhubBooleanParam,
   CadhubNumberParam,
+  CadhubStringChoiceParam,
+  CadhubNumberChoiceParam,
+  CadhubChoiceParam,
 } from './customizerConverter'
 
 const Customizer = () => {
@@ -79,12 +82,16 @@ const Customizer = () => {
           {customizerParams.map((param, index) => {
             const otherProps = {
               value: currentParameters[param.name],
-              onChange: (value) => updateCustomizerParam(param.name, value),
+              onChange: (value) => updateCustomizerParam(param.name, param.type == 'number' ? Number(value) : value),
             }
-            if (param.type === 'string') {
-              return <StringParam key={index} param={param} {...otherProps} />
+            if(param.input === 'choice-string' || param.input === 'choice-number'){
+              return <StringChoiceParam key={index} param={param} {...otherProps} />
+            // }else if(param.input === 'choice-number'){
+            //     return <StringChoiceParam key={index} param={param} {...otherProps} />
+            }else if (param.type === 'string') {
+                return <StringParam key={index} param={param} {...otherProps} />
             } else if (param.type === 'number') {
-              return <NumberParam key={index} param={param} {...otherProps} />
+                return <NumberParam key={index} param={param} {...otherProps} />
             } else if (param.type === 'boolean') {
               return <BooleanParam key={index} param={param} {...otherProps} />
             }
@@ -173,6 +180,28 @@ function StringParam({
   )
 }
 
+function StringChoiceParam({
+  param,
+  value,
+  onChange,
+}: {
+  param: CadhubChoiceParam
+  value: any
+  onChange: Function
+}) {
+  return (
+    <CustomizerParamBase name={param.name} caption={param.caption}>
+      <select
+        className="bg-transparent h-8 border border-ch-gray-300 px-2 text-sm w-full"
+        value={value}
+        onChange={({ target }) => onChange(target?.value)}
+      >
+      {param.options.map(opt=><option value={opt.value} key={opt.name}>{opt.name}</option>)}
+      </select>
+    </CustomizerParamBase>
+  )
+}
+
 function NumberParam({
   param,
   value,

app/web/src/components/Customizer/customizerConverter.ts

@@ -1,6 +1,7 @@
 // CadHub
 
 type CadhubTypeNames = 'number' | 'string' | 'boolean'
+type CadhubInputNames = 'default-number' | 'default-string' | 'default-boolean' | 'choice-string' | 'choice-number'
 
 export interface CadhubStringOption {
   name: string
@@ -16,10 +17,12 @@ interface CadhubParamBase {
   type: CadhubTypeNames
   caption: string
   name: string
+  input: CadhubInputNames
 }
 
 export interface CadhubStringParam extends CadhubParamBase {
   type: 'string'
+  input: 'default-string'
   initial: string
   placeholder?: string
   maxLength?: number
@@ -30,23 +33,25 @@ export interface CadhubBooleanParam extends CadhubParamBase {
 }
 export interface CadhubNumberParam extends CadhubParamBase {
   type: 'number'
+  input: 'default-number'
   initial: number
   min?: number
   max?: number
   step?: number
   decimal?: number
 }
+
 export interface CadhubStringChoiceParam extends CadhubParamBase {
   type: 'string'
-  input: 'choice'
+  input: 'choice-string'
   initial: string
-  options: Array<string> | Array<CadhubStringOption> 
+  options: Array<CadhubStringOption> 
 }
 export interface CadhubNumberChoiceParam extends CadhubParamBase {
   type: 'number'
-  input: 'choice'
+  input: 'choice-number'
   initial: number
-  options: Array<number> | Array<CadhubNumberOption> 
+  options: Array<CadhubNumberOption> 
 }
 
 export type CadhubParams =

app/web/src/helpers/cadPackages/jsCad/jscadParams.ts

@@ -87,6 +87,7 @@ export function jsCadToCadhubParams(input: JsCadParams[]): CadhubParams[] {
         case 'int':
           return {
             type: 'number',
+            input: 'default-number',
             caption: param.caption,
             name: param.name,
             initial: param.initial,
@@ -103,6 +104,7 @@ export function jsCadToCadhubParams(input: JsCadParams[]): CadhubParams[] {
         case 'date':
           return {
             type: 'string',
+            input: 'default-string',
             caption: param.caption,
             name: param.name,
             initial: param.initial,
@@ -120,11 +122,13 @@ export function jsCadToCadhubParams(input: JsCadParams[]): CadhubParams[] {
         case 'checkbox':
           return {
             type: 'boolean',
+            input: 'default-boolean',
             caption: param.caption,
             name: param.name,
             initial: !!param.initial,
           }
           case 'choice':
+          case 'radio':
             if(typeof param.values[0] === 'number'){
               let options:Array<CadhubNumberOption> = []
               let captions = param.captions || param.values
@@ -133,7 +137,7 @@ export function jsCadToCadhubParams(input: JsCadParams[]): CadhubParams[] {
               })
               return  {
                 type:  'number',
-                input: 'choice',
+                input: 'choice-number',
                 caption: param.caption,
                 name: param.name,
                 initial: Number(param.initial),
@@ -147,7 +151,7 @@ export function jsCadToCadhubParams(input: JsCadParams[]): CadhubParams[] {
               })
               return  {
                 type:  'string',
-                input: 'choice',
+                input: 'choice-string',
                 caption: param.caption,
                 name: param.name,
                 initial: String(param.initial),

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

@@ -51,7 +51,7 @@ show_object(result)
 
 const jscad = require('@jscad/modeling')
 // https://openjscad.xyz/docs/module-modeling_primitives.html
-const { circle, rectangle, cube, cuboid, sphere, cylinder } = jscad.primitives 
+const { circle, rectangle, cube, cuboid, sphere, cylinder } = jscad.primitives
 
 const { rotate, scale, translate } = jscad.transforms
 const { degToRad } = jscad.utils // because jscad uses radians for rotations
@@ -62,7 +62,7 @@ const { union, intersect, subtract } = jscad.booleans
 function main({//@jscad-params
     // Box example
     width=40, // Width
-    length=20, // Length 
+    length=20, // Length
     height=10, // Height
     hole=3,// Hole for cables diameter (0=no hole)
     wall=1, // wall {min:0.5, step:0.5}
@@ -77,7 +77,7 @@ function main({//@jscad-params
         model = subtract( model,
             translate([width/2-wall/2], rotate([0, degToRad(90), 0 ], cylinder({radius:hole/2, height:wall})))
         )
-    } 
+    }
     return rotate([0,0, degToRad(90)], model)
 }