vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

174 lines
4.8 KiB

  1. var util = require('../../util');
  2. var Hammer = require('../../module/hammer');
  3. exports._cleanNavigation = function() {
  4. // clean hammer bindings
  5. if (this.navigationHammers.existing.length != 0) {
  6. for (var i = 0; i < this.navigationHammers.existing.length; i++) {
  7. this.navigationHammers.existing[i].dispose();
  8. }
  9. this.navigationHammers.existing = [];
  10. }
  11. this._navigationReleaseOverload = function () {};
  12. // clean up previous navigation items
  13. if (this.navigationDivs && this.navigationDivs['wrapper'] && this.navigationDivs['wrapper'].parentNode) {
  14. this.navigationDivs['wrapper'].parentNode.removeChild(this.navigationDivs['wrapper']);
  15. }
  16. };
  17. /**
  18. * Creation of the navigation controls nodes. They are drawn over the rest of the nodes and are not affected by scale and translation
  19. * they have a triggerFunction which is called on click. If the position of the navigation controls is dependent
  20. * on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false.
  21. * This means that the location will be corrected by the _relocateNavigation function on a size change of the canvas.
  22. *
  23. * @private
  24. */
  25. exports._loadNavigationElements = function() {
  26. this._cleanNavigation();
  27. this.navigationDivs = {};
  28. var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
  29. var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','_zoomExtent'];
  30. this.navigationDivs['wrapper'] = document.createElement('div');
  31. this.frame.appendChild(this.navigationDivs['wrapper']);
  32. for (var i = 0; i < navigationDivs.length; i++) {
  33. this.navigationDivs[navigationDivs[i]] = document.createElement('div');
  34. this.navigationDivs[navigationDivs[i]].className = 'network-navigation ' + navigationDivs[i];
  35. this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
  36. var hammer = Hammer(this.navigationDivs[navigationDivs[i]], {prevent_default: true});
  37. hammer.on('touch', this[navigationDivActions[i]].bind(this));
  38. this.navigationHammers.new.push(hammer);
  39. }
  40. this._navigationReleaseOverload = this._stopMovement;
  41. this.navigationHammers.existing = this.navigationHammers.new;
  42. };
  43. /**
  44. * this stops all movement induced by the navigation buttons
  45. *
  46. * @private
  47. */
  48. exports._zoomExtent = function(event) {
  49. this.zoomExtent({duration:700});
  50. event.stopPropagation();
  51. };
  52. /**
  53. * this stops all movement induced by the navigation buttons
  54. *
  55. * @private
  56. */
  57. exports._stopMovement = function() {
  58. this._xStopMoving();
  59. this._yStopMoving();
  60. this._stopZoom();
  61. };
  62. /**
  63. * move the screen up
  64. * By using the increments, instead of adding a fixed number to the translation, we keep fluent and
  65. * instant movement. The onKeypress event triggers immediately, then pauses, then triggers frequently
  66. * To avoid this behaviour, we do the translation in the start loop.
  67. *
  68. * @private
  69. */
  70. exports._moveUp = function(event) {
  71. this.yIncrement = this.constants.keyboard.speed.y;
  72. this.start(); // if there is no node movement, the calculation wont be done
  73. event.preventDefault();
  74. };
  75. /**
  76. * move the screen down
  77. * @private
  78. */
  79. exports._moveDown = function(event) {
  80. this.yIncrement = -this.constants.keyboard.speed.y;
  81. this.start(); // if there is no node movement, the calculation wont be done
  82. event.preventDefault();
  83. };
  84. /**
  85. * move the screen left
  86. * @private
  87. */
  88. exports._moveLeft = function(event) {
  89. this.xIncrement = this.constants.keyboard.speed.x;
  90. this.start(); // if there is no node movement, the calculation wont be done
  91. event.preventDefault();
  92. };
  93. /**
  94. * move the screen right
  95. * @private
  96. */
  97. exports._moveRight = function(event) {
  98. this.xIncrement = -this.constants.keyboard.speed.y;
  99. this.start(); // if there is no node movement, the calculation wont be done
  100. event.preventDefault();
  101. };
  102. /**
  103. * Zoom in, using the same method as the movement.
  104. * @private
  105. */
  106. exports._zoomIn = function(event) {
  107. this.zoomIncrement = this.constants.keyboard.speed.zoom;
  108. this.start(); // if there is no node movement, the calculation wont be done
  109. event.preventDefault();
  110. };
  111. /**
  112. * Zoom out
  113. * @private
  114. */
  115. exports._zoomOut = function(event) {
  116. this.zoomIncrement = -this.constants.keyboard.speed.zoom;
  117. this.start(); // if there is no node movement, the calculation wont be done
  118. event.preventDefault();
  119. };
  120. /**
  121. * Stop zooming and unhighlight the zoom controls
  122. * @private
  123. */
  124. exports._stopZoom = function(event) {
  125. this.zoomIncrement = 0;
  126. event && event.preventDefault();
  127. };
  128. /**
  129. * Stop moving in the Y direction and unHighlight the up and down
  130. * @private
  131. */
  132. exports._yStopMoving = function(event) {
  133. this.yIncrement = 0;
  134. event && event.preventDefault();
  135. };
  136. /**
  137. * Stop moving in the X direction and unHighlight left and right.
  138. * @private
  139. */
  140. exports._xStopMoving = function(event) {
  141. this.xIncrement = 0;
  142. event && event.preventDefault();
  143. };