bzselect now clean + KVview adapted

app/thirdparty/buildoz/buildoz.js

@@ -29,42 +29,41 @@ class Buildoz extends HTMLElement {
 
     }  
 
-
+    attributeChangedCallback(name, oldValue, newValue) {
+        this.attrs[name] = newValue
+    }
 }
 
 class BZselect extends Buildoz {
     constructor(){
         super()
-
         this.value = null
         this.open = false
-        //defaults, can be changed by corresponding attributes
-        this.attrs = {
+        this.defaultAttrs = {
             label: 'Select...',
         }
     }
 
     connectedCallback() {
         super.connectedCallback()
-
         this.button = document.createElement('button')
-        this.button.textContent =  this.attrs.label
+        this.button.textContent =  this.getAttribute('label') || this.defaultAttrs.label 
         this.prepend(this.button)
         this.button.addEventListener('click', this.toggle.bind(this))
         this.options = this.querySelectorAll('option')
-        for(const opt of this.options){
-            opt.addEventListener('click',(evt) => { this.onOption(evt.target.value) })
+        for(const opt of this.options){ 
+            opt.addEventListener('click', this.onClick.bind(this))
+            if(opt.getAttribute('selected') !== null) this.onOption(opt.value, true)
         }
     }
     
-    static get observedAttributes(){
-        return([...super.observedAttributes, 'label'])
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        this.attrs[name] = newValue
-        // on the fly changes here
-    }
+    // static get observedAttributes(){ // Only if you want actions on attr change
+    //     return([...super.observedAttributes, 'myattr'])
+    // }
+    //
+    // attributeChangedCallback(name, oldValue, newValue) {
+    //     super.attributeChangedCallback(name, oldValue, newValue)
+    // }
 
     toggle(){
         for(const opt of this.options){
@@ -74,26 +73,40 @@ class BZselect extends Buildoz {
         this.open = !this.open
     }
 
-    onOption(value){
-        this.value =value
-        this.toggle()
-        const opt = Array.from(this.options).find(opt => opt.value==value)
-        this.button.textContent = opt.textContent
+    onClick(evt){
+        const opt = evt.target.closest('option')
+        if(opt && opt.value) this.onOption(opt.value) 
     }
 
-    fill(opts){
-        this.el.innerHTML =''
-        if(!Array.isArray(opts)) opts = [opts]
-        const ul = Object.assign(document.createElement('ul'), 
-        { className: `bz-selector ${this.config.ulClass ? this.config.ulClass :''}`,
-        })
-        for(const opt of opts){
-            const li = document.createElement('li')
-            li.innerHTML = `${opt.markup}`
-            li.setAttribute('data-value', opt.value)
-            ul.append(li)
-        }
-        this.el.append(ul)
+    onOption(value, silent=false){ 
+        this.value = value
+        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.getAttribute('label') || this.defaultAttrs.label 
+        this.dispatchEvent(new Event('change', {
+            bubbles: true,
+            composed: false,
+            cancelable: false
+        }))        
+    }
+
+    addOption(value, markup){
+        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')
+    }
+
+    fillOptions(opts, erase = true){
+        if(erase){
+            this.options.forEach(node => { node.remove() })
+            this.options = this.querySelectorAll('option')
+            this.onOption('', true) // unselect last
+        } 
+        for(const opt of opts) this.addOption(opt.value, opt.markup)
     }
 }
 

app/views/editors/KeyframeView.html

@@ -17,13 +17,7 @@
     <article eiccard class="agent-preview">
          <header><canvas data-output="agentSampleCanvas"></canvas></header>
         <section>
-            <bz-select label="Agent type..." data-output="agentsSelector">
-                <option value="val1">First value</option>
-                <option value="val2">Second value</option>
-                <option value="val3">Third value</option>
-                <option value="val4">Fourth value</option>
-                <option value="val5">Fifth value</option>
-            </bz-select>
+            <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
         </section>
     </article>
     <article eiccard>

app/views/editors/KeyframeView.js

@@ -21,28 +21,21 @@ class KeyframeView extends WindozDomContent {
         this.setupTriggers(components)        
         this.setupRefs(components)
 
-
         this.agentDefs = await this.models.agents.getSprites('Basic 3D')
-        // for(const agentType in this.agentDefs){
-        //     const opt = new Option(agentType, agentType)
-        //     this.outputs.agentsSelector.add(opt)
-        // }
-        // this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))
-
-        // const x = new tinySelector('[data-output="agentsSelector"]',{
-        //     selectorOptions: Object.keys(this.agentDefs).map(aname => ({ markup: aname, value: aname}))
-        // })
+        this.outputs.agentsSelector.fillOptions( Object.keys(this.agentDefs).map(aname => ({ markup: `<i>${aname}</i>`, value: aname})) )
+        this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))
         
-        // this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentDefs)
-        // this.onChangeAgent()
-        // this.agentPreview.startRendering()
-        // this.agentPreview.animation = true
+        this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentDefs)
+        this.onChangeAgent()
+        this.agentPreview.startRendering()
+        this.agentPreview.animation = true
     }
 
 
 
     onChangeAgent(event){
-        this.agentPreview.setAgent(this.outputs.agentsSelector.value)
+        console.log('onChangeAgent',this.outputs.agentsSelector.value)
+        if(this.outputs.agentsSelector.value) this.agentPreview.setAgent(this.outputs.agentsSelector.value)
     }
 
 }

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

@@ -61,11 +61,12 @@ export class AgentPreview{
         return(this._animation)
     }
 
-    _animate = () => {  // to avoid havind to bind(this) in requestAnimationFrame, because one bound fn per frame = continuous GC load
-        if(!this.animation) return
+    _animate = () => {  // to avoid having to bind(this) in requestAnimationFrame, because one bound fn per frame = continuous GC load
         requestAnimationFrame(this._animate)
-        this.currentAgentObj.rotation.x += 0.005
-        this.currentAgentObj.rotation.y += 0.01
+        if(this.currentAgentObj && this.animation){
+            this.currentAgentObj.rotation.x += 0.005
+            this.currentAgentObj.rotation.y += 0.01
+        }
         this.renderer.render(this.scene, this.camera)
     }
 }