svg-pan-zoom.controls.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. document.addEventListener('DOMContentLoaded', function() {
  2. if (document.getElementById('module-graph-svg')) {
  3. panZoom = svgPanZoom(document.getElementById('module-graph-svg').querySelector('svg'), {
  4. zoomEnabled: true,
  5. minZoom: 1,
  6. maxZoom: 5
  7. });
  8. document.getElementById('zoom-in').addEventListener('click', function(ev) {
  9. ev.preventDefault();
  10. panZoom.zoomIn();
  11. });
  12. document.getElementById('zoom-out').addEventListener('click', function(ev) {
  13. ev.preventDefault();
  14. panZoom.zoomOut();
  15. });
  16. document.getElementById('reset').addEventListener('click', function(ev) {
  17. ev.preventDefault();
  18. panZoom.resetZoom();
  19. panZoom.resetPan();
  20. });
  21. var overviewFullscreen = false,
  22. originalOverviewHeight;
  23. document.getElementById('fullscreen').addEventListener('click', function(ev) {
  24. if (overviewFullscreen) {
  25. document.getElementById('module-graph-svg').style.height = originalOverviewHeight;
  26. overviewFullscreen = false;
  27. if (ev.target) {
  28. ev.target.classList.remove('ion-md-close');
  29. ev.target.classList.add('ion-ios-resize');
  30. }
  31. } else {
  32. originalOverviewHeight = document.getElementById('module-graph-svg').style.height;
  33. document.getElementById('module-graph-svg').style.height = '85vh';
  34. overviewFullscreen = true;
  35. if (ev.target) {
  36. ev.target.classList.remove('ion-ios-resize');
  37. ev.target.classList.add('ion-md-close');
  38. }
  39. }
  40. document.getElementById('module-graph-svg').querySelector('svg').style.height = document.getElementById('module-graph-svg').clientHeight;
  41. setTimeout(function() {
  42. panZoom.resize();
  43. panZoom.fit();
  44. panZoom.center();
  45. }, 0)
  46. });
  47. }
  48. });