Shortcut keys for viewport #116

website-ui/index.html

@@ -84,6 +84,7 @@
   <script src="js/app-result-report.js"></script>
   <script src="js/app-result-save.js"></script>
   <script src="js/app-result-selected-info.js"></script>
+  <script src="js/app-result-shortcuts.js"></script>
   <script src="js/app-result.js"></script>
   <script src="js/app-search.js"></script>
   <script src="js/app-stats.js"></script>

website-ui/js/app-result-shortcuts.js

@@ -0,0 +1,72 @@
+'use strict';
+
+app.factory('Result_shortcuts',
+[ 'util',
+function( util ){ return function( Result ){
+
+  var rfn = Result.prototype;
+
+  var shortcuts = [];
+
+  var on = function( combo, callback ){
+    shortcuts.push({
+      combo: combo,
+      callback: callback
+    });
+  };
+
+
+  // pan
+
+  let panAmount = 5;
+  let panMult = 4;
+
+  on('down', function(){ cy.panBy({ y: -panAmount * panMult }) });
+  on('up', function(){ cy.panBy({ y: panAmount * panMult }) });
+  on('left', function(){ cy.panBy({ x: panAmount * panMult }) });
+  on('right', function(){ cy.panBy({ x: -panAmount * panMult }) });
+  on('shift+down', function(){ cy.panBy({ y: -panAmount }) });
+  on('shift+up', function(){ cy.panBy({ y: panAmount }) });
+  on('shift+left', function(){ cy.panBy({ x: panAmount }) });
+  on('shift+right', function(){ cy.panBy({ x: -panAmount }) });
+
+
+  // zoom
+
+  let zoomAmount = 0.05;
+  let zoomMult = 4;
+
+  let zoomBy = mult => {
+    let z = cy.zoom();
+    let w = cy.width();
+    let h = cy.height();
+
+    cy.zoom({
+      level: z * mult,
+      renderedPosition: { x: w/2, y: h/2 }
+    });
+  };
+
+  on('=', function(){ zoomBy( (1 + zoomAmount * zoomMult) ) });
+  on('-', function(){ zoomBy( 1/(1 + zoomAmount * zoomMult) ) });
+  on('+', function(){ zoomBy( 1 + zoomAmount ) });
+  on('_', function(){ zoomBy( 1/(1 + zoomAmount) ) });
+
+
+  // layout
+
+  on('f', function(){ shortcuts.result.fitGraph(); });
+  on('j', function(){ shortcuts.result.circleLayout(); });
+  on('k', function(){ shortcuts.result.linearLayout(); });
+  on('l', function(){ shortcuts.result.forceLayout(); });
+
+  rfn.bindShortcutKeys = function(){
+    shortcuts.result = this;
+
+    shortcuts.forEach(function( s ){
+      Mousetrap.unbind( s.combo );
+      Mousetrap.bind( s.combo, s.callback );
+    });
+  };
+
+} } ]);

website-ui/js/app-result.js

@@ -1,10 +1,10 @@
 'use strict';
 
 app.factory('Result',
-[ '$$search', '$$user', 'cy', 'cyStylesheet', 'util', 'Result_genes', 'Result_networks', 'Result_layouts', 'Result_selectedinfo', 'Result_functions', 'Result_highlight', 'Result_report', 'Result_save',
-function( $$search, $$user, ngCy, cyStylesheet, util, Result_genes, Result_networks, Result_layouts, Result_selectedinfo, Result_functions, Result_highlight, Result_report, Result_save ){
+[ '$$search', '$$user', 'cy', 'cyStylesheet', 'util', 'Result_genes', 'Result_networks', 'Result_layouts', 'Result_selectedinfo', 'Result_functions', 'Result_highlight', 'Result_report', 'Result_save', 'Result_shortcuts',
+function( $$search, $$user, ngCy, cyStylesheet, util, Result_genes, Result_networks, Result_layouts, Result_selectedinfo, Result_functions, Result_highlight, Result_report, Result_save, Result_shortcuts ){
 
-  var rmods = [ Result_genes, Result_networks, Result_layouts, Result_selectedinfo, Result_functions, Result_highlight, Result_report, Result_save ];
+  var rmods = [ Result_genes, Result_networks, Result_layouts, Result_selectedinfo, Result_functions, Result_highlight, Result_report, Result_save, Result_shortcuts ];
 
   var Result = window.Result = function( opts ){
     if( !(this instanceof Result) ){
@@ -33,6 +33,8 @@ function( $$search, $$user, ngCy, cyStylesheet, util, Result_genes, Result_netwo
       store: opts.store || opts.store === undefined ? true : false,
       positions: opts.positions
     });
+
+    this.bindShortcutKeys();
   };
   var r = Result;
   var rfn = Result.prototype;