tween on positions

app/assets/json/threetobus/eventsMapping.json

@@ -1,51 +1,54 @@
 [
-  {
+    {
-    "chan": "gps:agents",
+        "chan": "gps:agents",
-    "events": [
+        "events": [
-      {
+            {
-        "eventName": "moving",
+                "eventName": "moving",
-        "mappings": [
+                "mappings": [
-          {
+                    {
-            "id": "aid",
+                        "id": "aid",
-            "assign": {
+                        "assign": {
-              "position.x": "coords.x",
+                            "position.x": "coords.x",
-              "position.z": "coords.y"
+                            "position.z": "coords.y",
+                            "position.y": "coords.z"
+                        },
+                        "tween": true,
+                        "tweenDelay": 1000
+                    }
+                ]
             },
-            "animate": true
+            {
-          }
+                "eventName": "rotating",
-        ]
+                "mappings": [
-      },
+                    {
-      {
+                        "id": "aid",
-        "eventName": "rotating",
+                        "assign": {
-        "mappings": [
+                            "r": "rotangle"
-          {
+                        },
-            "id": "aid",
+                        "tween": true,
-            "assign": {
+                        "tweenDelay": 500
-              "r": "rotangle"
+                    }
-            },
+                ]
-            "animate": true
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "chan": "agent:*",
-    "events": [
-      {
-        "eventName": "aging",
-        "mappings": [
-          {
-            "id": "aid",
-            "assign": {
-              "fill": {
-                "arguments": ["age"],
-                "transformer": "rgb(${Math.round(255 * age / 10)},0,${Math.round(255 * (1 - age / 10))})"
-              }
             }
-          }
         ]
-      }
+    },
-    ]
+    {
-  }
+        "chan": "agent:*",
+        "events": [
+            {
+                "eventName": "aging",
+                "mappings": [
+                    {
+                        "id": "aid",
+                        "assign": {
+                            "fill": {
+                                "arguments": ["age"],
+                                "transformer": "rgb(${Math.round(255 * age / 10)},0,${Math.round(255 * (1 - age / 10))})"
+                            }
+                        }
+                    }
+                ]
+            }
+        ]
+    }
 ]

app/controllers/dashboard/DashboardsController.js

@@ -22,11 +22,10 @@ class DashboardsController extends EICController {
             grid: true,
         })
 
-        console.log('===CTRL molecule1==>',  this.agentDefs.molecule1)
         const m1 = ttb.buildFromJSON('agent42', this.agentDefs.molecule1)
         ttb.scene.add(m1)
         // setTimeout(() => {
-        //     ttb.smoothRelMove({
+        //     ttb.smoothMove({
         //         object: m1, 
         //         dX: 5, 
         //         dY:0, 
@@ -47,6 +46,7 @@ class DashboardsController extends EICController {
         //   }
         // })
 
+        //TODO: eventsMapping: address child by suffix in assignations
 
         this.loadWindow(
             'visualisers/SpaceView', 
@@ -54,6 +54,7 @@ class DashboardsController extends EICController {
                 title: '3D view', 
                 static: true,
                 expanded: false,
+                withSettings: true,
                 windowStyle:{
                     width: '800px',
                     height: '600px',
@@ -75,6 +76,7 @@ class DashboardsController extends EICController {
                 title: '2D View', 
                 static: true,
                 expanded: false,
+                withSettings: true,
                 windowStyle:{
                     width: '600px',
                     height: '450px',

app/libs/EIC/EICController.js

@@ -95,6 +95,7 @@ class EICController extends Controller {
             <header class="cols-2 right">
                 <h1>${options.title || ''}</h1>
                 <div class="controls">
+                    ${(options.withSettings) ? '<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-cog settings" title="settings"></button>' :''}
                     <button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-copy shrink" title="shrink"></button>
                     <button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-square-o expand" title="expand"></button>
                     <button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-cancel close" title="close"></button>
@@ -136,6 +137,11 @@ class EICController extends Controller {
         content.addEventListener('expanded', this.onFocusRequest.bind(this));
         content.addEventListener('shrinked', this.onFocusRequest.bind(this));
         
+        if(options.withSettings && (typeof(view.settings) == 'function')){
+            let settings = content.querySelector('header button.settings');
+            settings.addEventListener('click', view.settings.bind(view));
+        }
+
         content.setAttribute('sparc-id', view._sparcId);
 
         let parent = Controller._template.view.find('.app-workspace');

app/libs/EIC/EICDomContent.js

@@ -14,6 +14,9 @@ class EICDomContent extends View {
 
     get expanded() { return this.el.hasAttribute('expanded'); }
 
+
+//TODO: memorize size & position
+
     /**
      * 
      */
@@ -28,6 +31,9 @@ class EICDomContent extends View {
         this.DOMContentResized()
     }
 
+//TODO: restore to previous memorize size & position
+
+
     /**
      * 
      */

app/libs/myUser.js

@@ -271,8 +271,6 @@ class myUser extends app.LoadedClasses.User {
     setPreference(path, value) {
         if(app.MessageBus) {
             let segments = path.split('.');
-
-console.log('=====>',this, this.preferences)
             let pointer = this.preferences;
 
             for(let i = 0; i < segments.length - 1; i++) {

app/thirdparty/Threetobus/threetobus.module.js

@@ -69,60 +69,45 @@ export class Threetobus{
 
 
     processBusEvent(eventType, chan, payload, userId, x){
-        console.log('processBusEvent====>',eventType, chan, payload, userId)
         const chanObj = this._curEventsMapping.find(item => item.chan==chan)
         if(!chanObj) return
-        console.log('processBusEvent====>chanObj', chanObj)
         const eventObj = chanObj.events.find(item => item.eventName==eventType)
         if(!eventObj) return
-        console.log('processBusEvent====>eventObj', eventObj)
-
         for(const mapping of eventObj.mappings){
             const id = this.getValueByPath(payload, mapping.id)
-            console.log('agent ID:', id)
-
             if(id){
                 const obj3D = this.scene.getObjectByName(id)
-                this.assignFromConfig(payload, mapping.assign, obj3D)
+                this.assignFromConfig(payload, mapping, obj3D)
             }
-            
-
-            // console.log(`found ${mappings.length} mappings`)
-            // mappings.forEach(snapEl => {
-            //     const newAttr = this.assignFromConfig(payload, mapping.assign)
-            //     if(mapping.animate){
-            //         snapEl.animate(
-            //             newAttr,
-            //             400,
-            //              mina.linear
-            //         )
-            //     } else {
-            //         snapEl.attr(newAttr)
-            //     }
-            // })
         }
     }
 
-    assignFromConfig(payload, replaceDef, obj3D) {
+    assignFromConfig(payload, mapping, obj3D) { 
-        console.log('assignFromConfig', payload, replaceDef)       
+        const toTween = {}   
-        for (const [path, rule] of Object.entries(replaceDef)) {
+        for (const [path, rule] of Object.entries(mapping.assign)) {
             let value 
             if (typeof rule === 'string') { // plain path                
                 value= this.getValueByPath(payload, rule)
-
             } else if((typeof(rule) == 'object') && (typeof(rule.transformer) == 'function')) { // transformer
                 const fnargs = (rule.arguments || []).map(arg => this.getValueByPath(payload,arg))
                 value = rule.transformer(...fnargs)
             }
-
-            console.log('====>',path ,value)
             if (value !== undefined) {
-                this.setProp(obj3D, path, value)
+                if(mapping.tween && path.startsWith('position.')){ //TODO allow other tweenables
+                    toTween[path.substring(9)] = value
+                } else {
+                    this.setProp(obj3D, path, value)
+                }
             }
         }
+        if(mapping.tween && (Object.keys(toTween).length>0)){
+            toTween.object = obj3D
+            toTween.delay = mapping.tweenDelay
+            this.smoothMove(toTween)
+        }
     }
 
-    setProp(obj3D, path, value) { console.log('====>setProp', path, value)
+    setProp(obj3D, path, value) { 
         const parts = path.split('.')
         let target = obj3D
         for (let i = 0; i < parts.length - 1; i++) {
@@ -194,7 +179,7 @@ export class Threetobus{
     }
 
 
-    buildFromJSON(id, desc){ console.log('===buildFromJSON molecule1==>',  desc)
+    buildFromJSON(id, desc){ 
         let obj
         if(desc.type === 'Mesh') {
             const geom = new THREE[desc.geometry.type](...(desc.geometry.args || []))
@@ -222,8 +207,11 @@ export class Threetobus{
         return obj
     }
 
-    smoothRelMove(options){
+    smoothMove(options){ console.log('=====>', options)
         // options:  object, dX, dY, dZ, delay, easing, easingMode
+        //      Absolute: x,y,z
+        //      Relative: dx,dy,dz
+        //      delay: ms
         //      easings: Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back, Bounce
         //      easingMode:     In → starts slow, accelerates towards the end.
         //                      Out → starts fast, decelerates smoothly.
@@ -231,10 +219,22 @@ export class Threetobus{
         options.easing = options.easing ? options.easing : 'Quadratic'
         options.easingMode = options.easingMode ? options.easingMode : 'InOut'
 
+        let newX = parseFloat(options.x)
+        newX = isNaN(newX) ? options.object.position.x : newX
+        newX +=  (parseFloat(options.dx) || 0)
+
+        let newY = parseFloat(options.y)
+        newY = isNaN(newY) ? options.object.position.y : newY
+        newY +=  (parseFloat(options.dy) || 0)
+
+        let newZ = parseFloat(options.z)
+        newZ = isNaN(newZ) ? options.object.position.z : newZ
+        newZ +=  (parseFloat(options.dz) || 0)
+
         new TWEEN.Tween(options.object.position)
-            .to({   x: options.object.position.x + options.dX, 
+            .to({   x: newX, 
-                    y: options.object.position.y + options.dY,
+                    y: newY,
-                    z: options.object.position.z + options.dZ,  
+                    z: newZ,  
                 }, options.delay)
             .easing(TWEEN.Easing[options.easing][options.easingMode])
             .start()

app/views/templates/EICAppTemplate.js

@@ -92,7 +92,7 @@ class EICAppTemplate extends EICDomContent {
         this.userIcon = new UserIcon(this.session.querySelector('[eicuser]'));
         this.userIcon.showStatus = true;
         this.userIcon.uuid = app.User.identity.uuid;
-        this.userIcon.fullname = app.User.identity.firstname + ' ' + app.User.identity.lastname
+        this.userIcon.fullname = app.User.identity.username
         this.userIcon.online = app.MessageBus.connected;
 
         app.events.channel.addEventListener('MessageBus.Connected', this.onBusConnected.bind(this))

app/views/visualisers/SpaceView.js

@@ -27,7 +27,10 @@ class SpaceView extends EICDomContent {
 
     }
 
+    settings(){
+        console.log('Settings!')
         
+    }
 
 }