(FINALLY) fixed duplicate move request bug

src/components/controlComponents/paneNavigate.vue

@@ -125,6 +125,12 @@ 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) => {
@@ -132,6 +138,17 @@ export default {
     })
   },
 
+  beforeDestroy () {
+    // Remove global signal listener to perform a move action
+    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) {
@@ -271,12 +288,6 @@ export default {
 
   },
 
-  created: function () {
-    window.addEventListener('keydown', this.keyDownMonitor);
-    window.addEventListener("keyup", this.keyUpMonitor);
-    window.addEventListener('wheel', this.wheelMonitor);
-  },
-
   computed: {
     positionApiUri: function () {
       return this.$store.getters.uri + "/stage/position"

src/components/panelRight.vue

@@ -2,14 +2,14 @@
   <!-- Tabbed panel for gallery and live views -->
   <div id="panel-right" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
     <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" id="tabContainer" uk-tab="swiping: false">
-        <li><a href="#" uk-switcher-item="connect">Connect</a></li>
+      <li><a href="#" uk-switcher-item="connect">Connect</a></li>
-        <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="preview">Live</a></li>
+      <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="preview">Live</a></li>
-        <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>
+      <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery">Gallery</a></li>
     </ul>
     <ul class="uk-switcher uk-flex uk-flex-1 uk-overflow-auto">
-        <li class="uk-height-1-1 uk-width-1-1" id="connectDisplayTab"><connectDisplay/></li>
+      <li class="uk-height-1-1 uk-width-1-1" id="connectDisplayTab"><connectDisplay/></li>
-        <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
+      <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
-        <li class="uk-height-1-1 uk-width-1-1" id="galleryDisplayTab"><galleryDisplay/></li>
+      <li class="uk-height-1-1 uk-width-1-1" id="galleryDisplayTab"><galleryDisplay/></li>
     </ul>
   </div>
 </template>

src/components/viewComponents/streamDisplay.vue

@@ -1,19 +1,22 @@
 <template>
 	<div ref="streamDisplay" class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget" id="stream-display">
 
-		<img class="uk-align-center uk-margin-remove-bottom" v-on:dblclick="clickmonitor" v-if="showStream" v-bind:src="streamImgUri" alt="Stream">
+		<img class="uk-align-center uk-margin-remove-bottom" v-on:dblclick="clickMonitor" v-bind:hidden="!showStream" v-bind:src="streamImgUri" alt="Stream" ref="click-frame">
 
-		<div v-else-if="$store.state.waiting" class="uk-position-center">
+		<div v-if="!showStream">
-			<div uk-spinner="ratio: 4.5" ></div>
+			<div v-if="$store.state.waiting" class="uk-position-center">
+				<div uk-spinner="ratio: 4.5" ></div>
+			</div>
+
+			<div v-else-if="$store.state.globalSettings.disableStream" class="uk-position-center position-relative text-center">
+				Stream preview disabled
+			</div>
+
+			<div v-else class="uk-position-center position-relative text-center">
+				No active connection
+			</div>
 		</div>
 
-		<div v-else-if="$store.state.globalSettings.disableStream" class="uk-position-center position-relative text-center">
-			Stream preview disabled
-		</div>
-
-		<div v-else class="uk-position-center position-relative text-center">
-			No active connection
-		</div>
 
 	</div>
 </template>
@@ -76,7 +79,7 @@ export default {
 	},
 
   methods: {
-    clickmonitor: function(event) {
+    clickMonitor: function(event) {
 			// Calculate steps from event coordinates and store config FOV
 			let xCoordinate = event.offsetX;
 			let yCoordinate = event.offsetY;
@@ -89,8 +92,6 @@ export default {
 
 			// Emit a signal to move, acted on by panelNavigate.vue
 			this.$root.$emit('globalMoveEvent', xSteps, ySteps, 0, false)
-
-			this.flashStream()
 		},
 		
 		flashStream: function() {