started sims section & axes&grid settings for KFEditor

app/views/editors/KeyframeView.js

@@ -68,6 +68,15 @@ class KeyframeView extends WindozDomContent {
         this.kfArena = new app.LoadedModules.kfArena(this.outputs.kfArenaCanvas, this.agentSprites)
         this.kfArena.onclickAgent = this.onclickAgent.bind(this)
         this.kfArena.startRendering()
+
+        this.output('settingsMenu', app.Assets.Store.html.spaceViewSetting)
+        this.outputs.settingsMenu.querySelectorAll('input[type="toggler"]').forEach(el => {
+            const tog = new InputToggler(el)
+            if(this.kfArena[tog._el.name]?.layers){
+                tog.value = this.kfArena.camera.layers.test(this.kfArena[tog._el.name].layers) ? 'yes' : 'no'
+            }
+            tog.onToggle = this.settingsToggle.bind(this)
+        })
        
         this.outputs.btnAddAgent.disabled = true
         this.outputs.btnRemoveAgent.disabled = true
@@ -77,6 +86,17 @@ class KeyframeView extends WindozDomContent {
         this.currentlySelectedAid = null
     }
 
+    settingsToggle(value, object){
+        if(['grid','axes'].includes(object._el.name)){
+            const layerId = {'grid':1,'axes':2}[object._el.name]
+            if(value=='yes'){
+                this.kfArena.camera.layers.enable(layerId)
+            } else {
+                this.kfArena.camera.layers.disable(layerId)
+            }
+        }
+    }
+
     deselectSceneAgent(){
         if(!this.currentlySelectedAid) return
         const obj3D = this.kfArena.scene.getObjectByName(this.currentlySelectedAid)

app/views/sims/CreateSimView.html

@@ -0,0 +1,25 @@
+<style>
+    .create-sim section {
+        padding: 1em;
+    }
+    .create-sim bz-select[data-output="keyframesSelector"] {
+        margin-top: 1em;
+    }
+    .create-sim .cols-2 { align-items: baseline; }
+</style>
+<article eiccard class="create-sim">
+    <header>
+        <h1>Create a simulation</h1>
+    </header>
+    <section>
+        <div class="cols-2">
+            <label>Simulation first keyframe:</label>
+            <bz-select label="Existing keyframes..." data-output="keyframesSelector"></bz-select>
+        </div>
+        <div class="cols-2">
+            <label>Simulation Name:</label>
+            <input type="text" data-output="simName" placeholder="(min 5 chars)"/>
+        </div>
+        <button eicbutton rounded data-output="btnCreateSim" data-trigger="onCreateSim">Create Simulation</button>
+    </section>
+</article>

app/views/sims/CreateSimView.js

@@ -0,0 +1,30 @@
+class CreateSimView extends WindozDomContent {
+
+    constructor() {
+        super()
+        Object.assign(this, app.helpers.activeAttributes, app.helpers.basicDialogs)
+    }
+
+    async DOMContentLoaded(options) {
+        this.models = options.models
+        const components = ui.eicfy(this.el)
+        this.setupRefs(components)
+
+        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))
+    }
+
+    onChangeKeyframe(event) {
+        if(!this.outputs.keyframesSelector.value) return
+        // TODO: use selected keyframe for simulation creation
+    }
+}
+
+app.registerClass('CreateSimView', CreateSimView)

app/views/sims/ManageSimView.html

@@ -0,0 +1,8 @@
+<article eiccard class="manage-sim">
+    <header>
+        <h1>Play / Pause a simulation</h1>
+    </header>
+    <section>
+        <p>TODO: simulation play / pause controls</p>
+    </section>
+</article>

app/views/sims/ManageSimView.js

@@ -0,0 +1,15 @@
+class ManageSimView extends WindozDomContent {
+
+    constructor() {
+        super()
+        Object.assign(this, app.helpers.basicDialogs)
+    }
+
+    async DOMContentLoaded(options) {
+        this.models = options.models
+        ui.eicfy(this.el)
+        // TODO: implement
+    }
+}
+
+app.registerClass('ManageSimView', ManageSimView)