rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui_migration fix(deps): Replace component instance event by external event bus from mitt package.

Browse source
This commit is contained in:
Antonio Anaya 2026-01-24 16:13:49 -06:00
parent 6e14bf1dd0
commit 2a9ee759c4
12 changed files with 1964 additions and 10660 deletions
Download patch file Download diff file Expand all files Collapse all files

7
webapp/src/components/appContent.vue
View file

@ -92,6 +92,7 @@ import slideScanContent from "./tabContentComponents/slideScanContent.vue";
import viewContent from "./tabContentComponents/viewContent.vue";
// vue3 migration
import { shallowRef, markRaw, ref } from 'vue'
import { eventBus } from "../eventBus.js";
// Import modal components for device initialisation
import calibrationWizard from "./modalComponents/calibrationWizard.vue";
@ -207,15 +208,15 @@ export default {
mounted() {
// A global signal listener to switch tab
this.$root.$on("globalSwitchTab", (tabID) => {
eventBus.on("globalSwitchTab", (tabID) => {
this.currentTab = tabID;
});
// A global signal listener to increment tab
this.$root.$on("globalIncrementTab", () => {
eventBus.on("globalIncrementTab", () => {
this.incrementTabBy(1);
});
// A global signal listener to decrement tab
this.$root.$on("globalDecrementTab", () => {
eventBus.on("globalDecrementTab", () => {
this.incrementTabBy(-1);
});
if (this.$store.getters.ready) {

37
webapp/src/components/labThingsComponents/actionButton.vue
View file

@ -29,6 +29,7 @@
import ActionProgressBar from "./actionProgressBar.vue";
import ActionStatusModal from "./actionStatusModal.vue";
import { markRaw } from "vue";
import { eventBus } from "../../eventBus.js";
export default {
name: "ActionButton",
@ -134,19 +135,19 @@ export default {
watch: {
progress(newval) {
this.$emit("update:progress", newval);
eventBus.emit("update:progress", newval);
},
taskStarted(newval) {
this.$emit("update:taskStarted", newval);
eventBus.emit("update:taskStarted", newval);
},
taskRunning(newval) {
this.$emit("update:taskRunning", newval);
eventBus.emit("update:taskRunning", newval);
},
log(newval) {
this.$emit("update:log", newval);
eventBus.emit("update:log", newval);
},
taskStatus(newval) {
this.$emit("update:taskStatus", newval);
eventBus.emit("update:taskStatus", newval);
},
},
@ -157,7 +158,7 @@ export default {
}
// A global signal listener to perform the action
if (this.submitOnEvent) {
this.$root.$on(this.submitOnEvent, () => {
eventBus.on(this.submitOnEvent, () => {
if (this.isDisabled) return;
// Bootstrap task if button is not disabled.
this.bootstrapTask();
@ -167,7 +168,11 @@ export default {
beforeUnmount() {
if (this.submitOnEvent) {
this.$root.$off(this.submitOnEvent);
eventBus.off(this.submitOnEvent, () => {
if (this.isDisabled) return;
// Bootstrap task if button is not disabled.
this.bootstrapTask();
});
}
},
@ -203,7 +208,7 @@ export default {
if (ongoingTask) {
// There is a started task
this.taskStarted = true;
this.$emit("taskStarted");
eventBus.emit("taskStarted");
// Find its URL
const taskUrl = ongoingTask.links.find((t) => t.rel == "self").href;
this.startPollingTask(ongoingTask.id, taskUrl);
@ -226,10 +231,10 @@ export default {
async startTask() {
// Starts a new Action task
this.$emit("submit", this.submitData);
eventBus.emit("submit", this.submitData);
// Send a request to start a task
this.taskStarted = true;
this.$emit("taskStarted");
eventBus.emit("taskStarted");
let response;
try {
response = await this.invokeAction(
@ -239,7 +244,7 @@ export default {
false, // Stop invokeAction handling the error.
);
} catch (error) {
this.$emit("error", error);
eventBus.emit("error", error);
this.onTaskEnd();
return;
}
@ -257,7 +262,7 @@ export default {
this.taskUrl = taskUrl;
// Start the store polling TaskId for success
this.taskRunning = true;
this.$emit("taskRunning", taskId);
eventBus.emit("taskRunning", taskId);
this.pollUntilComplete(
taskUrl,
this.onPollingResponse,
@ -271,17 +276,17 @@ export default {
this.taskStatus = response.data.status;
this.log = response.data.log;
if (response.data.status == "completed") {
this.$emit("response", response.data);
this.$emit("completed", response.data.output);
eventBus.emit("response", response.data);
eventBus.emit("completed", response.data.output);
} else if (response.data.status == "cancelled") {
this.$emit("cancelled", response.data);
eventBus.emit("cancelled", response.data);
this.modalNotify(`The action '${this.submitLabel}' was cancelled.`);
}
}
this.taskUrl = null;
this.taskRunning = false;
this.taskStarted = false;
this.$emit("finished");
eventBus.emit("finished");
},
onPollingResponse(response) {

2
webapp/src/components/labThingsComponents/actionStatusModal.vue
View file

@ -75,7 +75,7 @@ export default {
},
hide() {
UIkit.modal(this.$refs.modal).hide();
this.$root.$emit("modalClosed");
eventBus.emit("modalClosed");
},
},
};

2
webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
View file

@ -40,7 +40,7 @@ export default {
},
afterAutofocus() {
this.isAutofocusing = false;
this.$root.$emit("globalUpdatePositionEvent");
eventBus.emit("globalUpdatePositionEvent");
},
},
};

19
webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
View file

@ -63,6 +63,7 @@ import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue
import stageControlButtons from "./stageControlButtons.vue";
// vue3 migration
import { markRaw } from "vue";
import { eventBus } from "../../../eventBus.js";
export default {
name: "PaneControl",
@ -89,20 +90,20 @@ export default {
async mounted() {
let self = this;
// A global signal listener to perform a move action
this.$root.$on("globalMoveEvent", self.move);
this.$root.$on("globalUpdatePositionEvent", self.updatePosition);
eventBus.on("globalMoveEvent", self.move);
eventBus.on("globalUpdatePositionEvent", self.updatePosition);
// A global signal listener to perform a move action in pixels
this.$root.$on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
eventBus.on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
this.moveInImageCoordinatesRequest(x, y, absolute);
});
// A global signal listener to perform a move in multiples of a step size
this.$root.$on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
eventBus.on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
const navigationStepSize = this.$store.state.navigationStepSize;
const navigationInvert = this.$store.state.navigationInvert;
const x = x_steps * navigationStepSize.x * (navigationInvert.x ? -1 : 1);
const y = y_steps * navigationStepSize.y * (navigationInvert.y ? -1 : 1);
const z = z_steps * navigationStepSize.z * (navigationInvert.z ? -1 : 1);
this.$root.$emit("globalMoveEvent", x, y, z, false);
eventBus.emit("globalMoveEvent", x, y, z, false);
});
// Update the current position in text boxes
await this.updatePosition();
@ -110,10 +111,10 @@ export default {
beforeUnmount() {
// Remove global signal listener to perform a move action
this.$root.$off("globalMoveEvent");
this.$root.$off("globalMoveInImageCoordinatesEvent");
this.$root.$off("globalMoveStepEvent");
this.$root.$off("globalUpdatePositionEvent");
eventBus.off("globalMoveEvent");
eventBus.off("globalMoveInImageCoordinatesEvent");
eventBus.off("globalMoveStepEvent");
eventBus.off("globalUpdatePositionEvent");
},
methods: {

2
webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
View file

@ -41,7 +41,7 @@ export default {
name: "StageControlButtons",
methods: {
move(x, y, z) {
this.$root.$emit("globalMoveStepEvent", x, y, z);
eventBus.emit("globalMoveStepEvent", x, y, z);
},
},
};

9
webapp/src/components/tabContentComponents/scanListContent.vue
View file

@ -102,6 +102,7 @@ import scanCard from "./scanListComponents/scanCard.vue";
import ScanViewerModal from "./scanListComponents/scanViewer.vue";
// vue3 migration
import { markRaw } from "vue";
import { eventBus } from "../../eventBus.js";
// Export main app
export default {
@ -150,10 +151,10 @@ export default {
// Update on mount (does nothing if not connected)
await this.updateScans();
// A global signal listener to perform a gallery refresh
this.$root.$on("globalUpdateScans", () => {
eventBus.on("globalUpdateScans", () => {
this.updateScans();
});
this.$root.$on("modalClosed", () => {
eventBus.on("modalClosed", () => {
// Handle the modal closed event here
this.updateScans();
});
@ -179,13 +180,13 @@ export default {
beforeUnmount() {
// Remove global signal listener to perform a gallery refresh
this.$root.$off("globalUpdateScans");
eventBus.off("globalUpdateScans");
// Then we call that function here to unwatch
if (this.unwatchStoreFunction) {
this.unwatchStoreFunction();
this.unwatchStoreFunction = null;
}
this.$root.$off("modalClosed"); // Clean up event listener
eventBus.off("modalClosed"); // Clean up event listener
},
methods: {

11
webapp/src/components/tabContentComponents/streamContent.vue
View file

@ -35,6 +35,9 @@
</template>
<script>
// vue3 migration
import { eventBus } from "../../eventBus.js";
// Export main app
export default {
name: "StreamDisplay",
@ -63,7 +66,7 @@ export default {
mounted() {
// A global signal listener to flash the stream element
this.$root.$on("globalFlashStream", () => {
eventBus.on("globalFlashStream", () => {
this.flashStream();
});
@ -83,9 +86,9 @@ export default {
beforeUnmount: function () {
// Remove global signal listener to change the GPU preview state
this.$root.$off("globalTogglePreview");
eventBus.off("globalTogglePreview");
// Remove global signal listener to flash the stream element
this.$root.$off("globalFlashStream");
eventBus.off("globalFlashStream");
// Disconnect the size observer
this.sizeObserver.disconnect();
// Remove from the array of active streams
@ -126,7 +129,7 @@ export default {
let yRelative = (0.5 * event.target.offsetHeight - yCoordinate) * scale;
// Emit a signal to move, acted on by paneControl.vue
this.$root.$emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
eventBus.emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
},
handleResize: function () {