Added capture to global keyboard shortcuts

src/App.vue

@@ -12,6 +12,19 @@
 // Import components
 import panelLeft from "./components/panelLeft.vue";
 
+// Key Codes
+const keyCodes = {
+  pgup: 33,
+  pgdn: 34,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  enter: 13,
+  esc: 27,
+  shift: 16
+};
+
 // Export main app
 export default {
   name: "App",
@@ -22,6 +35,7 @@ export default {
 
   data: function() {
     return {
+      keysDown: {},
       systemDark: undefined,
       themeObserver: undefined
     };
@@ -76,6 +90,10 @@ export default {
 
   created: function() {
     window.addEventListener("beforeunload", this.handleExit);
+    // Key events
+    window.addEventListener("keydown", this.keyDownMonitor);
+    window.addEventListener("keyup", this.keyUpMonitor);
+    window.addEventListener("wheel", this.wheelMonitor);
   },
 
   beforeDestroy: function() {
@@ -83,12 +101,102 @@ export default {
     if (this.themeObserver) {
       this.themeObserver.disconnect();
     }
+    // Remove key listeners
+    window.removeEventListener("keydown", this.keyDownMonitor);
+    window.removeEventListener("keyup", this.keyUpMonitor);
+    window.removeEventListener("wheel", this.wheelMonitor);
   },
 
   methods: {
     handleExit: function() {
       console.log("Triggered beforeunload");
       this.$root.$emit("globalTogglePreview", false);
+    },
+
+    // Handle global mouse wheel events to be associated with navigation
+    wheelMonitor: function(event) {
+      // Only capture scroll if the event target's parent contains the "scrollTarget" class
+      if (
+        event.target.parentNode.classList.contains("scrollTarget") ||
+        event.target.classList.contains("scrollTarget")
+      ) {
+        var z_rel = event.deltaY / 100;
+        // Emit a signal to move, acted on by panelNavigate.vue
+        this.$root.$emit("globalMoveStepEvent", 0, 0, z_rel, false);
+      }
+    },
+
+    // Handle global key press events to be associated with navigation
+    keyDownMonitor: function(event) {
+      this.keysDown[event.keyCode] = true; //Add key to array
+
+      // Convert keyCode dict into a list of key codes
+      var keyCodeList = Object.keys(keyCodes).map(function(key) {
+        return keyCodes[key];
+      });
+
+      if (
+        // If not inside an element we want to ignore
+        !(event.target instanceof HTMLInputElement) &&
+        !event.target.classList.contains("lightbox-link") &&
+        // If it's a recognised key
+        keyCodeList.includes(event.keyCode)
+      ) {
+        this.navigateKeyHandler(keyCodes);
+        this.captureKeyHandler(keyCodes);
+      }
+    },
+
+    keyUpMonitor: function(event) {
+      delete this.keysDown[event.keyCode]; //Remove key from array
+    },
+
+    navigateKeyHandler: function(keyCodes) {
+      const moveKeys = [
+        keyCodes.left,
+        keyCodes.right,
+        keyCodes.up,
+        keyCodes.down,
+        keyCodes.pgup,
+        keyCodes.pgdn
+      ];
+
+      if (
+        moveKeys.some(r => Object.keys(this.keysDown).includes(r.toString()))
+      ) {
+        // Calculate movement array
+        var x_rel = 0;
+        var y_rel = 0;
+        var z_rel = 0;
+        if (keyCodes.left in this.keysDown) {
+          x_rel = x_rel + 1;
+        }
+        if (keyCodes.right in this.keysDown) {
+          x_rel = x_rel - 1;
+        }
+        if (keyCodes.up in this.keysDown) {
+          y_rel = y_rel + 1;
+        }
+        if (keyCodes.down in this.keysDown) {
+          y_rel = y_rel - 1;
+        }
+        if (keyCodes.pgup in this.keysDown) {
+          z_rel = z_rel - 1;
+        }
+        if (keyCodes.pgdn in this.keysDown) {
+          z_rel = z_rel + 1;
+        }
+        // Make a position request
+        // Emit a signal to move, acted on by panelNavigate.vue
+        this.$root.$emit("globalMoveStepEvent", x_rel, y_rel, z_rel);
+      }
+    },
+
+    captureKeyHandler: function(keyCodes) {
+      if (keyCodes.shift in this.keysDown && keyCodes.enter in this.keysDown) {
+        console.log("Capturing");
+        this.$root.$emit("globalCaptureEvent");
+      }
     }
   }
 };
@@ -132,7 +240,7 @@ html {
   width: 300px;
   height: 100%;
   padding: 0;
-  background-color: rgba(180, 180, 180, 0.055);
+  background-color: rgba(180, 180, 180, 0.03);
   border-width: 0 1px 0 0;
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25);

src/components/controlComponents/paneCapture.vue

@@ -382,6 +382,10 @@ export default {
   mounted() {
     this.updateScanUri();
     this.updateScanStepSize();
+    // A global signal listener to perform a capture action
+    this.$root.$on("globalCaptureEvent", () => {
+      this.handleCapture();
+    });
   },
 
   methods: {

src/components/controlComponents/paneNavigate.vue

@@ -156,18 +156,6 @@
 import axios from "axios";
 import taskSubmitter from "../genericComponents/taskSubmitter";
 
-// Key Codes
-const keyCodes = {
-  pgup: 33,
-  pgdn: 34,
-  left: 37,
-  up: 38,
-  right: 39,
-  down: 40,
-  enter: 13,
-  esc: 27
-};
-
 // Export main app
 export default {
   name: "PaneNavigate",
@@ -178,7 +166,6 @@ export default {
 
   data: function() {
     return {
-      keysDown: {},
       stepXy: 200,
       stepZz: 50,
       setPosition: null,
@@ -204,17 +191,19 @@ export default {
     }
   },
 
-  created: function() {
-    window.addEventListener("keydown", this.keyDownMonitor);
-    window.addEventListener("keyup", this.keyUpMonitor);
-    window.addEventListener("wheel", this.wheelMonitor);
-  },
-
   mounted() {
     // A global signal listener to perform a move action
     this.$root.$on("globalMoveEvent", (x, y, z, absolute) => {
       this.moveRequest(x, y, z, absolute);
     });
+    this.$root.$on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
+      this.moveRequest(
+        x_steps * this.stepXy,
+        y_steps * this.stepXy,
+        z_steps * this.stepZz,
+        false
+      );
+    });
     // Update the current position in text boxes
     this.updatePosition();
     // Look for autofocus plugin
@@ -226,72 +215,7 @@ export default {
     this.$root.$off("globalMoveEvent");
   },
 
-  destroyed: function() {
-    window.removeEventListener("keydown", this.keyDownMonitor);
-    window.removeEventListener("keyup", this.keyUpMonitor);
-    window.removeEventListener("wheel", this.wheelMonitor);
-  },
-
   methods: {
-    // Handle global mouse wheel events to be associated with navigation
-    wheelMonitor: function(event) {
-      // Only capture scroll if the event target's parent contains the "scrollTarget" class
-      if (
-        event.target.parentNode.classList.contains("scrollTarget") ||
-        event.target.classList.contains("scrollTarget")
-      ) {
-        var z_rel = (event.deltaY / 100) * this.stepZz;
-        this.moveRequest(0, 0, z_rel, false);
-      }
-    },
-
-    // Handle global key press events to be associated with navigation
-    keyDownMonitor: function(event) {
-      this.keysDown[event.keyCode] = true; //Add key to array
-
-      // Convert keyCode dict into a list of key codes
-      var keyCodeList = Object.keys(keyCodes).map(function(key) {
-        return keyCodes[key];
-      });
-
-      if (
-        !(event.target instanceof HTMLInputElement) &&
-        !event.target.classList.contains("lightbox-link") &&
-        keyCodeList.includes(event.keyCode)
-      ) {
-        //console.log(this.keysDown)
-        // Calculate movement array
-        var x_rel = 0;
-        var y_rel = 0;
-        var z_rel = 0;
-        if (keyCodes.left in this.keysDown) {
-          x_rel = x_rel + this.stepXy;
-        }
-        if (keyCodes.right in this.keysDown) {
-          x_rel = x_rel - this.stepXy;
-        }
-        if (keyCodes.up in this.keysDown) {
-          y_rel = y_rel + this.stepXy;
-        }
-        if (keyCodes.down in this.keysDown) {
-          y_rel = y_rel - this.stepXy;
-        }
-        if (keyCodes.pgup in this.keysDown) {
-          z_rel = z_rel - this.stepZz;
-        }
-        if (keyCodes.pgdn in this.keysDown) {
-          z_rel = z_rel + this.stepZz;
-        }
-
-        // Make a position request
-        this.moveRequest(x_rel, y_rel, z_rel, false);
-      }
-    },
-
-    keyUpMonitor: function(event) {
-      delete this.keysDown[event.keyCode]; //Remove key from array
-    },
-
     handleSubmit: function() {
       this.moveRequest(
         this.setPosition.x,

src/components/viewComponents/streamDisplay.vue

@@ -108,6 +108,14 @@ export default {
   },
 
   methods: {
+    flashStream: function() {
+      // Run an animation that flashes the stream (for capture feedback)
+      let element = this.$refs.streamDisplay;
+      element.classList.remove("uk-animation-fade");
+      element.offsetHeight; /* trigger reflow */
+      element.classList.add("uk-animation-fade");
+    },
+
     clickMonitor: function(event) {
       // Calculate steps from event coordinates and store config FOV
       let xCoordinate = event.offsetX;
@@ -127,14 +135,6 @@ export default {
       this.$root.$emit("globalMoveEvent", xSteps, ySteps, 0, false);
     },
 
-    flashStream: function() {
-      // Run an animation that flashes the stream (for capture feedback)
-      let element = this.$refs.streamDisplay;
-      element.classList.remove("uk-animation-fade");
-      element.offsetHeight; /* trigger reflow */
-      element.classList.add("uk-animation-fade");
-    },
-
     handleResize: function() {
       // Only fires resize event after no resize in 500ms (prevents resize event spam)
       clearTimeout(this.resizeTimeoutId);