2 var labelType, useGradients, nativeTextSupport, animate;
5 var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i)
6 || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), textSupport = nativeCanvasSupport
7 && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
8 // I'm setting this based on the fact that ExCanvas provides text support
10 // and that as of today iPhone/iPad current text support is lame
11 labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native'
13 nativeTextSupport = labelType == 'Native';
14 useGradients = nativeCanvasSupport;
15 animate = !(iStuff || !nativeCanvasSupport);
21 one.topology.option = {
22 navigation : function(enable, panning, zooming) {
24 option["enable"] = enable;
25 option["panning"] = panning;
26 option["zooming"] = zooming;
29 node : function(overridable, color, height, dim) {
31 option["overridable"] = overridable;
32 option["color"] = color;
33 option["height"] = height;
37 edge : function(overridable, color, lineWidth, epsilon) {
39 option["overridable"] = overridable;
40 option["color"] = color;
41 option["lineWidth"] = lineWidth;
42 if (epsilon != undefined)
43 option["epsilon"] = epsilon;
46 label : function(style, node) {
47 var marginTop, minWidth;
48 if (node.data["$type"] == "swtch") {
51 } else if (node.data["$type"] == "host") {
54 } else if (node.data["$type"].indexOf("monitor") == 0) {
58 style.marginTop = marginTop;
59 style.minWidth = minWidth;
60 style.background = "rgba(68,68,68,0.7)";
61 style.borderRadius = "4px";
63 style.cursor = "default";
67 one.topology.init = function(json) {
68 if (json.length == 0) {
69 $div = $(document.createElement('div'));
70 $img = $(document.createElement('div'));
71 $img.css('height', '128px');
72 $img.css('width', '128px');
73 $img.css('background-image', 'url(/img/topology_view_1033_128.png)');
74 $img.css('clear', 'both');
75 $img.css('margin', '0 auto');
76 $p = $(document.createElement('p'));
77 $p.addClass('text-center');
78 $p.addClass('text-info');
79 $p.css('width', '100%');
80 $p.css('padding', '10px 0');
81 $p.css('cursor', 'default');
82 $p.append('No Network Elements Connected');
83 $div.css('position', 'absolute');
84 $div.css('top', '25%');
85 $div.css('margin', '0 auto');
86 $div.css('width', '100%');
87 $div.css('text-align', 'center');
88 $div.append($img).append($p);
89 $("#topology").append($div);
92 one.topology.graph = new $jit.MultiTopology(
94 injectInto : 'topology',
95 Navigation : one.topology.option.navigation(true,
97 Node : one.topology.option.node(true, '#444', 25, 27),
98 Edge : one.topology.option.edge(true, '23A4FF', 1.5),
102 onShow : function(tip, node) {
103 if (node.name != undefined)
105 // tipsOnShow(tip, node);
111 onMouseEnter : function(node, eventInfo, e) {
113 if (node.id != undefined) {
114 one.topology.graph.canvas.getElement().style.cursor = 'move';
115 } else if (eventInfo.edge != undefined
116 && eventInfo.edge.nodeTo.data["$type"] == "swtch"
117 && eventInfo.edge.nodeFrom.data["$type"] == "swtch") {
118 one.topology.graph.canvas.getElement().style.cursor = 'pointer';
121 onMouseLeave : function(node, eventInfo, e) {
122 one.topology.graph.canvas.getElement().style.cursor = '';
124 // Update node positions when dragged
125 onDragMove : function(node, eventInfo, e) {
126 var pos = eventInfo.getPos();
127 node.pos.setc(pos.x, pos.y);
128 one.topology.graph.plot();
129 one.topology.graph.canvas.getElement().style.cursor = 'crosshair';
131 // Implement the same handler for touchscreens
132 onTouchMove : function(node, eventInfo, e) {
133 $jit.util.event.stop(e); // stop default touchmove
135 this.onDragMove(node, eventInfo, e);
137 onDragEnd : function(node, eventInfo, e) {
138 var ps = eventInfo.getPos();
143 $.post('/controller/web/topology/node/' + did, data);
145 onClick : function(node, eventInfo, e) {
146 if (one.f.topology === undefined) {
149 one.f.topology.Events.onClick(node, eventInfo);
155 onCreateLabel : function(domElement, node) {
156 var nameContainer = document.createElement('span'), closeButton = document
157 .createElement('span'), style = nameContainer.style;
158 nameContainer.className = 'name';
159 var nodeDesc = node.data["$desc"];
160 if (nodeDesc == "None" || nodeDesc == ""
161 || nodeDesc == "undefined" || nodeDesc == undefined) {
162 nameContainer.innerHTML = "<small>" + node.name
165 nameContainer.innerHTML = nodeDesc;
167 domElement.appendChild(nameContainer);
168 style.fontSize = "1.0em";
169 style.color = "#000";
170 style.fontWeight = "bold";
171 style.width = "100%";
172 style.padding = "1.5px 4px";
173 style.display = "block";
175 one.topology.option.label(style, node);
177 onPlaceLabel : function(domElement, node) {
178 var style = domElement.style;
179 var left = parseInt(style.left);
180 var top = parseInt(style.top);
181 var w = domElement.offsetWidth;
182 style.left = (left - w / 2) + 'px';
183 style.top = (top - 15) + 'px';
185 style.minWidth = "28px";
186 style.width = "auto";
187 style.height = "28px";
188 style.textAlign = "center";
192 one.topology.graph.loadJSON(json);
193 // compute positions incrementally and animate.
194 one.topology.graph.computeIncremental({
197 onStep : function(perc) {
198 console.log(perc + '% loaded');
200 onComplete : function() {
201 for ( var idx in one.topology.graph.graph.nodes) {
202 var node = one.topology.graph.graph.nodes[idx];
203 if (node.getData("x") && node.getData("y")) {
204 var x = node.getData("x");
205 var y = node.getData("y");
206 node.setPos(new $jit.Complex(x, y), "end");
210 one.topology.graph.animate({
211 modes : [ 'linear' ],
212 transition : $jit.Trans.Elastic.easeOut,
217 one.topology.graph.canvas.setZoom(0.8, 0.8);
220 one.topology.update = function() {
221 $('#topology').empty();
222 $.getJSON(one.global.remoteAddress + "controller/web/topology/visual.json",
224 one.topology.init(data);
229 $.getJSON(one.global.remoteAddress + "controller/web/topology/visual.json",
231 one.topology.init(data);