Synchronize cameras images

src/components/ImageDataBrowser.vue

@@ -15,6 +15,8 @@ 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';
 
 function imageCacheKey(dataID: string) {
   return `image-${dataID}`;
@@ -31,6 +33,8 @@ export default defineComponent({
     const dataStore = useDatasetStore();
     const layersStore = useLayersStore();
     const segmentGroupStore = useSegmentGroupStore();
+    const viewSliceStore = useViewSliceStore();
+    const viewCameraStore = useViewCameraStore();
 
     const primarySelection = computed(() => dataStore.primarySelection);
 
@@ -116,6 +120,23 @@ 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();
+      viewCameraStore.disableCameraAutoReset = isSync.value;
+    }
+    watch(isSync, () => {
+      viewSliceStore.updateSyncConfigs();
+      viewCameraStore.updateSyncConfigs();
+    });
+
     // --- selection --- //
 
     const { selected, selectedAll, selectedSome, toggleSelectAll } =
@@ -151,6 +172,9 @@ export default defineComponent({
       setPrimarySelection: (sel: DataSelection) => {
         dataStore.setPrimarySelection(sel);
       },
+      sameSpaceImages,
+      toggleSyncImages,
+      isSync,
     };
   },
 });
@@ -173,6 +197,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/Settings.vue

@@ -10,6 +10,14 @@
         hide-details
       ></v-switch>
 
+      <v-switch
+        :label="`Camera Auto Reset (${disableCameraAutoReset ? 'On' : 'Off'})`"
+        v-model="disableCameraAutoReset"
+        color="secondary"
+        density="compact"
+        hide-details
+      ></v-switch>
+
       <v-switch
         v-if="errorReportingConfigured"
         :label="`Error Reporting (${reportingEnabled ? 'On' : 'Off'})`"
@@ -39,6 +47,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
 import { useTheme } from 'vuetify';
 import { useLocalStorage } from '@vueuse/core';
 
@@ -50,6 +59,7 @@ import {
   useErrorReporting,
   errorReportingConfigured,
 } from '../utils/errorReporting';
