styling, add&del buttons...

app/views/editors/KeyframeView.js

@@ -3,6 +3,7 @@ class KeyframeView extends WindozDomContent {
     constructor() {
         super()
         Object.assign(this, app.helpers.activeAttributes)
+        Object.assign(this, app.helpers.formBuilder)
     }
     
     DOMContentFocused(options) { 
@@ -47,49 +48,48 @@ class KeyframeView extends WindozDomContent {
     async onChangeAgent(event){
         if(this.outputs.agentsSelector.value) this.agentPreview.setAgent(this.outputs.agentsSelector.value)
         if(!this.outputs.agentsSelector.value) return
+        console.log('onChangeAgent',this.outputs.agentsSelector.value)
         const agent = await this.models.agents.getProperties(this.outputs.agentsSelector.value)
         this.fillAgentProperties(agent.atp_props)
     }
 
-    fillAgentProperties(agentProps){
-        let allFields = []
-        for(const propName in agentProps){
-            const fieldRow = ui.create(`<div class="cols-2"><label>${propName}</label></div>`)
-            let component
-            switch(agentProps[propName].type){
-                case 'number':
-                    component = document.createElement('input')
-                    component.setAttribute('type','number')
-                    if(agentProps[propName].min) component.setAttribute('min', agentProps[propName].min)
-                    if(agentProps[propName].max) component.setAttribute('max', agentProps[propName].max)
-                    component.value = agentProps[propName].default
-                    break
-                case 'string': 
-                    component = document.createElement('input')
-                    component.setAttribute('type','text')
-                    component.value = agentProps[propName].default
-                    break
-                case 'boolean':                        
-                    component = document.createElement('bz-toggler')
-                    component.setAttribute('trueValue','1')
-                    component.setAttribute('falseValue','0')
-                    component.value = agentProps[propName].default
-                    fieldRow.append(component.el)                    
-                    break                    
-                case 'list':
-                    component = document.createElement('bz-select')
-                    component.fillOptions( agentProps[propName].choices.map(item => {
-                        return({ markup: `${item}`, value: item})
-                    })) 
-                    break
-                default:
-                    console.warn(`Unknown field type ${agentProps[propName].type}`)
-            }
-            fieldRow.append(component)
-            allFields.push(fieldRow)
-        }
+    fillAgentProperties(agentProps){ console.log('fillAgentProperties', agentProps)
         this.outputs.agentProperties.innerHTML=''
-        this.outputs.agentProperties.append(...allFields)
+        this.outputs.agentProperties.append(...this.fieldsFromJSON(agentProps, 'Internal properties'))
+        this.outputs.agentProperties.append(...this.fieldsFromJSON({
+            "position.x": {
+                label: "Position X",
+                type: "number",
+                default: "0"
+            },
+            "position.y": {
+                label: "Position Y",
+                type: "number",
+                default: "0"
+            },
+            "position.z": {
+                label: "Position Z",
+                type: "number",
+                default: "0"
+            },
+        }, 'Coordinates'))
+        this.outputs.agentProperties.append(...this.fieldsFromJSON({
+            "speed.x": {
+                label: "Speed X",
+                type: "number",
+                default: "0"
+            },
+            "speed.y": {
+                label: "Speed Y",
+                type: "number",
+                default: "0"
+            },
+            "speed.z": {
+                label: "Speed Z",
+                type: "number",
+                default: "0"
+            },
+        }, 'Speed vector'))
     }
 
 }