Added 'B' keystroke to toggle background image visibility.
Also added configuration boolean to indicate whether the background image should be visible on startup.
Showing
1 changed file
with
17 additions
and
3 deletions
... | @@ -36,8 +36,10 @@ | ... | @@ -36,8 +36,10 @@ |
36 | }, | 36 | }, |
37 | options: { | 37 | options: { |
38 | layering: true, | 38 | layering: true, |
39 | - collisionPrevention: true | 39 | + collisionPrevention: true, |
40 | + loadBackground: true | ||
40 | }, | 41 | }, |
42 | + backgroundUrl: 'img/us-map.png', | ||
41 | data: { | 43 | data: { |
42 | live: { | 44 | live: { |
43 | jsonUrl: 'rs/topology/graph', | 45 | jsonUrl: 'rs/topology/graph', |
... | @@ -265,6 +267,9 @@ | ... | @@ -265,6 +267,9 @@ |
265 | function processKeyEvent() { | 267 | function processKeyEvent() { |
266 | var code = d3.event.keyCode; | 268 | var code = d3.event.keyCode; |
267 | switch (code) { | 269 | switch (code) { |
270 | + case 66: // B | ||
271 | + toggleBackground(); | ||
272 | + break; | ||
268 | case 71: // G | 273 | case 71: // G |
269 | cycleLayout(); | 274 | cycleLayout(); |
270 | break; | 275 | break; |
... | @@ -281,6 +286,13 @@ | ... | @@ -281,6 +286,13 @@ |
281 | 286 | ||
282 | } | 287 | } |
283 | 288 | ||
289 | + function toggleBackground() { | ||
290 | + var bg = d3.select('#bg'), | ||
291 | + vis = bg.style('visibility'), | ||
292 | + newvis = (vis === 'hidden') ? 'visible' : 'hidden'; | ||
293 | + bg.style('visibility', newvis); | ||
294 | + } | ||
295 | + | ||
284 | function cycleLayout() { | 296 | function cycleLayout() { |
285 | config.options.layering = !config.options.layering; | 297 | config.options.layering = !config.options.layering; |
286 | network.force.resume(); | 298 | network.force.resume(); |
... | @@ -437,8 +449,10 @@ | ... | @@ -437,8 +449,10 @@ |
437 | id: 'bg', | 449 | id: 'bg', |
438 | width: view.width, | 450 | width: view.width, |
439 | height: view.height, | 451 | height: view.height, |
440 | - 'xlink:href': 'img/us-map.png' | 452 | + 'xlink:href': config.backgroundUrl |
441 | - }); | 453 | + }) |
454 | + .style('visibility', | ||
455 | + config.options.loadBackground ? 'visible' : 'hidden'); | ||
442 | 456 | ||
443 | // function zoomRedraw() { | 457 | // function zoomRedraw() { |
444 | // d3.select("#zoomable").attr("transform", | 458 | // d3.select("#zoomable").attr("transform", | ... | ... |
-
Please register or login to post a comment