refactor -- add editable tags

Author: hmsklee

css/style2.css

@@ -18,6 +18,7 @@ svg text {
 
 #header {
   position:fixed;
+  z-index:100;
   background:black;
   width:100%;
   height:40px;
@@ -89,19 +90,20 @@ svg text {
   cursor: pointer;
 }
 
-.word .word-cluster,
+.word-cluster text,
 .word .word-tag {
   font-size: 12px;
   cursor: text;
 }
 
-.word .word-cluster {
+.word-cluster text {
   fill:#a94442;
 }
 .word .word-tag {
   fill:#333;
 }
-.editing .word-tag {
+.editing .word-tag,
+.editing text {
   fill: #fff;
 }
 .editing rect {

js2/main.js

@@ -32,7 +32,7 @@ const Main = (function() {
     lm      = new LabelManager(svg);
 
     // load and render initial dataset by default
-    changeDataset();
+    changeDataset(4);
 
     // svg event listeners
     svg.on('row-resize', function(e) {

js2/managers/labelmanager.js

@@ -7,6 +7,7 @@ const LabelManager = (function() {
   // special keys
   const Key = {
     delete: 8,
+    tab: 9,
     enter: 13,
     escape: 27,
     left: 37,
@@ -33,7 +34,7 @@ const LabelManager = (function() {
 
   function stopEditing() {
     if (activeObject && activeObject.isEditing) {
-      if (!string) { updateString(originalString); }
+      // if (!string) { updateString(originalString); }
       activeObject.stopEditing();
       activeObject = null;
       originalString = string = null;
@@ -53,6 +54,8 @@ const LabelManager = (function() {
                 if (string === null) { string = originalString; }
                 updateString(string.slice(0, -1));
               break;
+            case Key.tab:
+              break;
             case Key.enter:
                 stopEditing();
               break;
@@ -72,15 +75,19 @@ const LabelManager = (function() {
     }
   })
   document.addEventListener('keypress', function(e) {
+    // console.log(String.fromCharCode(e.which), e.which);
     if (activeObject && activeObject.isEditing) {
-      if (string === null) { string = ''; }
-      updateString(string + String.fromCharCode(e.which));
+      if (e.which === 32) {
+        e.preventDefault();
+      }
+      if (!e.ctrlKey && !e.metaKey && !e.altKey) {
+        if (string === null) { string = ''; }
+        updateString(string + String.fromCharCode(e.which));
+      }
     }
   });
 
-  document.addEventListener('mousedown', function(e) {
-    stopEditing();
-  });
+  document.addEventListener('mousedown', stopEditing);
 
   return LabelManager;
 })();

js2/managers/rowmanager.js

@@ -46,6 +46,7 @@ const RowManager = (function() {
 
     addWordToRow(word, row, i, ignorePosition) {
       if (isNaN(i)) { i = row.words.length; }
+
       let overflow = row.addWord(word, i, ignorePosition);
       while (overflow < row.words.length) {
         this.moveWordDownARow(row.idx);
@@ -153,7 +154,9 @@ const RowManager = (function() {
 
     moveWordUpARow(index) {
       if (!_rows[index - 1]) { return; }
-      this.addWordToRow(_rows[index].removeFirstWord(), _rows[index - 1], undefined, true);
+      let removedWord = _rows[index].removeFirstWord();
+      this.addWordToRow(removedWord, _rows[index - 1], undefined, true);
+      removedWord.redrawClusters();
     }
 
     moveWordDownARow(index) {

js2/row.js

@@ -134,5 +134,5 @@ class Row {
   }
 
   get ry2() { return this.ry + this.rh; }
-  get minHeight() { return 50; }
+  get minHeight() { return Math.max(30, this.wordGroup.bbox().height); }
 }

js2/tooltip.js

@@ -1,5 +1,6 @@
 const Tooltip = (function() {
   let div = {};
+  let _svg = {};
   let activeObject = null;
   let yOffset = 0;
 
@@ -9,6 +10,8 @@ const Tooltip = (function() {
       yOffset = svg.node.getBoundingClientRect().top;
       this.clear = clear;
 
+      _svg = svg;
+
       // listeners to open tooltip
       svg.on('tag-right-click', openTooltip);
       svg.on('word-right-click', openTooltip);
@@ -22,7 +25,7 @@ const Tooltip = (function() {
     let html = '';
     if (activeObject instanceof Word) {
       if (activeObject.tag) {
-        html += '<p id="menu--edit-tag">Edit tag</p><hr>';
+        html += '<p id="menu--edit-tag">Edit tag</p><p id="menu--remove-tag">Remove tag</p><hr>';
       }
       else {
         html += '<p id="menu--add-tag">Add tag</p><hr>';
@@ -63,11 +66,19 @@ const Tooltip = (function() {
       switch (e.target.id) {
         // tag management events
         case 'menu--remove-tag':
-          activeObject.remove();
+          if (activeObject instanceof Word && activeObject.tag) {
+            activeObject.tag.remove();
+          }
+          else {
+            activeObject.remove();
+          }
           break;
         case 'menu--add-tag':
+          let tag = activeObject.setTag('?');
+          _svg.fire('tag-edit', { object: tag });
           break;
         case 'menu--edit-tag':
+          _svg.fire('tag-edit', { object: activeObject.tag });
           break;
         default: ;
       }

js2/word.js

@@ -31,6 +31,7 @@ class Word {
       else {
         this.tag = tag;
       }
+      return this.tag;
     }
     init(svg) {
       this.mainSVG = svg;
@@ -47,7 +48,7 @@ class Word {
 
       // draw cluster info
       this.clusters.forEach((cluster) => {
-        cluster.draw(svg);
+        cluster.init(this);
       });
 
       // translate over by half (since the text is centered)
@@ -82,9 +83,18 @@ class Word {
       }
     }
 
+    redrawClusters() {
+      this.clusters.forEach(cluster => {
+        if (cluster.endpoints.indexOf(this) > -1) {
+          cluster.draw();
+        }
+      });
+    }
+
     move(x) {
       this.x = x;
       this.svg.transform({x: this.boxWidth / 2 + this.x});
+      this.redrawClusters();
     }
 
     dx(x) {