style changes and selectable links

Author: hmsklee

css/style.css

@@ -48,4 +48,38 @@ button {
     bottom:0;
     left:0;
     overflow:hidden;
+}
+
+
+/* svg classes */
+#drawing text, .link--labels text {
+  pointer-events: none;
+}
+
+.row--0, .link--label {
+  fill: #f6f6f6;
+}
+.row--1, .link--label.odd {
+  fill: #d5d5d5;
+}
+
+.word--underneath {
+  fill:white;
+}
+
+.selected .word--underneath, .link--label.selected {
+  fill:white;
+  stroke:teal;
+}
+.hovered .word--underneath, .link--label.hovered {
+  fill:white;
+  stroke:cyan;
+}
+
+.word--handle {
+  fill: rgb(255, 204, 204);
+  opacity: 0;
+}
+.word:hover .word--handle {
+  opacity: 0.7;
 }

index.html

@@ -90,12 +90,16 @@
     recalculateRows(widthPercChange); //makes sure that the words fit in the current width, else makes new rows  
   }
 
+  function getSelectedObjects() {
+    return wordObjs.concat(linkObjs).filter(obj => obj.isSelected);
+  }
+
   draw.on('wordSelected', function() {
-    Panel.graph(wordObjs.filter(word => word.isSelected));
+    Panel.graph(getSelectedObjects());
   });
 
   document.querySelector('#graph>button').onclick = function() {
-    let words = wordObjs.filter(word => word.isSelected);
+    let words = getSelectedObjects();
     if (words.length > 0) {
       Panel.graph(words);
     }

js/GraphLayout.js

@@ -66,7 +66,7 @@ class GraphLayout {
     }
     graph(words) {
         if (words.length === 0 || this.words.length === words.length && 
-            this.words.every((w,i) => words[i] === w)) { return; }
+            this.words.every((w,i) => words.indexOf(w) > -1)) { return; }
         else { this.words = words; }
 
         const maxDepth = this.maxDepth;
@@ -219,17 +219,21 @@ class GraphLayout {
     }
     drawNodes(root, i, el) {
         function handleNodeClick(d) {
+            unhoverNode(d);
             let newArray = this.words.slice();
             let word = newArray.splice(i, 1, d.node)[0];
-            if (word instanceof Word) {
-                word.toggleHighlight(false);
-            }
-            if (d.node instanceof Word) {
-                d.node.toggleHighlight(true);
-            }
+            word.toggleHighlight(false);
+            d.node.toggleHighlight(true);
             this.graph(newArray);
         }
 
+        function hoverNode(d) {
+            d.node.hover();
+        }
+        function unhoverNode(d) {
+            d.node.unhover();
+        }
+
         let node = el.selectAll('.node')
             .data(root.descendants());
 
@@ -265,6 +269,8 @@ class GraphLayout {
             .attr('transform', (d) => d.data.receivesArrow && d.data.type === 'Word' ? 'rotate(-30)' : 'rotate(45)')
             .attr('stroke', 'grey')
             .attr('fill', (d) => d.data.type === 'Word' ? 'black' : 'white')
+            .on('mouseover', (d) => hoverNode.bind(this)(d.data))
+            .on('mouseout', (d) => unhoverNode.bind(this)(d.data))
             .on('click', (d) => handleNodeClick.bind(this)(d.data));
 
         nodeMerge.select('text')
@@ -313,9 +319,9 @@ class GraphLayout {
             .style('text-anchor','end');
 
         let inMerge = inEnter.merge(incoming)
-            .attr('transform', (d, i) => 'translate(-30,' + (-20 * i - 20) + ')');
-
-        inMerge.select('circle')
+            .attr('transform', (d, i) => 'translate(-30,' + (-20 * i - 20) + ')')
+            .on('mouseover', (d) => hoverNode.bind(this)(d))
+            .on('mouseout', (d) => unhoverNode.bind(this)(d))
             .on('click', (d) => handleNodeClick.bind(this)(d));
 
         inMerge.select('path')

js/annotate.js

@@ -99,16 +99,6 @@ class Link {
         this.labelTextSVG = null;
     }
 
-    //KLEE's function..
-    removeSVGs() {
-     this.polylineSVGs.forEach(svg => svg.remove());
-     this.labelRectSVGs.forEach(svg => svg.remove());
-     this.labelTextSVGs.forEach(svg => svg.remove());
-     this.arrow1Style.path.remove();
-     this.arrow2Style.path.remove();
-    }
-    //end KLEE
-
     get parents() {
       return [].concat(this.parentsL, this.parentsC, this.parentsR);
     }
@@ -117,6 +107,24 @@ class Link {
         return this.id; 
     }
 
+    toggleHighlight(select) {
+      // default value
+      if (select === undefined) {
+        this.isSelected = !this.isSelected;
+      }
+      else {
+        this.isSelected = select;
+      }
+
+      this.labelRectSVGs.forEach(rect => rect.toggleClass('selected', this.isSelected));
+    }
+
+    hover(label) {
+      this.labelRectSVGs.forEach(rect => rect.addClass('hovered'));
+    }
+    unhover(label) {
+      this.labelRectSVGs.forEach(rect => rect.removeClass('hovered'));
+    }
 
     setStartAndEnd() {
 
@@ -160,9 +168,8 @@ class Row {
 
     //svg elements
     this.rect = null;
-    this.lineTop = null;
     this.lineBottom = null
-      this.dragRect = null;
+    this.dragRect = null;
   }
 
 
@@ -207,22 +214,21 @@ class Word {
     this.parentsR = [];  //who connects to me and is attached to my right side
     this.parentsC = []; //who connects to me and is attached to the center (ie, for multilinks)
 
-
-
-    //this.lines = [];  //don't this is used, double check then remove!
-
     this.tw = 0; //width of text part of word, used also to determine minimum size of word rect
     this.th = 0;
 
     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.isSelected = false;
-    this.isHovered = false;
     this.isDragging = false;
 
     //variables created in first render...
+
     this.row = null; //this is a row object, for row num do: this.row.idx
-    this.aboveRect = null; //the top level, clickable rect 
+
+    this.svg = null; // group element within which rect, text, and handles are nested
+                    // TODO: transform this.svg instead of individual children
+
     this.bbox = null; //the bbox of the clickable rect
     this.underneathRect = null; //solid rect on which other word parts are placed (text, handles, clickable rect)
     this.text = null; //the svg text
@@ -247,13 +253,11 @@ class Word {
     update() {
 
     ////  console.log("\n***\nin update X = " + this.tempX + ", Y = " + this.tempY + ", W = " + this.tempW );
-      this.aboveRect.x(this.tempX);
-      this.aboveRect.width(this.tempW);
 
       this.underneathRect.x(this.tempX);
       this.underneathRect.width(this.tempW);
 
-      this.bbox = this.aboveRect.bbox();
+      this.bbox = this.underneathRect.bbox();
 
       this.text.x(this.tempX + (this.tempW/2) - (this.text.bbox().w / 2) ); 
 
@@ -296,14 +300,14 @@ class Word {
         this.isSelected = select;
       }
 
-      let style;
-      if (this.isSelected) {
-        style = this.isHovered ? "hoverAndSelect" : "select";
-      }
-      else {
-        style = this.isHovered ? "hover" : "style";
-      }
-      this.underneathRect.style(styles.wordFill[style]);
+      this.svg.toggleClass('selected', this.isSelected);
+    }
+
+    hover() {
+      this.svg.addClass('hovered');
+    }
+    unhover() {
+      this.svg.removeClass('hovered');
     }
 
     toString() {