add morpheme example

hmsklee · hmsklee · commit 469eca47de7e · 2017-09-23T16:37:48.000-05:00
diff --git a/css/style.css b/css/style.css
@@ -179,15 +179,19 @@ header > button:hover {
 }
 
 body > #tree-svg {
-  box-shadow: 0 0 1em #aaa;
+  border-top: 1px solid #ccc;
+  /*box-shadow: 0 0 1em #aaa;*/
   background:hsl(5,5%,98%);
   position:fixed;
   bottom:0;
   font-size:14px;
-  height:250px;
+  height:200px;
+  width:100%;
   max-height:40vh;
 }
-body > #tree-svg.hidden {
+body { margin-bottom:200px; }
+body.tree-closed { margin-bottom: 0; }
+body.tree-closed > #tree-svg {
   display:none;
 }
 body > #tree-svg #tree-close {
@@ -215,6 +219,7 @@ body > #tree-svg #tree-close {
   font-weight: 400;
   color:#444;
   display:none;
+  z-index:100;
 }
 #tooltip.active {
   display:block;
diff --git a/data/data6.json b/data/data6.json
@@ -0,0 +1,99 @@
+{
+   "eventData": {
+      "comments": [],
+      "entities": [
+         [
+            "T1",
+            "BOUND",
+            [[
+               "0",
+               "2"
+            ]]
+         ],
+         [
+            "T2",
+            "FREE",
+            [[
+               "3",
+               "7"
+            ]]
+         ],
+         [
+            "T3",
+            "BOUND",
+            [[
+               "8",
+               "12"
+            ]]
+         ]
+      ],
+      "attributes": [],
+      "text": "un lock able",
+      "relations": [
+        [
+           "R1",
+           "unlock",
+           [
+              [
+                 "Controlled",
+                 "T1"
+              ],
+              [
+                 "Controller",
+                 "T2"
+              ]
+           ]
+        ],
+        [
+           "R2",
+           "unlockable",
+           [
+              [
+                 "Controlled",
+                 "R1"
+              ],
+              [
+                 "Controller",
+                 "T3"
+              ]
+           ]
+        ]
+      ],
+      "triggers": [],
+      "events": []
+   },
+   "syntaxData": {
+      "comments": [],
+      "entities": [
+         [
+            "T1",
+            "",
+            [[
+               "0",
+               "2"
+            ]]
+         ],
+         [
+            "T2",
+            "",
+            [[
+               "3",
+               "7"
+            ]]
+         ],
+         [
+            "T3",
+            "",
+            [[
+               "8",
+               "12"
+            ]]
+         ]
+      ],
+      "attributes": [],
+      "text": "un lock able",
+      "relations": [],
+      "triggers": [],
+      "events": []
+   }
+}
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@
     <option>paragraph</option>
     <option>passage1</option>
     <option>passage2</option>
+    <option>morpheme</option>
   </select>
   <button id="taxonomy-toggle">Taxonomy</button>
   <button id="options-toggle">Options</button>
diff --git a/js/components/link.js b/js/components/link.js
@@ -494,6 +494,7 @@ class Link {
     }
     text(str) {
       if (this.editingText) {
+        if (str === undefined) { return this.editingText; }
         this.editingText.text(str);
       }
     }
