2 var labelType, useGradients, nativeTextSupport, animate;
5 var ua = navigator.userAgent,
6 iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
7 typeOfCanvas = typeof HTMLCanvasElement,
8 nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
9 textSupport = nativeCanvasSupport
10 && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
11 //I'm setting this based on the fact that ExCanvas provides text support for IE
12 //and that as of today iPhone/iPad current text support is lame
13 labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
14 nativeTextSupport = labelType == 'Native';
15 useGradients = nativeCanvasSupport;
16 animate = !(iStuff || !nativeCanvasSupport);
22 one.topology.option = {
23 navigation : function(enable, panning, zooming) {
25 option["enable"] = enable;
26 option["panning"] = panning;
27 option["zooming"] = zooming;
30 node : function(overridable, color, height, dim) {
32 option["overridable"] = overridable;
33 option["color"] = color;
34 option["height"] = height;
38 edge : function(overridable, color, lineWidth, epsilon) {
40 option["overridable"] = overridable;
41 option["color"] = color;
42 option["lineWidth"] = lineWidth;
43 if (epsilon != undefined)
44 option["epsilon"] = epsilon;
47 label : function(style, node) {
48 var marginTop, minWidth;
49 if (node.data["$type"] == "swtch") {
52 } else if (node.data["$type"] == "host") {
55 } else if (node.data["$type"].indexOf("monitor") == 0) {
59 style.marginTop = marginTop;
60 style.minWidth = minWidth;
61 style.background = "rgba(68,68,68,0.7)";
62 style.borderRadius = "4px";
64 style.cursor = "default";
68 one.topology.init = function(json) {
69 if (json.length == 0) {
70 $div = $(document.createElement('div'));
71 $img = $(document.createElement('div'));
72 $img.css('height', '128px');
73 $img.css('width', '128px');
74 $img.css('background-image', 'url(/img/topology_view_1033_128.png)');
75 $img.css('clear', 'both');
76 $img.css('margin', '0 auto');
77 $p = $(document.createElement('p'));
78 $p.addClass('text-center');
79 $p.addClass('text-info');
80 $p.css('width', '100%');
81 $p.css('padding', '10px 0');
82 $p.css('cursor', 'default');
83 $p.append('No Network Elements Connected');
84 $div.css('position', 'absolute');
85 $div.css('top', '25%');
86 $div.css('margin', '0 auto');
87 $div.css('width', '100%');
88 $div.css('text-align', 'center');
89 $div.append($img).append($p);
90 $("#topology").append($div);
93 one.topology.graph = new $jit.MultiTopology({
94 injectInto: 'topology',
95 Navigation: one.topology.option.navigation(true, 'avoid nodes', 10),
96 Node: one.topology.option.node(true, '#444', 25, 27),
97 Edge: one.topology.option.edge(true, '23A4FF', 1.5),
101 onShow: function(tip, node) {
102 if (node.name != undefined)
104 //tipsOnShow(tip, node);
110 onMouseEnter: function(node, eventInfo, e) {
112 if (node.id != undefined) {
113 one.topology.graph.canvas.getElement().style.cursor = 'move';
114 } else if (eventInfo.edge != undefined &&
115 eventInfo.edge.nodeTo.data["$type"] == "swtch" &&
116 eventInfo.edge.nodeFrom.data["$type"] == "swtch") {
117 one.topology.graph.canvas.getElement().style.cursor = 'pointer';
120 onMouseLeave: function(node, eventInfo, e) {
121 one.topology.graph.canvas.getElement().style.cursor = '';
123 //Update node positions when dragged
124 onDragMove: function(node, eventInfo, e) {
125 var pos = eventInfo.getPos();
126 node.pos.setc(pos.x, pos.y);
127 one.topology.graph.plot();
128 one.topology.graph.canvas.getElement().style.cursor = 'crosshair';
130 //Implement the same handler for touchscreens
131 onTouchMove: function(node, eventInfo, e) {
132 $jit.util.event.stop(e); //stop default touchmove event
133 this.onDragMove(node, eventInfo, e);
135 onDragEnd: function(node, eventInfo, e) {
136 var ps = eventInfo.getPos();
141 $.post('/controller/web/topology/node/' + did, data);
143 onClick: function(node, eventInfo, e) {
144 if(one.f.topology === undefined) {
147 one.f.topology.Events.onClick(node, eventInfo);
153 onCreateLabel: function(domElement, node){
154 var nameContainer = document.createElement('span'),
155 closeButton = document.createElement('span'),
156 style = nameContainer.style;
157 nameContainer.className = 'name';
158 var nodeDesc = node.data["$desc"];
159 if (nodeDesc == "None" || nodeDesc == "" || nodeDesc == "undefined" || nodeDesc == undefined) {
160 nameContainer.innerHTML = "<small>"+node.name+"</small>";
162 nameContainer.innerHTML = nodeDesc;
164 domElement.appendChild(nameContainer);
165 style.fontSize = "1.0em";
166 style.color = "#000";
167 style.fontWeight = "bold";
168 style.width = "100%";
169 style.padding = "1.5px 4px";
170 style.display = "block";
172 one.topology.option.label(style, node);
174 onPlaceLabel: function(domElement, node){
175 var style = domElement.style;
176 var left = parseInt(style.left);
177 var top = parseInt(style.top);
178 var w = domElement.offsetWidth;
179 style.left = (left - w / 2) + 'px';
180 style.top = (top - 15) + 'px';
182 style.minWidth = "28px";
183 style.width = "auto";
184 style.height = "28px";
185 style.textAlign = "center";
189 one.topology.graph.loadJSON(json);
190 // compute positions incrementally and animate.
191 one.topology.graph.computeIncremental({
194 onStep: function(perc){
195 console.log(perc + '% loaded');
197 onComplete: function(){
198 for (var idx in one.topology.graph.graph.nodes) {
199 var node = one.topology.graph.graph.nodes[idx];
200 if(node.getData("x") && node.getData("y")) {
201 var x = node.getData("x");
202 var y = node.getData("y");
203 node.setPos(new $jit.Complex(x, y), "end");
207 one.topology.graph.animate({
209 transition: $jit.Trans.Elastic.easeOut,
214 one.topology.graph.canvas.setZoom(0.8,0.8);
217 one.topology.update = function() {
218 $('#topology').empty();
219 $.getJSON(one.global.remoteAddress+"controller/web/topology/visual.json", function(data) {
220 one.topology.init(data);
225 $.getJSON(one.global.remoteAddress+"controller/web/topology/visual.json", function(data) {
226 one.topology.init(data);