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.

445 lines
14 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) {
  46. this.options = util.bridgeObject(globalOptions);
  47. this.globalOptions = globalOptions;
  48. this.body = body;
  49. this.edges = []; // all edges connected to this node
  50. // set defaults for the options
  51. this.id = undefined;
  52. this.imagelist = imagelist;
  53. this.grouplist = grouplist;
  54. // state options
  55. this.x = undefined;
  56. this.y = undefined;
  57. this.baseSize = this.options.size;
  58. this.baseFontSize = this.options.font.size;
  59. this.predefinedPosition = false; // used to check if initial fit should just take the range or approximate
  60. this.selected = false;
  61. this.hover = false;
  62. this.labelModule = new Label(this.body, this.options);
  63. this.setOptions(options);
  64. }
  65. /**
  66. * Attach a edge to the node
  67. * @param {Edge} edge
  68. */
  69. attachEdge(edge) {
  70. if (this.edges.indexOf(edge) === -1) {
  71. this.edges.push(edge);
  72. }
  73. }
  74. /**
  75. * Detach a edge from the node
  76. * @param {Edge} edge
  77. */
  78. detachEdge(edge) {
  79. var index = this.edges.indexOf(edge);
  80. if (index != -1) {
  81. this.edges.splice(index, 1);
  82. }
  83. }
  84. /**
  85. * Set or overwrite options for the node
  86. * @param {Object} options an object with options
  87. * @param {Object} constants and object with default, global options
  88. */
  89. setOptions(options) {
  90. let currentShape = this.options.shape;
  91. if (!options) {
  92. return;
  93. }
  94. // basic options
  95. if (options.id !== undefined) {this.id = options.id;}
  96. if (this.id === undefined) {
  97. throw "Node must have an id";
  98. }
  99. // set these options locally
  100. // clear x and y positions
  101. if (options.x !== undefined) {
  102. if (options.x === null) {this.x = undefined; this.predefinedPosition = false;}
  103. else {this.x = parseInt(options.x); this.predefinedPosition = true;}
  104. }
  105. if (options.y !== undefined) {
  106. if (options.y === null) {this.y = undefined; this.predefinedPosition = false;}
  107. else {this.y = parseInt(options.y); this.predefinedPosition = true;}
  108. }
  109. if (options.size !== undefined) {this.baseSize = options.size;}
  110. if (options.value !== undefined) {options.value = parseFloat(options.value);}
  111. // copy group options
  112. if (typeof options.group === 'number' || (typeof options.group === 'string' && options.group != '')) {
  113. var groupObj = this.grouplist.get(options.group);
  114. util.deepExtend(this.options, groupObj);
  115. // the color object needs to be completely defined. Since groups can partially overwrite the colors, we parse it again, just in case.
  116. this.options.color = util.parseColor(this.options.color);
  117. }
  118. // this transforms all shorthands into fully defined options
  119. Node.parseOptions(this.options, options, true, this.globalOptions);
  120. // load the images
  121. if (this.options.image !== undefined) {
  122. if (this.imagelist) {
  123. this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage, this.id);
  124. }
  125. else {
  126. throw "No imagelist provided";
  127. }
  128. }
  129. this.updateLabelModule();
  130. this.updateShape(currentShape);
  131. if (options.hidden !== undefined || options.physics !== undefined) {
  132. return true;
  133. }
  134. return false;
  135. }
  136. /**
  137. * This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
  138. * Static so it can also be used by the handler.
  139. * @param parentOptions
  140. * @param newOptions
  141. * @param allowDeletion
  142. * @param globalOptions
  143. */
  144. static parseOptions(parentOptions, newOptions, allowDeletion = false, globalOptions = {}) {
  145. var fields = [
  146. 'color',
  147. 'font',
  148. 'fixed',
  149. 'shadow'
  150. ];
  151. util.selectiveNotDeepExtend(fields, parentOptions, newOptions, allowDeletion);
  152. // merge the shadow options into the parent.
  153. util.mergeOptions(parentOptions, newOptions, 'shadow', allowDeletion, globalOptions);
  154. // individual shape newOptions
  155. if (newOptions.color !== undefined && newOptions.color !== null) {
  156. let parsedColor = util.parseColor(newOptions.color);
  157. util.fillIfDefined(parentOptions.color, parsedColor);
  158. }
  159. else if (allowDeletion === true && newOptions.color === null) {
  160. parentOptions.color = util.bridgeObject(globalOptions.color); // set the object back to the global options
  161. }
  162. // handle the fixed options
  163. if (newOptions.fixed !== undefined && newOptions.fixed !== null) {
  164. if (typeof newOptions.fixed === 'boolean') {
  165. parentOptions.fixed.x = newOptions.fixed;
  166. parentOptions.fixed.y = newOptions.fixed;
  167. }
  168. else {
  169. if (newOptions.fixed.x !== undefined && typeof newOptions.fixed.x === 'boolean') {
  170. parentOptions.fixed.x = newOptions.fixed.x;
  171. }
  172. if (newOptions.fixed.y !== undefined && typeof newOptions.fixed.y === 'boolean') {
  173. parentOptions.fixed.y = newOptions.fixed.y;
  174. }
  175. }
  176. }
  177. // handle the font options
  178. if (newOptions.font !== undefined && newOptions.font !== null) {
  179. Label.parseOptions(parentOptions.font, newOptions);
  180. }
  181. else if (allowDeletion === true && newOptions.font === null) {
  182. parentOptions.font = util.bridgeObject(globalOptions.font); // set the object back to the global options
  183. }
  184. // handle the scaling options, specifically the label part
  185. if (newOptions.scaling !== undefined) {
  186. util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label', allowDeletion, globalOptions.scaling);
  187. }
  188. }
  189. updateLabelModule() {
  190. if (this.options.label === undefined || this.options.label === null) {
  191. this.options.label = '';
  192. }
  193. this.labelModule.setOptions(this.options, true);
  194. if (this.labelModule.baseSize !== undefined) {
  195. this.baseFontSize = this.labelModule.baseSize;
  196. }
  197. }
  198. updateShape(currentShape) {
  199. if (currentShape === this.options.shape && this.shape) {
  200. this.shape.setOptions(this.options, this.imageObj);
  201. }
  202. else {
  203. // choose draw method depending on the shape
  204. switch (this.options.shape) {
  205. case 'box':
  206. this.shape = new Box(this.options, this.body, this.labelModule);
  207. break;
  208. case 'circle':
  209. this.shape = new Circle(this.options, this.body, this.labelModule);
  210. break;
  211. case 'circularImage':
  212. this.shape = new CircularImage(this.options, this.body, this.labelModule, this.imageObj);
  213. break;
  214. case 'database':
  215. this.shape = new Database(this.options, this.body, this.labelModule);
  216. break;
  217. case 'diamond':
  218. this.shape = new Diamond(this.options, this.body, this.labelModule);
  219. break;
  220. case 'dot':
  221. this.shape = new Dot(this.options, this.body, this.labelModule);
  222. break;
  223. case 'ellipse':
  224. this.shape = new Ellipse(this.options, this.body, this.labelModule);
  225. break;
  226. case 'icon':
  227. this.shape = new Icon(this.options, this.body, this.labelModule);
  228. break;
  229. case 'image':
  230. this.shape = new Image(this.options, this.body, this.labelModule, this.imageObj);
  231. break;
  232. case 'square':
  233. this.shape = new Square(this.options, this.body, this.labelModule);
  234. break;
  235. case 'star':
  236. this.shape = new Star(this.options, this.body, this.labelModule);
  237. break;
  238. case 'text':
  239. this.shape = new Text(this.options, this.body, this.labelModule);
  240. break;
  241. case 'triangle':
  242. this.shape = new Triangle(this.options, this.body, this.labelModule);
  243. break;
  244. case 'triangleDown':
  245. this.shape = new TriangleDown(this.options, this.body, this.labelModule);
  246. break;
  247. default:
  248. this.shape = new Ellipse(this.options, this.body, this.labelModule);
  249. break;
  250. }
  251. }
  252. this._reset();
  253. }
  254. /**
  255. * select this node
  256. */
  257. select() {
  258. this.selected = true;
  259. this._reset();
  260. }
  261. /**
  262. * unselect this node
  263. */
  264. unselect() {
  265. this.selected = false;
  266. this._reset();
  267. }
  268. /**
  269. * Reset the calculated size of the node, forces it to recalculate its size
  270. * @private
  271. */
  272. _reset() {
  273. this.shape.width = undefined;
  274. this.shape.height = undefined;
  275. }
  276. /**
  277. * get the title of this node.
  278. * @return {string} title The title of the node, or undefined when no title
  279. * has been set.
  280. */
  281. getTitle() {
  282. return this.options.title;
  283. }
  284. /**
  285. * Calculate the distance to the border of the Node
  286. * @param {CanvasRenderingContext2D} ctx
  287. * @param {Number} angle Angle in radians
  288. * @returns {number} distance Distance to the border in pixels
  289. */
  290. distanceToBorder(ctx, angle) {
  291. return this.shape.distanceToBorder(ctx,angle);
  292. }
  293. /**
  294. * Check if this node has a fixed x and y position
  295. * @return {boolean} true if fixed, false if not
  296. */
  297. isFixed() {
  298. return (this.options.fixed.x && this.options.fixed.y);
  299. }
  300. /**
  301. * check if this node is selecte
  302. * @return {boolean} selected True if node is selected, else false
  303. */
  304. isSelected() {
  305. return this.selected;
  306. }
  307. /**
  308. * Retrieve the value of the node. Can be undefined
  309. * @return {Number} value
  310. */
  311. getValue() {
  312. return this.options.value;
  313. }
  314. /**
  315. * Adjust the value range of the node. The node will adjust it's size
  316. * based on its value.
  317. * @param {Number} min
  318. * @param {Number} max
  319. */
  320. setValueRange(min, max, total) {
  321. if (this.options.value !== undefined) {
  322. var scale = this.options.scaling.customScalingFunction(min, max, total, this.options.value);
  323. var sizeDiff = this.options.scaling.max - this.options.scaling.min;
  324. if (this.options.scaling.label.enabled === true) {
  325. var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
  326. this.options.font.size = this.options.scaling.label.min + scale * fontDiff;
  327. }
  328. this.options.size = this.options.scaling.min + scale * sizeDiff;
  329. }
  330. else {
  331. this.options.size = this.baseSize;
  332. this.options.font.size = this.baseFontSize;
  333. }
  334. this.updateLabelModule();
  335. }
  336. /**
  337. * Draw this node in the given canvas
  338. * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
  339. * @param {CanvasRenderingContext2D} ctx
  340. */
  341. draw(ctx) {
  342. this.shape.draw(ctx, this.x, this.y, this.selected, this.hover);
  343. }
  344. /**
  345. * Update the bounding box of the shape
  346. */
  347. updateBoundingBox(ctx) {
  348. this.shape.updateBoundingBox(this.x,this.y,ctx);
  349. }
  350. /**
  351. * Recalculate the size of this node in the given canvas
  352. * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
  353. * @param {CanvasRenderingContext2D} ctx
  354. */
  355. resize(ctx) {
  356. this.shape.resize(ctx, this.selected);
  357. }
  358. /**
  359. * Check if this object is overlapping with the provided object
  360. * @param {Object} obj an object with parameters left, top, right, bottom
  361. * @return {boolean} True if location is located on node
  362. */
  363. isOverlappingWith(obj) {
  364. return (
  365. this.shape.left < obj.right &&
  366. this.shape.left + this.shape.width > obj.left &&
  367. this.shape.top < obj.bottom &&
  368. this.shape.top + this.shape.height > obj.top
  369. );
  370. }
  371. /**
  372. * Check if this object is overlapping with the provided object
  373. * @param {Object} obj an object with parameters left, top, right, bottom
  374. * @return {boolean} True if location is located on node
  375. */
  376. isBoundingBoxOverlappingWith(obj) {
  377. return (
  378. this.shape.boundingBox.left < obj.right &&
  379. this.shape.boundingBox.right > obj.left &&
  380. this.shape.boundingBox.top < obj.bottom &&
  381. this.shape.boundingBox.bottom > obj.top
  382. );
  383. }
  384. }
  385. export default Node;