Split autofocus component

webapp/src/components/labThingsComponents/actionButton.vue

@@ -209,6 +209,8 @@ export default {
     // A global signal listener to perform the action
     if (this.submitOnEvent) {
       this.$root.$on(this.submitOnEvent, () => {
+        if (this.isDisabled) return;
+        // Bootstrap task if button is not disabled.
         this.bootstrapTask();
       });
     }

webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <p>Autofocus</p>
+    <div class="uk-margin">
+      <action-button
+        thing="autofocus"
+        action="fast_autofocus"
+        :submit-data="{ dz: 2000 }"
+        :submit-label="'Autofocus'"
+        :button-primary="true"
+        :submit-on-event="'globalFastAutofocusEvent'"
+        :is-disabled="isAutofocusing"
+        @taskStarted="onAutofocus"
+        @finished="afterAutofocus"
+        @error="modalError"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import ActionButton from "../../labThingsComponents/actionButton.vue";
+
+export default {
+  name: "AutofocusControl",
+
+  components: {
+    ActionButton,
+  },
+
+  data: function () {
+    return {
+      isAutofocusing: false,
+    };
+  },
+
+  methods: {
+    onAutofocus() {
+      this.isAutofocusing = true;
+    },
+    afterAutofocus() {
+      this.isAutofocusing = false;
+      this.$root.$emit("globalUpdatePositionEvent");
+    },
+  },
+};
+</script>

webapp/src/components/tabContentComponents/controlComponents/paneControl.vue

@@ -1,28 +1,7 @@
 <template>
   <div id="paneControl" class="uk-padding-small">
     <positionControl />
-
-    <p>Autofocus</p>
-
-    <div class="uk-grid-small uk-child-width-expand" uk-grid>
-      <div v-show="!isAutofocusing || isAutofocusing == 1">
-        <action-button
-          thing="autofocus"
-          action="fast_autofocus"
-          :submit-data="{ dz: 2000 }"
-          :submit-label="'Autofocus'"
-          :button-primary="true"
-          :submit-on-event="'globalFastAutofocusEvent'"
-          @taskStarted="isAutofocusing = 1"
-          @finished="
-            updatePosition();
-            isAutofocusing = 0;
-          "
-          @error="modalError"
-        />
-      </div>
-    </div>
-
+    <autofocusControl />
     <p>Image Capture</p>
 
     <div class="uk-margin">
@@ -55,6 +34,7 @@
 import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import positionControl from "./positionControl.vue";
+import autofocusControl from "./autofocusControl.vue";
 
 export default {
   name: "PaneControl",
@@ -62,12 +42,7 @@ export default {
   components: {
     ActionButton,
     positionControl,
-  },
-
-  data: function () {
-    return {
-      isAutofocusing: 0,
-    };
+    autofocusControl,
   },
 
   methods: {

webapp/src/components/tabContentComponents/controlComponents/positionControl.vue

@@ -72,6 +72,7 @@ export default {
     let self = this;
     // A global signal listener to perform a move action
     this.$root.$on("globalMoveEvent", self.move);
+    this.$root.$on("globalUpdatePositionEvent", self.updatePosition);
     // A global signal listener to perform a move action in pixels
     this.$root.$on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
       this.moveInImageCoordinatesRequest(x, y, absolute);
@@ -94,6 +95,7 @@ export default {
     this.$root.$off("globalMoveEvent");
     this.$root.$off("globalMoveInImageCoordinatesEvent");
     this.$root.$off("globalMoveStepEvent");
+    this.$root.$off("globalUpdatePositionEvent");
   },
 
   methods: {