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.

538 lines
18 KiB

9 years ago
9 years ago
9 years ago
9 years ago
  1. var util = require('../../../util');
  2. import Label from './shared/Label'
  3. import CubicBezierEdge from './edges/CubicBezierEdge'
  4. import BezierEdgeDynamic from './edges/BezierEdgeDynamic'
  5. import BezierEdgeStatic from './edges/BezierEdgeStatic'
  6. import StraightEdge from './edges/StraightEdge'
  7. /**
  8. * @class Edge
  9. *
  10. * A edge connects two nodes
  11. * @param {Object} properties Object with options. Must contain
  12. * At least options from and to.
  13. * Available options: from (number),
  14. * to (number), label (string, color (string),
  15. * width (number), style (string),
  16. * length (number), title (string)
  17. * @param {Network} network A Network object, used to find and edge to
  18. * nodes.
  19. * @param {Object} constants An object with default values for
  20. * example for the color
  21. */
  22. class Edge {
  23. constructor(options, body, globalOptions) {
  24. if (body === undefined) {
  25. throw "No body provided";
  26. }
  27. this.options = util.bridgeObject(globalOptions);
  28. this.globalOptions = globalOptions;
  29. this.body = body;
  30. // initialize variables
  31. this.id = undefined;
  32. this.fromId = undefined;
  33. this.toId = undefined;
  34. this.selected = false;
  35. this.hover = false;
  36. this.labelDirty = true;
  37. this.colorDirty = true;
  38. this.baseWidth = this.options.width;
  39. this.baseFontSize = this.options.font.size;
  40. this.from = undefined; // a node
  41. this.to = undefined; // a node
  42. this.edgeType = undefined;
  43. this.connected = false;
  44. this.labelModule = new Label(this.body, this.options);
  45. this.setOptions(options);
  46. }
  47. /**
  48. * Set or overwrite options for the edge
  49. * @param {Object} options an object with options
  50. * @param doNotEmit
  51. */
  52. setOptions(options) {
  53. if (!options) {
  54. return;
  55. }
  56. this.colorDirty = true;
  57. Edge.parseOptions(this.options, options, true, this.globalOptions);
  58. if (options.id !== undefined) {this.id = options.id;}
  59. if (options.from !== undefined) {this.fromId = options.from;}
  60. if (options.to !== undefined) {this.toId = options.to;}
  61. if (options.title !== undefined) {this.title = options.title;}
  62. if (options.value !== undefined) {options.value = parseFloat(options.value);}
  63. // update label Module
  64. this.updateLabelModule();
  65. let dataChanged = this.updateEdgeType();
  66. // if anything has been updates, reset the selection width and the hover width
  67. this._setInteractionWidths();
  68. // A node is connected when it has a from and to node that both exist in the network.body.nodes.
  69. this.connect();
  70. if (options.hidden !== undefined || options.physics !== undefined) {
  71. dataChanged = true;
  72. }
  73. return dataChanged;
  74. }
  75. static parseOptions(parentOptions, newOptions, allowDeletion = false, globalOptions = {}) {
  76. var fields = [
  77. 'arrowStrikethrough',
  78. 'id',
  79. 'from',
  80. 'hidden',
  81. 'hoverWidth',
  82. 'label',
  83. 'labelHighlightBold',
  84. 'length',
  85. 'line',
  86. 'opacity',
  87. 'physics',
  88. 'scaling',
  89. 'selectionWidth',
  90. 'selfReferenceSize',
  91. 'to',
  92. 'title',
  93. 'value',
  94. 'width'
  95. ];
  96. // only deep extend the items in the field array. These do not have shorthand.
  97. util.selectiveDeepExtend(fields, parentOptions, newOptions, allowDeletion);
  98. util.mergeOptions(parentOptions, newOptions, 'smooth', allowDeletion, globalOptions);
  99. util.mergeOptions(parentOptions, newOptions, 'shadow', allowDeletion, globalOptions);
  100. if (newOptions.dashes !== undefined && newOptions.dashes !== null) {
  101. parentOptions.dashes = newOptions.dashes;
  102. }
  103. else if (allowDeletion === true && newOptions.dashes === null) {
  104. parentOptions.dashes = Object.create(globalOptions.dashes); // this sets the pointer of the option back to the global option.
  105. }
  106. // set the scaling newOptions
  107. if (newOptions.scaling !== undefined && newOptions.scaling !== null) {
  108. if (newOptions.scaling.min !== undefined) {parentOptions.scaling.min = newOptions.scaling.min;}
  109. if (newOptions.scaling.max !== undefined) {parentOptions.scaling.max = newOptions.scaling.max;}
  110. util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label', allowDeletion, globalOptions.scaling);
  111. }
  112. else if (allowDeletion === true && newOptions.scaling === null) {
  113. parentOptions.scaling = Object.create(globalOptions.scaling); // this sets the pointer of the option back to the global option.
  114. }
  115. // handle multiple input cases for arrows
  116. if (newOptions.arrows !== undefined && newOptions.arrows !== null) {
  117. if (typeof newOptions.arrows === 'string') {
  118. let arrows = newOptions.arrows.toLowerCase();
  119. if (arrows.indexOf("to") != -1) {parentOptions.arrows.to.enabled = true;}
  120. if (arrows.indexOf("middle") != -1) {parentOptions.arrows.middle.enabled = true;}
  121. if (arrows.indexOf("from") != -1) {parentOptions.arrows.from.enabled = true;}
  122. }
  123. else if (typeof newOptions.arrows === 'object') {
  124. util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'to', allowDeletion, globalOptions.arrows);
  125. util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'middle', allowDeletion, globalOptions.arrows);
  126. util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'from', allowDeletion, globalOptions.arrows);
  127. }
  128. else {
  129. throw new Error("The arrow newOptions can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(newOptions.arrows));
  130. }
  131. }
  132. else if (allowDeletion === true && newOptions.arrows === null) {
  133. parentOptions.arrows = Object.create(globalOptions.arrows); // this sets the pointer of the option back to the global option.
  134. }
  135. // handle multiple input cases for color
  136. if (newOptions.color !== undefined && newOptions.color !== null) {
  137. // make a copy of the parent object in case this is referring to the global one (due to object create once, then update)
  138. parentOptions.color = util.deepExtend({}, parentOptions.color, true);
  139. if (util.isString(newOptions.color)) {
  140. parentOptions.color.color = newOptions.color;
  141. parentOptions.color.highlight = newOptions.color;
  142. parentOptions.color.hover = newOptions.color;
  143. parentOptions.color.inherit = false;
  144. }
  145. else {
  146. let colorsDefined = false;
  147. if (newOptions.color.color !== undefined) {parentOptions.color.color = newOptions.color.color; colorsDefined = true;}
  148. if (newOptions.color.highlight !== undefined) {parentOptions.color.highlight = newOptions.color.highlight; colorsDefined = true;}
  149. if (newOptions.color.hover !== undefined) {parentOptions.color.hover = newOptions.color.hover; colorsDefined = true;}
  150. if (newOptions.color.inherit !== undefined) {parentOptions.color.inherit = newOptions.color.inherit;}
  151. if (newOptions.color.opacity !== undefined) {parentOptions.color.opacity = Math.min(1,Math.max(0,newOptions.color.opacity));}
  152. if (newOptions.color.inherit === undefined && colorsDefined === true) {
  153. parentOptions.color.inherit = false;
  154. }
  155. }
  156. }
  157. else if (allowDeletion === true && newOptions.color === null) {
  158. parentOptions.color = util.bridgeObject(globalOptions.color); // set the object back to the global options
  159. }
  160. // handle the font settings
  161. if (newOptions.font !== undefined && newOptions.font !== null) {
  162. Label.parseOptions(parentOptions.font, newOptions);
  163. }
  164. else if (allowDeletion === true && newOptions.font === null) {
  165. parentOptions.font = util.bridgeObject(globalOptions.font); // set the object back to the global options
  166. }
  167. }
  168. /**
  169. * update the options in the label module
  170. */
  171. updateLabelModule() {
  172. this.labelModule.setOptions(this.options, true);
  173. if (this.labelModule.baseSize !== undefined) {
  174. this.baseFontSize = this.labelModule.baseSize;
  175. }
  176. }
  177. /**
  178. * update the edge type, set the options
  179. * @returns {boolean}
  180. */
  181. updateEdgeType() {
  182. let dataChanged = false;
  183. let changeInType = true;
  184. let smooth = this.options.smooth;
  185. if (this.edgeType !== undefined) {
  186. if (this.edgeType instanceof BezierEdgeDynamic && smooth.enabled === true && smooth.type === 'dynamic') {changeInType = false;}
  187. if (this.edgeType instanceof CubicBezierEdge && smooth.enabled === true && smooth.type === 'cubicBezier') {changeInType = false;}
  188. if (this.edgeType instanceof BezierEdgeStatic && smooth.enabled === true && smooth.type !== 'dynamic' && smooth.type !== 'cubicBezier') {changeInType = false;}
  189. if (this.edgeType instanceof StraightEdge && smooth.enabled === false) {changeInType = false;}
  190. if (changeInType === true) {
  191. dataChanged = this.cleanup();
  192. }
  193. }
  194. if (changeInType === true) {
  195. if (this.options.smooth.enabled === true) {
  196. if (this.options.smooth.type === 'dynamic') {
  197. dataChanged = true;
  198. this.edgeType = new BezierEdgeDynamic(this.options, this.body, this.labelModule);
  199. }
  200. else if (this.options.smooth.type === 'cubicBezier') {
  201. this.edgeType = new CubicBezierEdge(this.options, this.body, this.labelModule);
  202. }
  203. else {
  204. this.edgeType = new BezierEdgeStatic(this.options, this.body, this.labelModule);
  205. }
  206. }
  207. else {
  208. this.edgeType = new StraightEdge(this.options, this.body, this.labelModule);
  209. }
  210. }
  211. else {
  212. // if nothing changes, we just set the options.
  213. this.edgeType.setOptions(this.options);
  214. }
  215. return dataChanged;
  216. }
  217. /**
  218. * Connect an edge to its nodes
  219. */
  220. connect() {
  221. this.disconnect();
  222. this.from = this.body.nodes[this.fromId] || undefined;
  223. this.to = this.body.nodes[this.toId] || undefined;
  224. this.connected = (this.from !== undefined && this.to !== undefined);
  225. if (this.connected === true) {
  226. this.from.attachEdge(this);
  227. this.to.attachEdge(this);
  228. }
  229. else {
  230. if (this.from) {
  231. this.from.detachEdge(this);
  232. }
  233. if (this.to) {
  234. this.to.detachEdge(this);
  235. }
  236. }
  237. this.edgeType.connect();
  238. }
  239. /**
  240. * Disconnect an edge from its nodes
  241. */
  242. disconnect() {
  243. if (this.from) {
  244. this.from.detachEdge(this);
  245. this.from = undefined;
  246. }
  247. if (this.to) {
  248. this.to.detachEdge(this);
  249. this.to = undefined;
  250. }
  251. this.connected = false;
  252. }
  253. /**
  254. * get the title of this edge.
  255. * @return {string} title The title of the edge, or undefined when no title
  256. * has been set.
  257. */
  258. getTitle() {
  259. return this.title;
  260. }
  261. /**
  262. * check if this node is selecte
  263. * @return {boolean} selected True if node is selected, else false
  264. */
  265. isSelected() {
  266. return this.selected;
  267. }
  268. /**
  269. * Retrieve the value of the edge. Can be undefined
  270. * @return {Number} value
  271. */
  272. getValue() {
  273. return this.options.value;
  274. }
  275. /**
  276. * Adjust the value range of the edge. The edge will adjust it's width
  277. * based on its value.
  278. * @param {Number} min
  279. * @param {Number} max
  280. * @param total
  281. */
  282. setValueRange(min, max, total) {
  283. if (this.options.value !== undefined) {
  284. var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
  285. var widthDiff = this.options.scaling.max - this.options.scaling.min;
  286. if (this.options.scaling.label.enabled === true) {
  287. var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
  288. this.options.font.size = this.options.scaling.label.min + scale * fontDiff;
  289. }
  290. this.options.width = this.options.scaling.min + scale * widthDiff;
  291. }
  292. else {
  293. this.options.width = this.baseWidth;
  294. this.options.font.size = this.baseFontSize;
  295. }
  296. this._setInteractionWidths();
  297. this.updateLabelModule();
  298. }
  299. _setInteractionWidths() {
  300. if (typeof this.options.hoverWidth === 'function') {
  301. this.edgeType.hoverWidth = this.options.hoverWidth(this.options.width);
  302. }
  303. else {
  304. this.edgeType.hoverWidth = this.options.hoverWidth + this.options.width;
  305. }
  306. if (typeof this.options.selectionWidth === 'function') {
  307. this.edgeType.selectionWidth = this.options.selectionWidth(this.options.width);
  308. }
  309. else {
  310. this.edgeType.selectionWidth = this.options.selectionWidth + this.options.width;
  311. }
  312. }
  313. /**
  314. * Redraw a edge
  315. * Draw this edge in the given canvas
  316. * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
  317. * @param {CanvasRenderingContext2D} ctx
  318. */
  319. draw(ctx) {
  320. // get the via node from the edge type
  321. let viaNode = this.edgeType.getViaNode();
  322. let arrowData = {};
  323. // restore edge targets to defaults
  324. this.edgeType.fromPoint = this.from;
  325. this.edgeType.toPoint = this.to;
  326. // from and to arrows give a different end point for edges. we set them here
  327. if (this.options.arrows.from.enabled === true) {
  328. arrowData.from = this.edgeType.getArrowData(ctx,'from', viaNode, this.selected, this.hover);
  329. if (this.options.arrowStrikethrough === false)
  330. this.edgeType.fromPoint = arrowData.from.core;
  331. }
  332. if (this.options.arrows.to.enabled === true) {
  333. arrowData.to = this.edgeType.getArrowData(ctx,'to', viaNode, this.selected, this.hover);
  334. if (this.options.arrowStrikethrough === false)
  335. this.edgeType.toPoint = arrowData.to.core;
  336. }
  337. // the middle arrow depends on the line, which can depend on the to and from arrows so we do this one lastly.
  338. if (this.options.arrows.middle.enabled === true) {
  339. arrowData.middle = this.edgeType.getArrowData(ctx,'middle', viaNode, this.selected, this.hover);
  340. }
  341. // draw everything
  342. this.edgeType.drawLine(ctx, this.selected, this.hover, viaNode);
  343. this.drawArrows(ctx, arrowData);
  344. this.drawLabel (ctx, viaNode);
  345. }
  346. drawArrows(ctx, arrowData) {
  347. if (this.options.arrows.from.enabled === true) {this.edgeType.drawArrowHead(ctx, this.selected, this.hover, arrowData.from);}
  348. if (this.options.arrows.middle.enabled === true) {this.edgeType.drawArrowHead(ctx, this.selected, this.hover, arrowData.middle);}
  349. if (this.options.arrows.to.enabled === true) {this.edgeType.drawArrowHead(ctx, this.selected, this.hover, arrowData.to);}
  350. }
  351. drawLabel(ctx, viaNode) {
  352. if (this.options.label !== undefined) {
  353. // set style
  354. var node1 = this.from;
  355. var node2 = this.to;
  356. var selected = (this.from.selected || this.to.selected || this.selected);
  357. if (node1.id != node2.id) {
  358. this.labelModule.pointToSelf = false;
  359. var point = this.edgeType.getPoint(0.5, viaNode);
  360. ctx.save();
  361. // if the label has to be rotated:
  362. if (this.options.font.align !== "horizontal") {
  363. this.labelModule.calculateLabelSize(ctx,selected,point.x,point.y);
  364. ctx.translate(point.x, this.labelModule.size.yLine);
  365. this._rotateForLabelAlignment(ctx);
  366. }
  367. // draw the label
  368. this.labelModule.draw(ctx, point.x, point.y, selected);
  369. ctx.restore();
  370. }
  371. else {
  372. // Ignore the orientations.
  373. this.labelModule.pointToSelf = true;
  374. var x, y;
  375. var radius = this.options.selfReferenceSize;
  376. if (node1.shape.width > node1.shape.height) {
  377. x = node1.x + node1.shape.width * 0.5;
  378. y = node1.y - radius;
  379. }
  380. else {
  381. x = node1.x + radius;
  382. y = node1.y - node1.shape.height * 0.5;
  383. }
  384. point = this._pointOnCircle(x, y, radius, 0.125);
  385. this.labelModule.draw(ctx, point.x, point.y, selected);
  386. }
  387. }
  388. }
  389. /**
  390. * Check if this object is overlapping with the provided object
  391. * @param {Object} obj an object with parameters left, top
  392. * @return {boolean} True if location is located on the edge
  393. */
  394. isOverlappingWith(obj) {
  395. if (this.connected) {
  396. var distMax = 10;
  397. var xFrom = this.from.x;
  398. var yFrom = this.from.y;
  399. var xTo = this.to.x;
  400. var yTo = this.to.y;
  401. var xObj = obj.left;
  402. var yObj = obj.top;
  403. var dist = this.edgeType.getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
  404. return (dist < distMax);
  405. }
  406. else {
  407. return false
  408. }
  409. }
  410. /**
  411. * Rotates the canvas so the text is most readable
  412. * @param {CanvasRenderingContext2D} ctx
  413. * @private
  414. */
  415. _rotateForLabelAlignment(ctx) {
  416. var dy = this.from.y - this.to.y;
  417. var dx = this.from.x - this.to.x;
  418. var angleInDegrees = Math.atan2(dy, dx);
  419. // rotate so label it is readable
  420. if ((angleInDegrees < -1 && dx < 0) || (angleInDegrees > 0 && dx < 0)) {
  421. angleInDegrees = angleInDegrees + Math.PI;
  422. }
  423. ctx.rotate(angleInDegrees);
  424. }
  425. /**
  426. * Get a point on a circle
  427. * @param {Number} x
  428. * @param {Number} y
  429. * @param {Number} radius
  430. * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
  431. * @return {Object} point
  432. * @private
  433. */
  434. _pointOnCircle(x, y, radius, percentage) {
  435. var angle = percentage * 2 * Math.PI;
  436. return {
  437. x: x + radius * Math.cos(angle),
  438. y: y - radius * Math.sin(angle)
  439. }
  440. }
  441. select() {
  442. this.selected = true;
  443. }
  444. unselect() {
  445. this.selected = false;
  446. }
  447. /**
  448. * cleans all required things on delete
  449. * @returns {*}
  450. */
  451. cleanup() {
  452. return this.edgeType.cleanup();
  453. }
  454. }
  455. export default Edge;