1
var pgli = pgli || {};
2
pgli.diagram = pgli.diagram || {};
3

4
pgli.diagram.Diagram = gamecore.Base.extend('Diagram',
5
{ // static
6

7
},
8
{ // instance
9

10
	dom: null,
11
	container: null,
12
	width: 1024,
13
	height: 768,
14

15
	timer: null,
16
	redrawDelay: 1000/30,
17

18
	stage: null,
19
	layers: {
20
		background: null,
21
		nodes: null,
22
		links: null
23
	},
24
	background: null,
25
	links: null,
26

27
	project: null,
28

29
	nodes: [],
30

31
	/**
32
	 * Bind a new renderer to given canvas
33
	 * @param  HTMLElement domContainer [description]
34
	 * @param  Integer width      [description]
35
	 * @param  Integer height     [description]
36
	 * @param  Integer autoRedraw If defined, sets redraw rate to given FPS
37
	 */
38
	init: function(domContainer, autoRedraw)
39
	{
40
		var self = this;
41

42
		this.dom = domContainer;
43
		this.container = $('#'+domContainer);
44
		this.width = this.container.width();
45
		this.height = this.container.height();
46

47
		this.stage = new Kinetic.Stage({
48
			container: this.dom,
49
			width: this.width,
50
			height: this.height
51
		});
52

53
		this.layers.background = new Kinetic.Layer();
54
		this.layers.nodes = new Kinetic.Layer();
55
		this.layers.links = new Kinetic.Layer();
56

57
		this.background = new Kinetic.Rect({
58
			width: this.width,
59
			height: this.height,
60
			fill: "#272822"
61
		});
62

63
		this.layers.background.add(this.background);
64

65
		this.links = new pgli.diagram.Links(this);
66
		this.layers.links.add(this.links.shape);
67

68
		this.stage.add(this.layers.background);
69
		this.stage.add(this.layers.nodes);
70
		this.stage.add(this.layers.links);
71

72
		// Stage drag hack to trigger only on background drag
73
		var self = this;
74
		this.background.on("mousedown", function(){
75
			self.stage.setDraggable(true);
76
			self.stage.on("dragmove", function(){
77
				self.layers.background.setX(-this.getX());
78
				self.layers.background.setY(-this.getY());
79
			});
80
			self.stage.on("dragend", function(){
81
				this.off("dragend");
82
				this.off("dragmove");
83
				this.setDraggable(false);
84
			});
85
		});
86

87
		if(autoRedraw != undefined && autoRedraw != false && autoRedraw > 0)
88
		{
89
			this.redrawDelay = 1000 / autoRedraw;
90
			this.timer = new bkcore.Timer();
91
			this.timer.start();
92
			this.autoRedraw(true);
93
		}
94
	},
95

96
	addNode: function(node)
97
	{
98
		this.nodes.push(node);
99
		this.layers.nodes.add(node.shape);
100
		this.layers.nodes.draw();
101
	},
102

103
	getNode: function(nodeKey)
104
	{
105
		var i = 0, len = this.nodes.length;
106
		while(i < len)
107
		{
108
			if(this.nodes[i].key == nodeKey)
109
				return this.nodes[i];
110
			i++;
111
		}
112
		console.warn("Error in Diagram: Unable to find node["+nodeKey+"]");
113
		return false;
114
	},
115

116
	draw: function()
117
	{
118
		this.layers.background.draw();
119
		this.layers.nodes.draw();
120
		this.layers.links.draw();
121
	},
122

123
	autoRedraw: function(keep)
124
	{
125
		var self = this;
126

127
		if(this.timer.update() > this.redrawDelay)
128
		{
129
			this.timer.start();
130
			this.draw();
131
		}
132

133
		if(keep)
134
			requestAnimFrame(function(){
135
				self.autoRedraw(true);
136
			});
137
	},
138

139
	resize: function()
140
	{
141
		this.width = this.container.width();
142
		this.height = this.container.height();
143
		this.stage.setSize(this.width, this.height);
144
		this.background.setSize(this.width, this.height);
145
		this.draw();
146
	}
147

148
});
149