fixed dbl-fillOptions in bz-select

app/assets/styles/app.css

@@ -333,6 +333,15 @@ menu[eicmenu] [menuitem]  i[class^="icon-"] {
 }
 article[eiccard] > header h1{ text-align: center; }
 
+input{ 
+    width: 100%;
+    border-radius: 1em;
+    padding-left: 1em;
+    box-sizing: border-box;
+    height: 2em;
+    background-color: #6B5;
+    border: none;
+}
 
 /* Customizations to buildoz*/
 bz-select > button{
@@ -349,4 +358,5 @@ bz-select option:hover{
 }
 
 bz-toggler div.toggle-switch span.toggle-bar { background-color: #473; }
-bz-toggler div.toggle-switch span.toggle-thumb { background-color:#9D8; }
+bz-toggler div.toggle-switch span.toggle-thumb { background-color:#9D8; }
+

app/thirdparty/buildoz/buildoz.js

@@ -40,6 +40,7 @@ class Buildoz extends HTMLElement {
 
 class BZselect extends Buildoz {
     #value
+    #fillFromMarkup = true
 
     constructor(){
         super()
@@ -58,9 +59,12 @@ class BZselect extends Buildoz {
         this.prepend(this.button)
         this.button.addEventListener('click', this.toggle.bind(this))
         this.options = this.querySelectorAll('option')
-        for(const opt of this.options){ 
+        if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !!
-            opt.addEventListener('click', this.onClick.bind(this))
+            for(const opt of this.options){ 
-            if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
+                opt.addEventListener('click', this.onClick.bind(this))
+                if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
+            }
+            this.#fillFromMarkup = false
         }
     }
     
@@ -88,7 +92,7 @@ class BZselect extends Buildoz {
         }
     }
 
-    toggle(){
+    toggle(){ 
         for(const opt of this.options){
             if(this.open) opt.classList.remove('open')
             else opt.classList.add('open')
@@ -96,7 +100,7 @@ class BZselect extends Buildoz {
         this.open = !this.open
     }
 
-    onClick(evt){
+    onClick(evt){ 
         const opt = evt.target.closest('option')
         if(opt && opt.value) this.onOption(opt.value) 
     }
@@ -108,17 +112,20 @@ class BZselect extends Buildoz {
     }
 
     addOption(value, markup){
+        // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM
         const opt = document.createElement('option')
         opt.setAttribute('value', value)
         opt.innerHTML = markup
         opt.addEventListener('click',this.onClick.bind(this))
         this.append(opt)
         this.options = this.querySelectorAll('option')
+        this.#fillFromMarkup = false
     }
 
     fillOptions(opts, erase = true){ 
+        // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM
         if(erase){
-            //this.options = this.querySelectorAll('option')
+            this.options = this.querySelectorAll('option') 
             this.options.forEach(node => { node.remove() })
             this.options = this.querySelectorAll('option')
             this.onOption('', true) // unselect last

app/views/editors/KeyframeView.html

@@ -18,7 +18,6 @@
          <header><canvas data-output="agentSampleCanvas"></canvas></header>
         <section>
             <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
-            <bz-toggler></bz-toggler>
         </section>
     </article>
     <article eiccard>
@@ -27,8 +26,8 @@
         </section>
     </article>
     <article eiccard="">
-         <header><h1>Agent properties</h1></header>
+        <header><h1>Agent properties</h1></header>
-        <section>Props form</section>
+        <section data-output="agentProperties"></section>
     </article>
 
 </div>    

app/views/editors/KeyframeView.js

@@ -52,6 +52,7 @@ class KeyframeView extends WindozDomContent {
     }
 
     fillAgentProperties(agentProps){
+        let allFields = []
         for(const propName in agentProps){
             const fieldRow = ui.create(`<div class="cols-2"><label>${propName}</label></div>`)
             let component
@@ -77,16 +78,18 @@ class KeyframeView extends WindozDomContent {
                     break                    
                 case 'list':
                     component = document.createElement('bz-select')
-                    console.log('choices', agentProps[propName].choices)
+                    component.fillOptions( agentProps[propName].choices.map(item => {
-                    // component.fillOptions( agentProps[propName].choices.map(item => {
+                        return({ markup: `${item}`, value: item})
-                    //     return({ markup: `${item}`, value: item})
+                    })) 
-                    // })) 
                     break
                 default:
                     console.warn(`Unknown field type ${agentProps[propName].type}`)
             }
             fieldRow.append(component)
+            allFields.push(fieldRow)
         }
+        this.outputs.agentProperties.innerHTML=''
+        this.outputs.agentProperties.append(...allFields)
     }
 
 }