Fixes a bug with recalculateRows, which is fired when the window size

changes. Now it repositions words correctly again, when necessary (like
when there's no room for words on a row to compress anymore anymore)

Author: angusforbes

index.html

@@ -83,11 +83,14 @@
 var isDragging = false;
 
 var levelpadding = 16;
-var /*textpadding */ textpaddingX = 12; //this is the x-padding within each word rect, between the text and the rectangle it's inside of
+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 wordpadding = 5; //x padding between the rects containing words
-var topMargin = 0;
+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 hideLinkLinesPercentage = 3.0; //percentage at which links and arrows are hidden
+var hideLinkTextPercentage = 7.0; //percentage at which words are link words are hidden
+
 
 
 var handleW = 10;
@@ -102,7 +105,6 @@
 
 var wordHeight = texts.wordText.maxHeight + (textpaddingY * 2); 
 var minWordWidth = getTextWidthAndHeight("i", texts.wordText.style).w + (handleW * 2);
-//var minWordWidth = 10; //used when dragging handles to shrink or grow word size
 
 
 var evenRowsColor_selected = '#cdcdff';
@@ -125,34 +127,23 @@
 
 var attachmentMargin = 0.1; //percentage value
 
-var arrowColor = '#000000';
-var arrowOpacity = 1.0;
-
 var word2word_strategy = strategies.FARTHEST;
-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 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 rows = []; //list of Row object, each of those has a list of Word objects
 
 
 // 1. create Words and Links objects (in utils.js) */
-var wordObjs = createTestWords(13, 5, 11);
-//var wordObjs = [];
-//wordObjs.push(new Word("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", 0));
-//wordObjs.push(new Word("bbbbbbbbbbbbbbbbbbbbbbbbbb", 1));
-
+var wordObjs = createTestWords(15, 1, 15);
 
 //var linkObjs = createTestLinks(1,1,0); 
 var linkObjs = createTestLinks(4,4,4); 
 
-
 // 2. draw words and boxes around words
 drawWords(wordObjs);
 
 // 3. draw each of the links
-var hidePercentage = 3;
-var hidePercentage2 = 7;
-
 drawLinks(linkObjs);
 
 var prevWidth = svgWidth;

js/annotate.js

@@ -178,36 +178,22 @@ class Word {
 
     //  console.log("\n***\nin update X = " + this.tempX + ", Y = " + this.tempY + ", W = " + this.tempW );
       this.rectSVG.x(this.tempX);
-      //this.rectSVG.y(this.tempY);
       this.rectSVG.width(this.tempW);
 
       this.underneathRect.x(this.tempX);
-      //this.underneathRect.y(this.tempY);
       this.underneathRect.width(this.tempW);
 
       this.rect = this.rectSVG.bbox();
-
-
 
       this.text.x(this.tempX + (this.tempW/2) - (this.text.bbox().w / 2) ); 
-      //this.text.y(this.tempY + textpaddingY);
-
 
       this.leftX = this.tempX; 
       this.rightX = this.tempX + this.tempW;
 
       this.percPos = (this.leftX-edgepadding) / (svgWidth-edgepadding*2);
 
-
-      //var handley = this.tempY + ( this.wh / 2 ) - ( handleH / 2 ); 
-
       this.leftHandle.x(this.tempX);
-      //this.leftHandle.y(handley);
-      
-
       this.rightHandle.x(this.rightX - handleW);
-      //this.rightHandle.y(handley);
-          
     }
 
 

js/interact.js

@@ -79,6 +79,11 @@ function updateLinksOfWord(word) {
 }
 
 
+function updateAllLinks() {
+  for (let item of linkObjs) {
+    item.needsUpdate = true;
+  }
+}
 
 function updateLinks(link) {
 
@@ -470,7 +475,7 @@ function dragLeftHandle(x, y, word) {
 function checkIfCanDragLeftHandleLeft(x, y, word) {
     var rw = Math.max( Math.min(word.getMaxWidth(), (word.rightX - x)), word.getMinWidth() );
 
-    setWordToXWY(word, x, rw, y);
+    setWordToXW(word, x, rw);
 
     var rv = checkIfCanMoveLeft(x, rw, y, word, true);
     rv.y = word.y;
@@ -481,7 +486,7 @@ function checkIfCanDragLeftHandleRight(x, y, word) {
 
     var rw = Math.max( Math.min(word.getMaxWidth(), (word.rightX - x) ), word.getMinWidth() );
 
-    setWordToXWY(word, x, rw, y);
+    setWordToXW(word, x, rw);
 
     var rv = checkIfCanMoveRight(x, rw, y, word, true);
     rv.y = word.y;
@@ -510,7 +515,7 @@ function dragRightHandle(x, y, word) {
 function checkIfCanDragRightHandleLeft(x, y, word) {
     var rw = Math.max( Math.min(word.getMaxWidth(), (x - word.leftX + handleW)), word.getMinWidth() );
 
-    setWordToXWY(word, word.leftX, rw, y);
+    setWordToXW(word, word.leftX, rw);
 
     var rv = checkIfCanMoveLeft(x - (rw - handleW), rw, y, word, false);
     //rv.x = word.leftX + rw - handleW;
@@ -526,7 +531,7 @@ function checkIfCanDragRightHandleRight(x, y, word) {
 
     var rw = Math.max( Math.min(word.getMaxWidth(), (x - word.leftX + handleW) ), word.getMinWidth() );
 
-    setWordToXWY(word, word.leftX, rw, y);
+    setWordToXW(word, word.leftX, rw);
 
     var rv = checkIfCanMoveRight(x - (rw - handleW), rw, y, word, false);
     //rv.x = word.leftX + rw - handleW;
@@ -582,6 +587,9 @@ function checkIfCanMoveRight(x, w, y, word, adjustWidth) {
   }
 
 
+  w = Math.max( Math.min(w, word.getMaxWidth()), word.getMinWidth()) ;
+ 
+
   /* Check to see if the word needs to jump to the next row */
 
   //am i the last word (or only word) in this row?
@@ -609,7 +617,7 @@ function checkIfCanMoveRight(x, w, y, word, adjustWidth) {
   }
 
   /* Set new position of this word */
-  setWordToXWY(word, rx, w, ry);
+  setWordToXW(word, rx, w);
 
   /* Does it push into the next word? */
   posInRow = word.row.words.indexOf(word);
@@ -728,7 +736,9 @@ function checkIfCanMoveLeft(x, w, y, word, adjustWidth) {
     rw = w;
   }
 
-  setWordToXWY(word, rx, rw, ry);
+  //rw = Math.max( Math.min(rw, word.getMaxWidth()), word.getMinWidth()) ;
+ 
+  setWordToXW(word, rx, rw);
 
 
   return {x:rx, y:ry};
@@ -740,8 +750,7 @@ function moveWordToNewPosition(w, nx, ny) {
 
   w.tempX = nx;
   w.tempW = w.rect.w;
-  //w.needsUpdate = true;
-
+  
   w.rectSVG.x(nx);
   w.rectSVG.y(ny);
 
@@ -764,10 +773,12 @@ function moveWordToNewPosition(w, nx, ny) {
   w.rightHandle.x( w.rightX - handleW );
   w.rightHandle.y(handley);
 
+  w.needsUpdate = true;
+
 }
 
 
-function setWordToXWY(word, xval, wval, yval) {
+function setWordToXW(word, xval, wval) {
 
   word.tempX = xval;
   word.tempW = wval;
@@ -967,7 +978,7 @@ function dragRow(x, y, row) {
 
   for (var i = 0; i < row.words.length; i++) {
     setWordToY(row.words[i], row.lineBottom.bbox().y - row.words[i].rectSVG.height() );
-    updateLinksOfWord(row.words[i]);
+    //updateLinksOfWord(row.words[i]);
   }
 
   row.baseHeight = row.lineBottom.y() - (textpaddingY*2) - texts.wordText.maxHeight;
@@ -986,13 +997,12 @@ function dragRow(x, y, row) {
     nextrow.lineTop.y(row.rect.bbox().y + row.rect.bbox().h + 5);
 
     for (var i = 0; i < nextrow.words.length; i++) {
-      updateLinksOfWord(nextrow.words[i]);
+      //updateLinksOfWord(nextrow.words[i]);
     }
   }
 
-  //redrawLinks();
-  //updateWords();
-  
+  //hmm... what about links that pass through the row, but aren't attached to any word on this row?
+  updateAllLinks(); //this works for now
 
   var returnVal = {x:row.dragRect.bbox().x, y:y};