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.

205 lines
6.2 KiB

  1. /**
  2. * Created by Alex on 1/22/14.
  3. */
  4. var NavigationMixin = {
  5. _cleanNavigation : function() {
  6. // clean up previosu navigation items
  7. var wrapper = document.getElementById('network-navigation_wrapper');
  8. if (wrapper != null) {
  9. this.containerElement.removeChild(wrapper);
  10. }
  11. document.onmouseup = null;
  12. },
  13. /**
  14. * Creation of the navigation controls nodes. They are drawn over the rest of the nodes and are not affected by scale and translation
  15. * they have a triggerFunction which is called on click. If the position of the navigation controls is dependent
  16. * on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false.
  17. * This means that the location will be corrected by the _relocateNavigation function on a size change of the canvas.
  18. *
  19. * @private
  20. */
  21. _loadNavigationElements : function() {
  22. this._cleanNavigation();
  23. this.navigationDivs = {};
  24. var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
  25. var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
  26. this.navigationDivs['wrapper'] = document.createElement('div');
  27. this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
  28. this.navigationDivs['wrapper'].style.position = "absolute";
  29. this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
  30. this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
  31. this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
  32. for (var i = 0; i < navigationDivs.length; i++) {
  33. this.navigationDivs[navigationDivs[i]] = document.createElement('div');
  34. this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
  35. this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
  36. this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
  37. this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
  38. }
  39. document.onmouseup = this._stopMovement.bind(this);
  40. },
  41. /**
  42. * this stops all movement induced by the navigation buttons
  43. *
  44. * @private
  45. */
  46. _stopMovement : function() {
  47. this._xStopMoving();
  48. this._yStopMoving();
  49. this._stopZoom();
  50. },
  51. /**
  52. * stops the actions performed by page up and down etc.
  53. *
  54. * @param event
  55. * @private
  56. */
  57. _preventDefault : function(event) {
  58. if (event !== undefined) {
  59. if (event.preventDefault) {
  60. event.preventDefault();
  61. } else {
  62. event.returnValue = false;
  63. }
  64. }
  65. },
  66. /**
  67. * move the screen up
  68. * By using the increments, instead of adding a fixed number to the translation, we keep fluent and
  69. * instant movement. The onKeypress event triggers immediately, then pauses, then triggers frequently
  70. * To avoid this behaviour, we do the translation in the start loop.
  71. *
  72. * @private
  73. */
  74. _moveUp : function(event) {
  75. this.yIncrement = this.constants.keyboard.speed.y;
  76. this.start(); // if there is no node movement, the calculation wont be done
  77. this._preventDefault(event);
  78. if (this.navigationDivs) {
  79. this.navigationDivs['up'].className += " active";
  80. }
  81. },
  82. /**
  83. * move the screen down
  84. * @private
  85. */
  86. _moveDown : function(event) {
  87. this.yIncrement = -this.constants.keyboard.speed.y;
  88. this.start(); // if there is no node movement, the calculation wont be done
  89. this._preventDefault(event);
  90. if (this.navigationDivs) {
  91. this.navigationDivs['down'].className += " active";
  92. }
  93. },
  94. /**
  95. * move the screen left
  96. * @private
  97. */
  98. _moveLeft : function(event) {
  99. this.xIncrement = this.constants.keyboard.speed.x;
  100. this.start(); // if there is no node movement, the calculation wont be done
  101. this._preventDefault(event);
  102. if (this.navigationDivs) {
  103. this.navigationDivs['left'].className += " active";
  104. }
  105. },
  106. /**
  107. * move the screen right
  108. * @private
  109. */
  110. _moveRight : function(event) {
  111. this.xIncrement = -this.constants.keyboard.speed.y;
  112. this.start(); // if there is no node movement, the calculation wont be done
  113. this._preventDefault(event);
  114. if (this.navigationDivs) {
  115. this.navigationDivs['right'].className += " active";
  116. }
  117. },
  118. /**
  119. * Zoom in, using the same method as the movement.
  120. * @private
  121. */
  122. _zoomIn : function(event) {
  123. this.zoomIncrement = this.constants.keyboard.speed.zoom;
  124. this.start(); // if there is no node movement, the calculation wont be done
  125. this._preventDefault(event);
  126. if (this.navigationDivs) {
  127. this.navigationDivs['zoomIn'].className += " active";
  128. }
  129. },
  130. /**
  131. * Zoom out
  132. * @private
  133. */
  134. _zoomOut : function() {
  135. this.zoomIncrement = -this.constants.keyboard.speed.zoom;
  136. this.start(); // if there is no node movement, the calculation wont be done
  137. this._preventDefault(event);
  138. if (this.navigationDivs) {
  139. this.navigationDivs['zoomOut'].className += " active";
  140. }
  141. },
  142. /**
  143. * Stop zooming and unhighlight the zoom controls
  144. * @private
  145. */
  146. _stopZoom : function() {
  147. this.zoomIncrement = 0;
  148. if (this.navigationDivs) {
  149. this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
  150. this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
  151. }
  152. },
  153. /**
  154. * Stop moving in the Y direction and unHighlight the up and down
  155. * @private
  156. */
  157. _yStopMoving : function() {
  158. this.yIncrement = 0;
  159. if (this.navigationDivs) {
  160. this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
  161. this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
  162. }
  163. },
  164. /**
  165. * Stop moving in the X direction and unHighlight left and right.
  166. * @private
  167. */
  168. _xStopMoving : function() {
  169. this.xIncrement = 0;
  170. if (this.navigationDivs) {
  171. this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
  172. this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
  173. }
  174. }
  175. };