set value for bz-select & bz-toggler

app/thirdparty/buildoz/buildoz.js

@@ -39,10 +39,13 @@ class Buildoz extends HTMLElement {
 }
 
 class BZselect extends Buildoz {
+    #value
+
     constructor(){
         super()
         this.value = null
         this.open = false
+        this.value = null
         this.defaultAttrs = {
             label: 'Select...',
         }
@@ -69,6 +72,22 @@ class BZselect extends Buildoz {
     //     super.attributeChangedCallback(name, oldValue, newValue)
     // }
 
+    get value(){ return(this.#value) }
+    
+    set value(v) {
+        this.#value = v
+        if(this.options && this.options.length>0) {
+            const opt = Array.from(this.options).find(opt => opt.value==v)
+            if(v || (opt && opt.textContent)) this.button.textContent = opt.textContent
+            else this.button.textContent =  this.getBZAttribute('label')
+            this.dispatchEvent(new Event('change', {
+                bubbles: true,
+                composed: false,
+                cancelable: false
+            })) 
+        }
+    }
+
     toggle(){
         for(const opt of this.options){
             if(this.open) opt.classList.remove('open')
@@ -85,15 +104,7 @@ class BZselect extends Buildoz {
     onOption(value, silent=false){ 
         if(this.getAttribute('disabled') !== null) return
         this.value = value
-        if(!silent) this.toggle()
+        if(!silent) this.toggle()     
-        const opt = Array.from(this.options).find(opt => opt.value==value)
-        if(value || (opt && opt.textContent)) this.button.textContent = opt.textContent
-        else this.button.textContent =  this.getBZAttribute('label')
-        this.dispatchEvent(new Event('change', {
-            bubbles: true,
-            composed: false,
-            cancelable: false
-        }))        
     }
 
     addOption(value, markup){
@@ -105,8 +116,9 @@ class BZselect extends Buildoz {
         this.options = this.querySelectorAll('option')
     }
 
-    fillOptions(opts, erase = true){
+    fillOptions(opts, erase = true){ 
         if(erase){
+            //this.options = this.querySelectorAll('option')
             this.options.forEach(node => { node.remove() })
             this.options = this.querySelectorAll('option')
             this.onOption('', true) // unselect last
@@ -118,9 +130,10 @@ Buildoz.define('select', BZselect)
 
 
 class BZtoggler extends Buildoz {
+    #value
+
     constructor(){
         super()
-        this.value = null
         this.open = false
         this.defaultAttrs = {
             labelLeft:'',
@@ -170,7 +183,7 @@ class BZtoggler extends Buildoz {
         if(this.getBZAttribute('classOff')) this.switch.classList.remove(this.getBZAttribute('classOff'))
         if(this.getBZAttribute('classOn')) this.switch.classList.add(this.getBZAttribute('classOn'))
         this.thumb.classList.add('turned-on')
-        this.value = this.getBZAttribute('trueValue')
+        this.#value = this.getBZAttribute('trueValue')
         this.focus()
     }
 
@@ -178,14 +191,14 @@ class BZtoggler extends Buildoz {
         if(this.getBZAttribute('classOn')) this.switch.classList.remove(this.getBZAttribute('classOn'))
         if(this.getBZAttribute('classOff'))this.switch.classList.add(this.getBZAttribute('classOff'))
         this.thumb.classList.remove('turned-on')
-        this.value = this.getBZAttribute('falseValue')
+        this.#value = this.getBZAttribute('falseValue')
         this.focus()
     }
 
     toggle(event) {
         if(event) { event.preventDefault(); event.stopPropagation(); }
         if(this.getBZAttribute('disabled')) return
-        if(this.value == this.getBZAttribute('trueValue')) this.turnOff()
+        if(this.#value == this.getBZAttribute('trueValue')) this.turnOff()
         else this.turnOn()
         this.dispatchEvent(new Event('change', {
             bubbles: true,
@@ -193,5 +206,20 @@ class BZtoggler extends Buildoz {
             cancelable: false
         })) 
     }
+
+    get value(){ return(this.#value) }
+    
+    set value(v) {
+        this.#value = v
+        if(this.defaultAttrs){
+            if(this.#value == this.getBZAttribute('trueValue')) this.turnOn()
+            else this.turnOff()
+            this.dispatchEvent(new Event('change', {
+                bubbles: true,
+                composed: false,
+                cancelable: false
+            }))         
+        } 
+    }    
 }
 Buildoz.define('toggler', BZtoggler)

app/views/editors/KeyframeView.html

@@ -18,14 +18,12 @@
          <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>
         <section>
             Arena
-            <bz-toggler labelLeft="gauche" data-output="testToggler"></bz-toggler>
-            <bz-toggler labelRight="droite"></bz-toggler>
-            <bz-toggler labelLeft="gauche" labelRight="droite"></bz-toggler>
         </section>
     </article>
     <article eiccard="">

app/views/editors/KeyframeView.js

@@ -40,11 +40,6 @@ class KeyframeView extends WindozDomContent {
         this.agentPreview.startRendering()
         this.agentPreview.animation = true
 
-
-        this.outputs.testToggler.addEventListener('change',(e)=> {
-            console.log(e.target.value, e)
-
-        })
     }
 
 
@@ -71,18 +66,21 @@ class KeyframeView extends WindozDomContent {
                 case 'string': 
                     component = document.createElement('input')
                     component.setAttribute('type','text')
+                    component.value = agentProps[propName].default
                     break
                 case 'boolean':                        
-                    component = new InputToggler({
+                    component = document.createElement('bz-toggler')
-                        value: agentProps[propName].default, 
+                    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 => {
+                    console.log('choices', agentProps[propName].choices)
-                        return({ markup: `${item}`, value: item})
+                    // component.fillOptions( agentProps[propName].choices.map(item => {
-                    })) 
+                    //     return({ markup: `${item}`, value: item})
+                    // })) 
                     break
                 default:
                     console.warn(`Unknown field type ${agentProps[propName].type}`)