홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
9e2104c7 1 parent 418685e1

GUI -- TopoView - Added Toggle Port Highlighting enable/disable with 'P' key. 

 - add/remove mousemove handler.
 - removed commented out test code.

Change-Id: Ice47db36491d466d2d73f6cef1dfc90ff9d8b088
Inline Side-by-side
Showing 3 changed files with 64 additions and 105 deletions
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
49 H: [tfs.toggleHosts, 'Toggle host visibility'], 49 H: [tfs.toggleHosts, 'Toggle host visibility'],
50 M: [tfs.toggleOffline, 'Toggle offline visibility'], 50 M: [tfs.toggleOffline, 'Toggle offline visibility'],
51 B: [toggleMap, 'Toggle background map'], 51 B: [toggleMap, 'Toggle background map'],
52 - //P: togglePorts, 52 + P: [tfs.togglePorts, 'Toggle Port Highlighting'],
53 53
54 //X: [toggleNodeLock, 'Lock / unlock node positions'], 54 //X: [toggleNodeLock, 'Lock / unlock node positions'],
55 Z: [tos.toggleOblique, 'Toggle oblique view (Experimental)'], 55 Z: [tos.toggleOblique, 'Toggle oblique view (Experimental)'],
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
69 esc: handleEscape, 69 esc: handleEscape,
70 70
71 _helpFormat: [ 71 _helpFormat: [
72 - ['O', 'I', 'D', '-', 'H', 'M', 'B', 'P' ], 72 + ['O', 'I', 'D', '-', 'H', 'M', 'P', 'B' ],
73 ['X', 'Z', 'L', 'U', 'R' ], 73 ['X', 'Z', 'L', 'U', 'R' ],
74 ['V', 'rightArrow', 'leftArrow', 'W', 'A', 'F', '-', 'E' ] 74 ['V', 'rightArrow', 'leftArrow', 'W', 'A', 'F', '-', 'E' ]
75 ] 75 ]
......
...@@ -735,10 +735,9 @@ ...@@ -735,10 +735,9 @@
735 }; 735 };
736 } 736 }
737 737
738 - function mkLinkApi(svg, forceG, uplink) { 738 + function mkLinkApi(svg, uplink) {
739 return { 739 return {
740 svg: svg, 740 svg: svg,
741 - forceG: forceG,
742 zoomer: uplink.zoomer(), 741 zoomer: uplink.zoomer(),
743 network: network, 742 network: network,
744 portLabelG: function () { return portLabelG; }, 743 portLabelG: function () { return portLabelG; },
...@@ -793,7 +792,7 @@ ...@@ -793,7 +792,7 @@
793 tts.initTraffic(mkTrafficApi(uplink)); 792 tts.initTraffic(mkTrafficApi(uplink));
794 tos.initOblique(mkObliqueApi(uplink, fltr)); 793 tos.initOblique(mkObliqueApi(uplink, fltr));
795 fltr.initFilter(mkFilterApi(uplink), d3.select('#mast-right')); 794 fltr.initFilter(mkFilterApi(uplink), d3.select('#mast-right'));
796 - tls.initLink(mkLinkApi(svg, forceG, uplink), td3); 795 + tls.initLink(mkLinkApi(svg, uplink), td3);
797 796
798 settings = angular.extend({}, defaultSettings, opts); 797 settings = angular.extend({}, defaultSettings, opts);
799 798
...@@ -847,6 +846,7 @@ ...@@ -847,6 +846,7 @@
847 846
848 updateDeviceColors: td3.updateDeviceColors, 847 updateDeviceColors: td3.updateDeviceColors,
849 toggleHosts: toggleHosts, 848 toggleHosts: toggleHosts,
849 + togglePorts: tls.togglePorts,
850 toggleOffline: toggleOffline, 850 toggleOffline: toggleOffline,
851 cycleDeviceLabels: cycleDeviceLabels, 851 cycleDeviceLabels: cycleDeviceLabels,
852 unpin: unpin, 852 unpin: unpin,
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 'use strict'; 23 'use strict';
24 24
25 // injected refs 25 // injected refs
26 - var $log, fs, sus, ts; 26 + var $log, fs, sus, ts, flash;
27 27
28 var api, 28 var api,
29 td3, 29 td3,
...@@ -31,53 +31,33 @@ ...@@ -31,53 +31,33 @@
31 enhancedLink = null; // the link which the mouse is hovering over 31 enhancedLink = null; // the link which the mouse is hovering over
32 32
33 // SVG elements; 33 // SVG elements;
34 - var svg, mouseG; 34 + var svg;
35 +
36 + // internal state
37 + var showPorts = true; // enable port highlighting by default
35 38
36 39
37 // ======== ALGORITHM TO FIND LINK CLOSEST TO MOUSE ======== 40 // ======== ALGORITHM TO FIND LINK CLOSEST TO MOUSE ========
38 41
39 - function setupMouse(forceG, zoomer) { 42 + function mouseMoveHandler() {
40 - $log.debug('set up mouse handlers for mouse move'); 43 + var m = d3.mouse(this),
41 - mouseG = forceG.append('g').attr('id', 'topo-mouse'); 44 + sc = api.zoomer.scale(),
42 - //mouseG.append('circle') 45 + tr = api.zoomer.translate(),
43 - // .attr({ 46 + mx = (m[0] - tr[0]) / sc,
44 - // r: 5, 47 + my = (m[1] - tr[1]) / sc;
45 - // opacity: 0 48 + computeNearestLink({x: mx, y: my});
46 - // })
47 - // .style('fill', 'red');
48 -
49 - svg.on('mouseenter', function () {
50 - //$log.log('M--ENTER');
51 - //mouseG.selectAll('circle').attr('opacity', 1);
52 - })
53 - .on('mouseleave', function () {
54 - //$log.log('M--LEAVE');
55 - //mouseG.selectAll('circle').attr('opacity', 0);
56 - })
57 - .on('mousemove', function () {
58 - var m = d3.mouse(this),
59 - sc = zoomer.scale(),
60 - tr = zoomer.translate(),
61 - mx = (m[0] - tr[0]) / sc,
62 - my = (m[1] - tr[1]) / sc;
63 -
64 - //$log.log('M--MOVE', m);
65 -
66 - //mouseG.selectAll('circle')
67 - // .attr({
68 - // cx: mx,
69 - // cy: my
70 - // });
71 - updatePerps({x: mx, y: my}, zoomer);
72 - });
73 } 49 }
74 50
75 - function updatePerps(mouse, zoomer) { 51 + function computeNearestLink(mouse) {
76 - var proximity = 30 / zoomer.scale(), 52 + var proximity = 30 / api.zoomer.scale(),
77 - perpData, perps, nearest, minDist; 53 + nearest, minDist;
78 54
79 function sq(x) { return x * x; } 55 function sq(x) { return x * x; }
80 56
57 + function mdist(p, m) {
58 + return Math.sqrt(sq(p.x - m.x) + sq(p.y - m.y));
59 + }
60 +
81 function pdrop(line, mouse) { 61 function pdrop(line, mouse) {
82 var x1 = line.x1, 62 var x1 = line.x1,
83 y1 = line.y1, 63 y1 = line.y1,
...@@ -92,10 +72,6 @@ ...@@ -92,10 +72,6 @@
92 return {x:x4, y:y4}; 72 return {x:x4, y:y4};
93 } 73 }
94 74
95 - function mdist(p, m) {
96 - return Math.sqrt(sq(p.x - m.x) + sq(p.y - m.y));
97 - }
98 -
99 function lineSeg(d) { 75 function lineSeg(d) {
100 return { 76 return {
101 x1: d.source.x, 77 x1: d.source.x,
...@@ -115,7 +91,6 @@ ...@@ -115,7 +91,6 @@
115 } 91 }
116 92
117 if (network.links.length) { 93 if (network.links.length) {
118 - perpData = [];
119 nearest = null; 94 nearest = null;
120 minDist = proximity * 2; 95 minDist = proximity * 2;
121 96
...@@ -135,41 +110,9 @@ ...@@ -135,41 +110,9 @@
135 minDist = dist; 110 minDist = dist;
136 nearest = d; 111 nearest = d;
137 } 112 }
138 - /*
139 - perpData.push({
140 - key: d.key,
141 - x1: mouse.x,
142 - y1: mouse.y,
143 - x2: point.x,
144 - y2: point.y
145 - });
146 - */
147 } 113 }
148 }); 114 });
149 115
150 - /*
151 - perps = mouseG.selectAll('line')
152 - .data(perpData, function (d) { return d.key; })
153 - .attr({
154 - x1: function (d) { return d.x1; },
155 - y1: function (d) { return d.y1; },
156 - x2: function (d) { return d.x2; },
157 - y2: function (d) { return d.y2; }
158 - });
159 -
160 - perps.enter().append('line')
161 - .attr({
162 - x1: function (d) { return d.x1; },
163 - y1: function (d) { return d.y1; },
164 - x2: function (d) { return d.x2; },
165 - y2: function (d) { return d.y2; }
166 - })
167 - .style('stroke-width', 2)
168 - .style('stroke', 'limegreen');
169 -
170 - perps.exit().remove();
171 - */
172 -
173 enhanceNearestLink(nearest); 116 enhanceNearestLink(nearest);
174 } 117 }
175 } 118 }
...@@ -245,36 +188,52 @@ ...@@ -245,36 +188,52 @@
245 return {x: k * dx + ln.x, y: k * dy + ln.y}; 188 return {x: k * dx + ln.x, y: k * dy + ln.y};
246 } 189 }
247 190
191 + function togglePorts() {
192 + showPorts = !showPorts;
193 +
194 + var what = showPorts ? 'Enable' : 'Disable',
195 + handler = showPorts ? mouseMoveHandler : null;
196 +
197 + if (!showPorts) {
198 + enhanceNearestLink(null);
199 + }
200 + svg.on('mousemove', handler);
201 + flash.flash(what + ' port highlighting');
202 + }
203 +
248 // ========================== 204 // ==========================
249 // Module definition 205 // Module definition
250 206
251 angular.module('ovTopo') 207 angular.module('ovTopo')
252 .factory('TopoLinkService', 208 .factory('TopoLinkService',
253 - ['$log', 'FnService', 'SvgUtilService', 'ThemeService', 209 + ['$log', 'FnService', 'SvgUtilService', 'ThemeService', 'FlashService',
254 - 210 +
255 - function (_$log_, _fs_, _sus_, _ts_) { 211 + function (_$log_, _fs_, _sus_, _ts_, _flash_) {
256 - $log = _$log_; 212 + $log = _$log_;
257 - fs = _fs_; 213 + fs = _fs_;
258 - sus = _sus_; 214 + sus = _sus_;
259 - ts = _ts_; 215 + ts = _ts_;
260 - 216 + flash = _flash_;
261 - function initLink(_api_, _td3_) { 217 +
262 - api = _api_; 218 + function initLink(_api_, _td3_) {
263 - td3 = _td3_; 219 + api = _api_;
264 - svg = api.svg; 220 + td3 = _td3_;
265 - network = api.network; 221 + svg = api.svg;
266 - setupMouse(api.forceG, api.zoomer); 222 + network = api.network;
223 + if (showPorts) {
224 + svg.on('mousemove', mouseMoveHandler);
267 } 225 }
226 + }
268 227
269 - function destroyLink() { 228 + function destroyLink() {
270 - svg.on('mouseenter', null) 229 + // unconditionally remove any mousemove event handler
271 - .on('mouseleave', null) 230 + svg.on('mousemove', null);
272 - .on('mousemove', null); 231 + }
273 - }
274 232
275 - return { 233 + return {
276 - initLink: initLink, 234 + initLink: initLink,
277 - destroyLink: destroyLink 235 + destroyLink: destroyLink,
278 - }; 236 + togglePorts: togglePorts
279 - }]); 237 + };
238 + }]);
280 }()); 239 }());
......