Merge pull request #105 from latin-language-toolkit/tree_settings

Configurable Tree layout
alpheios-project · May 29, 2014 · 989d31a · 989d31a
2 parents 94fc85d + 10afbcb
commit 989d31a
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 4 deletions.
diff --git a/app/js/arethusa.dep_tree/directives/dependency_tree.js b/app/js/arethusa.dep_tree/directives/dependency_tree.js
@@ -220,7 +220,29 @@ angular.module('arethusa.depTree').directive('dependencyTree', [
           render();
         }
         // Initialize the graph
-        var layout = dagreD3.layout().rankDir('BT').nodeSep(30);
+        scope.compactTree = function() {
+          scope.nodeSep = 30;
+          scope.edgeSep = 10;
+          scope.rankSep = 30;
+        };
+
+        scope.wideTree = function() {
+          scope.nodeSep = 80;
+          scope.edgeSep = 5;
+          scope.rankSep = 40;
+        };
+        scope.changeDir = function() {
+          scope.rankDir = scope.rankDir === "BT" ? "RL" : "BT";
+        };
+
+        scope.rankDir = 'BT';
+        scope.compactTree();
+        scope.layout = dagreD3.layout()
+          .rankDir(scope.rankDir)
+          .nodeSep(scope.nodeSep)
+          .edgeSep(scope.edgeSep)
+          .rankSep(scope.rankSep);
+
         var svg = d3.select(element[0]);
         svg.call(d3.behavior.zoom().on('zoom', function () {
           var ev = d3.event;
@@ -233,6 +255,23 @@ angular.module('arethusa.depTree').directive('dependencyTree', [
         }
         renderer.transition(transition);
 
+        // Prepend Tree settings panel
+        scope.settingOn = false;
+        element.wrap('<div></div>');
+        var wrapper = element.parent();
+        var panel = '\
+          <div ng-click="settingOn = !settingOn">*</div>\
+          <div ng-show="settingOn">\
+            <span title="rankSep" tree-setting="rankSep"></span>&nbsp;\
+            <span title="edgeSep" tree-setting="edgeSep"></span>&nbsp;\
+            <span title="nodeSep" tree-setting="nodeSep"></span>&nbsp;\
+            <span class="label radius tiny" ng-click="compactTree()">compact</span>&nbsp;\
+            <span class="label radius tiny" ng-click="wideTree()">wide</span>&nbsp;\
+            <span class="label radius tiny" ng-click="changeDir()">change direction</span>\
+         </div>\
+        ';
+        wrapper.prepend($compile(panel)(scope));
+
         function insertRootDirective() {
           node('0000').append(function() {
             this.textContent = '';
@@ -259,7 +298,7 @@ angular.module('arethusa.depTree').directive('dependencyTree', [
         }
         function render() {
           vis = svg.select('g');
-          renderer.layout(layout).run(g, vis);
+          renderer.layout(scope.layout).run(g, vis);
           // Customize the graph so that it holds our directives
           insertRootDirective();
           insertTokenDirectives();
@@ -308,6 +347,32 @@ angular.module('arethusa.depTree').directive('dependencyTree', [
             }
           }
         });
+
+        // Settings watches
+        scope.$watch('nodeSep', function(newVal, oldVal) {
+          if (newVal !== oldVal) {
+            scope.layout.nodeSep(newVal);
+            render();
+          }
+        });
+        scope.$watch('edgeSep', function(newVal, oldVal) {
+          if (newVal !== oldVal) {
+            scope.layout.edgeSep(newVal);
+            render();
+          }
+        });
+        scope.$watch('rankSep', function(newVal, oldVal) {
+          if (newVal !== oldVal) {
+            scope.layout.rankSep(newVal);
+            render();
+          }
+        });
+        scope.$watch('rankDir', function(newVal, oldVal) {
+          if (newVal !== oldVal) {
+            scope.layout.rankDir(newVal);
+            render();
+          }
+        });
       },
       template: '<g/>'
     };

diff --git a/app/js/arethusa.dep_tree/directives/tree_setting.js b/app/js/arethusa.dep_tree/directives/tree_setting.js
@@ -0,0 +1,21 @@
+"use strict";
+
+angular.module('arethusa.depTree').directive('treeSetting', function() {
+  return {
+    restrict: 'A',
+    scope: {
+      title: '@',
+      val: '=treeSetting'
+    },
+    link: function(scope, element, attrs) {
+      scope.increment = function() {
+        scope.val++;
+      };
+      scope.decrement = function() {
+        scope.val--;
+      };
+    },
+    templateUrl: 'templates/arethusa.dep_tree/tree_setting.html'
+  };
+
+});
diff --git a/app/templates/arethusa.dep_tree/tree_setting.html b/app/templates/arethusa.dep_tree/tree_setting.html
@@ -0,0 +1,6 @@
+<span>
+  <span class="note">{{ title }}</span>
+  <input style="display: inline; height: 1.2rem; width: 3rem" type="text" ng-model="val"/> 
+  <span ng-click="increment()">+</span>
+  <span ng-click="decrement()">-</span>
+</span>
diff --git a/app/templates/dep_tree.html b/app/templates/dep_tree.html
@@ -1,5 +1,5 @@
-<div class="small-12 columsn">
-  <div class="small-2 columns">
+<div class="small-12 columns">
+  <div class="small-2 columns note">
     {{ plugin.tokensWithoutHeadCount() }} of {{ state.totalTokens }} unused
   </div>
   <div class="small-8 columns"></div>