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.

519 lines
17 KiB

9 years ago
9 years ago
9 years ago
  1. var util = require('../../../util');
  2. import Label from './shared/Label'
  3. import Box from './nodes/shapes/Box'
  4. import Circle from './nodes/shapes/Circle'
  5. import CircularImage from './nodes/shapes/CircularImage'
  6. import Database from './nodes/shapes/Database'
  7. import Diamond from './nodes/shapes/Diamond'
  8. import Dot from './nodes/shapes/Dot'
  9. import Ellipse from './nodes/shapes/Ellipse'
  10. import Icon from './nodes/shapes/Icon'
  11. import Image from './nodes/shapes/Image'
  12. import Square from './nodes/shapes/Square'
  13. import Star from './nodes/shapes/Star'
  14. import Text from './nodes/shapes/Text'
  15. import Triangle from './nodes/shapes/Triangle'
  16. import TriangleDown from './nodes/shapes/TriangleDown'
  17. import Validator from "../../../shared/Validator";
  18. import {printStyle} from "../../../shared/Validator";
  19. /**
  20. * @class Node
  21. * A node. A node can be connected to other nodes via one or multiple edges.
  22. * @param {object} options An object containing options for the node. All
  23. * options are optional, except for the id.
  24. * {number} id Id of the node. Required
  25. * {string} label Text label for the node
  26. * {number} x Horizontal position of the node
  27. * {number} y Vertical position of the node
  28. * {string} shape Node shape, available:
  29. * "database", "circle", "ellipse",
  30. * "box", "image", "text", "dot",
  31. * "star", "triangle", "triangleDown",
  32. * "square", "icon"
  33. * {string} image An image url
  34. * {string} title An title text, can be HTML
  35. * {anytype} group A group name or number
  36. * @param {Network.Images} imagelist A list with images. Only needed
  37. * when the node has an image
  38. * @param {Network.Groups} grouplist A list with groups. Needed for
  39. * retrieving group options
  40. * @param {Object} constants An object with default values for
  41. * example for the color
  42. *
  43. */
  44. class Node {
  45. constructor(options, body, imagelist, grouplist, globalOptions, defaultOptions, nodeOptions) {
  46. this.options = util.bridgeObject(globalOptions);
  47. this.globalOptions = globalOptions;
  48. this.defaultOptions = defaultOptions;
  49. this.nodeOptions = nodeOptions;
  50. this.body = body;
  51. this.edges = []; // all edges connected to this node
  52. // set defaults for the options
  53. this.id = undefined;
  54. this.imagelist = imagelist;
  55. this.grouplist = grouplist;
  56. // state options
  57. this.x = undefined;
  58. this.y = undefined;
  59. this.baseSize = this.options.size;
  60. this.baseFontSize = this.options.font.size;
  61. this.predefinedPosition = false; // used to check if initial fit should just take the range or approximate
  62. this.selected = false;
  63. this.hover = false;
  64. this.labelModule = new Label(this.body, this.options, false /* Not edge label */);
  65. this.setOptions(options);
  66. }
  67. /**
  68. * Attach a edge to the node
  69. * @param {Edge} edge
  70. */
  71. attachEdge(edge) {
  72. if (this.edges.indexOf(edge) === -1) {
  73. this.edges.push(edge);
  74. }
  75. }
  76. /**
  77. * Detach a edge from the node
  78. * @param {Edge} edge
  79. */
  80. detachEdge(edge) {
  81. var index = this.edges.indexOf(edge);
  82. if (index != -1) {
  83. this.edges.splice(index, 1);
  84. }
  85. }
  86. /**
  87. * Set or overwrite options for the node
  88. * @param {Object} options an object with options
  89. * @param {Object} constants and object with default, global options
  90. */
  91. setOptions(options) {
  92. let currentShape = this.options.shape;
  93. if (!options) {
  94. return;
  95. }
  96. // basic options
  97. if (options.id !== undefined) {this.id = options.id;}
  98. if (this.id === undefined) {
  99. throw "Node must have an id";
  100. }
  101. // set these options locally
  102. // clear x and y positions
  103. if (options.x !== undefined) {
  104. if (options.x === null) {this.x = undefined; this.predefinedPosition = false;}
  105. else {this.x = parseInt(options.x); this.predefinedPosition = true;}
  106. }
  107. if (options.y !== undefined) {
  108. if (options.y === null) {this.y = undefined; this.predefinedPosition = false;}
  109. else {this.y = parseInt(options.y); this.predefinedPosition = true;}
  110. }
  111. if (options.size !== undefined) {this.baseSize = options.size;}
  112. if (options.value !== undefined) {options.value = parseFloat(options.value);}
  113. // copy group options
  114. if (typeof options.group === 'number' || (typeof options.group === 'string' && options.group != '')) {
  115. var groupObj = this.grouplist.get(options.group);
  116. util.deepExtend(this.options, groupObj);
  117. // the color object needs to be completely defined. Since groups can partially overwrite the colors, we parse it again, just in case.
  118. this.options.color = util.parseColor(this.options.color);
  119. }
  120. // this transforms all shorthands into fully defined options
  121. Node.parseOptions(this.options, options, true, this.globalOptions);
  122. this.choosify(options);
  123. // load the images
  124. if (this.options.image !== undefined) {
  125. if (this.imagelist) {
  126. if (typeof this.options.image === 'string') {
  127. this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage, this.id);
  128. } else {
  129. this.imageObj = this.imagelist.load(this.options.image.unselected, this.options.brokenImage, this.id);
  130. this.imageObjAlt = this.imagelist.load(this.options.image.selected, this.options.brokenImage, this.id);
  131. }
  132. }
  133. else {
  134. throw "No imagelist provided";
  135. }
  136. }
  137. this.updateLabelModule(options);
  138. this.updateShape(currentShape);
  139. this.labelModule.propagateFonts(this.nodeOptions, options, this.defaultOptions);
  140. if (options.hidden !== undefined || options.physics !== undefined) {
  141. return true;
  142. }
  143. return false;
  144. }
  145. /**
  146. * This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
  147. * Static so it can also be used by the handler.
  148. * @param parentOptions
  149. * @param newOptions
  150. * @param allowDeletion
  151. * @param globalOptions
  152. */
  153. static parseOptions(parentOptions, newOptions, allowDeletion = false, globalOptions = {}) {
  154. var fields = [
  155. 'color',
  156. 'font',
  157. 'fixed',
  158. 'shadow'
  159. ];
  160. util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
  161. // merge the shadow options into the parent.
  162. util.mergeOptions(parentOptions, newOptions, 'shadow', allowDeletion, globalOptions);
  163. // individual shape newOptions
  164. if (newOptions.color !== undefined && newOptions.color !== null) {
  165. let parsedColor = util.parseColor(newOptions.color);
  166. util.fillIfDefined(parentOptions.color, parsedColor);
  167. }
  168. else if (allowDeletion === true && newOptions.color === null) {
  169. parentOptions.color = util.bridgeObject(globalOptions.color); // set the object back to the global options
  170. }
  171. // handle the fixed options
  172. if (newOptions.fixed !== undefined && newOptions.fixed !== null) {
  173. if (typeof newOptions.fixed === 'boolean') {
  174. parentOptions.fixed.x = newOptions.fixed;
  175. parentOptions.fixed.y = newOptions.fixed;
  176. }
  177. else {
  178. if (newOptions.fixed.x !== undefined && typeof newOptions.fixed.x === 'boolean') {
  179. parentOptions.fixed.x = newOptions.fixed.x;
  180. }
  181. if (newOptions.fixed.y !== undefined && typeof newOptions.fixed.y === 'boolean') {
  182. parentOptions.fixed.y = newOptions.fixed.y;
  183. }
  184. }
  185. }
  186. // handle the font options
  187. if (newOptions.font !== undefined && newOptions.font !== null) {
  188. Label.parseOptions(parentOptions.font, newOptions);
  189. }
  190. else if (allowDeletion === true && newOptions.font === null) {
  191. parentOptions.font = util.bridgeObject(globalOptions.font); // set the object back to the global options
  192. }
  193. // handle the scaling options, specifically the label part
  194. if (newOptions.scaling !== undefined) {
  195. util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label', allowDeletion, globalOptions.scaling);
  196. }
  197. }
  198. choosify(options) {
  199. this.chooser = true;
  200. let pile = [options, this.options, this.defaultOptions];
  201. let chosen = util.topMost(pile, 'chosen');
  202. if (typeof chosen === 'boolean') {
  203. this.chooser = chosen;
  204. } else if (typeof chosen === 'object') {
  205. let chosenNode = util.topMost(pile, ['chosen', 'node']);
  206. if ((typeof chosenNode === 'boolean') || (typeof chosenNode === 'function')) {
  207. this.chooser = chosenNode;
  208. }
  209. }
  210. }
  211. getFormattingValues() {
  212. let values = {
  213. color: this.options.color.background,
  214. borderWidth: this.options.borderWidth,
  215. borderColor: this.options.color.border,
  216. size: this.options.size,
  217. borderDashes: this.options.shapeProperties.borderDashes,
  218. borderRadius: this.options.shapeProperties.borderRadius,
  219. shadow: this.options.shadow.enabled,
  220. shadowColor: this.options.shadow.color,
  221. shadowSize: this.options.shadow.size,
  222. shadowX: this.options.shadow.x,
  223. shadowY: this.options.shadow.y
  224. };
  225. if (this.selected || this.hover) {
  226. if (this.chooser === true) {
  227. if (this.selected) {
  228. values.borderWidth *= 2;
  229. values.color = this.options.color.highlight.background;
  230. values.borderColor = this.options.color.highlight.border;
  231. values.shadow = this.options.shadow.enabled;
  232. } else if (this.hover) {
  233. values.color = this.options.color.hover.background;
  234. values.borderColor = this.options.color.hover.border;
  235. values.shadow = this.options.shadow.enabled;
  236. }
  237. } else if (typeof this.chooser === 'function') {
  238. this.chooser(values, this.options.id, this.selected, this.hover);
  239. if (values.shadow === false) {
  240. if ((values.shadowColor !== this.options.shadow.color) ||
  241. (values.shadowSize !== this.options.shadow.size) ||
  242. (values.shadowX !== this.options.shadow.x) ||
  243. (values.shadowY !== this.options.shadow.y)) {
  244. values.shadow = true;
  245. }
  246. }
  247. }
  248. } else {
  249. values.shadow = this.options.shadow.enabled;
  250. }
  251. return values;
  252. }
  253. updateLabelModule(options) {
  254. if (this.options.label === undefined || this.options.label === null) {
  255. this.options.label = '';
  256. }
  257. this.labelModule.setOptions(this.options, true);
  258. if (this.labelModule.baseSize !== undefined) {
  259. this.baseFontSize = this.labelModule.baseSize;
  260. }
  261. this.labelModule.constrain(this.nodeOptions, options, this.defaultOptions);
  262. this.labelModule.choosify(this.nodeOptions, options, this.defaultOptions);
  263. }
  264. updateShape(currentShape) {
  265. if (currentShape === this.options.shape && this.shape) {
  266. this.shape.setOptions(this.options, this.imageObj, this.imageObjAlt);
  267. }
  268. else {
  269. // choose draw method depending on the shape
  270. switch (this.options.shape) {
  271. case 'box':
  272. this.shape = new Box(this.options, this.body, this.labelModule);
  273. break;
  274. case 'circle':
  275. this.shape = new Circle(this.options, this.body, this.labelModule);
  276. break;
  277. case 'circularImage':
  278. this.shape = new CircularImage(this.options, this.body, this.labelModule, this.imageObj, this.imageObjAlt);
  279. break;
  280. case 'database':
  281. this.shape = new Database(this.options, this.body, this.labelModule);
  282. break;
  283. case 'diamond':
  284. this.shape = new Diamond(this.options, this.body, this.labelModule);
  285. break;
  286. case 'dot':
  287. this.shape = new Dot(this.options, this.body, this.labelModule);
  288. break;
  289. case 'ellipse':
  290. this.shape = new Ellipse(this.options, this.body, this.labelModule);
  291. break;
  292. case 'icon':
  293. this.shape = new Icon(this.options, this.body, this.labelModule);
  294. break;
  295. case 'image':
  296. this.shape = new Image(this.options, this.body, this.labelModule, this.imageObj, this.imageObjAlt);
  297. break;
  298. case 'square':
  299. this.shape = new Square(this.options, this.body, this.labelModule);
  300. break;
  301. case 'star':
  302. this.shape = new Star(this.options, this.body, this.labelModule);
  303. break;
  304. case 'text':
  305. this.shape = new Text(this.options, this.body, this.labelModule);
  306. break;
  307. case 'triangle':
  308. this.shape = new Triangle(this.options, this.body, this.labelModule);
  309. break;
  310. case 'triangleDown':
  311. this.shape = new TriangleDown(this.options, this.body, this.labelModule);
  312. break;
  313. default:
  314. this.shape = new Ellipse(this.options, this.body, this.labelModule);
  315. break;
  316. }
  317. }
  318. this._reset();
  319. }
  320. /**
  321. * select this node
  322. */
  323. select() {
  324. this.selected = true;
  325. this._reset();
  326. }
  327. /**
  328. * unselect this node
  329. */
  330. unselect() {
  331. this.selected = false;
  332. this._reset();
  333. }
  334. /**
  335. * Reset the calculated size of the node, forces it to recalculate its size
  336. * @private
  337. */
  338. _reset() {
  339. this.shape.width = undefined;
  340. this.shape.height = undefined;
  341. }
  342. /**
  343. * get the title of this node.
  344. * @return {string} title The title of the node, or undefined when no title
  345. * has been set.
  346. */
  347. getTitle() {
  348. return this.options.title;
  349. }
  350. /**
  351. * Calculate the distance to the border of the Node
  352. * @param {CanvasRenderingContext2D} ctx
  353. * @param {Number} angle Angle in radians
  354. * @returns {number} distance Distance to the border in pixels
  355. */
  356. distanceToBorder(ctx, angle) {
  357. return this.shape.distanceToBorder(ctx,angle);
  358. }
  359. /**
  360. * Check if this node has a fixed x and y position
  361. * @return {boolean} true if fixed, false if not
  362. */
  363. isFixed() {
  364. return (this.options.fixed.x && this.options.fixed.y);
  365. }
  366. /**
  367. * check if this node is selecte
  368. * @return {boolean} selected True if node is selected, else false
  369. */
  370. isSelected() {
  371. return this.selected;
  372. }
  373. /**
  374. * Retrieve the value of the node. Can be undefined
  375. * @return {Number} value
  376. */
  377. getValue() {
  378. return this.options.value;
  379. }
  380. /**
  381. * Adjust the value range of the node. The node will adjust it's size
  382. * based on its value.
  383. * @param {Number} min
  384. * @param {Number} max
  385. */
  386. setValueRange(min, max, total) {
  387. if (this.options.value !== undefined) {
  388. var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
  389. var sizeDiff = this.options.scaling.max - this.options.scaling.min;
  390. if (this.options.scaling.label.enabled === true) {
  391. var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
  392. this.options.font.size = this.options.scaling.label.min + scale * fontDiff;
  393. }
  394. this.options.size = this.options.scaling.min + scale * sizeDiff;
  395. }
  396. else {
  397. this.options.size = this.baseSize;
  398. this.options.font.size = this.baseFontSize;
  399. }
  400. this.updateLabelModule();
  401. }
  402. /**
  403. * Draw this node in the given canvas
  404. * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
  405. * @param {CanvasRenderingContext2D} ctx
  406. */
  407. draw(ctx) {
  408. let values = this.getFormattingValues();
  409. this.shape.draw(ctx, this.x, this.y, this.selected, this.hover, values);
  410. }
  411. /**
  412. * Update the bounding box of the shape
  413. */
  414. updateBoundingBox(ctx) {
  415. this.shape.updateBoundingBox(this.x,this.y,ctx);
  416. }
  417. /**
  418. * Recalculate the size of this node in the given canvas
  419. * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
  420. * @param {CanvasRenderingContext2D} ctx
  421. */
  422. resize(ctx) {
  423. let values = this.getFormattingValues();
  424. this.shape.resize(ctx, this.selected, this.hover, values);
  425. }
  426. /**
  427. * Check if this object is overlapping with the provided object
  428. * @param {Object} obj an object with parameters left, top, right, bottom
  429. * @return {boolean} True if location is located on node
  430. */
  431. isOverlappingWith(obj) {
  432. return (
  433. this.shape.left < obj.right &&
  434. this.shape.left + this.shape.width > obj.left &&
  435. this.shape.top < obj.bottom &&
  436. this.shape.top + this.shape.height > obj.top
  437. );
  438. }
  439. /**
  440. * Check if this object is overlapping with the provided object
  441. * @param {Object} obj an object with parameters left, top, right, bottom
  442. * @return {boolean} True if location is located on node
  443. */
  444. isBoundingBoxOverlappingWith(obj) {
  445. return (
  446. this.shape.boundingBox.left < obj.right &&
  447. this.shape.boundingBox.right > obj.left &&
  448. this.shape.boundingBox.top < obj.bottom &&
  449. this.shape.boundingBox.bottom > obj.top
  450. );
  451. }
  452. }
  453. export default Node;