syntax tags

Author: hmsklee

css/style2.css

@@ -27,7 +27,7 @@ svg text {
 
 #tooltip {
   width:175px;
-  background:#f6f6f6;
+  background:hsl(40,10%,98%);
   margin-bottom:10px;
   box-shadow: 0 0 10px #555;
   border-radius:3px;
@@ -102,6 +102,13 @@ svg text {
 .word .word-tag {
   fill:#333;
 }
+.word .syntax-tag {
+  fill: rgb(203, 120, 111);
+}
+.toggle-syntax .syntax-tag {
+  display:none;
+}
+
 .editing .word-tag,
 .editing text {
   fill: #fff;

index.html

@@ -17,6 +17,7 @@
     <option>passage1</option>
     <option>passage2</option>
   </select>
+  <button id="syntax-toggle">Toggle syntax</button>
 </div>
 
 <div id="main">

js2/components/tag.js

@@ -1,7 +1,8 @@
 class WordTag {
-  constructor(val, word) {
+  constructor(val, word, above = true) {
     this.val = val;
     this.entity = word;
+    this.position = above;
 
     if (!word.svg) {
       console.log("error: word must have an svg element");
@@ -11,7 +12,8 @@ class WordTag {
     this.svg = word.svg.group()
       .y(this.tagOffset);
     this.svgText = this.svg.text(this.val)
-      .addClass('word-tag');
+      .addClass(above ? 'word-tag' : 'word-tag syntax-tag');
+    this.ww = this.svgText.length();
 
     // add click and right-click listeners
     let svg = word.mainSVG;
@@ -30,22 +32,25 @@ class WordTag {
     return this.svg.remove();
   }
   updateWordWidth() {
-    let ww = this.entity.ww;
-    if (this.entity.val.length < 9) {
-      this.line.plot('M0,25,l0,8');
-    }
-    else {
-      let diff = ww / 2;
-      this.line.plot('M0,25,c0,8,'
-        + [diff,0,diff,8]
-        + ',M0,25,c0,8,'
-        + [-diff,0,-diff,8]
-      );
+    if (this.position) {
+      let ww = this.entity.ww;
+      if (this.entity.val.length < 9) {
+        this.line.plot('M0,25,l0,8');
+      }
+      else {
+        let diff = ww / 2;
+        this.line.plot('M0,25,c0,8,'
+          + [diff,0,diff,8]
+          + ',M0,25,c0,8,'
+          + [-diff,0,-diff,8]
+        );
+      }
     }
   }
   text(val) {
     this.val = val;
     this.svgText.text(this.val);
+    this.ww = this.svgText.length();
     if (this.editingRect) {
       let bbox = this.svgText.bbox();
       if (bbox.width > 0) {
@@ -95,11 +100,7 @@ class WordTag {
       this.entity.calculateBox();
     }
   }
-  // word width
-  get ww() {
-    return this.svgText.length();
-  }
   get tagOffset() {
-    return -28;
+    return this.position ? -28 : 20;
   }
 }

js2/components/word.js

@@ -7,6 +7,7 @@ class Word {
       this.slot = 0;
       this.boxWidth = 0;
       this.boxHeight = 0;
+      this.descendHeight = 0;
       this.isPunct = (val.length === 1 && val.charCodeAt(0) < 65); // FIXME: doesn't handle fancier unicode punct | should exclude left-punctuation e.g. left-paren or left-quote
       this.clusters = [];
       this.links = [];
@@ -23,6 +24,10 @@ class Word {
         this.eventIds.push(id);
       }
     }
+    setSyntaxId(id) {
+      this.syntaxId = id;
+    }
+
     setTag(tag) {
       if (this.svg) {
         if (tag instanceof WordTag) {
@@ -41,6 +46,25 @@ class Word {
       }
       return this.tag;
     }
+    setSyntaxTag(tag) {
+      if (this.svg) {
+        if (tag instanceof WordTag) {
+          this.syntaxTag = tag;
+        }
+        else if (this.syntaxTag instanceof WordTag) {
+          this.syntaxTag.text(tag);
+        }
+        else {
+          this.tag = new WordTag(tag, this, false);
+        }
+        this.calculateBox();
+      }
+      else {
+        this.syntaxTag = tag;
+      }
+      return this.syntaxTag;
+    }
+
     init(svg) {
       this.mainSVG = svg;
       this.svg = svg.group()
@@ -53,6 +77,9 @@ class Word {
       if (this.tag && !(this.tag instanceof WordTag)) {
         this.tag = new WordTag(this.tag, this);
       }
+      if (this.syntaxTag && !(this.syntaxTag instanceof WordTag)) {
+        this.syntaxTag = new WordTag(this.syntaxTag, this, false);
+      }
 
       // draw cluster info
       this.clusters.forEach((cluster) => {
@@ -116,9 +143,12 @@ class Word {
 
     calculateBox() {
       let minWidth = (this.tag instanceof WordTag) ? Math.max(this.tag.ww, this.ww) : this.ww;
+      // if (this.syntaxTag instanceof WordTag && this.syntaxTag.ww > minWidth) { minWidth = this.syntaxTag.ww; }
       let diff = this.boxWidth - minWidth;
       this.boxWidth -= diff;
-      this.boxHeight = this.svg.bbox().height;
+      this.descendHeight = this.syntaxTag instanceof WordTag ? this.syntaxTag.svgText.bbox().height : 0;
+      this.boxHeight = this.svg.bbox().height - this.descendHeight;
+
       this.dx(diff / 2);
       this.mainSVG.fire('word-move', {object: this, x: 0});
     }
@@ -129,7 +159,8 @@ class Word {
     }
 
     get absoluteY() {
-      return this.row ? this.row.ry + this.row.rh - this.boxHeight - 5 : 0;
+      // console.log(this.svgText.bbox().height);
+      return this.row ? this.row.ry + this.row.rh - this.boxHeight : 0;
     }
     get cx() {
       return this.x + this.boxWidth / 2;

js2/components/wordcluster.js

@@ -199,7 +199,7 @@ class WordCluster {
     return this.endpoints[0].row;
   }
   get absoluteY() {
-    return this.endpoints[0].absoluteY + 10;
+    return this.endpoints[0].absoluteY;
   }
   get idx() {
     return this.endpoints[0].idx;

js2/main.js

@@ -59,6 +59,10 @@ const Main = (function() {
         changeDataset(this.selectedIndex);
       }
     }
+    document.getElementById('syntax-toggle').onclick = function() {
+      svg.toggleClass('toggle-syntax');
+      rm.resizeAll();
+    }
   }
 
   /**
@@ -97,6 +101,7 @@ const Main = (function() {
     links.forEach(link => {
       link.init(svg, words);
     });
+    rm.resizeAll();
   }
 
   //--------------------------------
@@ -106,8 +111,8 @@ const Main = (function() {
     // construct word objects and tags from tokens, entities, and triggers
     const words = parser.tokens.map((token, i) => {
       let w = new Word(token.text, i);
-      w.syntaxTag = token.type;
-      w.syntaxId = token.id;
+      w.setSyntaxTag(token.type);
+      w.setSyntaxId(token.id);
       return w;
     });
     const clusters = [];
@@ -169,21 +174,22 @@ const Main = (function() {
       links.push(link);
     });
 
-    // // syntax data
-    // parser.data.syntax.forEach(syn => {
-    //   // create a link between the trigger and each of its arguments
-    //   const trigger = entities.find(word => word.eventIds.indexOf(syn.trigger) > -1);
-    //   const arguments = syn.arguments.map(arg => {
-    //     let anchor = words.find(w => w.syntaxId === arg.id);
-    //     return { anchor, type: arg.type };
-    //   });
-    //
-    //   // create link
-    //   const link = new Link(syn.id, trigger, arguments);
-    //
-    //   // push link to link array
-    //   links.push(link);
-    // });
+    // syntax data
+    parser.data.syntax.forEach(syn => {
+      // create a link between the trigger and each of its arguments
+      const trigger = entities.find(word => word.eventIds.indexOf(syn.trigger) > -1);
+      const arguments = syn.arguments.map(arg => {
+        let anchor = words.find(w => w.syntaxId === arg.id);
+        return { anchor, type: arg.type };
+      });
+
+      // create link
+      // console.log(syn.id, trigger, arguments, syn);
+      // const link = new Link(syn.id, trigger, arguments);
+      //
+      // // push link to link array
+      // links.push(link);
+    });
 
     return [ words, links, clusters ];
   }

js2/managers/rowmanager.js

@@ -7,6 +7,14 @@ const RowManager = (function() {
       _svg = svg;
     }
 
+    resizeAll() {
+      _rows.forEach(row => {
+        row.calculateMaxSlot();
+        let dy = row.minHeight - row.rh;
+        if (dy > 0) { this.resizeRow(row.idx, dy); }
+      });
+    }
+
     resizeRow(i, dy) {
       let row = _rows[i];
       dy = Math.max(-row.rh + row.minHeight, dy);
@@ -16,7 +24,7 @@ const RowManager = (function() {
         _rows[j].dy(dy);
         _rows[j].words.forEach(word => word.redrawLinks());
       }
-      _svg.height(this.lastRow.ry2 + ROW_PADDING);
+      _svg.height(this.lastRow.ry2 + ROW_PADDING + 20);
     }
 
     width(rw) {
@@ -32,7 +40,7 @@ const RowManager = (function() {
       const lr = this.lastRow;
       const row = !lr ? new Row(_svg) : new Row(_svg, lr.idx + 1, lr.ry2 + ROW_PADDING);
       _rows.push(row);
-      _svg.height(row.ry2 + ROW_PADDING);
+      _svg.height(row.ry2 + ROW_PADDING + 20);
       return row;
     }
 
@@ -42,12 +50,13 @@ const RowManager = (function() {
     removeRow() {
       _rows.pop().remove();
       if (this.lastRow) {
-        _svg.height(this.lastRow.ry2 + ROW_PADDING);
+        _svg.height(this.lastRow.ry2 + ROW_PADDING + 20);
       }
     }
 
     addWordToRow(word, row, i, ignorePosition) {
       if (isNaN(i)) { i = row.words.length; }
+      if (word.row && word.row !== row) { word.row.calculateMaxSlot(); }
 
       let overflow = row.addWord(word, i, ignorePosition);
       while (overflow < row.words.length) {