ross/dv3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

allow bar navigation for volume

Browse Source
This commit is contained in:
Ross
2025-06-23 16:27:29 +01:00
parent 865bc956c7
commit 86a7bd143f
1 changed files with 105 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dicom-viewer/src/App.tsx
+105 -8
View File
@@ -1603,7 +1603,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
) {
console.log("Restoring volume slice index for viewport", i, state.volumeSliceIndices[i]);
setTimeout(() => {
csUtilities.jumpToSlice(viewport.element, { imageIndex: state.volumeSliceIndices[i] });
csUtilities.jumpToSlice(viewport.element, { imageIndex: state.volumeSliceIndices[i] });
}, 100);
}
@@ -1645,8 +1645,8 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
delete propsToRestore.colormap;
}
setTimeout(() => {
viewport.setProperties(propsToRestore);
viewport.render();
viewport.setProperties(propsToRestore);
viewport.render();
}, 100);
} else {
console.warn("No properties to restore for viewport", i);
@@ -1661,7 +1661,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
viewport.setCamera(state.cam[i]);
viewport.render();
}
// --- Restore slice index if present ---
// --- Restore slice index if present ---
}
restoringStateRef.current = false;
}
@@ -1941,10 +1941,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
if (!imageIds || imageIds.length === 0) return;
if (e.key === "ArrowUp" || e.key === "ArrowRight") {
csUtilities.scroll(viewport, { delta: -1});
csUtilities.scroll(viewport, { delta: -1 });
e.preventDefault();
} else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
csUtilities.scroll(viewport, { delta: 1});
csUtilities.scroll(viewport, { delta: 1 });
e.preventDefault();
}
}
@@ -1959,10 +1959,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
const numSlices = viewport.getNumberOfSlices();
if (numSlices > 1) {
if (e.key === "ArrowUp" || e.key === "ArrowRight") {
csUtilities.scroll(viewport, { delta: -1});
csUtilities.scroll(viewport, { delta: -1 });
e.preventDefault();
} else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
csUtilities.scroll(viewport, { delta: 1});
csUtilities.scroll(viewport, { delta: 1 });
e.preventDefault();
}
}
@@ -2577,6 +2577,103 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
</div>
</div>
)}
{viewportModes[i] === "volume" && (() => {
const renderingEngine = renderingEngineRef.current;
const viewport = renderingEngine?.getViewport(`CT_${i}`);
let numSlices = 0;
let currentSlice = 0;
if (viewport && typeof viewport.getNumberOfSlices === "function" && typeof viewport.getSliceIndex === "function") {
numSlices = viewport.getNumberOfSlices();
currentSlice = viewport.getSliceIndex();
}
if (numSlices > 1) {
return (
<div
style={{
position: "absolute",
top: "10%",
right: 8,
width: "12px",
height: "80%",
maxHeight: "100%",
minHeight: 0,
zIndex: 30,
display: "flex",
alignItems: "flex-start",
justifyContent: "center",
pointerEvents: "auto", // Enable pointer events for click
flexDirection: "column",
padding: 0,
}}
>
<div
style={{
width: "8px",
height: "100%",
maxHeight: "100%",
minHeight: 0,
borderRadius: "6px",
background: "#222",
position: "relative",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
boxShadow: "0 0 8px #2196f3cc",
overflow: "hidden",
cursor: "pointer",
}}
onClick={e => {
// Calculate the clicked slice index
const bar = e.currentTarget as HTMLDivElement;
const rect = bar.getBoundingClientRect();
const y = e.clientY - rect.top;
const sliceIdx = Math.floor((y / rect.height) * numSlices);
const renderingEngine = renderingEngineRef.current;
const viewport = renderingEngine?.getViewport(`CT_${i}`);
if (
viewport
) {
csUtilities.jumpToSlice(viewport.element, { imageIndex: sliceIdx });
viewport.render();
updateOverlay(i, viewport);
}
}}
>
{Array.from({ length: numSlices }).map((_, idx) => {
const isCurrent = idx === currentSlice;
return (
<div
key={idx}
style={{
width: "100%",
height: `${100 / numSlices}%`,
minHeight: isCurrent ? 1 : 0,
background: isCurrent
? "linear-gradient(to right, #ffeb3b 60%, #ff9800 100%)"
: "#444",
opacity: isCurrent ? 0.95 : 0.4,
transition: "background 0.3s, opacity 0.3s",
borderBottom:
idx < numSlices - 1
? "1px solid #222"
: "none",
pointerEvents: "none", // Prevent child from blocking parent click
cursor: "pointer",
}}
title={
isCurrent
? `Current slice #${idx + 1}`
: `Go to slice #${idx + 1}`
}
/>
);
})}
</div>
</div>
);
}
return null;
})()}
{isVisible && (availableStacks.length > 1 || !viewportImageIds[i] || viewportImageIds[i].length === 0) && (
<div
style={{