debounce window resize and fix row height

hmsklee · hmsklee · commit 0add4f7591d2 · 2017-08-28T15:09:14.000-05:00
diff --git a/css/style.css b/css/style.css
@@ -8,6 +8,10 @@ body {
   overflow-y: scroll;
 }
 
+svg, svg text {
+  font-family: Nunito, futura, helvetica, arial, sans-serif;
+  font-weight:600;  
+}
 svg text {
   cursor: default;
   -webkit-user-select: none;
@@ -130,6 +134,14 @@ header > button:hover {
   left:0;
 }
 
+#toggle-taxonomy {
+  font-size:0.9em;
+  text-decoration:underline;
+  cursor:pointer;
+  color:steelblue;
+  float:right;
+}
+
 #taxonomy > ul {
   list-style-type: none;
   padding:0;
@@ -205,7 +217,6 @@ header > button:hover {
   position:relative;
 }
 #main text {
-  font-family: BrownPro, Brown, futura, helvetica, arial, sans-serif;
   text-anchor: middle;
 }
 .row-drag {
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:400,600" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">
 </head>
 
diff --git a/js/components/link.js b/js/components/link.js
@@ -450,14 +450,52 @@ class Link {
       return slots;
     }
 
-    listenForEdit() {
-      console.log('listening');
+    listenForEdit(e) {
+      console.log('listening', e.detail.text, e.detail.text.text());
       this.isEditing = true;
 
+      let bbox = e.detail.text.bbox();
+      this.svg.addClass('editing');
+      this.editingRect = this.svg.rect(bbox.width + 8, bbox.height + 4)
+        .x(bbox.x - 4)
+        .y(bbox.y - 2)
+        .rx(2)
+        .ry(2)
+        .back();
+
+      // listenForEdit() {
+      //   this.isEditing = true;
+      //   let bbox = this.svgText.bbox();
+      //
+      //   this.svg.addClass('editing');
+      //   this.editingRect = this.svg.rect(bbox.width + 8, bbox.height + 4)
+      //     .x(bbox.x - 4)
+      //     .y(bbox.y - 2)
+      //     .rx(2)
+      //     .ry(2)
+      //     .back();
+      // }
+      // stopEditing() {
+      //   this.isEditing = false;
+      //   this.svg.removeClass('editing');
+      //   this.editingRect.remove();
+      //   this.editingRect = null;
+      //   this.val = this.val.trim();
+      //   if (!this.val) {
+      //     this.remove();
+      //   }
+      //   else {
+      //     this.entity.calculateBox();
+      //   }
+      // }
+
     }
     stopEditing() {
       console.log('done');
       this.isEditing = false;
+      this.svg.removeClass('editing');
+      this.editingRect.remove();
+      this.editingRect = null;
     }
 
     getEndpoints() {
diff --git a/js/main.js b/js/main.js
@@ -81,13 +81,15 @@ const Main = (function() {
 
     // window event listeners
     // resize function
-    window.onresize = function() {
+    function resizeWindow() {
       body = document.body.getBoundingClientRect();
       links.forEach(l => l.hide());
       svg.width(body.width);
       rm.width(body.width);
-      links.forEach(l => l.show());
+      setSyntaxVisibility();
     }
+    window.onresize = debounce(resizeWindow, 200);
+
     document.getElementById('dataset').onchange = function(e) {
       if (this.selectedIndex > 0) {
         changeDataset(this.selectedIndex);
@@ -229,6 +231,29 @@ const Main = (function() {
   // private functions
   //--------------------------------
 
+  // from https://davidwalsh.name/javascript-debounce-function,
+  // as taken from underscore
+
+  // Returns a function, that, as long as it continues to be invoked, will not
+  // be triggered. The function will be called after it stops being called for
+  // N milliseconds. If `immediate` is passed, trigger the function on the
+  // leading edge, instead of the trailing.
+  function debounce(func, wait, immediate) {
+  	var timeout;
+  	return function() {
+  		var context = this, args = arguments;
+  		var later = function() {
+  			timeout = null;
+  			if (!immediate) func.apply(context, args);
+  		};
+  		var callNow = immediate && !timeout;
+  		clearTimeout(timeout);
+  		timeout = setTimeout(later, wait);
+  		if (callNow) func.apply(context, args);
+  	};
+  };
+
+
   /** options to set visibility of syntax tree
    */
   function setSyntaxVisibility(bool) {
diff --git a/js/managers/labelmanager.js b/js/managers/labelmanager.js
@@ -28,7 +28,7 @@ const LabelManager = (function() {
 
   function listenForEdit(e) {
     activeObject = e.detail.object;
-    activeObject.listenForEdit();
+    activeObject.listenForEdit(e);
     originalString = e.detail.object.val;
     string = null;
   };
diff --git a/js/managers/taxonomy.js b/js/managers/taxonomy.js
@@ -100,7 +100,8 @@ const Taxonomy = (function() {
       let keys = Object.keys(tagTypes);
 
       // populate taxonomy
-      div.innerHTML = '';
+      div.innerHTML = '<span id="toggle-taxonomy">Filter unused labels</span>';
+
       let ul = document.createElement('ul');
       div.appendChild(ul);
 
@@ -188,6 +189,17 @@ const Taxonomy = (function() {
       this.tree.hierarchy.forEach(el => createLi(el, ul));
       jscolor.installByClassName('jscolor');
 
+      document.getElementById('toggle-taxonomy').onclick = function() {
+          if (ul.className === 'filtered') {
+            ul.className = '';
+            this.innerHTML = 'Show all labels';
+          }
+          else {
+            ul.className = 'filtered';
+            this.innerHTML = 'Filter unused labels';
+          }
+      }
+
       keys.forEach((tag, i) => {
         tagTypes[tag].forEach(word => updateColor(word, colors[i]));
       });
