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

wip on react transition 8

Browse Source
This commit is contained in:
Erik Ziegler 2018-12-03 18:11:39 +01:00
parent 9ae5dd25ce
commit 71b49e6766
35 changed files with 818 additions and 470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
OHIFViewer/client/components/ohifViewer/ohifViewer.js
View File

@ -5,6 +5,13 @@ import { Router } from 'meteor/clinical:router';
import { ReactiveVar } from 'meteor/reactive-var';
import { OHIF } from 'meteor/ohif:core';
import { createStore } from 'redux';
const store = createStore(OHIF.viewerbase.redux.combinedReducer);
// TODO[react] Use a provider when the whole tree is React
window.store = store;
Template.ohifViewer.onCreated(() => {
const instance = Template.instance();
instance.headerClasses = new ReactiveVar('');

5
OHIFViewer/client/components/viewer/viewer.js
View File

@ -38,13 +38,10 @@ const initHangingProtocol = () => {
HP.setEngine(ProtocolEngine);
Session.set('ViewerReady', true);
Session.set('activeViewport', 0);
});
};
Meteor.startup(() => {
Session.setDefault('activeViewport', false);
Session.setDefault('leftSidebar', false);
Session.setDefault('rightSidebar', false);
@ -112,8 +109,6 @@ Template.viewer.onCreated(() => {
// Store the viewer data in session for further user
Session.setPersistent('ViewerData', OHIF.viewer.data);
Session.set('activeViewport', OHIF.viewer.data.activeViewport || 0);
// @TypeSafeStudies
// Clears OHIF.viewer.Studies collection
OHIF.viewer.Studies.removeAll();

2
Packages/ohif-hanging-protocols/client/components/protocolEditor/protocolEditor.js
View File

@ -151,7 +151,7 @@ Template.protocolEditor.helpers({
return ProtocolEngine.getCurrentStageModel();
},
activeViewportUndefined() {
const viewportIndex = Session.get('activeViewport');
const viewportIndex = window.store.getState().viewports.activeViewport;
return (viewportIndex === undefined);
}
});

2
Packages/ohif-hanging-protocols/client/components/ruleEntryDialog/ruleEntryDialog.js
View File

@ -318,7 +318,7 @@ Template.ruleEntryDialog.events({
rule.constraint = constraint;
// Instruct the Protocol Engine to update the Layout Manager with new data
var viewportIndex = Session.get('activeViewport');
var viewportIndex = window.store.getState().viewports.activeViewport;
ProtocolEngine.updateViewports(viewportIndex);
// Close the dialog

8
Packages/ohif-hanging-protocols/client/components/ruleTable/ruleTable.js
View File

@ -6,7 +6,7 @@ Template.ruleTable.helpers({
*/
rulePassed: function() {
// Retrieve the latest match details given the active viewport index
var viewportIndex = Session.get('activeViewport');
var viewportIndex = window.store.getState().viewports.activeViewport;
var details = ProtocolEngine.matchDetails[viewportIndex];
// If no match was found, stop here
@ -92,7 +92,7 @@ Template.ruleTable.events({
}
// Instruct the Protocol Engine to update the Layout Manager with new data
var viewportIndex = Session.get('activeViewport');
var viewportIndex = window.store.getState().viewports.activeViewport;
ProtocolEngine.updateViewports(viewportIndex);
},
/**
@ -108,7 +108,7 @@ Template.ruleTable.events({
rule.weight = $(event.currentTarget).val();
// Instruct the Protocol Engine to update the Layout Manager with new data
var viewportIndex = Session.get('activeViewport');
var viewportIndex = window.store.getState().viewports.activeViewport;
ProtocolEngine.updateViewports(viewportIndex);
},
/**
@ -124,7 +124,7 @@ Template.ruleTable.events({
rule.required = $(event.currentTarget).prop('checked');
// Instruct the Protocol Engine to update the Layout Manager with new data
var viewportIndex = Session.get('activeViewport');
var viewportIndex = window.store.getState().viewports.activeViewport;
ProtocolEngine.updateViewports(viewportIndex);
}
});

2
Packages/ohif-hanging-protocols/client/components/settingEntryDialog/settingEntryDialog.js
View File

@ -165,7 +165,7 @@ Template.settingEntryDialog.events({
viewport.viewportSettings[viewportSetting.id] = viewportSetting.value;
// Instruct the Protocol Engine to update the Layout Manager with new data
var viewportIndex = Session.get('activeViewport');
var viewportIndex = window.store.getState().viewports.activeViewport;
ProtocolEngine.updateViewports(viewportIndex);
// Close the dialog

2
Packages/ohif-hanging-protocols/client/components/settingsTable/settingsTable.js
View File

@ -37,7 +37,7 @@ Template.settingsTable.events({
delete viewport.viewportSettings[setting.key];
// Instruct the Protocol Engine to update the Layout Manager with new data
var viewportIndex = Session.get('activeViewport');
var viewportIndex = window.store.getState().viewports.activeViewport;
ProtocolEngine.updateViewports(viewportIndex);
}
});

2
Packages/ohif-hanging-protocols/client/components/stageDetails/stageDetails.js
View File

@ -11,7 +11,7 @@ getActiveViewportModel = function() {
var stage = ProtocolEngine.getCurrentStageModel();
// Retrieve the index of the active viewport
var activeViewport = Session.get('activeViewport');
var activeViewport = window.store.getState().viewports.activeViewport;
// If the active viewport index is outside the bounds of the
// number of Viewports defined for this Stage, stop here

2
Packages/ohif-lesiontracker/client/lib/pixelSpacingAutorunCheck.js
View File

@ -8,7 +8,7 @@ OHIF.lesiontracker.pixelSpacingAutorunCheck = () => {
const $oncologyTools = $('button#lesion, button#nonTarget');
// TODO: Set activeViewport for empty viewport element
const activeViewportIndex = Session.get('activeViewport');
const activeViewportIndex = window.store.getState().viewports.activeViewport;
if (activeViewportIndex === undefined) {
return;
}

2
Packages/ohif-measurements/client/lib/getActiveTimepoint.js
View File

@ -7,7 +7,7 @@ import { OHIF } from 'meteor/ohif:core';
* @returns {Object} - Timepoint data for the active viewport
*/
OHIF.measurements.getActiveTimepoint = () => {
const activeViewportIndex = Session.get('activeViewport');
const activeViewportIndex = window.store.getState().viewports.activeViewport;
const { studyInstanceUid } = OHIF.viewerbase.layoutManager.viewportData[activeViewportIndex];
return OHIF.viewer.timepointApi.study(studyInstanceUid)[0];
};

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

@ -48,7 +48,7 @@ Template.thumbnailEntry.events({
// Get the viewport index
let { viewportIndex } = instance.data;
if (_.isUndefined(viewportIndex)) {
viewportIndex = Session.get('activeViewport') || 0;
viewportIndex = window.store.getState().viewports.activeViewport || 0;
}
// Rerender the viewport using the clicked thumbnail data
@ -61,7 +61,7 @@ Template.thumbnailEntry.events({
// Get the active viewport index and total number of viewports...
const viewportCount = OHIF.viewerbase.layoutManager.getNumberOfViewports();
let viewportIndex = Session.get('activeViewport') || 0;
let viewportIndex = window.store.getState().viewports.activeViewport || 0;
if (viewportIndex >= viewportCount) {
viewportIndex = viewportCount > 0 ? viewportCount - 1 : 0;
}

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

@ -1,34 +1,43 @@
import { Component } from 'react';
import {
Component,
} from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import cloneDeep from 'lodash.clonedeep';
import { OHIF } from 'meteor/ohif:core';
import debounce from 'lodash.debounce';
// import * as cornerstone from 'cornerstone-core';
// import * as cornerstoneTools from 'cornerstone-tools';
import { cornerstone, cornerstoneTools } from 'meteor/ohif:cornerstone';
import {
cornerstone,
cornerstoneTools,
} from 'meteor/ohif:cornerstone';
import './CornerstoneViewport.styl';
// import './lib/initCornerstone.js';
import ImageScrollbar from '../ImageScrollbar/ImageScrollbar.js';
import ViewportOverlay from '../ViewportOverlay/ViewportOverlay.js';
import ToolContextMenu from '../ToolContextMenu/ToolContextMenu.js';
import LoadingIndicator from '../LoadingIndicator/LoadingIndicator.js';
import ViewportOrientationMarkers from '../ViewportOrientationMarkers/ViewportOrientationMarkers.js';
import { StackManager } from "../../../lib/StackManager";
import {
StackManager,
} from '../../../lib/StackManager';
import './CornerstoneViewport.styl';
const EVENT_RESIZE = 'resize';
const loadIndicatorDelay = 45;
const { loadHandlerManager } = cornerstoneTools;
const {
loadHandlerManager,
} = cornerstoneTools;
function setToolsPassive(tools) {
tools.forEach(tool => {
tools.forEach((tool) => {
cornerstoneTools.setToolPassive(tool);
});
}
function initializeTools(tools) {
Array.from(tools).forEach(tool => {
Array.from(tools).forEach((tool) => {
const apiTool = cornerstoneTools[`${tool.name}Tool`];
if (apiTool) {
cornerstoneTools.addTool(apiTool, tool.configuration);
@ -39,12 +48,17 @@ function initializeTools(tools) {
}
function getCornerstoneStack(viewportData) {
const { displaySetInstanceUid, studyInstanceUid } = viewportData;
const {
displaySetInstanceUid,
studyInstanceUid,
} = viewportData;
// Create shortcut to displaySet
const study = OHIF.viewer.Studies.findBy({ studyInstanceUid });
const study = OHIF.viewer.Studies.findBy({
studyInstanceUid,
});
const displaySet = study.displaySets.find(set => {
const displaySet = study.displaySets.find((set) => {
return set.displaySetInstanceUid === displaySetInstanceUid;
});
@ -52,7 +66,7 @@ function getCornerstoneStack(viewportData) {
const stack = StackManager.findOrCreateStack(study, displaySet);
stack.currentImageIdIndex = 0;
return stack
return stack;
}
@ -62,7 +76,7 @@ class CornerstoneViewport extends Component {
constructor(props) {
super(props);
const stack = getCornerstoneStack(this.props.viewportData)
const stack = getCornerstoneStack(this.props.viewportData);
// TODO: Allow viewport as a prop
this.state = {
@ -72,7 +86,7 @@ class CornerstoneViewport extends Component {
viewportHeight: '100%',
isLoading: false, // true,
imageScrollbarValue: 0,
numImagesLoaded: 0
numImagesLoaded: 0,
};
this.displayScrollbar = stack.imageIds.length > 1;
@ -87,12 +101,16 @@ class CornerstoneViewport extends Component {
this.doneLoadingHandler = this.doneLoadingHandler.bind(this);
this.onMouseClick = this.onMouseClick.bind(this);
this.onTouchPress = this.onTouchPress.bind(this);
this.onTouchStart = this.onTouchStart.bind(this);
this.onMeasurementAddedOrRemoved = this.onMeasurementAddedOrRemoved.bind(
this
this,
);
this.setViewportActive = this.setViewportActive.bind(this);
this.onCloseToolContextMenu = this.onCloseToolContextMenu.bind(this);
this.imageSliderOnInputCallback = this.imageSliderOnInputCallback.bind(
this
this,
);
this.loadHandlerTimeout = 25;
@ -110,7 +128,7 @@ class CornerstoneViewport extends Component {
cornerstone.resize(this.element, true);
this.setState({
viewportHeight: `${this.element.clientHeight - 20}px`
viewportHeight: `${this.element.clientHeight - 20}px`,
});
}, 300);
@ -118,50 +136,74 @@ class CornerstoneViewport extends Component {
this.slideTimeout = null;
}
render() {
const isLoading =
this.state.isLoading ||
this.state.numImagesLoaded / this.state.stack.imageIds.length < 0.1;
static defaultProps = {
activeTool: 'Wwwc',
}
return (
<>
render() {
const isLoading = this.state.isLoading || this.state.numImagesLoaded / this.state.stack.imageIds.length < 0.1;
return (<div className="CornerstoneViewport" >
<ToolContextMenu
toolContextMenuData={this.state.toolContextMenuData}
onClose={this.onCloseToolContextMenu}
/>
<div
className="CornerstoneViewport viewportElement"
onContextMenu={this.onContextMenu}
tabIndex='0'
ref={input => {
toolContextMenuData={
this.state.toolContextMenuData
}
onClose={
this.onCloseToolContextMenu
}
/> <div
className="viewport-element"
onContextMenu={
this.onContextMenu
}
ref={
(input) => {
this.element = input;
}}
}
}
>
{isLoading ? <LoadingIndicator /> : ''}
<canvas className="cornerstone-canvas" />
{
isLoading ? <LoadingIndicator /> : ''
} <canvas className="cornerstone-canvas" />
<ViewportOverlay
stack={this.state.stack}
viewport={this.state.viewport}
imageId={this.state.imageId}
numImagesLoaded={this.state.numImagesLoaded}
stack={
this.state.stack
}
viewport={
this.state.viewport
}
imageId={
this.state.imageId
}
numImagesLoaded={
this.state.numImagesLoaded
}
/> <ViewportOrientationMarkers
imageId={
this.state.imageId
}
viewport={
this.state.viewport
}
/> </div > <div className="viewportInstructions" >
Please drag a stack here to view images. </div> {
this.displayScrollbar && (<ImageScrollbar
onInputCallback={
this.imageSliderOnInputCallback
}
max={
this.state.stack.imageIds.length - 1
}
value={
this.state.imageScrollbarValue
}
height={
this.state.viewportHeight
}
/>
<ViewportOrientationMarkers
imageId={this.state.imageId}
viewport={this.state.viewport}
/>
</div>
<div className='viewportInstructions'>
Please drag a stack here to view images.
</div>
{this.displayScrollbar && (
<ImageScrollbar
onInputCallback={this.imageSliderOnInputCallback}
max={this.state.stack.imageIds.length - 1}
value={this.state.imageScrollbarValue}
height={this.state.viewportHeight}
/>
)}
{/*this.state.bidirectionalAddLabelShow && (
)
} {
/* this.state.bidirectionalAddLabelShow && (
<Labelling
measurementData={this.bidirectional.measurementData}
eventData={this.bidirectional.eventData}
@ -169,8 +211,8 @@ class CornerstoneViewport extends Component {
skipButton={this.bidirectional.skipButton}
editDescription={this.bidirectional.editDescription}
/>
)*/}
</>
)*/
} </div>
);
}
@ -178,7 +220,7 @@ class CornerstoneViewport extends Component {
measurementData,
eventData,
doneCallback,
options = {}
options = {},
) => {
const labellingDoneCallback = () => {
this.hideExtraButtons();
@ -190,11 +232,11 @@ class CornerstoneViewport extends Component {
eventData,
labellingDoneCallback,
skipButton: options.skipButton,
editDescription: options.editDescription
editDescription: options.editDescription,
};
this.setState({
bidirectionalAddLabelShow: true
bidirectionalAddLabelShow: true,
});
};
@ -211,16 +253,16 @@ class CornerstoneViewport extends Component {
onImageRendered() {
const viewport = cornerstone.getViewport(this.element);
/*this.setState({
viewport
});*/
this.setState({
viewport,
});
}
onNewImage() {
const image = cornerstone.getImage(this.element);
this.setState({
imageId: image.imageId
imageId: image.imageId,
});
}
@ -232,11 +274,11 @@ class CornerstoneViewport extends Component {
cornerstone.events.addEventListener(
cornerstone.EVENTS.IMAGE_LOADED,
this.onImageLoaded
this.onImageLoaded,
);
// Load the first image in the stack
cornerstone.loadAndCacheImage(this.state.imageId).then(image => {
cornerstone.loadAndCacheImage(this.state.imageId).then((image) => {
try {
cornerstone.getEnabledElement(element);
} catch (error) {
@ -249,7 +291,7 @@ class CornerstoneViewport extends Component {
const viewport = cornerstone.getDefaultViewportForImage(element, image);
viewport.voi = {
windowWidth: 400,
windowCenter: 40
windowCenter: 40,
};
// Display the first image
@ -267,31 +309,44 @@ class CornerstoneViewport extends Component {
cornerstoneTools.addToolState(element, 'stack', stack);
cornerstoneTools.stackPrefetch.enable(this.element);
const tools = [
{
const tools = [{
name: 'Bidirectional',
configuration: {
getMeasurementLocationCallback: this
.bidirectionalToolLabellingCallback,
shadow: true,
drawHandlesOnHover: true
}
drawHandlesOnHover: true,
},
},
{
name: 'Wwwc',
},
{ name: 'Wwwc' },
{
name: 'Zoom',
configuration: {
minScale: 0.3,
maxScale: 25,
preventZoomOutsideImage: true
}
preventZoomOutsideImage: true,
},
},
{
name: 'Pan',
},
{
name: 'StackScroll',
},
{
name: 'PanMultiTouch',
},
{
name: 'ZoomTouchPinch',
},
{
name: 'StackScrollMouseWheel',
},
{
name: 'StackScrollMultiTouch',
},
{ name: 'Pan' },
{ name: 'StackScroll' },
{ name: 'PanMultiTouch' },
{ name: 'ZoomTouchPinch' },
{ name: 'StackScrollMouseWheel' },
{ name: 'StackScrollMultiTouch' }
];
initializeTools(tools);
@ -305,22 +360,22 @@ class CornerstoneViewport extends Component {
*/
cornerstoneTools.setToolActive('PanMultiTouch', {
mouseButtonMask: 0,
isTouchActive: true
isTouchActive: true,
});
cornerstoneTools.setToolActive('ZoomTouchPinch', {
mouseButtonMask: 0,
isTouchActive: true
isTouchActive: true,
});
cornerstoneTools.setToolActive('StackScrollMultiTouch', {
mouseButtonMask: 0,
isTouchActive: true
isTouchActive: true,
});
cornerstoneTools.stackPrefetch.setConfiguration({
maxImagesToPrefetch: Infinity,
preserveExistingPool: false,
maxSimultaneousRequests: 6
maxSimultaneousRequests: 6,
});
/* For mouse devices, by default we turn on:
@ -332,45 +387,50 @@ class CornerstoneViewport extends Component {
cornerstoneTools.setToolActive('StackScrollMouseWheel', {
mouseButtonMask: 0,
isTouchActive: true
isTouchActive: true,
});
element.addEventListener(
cornerstone.EVENTS.IMAGE_RENDERED,
this.onImageRendered
this.onImageRendered,
);
element.addEventListener(cornerstone.EVENTS.NEW_IMAGE, this.onNewImage);
element.addEventListener(
cornerstoneTools.EVENTS.STACK_SCROLL,
this.onStackScroll
this.onStackScroll,
);
element.addEventListener(
cornerstoneTools.EVENTS.MEASUREMENT_ADDED,
this.onMeasurementAddedOrRemoved
this.onMeasurementAddedOrRemoved,
);
element.addEventListener(
cornerstoneTools.EVENTS.MEASUREMENT_REMOVED,
this.onMeasurementAddedOrRemoved
this.onMeasurementAddedOrRemoved,
);
element.addEventListener(
cornerstoneTools.EVENTS.MOUSE_CLICK,
this.onMouseClick
this.onMouseClick,
);
element.addEventListener(
cornerstoneTools.EVENTS.TOUCH_PRESS,
this.onTouchPress
this.onTouchPress,
);
element.addEventListener(
cornerstoneTools.EVENTS.TOUCH_START,
this.onTouchStart,
);
window.addEventListener(EVENT_RESIZE, this.onWindowResize);
this.setState({
viewportHeight: `${this.element.clientHeight - 20}px`
viewportHeight: `${this.element.clientHeight - 20}px`,
});
});
}
@ -379,34 +439,39 @@ class CornerstoneViewport extends Component {
const element = this.element;
element.removeEventListener(
cornerstone.EVENTS.IMAGE_RENDERED,
this.onImageRendered
this.onImageRendered,
);
element.removeEventListener(cornerstone.EVENTS.NEW_IMAGE, this.onNewImage);
element.removeEventListener(
cornerstoneTools.EVENTS.STACK_SCROLL,
this.onStackScroll
this.onStackScroll,
);
element.removeEventListener(
cornerstoneTools.EVENTS.MEASUREMENT_ADDED,
this.onMeasurementAddedOrRemoved
this.onMeasurementAddedOrRemoved,
);
element.removeEventListener(
cornerstoneTools.EVENTS.MEASUREMENT_REMOVED,
this.onMeasurementAddedOrRemoved
this.onMeasurementAddedOrRemoved,
);
element.removeEventListener(
cornerstoneTools.EVENTS.MOUSE_CLICK,
this.onMouseClick
this.onMouseClick,
);
element.removeEventListener(
cornerstoneTools.EVENTS.TOUCH_PRESS,
this.onTouchPress
this.onTouchPress,
);
element.removeEventListener(
cornerstoneTools.EVENTS.TOUCH_START,
this.onTouchStart,
);
window.removeEventListener(EVENT_RESIZE, this.onWindowResize);
@ -415,7 +480,7 @@ class CornerstoneViewport extends Component {
cornerstone.events.removeEventListener(
cornerstone.EVENTS.IMAGE_LOADED,
this.onImageLoaded
this.onImageLoaded,
);
}
@ -424,12 +489,18 @@ class CornerstoneViewport extends Component {
if (
this.state.displaySetInstanceUid !== this.props.viewportData.displaySetInstanceUid
) {
const { displaySetInstanceUid, studyInstanceUid, currentImageIdIndex } = this.props.viewportData;
const {
displaySetInstanceUid,
studyInstanceUid,
currentImageIdIndex,
} = this.props.viewportData;
// Create shortcut to displaySet
const study = OHIF.viewer.Studies.findBy({ studyInstanceUid });
const study = OHIF.viewer.Studies.findBy({
studyInstanceUid,
});
const displaySet = study.displaySets.find(set => {
const displaySet = study.displaySets.find((set) => {
return set.displaySetInstanceUid === displaySetInstanceUid;
});
@ -441,7 +512,7 @@ class CornerstoneViewport extends Component {
if (!currentStack) {
currentStack = {
currentImageIdIndex,
imageIds: stack.imageIds
imageIds: stack.imageIds,
};
cornerstoneTools.addStackStateManager(this.element, ['stack']);
@ -458,11 +529,11 @@ class CornerstoneViewport extends Component {
displaySetInstanceUid,
studyInstanceUid,
stack,
imageId
imageId,
});
cornerstoneTools.stackPrefetch.disable(this.element);
cornerstone.loadAndCacheImage(imageId).then(image => {
cornerstone.loadAndCacheImage(imageId).then((image) => {
try {
cornerstone.getEnabledElement(this.element);
} catch (error) {
@ -476,8 +547,8 @@ class CornerstoneViewport extends Component {
// Workaround for Cornerstone issue #304
viewport.displayedArea.brhc = {
x: image.width,
y: image.height
}
y: image.height,
};
cornerstone.displayImage(this.element, image, viewport);
@ -491,7 +562,7 @@ class CornerstoneViewport extends Component {
// TODO: Why do we need to do this in v3?
cornerstoneTools.setToolActive('StackScrollMouseWheel', {
mouseButtonMask: 0,
isTouchActive: true
isTouchActive: true,
});
}
@ -499,7 +570,7 @@ class CornerstoneViewport extends Component {
// this.debouncedResize();
}
setActiveTool = activeTool => {
setActiveTool = (activeTool) => {
const leftMouseTools = ['Bidirectional', 'Wwwc', 'StackScroll'];
setToolsPassive(leftMouseTools);
@ -508,7 +579,7 @@ class CornerstoneViewport extends Component {
const isPanToolActive = activeTool === 'Pan';
const panOptions = {
mouseButtonMask: isPanToolActive ? [1, 4] : [4],
isTouchActive: isPanToolActive
isTouchActive: isPanToolActive,
};
cornerstoneTools.setToolActive('Pan', panOptions);
@ -516,17 +587,19 @@ class CornerstoneViewport extends Component {
const isZoomToolActive = activeTool === 'Zoom';
const zoomOptions = {
mouseButtonMask: isZoomToolActive ? [1, 2] : [2],
isTouchActive: isZoomToolActive
isTouchActive: isZoomToolActive,
};
cornerstoneTools.setToolActive('Zoom', zoomOptions);
cornerstoneTools.setToolActive(activeTool, {
mouseButtonMask: 1,
isTouchActive: true
isTouchActive: true,
});
};
onStackScroll(event) {
this.setViewportActive();
const element = event.currentTarget;
const stackData = cornerstoneTools.getToolState(element, 'stack');
const stack = stackData.data[0];
@ -535,13 +608,13 @@ class CornerstoneViewport extends Component {
this.setState({
stack,
imageScrollbarValue: stack.currentImageIdIndex
imageScrollbarValue: stack.currentImageIdIndex,
});
}
onImageLoaded(event) {
onImageLoaded() {
this.setState({
numImagesLoaded: this.state.numImagesLoaded + 1
numImagesLoaded: this.state.numImagesLoaded + 1,
});
}
@ -550,7 +623,7 @@ class CornerstoneViewport extends Component {
clearTimeout(this.loadHandlerTimeout);
this.loadHandlerTimeout = setTimeout(() => {
this.setState({
isLoading: true
isLoading: true,
});
}, loadIndicatorDelay);
}
@ -558,11 +631,11 @@ class CornerstoneViewport extends Component {
doneLoadingHandler() {
clearTimeout(this.loadHandlerTimeout);
this.setState({
isLoading: false
isLoading: false,
});
}
onMeasurementAddedOrRemoved(event) {
onMeasurementAddedOrRemoved() {
console.log('onMeasurementAddedOrRemoved');
/* const { toolType, measurementData } = event.detail;
@ -595,35 +668,58 @@ class CornerstoneViewport extends Component {
}*/
}
setViewportActive() {
const {
viewportIndex,
} = this.props.viewportData;
const activeViewportIndex = window.store.getState().viewports.activeViewport;
if (viewportIndex !== activeViewportIndex) {
window.store.dispatch({
type: 'SET_VIEWPORT_ACTIVE',
viewportIndex,
});
}
}
onMouseClick(event) {
this.setViewportActive();
if (event.detail.event.which === 3) {
this.setState({
toolContextMenuData: {
eventData: event.detail,
isTouchEvent: false
}
isTouchEvent: false,
},
});
}
}
onTouchPress(event) {
this.setViewportActive();
this.setState({
toolContextMenuData: {
eventData: event.detail,
isTouchEvent: true
}
isTouchEvent: true,
},
});
}
onTouchStart() {
this.setViewportActive();
}
onCloseToolContextMenu() {
this.setState({
toolContextMenuData: null
toolContextMenuData: null,
});
}
imageSliderOnInputCallback(value) {
this.setViewportActive();
this.setState({
imageScrollbarValue: value
imageScrollbarValue: value,
});
// Note that we throttle requests to prevent the
@ -637,11 +733,11 @@ class CornerstoneViewport extends Component {
hideExtraButtons = () => {
if (this.state.bidirectionalAddLabelShow === true) {
this.setState({
bidirectionalAddLabelShow: false
bidirectionalAddLabelShow: false,
});
}
this.setState({
toolContextMenuData: null
toolContextMenuData: null,
});
};
}
@ -650,7 +746,7 @@ CornerstoneViewport.propTypes = {
measurementsAddedOrRemoved: PropTypes.func,
measurementsChanged: PropTypes.func,
activeTool: PropTypes.string,
viewportData: PropTypes.object.isRequired
viewportData: PropTypes.object.isRequired,
};
export default CornerstoneViewport;

4
Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.styl
View File

@ -3,6 +3,10 @@
.CornerstoneViewport
width: 100%
height: 100%
.viewport-element
width: 100%
height: 100%
position: relative;
background-color: black

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

@ -413,7 +413,7 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
// Check if the current active viewport in the Meteor Session
// Is the same as the viewport in which the activation event was fired.
// If it was, no changes are necessary, so stop here.
const activeViewportIndex = Session.get('activeViewport');
const activeViewportIndex = window.store.getState().viewports.activeViewport;
if (viewportIndex === activeViewportIndex) return;
$element.focus();
@ -473,7 +473,7 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
// Set the active viewport based on the Session variable
// This is done to ensure that the active element has the current
// focus, so that keyboard events are triggered.
if (viewportIndex === Session.get('activeViewport')) {
if (viewportIndex === window.store.getState().viewports.activeViewport) {
const viewportContainer = $element.parents('.viewportContainer');
setActiveViewport(viewportContainer);
@ -563,7 +563,7 @@ Template.imageViewerViewport.onRendered(function() {
// Get the current active viewport index, if this viewport has the same index,
// add the CSS 'active' class to highlight this viewport.
const activeViewport = Session.get('activeViewport');
const activeViewport = window.store.getState().viewports.activeViewport;
// Focus the viewport if it's the active one
if (templateData.viewportIndex === activeViewport) {

143
Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/ViewportOverlay.js
View File

@ -2,42 +2,129 @@ import { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import './ViewportOverlay.styl';
import { viewportOverlayUtils } from '../../../lib/viewportOverlayUtils';
import { helpers } from '../../../lib/helpers/index.js';
const { formatPN, formatDA, formatNumberPrecision, formatTM, isValidNumber} = helpers;
function getCompression(imageId) {
const instance = cornerstone.metaData.get('instance', imageId);
if (!instance) {
return '';
}
if (instance.lossyImageCompression === '01' &&
instance.lossyImageCompressionRatio !== '') {
const compressionMethod = instance.lossyImageCompressionMethod || 'Lossy: ';
const compressionRatio = formatNumberPrecision(instance.lossyImageCompressionRatio, 2);
return compressionMethod + compressionRatio + ' : 1';
}
return 'Lossless / Uncompressed';
}
function getImageDimensions(imageId) {
const instance = cornerstone.metaData.get('instance', imageId)
if (!instance) {
return '';
}
return `${instance.columns} x ${instance.rows}`;
}
class ViewportOverlay extends Component {
render() {
const scale = Math.round(this.props.viewport.scale * 100) / 100;
const zoom = this.props.viewport.scale * 100;
const imageId = this.props.imageId;
/*const patientId = cornerstone.metaData.get('00100020', imageId);
const studyDate = cornerstone.metaData.get('00080020', imageId);
const collection = cornerstone.metaData.get('00131010', imageId);
const studyDescription = cornerstone.metaData.get('00081030', imageId);*/
const patientMetadata = cornerstone.metaData.get('patient', imageId);
const studyMetadata = cornerstone.metaData.get('study', imageId);
const seriesMetadata = cornerstone.metaData.get('series', imageId);
const instanceMetadata = cornerstone.metaData.get('instance', imageId);
const windowWidth = Math.round(this.props.viewport.voi.windowWidth);
const windowCenter = Math.round(this.props.viewport.voi.windowCenter);
const imagesLeft =
this.props.stack.imageIds.length - this.props.numImagesLoaded;
const patientName = patientMetadata.name;
const patientId = patientMetadata.id;;
const { studyDate, studyTime, studyDescription } = studyMetadata;
const { seriesNumber, seriesDescription } = seriesMetadata;
const { instanceNumber, frameTime, thickness, spacingBetweenSlices, sliceLocation } = instanceMetadata;
const frameRate = formatNumberPrecision(1000 / frameTime, 1);
const compression = getCompression(imageId);
const windowWidth = this.props.viewport.voi.windowWidth || 0;
const windowCenter = this.props.viewport.voi.windowCenter || 0;
const wwwc = `W: ${windowWidth.toFixed(0)} L: ${windowCenter.toFixed(0)}`;
const imageIndex = this.props.stack.imageIds.indexOf(this.props.imageId) + 1;
const numImages = this.props.stack.imageIds.length;
const imageDimensions = getImageDimensions(imageId);
const normal = (<>
<div className="top-left overlay-element">
<div>{formatPN(patientName)}</div>
<div>{patientId}</div>
</div>
<div className="top-right overlay-element">
<div>{studyDescription}</div>
<div>{formatDA(studyDate)} {formatTM(studyTime)}</div>
</div>
<div className="bottom-right overlay-element">
<div>Zoom: {formatNumberPrecision(zoom,0)}%</div>
<div className="compressionIndicator">{compression}</div>
<div>{wwwc}</div>
</div>
<div className="bottom-left overlay-element">
<div>{seriesNumber >= 0 ? `Ser: ${seriesNumber}` : ''}</div>
<div>{numImages > 1 ? `Img: ${instanceNumber} ${imageIndex}/${numImages}` : ''}</div>
<div>{frameRate >= 0 ? `${formatNumberPrecision(frameRate, 2)} FPS` : ''}
<div>{imageDimensions}</div>
<div>
<span>{isValidNumber(sliceLocation) ? `Loc: ${formatNumberPrecision(sliceLocation, 2)} mm` : ''}</span>
<span>{thickness ? `Thick: ${formatNumberPrecision(thickness, 2)} mm` : ''}</span>
<span>{spacingBetweenSlices ? `Spacing: ${formatNumberPrecision(spacingBetweenSlices, 2)} mm` : ''}</span>
</div>
<div>{seriesDescription}</div>
</div>
</div>
</>);
const rightOnly = (<>
<div className="top-right overlay-element">
<div>{formatPN(patientName)}</div>
<div>{patientId}</div>
<div>{studyDescription}</div>
<div>{formatDA(studyDate)} {formatTM(studyTime)}</div>
</div>
<div className="bottom-right overlay-element">
<div>{seriesNumber >= 0 ? `Ser: ${seriesNumber}` : ''}</div>
<div>{numImages > 1 ? `Img: ${instanceNumber} ${imageIndex}/${numImages}` : ''}</div>
<div>{frameRate >= 0 ? `${formatNumberPrecision(frameRate, 2)} FPS` : ''}</div>
<div>{imageDimensions}</div>
<div>{seriesDescription}</div>
<div>Zoom: ${formatNumberPrecision(zoom, 0)}%</div>
<div className="compressionIndicator">{compression}</div>
<div>{wwwc}</div>
</div>
</>);
const leftOnly = (<>
<div className="top-left overlay-element">
<div>{formatPN(patientName)}</div>
<div>{patientId}</div>
<div>{studyDescription}</div>
<div>{formatDA(studyDate)} {formatTM(studyTime)}</div>
</div>
<div className="bottom-left overlay-element">
<div>{seriesNumber >= 0 ? `Ser: ${seriesNumber}` : ''}</div>
<div>{numImages > 1 ? `Img: ${instanceNumber} ${imageIndex}/${numImages}` : ''}</div>
<div>{frameRate >= 0 ? `${formatNumberPrecision(frameRate, 2)} FPS` : ''}</div>
<div>{imageDimensions}</div>
<div>{seriesDescription}</div>
<div>Zoom: ${formatNumberPrecision(zoom, 0)}%</div>
<div className="compressionIndicator">{compression}</div>
<div>{wwwc}</div>
</div>
</>);
return (
<div className="ViewportOverlay">
<div className="top-left overlay-element">
<span>{this.props.patientId}</span>
<span>{this.props.studyDate}</span>
<span>{this.props.studyDescription}</span>
<span>
{imagesLeft > 0 ? `${imagesLeft} images remaining...` : ''}
</span>
</div>
<div className="bottom-left overlay-element">Zoom: {scale}</div>
<div className="bottom-right overlay-element">
<span>
WW/WC: {windowWidth} / {windowCenter}
</span>
<span>
Image: {this.props.stack.currentImageIdIndex + 1} /{' '}
{this.props.stack.imageIds.length}
</span>
</div>
<div className='ViewportOverlay'>
{normal}
</div>
);
}

4
Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/ViewportOverlay.styl
View File

@ -2,10 +2,10 @@
$viewportTagPadding = 20px
.imageViewerViewport.empty ~ .imageViewerViewportOverlay
.imageViewerViewport.empty ~ .ViewportOverlay
display: none
.imageViewerViewportOverlay
.ViewportOverlay
theme('color', '$textSecondaryColor')
.overlay-element

2
Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js
View File

@ -88,7 +88,7 @@ Template.cineDialog.onCreated(() => {
// Run this computation every time the active viewport is changed
instance.autorun(() => {
Session.get('activeViewport');
window.store.getState().viewports.activeViewport;
Tracker.afterFlush(() => {
// Get the active viewportElement

2
Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
View File

@ -100,7 +100,7 @@ Template.toolbarSectionButton.helpers({
},
disableButton() {
Session.get('activeViewport');
window.store.getState().viewports.activeViewport;
Session.get('LayoutManagerUpdated');
const instance = Template.instance();
const isCommandDisabled = OHIF.commands.isDisabled(instance.data.id);

3
Packages/ohif-viewerbase/client/index.js
View File

@ -248,3 +248,6 @@ Viewerbase.StackImagePositionOffsetSynchronizer = StackImagePositionOffsetSynchr
// StudyMetadataSource
import { StudyMetadataSource } from './lib/classes/StudyMetadataSource';
Viewerbase.StudyMetadataSource = StudyMetadataSource;
import redux from './lib/redux/';
Viewerbase.redux = redux;

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

@ -416,7 +416,7 @@ export class LayoutManager {
const isSequenced = this.isDisplaySetsSequenced(sequenceMap);
// Get Active Viewport Index if isMultiple is false
const activeViewportIndex = !isMultiple ? Session.get('activeViewport') : null;
const activeViewportIndex = !isMultiple ? window.store.getState().viewports.activeViewport : null;
// Check if is next and looping is blocked
if (isNext && !allowLooping) {
@ -649,7 +649,7 @@ export class LayoutManager {
this.moveMultipleViewportDisplaySets(isNext);
} else {
// Get the selected viewport index
const viewportIndex = Session.get('activeViewport');
const viewportIndex = window.store.getState().viewports.activeViewport;
// Move display sets on a single viewport
this.moveSingleViewportDisplaySets(viewportIndex, isNext);

2
Packages/ohif-viewerbase/client/lib/classes/StackImagePositionOffsetSynchronizer.js
View File

@ -86,7 +86,7 @@ export class StackImagePositionOffsetSynchronizer {
}
getActiveViewportElement() {
const viewportIndex = Session.get('activeViewport') || 0;
const viewportIndex = window.store.getState().viewports.activeViewport || 0;
return $('.imageViewerViewport').get(viewportIndex);
}

2
Packages/ohif-viewerbase/client/lib/classes/StudyPrefetcher.js
View File

@ -86,7 +86,7 @@ export class StudyPrefetcher {
// Make sure there is a stack to fetch
if (this.hasStack(element)) {
// Check if this is a clip or not
const activeViewportIndex = Session.get('activeViewport');
const activeViewportIndex = window.store.getState().viewports.activeViewport;
const displaySetInstanceUid = OHIF.viewer.data.loadedSeriesData[activeViewportIndex].displaySetInstanceUid;
const stack = StackManager.findStack(displaySetInstanceUid);

14
Packages/ohif-viewerbase/client/lib/helpers/formatNumberPrecision.js
View File

@ -1,10 +1,14 @@
import { Blaze } from 'meteor/blaze';
function formatNumberPrecision(number, precision) {
if (number !== null) {
return parseFloat(number).toFixed(precision);
}
}
/**
* A global Blaze UI helper to format a float value to a specified precision
*/
Blaze.registerHelper('formatNumberPrecision', function(context, precision) {
if (context != null) {
return parseFloat(context).toFixed(precision);
}
});
Blaze.registerHelper('formatNumberPrecision', formatNumberPrecision);
export default formatNumberPrecision;

7
Packages/ohif-viewerbase/client/lib/helpers/index.js
View File

@ -6,6 +6,7 @@ import { isTouchDevice } from './isTouchDevice';
import { formatPN } from './formatPN';
import { formatDA } from './formatDA';
import { formatTM } from './formatTM';
import isValidNumber from './isValidNumber';
/**
* Helpers with side effects only...
@ -13,7 +14,7 @@ import { formatTM } from './formatTM';
import './formatJSDate';
import './jsDateFromNow';
import './formatNumberPrecision';
import formatNumberPrecision from './formatNumberPrecision';
import './inc';
import './isDisplaySetActive';
import './getUsername';
@ -33,7 +34,9 @@ const helpers = {
isTouchDevice,
formatPN,
formatDA,
formatTM
formatTM,
formatNumberPrecision,
isValidNumber,
};
export { helpers };

3
Packages/ohif-viewerbase/client/lib/helpers/isValidNumber.js Normal file
View File

@ -0,0 +1,3 @@
export default function isValidNumber(value) {
return typeof value === 'number' && !isNaN(value);
}

2
Packages/ohif-viewerbase/client/lib/hotkeyUtils.js
View File

@ -92,7 +92,7 @@ Meteor.startup(function() {
// Create a function that returns true if the active viewport is empty
const isActiveViewportEmpty = () => {
const activeViewport = Session.get('activeViewport') || 0;
const activeViewport = window.store.getState().viewports.activeViewport || 0;
return $('.imageViewerViewport').eq(activeViewport).hasClass('empty');
};

4
Packages/ohif-viewerbase/client/lib/panelNavigation.js
View File

@ -5,7 +5,7 @@ import { setActiveViewport } from './setActiveViewport';
const loadPreviousActivePanel = () => {
OHIF.log.info('nextActivePanel');
let currentIndex = Session.get('activeViewport');
let currentIndex = window.store.getState().viewports.activeViewport;
currentIndex--;
const $viewports = $('.viewportContainer');
@ -24,7 +24,7 @@ const loadPreviousActivePanel = () => {
const loadNextActivePanel = () => {
OHIF.log.info('nextActivePanel');
let currentIndex = Session.get('activeViewport');
let currentIndex = window.store.getState().viewports.activeViewport;
currentIndex++;
const $viewports = $('.viewportContainer');

9
Packages/ohif-viewerbase/client/lib/redux/actions.js Normal file
View File

@ -0,0 +1,9 @@
export const setToolActive = tool => ({
type: 'SET_TOOL_ACTIVE',
tool
});
export const setViewportActive = viewportIndex => ({
type: 'SET_VIEWPORT_ACTIVE',
viewportIndex
});

8
Packages/ohif-viewerbase/client/lib/redux/index.js Normal file
View File

@ -0,0 +1,8 @@
import './actions.js';
import combinedReducer from './reducers';
const redux = {
combinedReducer
};
export default redux;

10
Packages/ohif-viewerbase/client/lib/redux/reducers/index.js Normal file
View File

@ -0,0 +1,10 @@
import { combineReducers } from 'redux';
import tools from './tools.js';
import viewports from './viewports.js';
const combinedReducer = combineReducers({
tools,
viewports
});
export default combinedReducer;

101
Packages/ohif-viewerbase/client/lib/redux/reducers/tools.js Normal file
View File

@ -0,0 +1,101 @@
const defaultButtons = [
{
command: 'Pan',
type: 'tool',
text: 'Pan',
svgUrl: '/icons.svg#icon-tools-pan',
active: false
},
{
command: 'Zoom',
type: 'tool',
text: 'Zoom',
svgUrl: '/icons.svg#icon-tools-zoom',
active: false
},
{
command: 'Bidirectional',
type: 'tool',
text: 'Bidirectional',
svgUrl: '/icons.svg#icon-tools-measure-target',
active: true
},
{
command: 'StackScroll',
type: 'tool',
text: 'Stack Scroll',
svgUrl: '/icons.svg#icon-tools-stack-scroll',
active: false
},
{
command: 'reset',
type: 'command',
text: 'Reset',
svgUrl: '/icons.svg#icon-tools-reset',
active: false
},
{
command: 'Wwwc',
type: 'tool',
text: 'Manual',
svgUrl: '/icons.svg#icon-tools-levels',
active: false
},
{
command: 'setWLPresetSoftTissue',
type: 'command',
text: 'Soft Tissue',
svgUrl: '/icons.svg#icon-wl-soft-tissue',
active: false
},
{
command: 'setWLPresetLung',
type: 'command',
text: 'Lung',
svgUrl: '/icons.svg#icon-wl-lung',
active: false
},
{
command: 'setWLPresetLiver',
type: 'command',
text: 'Liver',
svgUrl: '/icons.svg#icon-wl-liver',
active: false
},
{
command: 'setWLPresetBrain',
type: 'command',
text: 'Brain',
svgUrl: '/icons.svg#icon-wl-brain',
active: false
}
];
const tools = (state = { buttons: defaultButtons }, action) => {
switch (action.type) {
case 'SET_TOOL_ACTIVE':
const item = state.buttons.find(button => button.command === action.tool);
let buttons = [];
if (item.type === 'tool') {
buttons = state.buttons.map(button => {
if (button.command === action.tool) {
button.active = true;
} else if (button.type === 'tool') {
button.active = false;
}
return button;
});
}
return {
buttons
};
default:
return state;
}
};
export default tools;

15
Packages/ohif-viewerbase/client/lib/redux/reducers/viewports.js Normal file
View File

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

7
Packages/ohif-viewerbase/client/lib/setActiveViewport.js
View File

@ -30,9 +30,12 @@ export function setActiveViewport(element) {
$element.trigger('OHIFBeforeActivateViewport');
}
// When an OHIFActivateViewport event is fired, update the Meteor Session
// When an OHIFActivateViewport event is fired, update the Redux state
// with the viewport index that it was fired from.
Session.set('activeViewport', viewportIndex);
window.store.dispatch({
type: 'SET_VIEWPORT_ACTIVE',
viewportIndex
});
// Finally, enable stack prefetching and hide the reference lines from
// the newly activated viewport that has a canvas

2
Packages/ohif-viewerbase/client/lib/setFocusToActiveViewport.js
View File

@ -12,7 +12,7 @@ const setFocusToActiveViewport = () => {
const viewports = $('.imageViewerViewport');
// Get the current active viewport index from Session
const activeViewportIndex = Session.get('activeViewport');
const activeViewportIndex = window.store.getState().viewports.activeViewport;
// Find the div from the list of viewports
const activeViewport = viewports.eq(activeViewportIndex);

6
Packages/ohif-viewerbase/client/lib/viewportUtils.js
View File

@ -30,7 +30,7 @@ const getEnabledElement = element => {
* @return {DOMElement} DOMElement of the current active viewport
*/
const getActiveViewportElement = () => {
const viewportIndex = Session.get('activeViewport') || 0;
const viewportIndex = window.store.getState().viewports.activeViewport || 0;
return $('.imageViewerViewport').get(viewportIndex);
};
@ -274,7 +274,7 @@ const isPlaying = () => {
// Check if a study has multiple frames
const hasMultipleFrames = () => {
// Its called everytime active viewport and/or layout change
Session.get('activeViewport');
window.store.getState().viewports.activeViewport;
Session.get('LayoutManagerUpdated');
const activeViewport = getActiveViewportElement();
@ -326,7 +326,7 @@ const isStackScrollLinkingDisabled = () => {
let linkableViewportsCount = 0;
// Its called everytime active viewport and/or layout change
Session.get('activeViewport');
window.store.getState().viewports.activeViewport;
Session.get('LayoutManagerUpdated');
const synchronizer = OHIF.viewer.stackImagePositionOffsetSynchronizer;