dev/demo/relationsdemo.js

var treeSnippet =
  "<span class=\"context-left\"></span>" +
  "<span class=\"match\">" +
  "  <span title=\"xip/c:MC\">" +
  "    <span title=\"xip/c:TOP\">" +
  "      <span title=\"xip/c:PP\">" +
  "        <span title=\"xip/c:PREP\">Mit</span>" +
  "        <span title=\"xip/c:NP\">" +
  "          <span title=\"xip/c:DET\">dieser</span>" +
  "          <span title=\"xip/c:NPA\">" +
  "            <span title=\"xip/c:NOUN\">Methode</span>" +
  "          </span>" +
  "        </span>" +
  "      </span>" +
  "      <span title=\"xip/c:VERB\">ist</span>" +
  "      <span title=\"xip/c:NP\">" +
  "        <span title=\"xip/c:PRON\">es</span>" +
  "      </span>" +
  "      <span title=\"xip/c:AP\">" +
  "        <span title=\"xip/c:ADV\">nun</span>" +
  "        <span title=\"xip/c:ADJ\">möglich</span>" +
  "      </span>" +
  "      <span title=\"xip/c:ADV\">z. B.</span>" +
  "      <span title=\"xip/c:NPA\">" +
  "        <span title=\"xip/c:NP\">" +
  "          <span title=\"xip/c:NOUN\">Voice</span>" +
  "        </span>" +
  "      </span>" + "(" +
  "      <span title=\"xip/c:INS\">" +
  "        <span title=\"xip/c:NPA\">" +
  "          <span title=\"xip/c:NP\">" +
  "            <span title=\"xip/c:NOUN\">Sprache</span>" +
  "          </span>" +
  "        </span>" +
  "      </span>" + ")" +
  "      <span title=\"xip/c:VERB\">bevorzugt</span>" +
  "      <span title=\"xip/c:PP\">" +
  "        <span title=\"xip/c:PREP\">in</span>" +
  "        <span title=\"xip/c:NP\">" +
  "          <span title=\"xip/c:PRON\">der</span>" +
  "        </span>" +
  "        <span title=\"xip/c:NPA\">" +
  "          <span title=\"xip/c:NP\">" +
  "            <span title=\"xip/c:NOUN\">Bridge</span>" +
  "          </span>" +
  "        </span>" +
  "      </span>" +
  "      <span title=\"xip/c:INFC\">" +
  "        <span title=\"xip/c:INS\">" +
  "          <span title=\"xip/c:VERB\">weiterzugeben</span>" +
  "        </span>" +
  "      </span>" +
  "    </span>" +
  "  </span>" +
  "</span>" +
  "<span class=\"context-right\"></span>";

var relSnippet =
    "<span class=\"context-left\"></span>" +
    "<span class=\"match\">" +
    "  <span xml:id=\"token-GOE/AGA/01784-p199\">" +
    "    <span xlink:title=\"malt/d:ADV\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">dann</span>" +
    "  </span>" +
    " zog " +
    "  <span xlink:title=\"malt/d:SUBJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">ich</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p202\">" +
    "    <span xlink:title=\"malt/d:OBJA\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">mich</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:PP\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">gegen</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p204\">" +
    "    <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p204\">das</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:PN\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p202\">Regiment</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p206\">" +
    "    <span xlink:title=\"malt/d:AVZ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">zurück</span>" +
    "  </span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p207\">" +
    "    <span xlink:title=\"malt/d:KON\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p199\">und</span>" +
    "  </span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p208\">" +
    "    <span xlink:title=\"malt/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p206\">war</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:AUX\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p207\">bemüht</span>" +
    "," +
    "  <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p211\">einige</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p211\">" +
    "    <span xlink:title=\"malt/d:ATTR\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p211\">genaue</span>" +
    "  </span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p212\">" +
    "    <span xlink:title=\"malt/d:OBJA\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p215\">Umrisse</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:OBJP\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p215\">aufs</span>" +
    "  <span xlink:title=\"malt/d:PN\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p212\">Papier</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p215\">" +
    "    <span xlink:title=\"malt/d:PART\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p215\">zu</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:OBJI\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p208\">bringen</span>" +
    ", um mir " +
    "  <span xml:id=\"token-GOE/AGA/01784-p219\">" +
    "    <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p219\">die</span>" +
    "  </span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p220\">Bezüge</span>" +
    "  <span xlink:title=\"malt/d:KON\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p219\">und</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p222\">" +
    "    <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p222\">die</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p220\">Distanzen</span>" +
    "  <mark>" +
    "    <span xlink:title=\"malt/d:DET\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p225\">der</span>" +
    "  </mark>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p225\">" +
    "    <span xlink:title=\"malt/d:ATTR\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p225\">landschaftlichen</span>" +
    "  </span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p226\">" +
    "    <span xlink:title=\"malt/d:GMOD\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p222\">Gegenstände</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:KON\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p219\">desto</span>" +
    "  <span xlink:title=\"malt/d:ADV\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p229\">besser</span>" +
    "  <span xml:id=\"token-GOE/AGA/01784-p229\">" +
    "    <span xlink:title=\"malt/d:PART\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p229\">zu</span>" +
    "  </span>" +
    "  <span xlink:title=\"malt/d:CJ\" xlink:type=\"simple\" xlink:href=\"#token-GOE/AGA/01784-p226\">imprimieren</span>" +
    "</span>" +
    "<span class=\"context-right\"></span>";


requirejs.config({
  baseUrl: '../js/src',
  paths : {
    'lib': '../lib'
  }
});

require(['match/relations', 'match/tree'], function (relClass, treeClass) {
  var rel = relClass.create();

  /*
   * 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", 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: "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" })
  ;

  document.getElementById("treeRel").appendChild(rel.element());

  // Todo: Probably rename to rel.draw()
  rel.show();

  var tree = treeClass.create(treeSnippet);
  document.getElementById("treeHier").appendChild(tree.element());
});