Merge pull request #10 from CreativeCodingLab/multi-tree

Multi tree

Author: hmsklee

css/style.css

@@ -26,7 +26,7 @@ svg text {
 
 #drawing {
   margin-top:30px;
-  margin-bottom: 230px;
+  margin-bottom: 210px;
 }
 
 button {
@@ -38,12 +38,19 @@ button {
 }
 
 .node { cursor: pointer; }
+.link, .link--dashed {
+  fill: none;
+  stroke: #999;
+}
+.link--dashed {
+  stroke-dasharray: 2,2;
+}
 
 #graph {
   cursor:-webkit-grab;
   cursor:grab;
   width:100%;
-  height:220px;
+  height:200px;
   border-top: 1px solid #ccc;
   background:#fff;
   position:fixed;
@@ -77,15 +84,17 @@ button {
 
 .word--underneath {
   fill:white;
+  cursor:-webkit-grab;
+  cursor:grab;
 }
 
 .selected .word--underneath, .link--label.selected {
-  fill:white;
-  stroke:teal;
+  fill:#fff6f6;
+  stroke:#c37;
 }
 .hovered .word--underneath, .link--label.hovered {
   fill:white;
-  stroke:cyan;
+  stroke:#f7c;
 }
 
 .word--handle {

index.html

@@ -20,7 +20,6 @@
 <div id="drawing">
 </div>
 <div id="graph">
-  <button>(Reset)</button>
 </div>
 
 
@@ -36,6 +35,9 @@
 <script src="js/Panel.js"></script>
 <script src="js/GraphLayout.js"></script>
 <script src="js/style.js"></script>
+<script src="js/word.js"></script>
+<script src="js/link.js"></script>
+<script src="js/row.js"></script>
 <script src="js/annotate.js"></script>
 <script src="js/render.js"></script>
 <script src="js/interact.js"></script>
@@ -60,7 +62,6 @@
 
 var rowOffsetX = 0;
 var rowOffsetWord = null;
-var prevX = -1;
 
 var rows = []; //list of Row object, each of those has a list of Word objects
 
@@ -70,16 +71,17 @@
 //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');
   const graph = new GraphLayout(panel.el);
+  panel.onresize = graph.resize.bind(graph);
   const parser = new Parser();
 
   var prevWidth = Config.svgWidth;
@@ -100,16 +102,6 @@
     graph.graph(getSelectedObjects());
   });
 
-  document.querySelector('#graph>button').onclick = function() {
-    let words = getSelectedObjects();
-    if (words.length > 0) {
-      graph.graph(words);
-    }
-    else {
-      graph.clear();
-    }
-  };
-  
   function changeDataset(index = 1) {
     parser.readJson(`./data/data${index}.json`, function() {
       graph.clear();
@@ -217,13 +209,11 @@
     isDragging = false;
     rowOffsetX = 0;
     rowOffsetWord = null;
-    prevX = -1;
     dragElem = null;
 
     rows = [];
     wordObjs = words || createTestWords(5, 6, 10);
     linkObjs = links || createTestMultiLinks(1);
-    // linkObjs.forEach(link => link.style = styles[link.style]);
     drawWords(wordObjs);
     drawLinks(linkObjs);
     changeSizeOfSVGPanel(window.innerWidth - 16, (rows[rows.length - 1].lineBottom.y() ) + 1);