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.

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