118 lines
3.4 KiB
JavaScript
118 lines
3.4 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import { CineDialog } from 'react-viewerbase';
|
|
import OHIF from 'ohif-core';
|
|
import cloneDeep from 'lodash.clonedeep';
|
|
|
|
const { setViewportSpecificData } = OHIF.redux.actions;
|
|
|
|
// Why do I need or care about any of this info?
|
|
// A dispatch action should be able to pull this at the time of an event?
|
|
// `isPlaying` and `cineFrameRate` might matter, but I think we can prop pass for those.
|
|
const mapStateToProps = state => {
|
|
// Get activeViewport's `cine` and `stack`
|
|
const { viewportSpecificData, activeViewportIndex } = state.viewports;
|
|
const { cine, stack } = viewportSpecificData[activeViewportIndex] || {};
|
|
|
|
const stackData = stack || {
|
|
imageIds: [],
|
|
currentImageIdIndex: 0
|
|
};
|
|
|
|
const cineData = cine || {
|
|
isPlaying: false,
|
|
cineFrameRate: 24
|
|
};
|
|
|
|
// TODO: activeViewportStackData won't currently change anything on
|
|
// CornerstoneViewport. The updates are too frequent and it's killing
|
|
// performance. Need to revisit how we can do this.
|
|
|
|
// New props we're creating?
|
|
return {
|
|
activeViewportStackData: stackData,
|
|
activeViewportCineData: cineData,
|
|
activeViewportIndex: state.viewports.activeViewportIndex
|
|
};
|
|
};
|
|
|
|
const mapDispatchToProps = dispatch => {
|
|
return {
|
|
dispatchSetViewportSpecificData: (viewportIndex, data) => {
|
|
dispatch(setViewportSpecificData(viewportIndex, data));
|
|
}
|
|
};
|
|
};
|
|
|
|
const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
|
|
const {
|
|
activeViewportStackData,
|
|
activeViewportCineData,
|
|
activeViewportIndex
|
|
} = propsFromState;
|
|
|
|
return {
|
|
cineFrameRate: activeViewportCineData.cineFrameRate,
|
|
isPlaying: activeViewportCineData.isPlaying,
|
|
onPlayPauseChanged: isPlaying => {
|
|
const cine = cloneDeep(activeViewportCineData);
|
|
cine.isPlaying = !cine.isPlaying;
|
|
|
|
propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
|
|
cine
|
|
});
|
|
},
|
|
onFrameRateChanged: frameRate => {
|
|
const cine = cloneDeep(activeViewportCineData);
|
|
cine.cineFrameRate = frameRate;
|
|
|
|
propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
|
|
cine
|
|
});
|
|
},
|
|
onClickNextButton: () => {
|
|
const stack = cloneDeep(activeViewportStackData);
|
|
const largestPossibleIndex = stack.imageIds.length - 1;
|
|
stack.currentImageIdIndex = Math.min(
|
|
stack.currentImageIdIndex + 1,
|
|
largestPossibleIndex
|
|
);
|
|
|
|
propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
|
|
stack
|
|
});
|
|
},
|
|
onClickBackButton: () => {
|
|
const stack = cloneDeep(activeViewportStackData);
|
|
stack.currentImageIdIndex = Math.max(stack.currentImageIdIndex - 1, 0);
|
|
|
|
propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
|
|
stack
|
|
});
|
|
},
|
|
onClickSkipToStart: () => {
|
|
const stack = cloneDeep(activeViewportStackData);
|
|
stack.currentImageIdIndex = 0;
|
|
|
|
propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
|
|
stack
|
|
});
|
|
},
|
|
onClickSkipToEnd: () => {
|
|
const stack = cloneDeep(activeViewportStackData);
|
|
stack.currentImageIdIndex = stack.imageIds.length;
|
|
|
|
propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
|
|
stack
|
|
});
|
|
}
|
|
};
|
|
};
|
|
|
|
const ConnectedCineDialog = connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps,
|
|
mergeProps
|
|
)(CineDialog);
|
|
|
|
export default ConnectedCineDialog;
|