another class for the word collapser lol

Author: hmsklee

css/style.css

@@ -28,6 +28,12 @@ svg text {
   margin-top:30px;
   margin-bottom: 210px;
 }
+#drawing.bracket-left{
+  cursor:e-resize !important;
+}
+#drawing.bracket-right {
+  cursor:w-resize !important;
+}
 
 #graph {
   cursor:-webkit-grab;
@@ -42,7 +48,7 @@ svg text {
 }
 
 #graph:before {
-  cursor:ns-resize;
+  cursor:row-resize;
   content:'';
   width:100%;
   height:7px;

index.html

@@ -55,6 +55,7 @@
 <script src="js/interact.js"></script>
 <script src="js/utils.js"></script>
 <script src="js/minimap.js"></script>
+<script src="js/wordcollapser.js"></script>
 
 <script type="text/javascript">
 /* a lot of these global vars should be wrapped eventually */
@@ -69,7 +70,6 @@
 
 var texts = setupTexts(draw); //creates an associate array of whatever text you want to use. Currently using 'texts.wordText' and 'texts.linkText', and using style, maxHeight, and descent to layout text
 
-Config.handleH = texts.wordText.maxHeight + (Config.textPaddingY * 2);
 Config.wordHeight = texts.wordText.maxHeight + (Config.textPaddingY * 2); 
 Config.minWordWidth = getTextWidth("i", texts.wordText.style) + (Config.handleW * 2);
 
@@ -96,6 +96,7 @@
   const graph = new GraphLayout(panel.el);
   panel.onresize = graph.resize.bind(graph);
   const parser = new Parser();
+  const wc = new WordCollapser();
 
   var prevWidth = Config.svgWidth;
   function svgResize() {
@@ -114,6 +115,9 @@
   draw.on('wordSelected', function() {
     graph.graph(getSelectedObjects());
   });
+  draw.on('wordClicked', function(e) {
+    wc.setClick(e.detail.arbitrary);
+  });
 
   function changeDataset(index = 1) {
     parser.readJson(`./data/data${index}.json`, function() {
@@ -248,59 +252,6 @@
   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);
-      
-      //calculate x position and width of the Word
-      newWord.wx = 80;
-      newWord.ww = newWord.tw + (Config.textPaddingX * 2);
-      newWord.wy = row.wordY;
-      newWord.row = row;
-
-
-      newWord.draw();
-      collapse = false;
-      c0 = null;
-    }
-  }
-});
-
-
 </script>
 
 

js/interact.js

@@ -502,12 +502,11 @@ function moveWordToNewPosition(w, nx, ny) {
     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 ); 
     w.leftHandle.x(nx);
-    w.leftHandle.y(handley);
+    w.leftHandle.y(ny);
 
     w.rightHandle.x( w.rightX - Config.handleW );
-    w.rightHandle.y(handley);
+    w.rightHandle.y(ny);
   }
 
   w.needsUpdate = true;

js/render.js

@@ -275,7 +275,6 @@ function calculateMaxSlotForRow(row) {
   }
 }
 
