feat(Camera): Synchronize image slices and cameras

src/components/ImageDataBrowser.vue

@@ -15,6 +15,9 @@ import { useDatasetStore } from '../store/datasets';
 
 import { useMultiSelection } from '../composables/useMultiSelection';
 import { useLayersStore } from '../store/datasets-layers';
+import { useViewSliceStore } from '../store/view-configs/slicing'
+import { useViewCameraStore } from '../store/view-configs/camera'
+import { useCameraAutoResetState } from '@/src/composables/useCameraAutoResetState'
 
 function imageCacheKey(dataID: string) {
   return `image-${dataID}`;
@@ -31,6 +34,9 @@ export default defineComponent({
     const dataStore = useDatasetStore();
     const layersStore = useLayersStore();
     const segmentGroupStore = useSegmentGroupStore();
+    const viewSliceStore = useViewSliceStore();
+    const viewCameraStore = useViewCameraStore();
+    const cameraAutoResetState = useCameraAutoResetState();
 
     const primarySelection = computed(() => dataStore.primarySelection);
 
@@ -116,6 +122,31 @@ export default defineComponent({
       { immediate: true, deep: true }
     );
 
+    // --- sync --- //
+
+    const sameSpaceImages = computed(() => {
+      return imageStore.checkAllImagesSameSpace();
+    });
+
+    const isSync = computed(() => {
+      return viewSliceStore.isSync() && viewCameraStore.isSync();
+    });
+
+    function toggleSyncImages() {
+      viewSliceStore.toggleSyncImages();
+      viewCameraStore.toggleSyncCameras();
+      cameraAutoResetState.cameraAutoResetState.value = true;
+    }
+
+    watch(
+      isSync,
+      () => {
+        viewSliceStore.updateSyncConfigs();
+        viewCameraStore.updateSyncConfigs();
+      }
+    );
+
+
     // --- selection --- //
 
     const { selected, selectedAll, selectedSome, toggleSelectAll } =
@@ -151,6 +182,9 @@ export default defineComponent({
       setPrimarySelection: (sel: DataSelection) => {
         dataStore.setPrimarySelection(sel);
       },
+      sameSpaceImages,
+      toggleSyncImages,
+      isSync,
     };
   },
 });
@@ -173,6 +207,22 @@ export default defineComponent({
           />
         </v-col>
         <v-col cols="6" align-self="center" class="d-flex justify-end">
+          <v-btn
+            icon
+            variant="text"
+            :disabled="!sameSpaceImages"
+            @click.stop="toggleSyncImages"
+          >
+	          <v-icon v-if="isSync">mdi-lock</v-icon>
+            <v-icon flip="vertical" v-else>mdi-lock-open-variant</v-icon>
+            <v-tooltip
+              :disabled="!sameSpaceImages"
+              location="left"
+              activator="parent"
+            >
+              Sync Images
+            </v-tooltip>
+          </v-btn>
           <v-btn
             icon
             variant="text"

src/components/SliceViewer.vue

@@ -33,6 +33,7 @@
           class="vtk-view"
           ref="vtkView"
           data-testid="vtk-view vtk-two-view"
+          :disable-auto-reset-camera="cameraAutoResetState"
           :view-id="id"
           :image-id="currentImageID"
           :view-direction="viewDirection"
@@ -182,6 +183,7 @@ import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/M
 import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';
 import { useResetViewsEvents } from '@/src/components/tools/ResetViews.vue';
 import { whenever } from '@vueuse/core';
+import { useCameraAutoResetState } from '@/src/composables/useCameraAutoResetState';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
@@ -202,6 +204,8 @@ function resetCamera() {
   vtkView.value.resetCamera();
 }
 
+const { cameraAutoResetState } = storeToRefs(useCameraAutoResetState());
+
 useResetViewsEvents().onClick(resetCamera);
 
 useWebGLWatchdog(vtkView);

src/composables/useCameraAutoResetState.ts

@@ -0,0 +1,9 @@
+import { onPausableVTKEvent } from '@/src/composables/onPausableVTKEvent';
+import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
+import { MaybeRef, ref } from 'vue';
+
+export function useCameraAutoResetState() {
+  const cameraAutoResetState = ref(false);
+
+  return { cameraAutoResetState };
+}

src/composables/usePersistCameraConfig.ts

@@ -1,6 +1,5 @@
 import { MaybeRef, Ref, computed, unref } from 'vue';
 import { Maybe } from '@/src/types';
-import { CameraConfig } from '@/src/store/view-configs/types';
 import useViewCameraStore from '@/src/store/view-configs/camera';
 import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
 import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
@@ -14,14 +13,14 @@ export function usePersistCameraConfig(
 ) {
   const viewCameraStore = useViewCameraStore();
 
-  type KeyType = keyof CameraConfig;
-  const keys: KeyType[] = [
+  const keys = [
     'position',
     'focalPoint',
     'viewUp',
     'parallelScale',
     'directionOfProjection',
-  ];
+  ] as const;
+  type KeyType = (typeof keys)[number];
 
   const cameraRefs = keys.reduce(
     (refs, key) => ({

src/composables/useSliceConfig.ts

@@ -19,6 +19,11 @@ export function useSliceConfig(
       const imageIdVal = unref(imageID);
       if (!imageIdVal || val == null) return;
       store.updateConfig(unref(viewID), imageIdVal, { slice: val });
+
+      // Update other synchronized views if any
+      if (config.value?.syncState) {
+        store.updateSyncConfigs();
+      }
     },
   });
   const range = computed((): Vector2 => {

src/io/import/processors/importSingleFile.ts

@@ -8,6 +8,10 @@ import { ImportHandler } from '@/src/io/import/common';
 import { DataSourceWithFile } from '@/src/io/import/dataSource';
 import { useDatasetStore } from '@/src/store/datasets';
 import { useMessageStore } from '@/src/store/messages';
+import { useViewStore } from '@/src/store/views';
+import { useViewSliceStore } from '@/src/store/view-configs/slicing';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import { InitViewSpecs } from '@/src/config';
 
 /**
  * Reads and imports a file DataSource.
@@ -36,6 +40,19 @@ const importSingleFile: ImportHandler = async (dataSource, { done }) => {
     );
     fileStore.add(dataID, [dataSource as DataSourceWithFile]);
 
+    // Create a default view for each viewID
+    useViewStore().viewIDs.forEach((viewID) => {
+      const { lpsOrientation, dimensions } = useImageStore().metadata[dataID];
+      const axisDir = InitViewSpecs[viewID].props.viewDirection
+      const lpsFromDir = getLPSAxisFromDir(axisDir);
+      const lpsOrient = lpsOrientation[lpsFromDir];
+
+      const dimMax = dimensions[lpsOrient];
+
+      useViewSliceStore().updateConfig(viewID, dataID, { axisDirection: axisDir, max: dimMax - 1 });
+      useViewSliceStore().resetSlice(viewID, dataID);
+    });
+
     return done({
       dataID,
       dataSource,

src/io/state-file/schema.ts

@@ -113,6 +113,7 @@ const SliceConfig = z.object({
   min: z.number(),
   max: z.number(),
   axisDirection: LPSAxisDir,
+  syncState: z.boolean(),
 }) satisfies z.ZodType<SliceConfig>;
 
 const CameraConfig = z.object({
@@ -121,6 +122,7 @@ const CameraConfig = z.object({
   focalPoint: Vector3.optional(),
   directionOfProjection: Vector3.optional(),
   viewUp: Vector3.optional(),
+  syncState: z.boolean().optional(),
 }) satisfies z.ZodType<CameraConfig>;
 
 const ColorBy = z.object({

src/store/datasets-images.ts

@@ -10,6 +10,7 @@ import { StateFile, DatasetType } from '../io/state-file/schema';
 import { serializeData } from '../io/state-file/utils';
 import { useFileStore } from './datasets-files';
 import { ImageMetadata } from '../types/image';
+import { compareImageSpaces } from '../utils/imageSpace';
 
 export const defaultImageMetadata = () => ({
   name: '(none)',
@@ -79,6 +80,17 @@ export const useImageStore = defineStore('images', {
       }
     },
 
+    checkAllImagesSameSpace() {
+      if (this.idList.length < 2) return false;
+
+      const dataFirst = this.dataIndex[this.idList[0]];
+      const allEqual = this.idList.slice(1).every((id) => {
+	      return compareImageSpaces(this.dataIndex[id], dataFirst);
+      });
+
+      return allEqual;
+    },
+
     async serialize(stateFile: StateFile) {
       const fileStore = useFileStore();
       // We want to filter out volume images (which are generated and don't have

src/store/view-configs/camera.ts

@@ -7,11 +7,14 @@ import {
 } from '@/src/utils/doubleKeyRecord';
 import { reactive } from 'vue';
 import { Maybe } from '@/src/types';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { createViewConfigSerializer } from './common';
 import { ViewConfig } from '../../io/state-file/schema';
 import { CameraConfig } from './types';
+import { useImageStore } from '../datasets-images';
 
 export const useViewCameraStore = defineStore('viewCamera', () => {
+  const imageStore = useImageStore();
   const configs = reactive<DoubleKeyRecord<CameraConfig>>({});
 
   const getConfig = (viewID: Maybe<string>, dataID: Maybe<string>) =>
@@ -42,6 +45,40 @@ export const useViewCameraStore = defineStore('viewCamera', () => {
     }
   };
 
+  const toggleSyncCameras = () => {
+    // Synchronize all cameras when toggled
+    Object.keys(configs).forEach((viewID) => {
+      imageStore.idList.forEach((imageID) => {
+        const { syncState } = {
+          ...getConfig(viewID, imageID)
+        };
+        updateConfig(viewID, imageID, { syncState: !syncState });
+      });
+    });
+  }
+
+  const isSync = () => {
+    const allSync = Object.keys(configs).every((sc) => Object.keys(configs[sc]).every((c) => configs[sc][c].syncState));
+
+    return allSync;
+  }
+
+  const updateSyncConfigs = () => {
+    Object.keys(configs).forEach((viewID) => {
+      const { currentImageID } = useCurrentImage();
+      const config = getConfig(viewID, currentImageID.value);
+      imageStore.idList.forEach((imageID) => {
+        const { syncState } = {
+          ...getConfig(viewID, imageID)
+        };
+
+        if (syncState) {
+          updateConfig(viewID, imageID, { position: config?.position, focalPoint: config?.focalPoint, parallelScale: config?.parallelScale });
+        }
+      });
+    });
+  }
+
   const serialize = createViewConfigSerializer(configs, 'camera');
 
   const deserialize = (viewID: string, config: Record<string, ViewConfig>) => {
@@ -58,6 +95,9 @@ export const useViewCameraStore = defineStore('viewCamera', () => {
     updateConfig,
     removeView,
     removeData,
+    toggleSyncCameras,
+    updateSyncConfigs,
+    isSync,
     serialize,
     deserialize,
   };

src/store/view-configs/slicing.ts

@@ -8,18 +8,22 @@ import {
   patchDoubleKeyRecord,
 } from '@/src/utils/doubleKeyRecord';
 import { Maybe } from '@/src/types';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { createViewConfigSerializer } from './common';
 import { ViewConfig } from '../../io/state-file/schema';
 import { SliceConfig } from './types';
+import { useImageStore } from '../datasets-images';
 
 export const defaultSliceConfig = (): SliceConfig => ({
   slice: 0,
   min: 0,
   max: 1,
   axisDirection: 'Inferior',
+  syncState: false,
 });
 
 export const useViewSliceStore = defineStore('viewSlice', () => {
+  const imageStore = useImageStore();
   const configs = reactive<DoubleKeyRecord<SliceConfig>>({});
 
   const getConfig = (viewID: Maybe<string>, dataID: Maybe<string>) =>
@@ -64,6 +68,42 @@ export const useViewSliceStore = defineStore('viewSlice', () => {
     }
   };
 
+  const toggleSyncImages = () => {
+    // Synchronize all images when toggled
+    Object.keys(configs).forEach((viewID) => {
+      imageStore.idList.forEach((imageID) => {
+        const { syncState } = {
+          ...defaultSliceConfig(),
+          ...getConfig(viewID, imageID)
+        };
+        updateConfig(viewID, imageID, { syncState: !syncState });
+      });
+    });
+  }
+
+  const isSync = () => {
+    const allSync = Object.keys(configs).every((sc) => Object.keys(configs[sc]).every((c) => configs[sc][c].syncState));
+
+    return allSync;
+  }
+
+  const updateSyncConfigs = () => {
+    Object.keys(configs).forEach((viewID) => {
+      const { currentImageID } = useCurrentImage();
+      const config = getConfig(viewID, currentImageID.value);
+      imageStore.idList.forEach((imageID) => {
+        const { syncState } = {
+          ...defaultSliceConfig(),
+          ...getConfig(viewID, imageID)
+        };
+
+        if (syncState) {
+          updateConfig(viewID, imageID, { slice: config?.slice });
+        }
+      });
+    });
+  }
+
   const serialize = createViewConfigSerializer(configs, 'slice');
 
   const deserialize = (viewID: string, config: Record<string, ViewConfig>) => {
@@ -81,6 +121,9 @@ export const useViewSliceStore = defineStore('viewSlice', () => {
     resetSlice,
     removeView,
     removeData,
+    toggleSyncImages,
+    updateSyncConfigs,
+    isSync,
     serialize,
     deserialize,
   };

src/store/view-configs/types.ts

@@ -14,13 +14,15 @@ export interface CameraConfig {
   focalPoint?: Vector3;
   directionOfProjection?: Vector3;
   viewUp?: Vector3;
+  syncState?: boolean;
 }
 
 export interface SliceConfig {
   slice: number;
   min: number;
   max: number;
   axisDirection: LPSAxisDir;
+  syncState: boolean;
 }
 
 export interface VolumeColorConfig {