Use the DOM that should now be set for each viewport to influence button behavior

This commit is contained in:
dannyrb 2019-05-14 21:47:15 -04:00
parent d430596025
commit 0a4fee7337

View File

@ -1,8 +1,10 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { CineDialog } from 'react-viewerbase'; import { CineDialog } from 'react-viewerbase';
import OHIF from 'ohif-core'; import OHIF from 'ohif-core';
import { import as toolImport, getToolState } from 'cornerstone-tools';
import cloneDeep from 'lodash.clonedeep'; import cloneDeep from 'lodash.clonedeep';
const scrollToIndex = toolImport('util/scrollToIndex');
const { setViewportSpecificData } = OHIF.redux.actions; const { setViewportSpecificData } = OHIF.redux.actions;
// Why do I need or care about any of this info? // Why do I need or care about any of this info?
@ -11,25 +13,16 @@ const { setViewportSpecificData } = OHIF.redux.actions;
const mapStateToProps = state => { const mapStateToProps = state => {
// Get activeViewport's `cine` and `stack` // Get activeViewport's `cine` and `stack`
const { viewportSpecificData, activeViewportIndex } = state.viewports; const { viewportSpecificData, activeViewportIndex } = state.viewports;
const { cine, stack } = viewportSpecificData[activeViewportIndex] || {}; const { cine, dom } = viewportSpecificData[activeViewportIndex] || {};
const stackData = stack || {
imageIds: [],
currentImageIdIndex: 0
};
const cineData = cine || { const cineData = cine || {
isPlaying: false, isPlaying: false,
cineFrameRate: 24 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? // New props we're creating?
return { return {
activeViewportStackData: stackData, activeEnabledElement: dom,
activeViewportCineData: cineData, activeViewportCineData: cineData,
activeViewportIndex: state.viewports.activeViewportIndex activeViewportIndex: state.viewports.activeViewportIndex
}; };
@ -45,7 +38,7 @@ const mapDispatchToProps = dispatch => {
const mergeProps = (propsFromState, propsFromDispatch, ownProps) => { const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
const { const {
activeViewportStackData, activeEnabledElement,
activeViewportCineData, activeViewportCineData,
activeViewportIndex activeViewportIndex
} = propsFromState; } = propsFromState;
@ -70,40 +63,29 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
}); });
}, },
onClickNextButton: () => { onClickNextButton: () => {
const stack = cloneDeep(activeViewportStackData); const stackData = getToolState(activeEnabledElement, 'stack');
const largestPossibleIndex = stack.imageIds.length - 1; if (!stackData || !stackData.data || !stackData.data.length) return;
stack.currentImageIdIndex = Math.min( const { currentImageIdIndex, imageIds } = stackData.data[0];
stack.currentImageIdIndex + 1, if (currentImageIdIndex >= imageIds.length - 1) return;
largestPossibleIndex scrollToIndex(activeEnabledElement, currentImageIdIndex + 1);
);
propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
stack
});
}, },
onClickBackButton: () => { onClickBackButton: () => {
const stack = cloneDeep(activeViewportStackData); const stackData = getToolState(activeEnabledElement, 'stack');
stack.currentImageIdIndex = Math.max(stack.currentImageIdIndex - 1, 0); if (!stackData || !stackData.data || !stackData.data.length) return;
const { currentImageIdIndex } = stackData.data[0];
propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { if (currentImageIdIndex === 0) return;
stack scrollToIndex(activeEnabledElement, currentImageIdIndex - 1);
});
}, },
onClickSkipToStart: () => { onClickSkipToStart: () => {
const stack = cloneDeep(activeViewportStackData); const stackData = getToolState(activeEnabledElement, 'stack');
stack.currentImageIdIndex = 0; if (!stackData || !stackData.data || !stackData.data.length) return;
scrollToIndex(activeEnabledElement, 0);
propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
stack
});
}, },
onClickSkipToEnd: () => { onClickSkipToEnd: () => {
const stack = cloneDeep(activeViewportStackData); const stackData = getToolState(activeEnabledElement, 'stack');
stack.currentImageIdIndex = stack.imageIds.length; if (!stackData || !stackData.data || !stackData.data.length) return;
const lastIndex = stackData.data[0].imageIds.length - 1;
propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { scrollToIndex(activeEnabledElement, lastIndex);
stack
});
} }
}; };
}; };