Add "fit to selected" control (close #47)

fedarko · Jan 12, 2017 · 193e50e · 193e50e
1 parent cc9f64a
commit 193e50e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/viewer/viewer.html b/viewer/viewer.html
@@ -58,6 +58,8 @@
                     "ui-icon-search"}, disabled: true});
                 $("#fitButton").button({icons: {primary:
                     "ui-icon-arrow-4-diag"}, disabled: true});
+                $("#fitSelectedButton").button({icons: {primary:
+                    "ui-icon-arrow-4-diag"}, disabled: true});
                 $("#collapseButton").button({icons: {primary:
                     "ui-icon-minus"}, disabled: true});
                 $("#fileselectButton").button({icons: {primary:
@@ -153,7 +155,9 @@ <h2>Graph View Controls</h2>
                     <option value="270">&#8592;</option>
                 </select>
 
-                <button type='button' onclick='fitGraph()' id="fitButton">Fit Graph</button>
+                <button type='button' onclick='fitGraph(false)' id="fitButton">Fit Graph</button>
+                <button type='button' onclick='fitGraph(true)'
+                    id="fitSelectedButton">Fit to Selected</button>
 
 
                 <button type='button' id='exportButton'

diff --git a/viewer/xdot2cy.js b/viewer/xdot2cy.js
@@ -514,6 +514,7 @@ function loadgraphfile() {
         $("#selectedInfoButton").button("disable");
         $("#searchButton").button("disable");
         $("#fitButton").button("disable");
+        $("#fitSelectedButton").button("disable");
         $("#collapseButton").button("disable");
         $("#exportButton").button("disable");
         fr.onload = function(e) {
@@ -807,6 +808,7 @@ function finishDrawComponent(cmpRank, componentNodeCount, componentEdgeCount,
     fixBadEdges();
     $("#searchButton").button("enable");
     $("#fitButton").button("enable");
+    $("#fitSelectedButton").button("enable");
     $("#exportButton").button("enable");
     if (clustersInComponent) {
         $("#collapseButton").button("enable");
@@ -850,6 +852,7 @@ function loadajaxDB() {
     $("#selectedInfoButton").button("disable");
     $("#searchButton").button("disable");
     $("#fitButton").button("disable");
+    $("#fitSelectedButton").button("disable");
     $("#collapseButton").button("disable");
     var filename = $("input[name=fs]:checked").attr('id');
     // jQuery doesn't support arraybuffer responses so we have to manually
@@ -1075,15 +1078,20 @@ function scaleDialog(dialogID) {
     }
 }
 
-/* Fits the graph to all its nodes. This should be useful if the user
- * somehow gets lost while navigating the graph (particularly for really
- * large graphs).
+/* Fits the graph to all its elements if toSelected is false, and to only
+ * selected elements if toSelected is true.
  */
-function fitGraph() {
+function fitGraph(toSelected) {
     $("#progressbar").progressbar("value", false);
     window.setTimeout(
         function() {
-            cy.fit();
+            if (toSelected) {
+                // Right now, we don't throw any sort of error here if
+                // SELECTED_ELES is empty. We could, though?
+                cy.fit(SELECTED_ELES);
+            } else {
+                cy.fit();
+            }
             $("#progressbar").progressbar("value", 100);
         }, 20
     );