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

wip on react transition 2

Browse Source
This commit is contained in:
Erik Ziegler 2018-11-30 14:28:15 -05:00
parent 7425c2beb8
commit f821ea2b80
9 changed files with 51 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Packages/ohif-viewerbase/client/components/index.js
View File

@ -1,6 +1,8 @@
import viewer from './viewer/index.js';
export {
const components = {
viewer
};
export default components;

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

@ -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
};

26
Packages/ohif-viewerbase/client/components/viewer/GridLayout/GridLayout.js
View File

@ -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) => (
<div className="removable">
<CornerstoneViewport/>
<CornerstoneViewport viewportData={data}/>
</div>
);
const pluginViewport = (viewport) => (
<div className={`viewport-plugin-${viewport.plugin}`} style="height:100%; width: 100%">
const pluginViewport = (data) => (
<div className={`viewport-plugin-${data.plugin}`} style="height:100%; width: 100%">
</div>
);
return (
<div className={className} style={styles}>
{viewport.plugin === 'cornerstone' ?
cornerstoneViewport(viewport) :
pluginViewport(viewport)
<div key={index} className={className} style={styles}>
{data.plugin === 'cornerstone' ?
cornerstoneViewport(data) :
pluginViewport(data)
}
{/*{>seriesQuickSwitch (clone this viewport=viewport viewportIndex=@index)}*/}
</div>
)
})
const layoutClass = `layout-${rows}-${columns}`;
return (
<div id='imageViewerViewports'>
{ viewports }
<div id='layoutManagerTarget' className={layoutClass}>
{ viewports }
</div>
</div>
)
}

4
Packages/ohif-viewerbase/client/components/viewer/LoadingIndicator/LoadingIndicator.js
View File

@ -89,7 +89,7 @@ class LoadingIndicator extends Component {
return (<>
<div className="imageViewerLoadingIndicator loadingIndicator">
<div className="indicatorContents">
<p>Loading... <i className="fa fa-spin fa-circle-o-notch fa-fw"></i> {{percComplete}}</p>
<p>Loading... <i className="fa fa-spin fa-circle-o-notch fa-fw"></i> {percComplete}</p>
</div>
</div>
<div className="imageViewerErrorLoadingIndicator loadingIndicator">
@ -104,7 +104,7 @@ class LoadingIndicator extends Component {
}
LoadingIndicator.propTypes = {
percentComplete: PropTypes.number.isRequired
percentComplete: PropTypes.number
};
export default LoadingIndicator;

5
Packages/ohif-viewerbase/client/components/viewer/ViewerMain/ViewerMain.js
View File

@ -59,9 +59,8 @@ class ViewerMain extends Component {
Session.set('OHIFViewerMainRendered', Math.random());
}
setContents(component, data) {
const Comp = this.props.component;
const contents = (<Comp data={data}/>);
setContents(Component, props) {
const contents = (<Component {...props}/>);
this.setState({
contents

0
Packages/ohif-viewerbase/client/components/viewer/viewportOrientationMarkers/ViewportOrientationMarkers.js → Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.js
View File

0
Packages/ohif-viewerbase/client/components/viewer/viewportOrientationMarkers/ViewportOrientationMarkers.styl → Packages/ohif-viewerbase/client/components/viewer/ViewportOrientationMarkers/ViewportOrientationMarkers.styl
View File

5
Packages/ohif-viewerbase/client/components/viewer/index.js
View File

@ -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;

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

@ -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-<rows>-<columns>. 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;