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

fix(viewport): Fix active viewport by connecting to redux

Browse Source
This commit is contained in:
Erik Ziegler 2018-12-06 16:09:31 +01:00
parent 943efb44e5
commit 83a7271cd1
8 changed files with 78 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Packages/ohif-cornerstone/main.js
View File

@ -1,9 +1,9 @@
import Hammer from 'hammerjs';
import * as cornerstone from 'cornerstone-core/dist/cornerstone.js';
import * as cornerstoneMath from 'cornerstone-math/dist/cornerstoneMath.js';
import * as cornerstoneTools from 'cornerstone-tools/dist/cornerstoneTools.js';
import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.js';
import * as dicomParser from 'dicom-parser'; // Importing from dist breaks instance reference of dicomParser.DataSet class
import cornerstone from 'cornerstone-core/dist/cornerstone.js';
import cornerstoneMath from 'cornerstone-math/dist/cornerstoneMath.js';
import cornerstoneTools from 'cornerstone-tools/dist/cornerstoneTools.js';
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoader.js';
import dicomParser from 'dicom-parser'; // Importing from dist breaks instance reference of dicomParser.DataSet class
import * as dcmjs from 'dcmjs/build/dcmjs';
cornerstoneTools.external.Hammer = Hammer;

26
Packages/ohif-viewerbase/client/components/viewer/ConnectedCornerstoneViewport.js Normal file
View File

@ -0,0 +1,26 @@
import { connect } from 'react-redux';
import CornerstoneViewport from 'react-cornerstone-viewport';
import { setViewportActive } from '../../lib/redux/actions.js';
const mapStateToProps = state => {
return {
activeViewportIndex: state.viewports.activeViewportIndex,
activeTool: state.tools.buttons.find(tool => tool.active === true).command
};
};
const mapDispatchToProps = dispatch => {
return {
setViewportActive: viewportIndex => {
console.log(`setViewportActive: ${viewportIndex}`);
dispatch(setViewportActive(viewportIndex))
}
};
};
const ConnectedCornerstoneViewport = connect(
mapStateToProps,
mapDispatchToProps
)(CornerstoneViewport);
export default ConnectedCornerstoneViewport;

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

