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.

245 lines
8.4 KiB

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