-
 function setUpRowsAndWords(words) {
 
   var rowNum = 0;
@@ -314,10 +313,9 @@ function setUpRowsAndWords(words) {
     word.th = texts.wordText.maxHeight; //guaranteed to be the same for all words
 
     //calculate x position and width of the Word
-    word.wx = x;
-    word.ww = word.tw + (Config.textPaddingX * 2);
+    word.leftX = x;
 
-    x += word.ww + Config.wordPadding;
+    x += word.defaultWidth + Config.wordPadding;
   }
 
 
@@ -336,9 +334,7 @@ function setUpRowsAndWords(words) {
 
     for (var ii = 0; ii < row.words.length; ii++) {
       var word = row.words[ii];
-
-      word.wy = row.wordY;
-
+      
       if (word.tag != null) {
         var tag_textwh = getTextWidthAndHeight(word.tag, texts.tagText.style);
         word.twh = texts.tagText.maxHeight + Config.textPaddingY*2; 

js/row.js

@@ -118,9 +118,6 @@ 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/word.js

@@ -6,10 +6,8 @@ class Word {
 
     this.h = 0; //num slots
 
-    this.ww = 0;
     this.wh = texts.wordText.maxHeight + Config.textPaddingY*2; 
-    this.wx = 0;
-    this.wy = 0;
+    this.leftX = 0;
 
     this.slotsL = []; //all the slots that links attached the left side of this word occupy
     this.slotsR = [];  //all the slots that links attached the left side of this word occupy
@@ -81,39 +79,38 @@ class Word {
 
 
     let g = this.svg = draw.group().addClass('word');
+    let x = this.leftX + this.defaultWidth/2;
 
-    this.underneathRect = g.rect( this.ww, this.wh )
-      .x( this.wx )
+    this.underneathRect = g.rect( this.defaultWidth, this.wh )
+      .x( this.leftX )
       .y( this.wy )
       .addClass('word--underneath');
 
     this.text = g.text(this.val)
       .y(this.wy + Config.textPaddingY*2 - texts.wordText.descent)
-      .x(this.wx + this.ww/2)
+      .x(x)
       .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 tagXPos = this.wx + this.ww/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)
+        .x(x)
         .font(texts.tagText.style);
 
-      this.leftHandle = g.rect(Config.handleW, Config.handleH)
-        .x(this.wx)
-        .y( this.wy + (this.wh / 2 ) - (Config.handleH / 2) )
+      this.leftHandle = g.rect(Config.handleW, Config.wordHeight)
+        .x(this.leftX)
+        .y( this.wy)
         .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) )
+      this.rightHandle = g.rect(Config.handleW,Config.wordHeight)
+        .x(this.rightX - (Config.handleW))
+        .y( this.wy)
         .addClass('word--handle');
 
       //set up mouse interactions
@@ -133,6 +130,17 @@ class Word {
     })
   }
 
+  get wy() {
+    if (this.row) {
+      return this.row.ry + this.row.rh - (texts.wordText.maxHeight + Config.textPaddingY*2);
+    }
+    return 0;
+  }
+
+  get defaultWidth() {
+    return this.tw + (Config.textPaddingX * 2)
+  }
+
   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.tw);
   }

js/wordcollapser.js

@@ -0,0 +1,81 @@
+const WordCollapser = (function() {
+
+  let div;
+  let selecting;
+  let leftWord;
+
+  function listenForLeftWord() {
+    selecting = true;
+    leftWord = null;
+    div.className = 'bracket-left';
+  }
+
+  function listenForRightWord() {
+    div.className = 'bracket-right';
+  }
+
+  function cancel() {
+    selecting = false;
+    leftWord = null;
+    div.className = null;
+  }
+
+  class WordCollapser {
+
+    constructor() {
+      div = document.getElementById('drawing');
+
+      document.addEventListener('keydown', function(e) {
+        let c = e.keyCode;
+        if (c === 65) { // A
+          listenForLeftWord();
+        }
+        else {
+          cancel();
+        }
+      });
+    }
+
+    setClick(word) {
+      if (selecting) {
+        // selecting left word
+        if (leftWord === null) {
+          leftWord = word;
+          console.log('left', word);
+        }
+        // selected words in the wrong order
+        else if (leftWord.idx >= word.idx) {
+          cancel();
+          console.log('out of order... canceling');
+        }
+        // select second word
+        else {
+          console.log('right', leftWord, word);
+
+          let text = "";
+          for (let i = leftWord.idx; i <= word.idx; ++i) {
+            if (i > leftWord.idx) {
+              text += ' ';
+            }
+            text += wordObjs[i].val;
+          }
+
+          let phrase = new Word(text, leftWord.idx);
+
+          let row = leftWord.row;
+
+          wordObjs.splice(wordObjs.indexOf(leftWord), 1, phrase);
+          row.words.splice(row.words.indexOf(leftWord), 1, phrase);
+
+          phrase.leftX = leftWord.leftX;
+          phrase.row = row;
+          phrase.draw();
+          leftWord.svg.hide();
+          cancel();
+        }
+      }
+    }
+  }
+
+  return WordCollapser;
+})();