vis-rails 1.0.2 → 2.0.0

data/vendor/assets/vis/graph/Graph.js

@@ -23,14 +23,14 @@ function Graph (container, data, options) {
   this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
   this.renderTime = 0.5 * this.renderTimestep;         // measured time it takes to render a frame
   this.maxPhysicsTicksPerRender = 3;                   // max amount of physics ticks per render step.
-  this.physicsDiscreteStepsize = 0.65;                 // discrete stepsize of the simulation
+  this.physicsDiscreteStepsize = 0.50;                 // discrete stepsize of the simulation
 
   this.stabilize = true;  // stabilize before displaying the graph
   this.selectable = true;
   this.initializing = true;
 
   // these functions are triggered when the dataset is edited
-  this.triggerFunctions = {add:null,edit:null,connect:null,del:null};
+  this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
 
   // set constant values
   this.constants = {
@@ -53,6 +53,10 @@ function Graph (container, data, options) {
         highlight: {
           border: '#2B7CE9',
           background: '#D2E5FF'
+        },
+        hover: {
+          border: '#2B7CE9',
+          background: '#D2E5FF'
         }
       },
       borderColor: '#2B7CE9',
@@ -64,10 +68,12 @@ function Graph (container, data, options) {
       widthMin: 1,
       widthMax: 15,
       width: 1,
+      hoverWidth: 1.5,
       style: 'line',
       color: {
         color:'#848484',
-        highlight:'#848484'
+        highlight:'#848484',
+        hover: '#848484'
       },
       fontColor: '#343434',
       fontSize: 14, // px
@@ -160,9 +166,11 @@ function Graph (container, data, options) {
       link:"Add Link",
       del:"Delete selected",
       editNode:"Edit Node",
+      editEdge:"Edit Edge",
       back:"Back",
       addDescription:"Click in an empty space to place a new node.",
       linkDescription:"Click on a node and drag the edge to another node to connect them.",
+      editEdgeDescription:"Click on the control points and drag them to a node to connect to it.",
       addError:"The function for add does not support two arguments (data,callback).",
       linkError:"The function for connect does not support two arguments (data,callback).",
       editError:"The function for edit does not support two arguments (data, callback).",
@@ -180,10 +188,13 @@ function Graph (container, data, options) {
         background: '#FFFFC6'
       }
     },
-    moveable: true,
-    zoomable: true
+    dragGraph: true,
+    dragNodes: true,
+    zoomable: true,
+    hover: false
   };
-  this.editMode = this.constants.dataManipulation.initiallyVisible;
+  this.hoverObj = {nodes:{},edges:{}};
+
 
   // Node variables
   var graph = this;
@@ -217,7 +228,6 @@ function Graph (container, data, options) {
   this._setScale(1);
   this.setOptions(options);
 
-
   // other vars
   this.freezeSimulation = false;// freeze the simulation
   this.cachedFunctions = {};
@@ -521,9 +531,10 @@ Graph.prototype.setOptions = function (options) {
     if (options.freezeForStabilization !== undefined)    {this.constants.freezeForStabilization = options.freezeForStabilization;}
     if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
     if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
-    if (options.moveable !== undefined)           {this.constants.moveable = options.moveable;}
-    if (options.zoomable !== undefined)          {this.constants.zoomable = options.zoomable;}
-
+    if (options.dragGraph !== undefined)       {this.constants.dragGraph = options.dragGraph;}
+    if (options.dragNodes !== undefined)       {this.constants.dragNodes = options.dragNodes;}
+    if (options.zoomable !== undefined)        {this.constants.zoomable = options.zoomable;}
+    if (options.hover !== undefined)           {this.constants.hover = options.hover;}
 
     if (options.labels !== undefined)  {
       for (prop in options.labels) {
@@ -541,6 +552,10 @@ Graph.prototype.setOptions = function (options) {
       this.triggerFunctions.edit = options.onEdit;
     }
 
+    if (options.onEditEdge) {
+      this.triggerFunctions.editEdge = options.onEditEdge;
+    }
+
     if (options.onConnect) {
       this.triggerFunctions.connect = options.onConnect;
     }
@@ -635,6 +650,7 @@ Graph.prototype.setOptions = function (options) {
           this.constants.dataManipulation[prop] = options.dataManipulation[prop];
         }
       }
+      this.editMode = this.constants.dataManipulation.initiallyVisible;
     }
     else if (options.dataManipulation !== undefined)  {
       this.constants.dataManipulation.enabled = false;
@@ -656,10 +672,12 @@ Graph.prototype.setOptions = function (options) {
           this.constants.edges.color = {};
           this.constants.edges.color.color = options.edges.color;
           this.constants.edges.color.highlight = options.edges.color;
+          this.constants.edges.color.hover = options.edges.color;
         }
         else {
           if (options.edges.color.color !== undefined)     {this.constants.edges.color.color = options.edges.color.color;}
           if (options.edges.color.highlight !== undefined) {this.constants.edges.color.highlight = options.edges.color.highlight;}
+          if (options.edges.color.hover !== undefined)     {this.constants.edges.color.hover = options.edges.color.hover;}
         }
       }
 
@@ -946,7 +964,7 @@ Graph.prototype._handleOnDrag = function(event) {
   var me = this,
     drag = this.drag,
     selection = drag.selection;
-  if (selection && selection.length) {
+  if (selection && selection.length && this.constants.dragNodes == true) {
     // calculate delta's and new location
     var deltaX = pointer.x - drag.pointer.x,
       deltaY = pointer.y - drag.pointer.y;
@@ -971,7 +989,7 @@ Graph.prototype._handleOnDrag = function(event) {
     }
   }
   else {
-    if (this.constants.moveable == true) {
+    if (this.constants.dragGraph == true) {
       // move the graph
       var diffX = pointer.x - this.drag.pointer.x;
       var diffY = pointer.y - this.drag.pointer.y;
@@ -1159,7 +1177,7 @@ Graph.prototype._onMouseMoveTitle = function (event) {
   var pointer = this._getPointer(gesture.center);
 
   // check if the previously selected node is still selected
-  if (this.popupNode) {
+  if (this.popupObj) {
     this._checkHidePopup(pointer);
   }
 
@@ -1175,6 +1193,40 @@ Graph.prototype._onMouseMoveTitle = function (event) {
   if (!this.drag.dragging) {
     this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
   }
+
+
+  /**
+   * Adding hover highlights
+   */
+  if (this.constants.hover == true) {
+    // removing all hover highlights
+    for (var edgeId in this.hoverObj.edges) {
+      if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
+        this.hoverObj.edges[edgeId].hover = false;
+        delete this.hoverObj.edges[edgeId];
+      }
+    }
+
+    // adding hover highlights
+    var obj = this._getNodeAt(pointer);
+    if (obj == null) {
+      obj = this._getEdgeAt(pointer);
+    }
+    if (obj != null) {
+      this._hoverObject(obj);
+    }
+
+    // removing all node hover highlights except for the selected one.
+    for (var nodeId in this.hoverObj.nodes) {
+      if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
+        if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
+          this._blurObject(this.hoverObj.nodes[nodeId]);
+          delete this.hoverObj.nodes[nodeId];
+        }
+      }
+    }
+    this.redraw();
+  }
 };
 
 /**
@@ -1194,23 +1246,23 @@ Graph.prototype._checkShowPopup = function (pointer) {
   };
 
   var id;
-  var lastPopupNode = this.popupNode;
+  var lastPopupNode = this.popupObj;
 
-  if (this.popupNode == undefined) {
+  if (this.popupObj == undefined) {
     // search the nodes for overlap, select the top one in case of multiple nodes
     var nodes = this.nodes;
     for (id in nodes) {
       if (nodes.hasOwnProperty(id)) {
         var node = nodes[id];
         if (node.getTitle() !== undefined && node.isOverlappingWith(obj)) {
-          this.popupNode = node;
+          this.popupObj = node;
           break;
         }
       }
     }
   }
 
-  if (this.popupNode === undefined) {
+  if (this.popupObj === undefined) {
     // search the edges for overlap
     var edges = this.edges;
     for (id in edges) {
@@ -1218,16 +1270,16 @@ Graph.prototype._checkShowPopup = function (pointer) {
         var edge = edges[id];
         if (edge.connected && (edge.getTitle() !== undefined) &&
             edge.isOverlappingWith(obj)) {
-          this.popupNode = edge;
+          this.popupObj = edge;
           break;
         }
       }
     }
   }
 
-  if (this.popupNode) {
+  if (this.popupObj) {
     // show popup message window
-    if (this.popupNode != lastPopupNode) {
+    if (this.popupObj != lastPopupNode) {
       var me = this;
       if (!me.popup) {
         me.popup = new Popup(me.frame, me.constants.tooltip);
@@ -1237,7 +1289,7 @@ Graph.prototype._checkShowPopup = function (pointer) {
       // bottom left location of the popup, and you can easily move over the
       // popup area
       me.popup.setPosition(pointer.x - 3, pointer.y - 3);
-      me.popup.setText(me.popupNode.getTitle());
+      me.popup.setText(me.popupObj.getTitle());
       me.popup.show();
     }
   }
@@ -1256,8 +1308,8 @@ Graph.prototype._checkShowPopup = function (pointer) {
  * @private
  */
 Graph.prototype._checkHidePopup = function (pointer) {
-  if (!this.popupNode || !this._getNodeAt(pointer) ) {
-    this.popupNode = undefined;
+  if (!this.popupObj || !this._getNodeAt(pointer) ) {
+    this.popupObj = undefined;
     if (this.popup) {
       this.popup.hide();
     }
@@ -1633,7 +1685,6 @@ Graph.prototype._updateValueRange = function(obj) {
  */
 Graph.prototype.redraw = function() {
   this.setSize(this.width, this.height);
-
   this._redraw();
 };
 
@@ -1665,6 +1716,7 @@ Graph.prototype._redraw = function() {
   this._doInAllSectors("_drawAllSectorNodes",ctx);
   this._doInAllSectors("_drawEdges",ctx);
   this._doInAllSectors("_drawNodes",ctx,false);
+  this._doInAllSectors("_drawControlNodes",ctx);
 
 //  this._doInSupportSector("_drawNodes",ctx,true);
 //  this._drawTree(ctx,"#F00F0F");
@@ -1849,6 +1901,21 @@ Graph.prototype._drawEdges = function(ctx) {
   }
 };
 
+/**
+ * Redraw all edges
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+ * @param {CanvasRenderingContext2D}   ctx
+ * @private
+ */
+Graph.prototype._drawControlNodes = function(ctx) {
+  var edges = this.edges;
+  for (var id in edges) {
+    if (edges.hasOwnProperty(id)) {
+      edges[id]._drawControlNodes(ctx);
+    }
+  }
+};
+
 /**
  * Find a stable position for all nodes
  * @private
@@ -2183,7 +2250,36 @@ Graph.prototype.storePosition = function() {
 };
 
 
+/**
+ * Center a node in view.
+ *
+ * @param {Number} nodeId
+ * @param {Number} [zoomLevel]
+ */
+Graph.prototype.focusOnNode = function (nodeId, zoomLevel) {
+  if (this.nodes.hasOwnProperty(nodeId)) {
+    if (zoomLevel === undefined) {
+      zoomLevel = this._getScale();
+    }
+    var nodePosition= {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
+
+    var requiredScale = zoomLevel;
+    this._setScale(requiredScale);
+
+    var canvasCenter = this.DOMtoCanvas({x:0.5 * this.frame.canvas.width,y:0.5 * this.frame.canvas.height});
+    var translation = this._getTranslation();
 
+    var distanceFromCenter = {x:canvasCenter.x - nodePosition.x,
+                              y:canvasCenter.y - nodePosition.y};
+
+    this._setTranslation(translation.x + requiredScale * distanceFromCenter.x,
+                         translation.y + requiredScale * distanceFromCenter.y);
+    this.redraw();
+  }
+  else {
+    console.log("This nodeId cannot be found.")
+  }
+};
 
 
 

data/vendor/assets/vis/graph/Node.js

@@ -25,13 +25,14 @@
  */
 function Node(properties, imagelist, grouplist, constants) {
   this.selected = false;
+  this.hover = false;
 
   this.edges = []; // all edges connected to this node
   this.dynamicEdges = [];
   this.reroutedEdges = {};
-  this.group = constants.nodes.group;
 
-  this.fontSize = constants.nodes.fontSize;
+  this.group = constants.nodes.group;
+  this.fontSize = Number(constants.nodes.fontSize);
   this.fontFace = constants.nodes.fontFace;
   this.fontColor = constants.nodes.fontColor;
   this.fontDrawThreshold = 3;
@@ -569,7 +570,7 @@ Node.prototype._drawBox = function (ctx) {
   var clusterLineWidth = 2.5;
   var selectionLineWidth = 2;
 
-  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
@@ -618,7 +619,7 @@ Node.prototype._drawDatabase = function (ctx) {
   var clusterLineWidth = 2.5;
   var selectionLineWidth = 2;
 
-  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
@@ -633,7 +634,7 @@ Node.prototype._drawDatabase = function (ctx) {
   ctx.lineWidth *= this.graphScaleInv;
   ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+  ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
   ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
   ctx.fill();
   ctx.stroke();
@@ -668,7 +669,7 @@ Node.prototype._drawCircle = function (ctx) {
   var clusterLineWidth = 2.5;
   var selectionLineWidth = 2;
 
-  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
@@ -683,7 +684,7 @@ Node.prototype._drawCircle = function (ctx) {
   ctx.lineWidth *= this.graphScaleInv;
   ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+  ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
   ctx.circle(this.x, this.y, this.radius);
   ctx.fill();
   ctx.stroke();
@@ -718,7 +719,7 @@ Node.prototype._drawEllipse = function (ctx) {
   var clusterLineWidth = 2.5;
   var selectionLineWidth = 2;
 
-  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
@@ -733,7 +734,7 @@ Node.prototype._drawEllipse = function (ctx) {
   ctx.lineWidth *= this.graphScaleInv;
   ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+  ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
 
   ctx.ellipse(this.left, this.top, this.width, this.height);
   ctx.fill();
@@ -795,7 +796,7 @@ Node.prototype._drawShape = function (ctx, shape) {
     case 'star':          radiusMultiplier = 4; break;
   }
 
-  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
@@ -810,8 +811,7 @@ Node.prototype._drawShape = function (ctx, shape) {
   ctx.lineWidth *= this.graphScaleInv;
   ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
-
+  ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
   ctx[shape](this.x, this.y, this.radius);
   ctx.fill();
   ctx.stroke();
@@ -892,10 +892,10 @@ Node.prototype.getTextSize = function(ctx) {
  */
 Node.prototype.inArea = function() {
   if (this.width !== undefined) {
-  return (this.x + this.width*this.graphScaleInv  >= this.canvasTopLeft.x    &&
-          this.x - this.width*this.graphScaleInv  <  this.canvasBottomRight.x &&
-          this.y + this.height*this.graphScaleInv >= this.canvasTopLeft.y    &&
-          this.y - this.height*this.graphScaleInv <  this.canvasBottomRight.y);
+  return (this.x + this.width *this.graphScaleInv  >= this.canvasTopLeft.x     &&
+          this.x - this.width *this.graphScaleInv  <  this.canvasBottomRight.x &&
+          this.y + this.height*this.graphScaleInv  >= this.canvasTopLeft.y     &&
+          this.y - this.height*this.graphScaleInv  <  this.canvasBottomRight.y);
   }
   else {
     return true;

data/vendor/assets/vis/graph/graphMixins/HierarchicalLayoutMixin.js

@@ -20,7 +20,7 @@ var HierarchicalLayoutMixin = {
    * @private
    */
   _setupHierarchicalLayout : function() {
-    if (this.constants.hierarchicalLayout.enabled == true) {
+    if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
       if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
         this.constants.hierarchicalLayout.levelSeparation *= -1;
       }

data/vendor/assets/vis/graph/graphMixins/ManipulationMixin.js

@@ -65,6 +65,11 @@ var manipulationMixin = {
     if (this.boundFunction) {
       this.off('select', this.boundFunction);
     }
+    if (this.edgeBeingEdited !== undefined) {
+      this.edgeBeingEdited._disableControlNodes();
+      this.edgeBeingEdited = undefined;
+      this.selectedControlNode = null;
+    }
 
     // restore overloaded functions
     this._restoreOverloadedFunctions();
@@ -93,6 +98,12 @@ var manipulationMixin = {
           "<span class='graph-manipulationUI edit' id='graph-manipulate-editNode'>" +
             "<span class='graph-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
       }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        this.manipulationDiv.innerHTML += "" +
+          "<div class='graph-seperatorLine'></div>" +
+          "<span class='graph-manipulationUI edit' id='graph-manipulate-editEdge'>" +
+          "<span class='graph-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
+      }
       if (this._selectionIsEmpty() == false) {
         this.manipulationDiv.innerHTML += "" +
           "<div class='graph-seperatorLine'></div>" +
@@ -110,6 +121,10 @@ var manipulationMixin = {
         var editButton = document.getElementById("graph-manipulate-editNode");
         editButton.onclick = this._editNode.bind(this);
       }
+      else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
+        var editButton = document.getElementById("graph-manipulate-editEdge");
+        editButton.onclick = this._createEditEdgeToolbar.bind(this);
+      }
       if (this._selectionIsEmpty() == false) {
         var deleteButton = document.getElementById("graph-manipulate-delete");
         deleteButton.onclick = this._deleteSelected.bind(this);
@@ -203,10 +218,106 @@ var manipulationMixin = {
 
     // redraw to show the unselect
     this._redraw();
+  },
 
+  /**
+   * create the toolbar to edit edges
+   *
+   * @private
+   */
+  _createEditEdgeToolbar : function() {
+    // clear the toolbar
+    this._clearManipulatorBar();
+
+    if (this.boundFunction) {
+      this.off('select', this.boundFunction);
+    }
+
+    this.edgeBeingEdited = this._getSelectedEdge();
+    this.edgeBeingEdited._enableControlNodes();
+
+    this.manipulationDiv.innerHTML = "" +
+      "<span class='graph-manipulationUI back' id='graph-manipulate-back'>" +
+      "<span class='graph-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
+      "<div class='graph-seperatorLine'></div>" +
+      "<span class='graph-manipulationUI none' id='graph-manipulate-back'>" +
+      "<span id='graph-manipulatorLabel' class='graph-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
+
+    // bind the icon
+    var backButton = document.getElementById("graph-manipulate-back");
+    backButton.onclick = this._createManipulatorBar.bind(this);
+
+    // temporarily overload functions
+    this.cachedFunctions["_handleTouch"]      = this._handleTouch;
+    this.cachedFunctions["_handleOnRelease"]  = this._handleOnRelease;
+    this.cachedFunctions["_handleTap"]        = this._handleTap;
+    this.cachedFunctions["_handleDragStart"]  = this._handleDragStart;
+    this.cachedFunctions["_handleOnDrag"]     = this._handleOnDrag;
+    this._handleTouch     = this._selectControlNode;
+    this._handleTap       = function () {};
+    this._handleOnDrag    = this._controlNodeDrag;
+    this._handleDragStart = function () {}
+    this._handleOnRelease = this._releaseControlNode;
+
+    // redraw to show the unselect
+    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.
+   *
+   * @private
+   */
+  _selectControlNode : function(pointer) {
+    this.edgeBeingEdited.controlNodes.from.unselect();
+    this.edgeBeingEdited.controlNodes.to.unselect();
+    this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y));
+    if (this.selectedControlNode !== null) {
+      this.selectedControlNode.select();
+      this.freezeSimulation = true;
+    }
+    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.
+   *
+   * @private
+   */
+  _controlNodeDrag : function(event) {
+    var pointer = this._getPointer(event.gesture.center);
+    if (this.selectedControlNode !== null && this.selectedControlNode !== undefined) {
+      this.selectedControlNode.x = this._XconvertDOMtoCanvas(pointer.x);
+      this.selectedControlNode.y = this._YconvertDOMtoCanvas(pointer.y);
+    }
+    this._redraw();
+  },
+
+  _releaseControlNode : function(pointer) {
+    var newNode = this._getNodeAt(pointer);
+    if (newNode != null) {
+      if (this.edgeBeingEdited.controlNodes.from.selected == true) {
+        this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
+        this.edgeBeingEdited.controlNodes.from.unselect();
+      }
+      if (this.edgeBeingEdited.controlNodes.to.selected == true) {
+        this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
+        this.edgeBeingEdited.controlNodes.to.unselect();
+      }
+    }
+    else {
+      this.edgeBeingEdited._restoreControlNodes();
+    }
+    this.freezeSimulation = false;
+    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.
@@ -351,6 +462,36 @@ var manipulationMixin = {
     }
   },
 
+  /**
+   * connect two nodes with a new edge.
+   *
+   * @private
+   */
+  _editEdge : function(sourceNodeId,targetNodeId) {
+    if (this.editMode == true) {
+      var defaultData = {id: this.edgeBeingEdited.id, from:sourceNodeId, to:targetNodeId};
+      if (this.triggerFunctions.editEdge) {
+        if (this.triggerFunctions.editEdge.length == 2) {
+          var me = this;
+          this.triggerFunctions.editEdge(defaultData, function(finalizedData) {
+            me.edgesData.update(finalizedData);
+            me.moving = true;
+            me.start();
+          });
+        }
+        else {
+          alert(this.constants.labels["linkError"]);
+          this.moving = true;
+          this.start();
+        }
+      }
+      else {
+        this.edgesData.update(defaultData);
+        this.moving = true;
+        this.start();
+      }
+    }
+  },
 
   /**
    * Create the toolbar to edit the selected node. The label and the color can be changed. Other colors are derived from the chosen color.
@@ -391,6 +532,8 @@ var manipulationMixin = {
   },
 
 
+
+
   /**
    * delete everything in the selection
    *