right click on hook nodes, save style tweaks...

Author: hmsklee

index.html

@@ -70,12 +70,12 @@
 //var linkObjs = createTestLinks(3,3,3); 
 //var linkObjs = createTestLinks(1,0,0); 
 var linkObjs = createTestMultiLinks(1); 
-
+/*
 drawWords(wordObjs);
 drawLinks(linkObjs);
 
 changeSizeOfSVGPanel(window.innerWidth - 16, (rows[rows.length - 1].lineBottom.y() ) + 1);
-
+*/
 window.onload = function() {
 
   const panel = new Panel('graph', 'drawing');
@@ -242,7 +242,7 @@
   };
   window.onresize = _.debounce(resize, 300);
 
-  changeDataset();
+  changeDataset(2);
 };
 
 </script>

js/GraphLayout.js

@@ -212,13 +212,12 @@ 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 (newArray.indexOf(word) < 0) {
+            let word = this.words.splice(i, 1, d.node)[0];
+            if (this.words.indexOf(word) < 0) {
                 word.toggleHighlight(false);
             }
             d.node.toggleHighlight(true);
-            this.graph(newArray);
+            this.graph(this.words);
         }
 
         function hoverNode(d) {
@@ -316,7 +315,15 @@ class GraphLayout {
             .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));
+            .on('click', (d) => handleNodeClick.bind(this)(d))
+            .on('contextmenu', (d) => {
+                d3.event.preventDefault();
+                console.log('hey', d);
+                let word = this.words.splice(i + 1, 0, d.node)[0];
+                d.node.unhover();
+                d.node.toggleHighlight(true);
+                this.graph(this.words);
+            });
 
         inMerge.select('path')
             .attr('d', (d, i) => {

js/render.js

@@ -673,7 +673,7 @@ function drawAllLinkLabels() {
         lo.labelRectSVGs[ii] = label.rect( lo.labels[ii].rect.w, lo.labels[ii].rect.h )
           .x( lo.labels[ii].rect.x )
           .y( lo.labels[ii].rect.y )
-          .addClass('link--label');
+          .addClass(lo.isSelected ? 'link--label selected' : 'link--label');
 
         lo.labelTextSVGs[ii] = label.text( lo.labels[ii].text.text )
           .x( lo.labels[ii].text.x )
@@ -1008,11 +1008,15 @@ function calculateOnlyRow(rowNum, link, percentagePadding, xPositions, linkStyle
   var xL =  arrowPos[0].x ; //xPositions[0];
   var xR = arrowPos[arrowPos.length-1].x; //xPositions[link.words.length - 1];
 
+  var pathline = 'M' + [xL, arrowPos[0].y] +
+    'C' + [xL, yPos, xL,yPos, xL + 5, yPos] +
+    'L' + [xR - 5, yPos] +
+    'C' + [xR, yPos, xR, yPos, xR, arrowPos[arrowPos.length - 1].y];
 
-  var pathline = 'M '+ xL + ' ' + arrowPos[0].y + 
-    ' L ' + xL + ' ' +  yPos + 
-    ' L ' + xR + ' ' +  yPos + 
-    ' L ' + xR + ' ' +  arrowPos[arrowPos.length - 1].y;
+  // var pathline = 'M '+ xL + ' ' + arrowPos[0].y + 
+  //   ' L ' + xL + ' ' +  yPos + 
+  //   ' L ' + xR + ' ' +  yPos + 
+  //   ' L ' + xR + ' ' +  arrowPos[arrowPos.length - 1].y;
 
   for (var p = 1; p < arrowPos.length - 1; p++) {
      pathline += 
@@ -1075,9 +1079,13 @@ function calculateStartRow(idx, rowNum, link, percentagePadding, xPositions, lin
 
 
   //can there be a start row with NO arrows??
-  var pathline = 'M '+ xL + ' ' + arrowPos[0].y + 
-    ' L ' + xL + ' ' +  yPos + 
-    ' L ' + xR + ' ' +  yPos;
+  var pathline = 'M' + [xL, arrowPos[0].y] +
+    'C' + [xL, yPos, xL,yPos, xL + 5, yPos] +
+    'L' + [xR, yPos];
+
+  // var pathline = 'M '+ xL + ' ' + arrowPos[0].y + 
+  //   ' L ' + xL + ' ' +  yPos + 
+  //   ' L ' + xR + ' ' +  yPos;
 
   for (var p = 1; p < arrowPos.length; p++) {
      pathline += 
@@ -1201,10 +1209,14 @@ function calculateEndRow(idx, rowNum, link, percentagePadding, xPositions, linkS
   console.log("in calculateEndRow, xL =  " + xL + ", xR = " + xR);
 
 
+  var pathline = 'M' + [xL, yPos] +
+    'L' + [xR - 5, yPos] +
+    'C' + [xR, yPos, xR, yPos, xR, arrowPos[arrowPos.length - 1].y];
+
 
-  var pathline = 'M ' + xL + ' ' + yPos + 
-    ' L ' + xR + ' ' +  yPos +
-    ' L ' + xR + ' ' +  arrowPos[arrowPos.length-1].y;
+  // var pathline = 'M ' + xL + ' ' + yPos + 
+  //   ' L ' + xR + ' ' +  yPos +
+  //   ' L ' + xR + ' ' +  arrowPos[arrowPos.length-1].y;
 
   console.log("PATHLINE = " + pathline);