more param types to check and style

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

@@ -1,4 +1,4 @@
-const GROUP_SELECTOR = 'DIV[type="group"] LABEL'
+const GROUP_SELECTOR = 'DIV[type="group"]'
 const INPUT_SELECTOR = 'INPUT, SELECT'
 
 function forEachInput(target, callback){
@@ -15,7 +15,7 @@ function applyRange(inp){
     let label = inp.previousElementSibling
     if(label.tagName == 'LABEL'){
         let info = label.querySelector('I')
-        if(info) info.innerHTML = '('+inp.value+')'
+        if(info) info.innerHTML = inp.value
     }
 }
 
@@ -88,13 +88,15 @@ 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 +=`">`
 		
 		html += `<label`
 		if(type == 'group') html += ` name="${name}"`
 		html += `>`
 		if(type == 'checkbox') html += funcs[type](def)
-		html += `${caption}<i></i></label>`
+		html += `${caption}<i>${def.value}</i></label>`
 		
 		if(funcs[type] && type != 'checkbox') html += funcs[type](def)
 
@@ -141,7 +143,7 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
 		callback(getParams(target),true)
 	}
 
-	forEachGroup(target, label=>label.onclick=groupClick)
+	forEachGroup(target, div=>div.onclick=groupClick)
 }
 
 export function getParams(target){
@@ -150,7 +152,7 @@ export function getParams(target){
 
     forEachGroup(target,elem=>{
         let name = elem.getAttribute('name')
-        params[name] = (groupDiv.getAttribute('closed') == '1') ? 'closed':''
+        params[name] = (elem.getAttribute('closed') == '1') ? 'closed':''
     })
 
     forEachInput(target,elem=>{

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

@@ -70,7 +70,26 @@ const main = ({length=1}) => {
 }
 const getParameterDefinitions = ()=>{
   return [
-    {type:'slider', name:'length', initial:210, caption:'Length', min:210, max:1500}
+    {type:'slider', name:'length', initial:210, caption:'Length', min:210, max:1500},
+    { name: 'group1', type: 'group', caption: 'Group 1: Text Entry' },
+    { name: 'text', type: 'text', initial: '', size: 20, maxLength: 20, caption: 'Plain Text:', placeholder: '20 characters' },
+    { name: 'int', type: 'int', initial: 20, min: 1, max: 100, step: 1, caption: 'Integer:' },
+    { name: 'number', type: 'number', initial: 2.0, min: 1.0, max: 10.0, step: 0.1, caption: 'Number:' },
+    { name: 'date', type: 'date', initial: '2020-01-01', min: '2020-01-01', max: '2030-12-31', caption: 'Date:', placeholder: 'YYYY-MM-DD' },
+    { name: 'email', type: 'email', initial: 'me@example.com', caption: 'Email:' },
+    { name: 'url', type: 'url', initial: 'www.example.com', size: 40, maxLength: 40, caption: 'Url:', placeholder: '40 characters' },
+    { name: 'password', type: 'password', initial: '', caption: 'Password:' },
+
+    { name: 'group2', type: 'group', caption: 'Group 2: Interactive Controls' },
+    { name: 'checkbox', type: 'checkbox', checked: true, initial: '20', caption: 'Checkbox:' },
+    { name: 'color', type: 'color', initial: '#FFB431', caption: 'Color:' },
+    { name: 'slider', type: 'slider', initial: 3, min: 1, max: 10, step: 1, caption: 'Slider:' },
+    { name: 'choice1', type: 'choice', caption: 'Dropdown Menu:', values: [0, 1, 2, 3], captions: ['No', 'Yes', 'Maybe', 'So so'], initial: 2 },
+    { name: 'choice3', type: 'choice', caption: 'Dropdown Menu:', values: ['No', 'Yes', 'Maybe', 'So so'], initial: 'No' },
+    { name: 'choice2', type: 'radio', caption: 'Radio Buttons:', values:[0, 1, 2, 3], captions: ['No', 'Yes', 'Maybe', 'So so'], initial: 5 },
+
+    { name: 'group3', type: 'group', initial: 'closed', caption: 'Group 3: Initially Closed Group' },
+    { name: 'checkbox2', type: 'checkbox', checked: true, initial: '20', caption: 'Optional Checkbox:' },
   ]
 }
 module.exports = {main, getParameterDefinitions}

app/web/src/index.css

@@ -115,3 +115,91 @@ input.error, textarea.error {
   border: 1px solid red;
 }
 
+#jscad-customizer-block {
+  padding-bottom: 60px; /* hack because it gets cut off at the bottom for some reason*/
+}
+#jscad-customizer-block > .form-line{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 5px 15px;
+    position: relative;
+}
+#jscad-customizer-block > .form-line:hover{
+  background: rgba(0,0,0,0.3);
+}
+
+#jscad-customizer-block > .form-line[type="group"]{
+  background: rgba(255, 255, 255, 0.15);
+  padding-left: 50px;
+  padding-bottom: 12px;
+  cursor: pointer;
+}
+#jscad-customizer-block > .form-line[type="group"] > label{
+  cursor: pointer;
+}
+#jscad-customizer-block > .form-line[closed="1"]:not([type="group"]){
+  display: none;
+}
+
+#jscad-customizer-block > .form-line[type="group"]:before {
+  position: absolute;
+  content: ">";
+  left: 18px;
+  top: 13px;
+  font-size: 30px;
+  transform: rotate(90deg);
+  font-family: monospace;
+
+}
+#jscad-customizer-block > .form-line[type="group"][closed="1"]:before {
+  transform: rotate(0deg);
+}
+
+#jscad-customizer-block > .form-line select,
+#jscad-customizer-block > .form-line input[type="text"],
+#jscad-customizer-block > .form-line input[type="range"],
+#jscad-customizer-block > .form-line input[type="slider"],
+#jscad-customizer-block > .form-line input[type="number"],
+#jscad-customizer-block > .form-line input[type="int"],
+#jscad-customizer-block > .form-line input[type="date"],
+#jscad-customizer-block > .form-line input[type="email"],
+#jscad-customizer-block > .form-line input[type="url"],
+#jscad-customizer-block > .form-line input[type="password"]
+{
+  background: rgba(73, 73, 73, 0.65); 
+  border: 1px solid #FFFFFF;
+  width: 50%;
+  padding: 2px 8px;
+}
+
+#jscad-customizer-block > .form-line label i{
+  display: none;
+  font-style: normal;
+}
+
+#jscad-customizer-block > .form-line[type="range"] label i,
+#jscad-customizer-block > .form-line[type="slider"] label i,
+#jscad-customizer-block > .form-line[type="color"] label i{
+  display: inline-block;  
+}
+
+#jscad-customizer-block > .form-line input[type="range"]{
+  position: relative;
+  top: 6px;
+}
+#jscad-customizer-block > .form-line > label > i{
+  position: absolute;
+  top: 2px;
+  left: 70%;
+}
+
+#jscad-customizer-block .form-line label{
+  font-family: Fira Sans;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 14px;
+
+  color: #CFCFD8;
+}