Improved behaviour on self references

Change-Id: I27c25be708c13f435f5cdd6d89f51213df8b79df
diff --git a/dev/demo/relationsdemo.js b/dev/demo/relationsdemo.js
index 0ffbc8a..a84bfeb 100644
--- a/dev/demo/relationsdemo.js
+++ b/dev/demo/relationsdemo.js
@@ -158,6 +158,7 @@
     .addRel({ start: [2,4], end: 5, label: "e", direction: "uni" })
     .addRel({ start: [5,6], end: 7, direction: "uni" })
     .addRel({ start: 4, end: [6,8], label: "f", direction: "bi" })
+    .addRel({ start: 8, end: 8, label: "self", direction: "uni"})
   ;
 
   document.getElementById("treeRel").appendChild(rel.element());
@@ -165,12 +166,13 @@
   // Todo: Probably rename to rel.draw()
   rel.show();
 
+  /*
   var rel2 = relClass.create(relSnippet);
   document.getElementById("treeRel2").appendChild(rel2.element());
   rel2.show();
 
-  
   var tree = treeClass.create(treeSnippet);
   document.getElementById("treeHier").appendChild(tree.element());
+  */
 });
 
diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/relations.js
index 22fbc51..5857253 100644
--- a/dev/js/src/match/relations.js
+++ b/dev/js/src/match/relations.js
@@ -26,7 +26,7 @@
 
       // Some configurations
       this.maxArc      = 200; // maximum height of the bezier control point
-      this.overlapDiff = 40;
+      this.overlapDiff = 40;  // Difference on overlaps and minimum height for self-refernces
       this.arcDiff     = 15;
       this.anchorDiff  = 8;
       this.anchorStart = 15;
@@ -205,7 +205,8 @@
     _drawArc : function (arc) {
 
       var startPos, endPos;
-      var startY = this._y, endY = this._y;
+      var startY = this._y;
+      var endY = this._y;
 
       if (arc.startAnchor !== undefined) {
         startPos = this._tokenPoint(arc.startAnchor.element);
@@ -226,6 +227,14 @@
       startPos -= this.offsetLeft;
       endPos -= this.offsetLeft;
 
+      // Special treatment for self-references
+      var overlaps = arc.overlaps;
+      if (startPos == endPos) {
+        startPos -= this.overlapDiff / 3;
+        endPos += this.overlapDiff / 3;
+        overlaps += .5;
+      };
+
       var g = this._c("g");
       g.setAttribute("class", "arc");
       var p = g.appendChild(this._c("path"));
@@ -237,8 +246,9 @@
       // Create arc
       var middle = Math.abs(endPos - startPos) / 2;
 
-      // TODO: take the number of tokens into account!
-      var cHeight = this.arcDiff + arc.overlaps * this.overlapDiff + (middle / 2);
+      // TODO:
+      //   take the number of tokens into account!
+      var cHeight = this.arcDiff + (overlaps * this.overlapDiff) + (middle / 2);
 
       // Respect the maximum height
       cHeight = cHeight < this.maxArc ? cHeight : this.maxArc;