fix(cine): update slice view controls

Author: PaulHax

src/components/PlayControls.vue

@@ -149,17 +149,19 @@ function commitFpsInput() {
     >
       <v-icon size="14">{{ playing ? 'mdi-pause' : 'mdi-play' }}</v-icon>
     </button>
-    <input
-      :value="fpsInput"
-      type="number"
-      :min="MIN_CINE_FPS"
-      :max="MAX_CINE_FPS"
-      class="fps-input"
-      title="Frames per second"
-      @input="clampFpsInput"
-      @blur="commitFpsInput"
-    />
-    <span class="fps-suffix">fps</span>
+    <span class="fps-control">
+      <input
+        :value="fpsInput"
+        type="number"
+        :min="MIN_CINE_FPS"
+        :max="MAX_CINE_FPS"
+        class="fps-input"
+        title="Frames per second"
+        @input="clampFpsInput"
+        @blur="commitFpsInput"
+      />
+      <span class="fps-suffix">FPS</span>
+    </span>
   </div>
 </template>
 
@@ -169,8 +171,8 @@ function commitFpsInput() {
   align-items: center;
   gap: 4px;
   color: #fff;
-  font-size: 0.8125rem;
-  line-height: 1;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .play-btn {
@@ -190,21 +192,27 @@ function commitFpsInput() {
   color: rgba(255, 255, 255, 0.8);
 }
 
+.fps-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .fps-input {
   width: 44px;
   background: transparent;
   color: inherit;
   border: none;
   padding: 0 4px;
   text-align: right;
-  font-size: inherit;
+  font: inherit;
 }
 
 .fps-input:focus {
   outline: 1px solid rgba(255, 255, 255, 0.3);
 }
 
 .fps-suffix {
-  opacity: 0.7;
+  opacity: 1;
 }
 </style>

src/components/SliceViewer.vue

@@ -223,8 +223,21 @@ const viewOptions = computed(
   () => viewInfo.value.options as SliceViewerOptions
 );
 
+// base image
+const {
+  currentImageID,
+  currentLayers,
+  currentImageMetadata,
+  currentImageData,
+  isImageLoading,
+} = useCurrentImage();
+
+const isCine = computed(() => isCineImage(currentImageID.value));
+const effectiveOrientation = computed<LPSAxis>(() =>
+  isCine.value ? 'Axial' : viewOptions.value.orientation
+);
 const viewingVectors = computed(() =>
-  get2DViewingVectors(viewOptions.value.orientation)
+  get2DViewingVectors(effectiveOrientation.value)
 );
 const viewDirection = computed(() => viewingVectors.value.viewDirection);
 const viewUp = computed(() => viewingVectors.value.viewUp);
@@ -244,14 +257,6 @@ useViewAnimationListener(vtkView, viewId, '2D');
 // active tool
 const { currentTool } = storeToRefs(useToolStore());
 
-// base image
-const {
-  currentImageID,
-  currentLayers,
-  currentImageMetadata,
-  currentImageData,
-  isImageLoading,
-} = useCurrentImage();
 const { slice: currentSlice, range: sliceRange } = useSliceConfig(
   viewId,
   currentImageID
@@ -267,7 +272,6 @@ const windowingManipulatorProps = computed(() => {
 
 // Scalar probe samples the canonical image; for cine that's frame-0-only.
 // Unmount it for cine views and clear any stale probe data on switch.
-const isCine = computed(() => isCineImage(currentImageID.value));
 const probeStore = useProbeStore();
 watch(isCine, (cine) => {
   if (cine) probeStore.clearProbeData();

src/components/SliceViewerOverlay.vue

@@ -39,6 +39,14 @@ const {
 const { metadata } = useImage(imageId);
 
 const isCine = computed(() => isCineImage(imageId.value));
+const showViewTypeSwitcher = computed(
+  () =>
+    !isCine.value &&
+    !viewId.value.includes('-coronal') &&
+    !viewId.value.includes('-sagittal') &&
+    !viewId.value.includes('-axial') &&
+    !viewId.value.includes('-multi-oblique')
+);
 </script>
 
 <template>
@@ -73,28 +81,19 @@ const isCine = computed(() => isCineImage(imageId.value));
         </div>
       </div>
     </template>
-    <template v-slot:bottom-center>
-      <div v-if="isCine" class="annotation-cell" @click.stop>
-        <play-controls :view-id="viewId" :image-id="imageId" />
-      </div>
-    </template>
     <template v-slot:top-right>
       <div class="annotation-cell">
         <dicom-quick-info-button :image-id="imageId"></dicom-quick-info-button>
       </div>
     </template>
     <template #bottom-right>
       <div
-        v-if="
-          !viewId.includes('-coronal') &&
-          !viewId.includes('-sagittal') &&
-          !viewId.includes('-axial') &&
-          !viewId.includes('-multi-oblique')
-        "
+        v-if="isCine || showViewTypeSwitcher"
         class="annotation-cell"
         @click.stop
       >
-        <ViewTypeSwitcher :view-id="viewId" :image-id="imageId" />
+        <play-controls v-if="isCine" :view-id="viewId" :image-id="imageId" />
+        <ViewTypeSwitcher v-else :view-id="viewId" :image-id="imageId" />
       </div>
     </template>
   </view-overlay-grid>