a lot of fixes
This commit is contained in:
+34
-23
@@ -398,7 +398,7 @@ function App({ container_id, imageStacks, autoCacheStack, ...props }: AppProps)
|
||||
const [metaModalOpen, setMetaModalOpen] = useState(false);
|
||||
const [metaModalContent, setMetaModalContent] = useState<any>(null);
|
||||
|
||||
const handleSelectAnnotation = (viewportIdx: number, uid: string | null) => {
|
||||
const handleSelectAnnotation = (viewportIdx: number, uid: string | null) => {
|
||||
// Use the official selection API for Cornerstone3D Tools
|
||||
if (cornerstoneTools?.annotation?.selection?.setAnnotationSelected) {
|
||||
cornerstoneTools.annotation.selection.setAnnotationSelected(uid);
|
||||
@@ -410,9 +410,9 @@ const handleSelectAnnotation = (viewportIdx: number, uid: string | null) => {
|
||||
next[viewportIdx] = uid;
|
||||
return next;
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const handleDeleteAnnotation = (viewportIdx: number, uid: string, currentAnnotations: any[]) => {
|
||||
const handleDeleteAnnotation = (viewportIdx: number, uid: string, currentAnnotations: any[]) => {
|
||||
const allAnnotations = cornerstoneTools.annotation.state.getAllAnnotations() || [];
|
||||
allAnnotations.forEach(ann => {
|
||||
if (ann.annotationUID === uid) ann.isSelected = false;
|
||||
@@ -433,7 +433,7 @@ const handleDeleteAnnotation = (viewportIdx: number, uid: string, currentAnnotat
|
||||
renderingEngineRef.current.render();
|
||||
return next;
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// Add this function to gather and format metadata:
|
||||
const handleShowMetadata = () => {
|
||||
@@ -510,7 +510,7 @@ const handleDeleteAnnotation = (viewportIdx: number, uid: string, currentAnnotat
|
||||
|
||||
const [altPressed, setAltPressed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
const mainToolGroup = ToolGroupManager.getToolGroup(MAIN_TOOL_GROUP_ID);
|
||||
if (!mainToolGroup) return;
|
||||
|
||||
@@ -530,7 +530,7 @@ useEffect(() => {
|
||||
selectedColor: '#ffeb3b', // yellow for selected
|
||||
});
|
||||
});
|
||||
}, [MAIN_TOOL_GROUP_ID]);
|
||||
}, [MAIN_TOOL_GROUP_ID]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
@@ -1161,7 +1161,10 @@ useEffect(() => {
|
||||
const viewport = renderingEngine.getViewport(`CT_${viewportIdx}`);
|
||||
if (!viewport || typeof viewport.getImageIds !== "function") return;
|
||||
const imageIds = viewport.getImageIds();
|
||||
const idx = imageIds.indexOf(imageId);
|
||||
// Some stacks may have imageIds with or without "wadouri:" prefix, so normalize for comparison
|
||||
const normImageIds = imageIds.map(id => id.replace(/^wadouri:/, ""));
|
||||
const normTarget = imageId.replace(/^wadouri:/, "");
|
||||
const idx = normImageIds.indexOf(normTarget);
|
||||
if (idx !== -1 && typeof viewport.setImageIdIndex === "function") {
|
||||
csUtilities.jumpToSlice(viewport.element, { imageIndex: idx });
|
||||
updateOverlay(viewportIdx, viewport);
|
||||
@@ -1351,6 +1354,11 @@ useEffect(() => {
|
||||
};
|
||||
|
||||
window[`importLegacyAnnotations_${apiKey}`] = (json: string) => {
|
||||
// Remove all existing annotations
|
||||
if (cornerstoneTools.annotation.state.removeAllAnnotations) {
|
||||
cornerstoneTools.annotation.state.removeAllAnnotations();
|
||||
}
|
||||
|
||||
let legacyData: any;
|
||||
try {
|
||||
legacyData = typeof json === "string" ? JSON.parse(json) : json;
|
||||
@@ -1359,17 +1367,13 @@ useEffect(() => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove all existing annotations
|
||||
if (cornerstoneTools.annotation.state.removeAllAnnotations) {
|
||||
cornerstoneTools.annotation.state.removeAllAnnotations();
|
||||
}
|
||||
|
||||
const toolNameMap: Record<string, string> = {
|
||||
ArrowAnnotate: "ArrowAnnotate",
|
||||
// Add more mappings if needed
|
||||
};
|
||||
|
||||
Object.entries(legacyData).forEach(([imageId, tools]) => {
|
||||
console.log("Importing legacy annotations for imageId:", imageId);
|
||||
Object.entries(tools as any).forEach(([legacyTool, toolData]: [string, any]) => {
|
||||
const cs3Tool = toolNameMap[legacyTool] || legacyTool;
|
||||
if (toolData.data && Array.isArray(toolData.data)) {
|
||||
@@ -1410,8 +1414,11 @@ useEffect(() => {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// --- Add rotation if present in legacy annotation ---
|
||||
// Does this actually exist?
|
||||
if (typeof ann.rotation === "number") {
|
||||
metadata.rotation = ann.rotation;
|
||||
}
|
||||
|
||||
const annotation = {
|
||||
annotationUID: ann.uuid, // || cornerstoneTools.utilities.uuidv4(),
|
||||
@@ -1471,7 +1478,6 @@ useEffect(() => {
|
||||
}
|
||||
if (typeof legacy.invert === "boolean") props.invert = legacy.invert;
|
||||
if (typeof legacy.pixelReplication === "boolean") props.interpolationType = legacy.pixelReplication ? 0 : 1;
|
||||
if (typeof legacy.rotation === "number") props.rotation = legacy.rotation;
|
||||
if (typeof legacy.hflip === "boolean") props.hflip = legacy.hflip;
|
||||
if (typeof legacy.vflip === "boolean") props.vflip = legacy.vflip;
|
||||
|
||||
@@ -1493,6 +1499,10 @@ useEffect(() => {
|
||||
viewport.setCamera(camera);
|
||||
}
|
||||
}
|
||||
// --- Fix: Import rotation from legacy viewport ---
|
||||
if (typeof legacy.rotation === "number") {
|
||||
viewport.setRotation(legacy.rotation);
|
||||
}
|
||||
|
||||
viewport.render();
|
||||
updateOverlay(activeViewport ?? 0, viewport);
|
||||
@@ -1732,7 +1742,8 @@ useEffect(() => {
|
||||
ann =>
|
||||
ann.metadata &&
|
||||
ann.metadata.referencedImageId &&
|
||||
imageIds.includes(ann.metadata.referencedImageId)
|
||||
imageIds.includes(ann.metadata.referencedImageId) &&
|
||||
ann.metadata.toolName !== ReferenceCursors.toolName // Exclude ReferenceCursors
|
||||
);
|
||||
if (!stackAnnotations.length) return null;
|
||||
// Find the annotation(s) on the current image
|
||||
@@ -1786,7 +1797,7 @@ useEffect(() => {
|
||||
}}
|
||||
title="Previous Annotation"
|
||||
aria-label="Previous Annotation"
|
||||
onClick={() => {
|
||||
onClick={() => {
|
||||
const renderingEngine = renderingEngineRef.current;
|
||||
const viewport = renderingEngine?.getViewport(`CT_${i}`);
|
||||
if (!viewport || typeof viewport.getCurrentImageIdIndex !== "function") return;
|
||||
@@ -1802,7 +1813,7 @@ onClick={() => {
|
||||
);
|
||||
handleSelectAnnotation(i, annsOnImage.length > 0 ? annsOnImage[0].annotationUID : null);
|
||||
}
|
||||
}}
|
||||
}}
|
||||
>
|
||||
<span aria-hidden="true">◀</span>
|
||||
</button>
|
||||
@@ -1826,7 +1837,7 @@ onClick={() => {
|
||||
}}
|
||||
title="Next Annotation"
|
||||
aria-label="Next Annotation"
|
||||
onClick={() => {
|
||||
onClick={() => {
|
||||
const renderingEngine = renderingEngineRef.current;
|
||||
const viewport = renderingEngine?.getViewport(`CT_${i}`);
|
||||
if (!viewport || typeof viewport.getCurrentImageIdIndex !== "function") return;
|
||||
@@ -1842,7 +1853,7 @@ onClick={() => {
|
||||
);
|
||||
handleSelectAnnotation(i, annsOnImage.length > 0 ? annsOnImage[0].annotationUID : null);
|
||||
}
|
||||
}}
|
||||
}}
|
||||
>
|
||||
<span aria-hidden="true">▶</span>
|
||||
</button>
|
||||
@@ -1850,7 +1861,7 @@ onClick={() => {
|
||||
{currentAnnotations.length > 0 && (
|
||||
<div style={{ display: "flex", gap: 2, alignItems: "center" }}>
|
||||
{currentAnnotations.map(ann => (
|
||||
<div
|
||||
<div
|
||||
key={ann.annotationUID}
|
||||
style={{
|
||||
display: "flex",
|
||||
@@ -1865,7 +1876,7 @@ onClick={() => {
|
||||
fontWeight: selectedAnnUID === ann.annotationUID ? "bold" : "normal",
|
||||
}}
|
||||
onClick={() => handleSelectAnnotation(i, ann.annotationUID)}
|
||||
>
|
||||
>
|
||||
<span style={{ marginRight: 4 }}>
|
||||
{selectedAnnUID === ann.annotationUID ? "★ " : ""}
|
||||
{ann.metadata.toolName || "Annotation"}
|
||||
@@ -2123,7 +2134,7 @@ onClick={() => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{isVisible && (
|
||||
{isVisible && availableStacks.length > 1 && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
|
||||
+20
-13
@@ -6,8 +6,14 @@ import Nifti from './Nifti.tsx'
|
||||
import './index.css'
|
||||
import { createImageIds, availableImageIds } from "./lib/createImageIds.ts"
|
||||
|
||||
const test_containers = document.querySelectorAll(".dicom-viewer-test-root");
|
||||
test_containers.forEach((container) => {
|
||||
// Helper to convert URLs to wadouri
|
||||
const toWadouri = (arr: string[]) =>
|
||||
arr.map(url => url.startsWith("wadouri:") ? url : `wadouri:${url}`);
|
||||
|
||||
export function mountDicomViewers() {
|
||||
// Test containers
|
||||
const test_containers = document.querySelectorAll(".dicom-viewer-test-root");
|
||||
test_containers.forEach((container) => {
|
||||
const id = container.id || '';
|
||||
const imageStacks = () => availableImageIds();
|
||||
createRoot(container).render(
|
||||
@@ -16,18 +22,14 @@ test_containers.forEach((container) => {
|
||||
imageStacks={imageStacks}
|
||||
/>
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
const containers = document.querySelectorAll(".dicom-viewer-root");
|
||||
containers.forEach((container) => {
|
||||
// Main containers
|
||||
const containers = document.querySelectorAll(".dicom-viewer-root");
|
||||
containers.forEach((container) => {
|
||||
const id = container.id || '';
|
||||
let imageStacks;
|
||||
|
||||
// Helper to convert URLs to wadouri
|
||||
const toWadouri = (arr: string[]) =>
|
||||
arr.map(url => url.startsWith("wadouri:") ? url : `wadouri:${url}`);
|
||||
|
||||
// Check for data-images attribute
|
||||
const dataImages = container.getAttribute('data-images');
|
||||
if (dataImages) {
|
||||
let parsed;
|
||||
@@ -37,7 +39,6 @@ containers.forEach((container) => {
|
||||
console.error("Invalid data-images JSON:", e);
|
||||
parsed = [];
|
||||
}
|
||||
// If it's a flat list, wrap in an array to make it a stack list and convert to wadouri
|
||||
if (Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === "string") {
|
||||
imageStacks = () => Promise.resolve([toWadouri(parsed)]);
|
||||
} else if (Array.isArray(parsed)) {
|
||||
@@ -51,7 +52,6 @@ containers.forEach((container) => {
|
||||
imageStacks = () => Promise.resolve([[]]);
|
||||
}
|
||||
|
||||
// Read autoCacheStack from data-auto-cache-stack attribute
|
||||
const autoCacheStackAttr = container.getAttribute('data-auto-cache-stack');
|
||||
const autoCacheStack = autoCacheStackAttr === "true" || autoCacheStackAttr === "1";
|
||||
|
||||
@@ -62,4 +62,11 @@ containers.forEach((container) => {
|
||||
autoCacheStack={autoCacheStack}
|
||||
/>
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Optionally, call it immediately for static containers:
|
||||
mountDicomViewers();
|
||||
|
||||
// Optionally, expose globally for dynamic use:
|
||||
(window as any).mountDicomViewers = mountDicomViewers;
|
||||
Reference in New Issue
Block a user