Introduces a first attempt at adding tags to words. Makes sure that the

minimum word with is the greater of the word text or tag text.

Author: angusforbes

index.html

@@ -84,7 +84,7 @@
 
 var levelpadding = 16;
 var /*textpadding */ textpaddingX = 8;//12; //this is the x-padding within each word rect, between the text and the rectangle it's inside of
-var textpaddingY = 4;//texts.wordText.maxHeight / 2; //padding above and below text, between text and rectangle it's inside of
+var textpaddingY = 6;//texts.wordText.maxHeight / 2; //padding above and below text, between text and rectangle it's inside of
 var wordpadding = 4; //x padding between the rects containing words
 //var topMargin = 0;
 var edgepadding = 10; //padding between left side of svg canvas and where first word can be placed, and padding between right side of svg canvas and where last word on a row can fit (before popping over to next row)
@@ -104,7 +104,7 @@
 var arrowW = 3; //3
 
 var wordHeight = texts.wordText.maxHeight + (textpaddingY * 2); 
-var minWordWidth = getTextWidthAndHeight("i", texts.wordText.style).w + (handleW * 2);
+var minWordWidth = Math.max( getTextWidthAndHeight("i", texts.wordText.style).w + (handleW * 2), getTextWidthAndHeight("i", texts.tagText.style).w + (handleW * 2) );
 
 
 var evenRowsColor_selected = '#cdcdff';
@@ -135,10 +135,10 @@
 
 
 // 1. create Words and Links objects (in utils.js) */
-var wordObjs = createTestWords(15, 1, 15);
+var wordObjs = createTestWords(3, 1, 15);
 
 //var linkObjs = createTestLinks(1,1,0); 
-var linkObjs = createTestLinks(4,4,4); 
+var linkObjs = createTestLinks(1,1,1); 
 
 // 2. draw words and boxes around words
 drawWords(wordObjs);

js/annotate.js

