correct export volume orientation
This commit is contained in:
Ross
@@ -12,7 +12,7 @@
|
||||
data-images="["http://localhost:8000/media/atlas/dicom/0fb1283bab62d691bdaf7c7e47b8c674b600cddb.dcm", "http://localhost:8000/media/atlas/dicom/c98950f460ed153c14bd1d0d32e712397ace4564.dcm", "http://localhost:8000/media/atlas/dicom/512bfc7f9d07d54ae8f92af1ab98be390174d618.dcm", "http://localhost:8000/media/atlas/dicom/5f0a6b97da797b7639361732599bfcf607c17dfc.dcm", "http://localhost:8000/media/atlas/dicom/c5f854a8c2ac36da60c8a5a2bc215639d5302d20.dcm", "http://localhost:8000/media/atlas/dicom/0cec8d98bd80818c38c657b9c5934b30316920a2.dcm", "http://localhost:8000/media/atlas/dicom/613166d33e9e35898238f0bd334969c500822bbf.dcm", "http://localhost:8000/media/atlas/dicom/48801a3aa1fea5d943cc934b74e9bc7273c1e944.dcm", "http://localhost:8000/media/atlas/dicom/db8ddb477387a41b023efae98e7e40be890886ef.dcm", "http://localhost:8000/media/atlas/dicom/8720dc9b0b3b2c596f1d87acc951818307b7ad6a.dcm", "http://localhost:8000/media/atlas/dicom/24d1e5397fa97dd0c904568a20e4649fea13d1cf.dcm", "http://localhost:8000/media/atlas/dicom/bb586d17474988a07b1c90afce456abd7f69a753.dcm", "http://localhost:8000/media/atlas/dicom/24fa49c0e482bb885c92b71f74451f558940cb4b.dcm", "http://localhost:8000/media/atlas/dicom/6d9b09614f74b21a0b2778a5129d22b3cbafd3da.dcm", "http://localhost:8000/media/atlas/dicom/39963ce191beafe943a9cf980f7320adad74c1d5.dcm", "http://localhost:8000/media/atlas/dicom/09adc694456f1e51a5ab9c1cf7eaf9d748c938db.dcm", "http://localhost:8000/media/atlas/dicom/d4f6521a9e9a26975e1218ba3b7f48a78ac46d8f.dcm", "http://localhost:8000/media/atlas/dicom/0e1490ed17cdf2ceb1bcf069400f8f47a4437561.dcm", "http://localhost:8000/media/atlas/dicom/2cb43b50760d9335df9a5f2d6bd645daf2a0c917.dcm", "http://localhost:8000/media/atlas/dicom/9b02fae29bf6e775c5ba94b0b7158e10d4697ff6.dcm", "http://localhost:8000/media/atlas/dicom/9628d1d2fb457bc6f03efa8c980ef3165092230f.dcm", "http://localhost:8000/media/atlas/dicom/b879d6488a79d38ba374366f5543aab49fa8cb86.dcm"]"
|
||||
|
||||
data-auto-cache-stack="true"
|
||||
data-viewerstate='{"grid":{"rows":1,"cols":3},"modes":["stack","stack","volume"],"stacks":[{"i":["wadouri:http://localhost:8000/media/atlas/dicom/b879d6488a79d38ba374366f5543aab49fa8cb86.dcm","wadouri:http://localhost:8000/media/atlas/dicom/9628d1d2fb457bc6f03efa8c980ef3165092230f.dcm","wadouri:http://localhost:8000/media/atlas/dicom/9b02fae29bf6e775c5ba94b0b7158e10d4697ff6.dcm","wadouri:http://localhost:8000/media/atlas/dicom/2cb43b50760d9335df9a5f2d6bd645daf2a0c917.dcm","wadouri:http://localhost:8000/media/atlas/dicom/0e1490ed17cdf2ceb1bcf069400f8f47a4437561.dcm","wadouri:http://localhost:8000/media/atlas/dicom/d4f6521a9e9a26975e1218ba3b7f48a78ac46d8f.dcm","wadouri:http://localhost:8000/media/atlas/dicom/09adc694456f1e51a5ab9c1cf7eaf9d748c938db.dcm","wadouri:http://localhost:8000/media/atlas/dicom/39963ce191beafe943a9cf980f7320adad74c1d5.dcm","wadouri:http://localhost:8000/media/atlas/dicom/6d9b09614f74b21a0b2778a5129d22b3cbafd3da.dcm","wadouri:http://localhost:8000/media/atlas/dicom/24fa49c0e482bb885c92b71f74451f558940cb4b.dcm","wadouri:http://localhost:8000/media/atlas/dicom/bb586d17474988a07b1c90afce456abd7f69a753.dcm","wadouri:http://localhost:8000/media/atlas/dicom/24d1e5397fa97dd0c904568a20e4649fea13d1cf.dcm","wadouri:http://localhost:8000/media/atlas/dicom/8720dc9b0b3b2c596f1d87acc951818307b7ad6a.dcm","wadouri:http://localhost:8000/media/atlas/dicom/db8ddb477387a41b023efae98e7e40be890886ef.dcm","wadouri:http://localhost:8000/media/atlas/dicom/48801a3aa1fea5d943cc934b74e9bc7273c1e944.dcm","wadouri:http://localhost:8000/media/atlas/dicom/613166d33e9e35898238f0bd334969c500822bbf.dcm","wadouri:http://localhost:8000/media/atlas/dicom/0cec8d98bd80818c38c657b9c5934b30316920a2.dcm","wadouri:http://localhost:8000/media/atlas/dicom/c5f854a8c2ac36da60c8a5a2bc215639d5302d20.dcm","wadouri:http://localhost:8000/media/atlas/dicom/5f0a6b97da797b7639361732599bfcf607c17dfc.dcm","wadouri:http://localhost:8000/media/atlas/dicom/512bfc7f9d07d54ae8f92af1ab98be390174d618.dcm","wadouri:http://localhost:8000/media/atlas/dicom/c98950f460ed153c14bd1d0d32e712397ace4564.dcm","wadouri:http://localhost:8000/media/atlas/dicom/0fb1283bab62d691bdaf7c7e47b8c674b600cddb.dcm"],"u":"2.1163931708166249655895918785713305273005"}],"stackIdx":[0,0,0],"stackPos":[0,0,195],"props":[{"voiRange":{"lower":137.5,"upper":1967.5},"invert":false,"interpolationType":1,"VOILUTFunction":"LINEAR"},{"voiRange":{"lower":137.5,"upper":1967.5},"invert":false,"interpolationType":1,"VOILUTFunction":"LINEAR"},{"voiRange":{"lower":140,"upper":1999},"invert":false,"colormap":{"name":"Grayscale","opacity":1,"threshold":null}}],"cam":[{"viewUp":[-0.015545368194580078,-0.12045262008905411,0.9925973415374756],"viewPlaneNormal":[0.9998766662057034,-0.00409140293321022,0.015162875697125405],"position":[150.10646385504754,-62.737490075094016,23.212950690129],"focalPoint":[-66.0533860650337,-61.85298394159119,19.934941465766144],"parallelProjection":true,"parallelScale":170.33890849893743,"viewAngle":90,"flipHorizontal":false,"flipVertical":false,"rotation":0},{"viewUp":[-0.015545368194580078,-0.12045262008905411,0.9925973415374756],"viewPlaneNormal":[0.9998766662057034,-0.00409140293321022,0.015162875697125405],"position":[150.10646385504754,-62.737490075094016,23.212950690129],"focalPoint":[-66.0533860650337,-61.85298394159119,19.934941465766144],"parallelProjection":true,"parallelScale":193.61549696093098,"viewAngle":90,"flipHorizontal":false,"flipVertical":false,"rotation":0},{"viewUp":[0,0,1],"viewPlaneNormal":[0,-1,0],"position":[-6.060784295600456,-289.53396115406485,20.844714115543866],"focalPoint":[-6.060784295600456,-62.09846953239139,20.844714115543866],"parallelProjection":true,"parallelScale":150.85189284207627,"viewAngle":90,"flipHorizontal":false,"flipVertical":false,"rotation":0}]}'
|
||||
data-viewerstate='{"grid":{"rows":1,"cols":3},"modes":["stack","volume","volume"],"stacks":[{"i":["wadouri:http://localhost:8000/media/atlas/dicom/b879d6488a79d38ba374366f5543aab49fa8cb86.dcm","wadouri:http://localhost:8000/media/atlas/dicom/9628d1d2fb457bc6f03efa8c980ef3165092230f.dcm","wadouri:http://localhost:8000/media/atlas/dicom/9b02fae29bf6e775c5ba94b0b7158e10d4697ff6.dcm","wadouri:http://localhost:8000/media/atlas/dicom/2cb43b50760d9335df9a5f2d6bd645daf2a0c917.dcm","wadouri:http://localhost:8000/media/atlas/dicom/0e1490ed17cdf2ceb1bcf069400f8f47a4437561.dcm","wadouri:http://localhost:8000/media/atlas/dicom/d4f6521a9e9a26975e1218ba3b7f48a78ac46d8f.dcm","wadouri:http://localhost:8000/media/atlas/dicom/09adc694456f1e51a5ab9c1cf7eaf9d748c938db.dcm","wadouri:http://localhost:8000/media/atlas/dicom/39963ce191beafe943a9cf980f7320adad74c1d5.dcm","wadouri:http://localhost:8000/media/atlas/dicom/6d9b09614f74b21a0b2778a5129d22b3cbafd3da.dcm","wadouri:http://localhost:8000/media/atlas/dicom/24fa49c0e482bb885c92b71f74451f558940cb4b.dcm","wadouri:http://localhost:8000/media/atlas/dicom/bb586d17474988a07b1c90afce456abd7f69a753.dcm","wadouri:http://localhost:8000/media/atlas/dicom/24d1e5397fa97dd0c904568a20e4649fea13d1cf.dcm","wadouri:http://localhost:8000/media/atlas/dicom/8720dc9b0b3b2c596f1d87acc951818307b7ad6a.dcm","wadouri:http://localhost:8000/media/atlas/dicom/db8ddb477387a41b023efae98e7e40be890886ef.dcm","wadouri:http://localhost:8000/media/atlas/dicom/48801a3aa1fea5d943cc934b74e9bc7273c1e944.dcm","wadouri:http://localhost:8000/media/atlas/dicom/613166d33e9e35898238f0bd334969c500822bbf.dcm","wadouri:http://localhost:8000/media/atlas/dicom/0cec8d98bd80818c38c657b9c5934b30316920a2.dcm","wadouri:http://localhost:8000/media/atlas/dicom/c5f854a8c2ac36da60c8a5a2bc215639d5302d20.dcm","wadouri:http://localhost:8000/media/atlas/dicom/5f0a6b97da797b7639361732599bfcf607c17dfc.dcm","wadouri:http://localhost:8000/media/atlas/dicom/512bfc7f9d07d54ae8f92af1ab98be390174d618.dcm","wadouri:http://localhost:8000/media/atlas/dicom/c98950f460ed153c14bd1d0d32e712397ace4564.dcm","wadouri:http://localhost:8000/media/atlas/dicom/0fb1283bab62d691bdaf7c7e47b8c674b600cddb.dcm"],"u":"2.1163931708166249655895918785713305273005"}],"stackIdx":[0,0,0],"stackPos":[0,13,195],"props":[{"voiRange":{"lower":141.5,"upper":2021.5},"invert":false,"interpolationType":1,"VOILUTFunction":"LINEAR"},{"voiRange":{"lower":140,"upper":1999},"invert":false,"colormap":{"name":"Grayscale","opacity":1,"threshold":null}},{"voiRange":{"lower":140,"upper":1999},"invert":false,"colormap":{"name":"Grayscale","opacity":1,"threshold":null}}],"cam":[{"viewUp":[-0.015545368194580078,-0.12045262008905411,0.9925973415374756],"viewPlaneNormal":[0.9998766662057034,-0.00409140293321022,0.015162875697125405],"position":[276.090926593084,-63.25300826357402,25.12347315106698],"focalPoint":[59.93107667300279,-62.36850213007119,21.845463926704127],"parallelProjection":true,"parallelScale":170.33890849893743,"viewAngle":90,"flipHorizontal":false,"flipVertical":false,"rotation":0},{"viewUp":[0,0,1],"viewPlaneNormal":[1,0,0],"position":[236.29447599313886,-62.09846953239139,20.844714115543866],"focalPoint":[8.858990153295125,-62.09846953239139,20.844714115543866],"parallelProjection":true,"parallelScale":157.88941096127814,"viewAngle":90,"flipHorizontal":false,"flipVertical":false,"rotation":0},{"viewUp":[0,0,1],"viewPlaneNormal":[0,-1,0],"position":[-6.060784295600456,-289.53396115406485,20.844714115543866],"focalPoint":[-6.060784295600456,-62.09846953239139,20.844714115543866],"parallelProjection":true,"parallelScale":150.85189284207627,"viewAngle":90,"flipHorizontal":false,"flipVertical":false,"rotation":0}],"orientations":[null,"coronal","sagittal"],"volumeSliceIndices":[null,13,195]}'
|
||||
|
||||
></div>
|
||||
<!-- <div id="root2" class="dicom-viewer-root" style="max-height:500px; height:500px; overflow:auto;"
|
||||
|
||||
+148
-86
@@ -1334,6 +1334,19 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
||||
}
|
||||
}
|
||||
// Attach to window with a unique name
|
||||
|
||||
window[`getViewport_${apiKey}`] = (idx: number) => {
|
||||
const renderingEngine = renderingEngineRef.current;
|
||||
if (!renderingEngine) return undefined;
|
||||
return renderingEngine.getViewport(`CT_${idx}`);
|
||||
};
|
||||
window[`getAllViewports_${apiKey}`] = () => {
|
||||
const renderingEngine = renderingEngineRef.current;
|
||||
if (!renderingEngine) return [];
|
||||
// Return all currently active viewports as an array
|
||||
return Array.from({ length: MAX_VIEWPORTS }, (_, i) => renderingEngine.getViewport(`CT_${i}`)).filter(Boolean);
|
||||
};
|
||||
|
||||
window[`jumpToSliceByImageId_${apiKey}`] = jumpToSliceByImageId;
|
||||
window[`resetViewer_${apiKey}`] = resetViewer;
|
||||
window[`truncateStack_${apiKey}`] = truncateStack;
|
||||
@@ -1376,15 +1389,21 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
||||
i: s.imageIds, // imageIds
|
||||
u: s.studyInstanceUID // studyInstanceUID
|
||||
}));
|
||||
console.log("Exporting viewer state with", numActive, "active viewports");
|
||||
console.log("modes", modes);
|
||||
|
||||
// Only keep minimal properties
|
||||
const renderingEngine = renderingEngineRef.current;
|
||||
const props: any[] = [];
|
||||
const stackPos: number[] = [];
|
||||
const cam: any[] = [];
|
||||
const orientations: (string | null)[] = [];
|
||||
const volumeSliceIndices: (number | null)[] = [];
|
||||
for (let i = 0; i < numActive; i++) {
|
||||
let p = null, s = null, c = null;
|
||||
let p = null, s = null, c = null, o = null, vIdx = null;
|
||||
console.log("Exporting state for viewport", i);
|
||||
if (renderingEngine) {
|
||||
console.log("Rendering engine found, exporting state for viewport", i);
|
||||
const viewportId = `CT_${i}`;
|
||||
const viewport = renderingEngine.getViewport(viewportId);
|
||||
if (viewport) {
|
||||
@@ -1398,11 +1417,23 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
||||
if (typeof viewport.getCamera === "function") {
|
||||
c = viewport.getCamera();
|
||||
}
|
||||
console.log("viewport", viewportId, "properties", p);
|
||||
// --- Volume orientation and slice index ---
|
||||
if (modes[i] === "volume") {
|
||||
console.log("Getting orientation for viewport", i);
|
||||
console.log("viewport.viewportProperties", viewport.viewportProperties);
|
||||
o = viewport.viewportProperties?.orientation || null;
|
||||
if (typeof viewport.getSliceIndex === "function") {
|
||||
vIdx = viewport.getSliceIndex();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
props.push(p);
|
||||
stackPos.push(s);
|
||||
cam.push(c);
|
||||
orientations.push(o);
|
||||
volumeSliceIndices.push(vIdx);
|
||||
}
|
||||
|
||||
// Use short keys for compactness
|
||||
@@ -1414,6 +1445,8 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
||||
stackPos,
|
||||
props,
|
||||
cam,
|
||||
orientations, // <-- add this
|
||||
volumeSliceIndices, // <-- add this
|
||||
};
|
||||
return JSON.stringify(state);
|
||||
};
|
||||
@@ -1440,6 +1473,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
||||
const maxAttempts = 30;
|
||||
let attempts = 0;
|
||||
|
||||
// eslint-disable-next-line no-inner-declarations
|
||||
async function tryRestore() {
|
||||
const renderingEngine = renderingEngineRef.current;
|
||||
if (!renderingEngine) {
|
||||
@@ -1448,29 +1482,33 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
|
||||
}
|
||||
const numActive = state.grid?.rows * state.grid?.cols || 1;
|
||||
let allReady = true;
|
||||
for (let i = 0; i < numActive; i++) {
|
||||
const viewport = renderingEngine.getViewport(`CT_${i}`);
|
||||
if (!viewport) { allReady = false; break; }
|
||||
const stackIdx = state.stackIdx?.[i];
|
||||
const stackObj = state.stacks?.[stackIdx];
|
||||
const importedImageIds = stackObj?.i || [];
|
||||
if (!importedImageIds.length) continue;
|
||||
const viewportImageIds = viewport.getImageIds?.() || [];
|
||||
if (
|
||||
viewportImageIds.length !== importedImageIds.length ||
|
||||
!viewportImageIds.every((id, idx) => id === importedImageIds[idx])
|
||||
) {
|
||||
console.warn(
|
||||
`Viewport ${i}: importedImageIds do not match viewportImageIds`,
|
||||
{ importedImageIds, viewportImageIds }
|
||||
);
|
||||
allReady = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < numActive; i++) {
|
||||
console.log("Checking viewport", i);
|
||||
const viewport = renderingEngine.getViewport(`CT_${i}`);
|
||||
if (!viewport) { allReady = false; break; }
|
||||
const stackIdx = state.stackIdx?.[i];
|
||||
const stackObj = state.stacks?.[stackIdx];
|
||||
const importedImageIds = stackObj?.i || [];
|
||||
console.log("Checking viewport", i, "with importedImageIds", importedImageIds);
|
||||
console.log("viewport", viewport);
|
||||
console.log("viewport.getImageIds", viewport.getImageIds?.());
|
||||
if (!importedImageIds.length) continue;
|
||||
const viewportImageIds = viewport.getImageIds?.() || [];
|
||||
if (
|
||||
viewportImageIds.length !== importedImageIds.length ||
|
||||
!viewportImageIds.every((id, idx) => id === importedImageIds[idx])
|
||||
) {
|
||||
console.warn(
|
||||
`Viewport ${i}: importedImageIds do not match viewportImageIds`,
|
||||
{ importedImageIds, viewportImageIds }
|
||||
);
|
||||
allReady = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!allReady && attempts < maxAttempts) {
|
||||
attempts++;
|
||||
setTimeout(() => { tryRestore(); }, 100);
|
||||
setTimeout(() => { tryRestore(); }, 500);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1490,11 +1528,33 @@ for (let i = 0; i < numActive; i++) {
|
||||
if (state.modes?.[i] === "volume") {
|
||||
// --- Restore volume ---
|
||||
console.log("Restoring volume for viewport", i, importedImageIds);
|
||||
const volumeId = `myVolumeId_${i}`;
|
||||
const volume = await volumeLoader.createAndCacheVolume(volumeId, { imageIds: importedImageIds });
|
||||
volume.load();
|
||||
viewport.setVolumes([{ volumeId }]);
|
||||
viewport.render();
|
||||
const volumeId = `myVolumeId_${i}`;
|
||||
const volume = await volumeLoader.createAndCacheVolume(volumeId, { imageIds: importedImageIds });
|
||||
volume.load();
|
||||
viewport.setVolumes([{ volumeId }]);
|
||||
// --- Restore orientation if present ---
|
||||
if (state.orientations && state.orientations[i] && typeof viewport.setOrientation === "function") {
|
||||
try {
|
||||
viewport.setOrientation(state.orientations[i]);
|
||||
viewport.render();
|
||||
} catch (e) {
|
||||
console.warn("Failed to restore orientation for viewport", i, e);
|
||||
}
|
||||
}
|
||||
// --- Restore slice index if present ---
|
||||
if (
|
||||
state.volumeSliceIndices &&
|
||||
typeof state.volumeSliceIndices[i] === "number" &&
|
||||
typeof viewport.setSliceIndex === "function"
|
||||
) {
|
||||
try {
|
||||
viewport.setSliceIndex(state.volumeSliceIndices[i]);
|
||||
viewport.render();
|
||||
} catch (e) {
|
||||
console.warn("Failed to restore slice index for viewport", i, e);
|
||||
}
|
||||
}
|
||||
viewport.render();
|
||||
} else {
|
||||
// --- Restore stack ---
|
||||
if (viewport.setStack) {
|
||||
@@ -1548,7 +1608,7 @@ for (let i = 0; i < numActive; i++) {
|
||||
}
|
||||
|
||||
// Delay start until after next paint
|
||||
setTimeout(() => { tryRestore(); }, 0);
|
||||
setTimeout(() => { tryRestore(); }, 0);
|
||||
|
||||
} catch (e) {
|
||||
restoringStateRef.current = false;
|
||||
@@ -1781,6 +1841,8 @@ for (let i = 0; i < numActive; i++) {
|
||||
window[`truncateStack_${apiKey}`] = undefined;
|
||||
window[`getCurrentStackPosition_${apiKey}`] = undefined;
|
||||
window[`loadAdditionalStack_${apiKey}`] = undefined;
|
||||
window[`getViewport_${apiKey}`] = undefined;
|
||||
window[`getAllViewports_${apiKey}`] = undefined;
|
||||
};
|
||||
}, [
|
||||
viewportGrid,
|
||||
@@ -1799,69 +1861,69 @@ for (let i = 0; i < numActive; i++) {
|
||||
]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
function handleArrowKeyNavigation(e: KeyboardEvent) {
|
||||
if (activeViewport === null) return;
|
||||
const renderingEngine = renderingEngineRef.current;
|
||||
if (!renderingEngine) return;
|
||||
const viewport = renderingEngine.getViewport(`CT_${activeViewport}`);
|
||||
if (!viewport) return;
|
||||
useEffect(() => {
|
||||
function handleArrowKeyNavigation(e: KeyboardEvent) {
|
||||
if (activeViewport === null) return;
|
||||
const renderingEngine = renderingEngineRef.current;
|
||||
if (!renderingEngine) return;
|
||||
const viewport = renderingEngine.getViewport(`CT_${activeViewport}`);
|
||||
if (!viewport) return;
|
||||
|
||||
// --- Stack mode navigation ---
|
||||
if (viewportModes[activeViewport] === "stack") {
|
||||
if (
|
||||
typeof viewport.getCurrentImageIdIndex !== "function" ||
|
||||
typeof viewport.setImageIdIndex !== "function"
|
||||
) return;
|
||||
const imageIds = viewportImageIds[activeViewport];
|
||||
if (!imageIds || imageIds.length === 0) return;
|
||||
let idx = viewport.getCurrentImageIdIndex();
|
||||
// --- Stack mode navigation ---
|
||||
if (viewportModes[activeViewport] === "stack") {
|
||||
if (
|
||||
typeof viewport.getCurrentImageIdIndex !== "function" ||
|
||||
typeof viewport.setImageIdIndex !== "function"
|
||||
) return;
|
||||
const imageIds = viewportImageIds[activeViewport];
|
||||
if (!imageIds || imageIds.length === 0) return;
|
||||
let idx = viewport.getCurrentImageIdIndex();
|
||||
|
||||
if (e.key === "ArrowUp" || e.key === "ArrowRight") {
|
||||
idx = idx < imageIds.length - 1 ? idx + 1 : 0;
|
||||
csUtilities.jumpToSlice(viewport.element, { imageIndex: idx });
|
||||
updateOverlay(activeViewport, viewport);
|
||||
e.preventDefault();
|
||||
} else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
|
||||
idx = idx > 0 ? idx - 1 : imageIds.length - 1;
|
||||
csUtilities.jumpToSlice(viewport.element, { imageIndex: idx });
|
||||
updateOverlay(activeViewport, viewport);
|
||||
e.preventDefault();
|
||||
if (e.key === "ArrowUp" || e.key === "ArrowRight") {
|
||||
idx = idx < imageIds.length - 1 ? idx + 1 : 0;
|
||||
csUtilities.jumpToSlice(viewport.element, { imageIndex: idx });
|
||||
updateOverlay(activeViewport, viewport);
|
||||
e.preventDefault();
|
||||
} else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
|
||||
idx = idx > 0 ? idx - 1 : imageIds.length - 1;
|
||||
csUtilities.jumpToSlice(viewport.element, { imageIndex: idx });
|
||||
updateOverlay(activeViewport, viewport);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
// --- Volume mode navigation ---
|
||||
if (viewportModes[activeViewport] === "volume") {
|
||||
// Try to scroll through slices in the current orientation
|
||||
if (
|
||||
typeof viewport.getSliceIndex === "function" &&
|
||||
typeof viewport.setSliceIndex === "function" &&
|
||||
typeof viewport.getNumberOfSlices === "function"
|
||||
) {
|
||||
const numSlices = viewport.getNumberOfSlices();
|
||||
let idx = viewport.getSliceIndex();
|
||||
if (numSlices > 1) {
|
||||
if (e.key === "ArrowUp" || e.key === "ArrowRight") {
|
||||
idx = idx < numSlices - 1 ? idx + 1 : 0;
|
||||
viewport.setSliceIndex(idx);
|
||||
viewport.render();
|
||||
updateOverlay(activeViewport, viewport);
|
||||
e.preventDefault();
|
||||
} else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
|
||||
idx = idx > 0 ? idx - 1 : numSlices - 1;
|
||||
viewport.setSliceIndex(idx);
|
||||
viewport.render();
|
||||
updateOverlay(activeViewport, viewport);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Volume mode navigation ---
|
||||
if (viewportModes[activeViewport] === "volume") {
|
||||
// Try to scroll through slices in the current orientation
|
||||
if (
|
||||
typeof viewport.getSliceIndex === "function" &&
|
||||
typeof viewport.setSliceIndex === "function" &&
|
||||
typeof viewport.getNumberOfSlices === "function"
|
||||
) {
|
||||
const numSlices = viewport.getNumberOfSlices();
|
||||
let idx = viewport.getSliceIndex();
|
||||
if (numSlices > 1) {
|
||||
if (e.key === "ArrowUp" || e.key === "ArrowRight") {
|
||||
idx = idx < numSlices - 1 ? idx + 1 : 0;
|
||||
viewport.setSliceIndex(idx);
|
||||
viewport.render();
|
||||
updateOverlay(activeViewport, viewport);
|
||||
e.preventDefault();
|
||||
} else if (e.key === "ArrowDown" || e.key === "ArrowLeft") {
|
||||
idx = idx > 0 ? idx - 1 : numSlices - 1;
|
||||
viewport.setSliceIndex(idx);
|
||||
viewport.render();
|
||||
updateOverlay(activeViewport, viewport);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", handleArrowKeyNavigation);
|
||||
return () => window.removeEventListener("keydown", handleArrowKeyNavigation);
|
||||
}, [activeViewport, viewportModes, viewportImageIds, updateOverlay]);
|
||||
window.addEventListener("keydown", handleArrowKeyNavigation);
|
||||
return () => window.removeEventListener("keydown", handleArrowKeyNavigation);
|
||||
}, [activeViewport, viewportModes, viewportImageIds, updateOverlay]);
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user