diff --git a/src/App.vue b/src/App.vue index 4ec5e9c6..f26b3b97 100644 --- a/src/App.vue +++ b/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); diff --git a/src/components/controlComponents/paneCapture.vue b/src/components/controlComponents/paneCapture.vue index ac549961..5b415c2b 100644 --- a/src/components/controlComponents/paneCapture.vue +++ b/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: { diff --git a/src/components/controlComponents/paneNavigate.vue b/src/components/controlComponents/paneNavigate.vue index 64b3c6af..ddec65da 100644 --- a/src/components/controlComponents/paneNavigate.vue +++ b/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, diff --git a/src/components/viewComponents/streamDisplay.vue b/src/components/viewComponents/streamDisplay.vue index bb914843..b4d2522d 100644 --- a/src/components/viewComponents/streamDisplay.vue +++ b/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);