Support cuts at the beginning of token views

Change-Id: I33d7bddc90fa609c123d5b6ac5509cab858805f1
diff --git a/Changes b/Changes
index 414f589..78dcd2d 100755
--- a/Changes
+++ b/Changes
@@ -1,7 +1,8 @@
-0.34 2019-05-14
+0.34 2019-05-21
         - Introduced guided tour (hebasta, #19).
         - Updated dependency on M::P::Notifications to
           be compatible with recent versions of Mojolicious.
+        - Introduce cuts in token views.
 
 0.33 2019-03-28
         - Fix problem with serialization and deserialization
diff --git a/dev/demo/matchdemo.js b/dev/demo/matchdemo.js
index 456e7b0..1dbf83b 100644
--- a/dev/demo/matchdemo.js
+++ b/dev/demo/matchdemo.js
@@ -441,6 +441,8 @@
   // with cut
   snippet = "<span class=\"context-left\"><\/span>"+
   "<span class=\"match\">" +
+  "<span class=\"cutted\"><\/span>" +
+  "Außerdem " +  
   "<span title=\"cnx/l:meist\">" +
   "  <span title=\"cnx/p:ADV\">" +
   "    <span title=\"cnx/syn:@PREMOD\">" +
diff --git a/dev/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
index 1a4bd2b..f71ba56 100644
--- a/dev/js/spec/matchSpec.js
+++ b/dev/js/spec/matchSpec.js
@@ -99,6 +99,8 @@
 
   var snippet = "<span class=\"context-left\"><\/span>"+
       "<span class=\"match\">" +
+      "<span class=\"cutted\"><\/span>" +
+      "Außerdem " +
       "<span title=\"cnx/l:meist\">" +
       "  <span title=\"cnx/p:ADV\">" +
       "    <span title=\"cnx/syn:@PREMOD\">" +
@@ -486,20 +488,22 @@
     it('should parse into a table (async)', function () {
       expect(table).toBeTruthy();
 
-      expect(table.length()).toBe(5);
+      expect(table.length()).toBe(7);
 
-      expect(table.getToken(0)).toBe("meist");
-      expect(table.getToken(1)).toBe("deutlich");
-      expect(table.getToken(2)).toBe("leistungsfähiger");
-      expect(table.getToken(3)).toBe(longString);
+      expect(table.getToken(0)).toBe("");
+      expect(table.getToken(1)).toBe("Außerdem ");
+      expect(table.getToken(2)).toBe("meist");
+      expect(table.getToken(3)).toBe("deutlich");
+      expect(table.getToken(4)).toBe("leistungsfähiger");
+      expect(table.getToken(5)).toBe(longString);
 
-      expect(table.getValue(0, "cnx", "p")[0]).toBe("ADV");
-      expect(table.getValue(0, "cnx", "syn")[0]).toBe("@PREMOD");
-      expect(table.getValue(0, "mate", "l")[0]).toBe("meist");
-      expect(table.getValue(0, "mate", "l")[1]).toBeUndefined();
+      expect(table.getValue(2, "cnx", "p")[0]).toBe("ADV");
+      expect(table.getValue(2, "cnx", "syn")[0]).toBe("@PREMOD");
+      expect(table.getValue(2, "mate", "l")[0]).toBe("meist");
+      expect(table.getValue(2, "mate", "l")[1]).toBeUndefined();
 
-      expect(table.getValue(2, "cnx", "l")[0]).toBe("fähig");
-      expect(table.getValue(2, "cnx", "l")[1]).toBe("leistung");
+      expect(table.getValue(4, "cnx", "l")[0]).toBe("fähig");
+      expect(table.getValue(4, "cnx", "l")[1]).toBe("leistung");
     });
    
     it('should be rendered async', function () {
@@ -512,16 +516,21 @@
 
       expect(tr.children[0].firstChild.nodeValue).toBe('Foundry');
       expect(tr.children[1].firstChild.nodeValue).toBe('Layer');
-      expect(tr.children[2].firstChild.nodeValue).toBe('meist');
-      expect(tr.children[2].classList.contains('mark')).toBeFalsy();
-      expect(tr.children[3].firstChild.nodeValue).toBe('deutlich');
-      expect(tr.children[3].classList.contains('mark')).toBeTruthy();
-      expect(tr.children[4].firstChild.nodeValue).toBe('leistungsfähiger');
+
+      expect(tr.children[2].classList.contains('cutted')).toBeTruthy();
+      expect(tr.children[3].firstChild.nodeValue).toBe('Außerdem ');
+
+      
+      expect(tr.children[4].firstChild.nodeValue).toBe('meist');
       expect(tr.children[4].classList.contains('mark')).toBeFalsy();
-      expect(tr.children[4].hasAttribute("title")).toBeFalsy();
-      expect(tr.children[5].firstChild.nodeValue).toBe(longString);
-      expect(tr.children[5].getAttribute("title")).toBe(longString);
-      expect(tr.children[6].classList.contains('cutted')).toBeTruthy();
+      expect(tr.children[5].firstChild.nodeValue).toBe('deutlich');
+      expect(tr.children[5].classList.contains('mark')).toBeTruthy();
+      expect(tr.children[6].firstChild.nodeValue).toBe('leistungsfähiger');
+      expect(tr.children[6].classList.contains('mark')).toBeFalsy();
+      expect(tr.children[6].hasAttribute("title")).toBeFalsy();
+      expect(tr.children[7].firstChild.nodeValue).toBe(longString);
+      expect(tr.children[7].getAttribute("title")).toBe(longString);
+      expect(tr.children[8].classList.contains('cutted')).toBeTruthy();
 
       // first row
       tr = e.children[1].children[0];
@@ -530,10 +539,10 @@
       expect(tr.children[0].nodeName).toBe('TH');
       expect(tr.children[0].firstChild.nodeValue).toEqual('cnx');
       expect(tr.children[1].firstChild.nodeValue).toEqual('l');
-      expect(tr.children[2].firstChild.nodeValue).toEqual('meist');
-      expect(tr.children[3].firstChild.nodeValue).toEqual('deutlich');
-      expect(tr.children[4].firstChild.firstChild.nodeValue).toEqual('fähig');
-      expect(tr.children[4].lastChild.firstChild.nodeValue).toEqual('leistung');
+      expect(tr.children[4].firstChild.nodeValue).toEqual('meist');
+      expect(tr.children[5].firstChild.nodeValue).toEqual('deutlich');
+      expect(tr.children[6].firstChild.firstChild.nodeValue).toEqual('fähig');
+      expect(tr.children[6].lastChild.firstChild.nodeValue).toEqual('leistung');
 
       // second row
       tr = e.children[1].children[1];
@@ -542,14 +551,13 @@
       expect(tr.children[0].nodeName).toBe('TH');
       expect(tr.children[0].firstChild.nodeValue).toEqual('cnx');
       expect(tr.children[1].firstChild.nodeValue).toEqual('p');
-      expect(tr.children[2].firstChild.nodeValue).toEqual('ADV');
-      expect(tr.children[3].firstChild.nodeValue).toEqual('A');
-      expect(tr.children[4].firstChild.firstChild.nodeValue).toEqual('A');
-      expect(tr.children[4].lastChild.firstChild.nodeValue).toEqual('ADJA');
+      expect(tr.children[4].firstChild.nodeValue).toEqual('ADV');
+      expect(tr.children[5].firstChild.nodeValue).toEqual('A');
+      expect(tr.children[6].firstChild.firstChild.nodeValue).toEqual('A');
+      expect(tr.children[6].lastChild.firstChild.nodeValue).toEqual('ADJA');
 
-      expect(tr.children[4].firstChild.getAttribute("title")).toEqual('Adjective');
-      expect(tr.children[2].getAttribute("title")).toEqual('Adverb');
-
+      expect(tr.children[6].firstChild.getAttribute("title")).toEqual('Adjective');
+      expect(tr.children[4].getAttribute("title")).toEqual('Adverb');
     });
 
 
diff --git a/dev/js/src/match/table.js b/dev/js/src/match/table.js
index e2e49cc..edadd0e 100644
--- a/dev/js/src/match/table.js
+++ b/dev/js/src/match/table.js
@@ -35,7 +35,7 @@
       this._token = [];
       this._mark = [];
       this._markE = undefined;
-      this._cutted = -1;
+      this._cutted = [];
       this._info = [];
       this._foundry = {};
       this._layer = {};
@@ -163,7 +163,7 @@
 
           // The current position marks a cut
           else if (c.hasAttribute("class") && c.getAttribute("class") == "cutted") {
-            this._cutted = this._pos;
+            this._cutted.push(this._pos);
             this._token[this._pos++] = "";            
           }
 
@@ -259,7 +259,7 @@
             this._markE = c;
           };
         }
-        else if (i == this._cutted) {
+        else if (this._cutted[0] == i || this._cutted[1] == i) {
           c.classList.add('cutted');
         };