snaptobus starts to work...

app/views/dashboards/MainDashboardView.js

@@ -1,10 +1,33 @@
 class MainDashboardView extends EICDomContent {
 
+    agentTypes = {
+        molecule1:{
+            type: 'circle',
+            attrs: {
+                r: 10,
+                fill: '#BFB',
+                stroke:  "#0A0",
+                strokeWidth: 2,
+            }
+        },
+        molecule2:{
+            type: 'circle',
+            attrs: {
+                r: 10,
+                fill: '#BBF',
+                stroke:  "#00A",
+                strokeWidth: 2,
+            }
+        }
+
+    }
+
     constructor() {
         super()
         Object.assign(this, app.helpers.activeAttributes)
         //this.tileMarkup = app.Assets.Store.html['/app/assets/html/mailing/tile.html']
         this.snap = null
+        this.snaptobus = null
     }
 
     DOMContentLoaded(options) {        
@@ -12,15 +35,38 @@ class MainDashboardView extends EICDomContent {
         const components = ui.eicfy(this.el)       
         this.setupTriggers(components)        
         this.setupRefs(components)
-        this.snap  = Snap("svg.stb");
-        var agent = this.snap.circle(150, 150, 20);
-        agent.attr({
-            id: 'agent42',
-            fill: "#BFB",
-            stroke: "#0A0",
-            strokeWidth: 2
-        });
-        setTimeout(this.moveit.bind(this), 3000);
+        this.snaptobus = new Snaptobus({ 
+            snap: Snap("svg.stb"),
+            spriteDefs: this.agentTypes,
+            busConfig: [
+                {   
+                    chan: 'gps:agents', // What to subscribe to
+                    events: [  // What to select on this chan
+                                {   eventName: 'moving',
+                                    snaps: [
+                                        {
+                                            selector: '#${aid}', 
+                                            assign: {
+                                                cx: 'attrs.x',  
+                                                cy: 'attrs.y',
+                                            },
+                                            animate: true
+                                        }
+                                    ]
+                                },
+                            ]
+                },
+            ]
+        })
+        // var agent = this.snap.circle(150, 150, 20);
+        // agent.attr({
+        //     id: 'agent42',
+        //     fill: "#BFB",
+        //     stroke: "#0A0",
+        //     strokeWidth: 2
+        // });
+        this.createAgent('molecule2', 'agent42', 100,100)
+        //setTimeout(this.moveit.bind(this), 3000);
     }
 
     DOMContentFocused(options) { 
@@ -33,22 +79,33 @@ class MainDashboardView extends EICDomContent {
 
     DOMContentBlured(options) { this.wasBlured = true }
 
-    moveit(){
-        var myCircle = this.snap.select('#agent42')
-
-        var newx = parseInt(myCircle.attr('cx')) + 600
-        var newy = parseInt(myCircle.attr('cy')) + 200
-
-        // animate translate
-        myCircle.animate(
-            {
-                cx: newx,
-                cy: newy,
-            },
-            1000,                          // duration in ms
-            mina.linear                     // easing
-        )
+    createAgent(agentType, id,  x, y){
+        if(!Object.keys(this.agentTypes).includes(agentType)) return
+        this.agentTypes[agentType]
+        const svgAgent = this.snaptobus.snap[this.agentTypes[agentType].type]().attr(this.agentTypes[agentType].attrs)
+        svgAgent.attr({
+            id: id,
+            cx: x,
+            cy:y,
+        })
     }
+
+    // moveit(){
+    //     var myCircle = this.snap.select('#agent42')
+
+    //     var newx = parseInt(myCircle.attr('cx')) + 600
+    //     var newy = parseInt(myCircle.attr('cy')) + 200
+
+    //     // animate translate
+    //     myCircle.animate(
+    //         {
+    //             cx: newx,
+    //             cy: newy,
+    //         },
+    //         1000,                          // duration in ms
+    //         mina.linear                     // easing
+    //     )
+    // }
 }
 
 app.registerClass('MainDashboardView', MainDashboardView)