commit c9f23026c25cdb1d348ffd68806576e4fcca64c2
author Akron <nils@diewald-online.de> Wed Sep 13 15:43:52 2017 +0200
committer Akron <nils@diewald-online.de> Wed Sep 13 15:43:52 2017 +0200
tree d9b2f4560190726051ac388dd276c4fa700ead52
parent fee0b62badca5f5401f1507cdb1e576aa02473a8

Split arcs and labels to move labels to foreground

Change-Id: Ied6cfe989dfc8f0768d1d5d9e89de75c23031cde

dev/demo/relationsdemo.js

diff --git a/dev/demo/relationsdemo.js b/dev/demo/relationsdemo.js
index a84bfeb..0fc1978 100644
--- a/dev/demo/relationsdemo.js
+++ b/dev/demo/relationsdemo.js
@@ -166,13 +166,11 @@
   // 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());
-  */
 });
 

dev/js/src/match/relations.js

diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/relations.js
index 5857253..34efe04 100644
--- a/dev/js/src/match/relations.js
+++ b/dev/js/src/match/relations.js
@@ -231,7 +231,7 @@
       var overlaps = arc.overlaps;
       if (startPos == endPos) {
         startPos -= this.overlapDiff / 3;
-        endPos += this.overlapDiff / 3;
+        endPos   += this.overlapDiff / 3;
         overlaps += .5;
       };
 
@@ -285,6 +285,15 @@
       var middleY = (((startY + controlY) / 2) + controlY) / 2;
 
       // Create a boxed label
+      g = this._c("g");
+      g.setAttribute("class", "label");
+      this._labelsElement.appendChild(g);
+
+      var that = this;
+      g.addEventListener('mouseenter', function () {
+        that._labelsElement.appendChild(this);
+      });
+
       var labelE = g.appendChild(this._c("text"));
       labelE.setAttribute("x", x + middle);
       labelE.setAttribute("y", middleY + 3);
@@ -481,6 +490,10 @@
       this._arcsElement = arcs;
       arcs.classList.add("arcs");
 
+      var labels = g.appendChild(this._c("g"));
+      this._labelsElement = labels;
+      labels.classList.add("labels");
+
       // Sort arcs if not sorted yet
       if (this._sortedArcs === undefined)
         this._sortArcs();

dev/scss/main/tree.scss

diff --git a/dev/scss/main/tree.scss b/dev/scss/main/tree.scss
index 8ecaf20..3629590 100644
--- a/dev/scss/main/tree.scss
+++ b/dev/scss/main/tree.scss
@@ -33,7 +33,7 @@
   stroke-width: 2px;
 }
 
-g.middle, g.arc {
+g.middle, g.label {
   rect {
     stroke: $darker-orange;
     stroke-width: 2px;
@@ -53,7 +53,6 @@
   }
 }
 
-
 g.leaf.mark text > tspan {
   font-weight: bold;
 }
@@ -72,6 +71,5 @@
   > tspan {
     font-size: 10pt;
     overflow: visible;
-    z-index: 30;
   }
 }