lkarch.org/tools/hexgl/libs/Editor_files/Node.js

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];
	}
});