@ -2,10 +2,10 @@ import { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { OHIF } from 'meteor/ohif:core';
import CornerstoneViewport from 'react-cornerstone-viewport';
import { cornerstone, cornerstoneTools } from 'meteor/ohif:cornerstone';
import ConnectedCornerstoneViewport from '../ConnectedCornerstoneViewport.js';
import './GridLayout.styl';
import StackManager from '../../../lib/StackManager.js';
import { cornerstone, cornerstoneTools } from 'meteor/ohif:cornerstone';
const TOP_CLASS = 'top';
const BOTTOM_CLASS = 'bottom';
@ -62,7 +62,7 @@ class GridLayout extends Component {
}
getActiveClass(index) {
if (this.props.activeViewport === index) {
if (this.props.activeViewportIndex === index) {
return 'active';
};
@ -117,7 +117,7 @@ class GridLayout extends Component {
...data
};
return (<CornerstoneViewport
return (<ConnectedCornerstoneViewport
viewportData={viewportData}
cornerstone={cornerstone}
cornerstoneTools={cornerstoneTools}

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

@ -12,6 +12,7 @@ import './ViewerMain.styl';
import { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
Meteor.startup(() => {
window.ResizeViewportManager = window.ResizeViewportManager || new ResizeViewportManager();
@ -21,6 +22,8 @@ Meteor.startup(() => {
Session.set('OHIFViewerMainRendered', false);
});
import { connect } from 'react-redux';
class ViewerMain extends Component {
constructor(props) {
super(props);
@ -60,7 +63,19 @@ class ViewerMain extends Component {
}
setContents(Component, props) {
const contents = (<Component {...props}/>);
// TODO[react] Not sure I like this piece much
const mapStateToProps = state => {
return {
activeViewportIndex: state.viewports.activeViewportIndex,
};
};
const ConnectedComponent = connect(
mapStateToProps,
null
)(Component);
const contents = (<ConnectedComponent {...props}/>);
this.setState({
contents
@ -69,9 +84,11 @@ class ViewerMain extends Component {
render() {
return (
<div className="viewerMain">
{this.state.contents}
</div>
<Provider store={window.store}>
<div className="viewerMain">
{this.state.contents}
</div>
</Provider>
);
}

4
Packages/ohif-viewerbase/client/lib/redux/reducers/tools.js
View File

@ -18,7 +18,7 @@ const defaultButtons = [
type: 'tool',
text: 'Bidirectional',
svgUrl: '/icons.svg#icon-tools-measure-target',
active: true
active: false
},
{
command: 'StackScroll',
@ -39,7 +39,7 @@ const defaultButtons = [
type: 'tool',
text: 'Manual',
svgUrl: '/icons.svg#icon-tools-levels',
active: false
active: true
},
{
command: 'setWLPresetSoftTissue',

4
Packages/ohif-viewerbase/client/lib/redux/reducers/viewports.js
View File

@ -1,12 +1,12 @@
const defaultState = {
activeViewport: 0
activeViewportIndex: 0
}
const viewports = (state = defaultState, action) => {
console.warn(action);
switch (action.type) {
case 'SET_VIEWPORT_ACTIVE':
return Object.assign({}, state, { activeViewport: action.viewportIndex });
return Object.assign({}, state, { activeViewportIndex: action.viewportIndex });
default:
return state;
}

1
Packages/ohif-viewerbase/package.js
View File

@ -12,6 +12,7 @@ Npm.depends({
'cornerstone-math': '0.1.7',
'dicom-parser': '1.8.3',
'cornerstone-wado-image-loader': '2.2.3',
'react-redux': '6.0.0'
});
Package.onUse(function(api) {

35
StandaloneViewer/StandaloneViewer/client/config.js
View File

@ -1,7 +1,7 @@
import { Meteor } from 'meteor/meteor';
import { OHIF } from 'meteor/ohif:core';
import { cornerstoneWADOImageLoader } from 'meteor/ohif:cornerstone';
import * as cornerstoneWebImageLoader from 'cornerstone-web-image-loader';
import * as cornerstoneWebImageLoader from 'cornerstone-web-image-loader';
import sha from './sha.js';
import version from './version.js';
@ -10,22 +10,21 @@ OHIF.info = {
version
};
Meteor.startup(function() {
const maxWebWorkers = Math.max(navigator.hardwareConcurrency - 1, 1);
const config = {
maxWebWorkers: maxWebWorkers,
startWebWorkersOnDemand: true,
webWorkerPath: OHIF.utils.absoluteUrl('packages/ohif_cornerstone/public/js/cornerstoneWADOImageLoaderWebWorker.es5.js'),
taskConfiguration: {
decodeTask: {
loadCodecsOnStartup: true,
initializeCodecsOnStartup: false,
codecsPath: OHIF.utils.absoluteUrl('packages/ohif_cornerstone/public/js/cornerstoneWADOImageLoaderCodecs.es5.js'),
usePDFJS: false
}
const maxWebWorkers = Math.max(navigator.hardwareConcurrency - 1, 1);
const config = {
maxWebWorkers: maxWebWorkers,
startWebWorkersOnDemand: true,
webWorkerPath: OHIF.utils.absoluteUrl('packages/ohif_cornerstone/public/js/cornerstoneWADOImageLoaderWebWorker.es5.js'),
taskConfiguration: {
decodeTask: {
loadCodecsOnStartup: true,
initializeCodecsOnStartup: false,
codecsPath: OHIF.utils.absoluteUrl('packages/ohif_cornerstone/public/js/cornerstoneWADOImageLoaderCodecs.es5.js'),
usePDFJS: false
}
};
}
};
cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.webWorkerManager.initialize(config);
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
});