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.

230 lines
7.8 KiB

  1. var Hammer = require('../../module/hammer');
  2. var hammerUtil = require('../../hammerUtil');
  3. var util = require('../../util');
  4. /**
  5. * Create the main frame for the Network.
  6. * This function is executed once when a Network object is created. The frame
  7. * contains a canvas, and this canvas contains all objects like the axis and
  8. * nodes.
  9. * @private
  10. */
  11. class Canvas {
  12. constructor(body) {
  13. this.body = body;
  14. this.options = {};
  15. this.defaultOptions = {
  16. width:'100%',
  17. height:'100%'
  18. }
  19. util.extend(this.options, this.defaultOptions);
  20. this.body.emitter.once("resize", (obj) => {this.body.view.translation.x = obj.width * 0.5; this.body.view.translation.y = obj.height * 0.5;});
  21. this.body.emitter.on("destroy", () => this.hammer.destroy());
  22. this.pixelRatio = 1;
  23. }
  24. setOptions(options) {
  25. if (options !== undefined) {
  26. util.deepExtend(this.options, options);
  27. }
  28. }
  29. create() {
  30. // remove all elements from the container element.
  31. while (this.body.container.hasChildNodes()) {
  32. this.body.container.removeChild(this.body.container.firstChild);
  33. }
  34. this.frame = document.createElement('div');
  35. this.frame.className = 'vis network-frame';
  36. this.frame.style.position = 'relative';
  37. this.frame.style.overflow = 'hidden';
  38. this.frame.tabIndex = 900;
  39. //////////////////////////////////////////////////////////////////
  40. this.frame.canvas = document.createElement("canvas");
  41. this.frame.canvas.style.position = 'relative';
  42. this.frame.appendChild(this.frame.canvas);
  43. if (!this.frame.canvas.getContext) {
  44. var noCanvas = document.createElement( 'DIV' );
  45. noCanvas.style.color = 'red';
  46. noCanvas.style.fontWeight = 'bold' ;
  47. noCanvas.style.padding = '10px';
  48. noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
  49. this.frame.canvas.appendChild(noCanvas);
  50. }
  51. else {
  52. var ctx = this.frame.canvas.getContext("2d");
  53. this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
  54. ctx.mozBackingStorePixelRatio ||
  55. ctx.msBackingStorePixelRatio ||
  56. ctx.oBackingStorePixelRatio ||
  57. ctx.backingStorePixelRatio || 1);
  58. this.frame.canvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
  59. }
  60. // add the frame to the container element
  61. this.body.container.appendChild(this.frame);
  62. this.body.view.scale = 1;
  63. this.body.view.translation = {x: 0.5 * this.frame.canvas.clientWidth,y: 0.5 * this.frame.canvas.clientHeight};
  64. this._bindHammer();
  65. }
  66. /**
  67. * This function binds hammer, it can be repeated over and over due to the uniqueness check.
  68. * @private
  69. */
  70. _bindHammer() {
  71. if (this.hammer !== undefined) {
  72. this.hammer.destroy();
  73. }
  74. this.drag = {};
  75. this.pinch = {};
  76. // init hammer
  77. this.hammer = new Hammer(this.frame.canvas);
  78. this.hammer.get('pinch').set({enable: true});
  79. this.hammer.on('tap', this.body.eventListeners.onTap );
  80. this.hammer.on('doubletap', this.body.eventListeners.onDoubleTap );
  81. this.hammer.on('press', this.body.eventListeners.onHold );
  82. hammerUtil.onTouch(this.hammer, this.body.eventListeners.onTouch );
  83. this.hammer.on('panstart', this.body.eventListeners.onDragStart );
  84. this.hammer.on('panmove', this.body.eventListeners.onDrag );
  85. this.hammer.on('panend', this.body.eventListeners.onDragEnd );
  86. this.hammer.on('pinch', this.body.eventListeners.onPinch );
  87. // TODO: neatly cleanup these handlers when re-creating the Canvas, IF these are done with hammer, event.stopPropagation will not work?
  88. this.frame.canvas.addEventListener('mousewheel', this.body.eventListeners.onMouseWheel);
  89. this.frame.canvas.addEventListener('DOMMouseScroll', this.body.eventListeners.onMouseWheel);
  90. this.frame.canvas.addEventListener('mousemove', this.body.eventListeners.onMouseMove);
  91. this.hammerFrame = new Hammer(this.frame);
  92. hammerUtil.onRelease(this.hammerFrame, this.body.eventListeners.onRelease);
  93. }
  94. /**
  95. * Set a new size for the network
  96. * @param {string} width Width in pixels or percentage (for example '800px'
  97. * or '50%')
  98. * @param {string} height Height in pixels or percentage (for example '400px'
  99. * or '30%')
  100. */
  101. setSize(width = this.options.width, height = this.options.height) {
  102. var emitEvent = false;
  103. var oldWidth = this.frame.canvas.width;
  104. var oldHeight = this.frame.canvas.height;
  105. if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) {
  106. this.frame.style.width = width;
  107. this.frame.style.height = height;
  108. this.frame.canvas.style.width = '100%';
  109. this.frame.canvas.style.height = '100%';
  110. this.frame.canvas.width = this.frame.canvas.clientWidth * this.pixelRatio;
  111. this.frame.canvas.height = this.frame.canvas.clientHeight * this.pixelRatio;
  112. this.options.width = width;
  113. this.options.height = height;
  114. emitEvent = true;
  115. }
  116. else {
  117. // this would adapt the width of the canvas to the width from 100% if and only if
  118. // there is a change.
  119. if (this.frame.canvas.width != this.frame.canvas.clientWidth * this.pixelRatio) {
  120. this.frame.canvas.width = this.frame.canvas.clientWidth * this.pixelRatio;
  121. emitEvent = true;
  122. }
  123. if (this.frame.canvas.height != this.frame.canvas.clientHeight * this.pixelRatio) {
  124. this.frame.canvas.height = this.frame.canvas.clientHeight * this.pixelRatio;
  125. emitEvent = true;
  126. }
  127. }
  128. if (emitEvent === true) {
  129. this.body.emitter.emit('resize', {width:this.frame.canvas.width / this.pixelRatio, height:this.frame.canvas.height / this.pixelRatio, oldWidth: oldWidth / this.pixelRatio, oldHeight: oldHeight / this.pixelRatio});
  130. }
  131. };
  132. /**
  133. * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
  134. * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
  135. * @param {number} x
  136. * @returns {number}
  137. * @private
  138. */
  139. _XconvertDOMtoCanvas(x) {
  140. return (x - this.body.view.translation.x) / this.body.view.scale;
  141. }
  142. /**
  143. * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
  144. * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
  145. * @param {number} x
  146. * @returns {number}
  147. * @private
  148. */
  149. _XconvertCanvasToDOM(x) {
  150. return x * this.body.view.scale + this.body.view.translation.x;
  151. }
  152. /**
  153. * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
  154. * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
  155. * @param {number} y
  156. * @returns {number}
  157. * @private
  158. */
  159. _YconvertDOMtoCanvas(y) {
  160. return (y - this.body.view.translation.y) / this.body.view.scale;
  161. }
  162. /**
  163. * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
  164. * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
  165. * @param {number} y
  166. * @returns {number}
  167. * @private
  168. */
  169. _YconvertCanvasToDOM(y) {
  170. return y * this.body.view.scale + this.body.view.translation.y;
  171. }
  172. /**
  173. *
  174. * @param {object} pos = {x: number, y: number}
  175. * @returns {{x: number, y: number}}
  176. * @constructor
  177. */
  178. canvasToDOM (pos) {
  179. return {x: this._XconvertCanvasToDOM(pos.x), y: this._YconvertCanvasToDOM(pos.y)};
  180. }
  181. /**
  182. *
  183. * @param {object} pos = {x: number, y: number}
  184. * @returns {{x: number, y: number}}
  185. * @constructor
  186. */
  187. DOMtoCanvas (pos) {
  188. return {x: this._XconvertDOMtoCanvas(pos.x), y: this._YconvertDOMtoCanvas(pos.y)};
  189. }
  190. }
  191. export default Canvas;