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

ui_migration fix(deps): --preliminary-- fixed replaced v-observe-visibility by vueuse useIntersectionObserver

Browse source
This commit is contained in:
Antonio Anaya 2026-02-13 01:58:32 -06:00
parent 5825015aba
commit 5fe3d563f5
33 changed files with 154 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

1
webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
View file

@ -18,7 +18,6 @@
import CSMCalibrationSettings from "./CSMSettingsComponents/CSMCalibrationSettings.vue";
import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
// vue3 migration
import { markRaw } from "vue";
// Export main app
export default {

14
webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="CSMCalibrationSettings" v-observe-visibility="visibilityChanged">
<div id="CSMCalibrationSettings" ref="CSMCalibrationSettingsContainer" class="uk-width-large">
<!--Show auto calibrate if default plugin is enabled-->
<div v-if="'calibrate_xy' in actions" class="uk-margin-small">
<action-button
@ -58,7 +58,7 @@
import ActionButton from "@/components/labThingsComponents/actionButton.vue";
import matrixDisplay from "@/components/ui/matrixDisplay.vue";
// vue3 migration
import { markRaw } from "vue";
import { useIntersectionObserver } from "@vueuse/core";
// Export main app
export default {
@ -95,6 +95,16 @@ export default {
},
},
mounted() {
useIntersectionObserver(
this.$refs.CSMCalibrationSettingsContainer,
([{ isIntersecting }]) => {
this.visibilityChanged(isIntersecting);
},
{ threshold: 0.0 }
);
},
methods: {
visibilityChanged(isVisible) {
if (isVisible) {

1
webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
View file

@ -26,7 +26,6 @@ import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrat
import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
import ServerSpecifiedPropertyControl from "../../labThingsComponents/serverSpecifiedPropertyControl.vue";
// vue3 migration
import { markRaw } from "vue";
// Export main app
export default {

2
webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
View file

@ -30,7 +30,7 @@ export default {
name: "CameraCalibrationSettings",
components: {
ServerSpecifiedActionButton,
ServerSpecifiedActionButton
},
props: {

1
webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
View file

@ -8,7 +8,6 @@
<script>
import appSettings from "./displaySetttingsComponents/appSettings.vue";
import streamSettings from "./displaySetttingsComponents/streamSettings.vue";
import { markRaw } from "vue";
// Export main app
export default {

14
webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
View file

@ -1,5 +1,5 @@
<template>
<div id="stageSettings" v-observe-visibility="visibilityChanged" class="uk-width-large">
<div id="stageSettings" ref="stageSettingsContainer" class="uk-width-large">
The microscope stage is a <b>{{ stageType }}</b>
<div>
<div class="uk-margin">
@ -30,7 +30,7 @@
<script>
import ActionButton from "../../labThingsComponents/actionButton.vue";
// vue3 migration
import { markRaw } from "vue";
import { useIntersectionObserver } from "@vueuse/core";
export default {
name: "StageSettings",
@ -51,6 +51,16 @@ export default {
},
},
mounted() {
useIntersectionObserver(
this.$refs.stageSettingsContainer,
([{ isIntersecting }]) => {
this.visibilityChanged(isIntersecting);
},
{ threshold: 0.0 }
);
},
methods: {
visibilityChanged(isVisible) {
if (isVisible) {