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