From 1ace720566a0e6409a93a36b8b4032589edb4060 Mon Sep 17 00:00:00 2001 From: Erik Ziegler Date: Sat, 1 Dec 2018 08:52:03 -0500 Subject: [PATCH] wip on react transition 5 --- .../CornerstoneViewport.js | 51 +++++++++++----- .../ViewportOrientationMarkers.js | 6 +- .../client/lib/classes/LayoutManager.js | 58 +++++-------------- 3 files changed, 56 insertions(+), 59 deletions(-) diff --git a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.js b/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.js index bb0b7bc1c..09015d8ea 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.js +++ b/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.js @@ -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 => { diff --git a/Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.js b/Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.js index 8d7e3ee27..6240b9f0b 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.js +++ b/Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.js @@ -6,10 +6,10 @@ import './ViewportOrientationMarkers.styl'; class ViewportOrientationMarkers extends Component { render() { return ( -
-
+
+
-
+
); diff --git a/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js b/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js index a8707b929..1f809e824 100644 --- a/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js +++ b/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js @@ -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(); }