Added boxes to arc labels
Change-Id: Ic706e69c6f2007b0bec254b5f00331f24a03be6c
diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/relations.js
index a201b9f..dfe2241 100644
--- a/dev/js/src/match/relations.js
+++ b/dev/js/src/match/relations.js
@@ -13,11 +13,13 @@
// Some configurations
obj.maxArc = 200; // maximum height of the bezier control point
- obj.overlapDiff = 20;
+ obj.overlapDiff = 40;
obj.arcDiff = 15;
- obj.anchorDiff = 6;
+ obj.anchorDiff = 8;
obj.anchorStart = 15;
obj.tokenSep = 30;
+ obj.xPadding = 10;
+ obj.yPadding = 5;
return obj;
},
@@ -56,6 +58,7 @@
var y = this._y + (anchor.overlaps * this.anchorDiff) - this.anchorStart;
var l = this._c('path');
+ this._arcsElement.appendChild(l);
l.setAttribute("d", "M " + startPos + "," + y + " L " + endPos + "," + y);
l.setAttribute("class", "anchor");
anchor.element = l;
@@ -90,8 +93,12 @@
endPos -= this.offsetLeft;
var g = this._c("g");
+ g.setAttribute("class", "arc");
var p = g.appendChild(this._c("path"));
p.setAttribute('class', 'edge');
+
+ // Attach the new arc before drawing, so computed values are available
+ this._arcsElement.appendChild(g);
// Create arc
var middle = Math.abs(endPos - startPos) / 2;
@@ -140,19 +147,26 @@
labelE.setAttribute("x", x + middle);
labelE.setAttribute("y", middleY + 3);
labelE.setAttribute("text-anchor", "middle");
- labelE.appendChild(document.createTextNode(arc.label));
+ var textNode = document.createTextNode(arc.label);
+ labelE.appendChild(textNode);
- /*
- var textWidth = labelE.getComputedTextLength();
+ var labelBox = labelE.getBBox();
+ var textWidth = labelBox.width; // labelE.getComputedTextLength();
+ var textHeight = labelBox.height; // labelE.getComputedTextLength();
- var labelR = g.appendChild(this._c("rect"));
- labelR.setAttribute("x", x + middle);
- labelR.setAttribute("y", middleY + 3);
- labelR.setAttribute("width", textWidth +30);
- labelR.setAttribute("height", 20);
- */
+ // Add padding to left and right
+
+ // var labelR = g.appendChild(this._c("rect"));
+ var labelR = g.insertBefore(this._c("rect"), labelE);
+ var boxWidth = textWidth + 2 * this.xPadding;
+ labelR.setAttribute("x", x + middle - (boxWidth / 2));
+ labelR.setAttribute("ry", 5);
+ labelR.setAttribute("y", labelBox.y - this.yPadding);
+ labelR.setAttribute("width", boxWidth);
+ labelR.setAttribute("height", textHeight + 2*this.yPadding);
};
- return g;
+
+ // return g;
},
element : function () {
@@ -322,6 +336,8 @@
this.offsetLeft = globalBoundingBox.left;
var arcs = g.appendChild(this._c("g"));
+ this._arcsElement = arcs;
+
arcs.classList.add("arcs");
// Sort arcs if not sorted yet
@@ -333,13 +349,13 @@
// Draw all anchors
for (i in this._sortedAnchors) {
- arcs.appendChild(this._drawAnchor(this._sortedAnchors[i]));
+ this._drawAnchor(this._sortedAnchors[i]);
};
// draw all arcs
for (i in this._sortedArcs) {
- arcs.appendChild(this._drawArc(this._sortedArcs[i]));
+ this._drawArc(this._sortedArcs[i]);
};
var width = text.getBoundingClientRect().width;