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.

680 lines
25 KiB

  1. var util = require('../../util');
  2. var Node = require('../Node');
  3. var Edge = require('../Edge');
  4. /**
  5. * clears the toolbar div element of children
  6. *
  7. * @private
  8. */
  9. exports._clearManipulatorBar = function() {
  10. while (this.manipulationDiv.hasChildNodes()) {
  11. this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
  12. }
  13. this.manipulationDOM = {};
  14. this._manipulationReleaseOverload = function () {};
  15. delete this.sectors['support']['nodes']['targetNode'];
  16. delete this.sectors['support']['nodes']['targetViaNode'];
  17. this.controlNodesActive = false;
  18. };
  19. /**
  20. * Manipulation UI temporarily overloads certain functions to extend or replace them. To be able to restore
  21. * these functions to their original functionality, we saved them in this.cachedFunctions.
  22. * This function restores these functions to their original function.
  23. *
  24. * @private
  25. */
  26. exports._restoreOverloadedFunctions = function() {
  27. for (var functionName in this.cachedFunctions) {
  28. if (this.cachedFunctions.hasOwnProperty(functionName)) {
  29. this[functionName] = this.cachedFunctions[functionName];
  30. }
  31. }
  32. };
  33. /**
  34. * Enable or disable edit-mode.
  35. *
  36. * @private
  37. */
  38. exports._toggleEditMode = function() {
  39. this.editMode = !this.editMode;
  40. var toolbar = this.manipulationDiv;
  41. var closeDiv = this.closeDiv;
  42. var editModeDiv = this.editModeDiv;
  43. if (this.editMode == true) {
  44. toolbar.style.display="block";
  45. closeDiv.style.display="block";
  46. editModeDiv.style.display="none";
  47. closeDiv.onclick = this._toggleEditMode.bind(this);
  48. }
  49. else {
  50. toolbar.style.display="none";
  51. closeDiv.style.display="none";
  52. editModeDiv.style.display="block";
  53. closeDiv.onclick = null;
  54. }
  55. this._createManipulatorBar()
  56. };
  57. /**
  58. * main function, creates the main toolbar. Removes functions bound to the select event. Binds all the buttons of the toolbar.
  59. *
  60. * @private
  61. */
  62. exports._createManipulatorBar = function() {
  63. // remove bound functions
  64. if (this.boundFunction) {
  65. this.off('select', this.boundFunction);
  66. }
  67. var locale = this.constants.locales[this.constants.locale];
  68. if (this.edgeBeingEdited !== undefined) {
  69. this.edgeBeingEdited._disableControlNodes();
  70. this.edgeBeingEdited = undefined;
  71. this.selectedControlNode = null;
  72. this.controlNodesActive = false;
  73. this._redraw();
  74. }
  75. // restore overloaded functions
  76. this._restoreOverloadedFunctions();
  77. // resume calculation
  78. this.freezeSimulation = false;
  79. // reset global variables
  80. this.blockConnectingEdgeSelection = false;
  81. this.forceAppendSelection = false;
  82. this.manipulationDOM = {};
  83. if (this.editMode == true) {
  84. while (this.manipulationDiv.hasChildNodes()) {
  85. this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
  86. }
  87. this.manipulationDOM['addNodeSpan'] = document.createElement('span');
  88. this.manipulationDOM['addNodeSpan'].className = 'network-manipulationUI add';
  89. this.manipulationDOM['addNodeLabelSpan'] = document.createElement('span');
  90. this.manipulationDOM['addNodeLabelSpan'].className = 'network-manipulationLabel';
  91. this.manipulationDOM['addNodeLabelSpan'].innerHTML = locale['addNode'];
  92. this.manipulationDOM['addNodeSpan'].appendChild(this.manipulationDOM['addNodeLabelSpan']);
  93. this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
  94. this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
  95. this.manipulationDOM['addEdgeSpan'] = document.createElement('span');
  96. this.manipulationDOM['addEdgeSpan'].className = 'network-manipulationUI connect';
  97. this.manipulationDOM['addEdgeLabelSpan'] = document.createElement('span');
  98. this.manipulationDOM['addEdgeLabelSpan'].className = 'network-manipulationLabel';
  99. this.manipulationDOM['addEdgeLabelSpan'].innerHTML = locale['addEdge'];
  100. this.manipulationDOM['addEdgeSpan'].appendChild(this.manipulationDOM['addEdgeLabelSpan']);
  101. this.manipulationDiv.appendChild(this.manipulationDOM['addNodeSpan']);
  102. this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
  103. this.manipulationDiv.appendChild(this.manipulationDOM['addEdgeSpan']);
  104. if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
  105. this.manipulationDOM['seperatorLineDiv2'] = document.createElement('div');
  106. this.manipulationDOM['seperatorLineDiv2'].className = 'network-seperatorLine';
  107. this.manipulationDOM['editNodeSpan'] = document.createElement('span');
  108. this.manipulationDOM['editNodeSpan'].className = 'network-manipulationUI edit';
  109. this.manipulationDOM['editNodeLabelSpan'] = document.createElement('span');
  110. this.manipulationDOM['editNodeLabelSpan'].className = 'network-manipulationLabel';
  111. this.manipulationDOM['editNodeLabelSpan'].innerHTML = locale['editNode'];
  112. this.manipulationDOM['editNodeSpan'].appendChild(this.manipulationDOM['editNodeLabelSpan']);
  113. this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv2']);
  114. this.manipulationDiv.appendChild(this.manipulationDOM['editNodeSpan']);
  115. }
  116. else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
  117. this.manipulationDOM['seperatorLineDiv3'] = document.createElement('div');
  118. this.manipulationDOM['seperatorLineDiv3'].className = 'network-seperatorLine';
  119. this.manipulationDOM['editEdgeSpan'] = document.createElement('span');
  120. this.manipulationDOM['editEdgeSpan'].className = 'network-manipulationUI edit';
  121. this.manipulationDOM['editEdgeLabelSpan'] = document.createElement('span');
  122. this.manipulationDOM['editEdgeLabelSpan'].className = 'network-manipulationLabel';
  123. this.manipulationDOM['editEdgeLabelSpan'].innerHTML = locale['editEdge'];
  124. this.manipulationDOM['editEdgeSpan'].appendChild(this.manipulationDOM['editEdgeLabelSpan']);
  125. this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv3']);
  126. this.manipulationDiv.appendChild(this.manipulationDOM['editEdgeSpan']);
  127. }
  128. if (this._selectionIsEmpty() == false) {
  129. this.manipulationDOM['seperatorLineDiv4'] = document.createElement('div');
  130. this.manipulationDOM['seperatorLineDiv4'].className = 'network-seperatorLine';
  131. this.manipulationDOM['deleteSpan'] = document.createElement('span');
  132. this.manipulationDOM['deleteSpan'].className = 'network-manipulationUI delete';
  133. this.manipulationDOM['deleteLabelSpan'] = document.createElement('span');
  134. this.manipulationDOM['deleteLabelSpan'].className = 'network-manipulationLabel';
  135. this.manipulationDOM['deleteLabelSpan'].innerHTML = locale['del'];
  136. this.manipulationDOM['deleteSpan'].appendChild(this.manipulationDOM['deleteLabelSpan']);
  137. this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv4']);
  138. this.manipulationDiv.appendChild(this.manipulationDOM['deleteSpan']);
  139. }
  140. // bind the icons
  141. this.manipulationDOM['addNodeSpan'].onclick = this._createAddNodeToolbar.bind(this);
  142. this.manipulationDOM['addEdgeSpan'].onclick = this._createAddEdgeToolbar.bind(this);
  143. if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
  144. this.manipulationDOM['editNodeSpan'].onclick = this._editNode.bind(this);
  145. }
  146. else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
  147. this.manipulationDOM['editEdgeSpan'].onclick = this._createEditEdgeToolbar.bind(this);
  148. }
  149. if (this._selectionIsEmpty() == false) {
  150. this.manipulationDOM['deleteSpan'].onclick = this._deleteSelected.bind(this);
  151. }
  152. this.closeDiv.onclick = this._toggleEditMode.bind(this);
  153. this.boundFunction = this._createManipulatorBar.bind(this);
  154. this.on('select', this.boundFunction);
  155. }
  156. else {
  157. while (this.editModeDiv.hasChildNodes()) {
  158. this.editModeDiv.removeChild(this.editModeDiv.firstChild);
  159. }
  160. this.manipulationDOM['editModeSpan'] = document.createElement('span');
  161. this.manipulationDOM['editModeSpan'].className = 'network-manipulationUI edit editmode';
  162. this.manipulationDOM['editModeLabelSpan'] = document.createElement('span');
  163. this.manipulationDOM['editModeLabelSpan'].className = 'network-manipulationLabel';
  164. this.manipulationDOM['editModeLabelSpan'].innerHTML = locale['edit'];
  165. this.manipulationDOM['editModeSpan'].appendChild(this.manipulationDOM['editModeLabelSpan']);
  166. this.editModeDiv.appendChild(this.manipulationDOM['editModeSpan']);
  167. this.manipulationDOM['editModeSpan'].onclick = this._toggleEditMode.bind(this);
  168. }
  169. };
  170. /**
  171. * Create the toolbar for adding Nodes
  172. *
  173. * @private
  174. */
  175. exports._createAddNodeToolbar = function() {
  176. // clear the toolbar
  177. this._clearManipulatorBar();
  178. if (this.boundFunction) {
  179. this.off('select', this.boundFunction);
  180. }
  181. var locale = this.constants.locales[this.constants.locale];
  182. this.manipulationDOM = {};
  183. this.manipulationDOM['backSpan'] = document.createElement('span');
  184. this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
  185. this.manipulationDOM['backLabelSpan'] = document.createElement('span');
  186. this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
  187. this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
  188. this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
  189. this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
  190. this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
  191. this.manipulationDOM['descriptionSpan'] = document.createElement('span');
  192. this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
  193. this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
  194. this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
  195. this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['addDescription'];
  196. this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
  197. this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
  198. this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
  199. this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
  200. // bind the icon
  201. this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
  202. // we use the boundFunction so we can reference it when we unbind it from the "select" event.
  203. this.boundFunction = this._addNode.bind(this);
  204. this.on('select', this.boundFunction);
  205. };
  206. /**
  207. * create the toolbar to connect nodes
  208. *
  209. * @private
  210. */
  211. exports._createAddEdgeToolbar = function() {
  212. // clear the toolbar
  213. this._clearManipulatorBar();
  214. this._unselectAll(true);
  215. this.freezeSimulation = true;
  216. var locale = this.constants.locales[this.constants.locale];
  217. if (this.boundFunction) {
  218. this.off('select', this.boundFunction);
  219. }
  220. this._unselectAll();
  221. this.forceAppendSelection = false;
  222. this.blockConnectingEdgeSelection = true;
  223. this.manipulationDOM = {};
  224. this.manipulationDOM['backSpan'] = document.createElement('span');
  225. this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
  226. this.manipulationDOM['backLabelSpan'] = document.createElement('span');
  227. this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
  228. this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
  229. this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
  230. this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
  231. this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
  232. this.manipulationDOM['descriptionSpan'] = document.createElement('span');
  233. this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
  234. this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
  235. this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
  236. this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['edgeDescription'];
  237. this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
  238. this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
  239. this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
  240. this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
  241. // bind the icon
  242. this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
  243. // we use the boundFunction so we can reference it when we unbind it from the "select" event.
  244. this.boundFunction = this._handleConnect.bind(this);
  245. this.on('select', this.boundFunction);
  246. // temporarily overload functions
  247. this.cachedFunctions["_handleTouch"] = this._handleTouch;
  248. this.cachedFunctions["_manipulationReleaseOverload"] = this._manipulationReleaseOverload;
  249. this.cachedFunctions["_handleDragStart"] = this._handleDragStart;
  250. this.cachedFunctions["_handleDragEnd"] = this._handleDragEnd;
  251. this._handleTouch = this._handleConnect;
  252. this._manipulationReleaseOverload = function () {};
  253. this._handleDragStart = function () {};
  254. this._handleDragEnd = this._finishConnect;
  255. // redraw to show the unselect
  256. this._redraw();
  257. };
  258. /**
  259. * create the toolbar to edit edges
  260. *
  261. * @private
  262. */
  263. exports._createEditEdgeToolbar = function() {
  264. // clear the toolbar
  265. this._clearManipulatorBar();
  266. this.controlNodesActive = true;
  267. if (this.boundFunction) {
  268. this.off('select', this.boundFunction);
  269. }
  270. this.edgeBeingEdited = this._getSelectedEdge();
  271. this.edgeBeingEdited._enableControlNodes();
  272. var locale = this.constants.locales[this.constants.locale];
  273. this.manipulationDOM = {};
  274. this.manipulationDOM['backSpan'] = document.createElement('span');
  275. this.manipulationDOM['backSpan'].className = 'network-manipulationUI back';
  276. this.manipulationDOM['backLabelSpan'] = document.createElement('span');
  277. this.manipulationDOM['backLabelSpan'].className = 'network-manipulationLabel';
  278. this.manipulationDOM['backLabelSpan'].innerHTML = locale['back'];
  279. this.manipulationDOM['backSpan'].appendChild(this.manipulationDOM['backLabelSpan']);
  280. this.manipulationDOM['seperatorLineDiv1'] = document.createElement('div');
  281. this.manipulationDOM['seperatorLineDiv1'].className = 'network-seperatorLine';
  282. this.manipulationDOM['descriptionSpan'] = document.createElement('span');
  283. this.manipulationDOM['descriptionSpan'].className = 'network-manipulationUI none';
  284. this.manipulationDOM['descriptionLabelSpan'] = document.createElement('span');
  285. this.manipulationDOM['descriptionLabelSpan'].className = 'network-manipulationLabel';
  286. this.manipulationDOM['descriptionLabelSpan'].innerHTML = locale['editEdgeDescription'];
  287. this.manipulationDOM['descriptionSpan'].appendChild(this.manipulationDOM['descriptionLabelSpan']);
  288. this.manipulationDiv.appendChild(this.manipulationDOM['backSpan']);
  289. this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv1']);
  290. this.manipulationDiv.appendChild(this.manipulationDOM['descriptionSpan']);
  291. // bind the icon
  292. this.manipulationDOM['backSpan'].onclick = this._createManipulatorBar.bind(this);
  293. // temporarily overload functions
  294. this.cachedFunctions["_handleTouch"] = this._handleTouch;
  295. this.cachedFunctions["_manipulationReleaseOverload"] = this._manipulationReleaseOverload;
  296. this.cachedFunctions["_handleTap"] = this._handleTap;
  297. this.cachedFunctions["_handleDragStart"] = this._handleDragStart;
  298. this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
  299. this._handleTouch = this._selectControlNode;
  300. this._handleTap = function () {};
  301. this._handleOnDrag = this._controlNodeDrag;
  302. this._handleDragStart = function () {}
  303. this._manipulationReleaseOverload = this._releaseControlNode;
  304. // redraw to show the unselect
  305. this._redraw();
  306. };
  307. /**
  308. * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
  309. * to walk the user through the process.
  310. *
  311. * @private
  312. */
  313. exports._selectControlNode = function(pointer) {
  314. this.edgeBeingEdited.controlNodes.from.unselect();
  315. this.edgeBeingEdited.controlNodes.to.unselect();
  316. this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y));
  317. if (this.selectedControlNode !== null) {
  318. this.selectedControlNode.select();
  319. this.freezeSimulation = true;
  320. }
  321. this._redraw();
  322. };
  323. /**
  324. * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
  325. * to walk the user through the process.
  326. *
  327. * @private
  328. */
  329. exports._controlNodeDrag = function(event) {
  330. var pointer = this._getPointer(event.gesture.center);
  331. if (this.selectedControlNode !== null && this.selectedControlNode !== undefined) {
  332. this.selectedControlNode.x = this._XconvertDOMtoCanvas(pointer.x);
  333. this.selectedControlNode.y = this._YconvertDOMtoCanvas(pointer.y);
  334. }
  335. this._redraw();
  336. };
  337. exports._releaseControlNode = function(pointer) {
  338. var newNode = this._getNodeAt(pointer);
  339. if (newNode !== null) {
  340. if (this.edgeBeingEdited.controlNodes.from.selected == true) {
  341. this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
  342. this.edgeBeingEdited.controlNodes.from.unselect();
  343. }
  344. if (this.edgeBeingEdited.controlNodes.to.selected == true) {
  345. this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
  346. this.edgeBeingEdited.controlNodes.to.unselect();
  347. }
  348. }
  349. else {
  350. this.edgeBeingEdited._restoreControlNodes();
  351. }
  352. this.freezeSimulation = false;
  353. this._redraw();
  354. };
  355. /**
  356. * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
  357. * to walk the user through the process.
  358. *
  359. * @private
  360. */
  361. exports._handleConnect = function(pointer) {
  362. if (this._getSelectedNodeCount() == 0) {
  363. var node = this._getNodeAt(pointer);
  364. if (node != null) {
  365. if (node.clusterSize > 1) {
  366. alert(this.constants.locales[this.constants.locale]['createEdgeError'])
  367. }
  368. else {
  369. this._selectObject(node,false);
  370. var supportNodes = this.sectors['support']['nodes'];
  371. // create a node the temporary line can look at
  372. supportNodes['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
  373. var targetNode = supportNodes['targetNode'];
  374. targetNode.x = node.x;
  375. targetNode.y = node.y;
  376. // create a temporary edge
  377. this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:targetNode.id}, this, this.constants);
  378. var connectionEdge = this.edges['connectionEdge'];
  379. connectionEdge.from = node;
  380. connectionEdge.connected = true;
  381. connectionEdge.options.smoothCurves = {enabled: true,
  382. dynamic: false,
  383. type: "continuous",
  384. roundness: 0.5
  385. };
  386. connectionEdge.selected = true;
  387. connectionEdge.to = targetNode;
  388. this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
  389. this._handleOnDrag = function(event) {
  390. var pointer = this._getPointer(event.gesture.center);
  391. var connectionEdge = this.edges['connectionEdge'];
  392. connectionEdge.to.x = this._XconvertDOMtoCanvas(pointer.x);
  393. connectionEdge.to.y = this._YconvertDOMtoCanvas(pointer.y);
  394. };
  395. this.moving = true;
  396. this.start();
  397. }
  398. }
  399. }
  400. };
  401. exports._finishConnect = function(event) {
  402. if (this._getSelectedNodeCount() == 1) {
  403. var pointer = this._getPointer(event.gesture.center);
  404. // restore the drag function
  405. this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
  406. delete this.cachedFunctions["_handleOnDrag"];
  407. // remember the edge id
  408. var connectFromId = this.edges['connectionEdge'].fromId;
  409. // remove the temporary nodes and edge
  410. delete this.edges['connectionEdge'];
  411. delete this.sectors['support']['nodes']['targetNode'];
  412. delete this.sectors['support']['nodes']['targetViaNode'];
  413. var node = this._getNodeAt(pointer);
  414. if (node != null) {
  415. if (node.clusterSize > 1) {
  416. alert(this.constants.locales[this.constants.locale]["createEdgeError"])
  417. }
  418. else {
  419. this._createEdge(connectFromId,node.id);
  420. this._createManipulatorBar();
  421. }
  422. }
  423. this._unselectAll();
  424. }
  425. };
  426. /**
  427. * Adds a node on the specified location
  428. */
  429. exports._addNode = function() {
  430. if (this._selectionIsEmpty() && this.editMode == true) {
  431. var positionObject = this._pointerToPositionObject(this.pointerPosition);
  432. var defaultData = {id:util.randomUUID(),x:positionObject.left,y:positionObject.top,label:"new",allowedToMoveX:true,allowedToMoveY:true};
  433. if (this.triggerFunctions.add) {
  434. if (this.triggerFunctions.add.length == 2) {
  435. var me = this;
  436. this.triggerFunctions.add(defaultData, function(finalizedData) {
  437. me.nodesData.add(finalizedData);
  438. me._createManipulatorBar();
  439. me.moving = true;
  440. me.start();
  441. });
  442. }
  443. else {
  444. throw new Error('The function for add does not support two arguments (data,callback)');
  445. this._createManipulatorBar();
  446. this.moving = true;
  447. this.start();
  448. }
  449. }
  450. else {
  451. this.nodesData.add(defaultData);
  452. this._createManipulatorBar();
  453. this.moving = true;
  454. this.start();
  455. }
  456. }
  457. };
  458. /**
  459. * connect two nodes with a new edge.
  460. *
  461. * @private
  462. */
  463. exports._createEdge = function(sourceNodeId,targetNodeId) {
  464. if (this.editMode == true) {
  465. var defaultData = {from:sourceNodeId, to:targetNodeId};
  466. if (this.triggerFunctions.connect) {
  467. if (this.triggerFunctions.connect.length == 2) {
  468. var me = this;
  469. this.triggerFunctions.connect(defaultData, function(finalizedData) {
  470. me.edgesData.add(finalizedData);
  471. me.moving = true;
  472. me.start();
  473. });
  474. }
  475. else {
  476. throw new Error('The function for connect does not support two arguments (data,callback)');
  477. this.moving = true;
  478. this.start();
  479. }
  480. }
  481. else {
  482. this.edgesData.add(defaultData);
  483. this.moving = true;
  484. this.start();
  485. }
  486. }
  487. };
  488. /**
  489. * connect two nodes with a new edge.
  490. *
  491. * @private
  492. */
  493. exports._editEdge = function(sourceNodeId,targetNodeId) {
  494. if (this.editMode == true) {
  495. var defaultData = {id: this.edgeBeingEdited.id, from:sourceNodeId, to:targetNodeId};
  496. if (this.triggerFunctions.editEdge) {
  497. if (this.triggerFunctions.editEdge.length == 2) {
  498. var me = this;
  499. this.triggerFunctions.editEdge(defaultData, function(finalizedData) {
  500. me.edgesData.update(finalizedData);
  501. me.moving = true;
  502. me.start();
  503. });
  504. }
  505. else {
  506. throw new Error('The function for edit does not support two arguments (data, callback)');
  507. this.moving = true;
  508. this.start();
  509. }
  510. }
  511. else {
  512. this.edgesData.update(defaultData);
  513. this.moving = true;
  514. this.start();
  515. }
  516. }
  517. };
  518. /**
  519. * Create the toolbar to edit the selected node. The label and the color can be changed. Other colors are derived from the chosen color.
  520. *
  521. * @private
  522. */
  523. exports._editNode = function() {
  524. if (this.triggerFunctions.edit && this.editMode == true) {
  525. var node = this._getSelectedNode();
  526. var data = {id:node.id,
  527. label: node.label,
  528. group: node.options.group,
  529. shape: node.options.shape,
  530. color: {
  531. background:node.options.color.background,
  532. border:node.options.color.border,
  533. highlight: {
  534. background:node.options.color.highlight.background,
  535. border:node.options.color.highlight.border
  536. }
  537. }};
  538. if (this.triggerFunctions.edit.length == 2) {
  539. var me = this;
  540. this.triggerFunctions.edit(data, function (finalizedData) {
  541. me.nodesData.update(finalizedData);
  542. me._createManipulatorBar();
  543. me.moving = true;
  544. me.start();
  545. });
  546. }
  547. else {
  548. throw new Error('The function for edit does not support two arguments (data, callback)');
  549. }
  550. }
  551. else {
  552. throw new Error('No edit function has been bound to this button');
  553. }
  554. };
  555. /**
  556. * delete everything in the selection
  557. *
  558. * @private
  559. */
  560. exports._deleteSelected = function() {
  561. if (!this._selectionIsEmpty() && this.editMode == true) {
  562. if (!this._clusterInSelection()) {
  563. var selectedNodes = this.getSelectedNodes();
  564. var selectedEdges = this.getSelectedEdges();
  565. if (this.triggerFunctions.del) {
  566. var me = this;
  567. var data = {nodes: selectedNodes, edges: selectedEdges};
  568. if (this.triggerFunctions.del.length = 2) {
  569. this.triggerFunctions.del(data, function (finalizedData) {
  570. me.edgesData.remove(finalizedData.edges);
  571. me.nodesData.remove(finalizedData.nodes);
  572. me._unselectAll();
  573. me.moving = true;
  574. me.start();
  575. });
  576. }
  577. else {
  578. throw new Error('The function for delete does not support two arguments (data, callback)')
  579. }
  580. }
  581. else {
  582. this.edgesData.remove(selectedEdges);
  583. this.nodesData.remove(selectedNodes);
  584. this._unselectAll();
  585. this.moving = true;
  586. this.start();
  587. }
  588. }
  589. else {
  590. alert(this.constants.locales[this.constants.locale]["deleteClusterError"]);
  591. }
  592. }
  593. };