start dynamically adding new words to graph

Author: hmsklee

index.html

@@ -248,6 +248,82 @@
   changeDataset(2);
 };
 
+let collapse;
+let c0;
+document.addEventListener('keydown', function(e) {
+  let c = e.keyCode;
+  if (c === 65) { // A
+    collapse = true;
+    c0 = null;
+  }
+  else {
+    collapse = false;
+    c0 = null;
+  }
+});
+draw.on('wordClicked', function(e) {
+  let word = e.detail.arbitrary;
+  if (collapse) {
+    if (c0 === null) {
+      c0 = word;
+      console.log('left', word);
+    }
+    else {
+      console.log('right', c0, word);
+
+      let phrase = "";
+      for (let i = c0.idx; i <= word.idx; ++i) {
+        if (i > c0.idx) {
+          phrase += ' ';
+        }
+        phrase += wordObjs[i].val;
+      }
+      // console.log(phrase);
+
+      let newWord = new Word(phrase, wordObjs.length);
+      wordObjs.push(newWord);
+
+      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.row = row;
+
+
+      newWord.draw();
+      collapse = false;
+      c0 = null;
+    }
+  }
+});
+
+
 </script>
 
 

js/render.js

@@ -374,65 +374,6 @@ function setUpRowsAndWords(words) {
 }
 
 
-function drawWord(word) {
-
-  let g = word.svg = draw.group().addClass('word');
-
-  word.underneathRect = g.rect( word.ww, word.wh )
-    .x( word.wx )
-    .y( word.wy )
-    .addClass('word--underneath');
-
-  var textwh = getTextWidthAndHeight(word.val, texts.wordText.style);
-
-  word.text = g.text(function(add) {
-
-    add.text(word.val)
-    .y(word.wy + Config.textPaddingY*2 - texts.wordText.descent)
-    .x(word.wx + (word.ww/2) - (textwh.w / 2))
-    .font(texts.wordText.style);
-  });
-
-  word.bbox = word.underneathRect.bbox();
-  word.leftX = word.underneathRect.bbox().x;
-  word.rightX = word.underneathRect.bbox().x + word.underneathRect.bbox().w;
-  word.percPos = (word.leftX-Config.edgePadding) / (Config.svgWidth-Config.edgePadding*2);
-
-  if (word.tag != null) {
-    var textwh = getTextWidthAndHeight(word.tag, texts.tagText.style);
-    var tagXPos = word.twx + (word.ww/2) - (textwh.w / 2);
-
-    //add in tag text, if the word has an associated tag
-    word.tagtext = g.text(function(add) {
-        add.text(word.tag)
-        .y(word.wy + Config.textPaddingY/2 - texts.wordText.descent)
-        .x(tagXPos)
-        .font(texts.tagText.style);
-      });
-    word.leftHandle = g.rect(Config.handleW, Config.handleH)
-      .x(word.wx)
-      .y( word.wy + (word.wh / 2 ) - (Config.handleH / 2) )
-      .addClass('word--handle');
-
-    word.rightHandle = g.rect(Config.handleW,Config.handleH)
-      .x(word.wx + word.ww - (Config.handleW))
-      .y( word.wy + (word.wh / 2 ) - (Config.handleH / 2) )
-      .addClass('word--handle');
-
-    //set up mouse interactions
-    setUpLeftHandleDraggable(word);
-    setUpRightHandleDraggable(word); 
-  }
-
-  setUpWordDraggable(word); 
-
-  word.underneathRect.dblclick( () => {
-    word.toggleHighlight();
-    draw.fire('wordSelected', { arbitrary: word });
-  });
-}
-
-
 var _linkLabels = [];
 var _links = [];
 var _arrows = [];

js/word.js

@@ -73,7 +73,60 @@ class Word {
   }
 
   draw() {
-    drawWord(this);
+    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))
+      .font(texts.wordText.style);
+
+    this.bbox = this.underneathRect.bbox();
+    this.leftX = this.underneathRect.bbox().x;
+    this.rightX = this.underneathRect.bbox().x + this.underneathRect.bbox().w;
+    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);
+
+      //add in tag text, if the word has an associated tag
+      this.tagtext = g.text(this.tag)
+        .y(this.wy + Config.textPaddingY/2 - texts.wordText.descent)
+        .x(tagXPos)
+        .font(texts.tagText.style);
+
+      this.leftHandle = g.rect(Config.handleW, Config.handleH)
+        .x(this.wx)
+        .y( this.wy + (this.wh / 2 ) - (Config.handleH / 2) )
+        .addClass('word--handle');
+
+      this.rightHandle = g.rect(Config.handleW,Config.handleH)
+        .x(this.wx + this.ww - (Config.handleW))
+        .y( this.wy + (this.wh / 2 ) - (Config.handleH / 2) )
+        .addClass('word--handle');
+
+      //set up mouse interactions
+      setUpLeftHandleDraggable(this);
+      setUpRightHandleDraggable(this); 
+    }
+
+    setUpWordDraggable(this); 
+
+    this.underneathRect.dblclick( () => {
+      this.toggleHighlight();
+      draw.fire('wordSelected', { arbitrary: this });
+    });
+
+    this.underneathRect.click(() => {
+      draw.fire('wordClicked', { arbitrary: this });
+    })
   }
 
   get minWidth() { //min width is the maximum of: the word text, the tag text, or the size of the two handles + a little bit