Added boxes to arc labels
Change-Id: Ic706e69c6f2007b0bec254b5f00331f24a03be6c
diff --git a/dev/demo/relationsdemo.js b/dev/demo/relationsdemo.js
index 12d536c..81581aa 100644
--- a/dev/demo/relationsdemo.js
+++ b/dev/demo/relationsdemo.js
@@ -82,12 +82,12 @@
;
rel
- .addRel({ start: 0, end: 1, label: "a"})
- .addRel({ start: 0, end: 1, label: "b" })
+ .addRel({ start: 0, end: 1, label: "a", direction: "uni"})
+ .addRel({ start: 0, end: 1, label: "b", direction: "uni" })
.addRel({ start: 1, end: 2, label: "c", direction: "bi" })
- .addRel({ start: 0, end: 2, label: "d" })
- .addRel({ start: [2,4], end: 5, label: "e", direction: "uni" })
- .addRel({ start: [5,6], end: 7, label: "g" })
+ .addRel({ start: 0, end: 2, label: "dreizehn", direction: "uni" })
+ .addRel({ start: [2,4], end: 5, label: "e", direction: "uni" })
+ .addRel({ start: [5,6], end: 7, label: "g", direction: "uni" })
.addRel({ start: 4, end: [6,8], label: "f", direction: "bi" })
;
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;
diff --git a/dev/scss/main/tree.scss b/dev/scss/main/tree.scss
index aec5bd4..8ecaf20 100644
--- a/dev/scss/main/tree.scss
+++ b/dev/scss/main/tree.scss
@@ -22,6 +22,8 @@
path.anchor {
stroke: $darkest-orange;
+ stroke-width: 3;
+ stroke-linecap: round;
z-index: 20;
}
@@ -31,10 +33,12 @@
stroke-width: 2px;
}
-g.middle rect {
- stroke: $darker-orange;
- stroke-width: 2px;
- fill: $middle-orange;
+g.middle, g.arc {
+ rect {
+ stroke: $darker-orange;
+ stroke-width: 2px;
+ fill: $middle-orange;
+ }
}
g.middle.mark {
@@ -68,5 +72,6 @@
> tspan {
font-size: 10pt;
overflow: visible;
+ z-index: 30;
}
}