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.

399 lines
12 KiB

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