From 5d79efbf156f70214c69b80cf7d95fdd892a2614 Mon Sep 17 00:00:00 2001 From: Davor Hrg Date: Sun, 22 Aug 2021 09:52:58 +0200 Subject: [PATCH] choice input --- .../src/components/Customizer/Customizer.tsx | 37 +++++++++++++++++-- .../Customizer/customizerConverter.ts | 13 +++++-- .../helpers/cadPackages/jsCad/jscadParams.ts | 8 +++- app/web/src/helpers/hooks/useIdeState.ts | 6 +-- 4 files changed, 51 insertions(+), 13 deletions(-) diff --git a/app/web/src/components/Customizer/Customizer.tsx b/app/web/src/components/Customizer/Customizer.tsx index 02f16ce..4928640 100644 --- a/app/web/src/components/Customizer/Customizer.tsx +++ b/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 + if(param.input === 'choice-string' || param.input === 'choice-number'){ + return + // }else if(param.input === 'choice-number'){ + // return + }else if (param.type === 'string') { + return } else if (param.type === 'number') { - return + return } else if (param.type === 'boolean') { return } @@ -173,6 +180,28 @@ function StringParam({ ) } +function StringChoiceParam({ + param, + value, + onChange, +}: { + param: CadhubChoiceParam + value: any + onChange: Function +}) { + return ( + + + + ) +} + function NumberParam({ param, value, diff --git a/app/web/src/components/Customizer/customizerConverter.ts b/app/web/src/components/Customizer/customizerConverter.ts index 7409c17..3972248 100644 --- a/app/web/src/components/Customizer/customizerConverter.ts +++ b/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 | Array + options: Array } export interface CadhubNumberChoiceParam extends CadhubParamBase { type: 'number' - input: 'choice' + input: 'choice-number' initial: number - options: Array | Array + options: Array } export type CadhubParams = diff --git a/app/web/src/helpers/cadPackages/jsCad/jscadParams.ts b/app/web/src/helpers/cadPackages/jsCad/jscadParams.ts index 417aa82..b541406 100644 --- a/app/web/src/helpers/cadPackages/jsCad/jscadParams.ts +++ b/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 = [] 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), diff --git a/app/web/src/helpers/hooks/useIdeState.ts b/app/web/src/helpers/hooks/useIdeState.ts index 95dabe4..9846bce 100644 --- a/app/web/src/helpers/hooks/useIdeState.ts +++ b/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) }