@@ -3,8 +3,8 @@ class Link {
     constructor(s, e, direction, style, textStr, textStyle) {
         this.s = s;
         this.e = e;
+        this.id = `(${this.s.id}, ${this.e.id})`;
 
-        //directions and types can be different things
         this.direction = direction; //see enums.directions
         this.style = style;
 
@@ -16,9 +16,11 @@ class Link {
         this.parentsR = [];
         this.h = 0; //which slot is it in
         this.lines = [];
-        this.id = `(${this.s.id}, ${this.e.id})`;
 
-        this.type = "LINK";
+        this.rootMinWord = null;
+        this.rootMaxWord = null;
+
+
         if (this.s instanceof Word) {
           this.ts = types.WORD;
         } else if (this.s instanceof Link) {
@@ -66,21 +68,10 @@ class Link {
         this.labelRectSVGs = [];
         this.labelTextSVGs = [];
 
-        //this.polyline = null;
-        //this.polylineSVG = null;
         this.label = null;
         this.labelRectSVG = null;
         this.labelTextSVG = null;
-       //this.arrow1SVG = null;
-        //this.arrow2SVG = null;
-
-  
 
-
-
-        //this.rootMinWord
-        //this.rootMaxWord
-        
 
     }
 
@@ -148,18 +139,20 @@ class Word {
         this.id = `(${this.val}, ${this.idx})`;
         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.
 
-        this.type = "WORD";
-
         this.isSelected = false;
         this.isHovered = false;
         this.isDragging = false;
 
         //variables created in first render...
-        //this.row; //this is a row object, for num do: this.row.idx
+        //this.row; //this is a row object, for row num do: this.row.idx
         this.rectSVG = null; //the actual svg element 
         this.rect = null; //the bbox of the svg element
         this.underneathRect = null; //not clickable, but solid rect on which other word parts are placed (text, handles, clickable rect)
         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
 
@@ -186,6 +179,7 @@ class Word {
       this.rect = this.rectSVG.bbox();
 
       this.text.x(this.tempX + (this.tempW/2) - (this.text.bbox().w / 2) ); 
+      this.tagtext.x(this.tempX + (this.tempW/2) - (this.tagtext.bbox().w / 2) ); 
 
       this.leftX = this.tempX; 
       this.rightX = this.tempX + this.tempW;

js/interact.js

@@ -764,7 +764,22 @@ function moveWordToNewPosition(w, nx, ny) {
   w.underneathRect.y(ny);
 
   w.text.x(nx + (w.rect.w/2) - (w.text.bbox().w/2)  ); 
-  w.text.y(ny + textpaddingY);
+  w.text.y(ny + textpaddingY*2 - texts.wordText.descent);
+
+
+
+  //TODO - make these match original position - the Y pos for text is off for tags and words - why isn't the text descent needed here?? ny and w.wy should be (and is!) the same - but the text y pos is a few pixels off! 
+  //Looks like the entire row size jumps one pixel when adding a new row... think this may cause the 1 px differentce
+  w.tagtext.x(nx + (w.rect.w/2) - (w.tagtext.bbox().w/2)  ); 
+  w.tagtext.y(ny + textpaddingY/2);// - texts.tagText.descent);
+
+  console.log("ny = " + ny);
+  console.log("w.wy = " + w.wy);
+  console.log("w.text.y = " + w.text.y());
+
+
+
+
 
   var handley = ny + ( w.wh / 2 ) - ( handleH / 2 ); 
   w.leftHandle.x(nx);

js/render.js

@@ -323,6 +323,7 @@ function setUpRowsAndWords(words) {
   for (var i = 0; i < words.length; i++) {
 
     var wh = getTextWidthAndHeight(wordObjs[i].val, texts.wordText.style);
+    var twh = getTextWidthAndHeight("TAGABCDEF", texts.tagText.style);
 
     if (i == 0) {
 
@@ -348,6 +349,12 @@ function setUpRowsAndWords(words) {
     row.maxSlots = Math.max(row.maxSlots, getHeightForWord(word));
     word.row = row;
     word.tw = wh.w;
+
+    //TODO - check if word has an associated tag
+    if (twh.w > word.tw) {
+      word.tw = twh.w; //think tw is ONLY used for checking minWidth, so this should be ok
+    }
+    
     word.th = texts.wordText.maxHeight; //guaranteed to be the same for all words
 
     x += wh.w + (textpaddingX*2) + wordpadding;
@@ -379,15 +386,51 @@ function setUpRowsAndWords(words) {
       word.h = 0; //the number of link levels is 0 for the word
 
       var textwh = getTextWidthAndHeight(word.val, texts.wordText.style);
+      var tagtextwh = getTextWidthAndHeight("TAGABCDEF", texts.tagText.style);
+  
+      //make sure that we are using the longest word to set the width (if a tag is present in this word)
+      word.maxtextw = textwh.w;
+      if (tagtextwh.w > word.maxtextw) {
+        word.maxtextw = tagtextwh.w;
+      }
+
+       
+      word.ww = word.maxtextw + (textpaddingX * 2);
+      word.wx = x;
+
+      word.wh = texts.wordText.maxHeight + textpaddingY*2; 
+      word.wy = row.ry + row.rh - word.wh;
+
+      var tag_textwh = getTextWidthAndHeight("TAG", texts.tagText.style);
+      word.tww = word.maxtextw + (textpaddingX * 2);
+      word.twx = word.wx;
+
+      word.twh = texts.tagText.maxHeight + textpaddingY*2; 
+      word.twy = word.wy - word.twh;
+
+       x += word.maxtextw + (textpaddingX*2) + wordpadding;
+
+
+      /*
       word.ww = textwh.w + (textpaddingX * 2);
       word.wx = x;
 
       word.wh = texts.wordText.maxHeight + textpaddingY*2; 
       word.wy = row.ry + row.rh - word.wh;
 
+      var tag_textwh = getTextWidthAndHeight("TAG", texts.tagText.style);
+      word.tww = tag_textwh.w + (textpaddingX * 2);
+      word.twx = word.wx;
+
+      word.twh = texts.tagText.maxHeight + textpaddingY*2; 
+      word.twy = word.wy - word.twh;
+     
       x += textwh.w + (textpaddingX*2) + wordpadding;
+     */
+
 
-      row.baseHeight = word.wy; //that is, where the top of the word is in the row.
+
+           row.baseHeight = word.wy; //that is, where the top of the word is in the row.
 
     }
   }
@@ -402,11 +445,28 @@ function drawWord(word) {
   var text = draw.text(function(add) {
 
     add.text(word.val)
-    .y(word.wy + textpaddingY - texts.wordText.descent)
+    .y(word.wy + textpaddingY*2 - texts.wordText.descent)
     .x(word.wx + (word.ww/2) - (textwh.w / 2))
     .font(texts.wordText.style);
   });
 
+
+   console.log("text.y = " + text.y());
+
+   var textwh = getTextWidthAndHeight("TAGABCDEF", texts.tagText.style);
+   var tagXPos = word.twx + (word.ww/2) - (textwh.w / 2);
+
+
+   //add in tag text, IF the word has an associated tag
+   var tagtext = draw.text(function(add) {
+
+    add.text("TAGABCDEF")
+    .y(word.wy + textpaddingY/2 - texts.tagText.descent)
+    .x(tagXPos)
+    .font(texts.tagText.style);
+  });
+
+
   //this rect is invisible, but used for detecting mouseevents, as its drawn on top of the text+underneathRect (which provided the color+fill+stroke)
   var rect = draw.rect(word.ww, word.wh).x( word.wx ).y( word.wy ).fill( {color:'#fff',opacity: 0.0} );
 
@@ -416,8 +476,10 @@ function drawWord(word) {
   var rightHandle = draw.rect(handleW,handleH).x(word.wx + word.ww - (handleW)).y( word.wy + (word.wh / 2 ) - (handleH / 2) ).style(styles.handleFill.style);
 
 
-
   word.text = text;
+  word.tagtext = tagtext;
+
+
   word.rectSVG = rect;
   word.underneathRect = underneathRect;
   word.rect = rect.bbox();
@@ -444,9 +506,45 @@ function drawWord(word) {
     }
   underneathRect.style(styles.wordFill[style]);
   });
+
+
+  //if (word.tag) {
+  //  drawTag(word);
+  //}
+
 }
 
 
+function drawTag(word) {
+
+     var textwh = getTextWidthAndHeight("TAGABCDEF", texts.tagText.style);
+
+     console.log("\n***\n");
+console.log("textwh.w = " + textwh.w);
+console.log("textwh.h = " + textwh.h);
+console.log("word.twx = " + word.twx);
+console.log("word.twy = " + word.twy);
+console.log("word.twh = " + word.twh);
+
+
+
+   var tagXPos = word.twx + (word.ww/2) - (textwh.w / 2);
+
+
+  underneathTagRect = draw.rect( textwh.w + textpaddingX*2, word.twh ).x( tagXPos - textpaddingX ).y( word.twy ).style(styles.tagFill.style);
+  //underneathTagRect = draw.rect( 100,100 ).x( 100 ).y( 100 ); //.style(styles.wordFill.style);
+
+   var text = draw.text(function(add) {
+
+    add.text("TAGABCDEF")
+    .y(word.twy + textpaddingY*2 - texts.wordText.descent)
+    .x(tagXPos)
+    .font(texts.tagText.style);
+  });
+
+
+}
+
 
 var _linkLabels = [];
 var _links = [];

js/style.js

@@ -360,6 +360,13 @@ function setupStyles(svg) {
   styleArr.wordFill.selecting('#fcc', 1.0, new LineStyle('#c99', 1));
   styleArr.wordFill.hoveringAndSelecting('#fcc', 1.0/*, new LineStyle('#000000', 1)*/);
 
+
+  styleArr.tagFill = new FillStyle('#00ffff', 1.0, new LineStyle('#000', 1) );
+  styleArr.tagFill.hovering('#ff0000', 1.0/*, new LineStyle('#000000', 1)*/);
+  styleArr.tagFill.selecting('#fcc', 1.0, new LineStyle('#c99', 1));
+  styleArr.tagFill.hoveringAndSelecting('#fcc', 1.0/*, new LineStyle('#000000', 1)*/);
+
+
   styleArr.labelEvenFill = new FillStyle(evenRowsColor, 1.0);
   styleArr.labelOddFill = new FillStyle(oddRowsColor, 1.0);
 
@@ -381,6 +388,7 @@ function setupTexts(svg) {
 
   textArr.wordText = new TextStyle('Brown, BrownPro, futura, helvetica', 12, new FillStyle('#444'));
   textArr.linkText = new TextStyle('Brown, BrownPro, futura, helvetica', 10, new FillStyle('#888'));
+  textArr.tagText = new TextStyle('Brown, BrownPro, futura, helvetica', 12, new FillStyle('#888'));
 
   return textArr; 
 }