styling, add&del buttons...

app/views/editors/KeyframeView.html

@@ -11,6 +11,20 @@
     .kf-editor > article, .kf-editor > article header{ border-color: #473; }
     .kf-editor article.agent-preview header { padding:0; }
     .kf-editor article.agent-preview canvas{ width:100%; aspect-ratio: 1 / 1;} 
+    .kf-editor article.agent-preview section{
+        display: grid;
+        grid-template-rows: auto 2em;
+        height: 100%;
+    }    
+    .kf-editor article.agent-preview section div.actions button{
+        color: #DDD;
+        padding: 0 0 0 0;
+        min-height: 0.5em;
+    }
+    .kf-editor button[data-trigger="onAddAgent"] { background-color: #473; }
+    .kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
+    .kf-editor section[data-output="agentProperties"] label{ font-size: 0.9em; }
+    .kf-editor section[data-output="agentProperties"] div.cols-2 { grid-template-columns: 4fr 3fr; }
 
 </style>
 <div class="kf-editor cols-3">
@@ -18,6 +32,10 @@
          <header><canvas data-output="agentSampleCanvas"></canvas></header>
         <section>
             <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
+            <div class="actions cols-2">
+                <button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Add</button>
+                <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove</button>
+            </div>
         </section>
     </article>
     <article eiccard>

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'))
     }
 
 }