Highlight labels and relation arcs
Change-Id: I480ff2a83b22d2e252246a964c6a79a482d130f4
diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/relations.js
index 92be073..921c699 100644
--- a/dev/js/src/match/relations.js
+++ b/dev/js/src/match/relations.js
@@ -23,6 +23,7 @@
this._arcs = [];
this._tokenElements = [];
this._y = 0;
+ this._currentInFocus = undefined;
// Some configurations
this.maxArc = 200; // maximum height of the bezier control point
@@ -271,7 +272,6 @@
endPos = this._tokenPoint(this._tokenElements[arc.last]);
};
-
startPos -= this.offsetLeft;
endPos -= this.offsetLeft;
@@ -333,16 +333,19 @@
var middleY = (((startY + controlY) / 2) + controlY) / 2;
// Create a boxed label
- g = this._c("g");
- g.setAttribute("class", "label");
- this._labelsElement.appendChild(g);
+ var label = this._c("g");
+ label.setAttribute("class", "label");
+ this._labelsElement.appendChild(label);
+
+ // Set arc reference
+ label.arcRef = g;
var that = this;
- g.addEventListener('mouseenter', function () {
- that._labelsElement.appendChild(this);
+ label.addEventListener('mouseenter', function () {
+ that.inFocus(this);
});
- var labelE = g.appendChild(this._c("text"));
+ var labelE = label.appendChild(this._c("text"));
labelE.setAttribute("x", x + middle);
labelE.setAttribute("y", middleY + 3);
labelE.setAttribute("text-anchor", "middle");
@@ -354,7 +357,7 @@
var textHeight = labelBox.height; // labelE.getComputedTextLength();
// Add box with padding to left and right
- var labelR = g.insertBefore(this._c("rect"), labelE);
+ var labelR = label.insertBefore(this._c("rect"), labelE);
var boxWidth = textWidth + 2 * this.xPadding;
labelR.setAttribute("x", x + middle - (boxWidth / 2));
labelR.setAttribute("ry", 5);
@@ -408,6 +411,29 @@
this._tokens.push(token);
return this;
},
+
+
+ // Move label and arc in focus
+ inFocus : function (element) {
+ var cif;
+
+ if (this._currentInFocus) {
+
+ // Already in focus
+ if (this._currentInFocus === element)
+ return;
+
+ cif = this._currentInFocus;
+ cif.classList.remove('infocus');
+ cif.arcRef.classList.remove('infocus');
+ };
+
+ cif = this._currentInFocus = element;
+ this._labelsElement.appendChild(cif);
+ this._arcsElement.appendChild(cif.arcRef);
+ cif.classList.add('infocus');
+ cif.arcRef.classList.add('infocus');
+ },
/*
* All arcs need to be sorted before shown,
diff --git a/dev/scss/main/tree.scss b/dev/scss/main/tree.scss
index 3629590..088690f 100644
--- a/dev/scss/main/tree.scss
+++ b/dev/scss/main/tree.scss
@@ -10,13 +10,17 @@
fill: none;
}
+g.arc.infocus > path.edge {
+ stroke: $dark-green;
+}
+
marker#arr {
overflow: visible;
path {
- fill-opacity:1;
- stroke-width: 2;
stroke: $darkest-orange;
fill: $darkest-orange;
+ fill-opacity:1;
+ stroke-width: 2;
}
}
@@ -41,6 +45,11 @@
}
}
+g.label.infocus rect {
+ stroke: $dark-green;
+ fill: $lightest-green;
+}
+
g.middle.mark {
rect {
fill: $darker-orange;