TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

* chore: 🤖 Update react-vtkjs-viewport and refactor vtk extension

Browse Source 
* chore: 🤖 Update react-vtkjs-viewport and refactor vtk extension
This commit is contained in:
James Petts 2019-10-18 14:53:43 +01:00 committed by GitHub
parent 04ffe3ec76
commit d5e21bb5bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 540 additions and 632 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/vtk/package.json
View File

@ -48,7 +48,7 @@
},
"dependencies": {
"@babel/runtime": "^7.5.5",
"react-vtkjs-viewport": "^0.3.0"
"react-vtkjs-viewport": "^0.3.1"
},
"devDependencies": {
"@ohif/core": "^1.4.0",

17
extensions/vtk/src/OHIFVTKViewport.js
View File

@ -11,7 +11,6 @@ import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
import vtkImageData from 'vtk.js/Sources/Common/DataModel/ImageData';
import vtkVolume from 'vtk.js/Sources/Rendering/Core/Volume';
import vtkVolumeMapper from 'vtk.js/Sources/Rendering/Core/VolumeMapper';
import vtkViewportSubscriptionManager from './utils/vtkViewportSubscriptionManager.js';
const { StackManager } = OHIF.utils;
@ -182,7 +181,6 @@ class OHIFVTKViewport extends Component {
}
const { vtkImageData, imageMetaData0 } = imageDataObject;
const { windowWidth, windowCenter, modality } = imageMetaData0;
let lower;
@ -208,15 +206,10 @@ class OHIFVTKViewport extends Component {
.getRGBTransferFunction(0)
.setRange(lower, upper);
// TODO: Should look into implementing autoAdjustSampleDistance in vtk
// Manually changing the sample distance here by a couple orders of
// Magnitude in either direction makes no difference.
// Also setting volumeMapper.setMaximumSamplesPerRay(10000)
// Prevents the warning of too many samples, but the resolution isn't improved.
const spacing = vtkImageData.getSpacing();
// Set the sample distance to half the mean length of one side. This is where the divide by 6 comes from.
// https://github.com/Kitware/VTK/blob/6b559c65bb90614fb02eb6d1b9e3f0fca3fe4b0b/Rendering/VolumeOpenGL2/vtkSmartVolumeMapper.cxx#L344
const sampleDistance = (spacing[0] + spacing[1] + spacing[2]) / 6.0;
const sampleDistance = (spacing[0] + spacing[1] + spacing[2]) / 6;
volumeMapper.setSampleDistance(sampleDistance);
@ -251,6 +244,8 @@ class OHIFVTKViewport extends Component {
frameIndex
);
this.imageDataObject = imageDataObject;
// TODO: Temporarily disabling this since it is not yet
// being used and hurts performance significantly.
/*if (!labelmap) {
@ -294,10 +289,6 @@ class OHIFVTKViewport extends Component {
this.setStateFromProps();
}
componentWillUnmount() {
vtkViewportSubscriptionManager.unsubscribe(this.props.viewportIndex);
}
componentDidUpdate(prevProps) {
const { studies, displaySet } = this.props.viewportData;
const prevDisplaySet = prevProps.viewportData.displaySet;

275
extensions/vtk/src/commandsModule.js
View File

@ -4,66 +4,16 @@ import {
vtkInteractorStyleMPRSlice,
vtkInteractorStyleMPRRotate,
vtkSVGCrosshairsWidget,
vtkSVGWidgetManager,
} from 'react-vtkjs-viewport';
import setMPRLayout from './utils/setMPRLayout.js';
import setViewportToVTK from './utils/setViewportToVTK.js';
import vtkViewportSubscriptionManager from './utils/vtkViewportSubscriptionManager.js';
import vtkCoordinate from 'vtk.js/Sources/Rendering/Core/Coordinate';
import vtkMath from 'vtk.js/Sources/Common/Core/Math';
import vtkMatrixBuilder from 'vtk.js/Sources/Common/Core/MatrixBuilder';
import Constants from 'vtk.js/Sources/Rendering/Core/VolumeMapper/Constants.js';
const { BlendMode } = Constants;
// TODO: Put this somewhere else
let apis = {};
let currentSlabThickness = 0.1;
let defaultSlabThickness = 0.1;
function getCrosshairCallbackForIndex(index) {
return ({ worldPos }) => {
// Set camera focal point to world coordinate for linked views
apis.forEach((api, viewportIndex) => {
if (viewportIndex !== index) {
// We are basically doing the same as getSlice but with the world coordinate
// that we want to jump to instead of the camera focal point.
// I would rather do the camera adjustment directly but I keep
// doing it wrong and so this is good enough for now.
const renderWindow = api.genericRenderWindow.getRenderWindow();
const istyle = renderWindow.getInteractor().getInteractorStyle();
const sliceNormal = istyle.getSliceNormal();
const transform = vtkMatrixBuilder
.buildFromDegree()
.identity()
.rotateFromDirections(sliceNormal, [1, 0, 0]);
const mutatedWorldPos = worldPos.slice();
transform.apply(mutatedWorldPos);
const slice = mutatedWorldPos[0];
istyle.setSlice(slice);
renderWindow.render();
}
const renderer = api.genericRenderWindow.getRenderer();
const wPos = vtkCoordinate.newInstance();
wPos.setCoordinateSystemToWorld();
wPos.setValue(worldPos);
const displayPosition = wPos.getComputedDisplayValue(renderer);
const { svgWidgetManager } = api;
api.svgWidgets.crosshairsWidget.setPoint(
displayPosition[0],
displayPosition[1]
);
svgWidgetManager.render();
});
};
}
async function _getActiveViewportVTKApi(viewports) {
const {
@ -105,8 +55,6 @@ async function _getActiveViewportVTKApi(viewports) {
function _setView(api, sliceNormal, viewUp) {
const renderWindow = api.genericRenderWindow.getRenderWindow();
const renderer = api.genericRenderWindow.getRenderer();
const camera = renderer.getActiveCamera();
const istyle = renderWindow.getInteractor().getInteractorStyle();
istyle.setSliceNormal(...sliceNormal);
istyle.setViewUp(...viewUp);
@ -114,41 +62,6 @@ function _setView(api, sliceNormal, viewUp) {
renderWindow.render();
}
function switchMPRInteractors(api, istyle) {
const renderWindow = api.genericRenderWindow.getRenderWindow();
const currentIStyle = renderWindow.getInteractor().getInteractorStyle();
let currentViewport;
if (currentIStyle.getViewport && istyle.getViewport) {
currentViewport = currentIStyle.getViewport();
}
let currentSlabThickness;
if (currentIStyle.getSlabThickness && istyle.getSlabThickness) {
currentSlabThickness = currentIStyle.getSlabThickness();
defaultSlabThickness = currentSlabThickness;
}
const interactor = renderWindow.getInteractor();
interactor.setInteractorStyle(istyle);
// TODO: Not sure why this is required the second time this function is called
istyle.setInteractor(interactor);
if (currentViewport) {
istyle.setViewport(currentViewport);
}
if (istyle.getVolumeMapper() !== api.volumes[0]) {
if (currentSlabThickness) {
istyle.setSlabThickness(currentSlabThickness);
}
istyle.setVolumeMapper(api.volumes[0]);
}
}
const actions = {
axial: async ({ viewports }) => {
const api = await _getActiveViewportVTKApi(viewports);
@ -175,52 +88,48 @@ const actions = {
apis.forEach(api => {
const istyle = vtkInteractorStyleMPRRotate.newInstance();
switchMPRInteractors(api, istyle);
api.setInteractorStyle({ istyle });
});
},
enableCrosshairsTool: () => {
apis.forEach((api, index) => {
apis.forEach((api, apiIndex) => {
const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
switchMPRInteractors(api, istyle);
istyle.setCallback(getCrosshairCallbackForIndex(index));
api.setInteractorStyle({
istyle,
configuration: { apis, apiIndex },
});
});
},
enableLevelTool: () => {
const callbacks = {
setOnLevelsChanged: ({ windowCenter, windowWidth }) => {
apis.forEach(api => {
const renderWindow = api.genericRenderWindow.getRenderWindow();
renderWindow.render();
api.updateVOI(windowWidth, windowCenter);
});
},
};
apis.forEach(api => {
const istyle = vtkInteractorStyleMPRWindowLevel.newInstance();
switchMPRInteractors(api, istyle);
api.setInteractorStyle({ istyle, callbacks });
});
},
setSlabThickness: ({ slabThickness }) => {
currentSlabThickness = slabThickness;
apis.forEach(api => {
const renderWindow = api.genericRenderWindow.getRenderWindow();
const istyle = renderWindow.getInteractor().getInteractorStyle();
if (istyle.setSlabThickness) {
istyle.setSlabThickness(currentSlabThickness);
}
renderWindow.render();
api.setSlabThickness(slabThickness);
});
},
changeSlabThickness: ({ change }) => {
currentSlabThickness += change;
currentSlabThickness = Math.max(currentSlabThickness, 0.1);
apis.forEach(api => {
const renderWindow = api.genericRenderWindow.getRenderWindow();
const istyle = renderWindow.getInteractor().getInteractorStyle();
const slabThickness = Math.max(api.getSlabThickness() + change, 0.1);
if (istyle.setSlabThickness) {
istyle.setSlabThickness(currentSlabThickness);
}
renderWindow.render();
api.setSlabThickness(slabThickness);
});
},
setBlendModeToComposite: () => {
@ -228,13 +137,15 @@ const actions = {
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(defaultSlabThickness);
istyle.setSlabThickness(slabThickness);
}
renderWindow.render();
});
@ -252,7 +163,6 @@ const actions = {
setBlendMode: ({ blendMode }) => {
apis.forEach(api => {
const renderWindow = api.genericRenderWindow.getRenderWindow();
const istyle = renderWindow.getInteractor().getInteractorStyle();
api.volumes[0].getMapper().setBlendMode(blendMode);
@ -264,28 +174,8 @@ const actions = {
const displaySet =
viewports.viewportSpecificData[viewports.activeViewportIndex];
// TODO -> Clean this logic up a bit.
const cornerstoneElement = cornerstone.getEnabledElement(displaySet.dom);
let cornerstoneVOI;
if (cornerstoneElement) {
const imageId = cornerstoneElement.image.imageId;
const { modality } = cornerstone.metaData.get(
'generalSeriesModule',
imageId
);
if (modality !== 'PT') {
const { windowWidth, windowCenter } = cornerstoneElement.viewport.voi;
cornerstoneVOI = {
windowWidth,
windowCenter,
};
}
}
// Get current VOI if cornerstone viewport.
const cornerstoneVOI = getVOIFromCornerstoneViewport(displaySet);
const viewportProps = [
{
@ -295,7 +185,6 @@ const actions = {
viewUp: [0, -1, 0],
},
},
{
// Sagital
orientation: {
@ -312,77 +201,29 @@ const actions = {
},
];
let apiByViewport;
try {
apiByViewport = await setMPRLayout(displaySet, viewportProps);
apis = await setMPRLayout(displaySet, viewportProps, 1, 3);
} catch (error) {
throw new Error(error);
}
apis = apiByViewport;
const rgbTransferFunction = apiByViewport[0].volumes[0]
.getProperty()
.getRGBTransferFunction(0);
if (cornerstoneVOI) {
const { windowWidth, windowCenter } = cornerstoneVOI;
const lower = windowCenter - windowWidth / 2.0;
const upper = windowCenter + windowWidth / 2.0;
rgbTransferFunction.setRange(lower, upper);
apiByViewport.forEach(api => {
api.updateVOI(windowWidth, windowCenter);
});
setVOI(cornerstoneVOI);
}
const onModifiedSubscription = rgbTransferFunction.onModified(() => {
const range = rgbTransferFunction.getMappingRange();
const windowWidth = Math.abs(range[1] - range[0]);
const windowCenter = range[0] + windowWidth / 2;
apiByViewport.forEach(api => {
const renderWindow = api.genericRenderWindow.getRenderWindow();
renderWindow.render();
api.updateVOI(windowWidth, windowCenter);
});
});
vtkViewportSubscriptionManager.pushSubscription(0, onModifiedSubscription);
apiByViewport.forEach((api, index) => {
const renderWindow = api.genericRenderWindow.getRenderWindow();
const renderer = api.genericRenderWindow.getRenderer();
// Add widgets and set default interactorStyle of each viewport.
apis.forEach((api, apiIndex) => {
api.addSVGWidget(
vtkSVGCrosshairsWidget.newInstance(),
'crosshairsWidget'
);
const istyle = vtkInteractorStyleMPRCrosshairs.newInstance();
renderWindow.getInteractor().setInteractorStyle(istyle);
istyle.setVolumeMapper(api.volumes[0]);
istyle.setCallback(getCrosshairCallbackForIndex(index));
const svgWidgetManager = vtkSVGWidgetManager.newInstance();
svgWidgetManager.setRenderer(renderer);
svgWidgetManager.setScale(1);
const crosshairsWidget = vtkSVGCrosshairsWidget.newInstance();
svgWidgetManager.addWidget(crosshairsWidget);
svgWidgetManager.render();
api.svgWidgetManager = svgWidgetManager;
api.svgWidgets = {
crosshairsWidget,
};
const orientation = api.getOrientation();
istyle.setViewUp(...orientation.viewUp);
istyle.setSliceNormal(...orientation.sliceNormal);
renderWindow.render();
api.setInteractorStyle({
istyle,
configuration: { apis, apiIndex },
});
});
},
};
@ -472,3 +313,41 @@ export default {
definitions,
defaultContext: 'ACTIVE_VIEWPORT::VTK',
};
function getVOIFromCornerstoneViewport(displaySet) {
const cornerstoneElement = cornerstone.getEnabledElement(displaySet.dom);
if (cornerstoneElement) {
const imageId = cornerstoneElement.image.imageId;
const { modality } = cornerstone.metaData.get(
'generalSeriesModule',
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);
});
}

2
extensions/vtk/src/utils/setMPRLayout.js
View File

@ -4,7 +4,7 @@ export default function setMPRLayout(
displaySet,
viewportPropsArray,
numRows = 1,
numColumns = 3
numColumns = 1
) {
return new Promise((resolve, reject) => {
const viewports = [];

28
extensions/vtk/src/utils/vtkViewportSubscriptionManager.js
View File

@ -1,28 +0,0 @@
const subscriptions = [];
// This is pretty hacky right now, but it makes sure we don't keep adding subscriptions.
// TODO -> Nuke this and move it up a layer once we have more vigorous layout support.
const vtkViewportSubscriptionManager = {
subscriptions,
pushSubscription(viewportIndex, subscription) {
if (!Array.isArray(subscriptions[viewportIndex])) {
subscriptions[viewportIndex] = [];
}
subscriptions[viewportIndex].push(subscription);
},
unsubscribe(viewportIndex) {
if (!subscriptions[viewportIndex]) {
return;
}
while (subscriptions[viewportIndex].length) {
subscriptions[viewportIndex].pop().unsubscribe();
}
subscriptions[viewportIndex] = null;
},
};
export default vtkViewportSubscriptionManager;

848
yarn.lock
View File

File diff suppressed because it is too large Load Diff