STEINNI
112 lines
3.4 KiB
JavaScript
112 lines
3.4 KiB
JavaScript
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) {
|
|
for(let model in options.models) this[model] = options.models[model]
|
|
const components = ui.eicfy(this.el)
|
|
this.setupTriggers(components)
|
|
this.setupRefs(components)
|
|
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) {
|
|
// Avoid 2nd refesh on DomContentLoaded
|
|
if(this.wasBlured){
|
|
//this.refreshSearch()
|
|
}
|
|
this.wasBlured = false
|
|
}
|
|
|
|
DOMContentBlured(options) { this.wasBlured = true }
|
|
|
|
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)
|