refactor with text-anchor middle

Author: hmsklee

css/style.css

@@ -97,6 +97,9 @@ svg text {
 #drawing text, .link--labels text {
   pointer-events: none;
 }
+#drawing text {
+  text-anchor: middle;
+}
 
 .node { cursor: pointer; }
 .link, .link--dashed {

index.html

@@ -71,7 +71,7 @@
 
 Config.handleH = texts.wordText.maxHeight + (Config.textPaddingY * 2);
 Config.wordHeight = texts.wordText.maxHeight + (Config.textPaddingY * 2); 
-Config.minWordWidth = Math.max( getTextWidthAndHeight("i", texts.wordText.style).w + (Config.handleW * 2), getTextWidthAndHeight("i", texts.tagText.style).w + (Config.handleW * 2) );
+Config.minWordWidth = getTextWidth("i", texts.wordText.style) + (Config.handleW * 2);
 
 var rowOffsetX = 0;
 var rowOffsetWord = null;
@@ -124,7 +124,7 @@
 
       [].concat(parser.data.entities, parser.data.triggers).forEach(el => {
         if (words[el.tokenIndex]) {
-          words[el.tokenIndex].tag = el.type;
+          words[el.tokenIndex].setTag(el.type);
           words[el.tokenIndex].eventId = el.id;
         }
       });
@@ -286,33 +286,10 @@
       let row = rows[rows.length - 1];
       row.words.push(newWord);
 
-
-      var wh = getTextWidthAndHeight(newWord.val, texts.wordText.style);
-
-      //calculate the width of the Word
-      newWord.tw = wh.w;
-      newWord.maxtextw = wh.w;
-    
-      if (newWord.tag != null) {
-        var twh = getTextWidthAndHeight(newWord.tag, texts.tagText.style);
-        
-        if (twh.w > word.tw) {
-          newWord.tw = twh.w; //think tw is ONLY used for checking minWidth, so this should be ok
-          newWord.maxtextw = twh.w;
-        }
-      }
       //calculate x position and width of the Word
       newWord.wx = 80;
       newWord.ww = newWord.tw + (Config.textPaddingX * 2);
-
-
-      if (newWord.tag != null) {
-        newWord.tww = newWord.ww; //maxtextw + (Config.textPaddingX * 2);
-        newWord.twx = newWord.wx;
-      }
-      newWord.h = 0; //the number of link levels is 0 for the word itself
-      newWord.wh = texts.wordText.maxHeight + Config.textPaddingY*2; 
-      newWord.wy = row.ry + rows[0].rh - newWord.wh;
+      newWord.wy = row.wordY;
       newWord.row = row;
 
 

js/interact.js

@@ -490,7 +490,7 @@ function moveWordToNewPosition(w, nx, ny) {
   // called this again after bbox because possible race issues?
   w.underneathRect.x(nx);
   w.underneathRect.y(ny);
-  w.text.x(nx + (w.bbox.w/2) - (w.text.length()/2)  ); 
+  w.text.x(nx + w.bbox.w/2); 
   w.text.y(ny + Config.textPaddingY*2); // - texts.wordText.descent);
 
 
@@ -499,7 +499,7 @@ function moveWordToNewPosition(w, nx, ny) {
   //Looks like the entire row size jumps one pixel when adding a new row... think this may cause the 1 px differentce
 
   if (w.tag != null) {
-    w.tagtext.x(nx + (w.bbox.w/2) - (w.tagtext.length()/2)  ); 
+    w.tagtext.x(nx + w.bbox.w/2); 
     w.tagtext.y(ny + Config.textPaddingY/2);// - texts.tagText.descent);
 
     var handley = ny + ( w.wh / 2 ) - ( Config.handleH / 2 ); 
@@ -682,12 +682,11 @@ function setUpWordDraggable(word) {
 
 function setWordToY(word, wy) {
   word.underneathRect.y(wy);
-  word.bbox = word.underneathRect.bbox();
-  word.text.y(word.bbox.y + Config.textPaddingY*2);
+  word.text.y(wy + Config.textPaddingY*2);
 
- if (word.tag != null) { 
-  word.tagtext.y(word.bbox.y + Config.textPaddingY/2); 
-  word.leftHandle.y(wy);  
-  word.rightHandle.y(wy);  
- }
+  if (word.tag != null) { 
+    word.tagtext.y(wy + Config.textPaddingY/2); 
+    word.leftHandle.y(wy);  
+    word.rightHandle.y(wy);
+  }
 }

js/render.js

@@ -286,22 +286,7 @@ function setUpRowsAndWords(words) {
   for (var i = 0; i < words.length; i++) {
 
     var word = words[i];
- 
-    var wh = getTextWidthAndHeight(word.val, texts.wordText.style);
-
-    //calculate the width of the Word
-    word.tw = wh.w;
-    word.maxtextw = wh.w;
 
-      if (word.tag != null) {
-      var twh = getTextWidthAndHeight(word.tag, texts.tagText.style);
-      
-      if (twh.w > word.tw) {
-        word.tw = twh.w; //think tw is ONLY used for checking minWidth, so this should be ok
-        word.maxtextw = twh.w;
-      }
-    }
-   
     //what row will this Word belong to?
 
     if (i == 0) { //if first word, then obviously in first row
@@ -332,12 +317,6 @@ function setUpRowsAndWords(words) {
     word.wx = x;
     word.ww = word.tw + (Config.textPaddingX * 2);
 
-
-    if (word.tag != null) {
-      word.tww = word.ww; //maxtextw + (Config.textPaddingX * 2);
-      word.twx = word.wx;
-    }
-
     x += word.ww + Config.wordPadding;
   }
 
@@ -358,9 +337,7 @@ function setUpRowsAndWords(words) {
     for (var ii = 0; ii < row.words.length; ii++) {
       var word = row.words[ii];
 
-      word.h = 0; //the number of link levels is 0 for the word itself
-      word.wh = texts.wordText.maxHeight + Config.textPaddingY*2; 
-      word.wy = row.ry + row.rh - word.wh;
+      word.wy = row.wordY;
 
       if (word.tag != null) {
         var tag_textwh = getTextWidthAndHeight(word.tag, texts.tagText.style);
@@ -1045,16 +1022,27 @@ function calculateLinkLabels(idx, rowNum, x, y, link, isHidden) {
 
   var twh = link.textWH;
 
-  var rect = {x: (x - 2 - twh.w/2), y: (y - link.textStyle.maxHeight/2), w: (twh.w + 4), h: link.textStyle.maxHeight, style:style, rowNum: rowNum};
-
-
-  if (Config.redraw) { 
-    text = {text: link.textStr, x: (x - twh.w/2), y: (y - link.textStyle.maxHeight/2), style: (link.textStyle.style), visibility:true};
-  }
-  else {
-    text = {text: link.textStr, x: (x - twh.w/2), y: (y - link.textStyle.maxHeight/2 - link.textStyle.descent), style: (link.textStyle.style), visibility:true};
-  }
-  link.labels[idx] = {rect:rect, text:text};
+  var rect = {
+    x: (x - 2 - twh.w/2), 
+    y: (y - link.textStyle.maxHeight/2), 
+    w: (twh.w + 4), 
+    h: link.textStyle.maxHeight, 
+    style:style, 
+    rowNum: rowNum
+  };
+
+  y -= Config.redraw ? 
+    (link.textStyle.maxHeight/2) :
+    (link.textStyle.maxHeight/2 + link.textStyle.descent);
+  text = {
+    x,
+    y,
+    text: link.textStr, 
+    style: link.textStyle.style, 
+    visibility:true
+  };
+
+  link.labels[idx] = {rect, text};
 
   if (isHidden) {
     link.labels[idx].text.visibility = false;

js/row.js

@@ -118,7 +118,9 @@ class Row {
     return returnVal;
   }
 
-
+  get wordY() {
+    return this.ry + this.rh - (texts.wordText.maxHeight + Config.textPaddingY*2);
+  }
   get minWidth() {
     return this.words.reduce((acc, val) => acc + val.minWidth, 0);
   }

js/utils.js

@@ -7,7 +7,7 @@ function createTestWords(numWords, minLength, maxLength) {
     var w = new Word(getLetterString(i, minLength, maxLength), i); 
 
     if (Math.random() < 0.5) {
-      w.tag = getRandomString(3,10);
+      w.setTag(getRandomString(3,10));
     }
 
 
@@ -222,7 +222,12 @@ function getRandomStyle() {
 
 }
 
-
+function getTextWidth(word, fs) {
+  let t = draw.text(word).font(fs)
+  let l = t.length();
+  t.remove();
+  return l;
+}
 function getTextWidthAndHeight(word, fs) {
   var text2 = draw.text(word).font(fs);
   textbbox = text2.bbox();

js/word.js

@@ -1,14 +1,13 @@
 class Word {
-  constructor(val, idx) {
+  constructor(val, idx, tag = null) {
     this.val = val;
     this.idx = idx;
     this.id = `(${this.val}, ${this.idx})`;
 
-    this.tag = null;
     this.h = 0; //num slots
 
     this.ww = 0;
-    this.wh = 0;
+    this.wh = texts.wordText.maxHeight + Config.textPaddingY*2; 
     this.wx = 0;
     this.wy = 0;
 
@@ -19,8 +18,11 @@ class Word {
     this.parentsR = [];  //who connects to me and is attached to my right side
     this.parentsC = []; //who connects to me and is attached to the center (ie, for multilinks)
 
-    this.tw = 0; //width of text part of word, used also to determine minimum size of word rect
-    this.th = 0;
+    let wh = getTextWidthAndHeight(val, texts.wordText.style);
+    this.tw = wh.w; //width of text part of word, used also to determine minimum size of word rect
+    this.th = wh.h;
+
+    this.setTag(tag);
 
     this.percPos = 0.0; //this is used to indicate where along the row the word is positioned, used when resizing the browser's width, or when popping open a right panel.
 
@@ -39,16 +41,13 @@ class Word {
     this.text = null; //the svg text
     this.tagtext = null; //the svg text for a tag
 
-    this.maxtextw = null; //either the word text width, or the tag text with, whichever is wider
-
     this.leftHandle = null; //the left draggable handle to resize word
     this.rightHandle = null; //the right draggable handle to resize word
 
     this.tempX = 0.0;
     this.tempW = 0.0;
     this.tempY = 0.0;
   }
-
 
   //take temp values and update actual svg values
   update() {
@@ -57,11 +56,11 @@ class Word {
 
     this.bbox = this.underneathRect.bbox();
 
-    this.text.x(this.tempX + (this.tempW/2) - (this.text.length() / 2) ); 
+    this.text.x(this.tempX + this.tempW/2); 
     this.rightX = this.tempX + this.tempW;
 
     if (this.tag != null) {
-      this.tagtext.x(this.tempX + (this.tempW/2) - (this.tagtext.length() / 2) ); 
+      this.tagtext.x(this.tempX + this.tempW/2); 
 
       this.leftHandle.x(this.tempX);
       this.rightHandle.x(this.rightX - Config.handleW);
@@ -72,19 +71,25 @@ class Word {
     this.percPos = (this.leftX-Config.edgePadding) / (Config.svgWidth-Config.edgePadding*2);
   }
 
-  draw() {
+  setTag(tag) {
+    let tagw = tag === null ? 0 : getTextWidth(tag, texts.tagText.style);
+    this.tw = Math.max(tagw, this.tw);
+    this.tag = tag;
+  }
+
+  draw() {    
+
+
     let g = this.svg = draw.group().addClass('word');
 
     this.underneathRect = g.rect( this.ww, this.wh )
       .x( this.wx )
       .y( this.wy )
       .addClass('word--underneath');
 
-    var textwh = getTextWidthAndHeight(this.val, texts.wordText.style);
-
     this.text = g.text(this.val)
       .y(this.wy + Config.textPaddingY*2 - texts.wordText.descent)
-      .x(this.wx + (this.ww/2) - (textwh.w / 2))
+      .x(this.wx + this.ww/2)
       .font(texts.wordText.style);
 
     this.bbox = this.underneathRect.bbox();
@@ -93,8 +98,7 @@ class Word {
     this.percPos = (this.leftX-Config.edgePadding) / (Config.svgWidth-Config.edgePadding*2);
 
     if (this.tag != null) {
-      var textwh = getTextWidthAndHeight(this.tag, texts.tagText.style);
-      var tagXPos = this.twx + (this.ww/2) - (textwh.w / 2);
+      var tagXPos = this.wx + this.ww/2;
 
       //add in tag text, if the word has an associated tag
       this.tagtext = g.text(this.tag)
@@ -130,7 +134,7 @@ class Word {
   }
 
   get minWidth() { //min width is the maximum of: the word text, the tag text, or the size of the two handles + a little bit
-    return Math.max(Config.minWordWidth, this.maxtextw);
+    return Math.max(Config.minWordWidth, this.tw);
   }
 
   //maxWidth() must return a value less than row width - Config.edgePaddings, else will try to reposition long words forever!!!