starting KF Editor

app/assets/json/global/app-menu-map.json

@@ -66,19 +66,19 @@
             {
                 "label": "Keyframe editor",
                 "icon": "icon-camera1",
-                "route": "/records/editor",
+                "route": "/editors/keyframe",
                 "access": ["*"]
             },
             {
                 "label": "Sprites editor",
                 "icon": "icon-spaceinvaders",
-                "route": "/records/stats",
+                "route": "/editors/sprites",
                 "access": ["*"]
             },
             {
-                "label": "Event-map editor",
+                "label": "Event-maps editor",
                 "icon": "icon-link",
-                "route": "/records/editor",
+                "route": "/editors/eventmaps",
                 "access": ["*"]
             }
         ]

app/config/baseRoutes.json

@@ -16,6 +16,11 @@
         "role": [ "*" ],
         "controller" : "/live/DashboardsController"
     },
+    {
+        "url": "/editors",
+        "role": [ "*" ],
+        "controller" : "/editors/EditorsController"
+    },    
     {
         "url": "/system",
         "role": "*",

app/controllers/editors/EditorsController.js

@@ -0,0 +1,81 @@
+class EditorsController extends EICController {
+
+    constructor(params) {
+        super(params)
+        this.arenaConfig = app.Assets.Store.json.arenaConfig
+        this.agentDefs = app.Assets.Store.json.agentDefs
+        this.eventsMapping = app.Assets.Store.json.eventsMapping
+    }
+
+
+    async keyframe() {
+        const models = {
+            agents : new AgentsModel('/agents')
+        }
+
+        // const ttb = new app.LoadedModules.Threetobus({
+        //     eventsMapping: this.eventsMapping,
+        //     sceneSize: this.arenaConfig.arenaSize,
+        // })
+        // ttb.initScene({
+        //     axes: true,
+        //     grid: true,
+        // })
+
+        // this.agentDefs = await models.agents.getSprites('Basic 3D')
+        // const a1 = ttb.agentFromJSON('agent42', this.agentDefs.nocode1)
+        // const a2 = ttb.agentFromJSON('agent42', this.agentDefs.nocode2)
+        // ttb.scene.add(a1)
+        // ttb.scene.add(a2)
+
+        //TODO: eventsMapping: address child by suffix in assignations
+
+
+        this.loadWindow(
+            'editors/SpaceView', 
+            {
+                title: '<i class="icon-edit"></i> Keyframe edito 3D view', 
+                static: true,
+                expanded: false,
+                withSettings: true,
+                windowStyle: this._boxFromPrefs('live.spaceview.3D', { x: 50, y:100, w:600, h:400 }),
+            },
+            {
+                models: models,
+                agentDefs: this.agentDefs,
+                rendererId:'3drenderer',
+                mode: '3D',
+                ttb: ttb,
+            }
+        ) 
+
+
+        this.loadWindow(
+            'editors/SpaceView', 
+            {
+                title: '<i class="icon-edit"></i> Keyframe editor 2D View', 
+                static: true,
+                expanded: false,
+                withSettings: true,
+                windowStyle: this._boxFromPrefs('live.spaceview.2D', { x: 500, y:100, w:600, h:400 }),
+            },
+            {
+                models: models,
+                agentDefs: this.agentDefs,
+                rendererId:'2drenderer',
+                mode: '2D',
+                ttb: ttb,
+            }
+        )         
+    }
+    
+    async sprites() {
+
+    }
+
+    async eventmaps(){
+
+    }
+}
+
+app.registerClass('EditorsController', EditorsController);

app/controllers/editors/EditorsController.json

@@ -0,0 +1,46 @@
+{
+    "routes": [
+        {
+            "url": "/keyframe",
+            "role": [ "*" ],
+            "controller" : "/editors/EditorsController",
+            "method": "keyframe"       
+        },
+        {
+            "url": "/sprites",
+            "role": [ "*" ],
+            "controller" : "/editors/EditorsController",
+            "method": "sprites"       
+        },
+        {
+            "url": "/eventmaps",
+            "role": [ "*" ],
+            "controller" : "/editors/EditorsController",
+            "method": "eventmaps"       
+        }                
+    ],
+    "models": [
+        "AgentsModel"
+    ],
+    "views": [
+        "editors/KeyframeView"
+    ],
+    "controllerDependencies":  [
+        "/helpers/basicDialogs", 
+        "/helpers/validators",
+        "/helpers/activeAttributes",        
+        "/thirdparty/Threetobus/three.module",
+        "/thirdparty/Threetobus/OrbitControls.module",
+        "/thirdparty/Threetobus/tween.module",
+        "/thirdparty/Threetobus/threetobus.module"
+    ],
+    "assets": {
+        "styles": [ 
+        ],
+        "html": [
+            { "id":"sapceViewSetting", "name": "sapceViewSetting.html"}
+        ],
+        "json": [         
+        ] 
+    }
+}

app/controllers/live/DashboardsController.js

@@ -39,7 +39,7 @@ class DashboardsController extends EICController {
         this.loadWindow(
             'visualisers/SpaceView', 
             {
-                title: '3D view', 
+                title: '<i class="icon-bolt"></i> Live arena 3D view', 
                 static: true,
                 expanded: false,
                 withSettings: true,
@@ -58,7 +58,7 @@ class DashboardsController extends EICController {
         this.loadWindow(
             'visualisers/SpaceView', 
             {
-                title: '2D View', 
+                title: '<i class="icon-bolt"></i> Live arena 2D View', 
                 static: true,
                 expanded: false,
                 withSettings: true,
@@ -74,25 +74,7 @@ class DashboardsController extends EICController {
         )         
     }
 
-    _boxFromPrefs(viewName, defaults){
+
-        function getPref(path) {
-            return path.split('.').reduce(
-                (acc, key) => acc?.[key],
-                app.User.preferences.windows
-            )
-        }
-        const box = getPref(viewName)
-        let left = box.x ? box.x : defaults.x
-        let top = box.y ? box.y : defaults.y
-        let width = box.w ? box.w : defaults.w
-        let height = box.x ? box.h : defaults.h
-        return({
-                    width: `${width}px`,
-                    height: `${height}px`,
-                    left: `${left}px`,
-                    top: `${top}px`,
-        })
-    }
 }
 
 app.registerClass('DashboardsController', DashboardsController);

app/views/editors/KeyframeView.html

@@ -0,0 +1,8 @@
+<style>
+    canvas[data-output="kfeCanvas"]{
+        width: 100%;
+        height: 100%;
+    }
+</style>
+
+<canvas data-output="kfeCanvas"></canvas>

app/views/editors/KeyframeView.js

@@ -0,0 +1,50 @@
+class KeyframeView extends EICDomContent {
+
+    constructor() {
+        super()
+        Object.assign(this, app.helpers.activeAttributes)
+        //this.tileMarkup = app.Assets.Store.html['/app/assets/html/mailing/tile.html']
+    }
+    
+    DOMContentFocused(options) { 
+        if(this.wasBlured){ // Avoid 2nd refesh on DomContentLoaded
+            //this.refreshyoustuff() 
+        }
+        this.wasBlured = false
+    }
+
+    DOMContentBlured(options) { this.wasBlured = true }
+
+    DOMContentLoaded(options) {    
+        this.windowPrefsId = `editors.keyframeview.${options.mode}`
+        for(let model in options.models) this[model] = options.models[model]
+        this.kfe = options.kfe
+        const components = ui.eicfy(this.el)       
+        this.setupTriggers(components)        
+        this.setupRefs(components)
+        this.renderingEngine = this.kfe.startRendering(this.outputs.kfeCanvas, options.mode)
+        this.output('settingsMenu',app.Assets.Store.html.sapceViewSetting)
+        this.outputs.settingsMenu.querySelectorAll('input[type="toggler"]').forEach(el => {  
+                const tog = new InputToggler(el)
+                if(this.kfe[tog._el.name].layers){
+                    tog.value = this.renderingEngine.camera.layers.test(this.kfe[tog._el.name].layers) ? 'yes' : 'no'
+                }
+                tog.onToggle = this.settingsToggle.bind(this)
+        })
+    }
+
+    settingsToggle(value, object){
+        if(['grid','axes'].includes(object._el.name)){
+            const layerId = {'grid':1,'axes':2}[object._el.name]
+            if(value=='yes'){
+                this.renderingEngine.camera.layers.enable(layerId)
+            } else {
+                this.renderingEngine.camera.layers.disable(layerId)
+            }
+        }
+        //TODO save & restore in prefs
+    }
+    
+}
+
+app.registerClass('KeyframeView', KeyframeView)

app/views/visualisers/SpaceView.html

@@ -1,9 +1,4 @@
 <style>
-    article.mainDashboard{ height:100%; }
-    article.mainDashboard>section:first-of-type{ 
-        height:100%; 
-        background-color: #333;
-    }
     canvas[data-output="ttbCanvas"]{
         width: 100%;
         height: 100%;