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.

303 lines
8.6 KiB

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  1. if (typeof window !== 'undefined') {
  2. window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
  3. window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  4. }
  5. let util = require('../../util');
  6. class CanvasRenderer {
  7. constructor(body, canvas) {
  8. this.body = body;
  9. this.canvas = canvas;
  10. this.redrawRequested = false;
  11. this.renderTimer = undefined;
  12. this.requiresTimeout = true;
  13. this.renderingActive = false;
  14. this.renderRequests = 0;
  15. this.pixelRatio = undefined;
  16. this.allowRedrawRequests = true;
  17. this.dragging = false;
  18. this.options = {};
  19. this.defaultOptions = {
  20. hideEdgesOnDrag: false,
  21. hideNodesOnDrag: false
  22. };
  23. util.extend(this.options, this.defaultOptions);
  24. this._determineBrowserMethod();
  25. this.bindEventListeners();
  26. }
  27. bindEventListeners() {
  28. this.body.emitter.on("dragStart", () => {
  29. this.dragging = true;
  30. });
  31. this.body.emitter.on("dragEnd", () => this.dragging = false);
  32. this.body.emitter.on("_redraw", () => {
  33. if (this.renderingActive === false) {
  34. this._redraw();
  35. }
  36. });
  37. this.body.emitter.on("_blockRedrawRequests", () => {this.allowRedrawRequests = false;});
  38. this.body.emitter.on("_allowRedrawRequests", () => {this.allowRedrawRequests = true; });
  39. this.body.emitter.on("_requestRedraw", this._requestRedraw.bind(this));
  40. this.body.emitter.on("_startRendering", () => {
  41. this.renderRequests += 1;
  42. this.renderingActive = true;
  43. this._startRendering();
  44. });
  45. this.body.emitter.on("_stopRendering", () => {
  46. this.renderRequests -= 1;
  47. this.renderingActive = this.renderRequests > 0;
  48. this.renderTimer = undefined;
  49. });
  50. this.body.emitter.on('destroy', () => {
  51. this.renderRequests = 0;
  52. this.renderingActive = false;
  53. if (this.requiresTimeout === true) {
  54. clearTimeout(this.renderTimer);
  55. }
  56. else {
  57. cancelAnimationFrame(this.renderTimer);
  58. }
  59. this.body.emitter.off();
  60. });
  61. }
  62. setOptions(options) {
  63. if (options !== undefined) {
  64. let fields = ['hideEdgesOnDrag','hideNodesOnDrag'];
  65. util.selectiveDeepExtend(fields,this.options, options);
  66. }
  67. }
  68. _startRendering() {
  69. if (this.renderingActive === true) {
  70. if (this.renderTimer === undefined) {
  71. if (this.requiresTimeout === true) {
  72. this.renderTimer = window.setTimeout(this._renderStep.bind(this), this.simulationInterval); // wait this.renderTimeStep milliseconds and perform the animation step function
  73. }
  74. else {
  75. this.renderTimer = window.requestAnimationFrame(this._renderStep.bind(this)); // wait this.renderTimeStep milliseconds and perform the animation step function
  76. }
  77. }
  78. }
  79. }
  80. _renderStep() {
  81. if (this.renderingActive === true) {
  82. // reset the renderTimer so a new scheduled animation step can be set
  83. this.renderTimer = undefined;
  84. if (this.requiresTimeout === true) {
  85. // this schedules a new simulation step
  86. this._startRendering();
  87. }
  88. this._redraw();
  89. if (this.requiresTimeout === false) {
  90. // this schedules a new simulation step
  91. this._startRendering();
  92. }
  93. }
  94. }
  95. /**
  96. * Redraw the network with the current data
  97. * chart will be resized too.
  98. */
  99. redraw() {
  100. this.body.emitter.emit('setSize');
  101. this._redraw();
  102. }
  103. /**
  104. * Redraw the network with the current data
  105. * @param hidden | used to get the first estimate of the node sizes. only the nodes are drawn after which they are quickly drawn over.
  106. * @private
  107. */
  108. _requestRedraw() {
  109. if (this.redrawRequested !== true && this.renderingActive === false && this.allowRedrawRequests === true) {
  110. this.redrawRequested = true;
  111. if (this.requiresTimeout === true) {
  112. window.setTimeout(this._redraw.bind(this, false), 0);
  113. }
  114. else {
  115. window.requestAnimationFrame(this._redraw.bind(this, false));
  116. }
  117. }
  118. }
  119. _redraw(hidden = false) {
  120. this.body.emitter.emit("initRedraw");
  121. this.redrawRequested = false;
  122. let ctx = this.canvas.frame.canvas.getContext('2d');
  123. // when the container div was hidden, this fixes it back up!
  124. if (this.canvas.frame.canvas.width === 0 || this.canvas.frame.canvas.height === 0) {
  125. this.canvas.setSize();
  126. }
  127. if (this.pixelRatio === undefined) {
  128. this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
  129. ctx.mozBackingStorePixelRatio ||
  130. ctx.msBackingStorePixelRatio ||
  131. ctx.oBackingStorePixelRatio ||
  132. ctx.backingStorePixelRatio || 1);
  133. }
  134. ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
  135. // clear the canvas
  136. let w = this.canvas.frame.canvas.clientWidth;
  137. let h = this.canvas.frame.canvas.clientHeight;
  138. ctx.clearRect(0, 0, w, h);
  139. this.body.emitter.emit("beforeDrawing", ctx);
  140. // set scaling and translation
  141. ctx.save();
  142. ctx.translate(this.body.view.translation.x, this.body.view.translation.y);
  143. ctx.scale(this.body.view.scale, this.body.view.scale);
  144. if (hidden === false) {
  145. if (this.dragging === false || (this.dragging === true && this.options.hideEdgesOnDrag === false)) {
  146. this._drawEdges(ctx);
  147. }
  148. }
  149. if (this.dragging === false || (this.dragging === true && this.options.hideNodesOnDrag === false)) {
  150. this._drawNodes(ctx, hidden);
  151. }
  152. if (this.controlNodesActive === true) {
  153. this._drawControlNodes(ctx);
  154. }
  155. //this.physics.nodesSolver._debug(ctx,"#F00F0F");
  156. this.body.emitter.emit("afterDrawing", ctx);
  157. // restore original scaling and translation
  158. ctx.restore();
  159. if (hidden === true) {
  160. ctx.clearRect(0, 0, w, h);
  161. }
  162. }
  163. /**
  164. * Redraw all nodes
  165. * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
  166. * @param {CanvasRenderingContext2D} ctx
  167. * @param {Boolean} [alwaysShow]
  168. * @private
  169. */
  170. _drawNodes(ctx, alwaysShow = false) {
  171. let nodes = this.body.nodes;
  172. let nodeIndices = this.body.nodeIndices;
  173. let node;
  174. let selected = [];
  175. let margin = 20;
  176. let topLeft = this.canvas.DOMtoCanvas({x:-margin,y:-margin});
  177. let bottomRight = this.canvas.DOMtoCanvas({
  178. x: this.canvas.frame.canvas.clientWidth+margin,
  179. y: this.canvas.frame.canvas.clientHeight+margin
  180. });
  181. let viewableArea = {top:topLeft.y,left:topLeft.x,bottom:bottomRight.y,right:bottomRight.x};
  182. // draw unselected nodes;
  183. for (let i = 0; i < nodeIndices.length; i++) {
  184. node = nodes[nodeIndices[i]];
  185. // set selected nodes aside
  186. if (node.isSelected()) {
  187. selected.push(nodeIndices[i]);
  188. }
  189. else {
  190. if (alwaysShow === true) {
  191. node.draw(ctx);
  192. }
  193. else if (node.isBoundingBoxOverlappingWith(viewableArea) === true) {
  194. node.draw(ctx);
  195. }
  196. }
  197. }
  198. // draw the selected nodes on top
  199. for (let i = 0; i < selected.length; i++) {
  200. node = nodes[selected[i]];
  201. node.draw(ctx);
  202. }
  203. }
  204. /**
  205. * Redraw all edges
  206. * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
  207. * @param {CanvasRenderingContext2D} ctx
  208. * @private
  209. */
  210. _drawEdges(ctx) {
  211. let edges = this.body.edges;
  212. let edgeIndices = this.body.edgeIndices;
  213. let edge;
  214. for (let i = 0; i < edgeIndices.length; i++) {
  215. edge = edges[edgeIndices[i]];
  216. if (edge.connected === true) {
  217. edge.draw(ctx);
  218. }
  219. }
  220. }
  221. /**
  222. * Redraw all edges
  223. * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
  224. * @param {CanvasRenderingContext2D} ctx
  225. * @private
  226. */
  227. _drawControlNodes(ctx) {
  228. let edges = this.body.edges;
  229. let edgeIndices = this.body.edgeIndices;
  230. let edge;
  231. for (let i = 0; i < edgeIndices.length; i++) {
  232. edge = edges[edgeIndices[i]];
  233. edge._drawControlNodes(ctx);
  234. }
  235. }
  236. /**
  237. * Determine if the browser requires a setTimeout or a requestAnimationFrame. This was required because
  238. * some implementations (safari and IE9) did not support requestAnimationFrame
  239. * @private
  240. */
  241. _determineBrowserMethod() {
  242. if (typeof window !== 'undefined') {
  243. let browserType = navigator.userAgent.toLowerCase();
  244. this.requiresTimeout = false;
  245. if (browserType.indexOf('msie 9.0') != -1) { // IE 9
  246. this.requiresTimeout = true;
  247. }
  248. else if (browserType.indexOf('safari') != -1) { // safari
  249. if (browserType.indexOf('chrome') <= -1) {
  250. this.requiresTimeout = true;
  251. }
  252. }
  253. }
  254. else {
  255. this.requiresTimeout = true;
  256. }
  257. }
  258. }
  259. export default CanvasRenderer;