+import { useViewCameraStore } from '@/src/store/view-configs/camera';
 
 export default defineComponent({
   setup() {
@@ -68,6 +78,8 @@ export default defineComponent({
       errorReportingStore.disableReporting = !enabled;
     });
 
+    const { disableCameraAutoReset } = storeToRefs(useViewCameraStore());
+
     const keyboardStore = useKeyboardShortcutsStore();
     const openKeyboardShortcuts = () => {
       keyboardStore.settingsOpen = true;
@@ -78,6 +90,7 @@ export default defineComponent({
       reportingEnabled,
       errorReportingConfigured,
       openKeyboardShortcuts,
+      disableCameraAutoReset,
     };
   },
   components: {

src/components/SliceViewer.vue

@@ -33,6 +33,7 @@
           class="vtk-view"
           ref="vtkView"
           data-testid="vtk-view vtk-two-view"
+          :disable-auto-reset-camera="disableCameraAutoReset"
           :view-id="id"
           :image-id="currentImageID"
           :view-direction="viewDirection"
@@ -172,6 +173,7 @@ import SliceSlider from '@/src/components/SliceSlider.vue';
 import SliceViewerOverlay from '@/src/components/SliceViewerOverlay.vue';
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import { useAnnotationToolStore, useToolStore } from '@/src/store/tools';
+import { useViewCameraStore } from '@/src/store/view-configs/camera';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
 import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
@@ -192,6 +194,8 @@ const vtkView = ref<VtkViewApi>();
 
 const props = defineProps<Props>();
 
+const { disableCameraAutoReset } = storeToRefs(useViewCameraStore());
+
 const { id: viewId, type: viewType, viewDirection, viewUp } = toRefs(props);
 const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 

src/components/vtk/VtkSliceView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, toRefs, provide, markRaw, effectScope, onUnmounted } from 'vue';
+import { storeToRefs } from 'pinia';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import { useVtkView } from '@/src/core/vtk/useVtkView';
 import { useImage } from '@/src/composables/useCurrentImage';
@@ -12,6 +13,7 @@ import { useAutoFitState } from '@/src/composables/useAutoFitState';
 import { Maybe } from '@/src/types';
 import { VtkViewApi } from '@/src/types/vtk-types';
 import { VtkViewContext } from '@/src/components/vtk/context';
+import { useViewCameraStore } from '@/src/store/view-configs/camera';
 
 interface Props {
   viewId: string;
@@ -21,19 +23,18 @@ interface Props {
   disableAutoResetCamera?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  disableAutoResetCamera: false,
-});
+const props = defineProps<Props>();
 const {
   viewId: viewID,
   imageId: imageID,
   viewDirection,
   viewUp,
-  disableAutoResetCamera,
 } = toRefs(props);
 
 const vtkContainerRef = ref<HTMLElement>();
 
+const { disableCameraAutoReset } = storeToRefs(useViewCameraStore());
+
 const { metadata: imageMetadata } = useImage(imageID);
 
 // use a detached scope so that actors can be removed from
@@ -72,7 +73,7 @@ function autoFitImage() {
 }
 
 useResizeObserver(vtkContainerRef, () => {
-  if (disableAutoResetCamera.value) return;
+  if (disableCameraAutoReset.value) return;
   autoFitImage();
 });
 
@@ -89,7 +90,7 @@ function resetCamera() {
   });
 }
 
-watchImmediate([disableAutoResetCamera, viewID, imageID], ([noAutoReset]) => {
+watchImmediate([disableCameraAutoReset, viewID, imageID], ([noAutoReset]) => {
   if (noAutoReset) return;
   resetCamera();
 });

src/components/vtk/VtkVolumeView.vue

@@ -8,11 +8,13 @@ import {
   effectScope,
   onUnmounted,
 } from 'vue';
+import { storeToRefs } from 'pinia';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
 import vtkMouseCameraTrackballZoomManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomManipulator';
 import { useVtkView } from '@/src/core/vtk/useVtkView';
 import { useImage } from '@/src/composables/useCurrentImage';
+import { useViewCameraStore } from '@/src/store/view-configs/camera';
 import { useVtkInteractorStyle } from '@/src/core/vtk/useVtkInteractorStyle';
 import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
 import { LPSAxisDir } from '@/src/types/lps';
@@ -30,22 +32,20 @@ interface Props {
   imageId: Maybe<string>;
   viewDirection: LPSAxisDir;
   viewUp: LPSAxisDir;
-  disableAutoResetCamera?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  disableAutoResetCamera: false,
-});
+const props = defineProps<Props>();
 const {
   viewId: viewID,
   imageId: imageID,
   viewDirection,
   viewUp,
-  disableAutoResetCamera,
 } = toRefs(props);
 
 const vtkContainerRef = ref<HTMLElement>();
 
+const { disableCameraAutoReset } = storeToRefs(useViewCameraStore());
+
 const { metadata: imageMetadata } = useImage(imageID);
 
 // use a detached scope so that actors can be removed from
@@ -95,7 +95,7 @@ function resetCamera() {
   );
 }
 
-watchImmediate([disableAutoResetCamera, viewID, imageID], ([noAutoReset]) => {
+watchImmediate([disableCameraAutoReset, viewID, imageID], ([noAutoReset]) => {
   if (noAutoReset) return;
   resetCamera();
 });

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) => ({
@@ -50,6 +49,9 @@ export function usePersistCameraConfig(
           viewCameraStore.updateConfig(viewIDVal, dataIDVal, {
             [key]: v,
           });
+          if (viewCameraStore.isSync()) {
+            viewCameraStore.updateSyncConfigs();
+          }
         },
       }),
     }),

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,22 @@ const importSingleFile: ImportHandler = async (dataSource, { done }) => {
     );
     fileStore.add(dataID, [dataSource as DataSourceWithFile]);
 
+    // Create a default view for each viewID
+    useViewStore().viewIDs.forEach((viewID: string) => {
+      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