42c22df1b6
* Add single viewport configuration * Multiple viewport configuration * Improve performance by using independent set methods * Add jump to slice command * Add context configuration * Cache panel visibility * Fix sync between vtk and cornerstone * Remove apis index * Add approach * Add loading to update volumes * Fix broken configuration * Bump vtk version * Use loading label * Update cy tests after vtk loading label changed * Remove loading for segs
511 lines
14 KiB
JavaScript
511 lines
14 KiB
JavaScript
import throttle from 'lodash.throttle';
|
|
import {
|
|
vtkInteractorStyleMPRCrosshairs,
|
|
vtkInteractorStyleMPRWindowLevel,
|
|
vtkInteractorStyleMPRRotate,
|
|
vtkSVGCrosshairsWidget,
|
|
} from 'react-vtkjs-viewport';
|
|
import { getImageData } from 'react-vtkjs-viewport';
|
|
import { vec3 } from 'gl-matrix';
|
|
import setMPRLayout from './utils/setMPRLayout.js';
|
|
import setViewportToVTK from './utils/setViewportToVTK.js';
|
|
import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
|
|
import OHIFVTKViewport from './OHIFVTKViewport';
|
|
import vtkCoordinate from 'vtk.js/Sources/Rendering/Core/Coordinate';
|
|
|
|
const { BlendMode } = Constants;
|
|
|
|
const commandsModule = ({ commandsManager }) => {
|
|
// TODO: Put this somewhere else
|
|
let apis = {};
|
|
|
|
async function _getActiveViewportVTKApi(viewports) {
|
|
const {
|
|
numRows,
|
|
numColumns,
|
|
layout,
|
|
viewportSpecificData,
|
|
activeViewportIndex,
|
|
} = viewports;
|
|
|
|
const currentData = layout.viewports[activeViewportIndex];
|
|
if (currentData && currentData.plugin === 'vtk') {
|
|
// TODO: I was storing/pulling this from Redux but ran into weird issues
|
|
if (apis[activeViewportIndex]) {
|
|
return apis[activeViewportIndex];
|
|
}
|
|
}
|
|
|
|
const displaySet = viewportSpecificData[activeViewportIndex];
|
|
let api;
|
|
if (!api) {
|
|
try {
|
|
api = await setViewportToVTK(
|
|
displaySet,
|
|
activeViewportIndex,
|
|
numRows,
|
|
numColumns,
|
|
layout,
|
|
viewportSpecificData
|
|
);
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
}
|
|
|
|
return api;
|
|
}
|
|
|
|
function _setView(api, sliceNormal, viewUp) {
|
|
const renderWindow = api.genericRenderWindow.getRenderWindow();
|
|
const istyle = renderWindow.getInteractor().getInteractorStyle();
|
|
istyle.setSliceNormal(...sliceNormal);
|
|
istyle.setViewUp(...viewUp);
|
|
|
|
renderWindow.render();
|
|
}
|
|
|
|
function getVOIFromCornerstoneViewport() {
|
|
const dom = commandsManager.runCommand('getActiveViewportEnabledElement');
|
|
const cornerstoneElement = cornerstone.getEnabledElement(dom);
|
|
|
|
if (cornerstoneElement) {
|
|
const imageId = cornerstoneElement.image.imageId;
|
|
|
|
const Modality = cornerstone.metaData.get('Modality', imageId);
|
|
|
|
if (Modality !== 'PT') {
|
|
const { windowWidth, windowCenter } = cornerstoneElement.viewport.voi;
|
|
|
|
return {
|
|
windowWidth,
|
|
windowCenter,
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
function setVOI(voi) {
|
|
const { windowWidth, windowCenter } = voi;
|
|
const lower = windowCenter - windowWidth / 2.0;
|
|
const upper = windowCenter + windowWidth / 2.0;
|
|
|
|
const rgbTransferFunction = apis[0].volumes[0]
|
|
.getProperty()
|
|
.getRGBTransferFunction(0);
|
|
|
|
rgbTransferFunction.setRange(lower, upper);
|
|
|
|
apis.forEach(api => {
|
|
api.updateVOI(windowWidth, windowCenter);
|
|
});
|
|
}
|
|
|
|
const _convertModelToWorldSpace = (position, vtkImageData) => {
|
|
const indexToWorld = vtkImageData.getIndexToWorld();
|
|
const pos = vec3.create();
|
|
|
|
position[0] += 0.5; /* Move to the centre of the voxel. */
|
|
position[1] += 0.5; /* Move to the centre of the voxel. */
|
|
position[2] += 0.5; /* Move to the centre of the voxel. */
|
|
|
|
vec3.set(pos, position[0], position[1], position[2]);
|
|
vec3.transformMat4(pos, pos, indexToWorld);
|
|
|
|
return pos;
|
|
};
|
|
|
|
const actions = {
|
|
getVtkApis: ({ index }) => {
|
|
return apis[index];
|
|
},
|
|
axial: async ({ viewports }) => {
|
|
const api = await _getActiveViewportVTKApi(viewports);
|
|
|
|
apis[viewports.activeViewportIndex] = api;
|
|
|
|
_setView(api, [0, 0, 1], [0, -1, 0]);
|
|
},
|
|
sagittal: async ({ viewports }) => {
|
|
const api = await _getActiveViewportVTKApi(viewports);
|
|
|
|
apis[viewports.activeViewportIndex] = api;
|
|
|
|
_setView(api, [1, 0, 0], [0, 0, 1]);
|
|
},
|
|
coronal: async ({ viewports }) => {
|
|
const api = await _getActiveViewportVTKApi(viewports);
|
|
|
|
apis[viewports.activeViewportIndex] = api;
|
|
|
|
_setView(api, [0, 1, 0], [0, 0, 1]);
|
|
},
|
|
requestNewSegmentation: async ({ viewports }) => {
|
|
const allViewports = Object.values(viewports.viewportSpecificData);
|
|
const promises = allViewports.map(async (viewport, viewportIndex) => {
|
|
let api = apis[viewportIndex];
|
|
|
|
if (!api) {
|
|
api = await _getActiveViewportVTKApi(viewports);
|
|
apis[viewportIndex] = api;
|
|
}
|
|
|
|
api.requestNewSegmentation();
|
|
api.updateImage();
|
|
});
|
|
await Promise.all(promises);
|
|
},
|
|
jumpToSlice: async ({
|
|
viewports,
|
|
studies,
|
|
StudyInstanceUID,
|
|
displaySetInstanceUID,
|
|
SOPClassUID,
|
|
SOPInstanceUID,
|
|
segmentNumber,
|
|
frameIndex,
|
|
frame,
|
|
done = () => { }
|
|
}) => {
|
|
let api = apis[viewports.activeViewportIndex];
|
|
|
|
if (!api) {
|
|
api = await _getActiveViewportVTKApi(viewports);
|
|
apis[viewports.activeViewportIndex] = api;
|
|
}
|
|
|
|
const stack = OHIFVTKViewport.getCornerstoneStack(
|
|
studies,
|
|
StudyInstanceUID,
|
|
displaySetInstanceUID,
|
|
SOPClassUID,
|
|
SOPInstanceUID,
|
|
frameIndex,
|
|
);
|
|
|
|
const imageDataObject = getImageData(stack.imageIds, displaySetInstanceUID);
|
|
|
|
let pixelIndex = 0;
|
|
let x = 0;
|
|
let y = 0;
|
|
let count = 0;
|
|
|
|
const rows = imageDataObject.dimensions[1];
|
|
const cols = imageDataObject.dimensions[0];
|
|
|
|
for (let j = 0; j < rows; j++) {
|
|
for (let i = 0; i < cols; i++) {
|
|
// [i, j] =
|
|
const pixel = frame.pixelData[pixelIndex];
|
|
if (pixel === segmentNumber) {
|
|
x += i;
|
|
y += j;
|
|
count++;
|
|
}
|
|
pixelIndex++;
|
|
}
|
|
}
|
|
x /= count;
|
|
y /= count;
|
|
|
|
const position = [x, y, frameIndex];
|
|
const worldPos = _convertModelToWorldSpace(position, imageDataObject.vtkImageData);
|
|
|
|
api.svgWidgets.crosshairsWidget.moveCrosshairs(worldPos, apis);
|
|
done();
|
|
},
|
|
setSegmentationConfiguration: async ({
|
|
viewports,
|
|
globalOpacity,
|
|
visible,
|
|
renderOutline,
|
|
outlineThickness,
|
|
}) => {
|
|
const allViewports = Object.values(viewports.viewportSpecificData);
|
|
const promises = allViewports.map(async (viewport, viewportIndex) => {
|
|
let api = apis[viewportIndex];
|
|
|
|
if (!api) {
|
|
api = await _getActiveViewportVTKApi(viewports);
|
|
apis[viewportIndex] = api;
|
|
}
|
|
|
|
api.setGlobalOpacity(globalOpacity);
|
|
api.setVisibility(visible);
|
|
api.setOutlineThickness(outlineThickness);
|
|
api.setOutlineRendering(renderOutline);
|
|
api.updateImage();
|
|
});
|
|
await Promise.all(promises);
|
|
},
|
|
setSegmentConfiguration: async ({ viewports, visible, segmentNumber }) => {
|
|
const allViewports = Object.values(viewports.viewportSpecificData);
|
|
const promises = allViewports.map(async (viewport, viewportIndex) => {
|
|
let api = apis[viewportIndex];
|
|
|
|
if (!api) {
|
|
api = await _getActiveViewportVTKApi(viewports);
|
|
apis[viewportIndex] = api;
|
|
}
|
|
|
|
api.setSegmentVisibility(segmentNumber, visible);
|
|
api.updateImage();
|
|
});
|
|
await Promise.all(promises);
|
|
},
|
|
enableRotateTool: () => {
|
|
apis.forEach(api => {
|
|
const istyle = vtkInteractorStyleMPRRotate.newInstance();
|
|
|
|
api.setInteractorStyle({ istyle });
|
|
});
|
|
},
|
|
enableCrosshairsTool: () => {
|
|
apis.forEach((api, apiIndex) => {
|
|
const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
|
|
|
|
api.setInteractorStyle({
|
|
istyle,
|
|
configuration: { apis, apiIndex },
|
|
});
|
|
});
|
|
},
|
|
enableLevelTool: () => {
|
|
function updateVOI(apis, windowWidth, windowCenter) {
|
|
apis.forEach(api => {
|
|
api.updateVOI(windowWidth, windowCenter);
|
|
});
|
|
}
|
|
|
|
const throttledUpdateVOIs = throttle(updateVOI, 16, { trailing: true }); // ~ 60 fps
|
|
|
|
const callbacks = {
|
|
setOnLevelsChanged: ({ windowCenter, windowWidth }) => {
|
|
apis.forEach(api => {
|
|
const renderWindow = api.genericRenderWindow.getRenderWindow();
|
|
|
|
renderWindow.render();
|
|
});
|
|
|
|
throttledUpdateVOIs(apis, windowWidth, windowCenter);
|
|
},
|
|
};
|
|
|
|
apis.forEach(api => {
|
|
const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();
|
|
|
|
api.setInteractorStyle({ istyle, callbacks });
|
|
});
|
|
},
|
|
setSlabThickness: ({ slabThickness }) => {
|
|
apis.forEach(api => {
|
|
api.setSlabThickness(slabThickness);
|
|
});
|
|
},
|
|
changeSlabThickness: ({ change }) => {
|
|
apis.forEach(api => {
|
|
const slabThickness = Math.max(api.getSlabThickness() + change, 0.1);
|
|
|
|
api.setSlabThickness(slabThickness);
|
|
});
|
|
},
|
|
setBlendModeToComposite: () => {
|
|
apis.forEach(api => {
|
|
const renderWindow = api.genericRenderWindow.getRenderWindow();
|
|
const istyle = renderWindow.getInteractor().getInteractorStyle();
|
|
|
|
const slabThickness = api.getSlabThickness();
|
|
|
|
const mapper = api.volumes[0].getMapper();
|
|
if (mapper.setBlendModeToComposite) {
|
|
mapper.setBlendModeToComposite();
|
|
}
|
|
|
|
if (istyle.setSlabThickness) {
|
|
istyle.setSlabThickness(slabThickness);
|
|
}
|
|
renderWindow.render();
|
|
});
|
|
},
|
|
setBlendModeToMaximumIntensity: () => {
|
|
apis.forEach(api => {
|
|
const renderWindow = api.genericRenderWindow.getRenderWindow();
|
|
const mapper = api.volumes[0].getMapper();
|
|
if (mapper.setBlendModeToMaximumIntensity) {
|
|
mapper.setBlendModeToMaximumIntensity();
|
|
}
|
|
renderWindow.render();
|
|
});
|
|
},
|
|
setBlendMode: ({ blendMode }) => {
|
|
apis.forEach(api => {
|
|
const renderWindow = api.genericRenderWindow.getRenderWindow();
|
|
|
|
api.volumes[0].getMapper().setBlendMode(blendMode);
|
|
|
|
renderWindow.render();
|
|
});
|
|
},
|
|
mpr2d: async ({ viewports }) => {
|
|
// TODO push a lot of this backdoor logic lower down to the library level.
|
|
const displaySet =
|
|
viewports.viewportSpecificData[viewports.activeViewportIndex];
|
|
|
|
// Get current VOI if cornerstone viewport.
|
|
const cornerstoneVOI = getVOIFromCornerstoneViewport();
|
|
|
|
const viewportProps = [
|
|
{
|
|
//Axial
|
|
orientation: {
|
|
sliceNormal: [0, 0, 1],
|
|
viewUp: [0, -1, 0],
|
|
},
|
|
},
|
|
{
|
|
// Sagittal
|
|
orientation: {
|
|
sliceNormal: [1, 0, 0],
|
|
viewUp: [0, 0, 1],
|
|
},
|
|
},
|
|
{
|
|
// Coronal
|
|
orientation: {
|
|
sliceNormal: [0, 1, 0],
|
|
viewUp: [0, 0, 1],
|
|
},
|
|
},
|
|
];
|
|
|
|
try {
|
|
apis = await setMPRLayout(displaySet, viewportProps, 1, 3);
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
|
|
if (cornerstoneVOI) {
|
|
setVOI(cornerstoneVOI);
|
|
}
|
|
|
|
// Add widgets and set default interactorStyle of each viewport.
|
|
apis.forEach((api, apiIndex) => {
|
|
api.addSVGWidget(
|
|
vtkSVGCrosshairsWidget.newInstance(),
|
|
'crosshairsWidget'
|
|
);
|
|
|
|
const uid = api.uid;
|
|
const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
|
|
|
|
api.setInteractorStyle({
|
|
istyle,
|
|
configuration: { apis, apiIndex, uid },
|
|
});
|
|
});
|
|
},
|
|
};
|
|
|
|
window.vtkActions = actions;
|
|
|
|
const definitions = {
|
|
requestNewSegmentation: {
|
|
commandFn: actions.requestNewSegmentation,
|
|
storeContexts: ['viewports'],
|
|
options: {},
|
|
},
|
|
jumpToSlice: {
|
|
commandFn: actions.jumpToSlice,
|
|
storeContexts: ['viewports'],
|
|
options: {},
|
|
},
|
|
setSegmentationConfiguration: {
|
|
commandFn: actions.setSegmentationConfiguration,
|
|
storeContexts: ['viewports'],
|
|
options: {},
|
|
},
|
|
setSegmentConfiguration: {
|
|
commandFn: actions.setSegmentConfiguration,
|
|
storeContexts: ['viewports'],
|
|
options: {},
|
|
},
|
|
axial: {
|
|
commandFn: actions.axial,
|
|
storeContexts: ['viewports'],
|
|
options: {},
|
|
},
|
|
coronal: {
|
|
commandFn: actions.coronal,
|
|
storeContexts: ['viewports'],
|
|
options: {},
|
|
},
|
|
sagittal: {
|
|
commandFn: actions.sagittal,
|
|
storeContexts: ['viewports'],
|
|
options: {},
|
|
},
|
|
enableRotateTool: {
|
|
commandFn: actions.enableRotateTool,
|
|
options: {},
|
|
},
|
|
enableCrosshairsTool: {
|
|
commandFn: actions.enableCrosshairsTool,
|
|
options: {},
|
|
},
|
|
enableLevelTool: {
|
|
commandFn: actions.enableLevelTool,
|
|
options: {},
|
|
},
|
|
setBlendModeToComposite: {
|
|
commandFn: actions.setBlendModeToComposite,
|
|
options: { blendMode: BlendMode.COMPOSITE_BLEND },
|
|
},
|
|
setBlendModeToMaximumIntensity: {
|
|
commandFn: actions.setBlendModeToMaximumIntensity,
|
|
options: { blendMode: BlendMode.MAXIMUM_INTENSITY_BLEND },
|
|
},
|
|
setBlendModeToMinimumIntensity: {
|
|
commandFn: actions.setBlendMode,
|
|
options: { blendMode: BlendMode.MINIMUM_INTENSITY_BLEND },
|
|
},
|
|
setBlendModeToAverageIntensity: {
|
|
commandFn: actions.setBlendMode,
|
|
options: { blendMode: BlendMode.AVERAGE_INTENSITY_BLEND },
|
|
},
|
|
setSlabThickness: {
|
|
// TODO: How do we pass in a function argument?
|
|
commandFn: actions.setSlabThickness,
|
|
options: {},
|
|
},
|
|
increaseSlabThickness: {
|
|
commandFn: actions.changeSlabThickness,
|
|
options: {
|
|
change: 3,
|
|
},
|
|
},
|
|
decreaseSlabThickness: {
|
|
commandFn: actions.changeSlabThickness,
|
|
options: {
|
|
change: -3,
|
|
},
|
|
},
|
|
mpr2d: {
|
|
commandFn: actions.mpr2d,
|
|
storeContexts: ['viewports'],
|
|
options: {},
|
|
context: 'VIEWER',
|
|
},
|
|
getVtkApiForViewportIndex: {
|
|
commandFn: actions.getVtkApis,
|
|
context: 'VIEWER',
|
|
},
|
|
};
|
|
|
|
return {
|
|
definitions,
|
|
defaultContext: 'ACTIVE_VIEWPORT::VTK',
|
|
};
|
|
};
|
|
|
|
export default commandsModule;
|