@@ -10,7 +10,6 @@
@@ -26,10 +25,12 @@
// Import components
import appContent from "./components/appContent.vue";
import loadingContent from "./components/loadingContent.vue";
+import MouseTrap from "mousetrap";
+// vue3 migration
+import { markRaw } from "vue";
+import { eventBus } from "./eventBus.js";
-var Mousetrap = require("mousetrap");
-
-Mousetrap.prototype.stopCallback = function (e, element) {
+MouseTrap.prototype.stopCallback = function (e, element) {
// if the element has the class "mousetrap" then no need to stop
if ((" " + element.className + " ").indexOf(" mousetrap ") > -1) {
return false;
@@ -55,7 +56,7 @@ export default {
components: {
appContent,
- loadingContent,
+ loadingContent
},
data: function () {
@@ -153,10 +154,10 @@ export default {
// Focus keys
Mousetrap.bind("pageup", () => {
- this.$root.$emit("globalMoveStepEvent", 0, 0, 1);
+ eventBus.emit("globalMoveStepEvent", {x: 0, y: 0, z: 1});
});
Mousetrap.bind("pagedown", () => {
- this.$root.$emit("globalMoveStepEvent", 0, 0, -1);
+ eventBus.emit("globalMoveStepEvent", {x: 0, y: 0, z: -1});
});
this.keyboardManual.push({
shortcut: "pgup / pgdn",
@@ -165,7 +166,7 @@ export default {
// Capture
Mousetrap.bind("c", () => {
- this.$root.$emit("globalCaptureEvent");
+ eventBus.emit("globalCaptureEvent", {});
});
this.keyboardManual.push({
shortcut: "c",
@@ -174,7 +175,7 @@ export default {
// Autofocus
Mousetrap.bind("a", () => {
- this.$root.$emit("globalFastAutofocusEvent");
+ eventBus.emit("globalFastAutofocusEvent", {});
});
this.keyboardManual.push({
shortcut: "a",
@@ -183,10 +184,10 @@ export default {
// Increment/decrement tab
Mousetrap.bind("shift+down", () => {
- this.$root.$emit("globalIncrementTab");
+ eventBus.emit("globalIncrementTab", {});
});
Mousetrap.bind("shift+up", () => {
- this.$root.$emit("globalDecrementTab");
+ eventBus.emit("globalDecrementTab", {});
});
this.keyboardManual.push({
shortcut: "shift+↑ / shift+↓",
@@ -194,7 +195,7 @@ export default {
});
},
- beforeDestroy: function () {
+ beforeUnmount: function () {
// Disconnect the theme observer
if (this.themeObserver) {
this.themeObserver.disconnect();
@@ -237,7 +238,7 @@ export default {
}
},
handleExit: function () {
- this.$root.$emit("globalTogglePreview", false);
+ eventBus.emit("globalTogglePreview", false);
},
// Handle global mouse wheel events to be associated with navigation
@@ -249,7 +250,7 @@ export default {
) {
var z_rel = event.deltaY / 100;
// Emit a signal to move, acted on by panelControl.vue
- this.$root.$emit("globalMoveStepEvent", 0, 0, z_rel, false);
+ eventBus.emit("globalMoveStepEvent", {x: 0, y: 0, z: z_rel, absolute: false});
}
},
@@ -276,7 +277,7 @@ export default {
}
// Make a position request
// Emit a signal to move, acted on by panelControl.vue
- this.$root.$emit("globalMoveStepEvent", x_rel, y_rel, z_rel);
+ eventBus.emit("globalMoveStepEvent", {x: x_rel, y: y_rel, z: 0});
},
},
};
diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index d2460eba..df186fe9 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -9,11 +9,10 @@
class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
>
-
+
// Import generic components
-import tabIcon from "./genericComponents/tabIcon";
-import tabContent from "./genericComponents/tabContent";
+import tabIcon from "./genericComponents/tabIcon.vue";
+import tabContent from "./genericComponents/tabContent.vue";
// Import new content components
import aboutContent from "./tabContentComponents/aboutContent.vue";
@@ -92,6 +90,9 @@ import scanListContent from "./tabContentComponents/scanListContent.vue";
import settingsContent from "./tabContentComponents/settingsContent.vue";
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";
@@ -103,7 +104,7 @@ export default {
components: {
tabIcon,
tabContent,
- calibrationWizard,
+ calibrationWizard
},
data: function () {
return {
@@ -113,26 +114,26 @@ export default {
id: "settings",
title: "Settings",
icon: "settings",
- component: settingsContent,
+ component: markRaw(settingsContent),
class: "uk-margin-auto-top",
},
{
id: "logging",
title: "Logging",
icon: "assignment_late",
- component: loggingContent,
+ component: markRaw(loggingContent),
},
{
id: "about",
title: "About",
icon: "info",
- component: aboutContent,
+ component: markRaw(aboutContent),
},
{
id: "power",
title: "Power",
icon: "power_settings_new",
- component: powerContent,
+ component: markRaw(powerContent),
},
],
coreTopTabs: [
@@ -140,21 +141,21 @@ export default {
id: "view",
title: "View",
icon: "visibility",
- component: viewContent,
+ component: markRaw(viewContent),
requiredThings: [],
},
{
id: "control",
title: "Control",
icon: "gamepad",
- component: controlContent,
+ component: markRaw(controlContent),
requiredThings: [],
},
{
id: "background-detect",
title: "Background Detect",
icon: "background_replace",
- component: backgroundDetectContent,
+ component: markRaw(backgroundDetectContent),
// While stage isn't needed; automatic background detect has little function
// for a manual microscope.
requiredThings: ["stage"],
@@ -163,14 +164,14 @@ export default {
id: "slide-scan",
title: "Slide Scan",
icon: "settings_overscan",
- component: slideScanContent,
+ component: markRaw(slideScanContent),
requiredThings: ["smart_scan"],
},
{
id: "scan-list",
title: "Scan List",
icon: "photo_library",
- component: scanListContent,
+ component: markRaw(scanListContent),
requiredThings: ["smart_scan"],
},
],
@@ -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) {
diff --git a/webapp/src/components/genericComponents/miniStreamDisplay.vue b/webapp/src/components/genericComponents/miniStreamDisplay.vue
index d2623334..1f9cafc9 100644
--- a/webapp/src/components/genericComponents/miniStreamDisplay.vue
+++ b/webapp/src/components/genericComponents/miniStreamDisplay.vue
@@ -2,7 +2,6 @@
![]()
diff --git a/webapp/src/components/genericComponents/tabIcon.vue b/webapp/src/components/genericComponents/tabIcon.vue
index 538496fc..b2f6d61e 100644
--- a/webapp/src/components/genericComponents/tabIcon.vue
+++ b/webapp/src/components/genericComponents/tabIcon.vue
@@ -1,5 +1,11 @@
-
+
{{ computedTitle }}
diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index b8ec4969..38ea5874 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/webapp/src/components/labThingsComponents/actionButton.vue
@@ -1,6 +1,7 @@
-
+