Load KF works

app/views/editors/KeyframeView.html

@@ -33,7 +33,7 @@
         text-align: center; 
         margin-top: .3em;
     }
-    .kf-editor article.left-pane > section > bz-select{ margin: 0 0.5em 1em 0.5em; }
+    .kf-editor article.left-pane > section > bz-select{ margin: 1em 0.5em 1em 0.5em; }
     .kf-editor article.kfArena section{
         padding: 0;
         height: 100%;
@@ -62,7 +62,7 @@
         color: #DDD;
         padding: 0 0 0 0;
     }
-    .kf-editor button[data-trigger="onAddAgent"] { background-color: #473; }
+    .kf-editor button[data-trigger="onAddAgent"] { background-color: #6B5; }
     .kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
     .kf-editor button[data-trigger="onSaveKF"] { background-color: #367; }
     .kf-editor button[data-trigger="onResetKF"] { background-color: #A00; }    
@@ -76,16 +76,21 @@
         margin-top: 1em;
         font-size: .8em;
     }
+    .kf-editor bz-select[data-output="keyframesSelector"]{
+        margin-top:1em;
+    }
 </style>
 <div class="kf-editor cols-3">
     <article eiccard class="left-pane">
         <section class="selector">
             <header><h1>Agent type browser</h1></header>
             <canvas data-output="agentSampleCanvas"></canvas>
-            <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
+            <bz-select label="Select agent type..." data-output="agentsSelector"></bz-select>
         </section>
         <section class="browser">
             <header><h1>Keyframes browser</h1></header>
+            <!-- Temporary... -->
+            <bz-select label="Existing keyframes..." data-output="keyframesSelector"></bz-select>
         </section>
     </article>
     <article eiccard class="kfArena">

app/views/editors/KeyframeView.js

@@ -44,6 +44,16 @@ class KeyframeView extends WindozDomContent {
         this.agentPreview.startRendering()
         this.agentPreview.animation = true
 
+        this.models.keyframes.list('', null).then(data => data.payload).then(kflist => {
+            this.outputs.keyframesSelector.fillOptions(kflist.map(item => {
+                return({
+                    markup: item.ekf_name,
+                    value: item.ekf_uuid
+                })
+            }))
+        })
+        this.outputs.keyframesSelector.addEventListener('change',this.onChangeKeyframe.bind(this))
+
         this.kfArena = new app.LoadedModules.kfArena(this.outputs.kfArenaCanvas, this.agentSprites)
         this.kfArena.onclickAgent = this.onclickAgent.bind(this)
         this.kfArena.startRendering()
@@ -70,6 +80,17 @@ class KeyframeView extends WindozDomContent {
         }
     }
 
+    async onChangeKeyframe(event){
+        if(!this.outputs.keyframesSelector.value) return
+        let kfData = await this.models.keyframes.getKeyframe(this.outputs.keyframesSelector.value).then(data => data.payload)
+        this.currentKeyframe = {
+            kfId: kfData.info.ekf_uuid,
+            kfName: kfData.info.ekf_name,
+            prevKfId: kfData.info.ekf_prev_uuid,
+        }
+        this.kfArena.reloadAgents(kfData.agents)
+    }
+
     onclickAgent(obj3D){
         const aid = obj3D.name
         this.kfArena.highlighted3DObjects.length = 0 //truncate but keep the ref !
@@ -77,11 +98,13 @@ class KeyframeView extends WindozDomContent {
             this.currentlySelectedAid = null
         } else { // Select
             this.currentlySelectedAid = aid
-            this.kfArena.highlighted3DObjects.push(obj3D)
-            this.fillAgentProperties(aid, this.kfArena.agents[aid].props, this.kfArena.agents[aid].values)
-            this.notUserChange = true
-            this.outputs.agentsSelector.value = this.kfArena.agents[aid].type
-            this.notUserChange = false
+            if(this.kfArena.agents[aid]) {
+                this.kfArena.highlighted3DObjects.push(obj3D)
+                this.fillAgentProperties(aid, this.kfArena.agents[aid].props, this.kfArena.agents[aid].values)
+                this.notUserChange = true
+                this.outputs.agentsSelector.value = this.kfArena.agents[aid].type
+                this.notUserChange = false
+            }
         }
         this.updateKfButtons()
     }
@@ -100,11 +123,18 @@ class KeyframeView extends WindozDomContent {
         else { this.outputs.btnSaveKF.disabled = true  }
     }
 
+    onPropsChanged(evt, comp){
+        console.log('onPropsChanged', comp, evt)
+        if(this.currentlySelectedAid && this.kfArena.agents[this.currentlySelectedAid]){
+
+        }
+    }
+
     fillAgentProperties(aid, agentProps, agentValues = {}){ 
         this.outputs.agentProperties.innerHTML = `
             <div data-output="agentId">ID: ${aid}</div>
         `
-        this.outputs.agentProperties.append(...this.fieldsFromJSON(agentProps, agentValues, 'Internal properties'))
+        this.outputs.agentProperties.append(...this.fieldsFromJSON(agentProps, agentValues, 'Internal properties', this.onPropsChanged.bind(this)))
         this.outputs.agentProperties.append(...this.fieldsFromJSON({
             "position.x": {
                 label: "Position X",
@@ -121,7 +151,7 @@ class KeyframeView extends WindozDomContent {
                 type: "number",
                 default: "0"
             },
-        }, agentValues, 'Coordinates'))
+        }, agentValues, 'Coordinates', this.onPropsChanged.bind(this)))
         this.outputs.agentProperties.append(...this.fieldsFromJSON({
             "speed.x": {
                 label: "Speed X",
@@ -138,21 +168,26 @@ class KeyframeView extends WindozDomContent {
                 type: "number",
                 default: "0"
             },
-        }, agentValues, 'Speed vector'))
+        }, agentValues, 'Speed vector', this.onPropsChanged.bind(this)))
         this.outputs.btnAddAgent.disabled = false
         this.setupRefs()
     }
 
     async onSaveKF(evt){
+        let result = { success: true } 
         if(!this.currentKeyframe.kfId){ // Create first (and get new kfId)
             this.currentKeyframe.kfName = this.outputs.kfName.value
-            const result = await this.models.keyframes.create(this.currentKeyframe)
+            result = await this.models.keyframes.create(this.currentKeyframe)
             this.currentKeyframe.kfId = result.payload.kfId
         } else if(this.currentKeyframe.kfName != this.outputs.kfName.value){ //rename 
             this.currentKeyframe.kfName = this.outputs.kfName.value
-            const result = await this.models.keyframes.rename(this.currentKeyframe)
+            result = await this.models.keyframes.rename(this.currentKeyframe)
+            console.log(result)
         } 
-        await this.models.keyframes.save(this.currentKeyframe.kfId, this.kfArena.agents)
+
+        if(result.success){
+            await this.models.keyframes.save(this.currentKeyframe.kfId, this.kfArena.agents)
+        }
     }
 
 }

app/views/editors/modules/kfArena.module.js

@@ -124,9 +124,12 @@ export class kfArena{
     }
     
     
-    addAgent(typeId, aid, properties, values){ 
+    addAgent(typeId, aid, properties, values){  console.log('==addAgent==>',typeId, aid, properties, values)
         const agentSprite = this.agentSprites.find(item => item.atp_id==typeId)
-        if(!agentSprite) return
+        if(!agentSprite) {
+            console.warn(`No sprite for type: ${typeId}`)
+            return
+        }
         const agentObj = this.agentFromJSON(aid, agentSprite.asp_3d)
 
         agentObj.position.set(values.position.x, values.position.z, values.position.y )
@@ -146,6 +149,16 @@ export class kfArena{
         if(aid in this.agents) delete(this.agents[aid])
     }
     
+    reloadAgents(agents){
+        for(const aid in this.agents){
+            this.removeAgent(aid)
+        }
+        console.log('====>', agents)
+        for(const agent of agents){
+            this.addAgent(agent.ekfs_atp_id, agent.aid, agent.props, {...agent.gps_values, ...agent.store_values})
+        }
+    }
+
     // getAllAgents(){
     //     const agents = []
     //     scene.traverse(o => o.name && names.push(o.name))