fixed self referencing node edge selection bug per #168

dist/vis.css

@@ -2,34 +2,76 @@
 }
 
 
-.vis.timeline.rootpanel {
+.vis.timeline.root {
   position: relative;
+  border: 1px solid #bfbfbf;
+
   overflow: hidden;
+  padding: 0;
+  margin: 0;
 
-  border: 1px solid #bfbfbf;
   box-sizing: border-box;
-
-  /* FIXME: there is an issue with the height of the items when panel height is animated
-  -webkit-transition: height 4s ease-in-out;
-  transition:         height 4s ease-in-out;
-  /**/
 }
 
-.vis.timeline .vpanel {
+.vis.timeline .vispanel {
   position: absolute;
-  overflow: hidden;
+
+  padding: 0;
+  margin: 0;
 
   box-sizing: border-box;
 }
 
-.vis.timeline .vpanel.side {
-  border-right: 1px solid #bfbfbf;
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.left,
+.vis.timeline .vispanel.right,
+.vis.timeline .vispanel.top,
+.vis.timeline .vispanel.bottom {
+  border: 1px #bfbfbf;
+}
+
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.left,
+.vis.timeline .vispanel.right {
+  border-top-style: solid;
+  border-bottom-style: solid;
+  overflow: hidden;
+}
+
+.vis.timeline .vispanel.center,
+.vis.timeline .vispanel.top,
+.vis.timeline .vispanel.bottom {
+  border-left-style: solid;
+  border-right-style: solid;
+}
+
+.vis.timeline .background {
+  overflow: hidden;
+}
+
+.vis.timeline .vispanel > .content {
+  position: relative;
+}
+
+.vis.timeline .vispanel .shadow {
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  box-shadow: 0 0 10px rgba(0,0,0,0.8);
+  /* TODO: find a nice way to ensure shadows are drawn on top of items
+  z-index: 1;
+  */
 }
 
-.vis.timeline .vpanel.side.hidden {
-  display: none;
+.vis.timeline .vispanel .shadow.top {
+  top: -1px;
+  left: 0;
 }
 
+.vis.timeline .vispanel .shadow.bottom {
+  bottom: -1px;
+  left: 0;
+}
 
 .vis.timeline .labelset {
   position: relative;
@@ -50,14 +92,12 @@
   box-sizing: border-box;
 }
 
-.vis.timeline.top .labelset .vlabel {
-  border-top: 1px solid #bfbfbf;
-  border-bottom: none;
+.vis.timeline .labelset .vlabel {
+  border-bottom: 1px solid #bfbfbf;
 }
 
-.vis.timeline.bottom .labelset .vlabel {
-  border-top: none;
-  border-bottom: 1px solid #bfbfbf;
+.vis.timeline .labelset .vlabel:last-child {
+  border-bottom: none;
 }
 
 .vis.timeline .labelset .vlabel .inner {
@@ -65,6 +105,10 @@
   padding: 5px;
 }
 
+.vis.timeline .labelset .vlabel .inner.hidden {
+  padding: 0;
+}
+
 
 .vis.timeline .itemset {
   position: relative;
@@ -72,38 +116,37 @@
   margin: 0;
 
   box-sizing: border-box;
-
-  /* FIXME: get transition working for rootpanel and itemset
-  -webkit-transition: height 4s ease-in-out;
-  transition:         height 4s ease-in-out;
-  /**/
 }
 
-.vis.timeline .background {
+.vis.timeline .itemset .background,
+.vis.timeline .itemset .foreground {
+  position: absolute;
+  width: 100%;
+  height: 100%;
 }
 
-.vis.timeline .foreground {
+.vis.timeline .itemset.foreground {
+  overflow: hidden;
 }
 
 .vis.timeline .axis {
-  overflow: visible;
+  position: absolute;
+  width: 100%;
+  height: 0;
+  left: 1px;
+  z-index: 1;
 }
 
 .vis.timeline  .group {
   position: relative;
   box-sizing: border-box;
+  border-bottom: 1px solid #bfbfbf;
 }
 
-.vis.timeline.top .group {
-  border-top: 1px solid #bfbfbf;
+.vis.timeline  .group:last-child {
   border-bottom: none;
 }
 
-.vis.timeline.bottom .group {
-  border-top: none;
-  border-bottom: 1px solid #bfbfbf;
-}
-
 
 .vis.timeline .item {
   position: absolute;
@@ -113,11 +156,6 @@
   background-color: #D5DDF6;
   display: inline-block;
   padding: 5px;
-
-  /* TODO: enable css transitions
-  -webkit-transition: top .4s ease-in-out, bottom .4s ease-in-out;
-  transition:         top .4s ease-in-out, bottom .4s ease-in-out;
-  /**/
 }
 
 .vis.timeline .item.selected {
@@ -126,7 +164,7 @@
   z-index: 999;
 }
 
-.vis.timeline.editable .item.selected {
+.vis.timeline .editable .item.selected {
   cursor: move;
 }
 
@@ -176,11 +214,6 @@
   width: 0;
   border-left-width: 1px;
   border-left-style: solid;
-
-  /* TODO: enable css transitions
-  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
-  transition:         height .4s ease-in-out, top .4s ease-in-out;
-  /**/
 }
 
 .vis.timeline .item .content {
@@ -223,7 +256,22 @@
 }
 
 .vis.timeline .timeaxis {
+  position: relative;
+  overflow: hidden;
+}
+
+.vis.timeline .timeaxis.foreground {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.vis.timeline .timeaxis.background {
   position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .vis.timeline .timeaxis .text {
@@ -248,14 +296,6 @@
   border-right: 1px solid;
 }
 
-.vis.timeline .timeaxis .grid.horizontal {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 0;
-  border-bottom: 1px solid;
-}
-
 .vis.timeline .timeaxis .grid.minor {
   border-color: #e5e5e5;
 }
@@ -267,14 +307,47 @@
 .vis.timeline .currenttime {
   background-color: #FF7F6E;
   width: 2px;
-  z-index: 9;
+  z-index: 1;
 }
 .vis.timeline .customtime {
   background-color: #6E94FF;
   width: 2px;
   cursor: move;
-  z-index: 9;
+  z-index: 1;
+}
+.vis.timeline.root {
+  /*
+  -webkit-transition: height .4s ease-in-out;
+  transition:         height .4s ease-in-out;
+  */
+}
+
+.vis.timeline .vispanel {
+  /*
+  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
+  transition:         height .4s ease-in-out, top .4s ease-in-out;
+  */
+}
+
+.vis.timeline .axis {
+  /*
+  -webkit-transition: top .4s ease-in-out;
+  transition:         top .4s ease-in-out;
+  */
+}
+
+/* TODO: get animation working nicely
+
+.vis.timeline .item {
+  -webkit-transition: top .4s ease-in-out;
+  transition:         top .4s ease-in-out;
+}
+
+.vis.timeline .item.line {
+  -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
+  transition:         height .4s ease-in-out, top .4s ease-in-out;
 }
+/**/
 div.graph-manipulationDiv {
     border-width:0px;
     border-bottom: 1px;

src/graph/Edge.js

@@ -721,44 +721,65 @@ Edge.prototype._drawArrow = function(ctx) {
  * @private
  */
 Edge.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
-  if (this.smooth == true) {
-    var minDistance = 1e9;
-    var i,t,x,y,dx,dy;
-    for (i = 0; i < 10; i++) {
-      t = 0.1*i;
-      x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*this.via.x + Math.pow(t,2)*x2;
-      y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*this.via.y + Math.pow(t,2)*y2;
-      dx = Math.abs(x3-x);
-      dy = Math.abs(y3-y);
-      minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
-    }
-    return minDistance
-  }
-  else {
-    var px = x2-x1,
-        py = y2-y1,
-        something = px*px + py*py,
-        u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
-
-    if (u > 1) {
-      u = 1;
-    }
-    else if (u < 0) {
-      u = 0;
+  if (this.from != this.to) {
+    if (this.smooth == true) {
+      var minDistance = 1e9;
+      var i,t,x,y,dx,dy;
+      for (i = 0; i < 10; i++) {
+        t = 0.1*i;
+        x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*this.via.x + Math.pow(t,2)*x2;
+        y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*this.via.y + Math.pow(t,2)*y2;
+        dx = Math.abs(x3-x);
+        dy = Math.abs(y3-y);
+        minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
+      }
+      return minDistance
     }
+    else {
+      var px = x2-x1,
+          py = y2-y1,
+          something = px*px + py*py,
+          u =  ((x3 - x1) * px + (y3 - y1) * py) / something;
+
+      if (u > 1) {
+        u = 1;
+      }
+      else if (u < 0) {
+        u = 0;
+      }
 
-    var x = x1 + u * px,
-        y = y1 + u * py,
-        dx = x - x3,
-        dy = y - y3;
+      var x = x1 + u * px,
+          y = y1 + u * py,
+          dx = x - x3,
+          dy = y - y3;
 
-    //# Note: If the actual distance does not matter,
-    //# if you only want to compare what this function
-    //# returns to other results of this function, you
-    //# can just return the squared distance instead
-    //# (i.e. remove the sqrt) to gain a little performance
+      //# Note: If the actual distance does not matter,
+      //# if you only want to compare what this function
+      //# returns to other results of this function, you
+      //# can just return the squared distance instead
+      //# (i.e. remove the sqrt) to gain a little performance
 
-    return Math.sqrt(dx*dx + dy*dy);
+      return Math.sqrt(dx*dx + dy*dy);
+    }
+  }
+  else {
+    var x, y, dx, dy;
+    var radius = this.length / 4;
+    var node = this.from;
+    if (!node.width) {
+      node.resize(ctx);
+    }
+    if (node.width > node.height) {
+      x = node.x + node.width / 2;
+      y = node.y - radius;
+    }
+    else {
+      x = node.x + radius;
+      y = node.y - node.height / 2;
+    }
+    dx = x - x3;
+    dy = y - y3;
+    return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
   }
 };
 
@@ -787,4 +808,4 @@ Edge.prototype.positionBezierNode = function() {
     this.via.x = 0.5 * (this.from.x + this.to.x);
     this.via.y = 0.5 * (this.from.y + this.to.y);
   }
-};
+};