resizable bottom panel

Author: hmsklee

css/style.css

@@ -40,17 +40,28 @@ button {
 .node { cursor: pointer; }
 
 #graph {
-  cursor:move;
+  cursor:-webkit-grab;
+  cursor:grab;
   width:100%;
   height:220px;
   border-top: 1px solid #ccc;
   background:#fff;
   position:fixed;
   bottom:0;
   left:0;
-  overflow:hidden;
 }
 
+#graph:before {
+  cursor:ns-resize;
+  content:'';
+  width:100%;
+  height:7px;
+  margin-top:-3.5px;
+  position:absolute;
+  top:0;
+  left:0;
+  display:block;
+}
 
 /* svg classes */
 #drawing text, .link--labels text {

index.html

@@ -33,6 +33,7 @@
 <script src="js/enums.js"></script>
 <script src="js/config.js"></script>
 <script src="js/parser.js"></script>
+<script src="js/Panel.js"></script>
 <script src="js/GraphLayout.js"></script>
 <script src="js/style.js"></script>
 <script src="js/annotate.js"></script>
@@ -41,7 +42,6 @@
 <script src="js/utils.js"></script>
 
 <script type="text/javascript">
-
 /* a lot of these global vars should be wrapped eventually */
 var draw = SVG('drawing').size(Config.svgWidth, Config.svgHeight);
 var rowGroup = draw.group();
@@ -77,8 +77,10 @@
 changeSizeOfSVGPanel(window.innerWidth - 16, (rows[rows.length - 1].lineBottom.y() ) + 1);
 
 window.onload = function() {
-  var Panel = new GraphLayout();
-  var parser = new Parser();
+
+  const panel = new Panel('graph', 'drawing');
+  const graph = new GraphLayout(panel.el);
+  const parser = new Parser();
 
   var prevWidth = Config.svgWidth;
   function svgResize() {
@@ -95,22 +97,22 @@
   }
 
   draw.on('wordSelected', function() {
-    Panel.graph(getSelectedObjects());
+    graph.graph(getSelectedObjects());
   });
 
   document.querySelector('#graph>button').onclick = function() {
     let words = getSelectedObjects();
     if (words.length > 0) {
-      Panel.graph(words);
+      graph.graph(words);
     }
     else {
-      Panel.clear();
+      graph.clear();
     }
   };
 
   function changeDataset(index = 1) {
     parser.readJson(`./data/data${index}.json`, function() {
-      Panel.clear();
+      graph.clear();
 
       // construct word objects and tags from tokens, entities, and triggers
       const words = parser.tokens.map((token, i) => new Word(token, i));
@@ -224,13 +226,12 @@
     // linkObjs.forEach(link => link.style = styles[link.style]);
     drawWords(wordObjs);
     drawLinks(linkObjs);
-    if (Panel.isOpen) { Panel.close(); }
     changeSizeOfSVGPanel(window.innerWidth - 16, (rows[rows.length - 1].lineBottom.y() ) + 1);
   }
 
   function resize() {
     svgResize();
-    Panel.resize();
+    graph.resize();
   }
 
   document.getElementById('dataset').onchange = function() {

js/GraphLayout.js

@@ -1,19 +1,13 @@
 class GraphLayout {
-    constructor() {
-        this.isOpen = false;
-
-        // references to dom elements
-        this.drawing = document.getElementById('drawing');
-        this.div = document.getElementById('graph') || 
-                   document.createElement('div');
-        this.div.id = 'graph';
-        document.body.appendChild(this.div);
+    constructor(el) {
+        // container element
+        this.div = el;
 
         // dimensions & properties
         this.bounds = this.div.getBoundingClientRect();
 
         // d3 dom references
-        this.svg = d3.select('#graph').append('svg')
+        this.svg = d3.select(this.div).append('svg')
             .attr('width', this.bounds.width)
             .attr('height', this.bounds.height);
         this.g = this.svg.append('g');
@@ -32,7 +26,7 @@ class GraphLayout {
             .call(d3.drag()
                 .on('drag', () => {
                     this.dx += d3.event.dx;
-                    this.dy += d3.event.dy;
+                    // this.dy += d3.event.dy;
                     this.adjustMargins(this.dx, this.dy);
                 })
             )

js/Panel.js

@@ -0,0 +1,53 @@
+const Panel = (function() {
+
+  class Panel {
+    constructor(el, el2) {
+
+      const container = this.el = document.getElementById(el) || document.body;
+      const above = document.getElementById(el2);
+
+      let height = parseInt(window.getComputedStyle(container).height);
+      container.style.height = height;
+
+      let y;
+      let isResizingPanel = false;
+
+      // add listeners
+      document.addEventListener('mousemove', drag);
+      document.addEventListener('mouseup', dragend);
+      document.addEventListener('mouseleave', dragend);
+      container.addEventListener('mousedown', function(e) {
+        if (e.offsetY < 3) {
+          isResizingPanel = true;
+          y = e.y;
+        }
+      });
+
+      function drag(e) {
+        if (isResizingPanel) {
+          const dy = e.y - y;
+          y = e.y;
+
+          // clamp
+          let max = window.innerHeight - 30;
+          let min = 30;
+
+          height = Math.min(Math.max(min, height - dy), max);
+          container.style.height = height;
+
+          if (above) {
+            above.style.marginBottom = height + 10;
+          }
+        }
+      }
+
+      function dragend(e) {
+        isResizingPanel = false;
+      }
+
+    }
+  }
+
+  return Panel;
+
+})();