forked from sent/waves
122 lines
2.3 KiB
JavaScript
122 lines
2.3 KiB
JavaScript
var pgli = pgli || {};
|
|
pgli.diagram = pgli.diagram || {};
|
|
|
|
pgli.diagram.Node = gamecore.Base.extend('Node',
|
|
{ // static
|
|
layersWidth: 20,
|
|
layersMargin: 20,
|
|
layersHeight: 16,
|
|
headerHeight: 40,
|
|
slotX: 10,
|
|
slotY: 14,
|
|
slotRadius: 6
|
|
},
|
|
{ // instance
|
|
module: null,
|
|
|
|
key: null,
|
|
|
|
shape: null,
|
|
background: null,
|
|
name: null,
|
|
layers: null,
|
|
slot: null,
|
|
|
|
sockets: [],
|
|
|
|
width: 150,
|
|
height: 200,
|
|
|
|
init: function(key, module, x, y)
|
|
{
|
|
var static = pgli.diagram.Node;
|
|
|
|
this.key = key;
|
|
this.module = module;
|
|
|
|
this.shape = new Kinetic.Group({
|
|
x: x == undefined ? 0 : x,
|
|
y: y == undefined ? 0 : y,
|
|
draggable: true
|
|
});
|
|
|
|
var layerCount = (module.layers != undefined ? module.layers.length : 0) + 1;
|
|
|
|
this.height = static.headerHeight + layerCount * static.layersHeight;
|
|
|
|
this.background = new Kinetic.Rect({
|
|
x: 0,
|
|
y: 0,
|
|
width: this.width,
|
|
height: this.height,
|
|
fill: "#222",
|
|
stroke: "#000",
|
|
strokeWidth: 0.5,
|
|
shadow: {
|
|
color: "black",
|
|
blur: 6,
|
|
offset: [0, 0],
|
|
opacity: 0.5
|
|
}
|
|
});
|
|
|
|
this.layers = new Kinetic.Shape({
|
|
drawFunc: function(ctx){
|
|
ctx.beginPath();
|
|
for(var i=0, len = this.attrs.count; i < len; ++i)
|
|
ctx.arc(10, 10+i*static.layersHeight, static.slotRadius, 0, Math.PI*2, true);
|
|
ctx.closePath();
|
|
this.fill(ctx);
|
|
},
|
|
x: this.width-static.layersWidth,
|
|
y: static.layersMargin,
|
|
count: layerCount,
|
|
fill: "#111"
|
|
});
|
|
|
|
this.slot = new Kinetic.Circle({
|
|
x: static.slotX,
|
|
y: static.slotY,
|
|
radius: static.slotRadius,
|
|
fill: "#111"
|
|
});
|
|
|
|
this.name = new Kinetic.Text({
|
|
x: 20,
|
|
y: 6,
|
|
text: module.name,
|
|
fontSize: 13,
|
|
fontFamily: "Ubuntu Mono",
|
|
textFill: "#aaa"
|
|
});
|
|
|
|
this.shape.on('mousedown', function(){
|
|
this.moveToTop();
|
|
});
|
|
|
|
this.shape.add(this.background);
|
|
this.shape.add(this.name);
|
|
this.shape.add(this.layers);
|
|
this.shape.add(this.slot);
|
|
},
|
|
|
|
updateLayers: function()
|
|
{
|
|
var layerCount = (module.layers != undefined ? module.layers.length : 0) + 1;
|
|
this.layers.attrs.count = layerCount;
|
|
},
|
|
|
|
getSlot: function()
|
|
{
|
|
var static = pgli.diagram.Node;
|
|
return [this.shape.getX()+static.slotX,
|
|
this.shape.getY()+static.slotY];
|
|
},
|
|
|
|
getLayerSlot: function(index)
|
|
{
|
|
var static = pgli.diagram.Node;
|
|
return [this.shape.getX()+this.width-static.layersWidth/2,
|
|
this.shape.getY()+10+index*static.layersHeight+static.layersMargin];
|
|
}
|
|
}); |