cornerstoneTools
cornerstoneTools copied to clipboard
Published
20 hours ago •
cornerstonejs
cornerstonejs
annotations are duplicated with the same image in different views
Prerequisites
- [X ] Which version are you using? (Is it latest?)
- [X ] Are you reporting to the correct repository?
- [? ] Did you search existing issues? (Were any related?)
Description
as the title says annotations are ~~duplicated~~( used ) for the same image across different views (view ports) is there a way to link an annotation to the EnabledElement and imageId rather than the imageId only , thank you
CodeSandbox With Reproduction of Issue:
https://codesandbox.io/s/tool-anno-vgrrz-vgrrz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<style>
.container {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background: #fefefe;
overflow: none;
}
.cornerstone-view {
margin: 2rem;
border-radius: 1rem;
border: 1px dashed blue;
height: 60%;
width: 40%;
background: black;
}
</style>
</head>
<body>
<div class="container">
<div id="first-element" class="cornerstone-view"></div>
<div id="second-element" class="cornerstone-view"></div>
</div>
!-- Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cornerstoneMath.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cornerstone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dicomParser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cornerstoneWADOImageLoader.js"></script>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cornerstoneTools.js"></script>
<script>
const cornerStoneConfig = {
touchEnabled: true
};
const stackPrefetchConfig = {
maxImagesToPrefetch: 20,
maxSimultaneousRequests: 4
};
// Specify external dependencies
cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneTools.external.Hammer = Hammer;
localStorage.setItem("debug", "cornerstoneTools");
cornerstoneTools.init(cornerStoneConfig);
// init cornerstoneTools prefetch config
cornerstoneTools.stackPrefetch.setConfiguration(stackPrefetchConfig);
cornerstoneWADOImageLoader.webWorkerManager.initialize();
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
</script>
<script>
cornerstoneOptions = {
renderer: "webgl"
};
const imageIds = [
"wadouri:/study/image-000001.dcm",
"wadouri:/study/image-000002.dcm",
"wadouri:/study/image-000003.dcm",
"wadouri:/study/image-000004.dcm",
"wadouri:/study/image-000005.dcm",
"wadouri:/study/image-000006.dcm",
"wadouri:/study/image-000007.dcm"
];
const InitAndLoadData = anElement => {
cornerstone.events.addEventListener(
cornerstone.EVENTS.ELEMENT_ENABLED,
evt => {
const element = evt.detail.element;
if (element === anElement) {
onElementEnabled(element);
}
}
);
cornerstone.enable(anElement, cornerstoneOptions);
};
const onElementEnabled = element => {
const stack = { currentImageIdIndex: 0, imageIds: imageIds };
// clear any previous tool state
cornerstoneTools.clearToolState(element, "stack");
// Add the stack tool state to the enabled element, and
// add stack state managers for the stack tool, CINE tool, and reference lines
cornerstoneTools.addStackStateManager(element, [
"stack",
"playClip",
"referenceLines"
]);
let imagePromise;
const firstImageId = stack.imageIds[stack.currentImageIdIndex];
imagePromise = cornerstone.loadAndCacheImage(firstImageId);
imagePromise.then(image => {
cornerstoneTools.addToolState(element, "stack", stack);
// Set Soft Tissue preset for all images by default
const viewport = cornerstone.getDefaultViewportForImage(
element,
image
);
viewport.colormap = "gray";
// Display the first image
cornerstone.displayImage(element, image, viewport);
cornerstoneTools.stackPrefetch.enable(element);
// cornerstoneTools.addToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool);
// cornerstoneTools.setToolEnabledForElement(element, 'StackScrollMouseWheel');
cornerstoneTools.addToolForElement(
element,
cornerstoneTools.CircleRoiTool
);
cornerstoneTools.setToolActiveForElement(element, "CircleRoi", {
mouseButtonMask: [1]
});
});
};
console.log(cornerstoneTools);
const firstElement = document.getElementById("first-element");
const secondElement = document.getElementById("second-element");
InitAndLoadData(firstElement);
InitAndLoadData(secondElement);
</script>
</body>
</html>
Having the same issue here,
any suggestions?
I found that you can add a few query params to your image id (just to make it differ from the other image ids), but in my case, it kills the caching.
@swederik
I have the same problem, adding several stack viewports and the same image, I have seen that in the documentation they mention a function that is getGroupKey but I have not found how to use it
