Added capture to global keyboard shortcuts
This commit is contained in:
Joel Collins
parent
f037831f83
commit
c5fa0dec03
4 changed files with 129 additions and 93 deletions
110
src/App.vue
110
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);
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue