From f19d6681c42437a41170456e291dc85c8dc759a4 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 17:38:10 +0000
Subject: [PATCH] Split autofocus component

---
 .../labThingsComponents/actionButton.vue      |  2 +
 .../controlComponents/autofocusControl.vue    | 46 +++++++++++++++++++
 .../controlComponents/paneControl.vue         | 31 ++-----------
 .../controlComponents/positionControl.vue     |  2 +
 4 files changed, 53 insertions(+), 28 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue

diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index fad5f5fb..aa4d2265 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/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();
       });
     }
diff --git a/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
new file mode 100644
index 00000000..c2e5256e
--- /dev/null
+++ b/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>
diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index a095514f..365bb26c 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/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: {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index 6fc3edec..91efa9ce 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/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: {