From 17ce133094a0c5196e743bfa3b69adf4c05f5361 Mon Sep 17 00:00:00 2001 From: David Anderson Date: Mon, 21 Nov 2016 08:33:58 -0500 Subject: [PATCH] Edit edge without endpoint dragging, and pass label in data (#2329) * { manipulation: { editEdge: { editWithoutDrag: function } } } edits an edge without dragging. * An example of editing network edges without dragging, enabling label creation / change --- docs/network/manipulation.html | 2 +- .../other/manipulationEditEdgeNoDrag.html | 254 ++++++++++++++++++ lib/network/modules/ManipulationSystem.js | 22 +- lib/network/options.js | 5 +- 4 files changed, 276 insertions(+), 7 deletions(-) create mode 100644 examples/network/other/manipulationEditEdgeNoDrag.html diff --git a/docs/network/manipulation.html b/docs/network/manipulation.html index 7f8db952..95f9fc88 100644 --- a/docs/network/manipulation.html +++ b/docs/network/manipulation.html @@ -164,7 +164,7 @@ var options = { This example code will show a popup if you connect a node to itself to ask you if that was what you wanted. If you do not want the edge created, do not call the callback function or call the callback function null or no argument. editNode Function undefined Editing of nodes is only possible when a handling function is supplied. If this is not the case, editing of nodes will be disabled. The function will be called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the addNode function with the node's data and a callback function. - editEdge Boolean or Function true If boolean, toggle the editing of edges in the GUI. When a function is supplied, it will be called when an edge is selected and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the addEdge function was called. If the callback is not performed, the edge will remain hanging where it was released. To cancel, call the callback function with null as argument or without arguments. + editEdge Boolean or Function true If boolean, toggle the editing of edges in the GUI. If a function is supplied, it will be called when an edge is selected and the 'Edit Edge' button on the toolbar is pressed. Initially, the endpoints of the edge may be dragged to connect to a different node, then the function will be called in the same way the addEdge function is called. If an object, if a function is given for the 'editWithoutDrag' property, the function will be called immediately (without dragging any endpoints) in the same way the addEdge function is called. If the callback is not performed, the edge will remain hanging where it was released. To cancel, call the callback function with null as argument or without arguments. deleteNode Boolean or Function true If boolean, toggle the deletion of nodes in the GUI. If function, it will be called when a node is selected and the 'Delete selected' button is pressed. When using a function, it will receive a callback and an object with an array of selected nodeIds and an array of selected edges Ids. These are the items that will be deleted if the callback is performed. deleteEdge Boolean or Function true If boolean, toggle the deletion of edges in the GUI. If function, it will be called when an edge is selected and the 'Delete selected' button is pressed. When using a function, it will receive a callback and an object with an array of selected nodeIds (empty) and an array of selected edges Ids. These are the items that will be deleted if the callback is performed. controlNodeStyle Object ObjectYou can supply any styling information you'd like here. All fields described in the nodes module are allowed except obviously for id, x, y and fixed.

Default: diff --git a/examples/network/other/manipulationEditEdgeNoDrag.html b/examples/network/other/manipulationEditEdgeNoDrag.html new file mode 100644 index 00000000..985ae767 --- /dev/null +++ b/examples/network/other/manipulationEditEdgeNoDrag.html @@ -0,0 +1,254 @@ + + + + + Network | Manipulation | Edit Edge Without Drag + + + + + + + + + + + +

Editing the nodes and edges-without-drag (localized)

+

+ The localization is only relevant to the manipulation buttons. +

+ +

+ + +

+ +
+ node
+ + + + + + + +
id
label
+ + +
+ +
+ edge
+ + + +
label
+ + +
+ +
+
+ + + diff --git a/lib/network/modules/ManipulationSystem.js b/lib/network/modules/ManipulationSystem.js index 1334b397..581ae937 100644 --- a/lib/network/modules/ManipulationSystem.js +++ b/lib/network/modules/ManipulationSystem.js @@ -340,6 +340,14 @@ class ManipulationSystem { this._clean(); this.inMode = 'editEdge'; + if (typeof this.options.editEdge === 'object' && typeof this.options.editEdge.editWithoutDrag === "function") { + this.edgeBeingEditedId = this.selectionHandler.getSelectedEdges()[0]; + if (this.edgeBeingEditedId !== undefined) { + var edge = this.body.edges[this.edgeBeingEditedId]; + this._performEditEdge(edge.from, edge.to); + return; + } + } if (this.guiEnabled === true) { let locale = this.options.locales[this.options.locale]; this.manipulationDOM = {}; @@ -1114,13 +1122,18 @@ class ManipulationSystem { * @private */ _performEditEdge(sourceNodeId, targetNodeId) { - let defaultData = {id: this.edgeBeingEditedId, from: sourceNodeId, to: targetNodeId}; - if (typeof this.options.editEdge === 'function') { - if (this.options.editEdge.length === 2) { - this.options.editEdge(defaultData, (finalizedData) => { + let defaultData = {id: this.edgeBeingEditedId, from: sourceNodeId, to: targetNodeId, label: this.body.data.edges._data[this.edgeBeingEditedId].label }; + let eeFunct = this.options.editEdge; + if (typeof eeFunct === 'object') { + eeFunct = eeFunct.editWithoutDrag; + } + if (typeof eeFunct === 'function') { + if (eeFunct.length === 2) { + eeFunct(defaultData, (finalizedData) => { if (finalizedData === null || finalizedData === undefined || this.inMode !== 'editEdge') { // if for whatever reason the mode has changes (due to dataset change) disregard the callback) { this.body.edges[defaultData.id].updateEdgeType(); this.body.emitter.emit('_redraw'); + this.showManipulatorToolbar(); } else { this.body.data.edges.getDataSet().update(finalizedData); @@ -1144,4 +1157,3 @@ class ManipulationSystem { } export default ManipulationSystem; - diff --git a/lib/network/options.js b/lib/network/options.js index 5b9e9f7a..2a5609b3 100644 --- a/lib/network/options.js +++ b/lib/network/options.js @@ -140,7 +140,10 @@ let allOptions = { addNode: { boolean, 'function': 'function' }, addEdge: { boolean, 'function': 'function' }, editNode: { 'function': 'function' }, - editEdge: { boolean, 'function': 'function' }, + editEdge: { + editWithoutDrag: { 'function' : 'function' }, + __type__: {object, boolean, 'function': 'function' } + }, deleteNode: { boolean, 'function': 'function' }, deleteEdge: { boolean, 'function': 'function' }, controlNodeStyle: 'get from nodes, will be overwritten below',