[turbolizer] Factor out some user actions into methods of GraphView.

tools/turbolizer/graph-view.js

 // Copyright 2015 the V8 project authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 "use strict";
 
 class GraphView extends View {
   constructor (d3, id, nodes, edges, broker) {
     super(id, broker);
     var graph = this;
@@ skipping 104 matching lines @@
 
     graph.drag = d3.behavior.drag()
       .origin(function(d){
         return {x: d.x, y: d.y};
       })
       .on("drag", function(args){
         graph.state.justDragged = true;
         graph.dragmove.call(graph, args);
       })
 
-    d3.select("#upload").on("click", function(){
-      document.getElementById("hidden-file-upload").click();
-    });
-
-    d3.select("#layout").on("click", function(){
-      graph.updateGraphVisibility();
-      graph.layoutGraph();
-      graph.updateGraphVisibility();
-      graph.viewWholeGraph();
-    });
-
-    d3.select("#show-all").on("click", function(){
-      graph.nodes.filter(function(n) { n.visible = true; })
-      graph.edges.filter(function(e) { e.visible = true; })
-      graph.updateGraphVisibility();
-      graph.viewWholeGraph();
-    });
-
-    d3.select("#hide-unselected").on("click", function() {
-      var unselected = graph.visibleNodes.filter(function(n) {
-        return !this.classList.contains("selected");
-      });
-      unselected.each(function(n) {
-        n.visible = false;
-      });
-      graph.updateGraphVisibility();
-    });
-
-    d3.select("#hide-selected").on("click", function() {
-      var selected = graph.visibleNodes.filter(function(n) {
-        return this.classList.contains("selected");
-      });
-      selected.each(function(n) {
-        n.visible = false;
-      });
-      graph.state.selection.clear();
-      graph.updateGraphVisibility();
-    });
-
-    d3.select("#zoom-selection").on("click", function() {
-      graph.viewSelection();
-    });
-
-    d3.select("#toggle-types").on("click", function() {
-      graph.toggleTypes();
-    });
-
-    d3.select("#search-input").on("keydown", function() {
-      if (d3.event.keyCode == 13) {
-        graph.state.selection.clear();
-        var reg = new RegExp(this.value);
-        var filterFunction = function(n) {
-          return (reg.exec(n.getDisplayLabel()) != null ||
-                  (graph.state.showTypes && reg.exec(n.getDisplayType())) ||
-                  reg.exec(n.opcode) != null);
-        };
-        if (d3.event.ctrlKey) {
-          graph.nodes.forEach(function(n, i) {
-            if (filterFunction(n)) {
-              n.visible = true;
-            }
-          });
-          graph.updateGraphVisibility();
-        }
-        var selected = graph.visibleNodes.each(function(n) {
-          if (filterFunction(n)) {
-            graph.state.selection.select(this, true);
-          }
-        });
-        graph.connectVisibleSelectedNodes();
-        graph.updateGraphVisibility();
-        this.blur();
-        graph.viewSelection();
-      }
-      d3.event.stopPropagation();
-    });
+    d3.select("#upload").on("click", partial(this.uploadAction, graph));
+    d3.select("#layout").on("click", partial(this.layoutAction, graph));
+    d3.select("#show-all").on("click", partial(this.showAllAction, graph));
+    d3.select("#hide-unselected").on("click", partial(this.hideUnselectedAction, graph));
+    d3.select("#hide-selected").on("click", partial(this.hideSelectedAction, graph));
+    d3.select("#zoom-selection").on("click", partial(this.zoomSelectionAction, graph));
+    d3.select("#toggle-types").on("click", partial(this.toggleTypesAction, graph));
+    d3.select("#search-input").on("keydown", partial(this.searchInputAction, graph));
 
     // listen for key events
     d3.select(window).on("keydown", function(e){
       graph.svgKeyDown.call(graph);
     })
       .on("keyup", function(){
         graph.svgKeyUp.call(graph);
       });
     svg.on("mousedown", function(d){graph.svgMouseDown.call(graph, d);});
     svg.on("mouseup", function(d){graph.svgMouseUp.call(graph, d);});
@@ skipping 310 matching lines @@
 
   selectAllNodes(inEdges, filter) {
     var graph = this;
     if (!d3.event.shiftKey) {
       graph.state.selection.clear();
     }
     graph.state.selection.select(graph.visibleNodes[0], true);
     graph.updateGraphVisibility();
   }
 
+  uploadAction(graph) {
+    document.getElementById("hidden-file-upload").click();
+  }
+
+  layoutAction(graph) {
+    graph.updateGraphVisibility();
+    graph.layoutGraph();
+    graph.updateGraphVisibility();
+    graph.viewWholeGraph();
+  }
+
+  showAllAction(graph) {
+    graph.nodes.filter(function(n) { n.visible = true; })
+    graph.edges.filter(function(e) { e.visible = true; })
+    graph.updateGraphVisibility();
+    graph.viewWholeGraph();
+  }
+
+  hideUnselectedAction(graph) {
+    var unselected = graph.visibleNodes.filter(function(n) {
+      return !this.classList.contains("selected");
+    });
+    unselected.each(function(n) {
+      n.visible = false;
+    });
+    graph.updateGraphVisibility();
+  }
+
+  hideSelectedAction(graph) {
+    var selected = graph.visibleNodes.filter(function(n) {
+      return this.classList.contains("selected");
+    });
+    selected.each(function(n) {
+      n.visible = false;
+    });
+    graph.state.selection.clear();
+    graph.updateGraphVisibility();
+  }
+
+  zoomSelectionAction(graph) {
+    graph.viewSelection();
+  }
+
+  toggleTypesAction(graph) {
+    graph.toggleTypes();
+  }
+
+  searchInputAction(graph) {
+    if (d3.event.keyCode == 13) {
+      graph.state.selection.clear();
+      var reg = new RegExp(this.value);
+      var filterFunction = function(n) {
+        return (reg.exec(n.getDisplayLabel()) != null ||
+                (graph.state.showTypes && reg.exec(n.getDisplayType())) ||
+                reg.exec(n.opcode) != null);
+      };
+      if (d3.event.ctrlKey) {
+        graph.nodes.forEach(function(n, i) {
+          if (filterFunction(n)) {
+            n.visible = true;
+          }
+        });
+        graph.updateGraphVisibility();
+      }
+      var selected = graph.visibleNodes.each(function(n) {
+        if (filterFunction(n)) {
+          graph.state.selection.select(this, true);
+        }
+      });
+      graph.connectVisibleSelectedNodes();
+      graph.updateGraphVisibility();
+      this.blur();
+      graph.viewSelection();
+    }
+    d3.event.stopPropagation();
+  }
+
   svgMouseDown() {
     this.state.graphMouseDown = true;
   }
 
   svgMouseUp() {
     var graph = this,
     state = graph.state;
     if (state.justScaleTransGraph) {
       // Dragged
       state.justScaleTransGraph = false;
@@ skipping 437 matching lines @@
   }
 
   viewWholeGraph() {
     var graph = this;
     var minScale = graph.minScale();
     var translation = [0, 0];
     translation = graph.getVisibleTranslation(translation, minScale);
     graph.translateClipped(translation, minScale);
   }
 }