start re-implementing graph (currently broken)

Author: hmsklee

css/style.css

@@ -61,7 +61,7 @@ header > button:hover {
 
 .modal {
   color:#222;
-  background:rgba(0,0,0,0.5);
+  background:rgba(0,0,0,0.3);
   width:100%;
   height:100%;
   top:0;
@@ -112,6 +112,7 @@ header > button:hover {
 }
 
 .modal .page {
+  position:relative;
   padding: 2em;
   padding-top: 0.5em;
   display:none;
@@ -121,6 +122,14 @@ header > button:hover {
 .modal .page.active {
   display:block;
 }
+.modal svg {
+  background:blue;
+  width:100%;
+  height:100%;
+  position:absolute;
+  top:0;
+  left:0;
+}
 
 #taxonomy > ul {
   list-style-type: none;

index.html

@@ -29,12 +29,14 @@
   <div>
     <header>
       <span class="tab active" data-id="taxonomy">Taxonomy</span>
-      <span class="tab" data-id="tree">Syntax Tree</span>
+      <span class="tab" data-id="tree">Tree View</span>
       <span class="tab" data-id="graph">Graph</span>
       <span class="tab" data-id="options">Options</span>
     </header>
     <div class="page active" id="taxonomy"></div>
-    <div class="page" id="tree"></div>
+    <div class="page" id="tree">
+      <svg>
+    </div>
     <div class="page" id="graph"></div>
     <div class="page" id="options">
       <p><input type="checkbox" checked> Syntax tree visible</p>
@@ -46,9 +48,11 @@
 <script src="libs/svg.js"></script>
 <script src="libs/svg.draggable.js"></script>
 <script src="libs/jscolor.min.js"></script>
+<script src="libs/d3.min.js"></script>
 
 <script src="js/ymljson.js"></script>
 <script src="js/parser.js"></script>
+<script src="js/treelayout.js"></script>
 <script src="js/main.js"></script>
 <script src="js/managers/tooltip.js"></script>
 <script src="js/managers/labelmanager.js"></script>

js/components/link.js

@@ -73,9 +73,11 @@ class Link {
       // apply click events to text
       this.svgTexts.forEach(text => {
         text.node.oncontextmenu = (e) => {
+          this.selectedLabel = text;
           e.preventDefault();
           svg.fire('link-label-right-click', { object: this, type: 'text', event: e });
         };
+        text.click((e) => svg.fire('link-label-edit', { object: this, text, event: e }));
       });
 
       this.line = this.svg.path()
@@ -447,6 +449,16 @@ class Link {
       return slots;
     }
 
+    listenForEdit() {
+      console.log('listening');
+      this.isEditing = true;
+
+    }
+    stopEditing() {
+      console.log('done');
+      this.isEditing = false;
+    }
+
     getEndpoints() {
       let minWord = null;
       let maxWord = null;

js/main.js

@@ -1,6 +1,6 @@
 const Main = (function() {
   // classes
-  let parser;
+  let parser, lm, rm;
 
   // main svg element
   let svg;
@@ -12,6 +12,7 @@ const Main = (function() {
 
   // other html elements
   let tooltip = {};
+  let tl = {};
 
   //--------------------------------
   // public functions
@@ -29,6 +30,7 @@ const Main = (function() {
     parser  = new Parser();
     rm      = new RowManager(svg);
     lm      = new LabelManager(svg);
+    tl      = new TreeLayout(document.querySelector('#tree > svg'));
 
     // load and render initial dataset by default
     changeDataset(2);
@@ -55,6 +57,11 @@ const Main = (function() {
       });
     });
 
+    svg.on('build-tree', function(e) {
+      setActiveTab('tree');
+      tl.graph(e.detail.object);
+    });
+
     // window event listeners
     // resize function
     window.onresize = function() {

js/managers/labelmanager.js

@@ -21,6 +21,7 @@ const LabelManager = (function() {
     constructor(svg) {
       // listeners for label handling
       svg.on('tag-edit', listenForEdit);
+      svg.on('link-label-edit', listenForEdit);
       this.stopEditing = stopEditing;
     }
   }

js/managers/tooltip.js

@@ -27,12 +27,12 @@ const Tooltip = (function() {
     let html = '';
     if (activeObject instanceof Word) {
       if (activeObject.tag) {
-        html += '<p id="menu--edit-tag">Edit tag</p><p id="menu--remove-tag">Remove tag</p><hr>';
+        html += '<p id="menu--edit-tag">Edit tag</p><p id="menu--remove-tag">Remove tag</p>';
       }
       else {
-        html += '<p id="menu--add-tag">Add tag</p><hr>';
+        html += '<p id="menu--add-tag">Add tag</p>';
       }
-      html += '<p id="menu--graph">Tree visualization</p>';
+      html += '<p id="menu--add-link">Add link</p><hr><p id="menu--tree">Tree visualization</p>';
     }
     else if (activeObject instanceof WordTag || activeObject instanceof WordCluster) {
       html += '<p id="menu--remove-tag">Remove</p>';
@@ -44,6 +44,7 @@ const Tooltip = (function() {
       else {
         html += '<p id="menu--remove-link">Remove link</p>';
       }
+      html += '<hr><p id="menu--tree">Tree visualization</p>';
     }
     if (html) {
       div.innerHTML = html;
@@ -91,10 +92,15 @@ const Tooltip = (function() {
           _svg.fire('tag-edit', { object: activeObject.tag });
           break;
         case 'menu--edit-link-label':
+          _svg.fire('link-label-edit', { object: activeObject, text: activeObject.selectedLabel });
+          activeObject.selectedLabel = null;
           break;
         case 'menu--remove-link':
           activeObject.remove();
-          _svg.fire('row-recalculate-slots', { object: activeObject, r1: activeObject.endpoints[0].row, r2: activeObject.endpoints[1].row });
+          _svg.fire('row-recalculate-slots', { object: activeObject });
+          break;
+        case 'menu--tree':
+          _svg.fire('build-tree', { object: activeObject });
           break;
         default: ;
       }