Skip to content

Commit a4423e3

Browse files
committed
fix(cine): update slice view controls
1 parent b6d70e9 commit a4423e3

3 files changed

Lines changed: 48 additions & 37 deletions

File tree

src/components/PlayControls.vue

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -149,17 +149,19 @@ function commitFpsInput() {
149149
>
150150
<v-icon size="14">{{ playing ? 'mdi-pause' : 'mdi-play' }}</v-icon>
151151
</button>
152-
<input
153-
:value="fpsInput"
154-
type="number"
155-
:min="MIN_CINE_FPS"
156-
:max="MAX_CINE_FPS"
157-
class="fps-input"
158-
title="Frames per second"
159-
@input="clampFpsInput"
160-
@blur="commitFpsInput"
161-
/>
162-
<span class="fps-suffix">fps</span>
152+
<span class="fps-control">
153+
<input
154+
:value="fpsInput"
155+
type="number"
156+
:min="MIN_CINE_FPS"
157+
:max="MAX_CINE_FPS"
158+
class="fps-input"
159+
title="Frames per second"
160+
@input="clampFpsInput"
161+
@blur="commitFpsInput"
162+
/>
163+
<span class="fps-suffix">FPS</span>
164+
</span>
163165
</div>
164166
</template>
165167

@@ -169,8 +171,8 @@ function commitFpsInput() {
169171
align-items: center;
170172
gap: 4px;
171173
color: #fff;
172-
font-size: 0.8125rem;
173-
line-height: 1;
174+
font-size: inherit;
175+
line-height: inherit;
174176
}
175177
176178
.play-btn {
@@ -190,21 +192,27 @@ function commitFpsInput() {
190192
color: rgba(255, 255, 255, 0.8);
191193
}
192194
195+
.fps-control {
196+
display: inline-flex;
197+
align-items: center;
198+
gap: 4px;
199+
}
200+
193201
.fps-input {
194202
width: 44px;
195203
background: transparent;
196204
color: inherit;
197205
border: none;
198206
padding: 0 4px;
199207
text-align: right;
200-
font-size: inherit;
208+
font: inherit;
201209
}
202210
203211
.fps-input:focus {
204212
outline: 1px solid rgba(255, 255, 255, 0.3);
205213
}
206214
207215
.fps-suffix {
208-
opacity: 0.7;
216+
opacity: 1;
209217
}
210218
</style>

src/components/SliceViewer.vue

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -223,8 +223,21 @@ const viewOptions = computed(
223223
() => viewInfo.value.options as SliceViewerOptions
224224
);
225225
226+
// base image
227+
const {
228+
currentImageID,
229+
currentLayers,
230+
currentImageMetadata,
231+
currentImageData,
232+
isImageLoading,
233+
} = useCurrentImage();
234+
235+
const isCine = computed(() => isCineImage(currentImageID.value));
236+
const effectiveOrientation = computed<LPSAxis>(() =>
237+
isCine.value ? 'Axial' : viewOptions.value.orientation
238+
);
226239
const viewingVectors = computed(() =>
227-
get2DViewingVectors(viewOptions.value.orientation)
240+
get2DViewingVectors(effectiveOrientation.value)
228241
);
229242
const viewDirection = computed(() => viewingVectors.value.viewDirection);
230243
const viewUp = computed(() => viewingVectors.value.viewUp);
@@ -244,14 +257,6 @@ useViewAnimationListener(vtkView, viewId, '2D');
244257
// active tool
245258
const { currentTool } = storeToRefs(useToolStore());
246259
247-
// base image
248-
const {
249-
currentImageID,
250-
currentLayers,
251-
currentImageMetadata,
252-
currentImageData,
253-
isImageLoading,
254-
} = useCurrentImage();
255260
const { slice: currentSlice, range: sliceRange } = useSliceConfig(
256261
viewId,
257262
currentImageID
@@ -267,7 +272,6 @@ const windowingManipulatorProps = computed(() => {
267272
268273
// Scalar probe samples the canonical image; for cine that's frame-0-only.
269274
// Unmount it for cine views and clear any stale probe data on switch.
270-
const isCine = computed(() => isCineImage(currentImageID.value));
271275
const probeStore = useProbeStore();
272276
watch(isCine, (cine) => {
273277
if (cine) probeStore.clearProbeData();

src/components/SliceViewerOverlay.vue

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,14 @@ const {
3939
const { metadata } = useImage(imageId);
4040
4141
const isCine = computed(() => isCineImage(imageId.value));
42+
const showViewTypeSwitcher = computed(
43+
() =>
44+
!isCine.value &&
45+
!viewId.value.includes('-coronal') &&
46+
!viewId.value.includes('-sagittal') &&
47+
!viewId.value.includes('-axial') &&
48+
!viewId.value.includes('-multi-oblique')
49+
);
4250
</script>
4351

4452
<template>
@@ -73,28 +81,19 @@ const isCine = computed(() => isCineImage(imageId.value));
7381
</div>
7482
</div>
7583
</template>
76-
<template v-slot:bottom-center>
77-
<div v-if="isCine" class="annotation-cell" @click.stop>
78-
<play-controls :view-id="viewId" :image-id="imageId" />
79-
</div>
80-
</template>
8184
<template v-slot:top-right>
8285
<div class="annotation-cell">
8386
<dicom-quick-info-button :image-id="imageId"></dicom-quick-info-button>
8487
</div>
8588
</template>
8689
<template #bottom-right>
8790
<div
88-
v-if="
89-
!viewId.includes('-coronal') &&
90-
!viewId.includes('-sagittal') &&
91-
!viewId.includes('-axial') &&
92-
!viewId.includes('-multi-oblique')
93-
"
91+
v-if="isCine || showViewTypeSwitcher"
9492
class="annotation-cell"
9593
@click.stop
9694
>
97-
<ViewTypeSwitcher :view-id="viewId" :image-id="imageId" />
95+
<play-controls v-if="isCine" :view-id="viewId" :image-id="imageId" />
96+
<ViewTypeSwitcher v-else :view-id="viewId" :image-id="imageId" />
9897
</div>
9998
</template>
10099
</view-overlay-grid>

0 commit comments

Comments
 (0)