P42_UI/app/thirdparty/Snaptobus

//0. Add you dependencies in your controller.json :
// { ...
//     "controllerDependencies":  [
//         ...
//         "/thirdparty/Snaptobus/snap.svg-min",
//         "/thirdparty/Snaptobus/snaptobus"
//     ]
// }
// 1. Create your sprites :
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,
        }
    }
    
}

// 2. instantiate Snaptobus with the SVG playground selector, the sprites definitions,
// and the configuration mapping bus chans, bus event, and events playloads to SNap attributes
// You can assign a path in the event payload, or a transformer function like :
//     fill: {
//         arguments: [ 'age' ], // What to give from the event as function's params
//         transformer: i => `rgb(${Math.round(255 * i / 10)},0,${Math.round(255 * (1 - i / 10))})`
//     },
//

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', // which event will trigger a change
                    snaps: [
                        {
                            selector: '#${aid}', // what svg elements do we change ?
                            assign: { // what do we change and with what from the payload ?
                                cx: 'attrs.x',  
                                cy: 'attrs.y',
                            },
                            animate: true 
                        }
                    ]
                },
            ]
        },
    ]
})


//3. Create your sprites
this.createAgent('molecule2', 'agent42', 100,100)
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,
    })
}

//4. Send a bus event like : (this is a bmsg)
// {
//     "channel":"gps:agents",
//     "packet":{
//         "eventType": "moving",
//         "payload": {
//             "aid": "agent42",
//             "attrs": {
//                 "x": "950",
//                 "y": "650"
//             }
//         },
//         "sender": "toto"
//     }
// }