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.

1142 lines
37 KiB

  1. let util = require('../../util');
  2. let Hammer = require('../../module/hammer');
  3. let hammerUtil = require('../../hammerUtil');
  4. /**
  5. * clears the toolbar div element of children
  6. *
  7. * @private
  8. */
  9. class ManipulationSystem {
  10. constructor(body, canvas, selectionHandler) {
  11. this.body = body;
  12. this.canvas = canvas;
  13. this.selectionHandler = selectionHandler;
  14. this.editMode = false;
  15. this.manipulationDiv = undefined;
  16. this.editModeDiv = undefined;
  17. this.closeDiv = undefined;
  18. this.manipulationHammers = [];
  19. this.temporaryUIFunctions = {};
  20. this.temporaryEventFunctions = [];
  21. this.touchTime = 0;
  22. this.temporaryIds = {nodes: [], edges:[]};
  23. this.guiEnabled = false;
  24. this.inMode = false;
  25. this.selectedControlNode = undefined;
  26. this.options = {};
  27. this.defaultOptions = {
  28. enabled: false,
  29. initiallyActive: false,
  30. addNode: true,
  31. addEdge: true,
  32. editNode: undefined,
  33. editEdge: true,
  34. deleteNode: true,
  35. deleteEdge: true,
  36. controlNodeStyle:{
  37. shape:'dot',
  38. size:6,
  39. color: {background: '#ff0000', border: '#3c3c3c', highlight: {background: '#07f968', border: '#3c3c3c'}},
  40. borderWidth: 2,
  41. borderWidthSelected: 2
  42. }
  43. };
  44. util.extend(this.options, this.defaultOptions);
  45. this.body.emitter.on('destroy', () => {this._clean();});
  46. this.body.emitter.on('_dataChanged',this._restore.bind(this));
  47. this.body.emitter.on('_resetData', this._restore.bind(this));
  48. }
  49. /**
  50. * If something changes in the data during editing, switch back to the initial datamanipulation state and close all edit modes.
  51. * @private
  52. */
  53. _restore() {
  54. if (this.inMode !== false) {
  55. if (this.options.initiallyActive === true) {
  56. this.enableEditMode();
  57. }
  58. else {
  59. this.disableEditMode();
  60. }
  61. }
  62. }
  63. /**
  64. * Set the Options
  65. * @param options
  66. */
  67. setOptions(options, allOptions, globalOptions) {
  68. if (allOptions !== undefined) {
  69. if (allOptions.locale !== undefined) {this.options.locale = allOptions.locale} else {this.options.locale = globalOptions.locale;}
  70. if (allOptions.locales !== undefined) {this.options.locales = allOptions.locales} else {this.options.locales = globalOptions.locales;}
  71. }
  72. if (options !== undefined) {
  73. if (typeof options === 'boolean') {
  74. this.options.enabled = options;
  75. }
  76. else {
  77. this.options.enabled = true;
  78. util.deepExtend(this.options, options);
  79. }
  80. if (this.options.initiallyActive === true) {
  81. this.editMode = true;
  82. }
  83. this._setup();
  84. }
  85. }
  86. /**
  87. * Enable or disable edit-mode. Draws the DOM required and cleans up after itself.
  88. *
  89. * @private
  90. */
  91. toggleEditMode() {
  92. if (this.editMode === true) {
  93. this.disableEditMode();
  94. }
  95. else {
  96. this.enableEditMode();
  97. }
  98. }
  99. enableEditMode() {
  100. this.editMode = true;
  101. this._clean();
  102. if (this.guiEnabled === true) {
  103. this.manipulationDiv.style.display = 'block';
  104. this.closeDiv.style.display = 'block';
  105. this.editModeDiv.style.display = 'none';
  106. this.showManipulatorToolbar();
  107. }
  108. }
  109. disableEditMode() {
  110. this.editMode = false;
  111. this._clean();
  112. if (this.guiEnabled === true) {
  113. this.manipulationDiv.style.display = 'none';
  114. this.closeDiv.style.display = 'none';
  115. this.editModeDiv.style.display = 'block';
  116. this._createEditButton();
  117. }
  118. }
  119. /**
  120. * Creates the main toolbar. Removes functions bound to the select event. Binds all the buttons of the toolbar.
  121. *
  122. * @private
  123. */
  124. showManipulatorToolbar() {
  125. // restore the state of any bound functions or events, remove control nodes, restore physics
  126. this._clean();
  127. // reset global variables
  128. this.manipulationDOM = {};
  129. // if the gui is enabled, draw all elements.
  130. if (this.guiEnabled === true) {
  131. // a _restore will hide these menus
  132. this.editMode = true;
  133. this.manipulationDiv.style.display = 'block';
  134. this.closeDiv.style.display = 'block';
  135. let selectedNodeCount = this.selectionHandler._getSelectedNodeCount();
  136. let selectedEdgeCount = this.selectionHandler._getSelectedEdgeCount();
  137. let selectedTotalCount = selectedNodeCount + selectedEdgeCount;
  138. let locale = this.options.locales[this.options.locale];
  139. let needSeperator = false;
  140. if (this.options.addNode !== false) {
  141. this._createAddNodeButton(locale);
  142. needSeperator = true;
  143. }
  144. if (this.options.addEdge !== false) {
  145. if (needSeperator === true) {
  146. this._createSeperator(1);
  147. } else {
  148. needSeperator = true;
  149. }
  150. this._createAddEdgeButton(locale);
  151. }
  152. if (selectedNodeCount === 1 && typeof this.options.editNode === 'function') {
  153. if (needSeperator === true) {
  154. this._createSeperator(2);
  155. } else {
  156. needSeperator = true;
  157. }
  158. this._createEditNodeButton(locale);
  159. }
  160. else if (selectedEdgeCount === 1 && selectedNodeCount === 0 && this.options.editEdge !== false) {
  161. if (needSeperator === true) {
  162. this._createSeperator(3);
  163. } else {
  164. needSeperator = true;
  165. }
  166. this._createEditEdgeButton(locale);
  167. }
  168. // remove buttons
  169. if (selectedTotalCount !== 0) {
  170. if (selectedNodeCount > 0 && this.options.deleteNode !== false) {
  171. if (needSeperator === true) {
  172. this._createSeperator(4);
  173. }
  174. this._createDeleteButton(locale);
  175. }
  176. else if (selectedNodeCount === 0 && this.options.deleteEdge !== false) {
  177. if (needSeperator === true) {
  178. this._createSeperator(4);
  179. }
  180. this._createDeleteButton(locale);
  181. }
  182. }
  183. // bind the close button
  184. this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
  185. // refresh this bar based on what has been selected
  186. this._temporaryBindEvent('select', this.showManipulatorToolbar.bind(this));
  187. }
  188. // redraw to show any possible changes
  189. this.body.emitter.emit('_redraw');
  190. }
  191. /**
  192. * Create the toolbar for adding Nodes
  193. */
  194. addNodeMode() {
  195. // when using the gui, enable edit mode if it wasnt already.
  196. if (this.editMode !== true) {
  197. this.enableEditMode();
  198. }
  199. // restore the state of any bound functions or events, remove control nodes, restore physics
  200. this._clean();
  201. this.inMode = 'addNode';
  202. if (this.guiEnabled === true) {
  203. let locale = this.options.locales[this.options.locale];
  204. this.manipulationDOM = {};
  205. this._createBackButton(locale);
  206. this._createSeperator();
  207. this._createDescription(locale['addDescription'] || this.options.locales['en']['addDescription']);
  208. // bind the close button
  209. this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
  210. }
  211. this._temporaryBindEvent('click', this._performAddNode.bind(this));
  212. }
  213. /**
  214. * call the bound function to handle the editing of the node. The node has to be selected.
  215. */
  216. editNode() {
  217. // when using the gui, enable edit mode if it wasnt already.
  218. if (this.editMode !== true) {
  219. this.enableEditMode();
  220. }
  221. // restore the state of any bound functions or events, remove control nodes, restore physics
  222. this._clean();
  223. let node = this.selectionHandler._getSelectedNode();
  224. if (node !== undefined) {
  225. this.inMode = 'editNode';
  226. if (typeof this.options.editNode === 'function') {
  227. if (node.isCluster !== true) {
  228. let data = util.deepExtend({}, node.options, false);
  229. data.x = node.x;
  230. data.y = node.y;
  231. if (this.options.editNode.length === 2) {
  232. this.options.editNode(data, (finalizedData) => {
  233. if (finalizedData !== null && finalizedData !== undefined && this.inMode === 'editNode') { // if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
  234. this.body.data.nodes.getDataSet().update(finalizedData);
  235. }
  236. this.showManipulatorToolbar();
  237. });
  238. }
  239. else {
  240. throw new Error('The function for edit does not support two arguments (data, callback)');
  241. }
  242. }
  243. else {
  244. alert(this.options.locales[this.options.locale]['editClusterError'] || this.options.locales['en']['editClusterError']);
  245. }
  246. }
  247. else {
  248. throw new Error('No function has been configured to handle the editing of nodes.');
  249. }
  250. }
  251. else {
  252. this.showManipulatorToolbar();
  253. }
  254. }
  255. /**
  256. * create the toolbar to connect nodes
  257. */
  258. addEdgeMode() {
  259. // when using the gui, enable edit mode if it wasnt already.
  260. if (this.editMode !== true) {
  261. this.enableEditMode();
  262. }
  263. // restore the state of any bound functions or events, remove control nodes, restore physics
  264. this._clean();
  265. this.inMode = 'addEdge';
  266. if (this.guiEnabled === true) {
  267. let locale = this.options.locales[this.options.locale];
  268. this.manipulationDOM = {};
  269. this._createBackButton(locale);
  270. this._createSeperator();
  271. this._createDescription(locale['edgeDescription'] || this.options.locales['en']['edgeDescription']);
  272. // bind the close button
  273. this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
  274. }
  275. // temporarily overload functions
  276. this._temporaryBindUI('onTouch', this._handleConnect.bind(this));
  277. this._temporaryBindUI('onDragEnd', this._finishConnect.bind(this));
  278. this._temporaryBindUI('onDrag', this._dragControlNode.bind(this));
  279. this._temporaryBindUI('onRelease', this._finishConnect.bind(this));
  280. this._temporaryBindUI('onDragStart', () => {});
  281. this._temporaryBindUI('onHold', () => {});
  282. }
  283. /**
  284. * create the toolbar to edit edges
  285. */
  286. editEdgeMode() {
  287. // when using the gui, enable edit mode if it wasn't already.
  288. if (this.editMode !== true) {
  289. this.enableEditMode();
  290. }
  291. // restore the state of any bound functions or events, remove control nodes, restore physics
  292. this._clean();
  293. this.inMode = 'editEdge';
  294. if (this.guiEnabled === true) {
  295. let locale = this.options.locales[this.options.locale];
  296. this.manipulationDOM = {};
  297. this._createBackButton(locale);
  298. this._createSeperator();
  299. this._createDescription(locale['editEdgeDescription'] || this.options.locales['en']['editEdgeDescription']);
  300. // bind the close button
  301. this._bindHammerToDiv(this.closeDiv, this.toggleEditMode.bind(this));
  302. }
  303. this.edgeBeingEditedId = this.selectionHandler.getSelectedEdges()[0];
  304. if (this.edgeBeingEditedId !== undefined) {
  305. let edge = this.body.edges[this.edgeBeingEditedId];
  306. // create control nodes
  307. let controlNodeFrom = this._getNewTargetNode(edge.from.x, edge.from.y);
  308. let controlNodeTo = this._getNewTargetNode(edge.to.x, edge.to.y);
  309. this.temporaryIds.nodes.push(controlNodeFrom.id);
  310. this.temporaryIds.nodes.push(controlNodeTo.id);
  311. this.body.nodes[controlNodeFrom.id] = controlNodeFrom;
  312. this.body.nodeIndices.push(controlNodeFrom.id);
  313. this.body.nodes[controlNodeTo.id] = controlNodeTo;
  314. this.body.nodeIndices.push(controlNodeTo.id);
  315. // temporarily overload UI functions, cleaned up automatically because of _temporaryBindUI
  316. this._temporaryBindUI('onTouch', this._controlNodeTouch.bind(this)); // used to get the position
  317. this._temporaryBindUI('onTap', () => {}); // disabled
  318. this._temporaryBindUI('onHold', () => {}); // disabled
  319. this._temporaryBindUI('onDragStart', this._controlNodeDragStart.bind(this));// used to select control node
  320. this._temporaryBindUI('onDrag', this._controlNodeDrag.bind(this)); // used to drag control node
  321. this._temporaryBindUI('onDragEnd', this._controlNodeDragEnd.bind(this)); // used to connect or revert control nodes
  322. this._temporaryBindUI('onMouseMove', () => {}); // disabled
  323. // create function to position control nodes correctly on movement
  324. // automatically cleaned up because we use the temporary bind
  325. this._temporaryBindEvent('beforeDrawing', (ctx) => {
  326. let positions = edge.edgeType.findBorderPositions(ctx);
  327. if (controlNodeFrom.selected === false) {
  328. controlNodeFrom.x = positions.from.x;
  329. controlNodeFrom.y = positions.from.y;
  330. }
  331. if (controlNodeTo.selected === false) {
  332. controlNodeTo.x = positions.to.x;
  333. controlNodeTo.y = positions.to.y;
  334. }
  335. });
  336. this.body.emitter.emit('_redraw');
  337. }
  338. else {
  339. this.showManipulatorToolbar();
  340. }
  341. }
  342. /**
  343. * delete everything in the selection
  344. */
  345. deleteSelected() {
  346. // when using the gui, enable edit mode if it wasnt already.
  347. if (this.editMode !== true) {
  348. this.enableEditMode();
  349. }
  350. // restore the state of any bound functions or events, remove control nodes, restore physics
  351. this._clean();
  352. this.inMode = 'delete';
  353. let selectedNodes = this.selectionHandler.getSelectedNodes();
  354. let selectedEdges = this.selectionHandler.getSelectedEdges();
  355. let deleteFunction = undefined;
  356. if (selectedNodes.length > 0) {
  357. for (let i = 0; i < selectedNodes.length; i++) {
  358. if (this.body.nodes[selectedNodes[i]].isCluster === true) {
  359. alert(this.options.locales[this.options.locale]['deleteClusterError'] || this.options.locales['en']['deleteClusterError']);
  360. return;
  361. }
  362. }
  363. if (typeof this.options.deleteNode === 'function') {
  364. deleteFunction = this.options.deleteNode;
  365. }
  366. }
  367. else if (selectedEdges.length > 0) {
  368. if (typeof this.options.deleteEdge === 'function') {
  369. deleteFunction = this.options.deleteEdge;
  370. }
  371. }
  372. if (typeof deleteFunction === 'function') {
  373. let data = {nodes: selectedNodes, edges: selectedEdges};
  374. if (deleteFunction.length === 2) {
  375. deleteFunction(data, (finalizedData) => {
  376. if (finalizedData !== null && finalizedData !== undefined && this.inMode === 'delete') { // if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
  377. this.body.data.edges.getDataSet().remove(finalizedData.edges);
  378. this.body.data.nodes.getDataSet().remove(finalizedData.nodes);
  379. this.body.emitter.emit('startSimulation');
  380. this.showManipulatorToolbar();
  381. }
  382. else {
  383. this.body.emitter.emit('startSimulation');
  384. this.showManipulatorToolbar();
  385. }
  386. });
  387. }
  388. else {
  389. throw new Error('The function for delete does not support two arguments (data, callback)')
  390. }
  391. }
  392. else {
  393. this.body.data.edges.getDataSet().remove(selectedEdges);
  394. this.body.data.nodes.getDataSet().remove(selectedNodes);
  395. this.body.emitter.emit('startSimulation');
  396. this.showManipulatorToolbar();
  397. }
  398. }
  399. //********************************************** PRIVATE ***************************************//
  400. /**
  401. * draw or remove the DOM
  402. * @private
  403. */
  404. _setup() {
  405. if (this.options.enabled === true) {
  406. // Enable the GUI
  407. this.guiEnabled = true;
  408. this._createWrappers();
  409. if (this.editMode === false) {
  410. this._createEditButton();
  411. }
  412. else {
  413. this.showManipulatorToolbar();
  414. }
  415. }
  416. else {
  417. this._removeManipulationDOM();
  418. // disable the gui
  419. this.guiEnabled = false;
  420. }
  421. }
  422. /**
  423. * create the div overlays that contain the DOM
  424. * @private
  425. */
  426. _createWrappers() {
  427. // load the manipulator HTML elements. All styling done in css.
  428. if (this.manipulationDiv === undefined) {
  429. this.manipulationDiv = document.createElement('div');
  430. this.manipulationDiv.className = 'vis-manipulation';
  431. if (this.editMode === true) {
  432. this.manipulationDiv.style.display = 'block';
  433. }
  434. else {
  435. this.manipulationDiv.style.display = 'none';
  436. }
  437. this.canvas.frame.appendChild(this.manipulationDiv);
  438. }
  439. // container for the edit button.
  440. if (this.editModeDiv === undefined) {
  441. this.editModeDiv = document.createElement('div');
  442. this.editModeDiv.className = 'vis-edit-mode';
  443. if (this.editMode === true) {
  444. this.editModeDiv.style.display = 'none';
  445. }
  446. else {
  447. this.editModeDiv.style.display = 'block';
  448. }
  449. this.canvas.frame.appendChild(this.editModeDiv);
  450. }
  451. // container for the close div button
  452. if (this.closeDiv === undefined) {
  453. this.closeDiv = document.createElement('div');
  454. this.closeDiv.className = 'vis-close';
  455. this.closeDiv.style.display = this.manipulationDiv.style.display;
  456. this.canvas.frame.appendChild(this.closeDiv);
  457. }
  458. }
  459. /**
  460. * generate a new target node. Used for creating new edges and editing edges
  461. * @param x
  462. * @param y
  463. * @returns {*}
  464. * @private
  465. */
  466. _getNewTargetNode(x,y) {
  467. let controlNodeStyle = util.deepExtend({}, this.options.controlNodeStyle);
  468. controlNodeStyle.id = 'targetNode' + util.randomUUID();
  469. controlNodeStyle.hidden = false;
  470. controlNodeStyle.physics = false;
  471. controlNodeStyle.x = x;
  472. controlNodeStyle.y = y;
  473. // we have to define the bounding box in order for the nodes to be drawn immediately
  474. let node = this.body.functions.createNode(controlNodeStyle);
  475. node.shape.boundingBox = {left: x, right:x, top:y, bottom:y};
  476. return node;
  477. }
  478. /**
  479. * Create the edit button
  480. */
  481. _createEditButton() {
  482. // restore everything to it's original state (if applicable)
  483. this._clean();
  484. // reset the manipulationDOM
  485. this.manipulationDOM = {};
  486. // empty the editModeDiv
  487. util.recursiveDOMDelete(this.editModeDiv);
  488. // create the contents for the editMode button
  489. let locale = this.options.locales[this.options.locale];
  490. let button = this._createButton('editMode', 'vis-button vis-edit vis-edit-mode', locale['edit'] || this.options.locales['en']['edit']);
  491. this.editModeDiv.appendChild(button);
  492. // bind a hammer listener to the button, calling the function toggleEditMode.
  493. this._bindHammerToDiv(button, this.toggleEditMode.bind(this));
  494. }
  495. /**
  496. * this function cleans up after everything this module does. Temporary elements, functions and events are removed, physics restored, hammers removed.
  497. * @private
  498. */
  499. _clean() {
  500. // not in mode
  501. this.inMode = false;
  502. // _clean the divs
  503. if (this.guiEnabled === true) {
  504. util.recursiveDOMDelete(this.editModeDiv);
  505. util.recursiveDOMDelete(this.manipulationDiv);
  506. // removes all the bindings and overloads
  507. this._cleanManipulatorHammers();
  508. }
  509. // remove temporary nodes and edges
  510. this._cleanupTemporaryNodesAndEdges();
  511. // restore overloaded UI functions
  512. this._unbindTemporaryUIs();
  513. // remove the temporaryEventFunctions
  514. this._unbindTemporaryEvents();
  515. // restore the physics if required
  516. this.body.emitter.emit('restorePhysics');
  517. }
  518. /**
  519. * Each dom element has it's own hammer. They are stored in this.manipulationHammers. This cleans them up.
  520. * @private
  521. */
  522. _cleanManipulatorHammers() {
  523. // _clean hammer bindings
  524. if (this.manipulationHammers.length != 0) {
  525. for (let i = 0; i < this.manipulationHammers.length; i++) {
  526. this.manipulationHammers[i].destroy();
  527. }
  528. this.manipulationHammers = [];
  529. }
  530. }
  531. /**
  532. * Remove all DOM elements created by this module.
  533. * @private
  534. */
  535. _removeManipulationDOM() {
  536. // removes all the bindings and overloads
  537. this._clean();
  538. // empty the manipulation divs
  539. util.recursiveDOMDelete(this.manipulationDiv);
  540. util.recursiveDOMDelete(this.editModeDiv);
  541. util.recursiveDOMDelete(this.closeDiv);
  542. // remove the manipulation divs
  543. if (this.manipulationDiv) {this.canvas.frame.removeChild(this.manipulationDiv);}
  544. if (this.editModeDiv) {this.canvas.frame.removeChild(this.editModeDiv);}
  545. if (this.closeDiv) {this.canvas.frame.removeChild(this.closeDiv);}
  546. // set the references to undefined
  547. this.manipulationDiv = undefined;
  548. this.editModeDiv = undefined;
  549. this.closeDiv = undefined;
  550. }
  551. /**
  552. * create a seperator line. the index is to differentiate in the manipulation dom
  553. * @param index
  554. * @private
  555. */
  556. _createSeperator(index = 1) {
  557. this.manipulationDOM['seperatorLineDiv' + index] = document.createElement('div');
  558. this.manipulationDOM['seperatorLineDiv' + index].className = 'vis-separator-line';
  559. this.manipulationDiv.appendChild(this.manipulationDOM['seperatorLineDiv' + index]);
  560. }
  561. // ---------------------- DOM functions for buttons --------------------------//
  562. _createAddNodeButton(locale) {
  563. let button = this._createButton('addNode', 'vis-button vis-add', locale['addNode'] || this.options.locales['en']['addNode']);
  564. this.manipulationDiv.appendChild(button);
  565. this._bindHammerToDiv(button, this.addNodeMode.bind(this));
  566. }
  567. _createAddEdgeButton(locale) {
  568. let button = this._createButton('addEdge', 'vis-button vis-connect', locale['addEdge'] || this.options.locales['en']['addEdge']);
  569. this.manipulationDiv.appendChild(button);
  570. this._bindHammerToDiv(button, this.addEdgeMode.bind(this));
  571. }
  572. _createEditNodeButton(locale) {
  573. let button = this._createButton('editNode', 'vis-button vis-edit', locale['editNode'] || this.options.locales['en']['editNode']);
  574. this.manipulationDiv.appendChild(button);
  575. this._bindHammerToDiv(button, this.editNode.bind(this));
  576. }
  577. _createEditEdgeButton(locale) {
  578. let button = this._createButton('editEdge', 'vis-button vis-edit', locale['editEdge'] || this.options.locales['en']['editEdge']);
  579. this.manipulationDiv.appendChild(button);
  580. this._bindHammerToDiv(button, this.editEdgeMode.bind(this));
  581. }
  582. _createDeleteButton(locale) {
  583. let button = this._createButton('delete', 'vis-button vis-delete', locale['del'] || this.options.locales['en']['del']);
  584. this.manipulationDiv.appendChild(button);
  585. this._bindHammerToDiv(button, this.deleteSelected.bind(this));
  586. }
  587. _createBackButton(locale) {
  588. let button = this._createButton('back', 'vis-button vis-back', locale['back'] || this.options.locales['en']['back']);
  589. this.manipulationDiv.appendChild(button);
  590. this._bindHammerToDiv(button, this.showManipulatorToolbar.bind(this));
  591. }
  592. _createButton(id, className, label, labelClassName = 'vis-label') {
  593. this.manipulationDOM[id+'Div'] = document.createElement('div');
  594. this.manipulationDOM[id+'Div'].className = className;
  595. this.manipulationDOM[id+'Label'] = document.createElement('div');
  596. this.manipulationDOM[id+'Label'].className = labelClassName;
  597. this.manipulationDOM[id+'Label'].innerHTML = label;
  598. this.manipulationDOM[id+'Div'].appendChild(this.manipulationDOM[id+'Label']);
  599. return this.manipulationDOM[id+'Div'];
  600. }
  601. _createDescription(label) {
  602. this.manipulationDiv.appendChild(
  603. this._createButton('description', 'vis-button vis-none', label)
  604. );
  605. }
  606. // -------------------------- End of DOM functions for buttons ------------------------------//
  607. /**
  608. * this binds an event until cleanup by the clean functions.
  609. * @param event
  610. * @param newFunction
  611. * @private
  612. */
  613. _temporaryBindEvent(event, newFunction) {
  614. this.temporaryEventFunctions.push({event:event, boundFunction:newFunction});
  615. this.body.emitter.on(event, newFunction);
  616. }
  617. /**
  618. * this overrides an UI function until cleanup by the clean function
  619. * @param UIfunctionName
  620. * @param newFunction
  621. * @private
  622. */
  623. _temporaryBindUI(UIfunctionName, newFunction) {
  624. if (this.body.eventListeners[UIfunctionName] !== undefined) {
  625. this.temporaryUIFunctions[UIfunctionName] = this.body.eventListeners[UIfunctionName];
  626. this.body.eventListeners[UIfunctionName] = newFunction;
  627. }
  628. else {
  629. throw new Error('This UI function does not exist. Typo? You tried: ' + UIfunctionName + ' possible are: ' + JSON.stringify(Object.keys(this.body.eventListeners)));
  630. }
  631. }
  632. /**
  633. * Restore the overridden UI functions to their original state.
  634. *
  635. * @private
  636. */
  637. _unbindTemporaryUIs() {
  638. for (let functionName in this.temporaryUIFunctions) {
  639. if (this.temporaryUIFunctions.hasOwnProperty(functionName)) {
  640. this.body.eventListeners[functionName] = this.temporaryUIFunctions[functionName];
  641. delete this.temporaryUIFunctions[functionName];
  642. }
  643. }
  644. this.temporaryUIFunctions = {};
  645. }
  646. /**
  647. * Unbind the events created by _temporaryBindEvent
  648. * @private
  649. */
  650. _unbindTemporaryEvents() {
  651. for (let i = 0; i < this.temporaryEventFunctions.length; i++) {
  652. let eventName = this.temporaryEventFunctions[i].event;
  653. let boundFunction = this.temporaryEventFunctions[i].boundFunction;
  654. this.body.emitter.off(eventName, boundFunction);
  655. }
  656. this.temporaryEventFunctions = [];
  657. }
  658. /**
  659. * Bind an hammer instance to a DOM element.
  660. * @param domElement
  661. * @param funct
  662. */
  663. _bindHammerToDiv(domElement, boundFunction) {
  664. let hammer = new Hammer(domElement, {});
  665. hammerUtil.onTouch(hammer, boundFunction);
  666. this.manipulationHammers.push(hammer);
  667. }
  668. /**
  669. * Neatly clean up temporary edges and nodes
  670. * @private
  671. */
  672. _cleanupTemporaryNodesAndEdges() {
  673. // _clean temporary edges
  674. for (let i = 0; i < this.temporaryIds.edges.length; i++) {
  675. this.body.edges[this.temporaryIds.edges[i]].disconnect();
  676. delete this.body.edges[this.temporaryIds.edges[i]];
  677. let indexTempEdge = this.body.edgeIndices.indexOf(this.temporaryIds.edges[i]);
  678. if (indexTempEdge !== -1) {this.body.edgeIndices.splice(indexTempEdge,1);}
  679. }
  680. // _clean temporary nodes
  681. for (let i = 0; i < this.temporaryIds.nodes.length; i++) {
  682. delete this.body.nodes[this.temporaryIds.nodes[i]];
  683. let indexTempNode = this.body.nodeIndices.indexOf(this.temporaryIds.nodes[i]);
  684. if (indexTempNode !== -1) {this.body.nodeIndices.splice(indexTempNode,1);}
  685. }
  686. this.temporaryIds = {nodes: [], edges: []};
  687. }
  688. // ------------------------------------------ EDIT EDGE FUNCTIONS -----------------------------------------//
  689. /**
  690. * the touch is used to get the position of the initial click
  691. * @param event
  692. * @private
  693. */
  694. _controlNodeTouch(event) {
  695. this.selectionHandler.unselectAll();
  696. this.lastTouch = this.body.functions.getPointer(event.center);
  697. this.lastTouch.translation = util.extend({},this.body.view.translation); // copy the object
  698. }
  699. /**
  700. * the drag start is used to mark one of the control nodes as selected.
  701. * @param event
  702. * @private
  703. */
  704. _controlNodeDragStart(event) {
  705. let pointer = this.lastTouch;
  706. let pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
  707. let from = this.body.nodes[this.temporaryIds.nodes[0]];
  708. let to = this.body.nodes[this.temporaryIds.nodes[1]];
  709. let edge = this.body.edges[this.edgeBeingEditedId];
  710. this.selectedControlNode = undefined;
  711. let fromSelect = from.isOverlappingWith(pointerObj);
  712. let toSelect = to.isOverlappingWith(pointerObj);
  713. if (fromSelect === true) {
  714. this.selectedControlNode = from;
  715. edge.edgeType.from = from;
  716. }
  717. else if (toSelect === true) {
  718. this.selectedControlNode = to;
  719. edge.edgeType.to = to;
  720. }
  721. // we use the selection to find the node that is being dragged. We explicitly select it here.
  722. if (this.selectedControlNode !== undefined) {
  723. this.selectionHandler.selectObject(this.selectedControlNode)
  724. }
  725. this.body.emitter.emit('_redraw');
  726. }
  727. /**
  728. * dragging the control nodes or the canvas
  729. * @param event
  730. * @private
  731. */
  732. _controlNodeDrag(event) {
  733. this.body.emitter.emit('disablePhysics');
  734. let pointer = this.body.functions.getPointer(event.center);
  735. let pos = this.canvas.DOMtoCanvas(pointer);
  736. if (this.selectedControlNode !== undefined) {
  737. this.selectedControlNode.x = pos.x;
  738. this.selectedControlNode.y = pos.y;
  739. }
  740. else {
  741. // if the drag was not started properly because the click started outside the network div, start it now.
  742. let diffX = pointer.x - this.lastTouch.x;
  743. let diffY = pointer.y - this.lastTouch.y;
  744. this.body.view.translation = {x:this.lastTouch.translation.x + diffX, y:this.lastTouch.translation.y + diffY};
  745. }
  746. this.body.emitter.emit('_redraw');
  747. }
  748. /**
  749. * connecting or restoring the control nodes.
  750. * @param event
  751. * @private
  752. */
  753. _controlNodeDragEnd(event) {
  754. let pointer = this.body.functions.getPointer(event.center);
  755. let pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
  756. let edge = this.body.edges[this.edgeBeingEditedId];
  757. // if the node that was dragged is not a control node, return
  758. if (this.selectedControlNode === undefined) {
  759. return;
  760. }
  761. // we use the selection to find the node that is being dragged. We explicitly DEselect the control node here.
  762. this.selectionHandler.unselectAll();
  763. let overlappingNodeIds = this.selectionHandler._getAllNodesOverlappingWith(pointerObj);
  764. let node = undefined;
  765. for (let i = overlappingNodeIds.length-1; i >= 0; i--) {
  766. if (overlappingNodeIds[i] !== this.selectedControlNode.id) {
  767. node = this.body.nodes[overlappingNodeIds[i]];
  768. break;
  769. }
  770. }
  771. // perform the connection
  772. if (node !== undefined && this.selectedControlNode !== undefined) {
  773. if (node.isCluster === true) {
  774. alert(this.options.locales[this.options.locale]['createEdgeError'] || this.options.locales['en']['createEdgeError'])
  775. }
  776. else {
  777. let from = this.body.nodes[this.temporaryIds.nodes[0]];
  778. if (this.selectedControlNode.id === from.id) {
  779. this._performEditEdge(node.id, edge.to.id);
  780. }
  781. else {
  782. this._performEditEdge(edge.from.id, node.id);
  783. }
  784. }
  785. }
  786. else {
  787. edge.updateEdgeType();
  788. this.body.emitter.emit('restorePhysics');
  789. }
  790. this.body.emitter.emit('_redraw');
  791. }
  792. // ------------------------------------ END OF EDIT EDGE FUNCTIONS -----------------------------------------//
  793. // ------------------------------------------- ADD EDGE FUNCTIONS -----------------------------------------//
  794. /**
  795. * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
  796. * to walk the user through the process.
  797. *
  798. * @private
  799. */
  800. _handleConnect(event) {
  801. // check to avoid double fireing of this function.
  802. if (new Date().valueOf() - this.touchTime > 100) {
  803. this.lastTouch = this.body.functions.getPointer(event.center);
  804. this.lastTouch.translation = util.extend({},this.body.view.translation); // copy the object
  805. let pointer = this.lastTouch;
  806. let node = this.selectionHandler.getNodeAt(pointer);
  807. if (node !== undefined) {
  808. if (node.isCluster === true) {
  809. alert(this.options.locales[this.options.locale]['createEdgeError'] || this.options.locales['en']['createEdgeError'])
  810. }
  811. else {
  812. // create a node the temporary line can look at
  813. let targetNode = this._getNewTargetNode(node.x,node.y);
  814. this.body.nodes[targetNode.id] = targetNode;
  815. this.body.nodeIndices.push(targetNode.id);
  816. // create a temporary edge
  817. let connectionEdge = this.body.functions.createEdge({
  818. id: 'connectionEdge' + util.randomUUID(),
  819. from: node.id,
  820. to: targetNode.id,
  821. physics: false,
  822. smooth: {
  823. enabled: true,
  824. type: 'continuous',
  825. roundness: 0.5
  826. }
  827. });
  828. this.body.edges[connectionEdge.id] = connectionEdge;
  829. this.body.edgeIndices.push(connectionEdge.id);
  830. this.temporaryIds.nodes.push(targetNode.id);
  831. this.temporaryIds.edges.push(connectionEdge.id);
  832. }
  833. }
  834. this.touchTime = new Date().valueOf();
  835. }
  836. }
  837. _dragControlNode(event) {
  838. let pointer = this.body.functions.getPointer(event.center);
  839. if (this.temporaryIds.nodes[0] !== undefined) {
  840. let targetNode = this.body.nodes[this.temporaryIds.nodes[0]]; // there is only one temp node in the add edge mode.
  841. targetNode.x = this.canvas._XconvertDOMtoCanvas(pointer.x);
  842. targetNode.y = this.canvas._YconvertDOMtoCanvas(pointer.y);
  843. this.body.emitter.emit('_redraw');
  844. }
  845. else {
  846. let diffX = pointer.x - this.lastTouch.x;
  847. let diffY = pointer.y - this.lastTouch.y;
  848. this.body.view.translation = {x:this.lastTouch.translation.x + diffX, y:this.lastTouch.translation.y + diffY};
  849. }
  850. }
  851. /**
  852. * Connect the new edge to the target if one exists, otherwise remove temp line
  853. * @param event
  854. * @private
  855. */
  856. _finishConnect(event) {
  857. let pointer = this.body.functions.getPointer(event.center);
  858. let pointerObj = this.selectionHandler._pointerToPositionObject(pointer);
  859. // remember the edge id
  860. let connectFromId = undefined;
  861. if (this.temporaryIds.edges[0] !== undefined) {
  862. connectFromId = this.body.edges[this.temporaryIds.edges[0]].fromId;
  863. }
  864. // get the overlapping node but NOT the temporary node;
  865. let overlappingNodeIds = this.selectionHandler._getAllNodesOverlappingWith(pointerObj);
  866. let node = undefined;
  867. for (let i = overlappingNodeIds.length-1; i >= 0; i--) {
  868. // if the node id is NOT a temporary node, accept the node.
  869. if (this.temporaryIds.nodes.indexOf(overlappingNodeIds[i]) === -1) {
  870. node = this.body.nodes[overlappingNodeIds[i]];
  871. break;
  872. }
  873. }
  874. // clean temporary nodes and edges.
  875. this._cleanupTemporaryNodesAndEdges();
  876. // perform the connection
  877. if (node !== undefined) {
  878. if (node.isCluster === true) {
  879. alert(this.options.locales[this.options.locale]['createEdgeError'] || this.options.locales['en']['createEdgeError']);
  880. }
  881. else {
  882. if (this.body.nodes[connectFromId] !== undefined && this.body.nodes[node.id] !== undefined) {
  883. this._performAddEdge(connectFromId, node.id);
  884. }
  885. }
  886. }
  887. this.body.emitter.emit('_redraw');
  888. }
  889. // --------------------------------------- END OF ADD EDGE FUNCTIONS -------------------------------------//
  890. // ------------------------------ Performing all the actual data manipulation ------------------------//
  891. /**
  892. * Adds a node on the specified location
  893. */
  894. _performAddNode(clickData) {
  895. let defaultData = {
  896. id: util.randomUUID(),
  897. x: clickData.pointer.canvas.x,
  898. y: clickData.pointer.canvas.y,
  899. label: 'new'
  900. };
  901. if (typeof this.options.addNode === 'function') {
  902. if (this.options.addNode.length === 2) {
  903. this.options.addNode(defaultData, (finalizedData) => {
  904. if (finalizedData !== null && finalizedData !== undefined && this.inMode === 'addNode') { // if for whatever reason the mode has changes (due to dataset change) disregard the callback
  905. this.body.data.nodes.getDataSet().add(finalizedData);
  906. this.showManipulatorToolbar();
  907. }
  908. });
  909. }
  910. else {
  911. throw new Error('The function for add does not support two arguments (data,callback)');
  912. this.showManipulatorToolbar();
  913. }
  914. }
  915. else {
  916. this.body.data.nodes.getDataSet().add(defaultData);
  917. this.showManipulatorToolbar();
  918. }
  919. }
  920. /**
  921. * connect two nodes with a new edge.
  922. *
  923. * @private
  924. */
  925. _performAddEdge(sourceNodeId, targetNodeId) {
  926. let defaultData = {from: sourceNodeId, to: targetNodeId};
  927. if (typeof this.options.addEdge === 'function') {
  928. if (this.options.addEdge.length === 2) {
  929. this.options.addEdge(defaultData, (finalizedData) => {
  930. if (finalizedData !== null && finalizedData !== undefined && this.inMode === 'addEdge') { // if for whatever reason the mode has changes (due to dataset change) disregard the callback
  931. this.body.data.edges.getDataSet().add(finalizedData);
  932. this.selectionHandler.unselectAll();
  933. this.showManipulatorToolbar();
  934. }
  935. });
  936. }
  937. else {
  938. throw new Error('The function for connect does not support two arguments (data,callback)');
  939. }
  940. }
  941. else {
  942. this.body.data.edges.getDataSet().add(defaultData);
  943. this.selectionHandler.unselectAll();
  944. this.showManipulatorToolbar();
  945. }
  946. }
  947. /**
  948. * connect two nodes with a new edge.
  949. *
  950. * @private
  951. */
  952. _performEditEdge(sourceNodeId, targetNodeId) {
  953. let defaultData = {id: this.edgeBeingEditedId, from: sourceNodeId, to: targetNodeId};
  954. if (typeof this.options.editEdge === 'function') {
  955. if (this.options.editEdge.length === 2) {
  956. this.options.editEdge(defaultData, (finalizedData) => {
  957. if (finalizedData === null || finalizedData === undefined || this.inMode !== 'editEdge') { // if for whatever reason the mode has changes (due to dataset change) disregard the callback) {
  958. this.body.edges[defaultData.id].updateEdgeType();
  959. this.body.emitter.emit('_redraw');
  960. }
  961. else {
  962. this.body.data.edges.getDataSet().update(finalizedData);
  963. this.selectionHandler.unselectAll();
  964. this.showManipulatorToolbar();
  965. }
  966. });
  967. }
  968. else {
  969. throw new Error('The function for edit does not support two arguments (data, callback)');
  970. }
  971. }
  972. else {
  973. this.body.data.edges.getDataSet().update(defaultData);
  974. this.selectionHandler.unselectAll();
  975. this.showManipulatorToolbar();
  976. }
  977. }
  978. }
  979. export default ManipulationSystem;