diff --git a/js/components/tag.js b/js/components/tag.js
@@ -48,6 +48,7 @@ class WordTag {
     }
   }
   text(val) {
+    if (val === undefined) { return this.svgText; }
     this.val = val;
     this.svgText.text(this.val);
     this.ww = this.svgText.length();
diff --git a/js/main.js b/js/main.js
@@ -39,14 +39,20 @@ const Main = (function() {
     tree    = new TreeLayout('#tree', svg);
 
     // load and render initial dataset by default
-    changeDataset(2);
+    changeDataset(6);
 
     // svg event listeners
     svg.on('row-resize', function(e) {
       lm.stopEditing();
       rm.resizeRow(e.detail.object.idx, e.detail.y);
     });
 
+    svg.on('label-updated', function(e) {
+      // TODO: so so incomplete
+      let color = tm.getColor(e.detail.label, e.detail.object);
+      e.detail.object.node.style.fill = color;
+    });
+
     svg.on('word-move-start', function() {
       if (!options.showLinksOnMove && options.showSyntax) {
         setSyntaxVisibility(false);
@@ -65,6 +71,11 @@ const Main = (function() {
       }
     });
 
+    svg.on('tag-remove', function(e) {
+      e.detail.object.remove();
+      tm.remove(e.detail.object);
+    });
+
     svg.on('row-recalculate-slots', function(e) {
       links.forEach(link => {
         link.resetSlotRecalculation();
@@ -76,7 +87,7 @@ const Main = (function() {
     });
 
     svg.on('build-tree', function(e) {
-      tree.svg.classed('hidden', false);
+      document.body.classList.remove('tree-closed');
       if (tree.isInModal) {
         setActiveTab('tree');
       }
@@ -300,6 +311,7 @@ const Main = (function() {
       w.setSyntaxId(token.id);
       return w;
     });
+    console.log('words',words);
     const clusters = [];
 
     [].concat(parser.data.entities, parser.data.triggers).forEach(el => {
@@ -324,6 +336,7 @@ const Main = (function() {
       let anchor;
       switch (argument.id.charAt(0)) {
         case 'E':
+        case 'R':
           anchor = links.find(link => link.eventId === argument.id);
           break;
         case 'T':
diff --git a/js/managers/labelmanager.js b/js/managers/labelmanager.js
@@ -1,4 +1,5 @@
 const LabelManager = (function() {
+  let _svg;
   let activeObject = null;
   let string = null;
   let originalString = null;
@@ -20,6 +21,7 @@ const LabelManager = (function() {
   class LabelManager {
     constructor(svg) {
       // listeners for label handling
+      _svg = svg;
       svg.on('tag-edit', listenForEdit);
       svg.on('link-label-edit', listenForEdit);
       this.stopEditing = stopEditing;
@@ -35,7 +37,10 @@ const LabelManager = (function() {
 
   function stopEditing() {
     if (activeObject && activeObject.isEditing) {
-      // if (!string) { updateString(originalString); }
+      let text = activeObject.text();
+      if (text && !(activeObject instanceof Link)) {
+        _svg.fire('label-updated', { object: text, label: text.text() });
+      }
       activeObject.stopEditing();
       activeObject = null;
       originalString = string = null;
diff --git a/js/managers/taxonomy.js b/js/managers/taxonomy.js
@@ -14,6 +14,7 @@ const Taxonomy = (function() {
     '#a6761d',
     '#7f7f7f'
   ];
+  let tagTypes = {};
 
   function updateColor(word, color) {
     if (word instanceof Word) {
@@ -29,28 +30,27 @@ const Taxonomy = (function() {
   class Taxonomy {
     constructor(id) {
       this.tree = {};
-      this.tagTypes = {};
       div = document.getElementById('taxonomy');
     }
 
     buildTagTypes(words) {
-      this.tagTypes = {};
+      tagTypes = {};
       words.forEach(word => {
         if (word.tag) {
-          if (this.tagTypes[word.tag.val]) {
-            this.tagTypes[word.tag.val].push(word);
+          if (tagTypes[word.tag.val]) {
+            tagTypes[word.tag.val].push(word);
           }
           else {
-            this.tagTypes[word.tag.val] = [word];
+            tagTypes[word.tag.val] = [word];
           }
         }
         if (word.clusters.length > 0) {
           word.clusters.forEach(cluster => {
-            if (this.tagTypes[cluster.val]) {
-              this.tagTypes[cluster.val].push(cluster);
+            if (tagTypes[cluster.val]) {
+              tagTypes[cluster.val].push(cluster);
             }
             else {
-              this.tagTypes[cluster.val] = [cluster];
+              tagTypes[cluster.val] = [cluster];
             }
           });
         }
@@ -96,7 +96,6 @@ const Taxonomy = (function() {
     }
 
     populateTaxonomy() {
-      let tagTypes = this.tagTypes;
       let keys = Object.keys(tagTypes);
 
       // populate taxonomy
@@ -204,6 +203,35 @@ const Taxonomy = (function() {
         tagTypes[tag].forEach(word => updateColor(word, colors[i]));
       });
     }
+
+    remove(object) {
+      // TODO: fix the fuck out of this
+      return;
+      let tag = object.val;
+      let entity = object.entity;
+      if (tagTypes[tag]) {
+        let i = tagTypes[tag].indexOf(entity);
+        if (i > -1) {
+          tagTypes[tag].splice(i, 1);
+          if (tagTypes[tag].length < 1) {
+            delete tagTypes[tag];
+          }
+        }
+      }
+    }
+
+    getColor(label, object) {
+      //FIXME: fix me the fuck up
+      return;
+      let keys = Object.keys(tagTypes);
+      if (tagTypes[label]) {
+        return colors[keys.indexOf(label)];
+      }
+      else {
+        tagTypes[label] = object;
+        return colors[keys.length] || 'black';
+      }
+    }
   }
   return Taxonomy;
 })();
diff --git a/js/managers/tooltip.js b/js/managers/tooltip.js
@@ -77,16 +77,12 @@ const Tooltip = (function() {
       switch (e.target.id) {
         // tag management events
         case 'menu--remove-tag':
-          if (activeObject instanceof Word && activeObject.tag) {
-            activeObject.tag.remove();
-          }
-          else {
-            activeObject.remove();
-          }
+          let tag1 = (activeObject instanceof Word && activeObject.tag) ? activeObject.tag : activeObject;
+          _svg.fire('tag-remove', { object: tag1 });
           break;
         case 'menu--add-tag':
-          let tag = activeObject.setTag('?');
-          _svg.fire('tag-edit', { object: tag });
+          let tag2 = activeObject.setTag('?');
+          _svg.fire('tag-edit', { object: tag2 });
           break;
         case 'menu--edit-tag':
           _svg.fire('tag-edit', { object: activeObject.tag });
diff --git a/js/treelayout.js b/js/treelayout.js

Original file line number	Diff line number	Diff line change
`@@ -494,6 +494,7 @@ class Link {`
`494`	`494`	`}`
`495`	`495`	`text(str) {`
`496`	`496`	`if (this.editingText) {`
	`497`	`+ if (str === undefined) { return this.editingText; }`
`497`	`498`	`this.editingText.text(str);`
`498`	`499`	`}`
`499`	`500`	`}`
Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,7 @@ class WordTag {`
`48`	`48`	`}`
`49`	`49`	`}`
`50`	`50`	`text(val) {`
	`51`	`+ if (val === undefined) { return this.svgText; }`
`51`	`52`	`this.val = val;`
`52`	`53`	`this.svgText.text(this.val);`
`53`	`54`	`this.ww = this.svgText.length();`