on scene selection OK + keyframe model

app/helpers/formBuilder.js

@@ -6,7 +6,7 @@ if(!app.helpers) app.helpers = {}
  */
 app.helpers.formBuilder = {
 
-    fieldsFromJSON(fieldsObj, fieldsetLabel=null){
+    fieldsFromJSON(fieldsObj, fieldsValues, fieldsetLabel=null){
         let allFields = []
         for(const propName in fieldsObj){
             const fieldRow = ui.create(`<div class="cols-2"><label>${fieldsObj[propName].label}</label></div>`)
@@ -18,34 +18,35 @@ app.helpers.formBuilder = {
                     component.setAttribute('type','number')
                     if('min' in fieldsObj[propName]) component.setAttribute('min', fieldsObj[propName].min)
                     if('max' in fieldsObj[propName]) component.setAttribute('max', fieldsObj[propName].max)
-                    component.value = fieldsObj[propName].default
                     break
                 case 'string': 
                     component = document.createElement('input')
                     component.setAttribute('name',propName)
                     component.setAttribute('type','text')
-                    component.value = fieldsObj[propName].default
                     break
                 case 'boolean':                        
                     component = document.createElement('bz-toggler')
                     component.setAttribute('name',propName)
                     component.setAttribute('trueValue','1')
                     component.setAttribute('falseValue','0')
-                    component.value = fieldsObj[propName].default
                     fieldRow.append(component.el)                    
                     break                    
                 case 'list':
                     component = document.createElement('bz-select')
-                    component.setAttribute('name',propName)
+                    component.setAttribute('name', propName)
                     component.fillOptions( fieldsObj[propName].choices.map(item => {
                         return({ markup: `${item}`, value: item})
-                    })) 
+                    }))
                     break
                 default:
                     console.warn(`Unknown field type ${fieldsObj[propName].type}`)
             }
-            fieldRow.append(component)
-            allFields.push(fieldRow)
+            if(component){
+                component.classList.add('formbuilder-field')
+                component.value = this.getPathInObj(fieldsValues, propName) || fieldsObj[propName].default
+                fieldRow.append(component)
+                allFields.push(fieldRow)
+            }
         }
         if(fieldsetLabel!==null){
             const fieldset = document.createElement('fieldset')
@@ -60,4 +61,34 @@ app.helpers.formBuilder = {
             return(allFields)
         }
     },
+
+    getPathInObj(obj, path){
+        const parts = path.split('.')
+        let target = obj
+        for (let i = 0; i < parts.length - 1; i++) {
+            const key = parts[i]
+            if(!target[parts[i]]) return(null)
+            target = target[parts[i]]
+        }
+        return(target[parts[parts.length - 1]] )
+    },
+
+    getFieldsValues(rootSel){
+        const result = {}
+        document.querySelectorAll(`${rootSel} .formbuilder-field`).forEach(el => {
+            const path = el.name.split('.')
+            let target = result
+            for (let i = 0; i < path.length - 1; i++) {
+                const key = path[i]
+                if (!target[key] || typeof target[key] !== 'object') {
+                    target[key] = {}
+                }
+                target = target[key]
+            }
+            target[path[path.length - 1]] = el.value
+        })
+        return(result)
+    },
+
+
 }