- tweaked add edge manipulation

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 3.4.3-SNAPSHOT
- * @date    2014-09-15
+ * @date    2014-09-16
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -21883,7 +21883,12 @@ return /******/ (function(modules) { // webpackBootstrap
    * handle drag start event
    * @private
    */
-  Network.prototype._onDragEnd = function () {
+  Network.prototype._onDragEnd = function (event) {
+    this._handleDragEnd(event);
+  };
+
+
+  Network.prototype._handleDragEnd = function(event) {
     this.drag.dragging = false;
     var selection = this.drag.selection;
     if (selection && selection.length) {
@@ -21899,8 +21904,7 @@ return /******/ (function(modules) { // webpackBootstrap
       this._redraw();
     }
     this.emit("dragEnd",{nodeIds:this.getSelection().nodes});
-  };
-
+  }
   /**
    * handle tap/click event: select/unselect a node
    * @private
@@ -30983,8 +30987,12 @@ return /******/ (function(modules) { // webpackBootstrap
     // temporarily overload functions
     this.cachedFunctions["_handleTouch"] = this._handleTouch;
     this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
+    this.cachedFunctions["_handleDragStart"] = this._handleDragStart;
+    this.cachedFunctions["_handleDragEnd"] = this._handleDragEnd;
     this._handleTouch = this._handleConnect;
-    this._handleOnRelease = this._finishConnect;
+    this._handleOnRelease = function () {};
+    this._handleDragStart = function () {};
+    this._handleDragEnd = this._finishConnect;
 
     // redraw to show the unselect
     this._redraw();
@@ -31037,9 +31045,6 @@ return /******/ (function(modules) { // webpackBootstrap
   };
 
 
-
-
-
   /**
    * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
    * to walk the user through the process.
@@ -31057,6 +31062,7 @@ return /******/ (function(modules) { // webpackBootstrap
     this._redraw();
   };
 
+
   /**
    * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
    * to walk the user through the process.
@@ -31100,7 +31106,6 @@ return /******/ (function(modules) { // webpackBootstrap
   exports._handleConnect = function(pointer) {
     if (this._getSelectedNodeCount() == 0) {
       var node = this._getNodeAt(pointer);
-      var supportNodes, targetNode, targetViaNode, connectionEdge;
 
       if (node != null) {
         if (node.clusterSize > 1) {
@@ -31108,35 +31113,33 @@ return /******/ (function(modules) { // webpackBootstrap
         }
         else {
           this._selectObject(node,false);
-          supportNodes = this.sectors['support']['nodes'];
+          var supportNodes = this.sectors['support']['nodes'];
 
-            // create a node the temporary line can look at
-          supportNodes['targetNode'] = targetNode = new Node({id:'targetNode'},{},{},this.constants);
+          // create a node the temporary line can look at
+          supportNodes['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
+          var targetNode = supportNodes['targetNode'];
           targetNode.x = node.x;
           targetNode.y = node.y;
 
-          supportNodes['targetViaNode'] = targetViaNode = new Node({id:'targetViaNode'},{},{},this.constants);
-          targetViaNode.x = node.x;
-          targetViaNode.y = node.y;
-          targetViaNode.parentEdgeId = "connectionEdge";
-
           // create a temporary edge
-          this.edges['connectionEdge'] = connectionEdge = new Edge({id:"connectionEdge",from:node.id,to:targetNode.id}, this, this.constants);
+          this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:targetNode.id}, this, this.constants);
+          var connectionEdge = this.edges['connectionEdge'];
           connectionEdge.from = node;
           connectionEdge.connected = true;
-          connectionEdge.smooth = true;
+          connectionEdge.options.smoothCurves = {enabled: true,
+              dynamic: false,
+              type: "continuous",
+              roundness: 0.5
+          };
           connectionEdge.selected = true;
           connectionEdge.to = targetNode;
-          connectionEdge.via = targetViaNode;
 
           this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
           this._handleOnDrag = function(event) {
             var pointer = this._getPointer(event.gesture.center);
-            var supportNodes = this.sectors['support']['nodes'];
-            supportNodes['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
-            supportNodes['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-            supportNodes['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
-            supportNodes['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+            var connectionEdge = this.edges['connectionEdge'];
+            connectionEdge.to.x = this._XconvertDOMtoCanvas(pointer.x);
+            connectionEdge.to.y = this._YconvertDOMtoCanvas(pointer.y);
           };
 
           this.moving = true;
@@ -31146,9 +31149,9 @@ return /******/ (function(modules) { // webpackBootstrap
     }
   };
 
-  exports._finishConnect = function(pointer) {
+  exports._finishConnect = function(event) {
     if (this._getSelectedNodeCount() == 1) {
-
+      var pointer = this._getPointer(event.gesture.center);
       // restore the drag function
       this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
       delete this.cachedFunctions["_handleOnDrag"];

examples/network/ex.html

@@ -18,35 +18,87 @@
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
   <script type="text/javascript">
-    var nodes = null;
-    var edges = null;
-    var network = null;
-
-    function draw() {
-        nodes = new vis.DataSet([
-            {id: '1001', value: '1'},
-            {id: '1009', value: '2'},
-            {id: '1061', value: '3'},
-            {id: '1226', value: '4'}
-        ]);
-        edges = new vis.DataSet([
-            {id: '1001_1061', from: '1001', to: '1061'},
-            {id: '1001_1226', from: '1001', to: '1226'},
-            {id: '1009_1061', from: '1009', to: '1061'},
-            {id: '1009_1226', from: '1009', to: '1226'},
-            {id: '1061_1226', from: '1061', to: '1226'}
-        ]);
+      var nodes = null;
+      var edges = null;
+      var network = null;
+
+      function draw() {
+      nodes = new vis.DataSet([{
+          id: '1001',
+          value: '1'
+      }, {
+          id: '1009',
+          value: '2'
+      }, {
+          id: '1061',
+          value: '3'
+      }, {
+          id: '1226',
+          value: '4'
+      }]);
+      edges = new vis.DataSet([{
+          id: '1001_1061',
+          from: '1001',
+          to: '1061',
+          value: '1'
+      }, {
+          id: '1001_1226',
+          from: '1001',
+          to: '1226',
+          value: '1'
+      }, {
+          id: '1009_1061',
+          from: '1009',
+          to: '1061',
+          value: '2'
+      }, {
+          id: '1009_1226',
+          from: '1009',
+          to: '1226',
+          value: '1'
+      }, {
+          id: '1061_1226',
+          from: '1061',
+          to: '1226',
+          value: '1'
+      }]);
       var container = document.getElementById('mynetwork');
       var data = {
-        nodes: nodes,
-        edges: edges
+          nodes: nodes,
+          edges: edges
+      };
+      var nodeNormalColor = { // For 'normal' nodes
+          background: '#92bbc7',
+          border: '#5d93a6',
+          borderWidth: 2,
+          highlight: {
+              background: '#5d93a6',
+              border: '#537286'
+          }
+      };
+      var nodeBlurColor = { // For 'blurred' nodes
+          background: '#f0f0f0',
+          border: '#f0f0f0'
+      };
+
+      var edgeNormalColor = {
+          color: '#5d93a6',
+          highlight: '#28132b'
+      };
+      var edgeBlurColor = {
+          color: '#f0f0f0',
+          highlight: '#f0f0f0'
       };
+
       var options = {
           nodes: {
-              shape: 'dot'
+              shape: 'dot',
+              color: nodeNormalColor
           },
           edges: {
-              inheritColor: false
+              inheritColor: false,
+              color: edgeNormalColor,
+              widthSelectionMultiplier: 1
           },
           physics: {
               'barnesHut': {
@@ -60,12 +112,64 @@
       network = new vis.Network(container, data, options);
 
       // add event listeners
-      network.on('select', function(params) {
-        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-          console.log(params.edges)
-          console.log(network.getSelection())
-      });
-    }
+      network.on('select', function (params) {
+          console.log(params.edges);
+
+          var nodesData = {};
+          var edgesData = {};
+          var nodeResetQuery = [];
+          var edgeResetQuery = [];
+
+          var allEdges = edges.get();
+          var allNodes = nodes.get();
+          for (var i = 0; i < allNodes.length; i++) {
+              nodesData[allNodes[i].id] = {id:allNodes[i].id, color: nodeBlurColor};
+              nodeResetQuery.push({id:allNodes[i].id, color: nodeNormalColor});
+
+          }
+          for (var i = 0; i < allEdges.length; i++) {
+              edgesData[allEdges[i].id] = {id:allEdges[i].id, color: edgeBlurColor};
+              edgeResetQuery.push({id:allEdges[i].id, color: edgeNormalColor});
+          }
+
+          // deselect
+          if (params.nodes.length == 0 && params.edges.length == 0) {
+             nodes.update(nodeResetQuery);
+             edges.update(edgeResetQuery);
+             return;
+          }
+
+          // paint nodes and edges.
+          for (var i = 0; i < params.nodes.length; i++) {
+              nodesData[params.nodes[i]].color = nodeNormalColor;
+          }
+          for (var i = 0; i < params.edges.length; i++) {
+              edgesData[params.edges[i]].color = edgeNormalColor;
+              var selEdge = edges.get(params.edges[i]);
+              nodesData[selEdge.to].color = nodeNormalColor;
+              nodesData[selEdge.from].color = nodeNormalColor;
+          }
+
+          var nodeUpdateQuery = [];
+          var edgeUpdateQuery = [];
+          for (var nodeId in nodesData) {
+              if (nodesData.hasOwnProperty(nodeId)) {
+                  nodeUpdateQuery.push(nodesData[nodeId]);
+              }
+          }
+          for (var edgeId in edgesData) {
+              if (edgesData.hasOwnProperty(edgeId)) {
+                  edgeUpdateQuery.push(edgesData[edgeId]);
+              }
+          }
+
+          nodes.update(nodeUpdateQuery);
+          edges.update(edgeUpdateQuery);
+//          nodes.update(nodeResetQuery);
+//          edges.update(edgeResetQuery);
+//          nodes.update(nodeUpdateQuery);
+//          edges.update(edgeUpdateQuery);
+          });}
 
 
   </script>

lib/network/Network.js

@@ -953,7 +953,12 @@ Network.prototype._handleOnDrag = function(event) {
  * handle drag start event
  * @private
  */
-Network.prototype._onDragEnd = function () {
+Network.prototype._onDragEnd = function (event) {
+  this._handleDragEnd(event);
+};
+
+
+Network.prototype._handleDragEnd = function(event) {
   this.drag.dragging = false;
   var selection = this.drag.selection;
   if (selection && selection.length) {
@@ -969,8 +974,7 @@ Network.prototype._onDragEnd = function () {
     this._redraw();
   }
   this.emit("dragEnd",{nodeIds:this.getSelection().nodes});
-};
-
+}
 /**
  * handle tap/click event: select/unselect a node
  * @private

lib/network/mixins/ManipulationMixin.js

@@ -220,8 +220,12 @@ exports._createAddEdgeToolbar = function() {
   // temporarily overload functions
   this.cachedFunctions["_handleTouch"] = this._handleTouch;
   this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
+  this.cachedFunctions["_handleDragStart"] = this._handleDragStart;
+  this.cachedFunctions["_handleDragEnd"] = this._handleDragEnd;
   this._handleTouch = this._handleConnect;
-  this._handleOnRelease = this._finishConnect;
+  this._handleOnRelease = function () {};
+  this._handleDragStart = function () {};
+  this._handleDragEnd = this._finishConnect;
 
   // redraw to show the unselect
   this._redraw();
@@ -274,9 +278,6 @@ exports._createEditEdgeToolbar = function() {
 };
 
 
-
-
-
 /**
  * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
  * to walk the user through the process.
@@ -294,6 +295,7 @@ exports._selectControlNode = function(pointer) {
   this._redraw();
 };
 
+
 /**
  * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
  * to walk the user through the process.
@@ -337,7 +339,6 @@ exports._releaseControlNode = function(pointer) {
 exports._handleConnect = function(pointer) {
   if (this._getSelectedNodeCount() == 0) {
     var node = this._getNodeAt(pointer);
-    var supportNodes, targetNode, targetViaNode, connectionEdge;
 
     if (node != null) {
       if (node.clusterSize > 1) {
@@ -345,35 +346,33 @@ exports._handleConnect = function(pointer) {
       }
       else {
         this._selectObject(node,false);
-        supportNodes = this.sectors['support']['nodes'];
+        var supportNodes = this.sectors['support']['nodes'];
 
-          // create a node the temporary line can look at
-        supportNodes['targetNode'] = targetNode = new Node({id:'targetNode'},{},{},this.constants);
+        // create a node the temporary line can look at
+        supportNodes['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
+        var targetNode = supportNodes['targetNode'];
         targetNode.x = node.x;
         targetNode.y = node.y;
 
-        supportNodes['targetViaNode'] = targetViaNode = new Node({id:'targetViaNode'},{},{},this.constants);
-        targetViaNode.x = node.x;
-        targetViaNode.y = node.y;
-        targetViaNode.parentEdgeId = "connectionEdge";
-
         // create a temporary edge
-        this.edges['connectionEdge'] = connectionEdge = new Edge({id:"connectionEdge",from:node.id,to:targetNode.id}, this, this.constants);
+        this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:targetNode.id}, this, this.constants);
+        var connectionEdge = this.edges['connectionEdge'];
         connectionEdge.from = node;
         connectionEdge.connected = true;
-        connectionEdge.smooth = true;
+        connectionEdge.options.smoothCurves = {enabled: true,
+            dynamic: false,
+            type: "continuous",
+            roundness: 0.5
+        };
         connectionEdge.selected = true;
         connectionEdge.to = targetNode;
-        connectionEdge.via = targetViaNode;
 
         this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
         this._handleOnDrag = function(event) {
           var pointer = this._getPointer(event.gesture.center);
-          var supportNodes = this.sectors['support']['nodes'];
-          supportNodes['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
-          supportNodes['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
-          supportNodes['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
-          supportNodes['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
+          var connectionEdge = this.edges['connectionEdge'];
+          connectionEdge.to.x = this._XconvertDOMtoCanvas(pointer.x);
+          connectionEdge.to.y = this._YconvertDOMtoCanvas(pointer.y);
         };
 
         this.moving = true;
@@ -383,9 +382,9 @@ exports._handleConnect = function(pointer) {
   }
 };
 
-exports._finishConnect = function(pointer) {
+exports._finishConnect = function(event) {
   if (this._getSelectedNodeCount() == 1) {
-
+    var pointer = this._getPointer(event.gesture.center);
     // restore the drag function
     this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
     delete this.cachedFunctions["_handleOnDrag"];