diff --git a/Packages/ohif-viewerbase/client/components/index.js b/Packages/ohif-viewerbase/client/components/index.js index 2745b252f..97080a535 100644 --- a/Packages/ohif-viewerbase/client/components/index.js +++ b/Packages/ohif-viewerbase/client/components/index.js @@ -1,6 +1,8 @@ import viewer from './viewer/index.js'; -export { +const components = { viewer }; +export default components; + diff --git a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.js b/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.js index 202816801..0b6101b06 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.js +++ b/Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport.js @@ -14,6 +14,7 @@ import './CornerstoneViewport.css'; import cloneDeep from 'lodash.clonedeep'; import debounce from 'lodash.debounce'; +import {StackManager} from "../../lib/StackManager"; const EVENT_RESIZE = 'resize'; const loadIndicatorDelay = 45; @@ -42,11 +43,22 @@ class CornerstoneViewport extends Component { constructor(props) { super(props); - const stack = props.viewportData.stack; + const { displaySetInstanceUid, studyInstanceUid } = 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); // TODO: Allow viewport as a prop this.state = { stack, + displaySetInstanceUid, imageId: stack.imageIds[0], viewportHeight: '100%', isLoading: true, @@ -388,10 +400,10 @@ class CornerstoneViewport extends Component { componentDidUpdate(prevProps) { // TODO: Add a real object shallow comparison here? if ( - this.state.stack.imageIds[0] !== this.props.viewportData.stack.imageIds[0] + this.state.displaySetInstanceUid !== this.props.viewportData.displaySetInstanceUid ) { this.setState({ - stack: this.props.viewportData.stack + displaySetInstanceUid: this.props.viewportData.displaySetInstanceUid }); const stackData = cornerstoneTools.getToolState(this.element, 'stack'); @@ -413,7 +425,7 @@ class CornerstoneViewport extends Component { const imageId = currentStack.imageIds[currentStack.currentImageIdIndex]; - cornerstone.loadAndCacheImage(imageId).then(image => { + /*cornerstone.loadAndCacheImage(imageId).then(image => { try { cornerstone.getEnabledElement(this.element); } catch (error) { @@ -426,7 +438,7 @@ class CornerstoneViewport extends Component { cornerstoneTools.stackPrefetch.disable(this.element); cornerstoneTools.stackPrefetch.enable(this.element); - }); + });*/ } if (this.props.activeTool !== prevProps.activeTool) { @@ -438,54 +450,6 @@ class CornerstoneViewport extends Component { isTouchActive: true }); } - - if (this.props.currentLesion !== prevProps.currentLesion) { - const currentToolData = this.props.toolData[this.props.currentLesion - 1]; - if (currentToolData) { - const { imageId } = currentToolData; - const toolState = cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState(); - const toolData = toolState[imageId][currentToolData.toolType].data; - - toolData.forEach(data => { - if (data._id === currentToolData._id) { - data.active = true; - } else { - data.active = false; - } - }); - - cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState( - toolState - ); - - if (this.state.imageId === imageId) { - cornerstone.setViewport(this.element, currentToolData.viewport); - cornerstone.updateImage(this.element); - } else { - cornerstone.loadAndCacheImage(imageId).then(image => { - try { - cornerstone.getEnabledElement(this.element); - } catch (error) { - // Handle cases where the user ends the session before the image is displayed. - console.error(error); - return; - } - - cornerstone.displayImage( - this.element, - image, - currentToolData.viewport - ); - - this.setState({ - imageId - }); - }); - } - } else { - cornerstone.updateImage(this.element); - } - } } setActiveTool = activeTool => { @@ -636,9 +600,9 @@ class CornerstoneViewport extends Component { } CornerstoneViewport.propTypes = { - measurementsAddedOrRemoved: PropTypes.func.isRequired, - measurementsChanged: PropTypes.func.isRequired, - activeTool: PropTypes.string.isRequired, + measurementsAddedOrRemoved: PropTypes.func, + measurementsChanged: PropTypes.func, + activeTool: PropTypes.string, viewportData: PropTypes.object.isRequired }; diff --git a/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js b/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js index c4b0895dc..e238d061c 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js +++ b/Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js @@ -74,39 +74,43 @@ class GridLayout extends Component { viewportData = viewportData.slice(0, numViewports); } - const viewports = viewportData.map((viewport, index) => { - const className = `viewportContainer ${this.getClass(index)} ${getActiveClass(index)}`; + const viewports = viewportData.map((data, index) => { + const className = `viewportContainer ${this.getClass(index)} ${this.getActiveClass(index)}`; const styles = { height: `${height}%`, width: `${width}%`, }; - const cornerstoneViewport = (viewport) => ( + const cornerstoneViewport = (data) => (
- +
); - const pluginViewport = (viewport) => ( -
+ const pluginViewport = (data) => ( +
); return ( -
- {viewport.plugin === 'cornerstone' ? - cornerstoneViewport(viewport) : - pluginViewport(viewport) +
+ {data.plugin === 'cornerstone' ? + cornerstoneViewport(data) : + pluginViewport(data) } {/*{>seriesQuickSwitch (clone this viewport=viewport viewportIndex=@index)}*/}
) }) + const layoutClass = `layout-${rows}-${columns}`; + return (
- { viewports } +
+ { viewports } +
) } diff --git a/Packages/ohif-viewerbase/client/components/viewer/LoadingIndicator/LoadingIndicator.js b/Packages/ohif-viewerbase/client/components/viewer/LoadingIndicator/LoadingIndicator.js index ffc888b71..97b27d768 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/LoadingIndicator/LoadingIndicator.js +++ b/Packages/ohif-viewerbase/client/components/viewer/LoadingIndicator/LoadingIndicator.js @@ -89,7 +89,7 @@ class LoadingIndicator extends Component { return (<>
-

Loading... {{percComplete}}

+

Loading... {percComplete}

@@ -104,7 +104,7 @@ class LoadingIndicator extends Component { } LoadingIndicator.propTypes = { - percentComplete: PropTypes.number.isRequired + percentComplete: PropTypes.number }; export default LoadingIndicator; diff --git a/Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.js b/Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.js index abd1652b1..0c7c5fc99 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.js +++ b/Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.js @@ -59,9 +59,8 @@ class ViewerMain extends Component { Session.set('OHIFViewerMainRendered', Math.random()); } - setContents(component, data) { - const Comp = this.props.component; - const contents = (); + setContents(Component, props) { + const contents = (); this.setState({ contents diff --git a/Packages/ohif-viewerbase/client/components/viewer/viewportOrientationMarkers/ViewportOrientationMarkers.js b/Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.js similarity index 100% rename from Packages/ohif-viewerbase/client/components/viewer/viewportOrientationMarkers/ViewportOrientationMarkers.js rename to Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.js diff --git a/Packages/ohif-viewerbase/client/components/viewer/viewportOrientationMarkers/ViewportOrientationMarkers.styl b/Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.styl similarity index 100% rename from Packages/ohif-viewerbase/client/components/viewer/viewportOrientationMarkers/ViewportOrientationMarkers.styl rename to Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.styl diff --git a/Packages/ohif-viewerbase/client/components/viewer/index.js b/Packages/ohif-viewerbase/client/components/viewer/index.js index e266c8d01..a4211a478 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/index.js +++ b/Packages/ohif-viewerbase/client/components/viewer/index.js @@ -6,7 +6,7 @@ import ImageScrollbar from './ImageScrollbar.js'; import ToolContextMenu from './ToolContextMenu.js'; import ViewportOverlay from './ViewportOverlay.js'; -export { +const viewer = { ViewerMain, GridLayout, LoadingIndicator, @@ -14,4 +14,7 @@ export { ImageScrollbar, ToolContextMenu, ViewportOverlay, + test: 'test2' }; + +export default viewer; diff --git a/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js b/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js index e66426b48..a8707b929 100644 --- a/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js +++ b/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js @@ -8,7 +8,7 @@ import { $ } from 'meteor/jquery'; import { OHIF } from 'meteor/ohif:core'; -import viewer from '../../components/viewer'; +import viewerComponents from '../../components/viewer/index.js'; const PLUGIN_CORNERSTONE = 'cornerstone'; @@ -27,7 +27,7 @@ Meteor.startup(() => { export class LayoutManager { /** * Constructor: initializes a Layout Manager object. - * @param {DOM element} parentNode DOM element representing the parent node, which wraps the Layout Manager content + * @param {Function} * @param {Array} studies Array of studies objects that will be rendered in the Viewer. Each object will be rendered in a div.imageViewerViewport */ constructor(setContents, studies) { @@ -35,15 +35,13 @@ export class LayoutManager { this.setContents = setContents; this.observer = new Tracker.Dependency(); - this.parentNode = parentNode; this.studies = studies; this.viewportData = []; - this.layoutTemplate = viewer.GridLayout; + this.layoutTemplate = viewerComponents.GridLayout; this.layoutProps = { rows: 1, columns: 1 }; - this.layoutClassName = this.getLayoutClass(); this.isZoomed = false; @@ -148,36 +146,6 @@ export class LayoutManager { } } - /** - * Returns the name of the class to be added to the parentNode - * @return {string} class name following the pattern layout--. Ex: layout-1-1, layout-2-2 - */ - getLayoutClass() { - const { rows, columns } = this.layoutProps; - const layoutClass = `layout-${rows}-${columns}`; - - return layoutClass; - } - - /** - * Add a class to the parentNode based on the layout configuration. - * This function is helpful to style the layout of viewports. - * Besides that, each inner div.viewportContainer will have helpful classes - * as well. See viewer/components/gridLayout/ component in this ohif-viewerbase package. - */ - updateLayoutClass() { - const newLayoutClass = this.getLayoutClass(); - - // If layout has changed, change its class - if (this.layoutClassName !== newLayoutClass) { - this.parentNode.classList.remove(this.layoutClassName); - } - - this.layoutClassName = newLayoutClass; - - this.parentNode.classList.add(newLayoutClass); - } - /** * Updates the grid with the new layout props. * It iterates over all viewportData to render the studies @@ -212,9 +180,7 @@ export class LayoutManager { data.viewportData.push(viewportDataAndLayoutProps); }); - this.updateLayoutClass(); - - const component = GridLayout; + const component = viewerComponents.GridLayout; this.setContents(component, data) this.updateSession(); @@ -318,7 +284,7 @@ export class LayoutManager { columns: 1 }; - const component = GridLayout; + const component = viewerComponents.GridLayout; this.setContents(component, data) this.isZoomed = true;