Merge branch 'master' of github.com:CreativeCodingLab/TextAnnotationGraphs

Author: hmsklee

index.html

@@ -88,6 +88,8 @@
 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)
+var rowpadding = 30;
+
 var hideLinkLinesPercentage = 3.0; //percentage at which links and arrows are hidden
 var hideLinkTextPercentage = 7.0; //percentage at which words are link words are hidden
 
@@ -128,8 +130,8 @@
 var attachmentMargin = 0.1; //percentage value
 
 var word2word_strategy = strategies.FARTHEST;
-var word2link_strategy = strategies.CLOSEST; 
-var link2link_strategy = strategies.CLOSEST; //CLOSEST sometimes causes overlaps - need to be a bit more rigorous when assigning slots - don't assign any slots that have the potential to overlap (when dragged manually)? - or let the buyer beware that this could happen - they can always move out of the way - right now it won't automatically overlap, but won't prevent a user from doing it. 
+var word2link_strategy = strategies.FARTHEST; 
+var link2link_strategy = strategies.FARTHEST; //CLOSEST sometimes causes overlaps - need to be a bit more rigorous when assigning slots - don't assign any slots that have the potential to overlap (when dragged manually)? - or let the buyer beware that this could happen - they can always move out of the way - right now it won't automatically overlap, but won't prevent a user from doing it. 
 
 var rows = []; //list of Row object, each of those has a list of Word objects
 

js/annotate.js

@@ -124,6 +124,7 @@ class Word {
     constructor(val, idx) {
         this.val = val;
         this.idx = idx;
+        this.tag = null;
         this.h = 0; //num slots
         this.ww = 0;
         this.wh = 0;
@@ -145,8 +146,8 @@ class Word {
 
         //variables created in first render...
         //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.aboveRect = null; //the actual svg element 
+        this.bbox = 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
@@ -170,17 +171,20 @@ class Word {
     update() {
 
     //  console.log("\n***\nin update X = " + this.tempX + ", Y = " + this.tempY + ", W = " + this.tempW );
-      this.rectSVG.x(this.tempX);
-      this.rectSVG.width(this.tempW);
+      this.aboveRect.x(this.tempX);
+      this.aboveRect.width(this.tempW);
 
       this.underneathRect.x(this.tempX);
       this.underneathRect.width(this.tempW);
 
-      this.rect = this.rectSVG.bbox();
+      this.bbox = this.aboveRect.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) ); 
-    
+      
+      if (this.tag != null) {
+        this.tagtext.x(this.tempX + (this.tempW/2) - (this.tagtext.bbox().w / 2) ); 
+      }
+
       this.leftX = this.tempX; 
       this.rightX = this.tempX + this.tempW;
 
@@ -196,8 +200,9 @@ class Word {
       drawWord(this);
     }
 
+   
     getMinWidth() {
-      return Math.max(minWordWidth, this.tw);
+      return Math.max(minWordWidth, this.maxtextw);
     }
 
     /* must return a value less than row width - edgepaddings, else will try to reposition long words forever! */