Improved layout for relation tree
Change-Id: I6909cf3cf5a39a9153875e40a84cdef2aa87d28b
diff --git a/dev/demo/relations.html b/dev/demo/relations.html
index 6435fb9..d651988 100644
--- a/dev/demo/relations.html
+++ b/dev/demo/relations.html
@@ -5,7 +5,6 @@
<script data-main="relationsdemo.js" src="../js/lib/require.js" async="async"></script>
<link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
<style>
-
tspan, text {
font-size: 11pt;
stroke-width: 0;
@@ -13,17 +12,32 @@
stroke-opacity:0;
padding-right: 3pt
fill: black;
- }
+ }
+ /*
+ svg.relTree g > text > tspan {
+ text-anchor: middle;
+ }
+ */
g.arcs text {
font-size: 9pt;
fill: blue;
- }
+ }
path {
stroke-width: 2;
stroke: black;
fill: none;
}
-
+ path.anchor {
+ stroke: green;
+ z-index: 20;
+ }
+ marker > path {
+ fill-opacity:1;
+ fill: black;
+ }
+ marker {
+ overflow:visible
+ }
</style>
</head>
diff --git a/dev/demo/relationsdemo.js b/dev/demo/relationsdemo.js
index 5c28f9a..17fcfb3 100644
--- a/dev/demo/relationsdemo.js
+++ b/dev/demo/relationsdemo.js
@@ -5,5 +5,32 @@
require(['match/relations'], function (relClass) {
var rel = relClass.create();
document.getElementById("tree").appendChild(rel.element());
+
+ /*
+ * Start and end may be spans, i.e. arrays
+ */
+
+ rel
+ .addToken("Der")
+ .addToken("alte")
+ .addToken("Mann")
+ .addToken("ging")
+ .addToken("über")
+ .addToken("die")
+ .addToken("breite")
+ .addToken("nasse")
+ .addToken("Straße")
+ ;
+
+ rel
+ .addRel({ start: 0, end: 1, label: "a"})
+ .addRel({ start: 0, end: 1, label: "b" })
+ .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: 4, end: [6,8], label: "f", direction: "bi" })
+ ;
+
rel.show();
});