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

wip on react transition 5

Browse Source
This commit is contained in:
Erik Ziegler 2018-12-01 08:52:03 -05:00
parent 5568490819
commit 1ace720566
3 changed files with 56 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.js
View File

@ -126,8 +126,6 @@ class CornerstoneViewport extends Component {
className="CornerstoneViewport viewportElement"
onContextMenu={this.onContextMenu}
tabIndex='0'
unselectable='on'
onSelectStart='return false;'
ref={input => {
this.element = input;
}}
@ -203,9 +201,9 @@ class CornerstoneViewport extends Component {
onImageRendered() {
const viewport = cornerstone.getViewport(this.element);
this.setState({
/*this.setState({
viewport
});
});*/
}
onNewImage() {
@ -416,30 +414,45 @@ class CornerstoneViewport extends Component {
if (
this.state.displaySetInstanceUid !== this.props.viewportData.displaySetInstanceUid
) {
this.setState({
displaySetInstanceUid: this.props.viewportData.displaySetInstanceUid
const { displaySetInstanceUid, studyInstanceUid, currentImageIdIndex } = this.props.viewportData;
// Create shortcut to displaySet
const study = OHIF.viewer.Studies.findBy({ studyInstanceUid });
const displaySet = study.displaySets.find(set => {
return set.displaySetInstanceUid === displaySetInstanceUid;
});
// Get stack from Stack Manager
const stack = StackManager.findOrCreateStack(study, displaySet);
const stackData = cornerstoneTools.getToolState(this.element, 'stack');
let currentStack = stackData && stackData.data[0];
if (!currentStack) {
currentStack = {
currentImageIdIndex: this.state.stack.currentImageIdIndex,
imageIds: this.state.stack.imageIds
currentImageIdIndex: currentImageIdIndex,
imageIds: stack.imageIds
};
cornerstoneTools.addStackStateManager(this.element, ['stack']);
cornerstoneTools.addToolState(this.element, 'stack', currentStack);
} else {
// TODO: we should make something like setToolState by an ID
currentStack.currentImageIdIndex = this.state.stack.currentImageIdIndex;
currentStack.imageIds = this.state.stack.imageIds;
currentStack.currentImageIdIndex = currentImageIdIndex;
currentStack.imageIds = stack.imageIds;
}
const imageId = currentStack.imageIds[currentStack.currentImageIdIndex];
/*cornerstone.loadAndCacheImage(imageId).then(image => {
this.setState({
displaySetInstanceUid,
studyInstanceUid,
stack,
imageId
});
cornerstone.loadAndCacheImage(imageId).then(image => {
try {
cornerstone.getEnabledElement(this.element);
} catch (error) {
@ -448,11 +461,20 @@ class CornerstoneViewport extends Component {
return;
}
cornerstone.displayImage(this.element, image);
const viewport = cornerstone.getDefaultViewportForImage(this.element, image);
// Workaround for Cornerstone issue #304
viewport.displayedArea.brhc = {
x: image.width,
y: image.height
}
cornerstone.displayImage(this.element, image, viewport);
cornerstoneTools.stackPrefetch.disable(this.element);
cornerstoneTools.stackPrefetch.enable(this.element);
});*/
});
}
if (this.props.activeTool !== prevProps.activeTool) {
@ -465,7 +487,8 @@ class CornerstoneViewport extends Component {
});
}
this.debouncedResize();
// TODO: Check this, causes infinite loop
//this.debouncedResize();
}
setActiveTool = activeTool => {

6
Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.js
View File

@ -6,10 +6,10 @@ import './ViewportOrientationMarkers.styl';
class ViewportOrientationMarkers extends Component {
render() {
return (
<div class="viewportOrientationMarkers noselect">
<div class="topMid orientationMarker">
<div className="viewportOrientationMarkers noselect">
<div className="topMid orientationMarker">
</div>
<div class="leftMid orientationMarker">
<div className="leftMid orientationMarker">
</div>
</div>
);

58
Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js
View File

@ -196,64 +196,38 @@ export class LayoutManager {
*/
rerenderViewportWithNewDisplaySet(viewportIndex, viewportData) {
// Clone the data to prevent changing the original object
const data = _.clone(viewportData);
const updatedViewportData = _.clone(viewportData);
OHIF.log.info(`LayoutManager rerenderViewportWithNewDisplaySet: ${viewportIndex}`);
// The parent container is identified because it is later removed from the DOM
const container = $('.viewportContainer').get(viewportIndex);
// Record the current viewportIndex so this can be passed into the re-rendering call
data.viewportIndex = viewportIndex;
updatedViewportData.viewportIndex = viewportIndex;
// If we have been provided with a plugin to use, use it.
// Otherwise, use whichever plugin is currently in use in this viewport.
const plugin = data.plugin || this.viewportData[viewportIndex].plugin;
const pluginData = data.pluginData || this.viewportData[viewportIndex].pluginData;
const plugin = updatedViewportData.plugin || this.viewportData[viewportIndex].plugin;
const pluginData = updatedViewportData.pluginData || this.viewportData[viewportIndex].pluginData;
// Update the dictionary of loaded displaySet for the specified viewport
this.viewportData[viewportIndex] = {
viewportIndex,
displaySetInstanceUid: data.displaySetInstanceUid,
seriesInstanceUid: data.seriesInstanceUid,
studyInstanceUid: data.studyInstanceUid,
renderedCallback: data.renderedCallback,
currentImageIdIndex: data.currentImageIdIndex || 0,
displaySetInstanceUid: updatedViewportData.displaySetInstanceUid,
seriesInstanceUid: updatedViewportData.seriesInstanceUid,
studyInstanceUid: updatedViewportData.studyInstanceUid,
renderedCallback: updatedViewportData.renderedCallback,
currentImageIdIndex: updatedViewportData.currentImageIdIndex || 0,
plugin,
pluginData,
...this.layoutProps
};
const newViewportContainer = document.createElement('div');
const component = viewerComponents.GridLayout;
const data = {
viewportData: this.viewportData,
...this.layoutProps
};
// Render and insert the template
if (plugin === PLUGIN_CORNERSTONE) {
// Remove the hover styling
const element = $(container).find('.imageViewerViewport');
element.find('canvas').not('.magnifyTool').removeClass('faded');
// Remove the whole template, add in the new one
const viewportContainer = element.parents('.removable');
newViewportContainer.className = 'removable';
// Remove the parent element of the template
// This is a workaround since otherwise Blaze UI onDestroyed doesn't fire
viewportContainer.remove();
container.appendChild(newViewportContainer);
Blaze.renderWithData(Template.imageViewerViewport, data, newViewportContainer);
} else {
newViewportContainer.className = `viewport-plugin-${plugin}`;
newViewportContainer.style.width = '100%';
newViewportContainer.style.height = '100%';
container.innerHTML = '';
container.appendChild(newViewportContainer);
}
this.setContents(component, data)
this.updateSession();
}