Update to include layout control
This commit is contained in:
Erik Ziegler
parent
b84fd28dc2
commit
2b8dfa4468
@ -13,17 +13,17 @@
|
||||
"hammerjs": "^2.0.8",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"moment": "^2.22.2",
|
||||
"ohif-core": "^0.1.2",
|
||||
"ohif-core": "^0.1.3",
|
||||
"prop-types": "^15.6.2",
|
||||
"query-string": "^6.2.0",
|
||||
"react": "^16.4.1",
|
||||
"react-cornerstone-viewport": "^0.1.2",
|
||||
"react-cornerstone-viewport": "^0.1.3",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-redux": "^6.0.0",
|
||||
"react-router": "^4.3.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-scripts": "^2.1.1",
|
||||
"react-viewerbase": "^0.1.7",
|
||||
"react-viewerbase": "^0.1.8",
|
||||
"redux": "^4.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@ -13,4 +13,5 @@ body {
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
font-family: Roboto,OpenSans,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
|
||||
}
|
||||
|
||||
43
OHIFViewer-react/src/FlexboxLayout/ConnectedLayoutButton.js
Normal file
43
OHIFViewer-react/src/FlexboxLayout/ConnectedLayoutButton.js
Normal file
@ -0,0 +1,43 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { LayoutButton } from 'react-viewerbase';
|
||||
import OHIF from 'ohif-core'
|
||||
|
||||
const { setLayout } = OHIF.redux.actions;
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
currentLayout: state.viewports.layout,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
// TODO: Change if layout switched becomes more complex
|
||||
onChange: selectedCell => {
|
||||
console.log(`setLayout: ${JSON.stringify(selectedCell)}`);
|
||||
|
||||
let viewports = [];
|
||||
const rows = selectedCell.row + 1;
|
||||
const columns = selectedCell.col + 1;
|
||||
const numViewports = rows * columns;
|
||||
for (let i = 0; i < numViewports; i++) {
|
||||
viewports.push({
|
||||
height: `${100 / rows}%`,
|
||||
width: `${100 / columns}%`
|
||||
});
|
||||
}
|
||||
const layout = {
|
||||
viewports
|
||||
};
|
||||
|
||||
dispatch(setLayout(layout))
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const ConnectedLayoutButton = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(LayoutButton);
|
||||
|
||||
export default ConnectedLayoutButton;
|
||||
16
OHIFViewer-react/src/FlexboxLayout/ConnectedLayoutManager.js
Normal file
16
OHIFViewer-react/src/FlexboxLayout/ConnectedLayoutManager.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { LayoutManager } from 'react-viewerbase';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
layout: state.viewports.layout,
|
||||
activeViewportIndex: state.viewports.activeViewportIndex
|
||||
};
|
||||
};
|
||||
|
||||
const ConnectedLayoutManager = connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(LayoutManager);
|
||||
|
||||
export default ConnectedLayoutManager;
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
import ConnectedToolbarSection from './ConnectedToolbarSection';
|
||||
import ConnectedLayoutButton from './ConnectedLayoutButton';
|
||||
import PropTypes from 'prop-types';
|
||||
import { RoundedButtonGroup } from 'react-viewerbase';
|
||||
import './ToolbarRow.css';
|
||||
@ -35,14 +36,13 @@ class ToolbarRow extends Component {
|
||||
const leftSidebarValue = this.props.leftSidebarOpen ? leftSidebarToggle[0].value : null;
|
||||
|
||||
return (<div className="ToolbarRow">
|
||||
<div className="clearfix">
|
||||
<div className="pull-left m-t-1">
|
||||
<RoundedButtonGroup options={leftSidebarToggle} value={leftSidebarValue} onValueChanged={this.onLeftSidebarValueChanged}/>
|
||||
</div>
|
||||
<ConnectedToolbarSection/>
|
||||
<div className="pull-right m-t-1 rm-x-1">
|
||||
{/* > roundedButtonGroup rightSidebarToggleButtonData */}
|
||||
</div>
|
||||
<div className="pull-left m-t-1 p-y-1" style={{ padding: '10px' }}>
|
||||
<RoundedButtonGroup options={leftSidebarToggle} value={leftSidebarValue} onValueChanged={this.onLeftSidebarValueChanged}/>
|
||||
</div>
|
||||
<ConnectedToolbarSection/>
|
||||
<ConnectedLayoutButton/>
|
||||
<div className="pull-right m-t-1 rm-x-1">
|
||||
{/* > roundedButtonGroup rightSidebarToggleButtonData */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,9 +3,9 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import cornerstone from 'cornerstone-core';
|
||||
import cornerstoneTools from 'cornerstone-tools';
|
||||
import { LayoutManager } from 'react-viewerbase';
|
||||
import { OHIF } from 'ohif-core';
|
||||
import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport.js';
|
||||
import ConnectedLayoutManager from './ConnectedLayoutManager.js';
|
||||
import StackManager from '../lib/StackManager.js';
|
||||
import './ViewerMain.css';
|
||||
|
||||
@ -72,13 +72,11 @@ class ViewerMain extends Component {
|
||||
});
|
||||
|
||||
// TODO: re-add plugins back in
|
||||
// TODO: We shouldn't just show hang display sets by default
|
||||
// TODO: We shouldn't just hang display sets by default
|
||||
const viewportData = displaySets.map((dSet, index) => {
|
||||
return this.getCornerstoneViewport(dSet, index);
|
||||
});
|
||||
|
||||
debugger;
|
||||
|
||||
this.setState({
|
||||
displaySets,
|
||||
viewportData
|
||||
@ -86,11 +84,11 @@ class ViewerMain extends Component {
|
||||
}
|
||||
|
||||
getCornerstoneViewport(data, index) {
|
||||
debugger;
|
||||
const stack = getCornerstoneStack(this.props.studies, data)
|
||||
const viewportData = {
|
||||
stack,
|
||||
...data
|
||||
...data,
|
||||
viewportIndex: index
|
||||
};
|
||||
|
||||
return (<ConnectedCornerstoneViewport
|
||||
@ -122,7 +120,7 @@ class ViewerMain extends Component {
|
||||
// TODO: Connect LayoutManager to redux
|
||||
return (
|
||||
<div className="ViewerMain">
|
||||
<LayoutManager viewportData={this.state.viewportData} setViewportData={this.setViewportData}/>
|
||||
<ConnectedLayoutManager viewportData={this.state.viewportData} setViewportData={this.setViewportData}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -14,6 +14,56 @@ reducers.ui = ui;
|
||||
const combined = combineReducers(reducers)
|
||||
const store = createStore(combined);
|
||||
|
||||
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: false
|
||||
},
|
||||
{
|
||||
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: true
|
||||
},
|
||||
];
|
||||
|
||||
store.dispatch({
|
||||
type: 'SET_AVAILABLE_BUTTONS',
|
||||
buttons: defaultButtons
|
||||
});
|
||||
|
||||
const servers = {
|
||||
dicomWeb: [
|
||||
{
|
||||
|
||||
@ -1 +1 @@
|
||||
export default 'f91fd93462f991cf94eb03a747e40a51826f5eaf';
|
||||
export default 'b84fd28dc262d3d3c569b38ac9e386857cced3e2';
|
||||
|
||||
@ -832,7 +832,7 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.12.0"
|
||||
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.2.0":
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0":
|
||||
version "7.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f"
|
||||
integrity sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==
|
||||
@ -2210,7 +2210,7 @@ class-utils@^0.3.5:
|
||||
isobject "^3.0.0"
|
||||
static-extend "^0.1.1"
|
||||
|
||||
classnames@^2.2.6:
|
||||
classnames@^2.2.5, classnames@^2.2.6:
|
||||
version "2.2.6"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
|
||||
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
|
||||
@ -3100,6 +3100,13 @@ dom-converter@~0.2:
|
||||
dependencies:
|
||||
utila "~0.4"
|
||||
|
||||
dom-helpers@^3.2.1, dom-helpers@^3.3.1:
|
||||
version "3.4.0"
|
||||
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
|
||||
integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.1.2"
|
||||
|
||||
dom-serializer@0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
|
||||
@ -6941,10 +6948,10 @@ obuf@^1.0.0, obuf@^1.1.1:
|
||||
resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
|
||||
integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
|
||||
|
||||
ohif-core@^0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/ohif-core/-/ohif-core-0.1.2.tgz#897c63b73de7a139567d0a6cfe98426aa25e1cb9"
|
||||
integrity sha512-KkiN14ctO3Dp4fJkjndSyUH5suBVcMVxetZdOVGrSlxWbnpCg6Hd2FPZpP6PcYPE4yhWNvUyV5dfP4Qhg14oxw==
|
||||
ohif-core@^0.1.3:
|
||||
version "0.1.3"
|
||||
resolved "https://registry.yarnpkg.com/ohif-core/-/ohif-core-0.1.3.tgz#e2c8e6365b3666e24b67c6db120be2aeed4c55e8"
|
||||
integrity sha512-rLYm/Uduw+XbX4pzhX3oAXT8gU22SzRdmOZ6CYsj0/ZCTJMv3SwT4oxKgOQReoOKzdRR13nhQuy0zn1QKuruCA==
|
||||
dependencies:
|
||||
cornerstone-math "^0.1.7"
|
||||
isomorphic-base64 "^1.0.2"
|
||||
@ -8071,7 +8078,15 @@ prompts@^0.1.9:
|
||||
kleur "^2.0.1"
|
||||
sisteransi "^0.1.1"
|
||||
|
||||
prop-types@^15.6.1, prop-types@^15.6.2:
|
||||
prop-types-extra@^1.0.1, prop-types-extra@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.0.tgz#32609910ea2dcf190366bacd3490d5a6412a605f"
|
||||
integrity sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==
|
||||
dependencies:
|
||||
react-is "^16.3.2"
|
||||
warning "^3.0.0"
|
||||
|
||||
prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
|
||||
version "15.6.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
|
||||
integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
|
||||
@ -8254,10 +8269,22 @@ react-app-polyfill@^0.1.3:
|
||||
raf "3.4.0"
|
||||
whatwg-fetch "3.0.0"
|
||||
|
||||
react-cornerstone-viewport@^0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-0.1.2.tgz#cd533949659d0e2abf2370b47c9d9a3c4aa5d4bc"
|
||||
integrity sha512-6vs/Rk1XpdEUev3MERBtyqF6luM50d8mFmgFzzAcfng5ydN2s+wlp+MPX9fL8OQ01ptXAZwSelIl+DOuf42Aag==
|
||||
react-bootstrap-modal@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-bootstrap-modal/-/react-bootstrap-modal-4.2.0.tgz#010b3ca9230a3c147fa5fc6aa39b6971e34151bd"
|
||||
integrity sha512-2Xx9yvPEnMNhJIAKCg+t3CECF6w3qt2mmICv1Y1vwDBHeuyyf3OvSFcnRM8E0Tn7pywgopL2qyU4yx0vnGKmdA==
|
||||
dependencies:
|
||||
classnames "^2.2.6"
|
||||
dom-helpers "^3.3.1"
|
||||
prop-types "^15.6.1"
|
||||
prop-types-extra "^1.1.0"
|
||||
react-overlays "^0.8.0"
|
||||
react-transition-group "^2.0.0"
|
||||
|
||||
react-cornerstone-viewport@^0.1.3:
|
||||
version "0.1.3"
|
||||
resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-0.1.3.tgz#d0c3b6e0d1adde9b3282465ae3397428f76aaf52"
|
||||
integrity sha512-ZbnT8M6HZimPGtdIlc1qPg04RmzlOijsWXTVdBBTAWPg5PUqbdBShQRjv+KvciL4kb6I+77WPWpsxJ1+QEoV+w==
|
||||
dependencies:
|
||||
cornerstone-core "2.2.8"
|
||||
cornerstone-math "0.1.7"
|
||||
@ -8339,11 +8366,23 @@ react-is@^16.3.2, react-is@^16.6.3:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.3.tgz#d2d7462fcfcbe6ec0da56ad69047e47e56e7eac0"
|
||||
integrity sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA==
|
||||
|
||||
react-lifecycles-compat@^3.0.2:
|
||||
react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
|
||||
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
|
||||
|
||||
react-overlays@^0.8.0:
|
||||
version "0.8.3"
|
||||
resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.8.3.tgz#fad65eea5b24301cca192a169f5dddb0b20d3ac5"
|
||||
integrity sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==
|
||||
dependencies:
|
||||
classnames "^2.2.5"
|
||||
dom-helpers "^3.2.1"
|
||||
prop-types "^15.5.10"
|
||||
prop-types-extra "^1.0.1"
|
||||
react-transition-group "^2.2.0"
|
||||
warning "^3.0.0"
|
||||
|
||||
react-redux@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0.tgz#09e86eeed5febb98e9442458ad2970c8f1a173ef"
|
||||
@ -8436,12 +8475,23 @@ react-scripts@^2.1.1:
|
||||
optionalDependencies:
|
||||
fsevents "1.2.4"
|
||||
|
||||
react-viewerbase@^0.1.7:
|
||||
version "0.1.7"
|
||||
resolved "https://registry.yarnpkg.com/react-viewerbase/-/react-viewerbase-0.1.7.tgz#86eecd9d2ef11d2d96bf7c8291aa0393401fd810"
|
||||
integrity sha512-an5Hyj3LuFTySGhltFphndAx6uHDpSjbeaDs1h12RFCUSFh862Xi3M942ul+Zaxc5EfOrEgjlkYOnDlXnrpNjA==
|
||||
react-transition-group@^2.0.0, react-transition-group@^2.2.0:
|
||||
version "2.5.2"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.2.tgz#9457166a9ba6ce697a3e1b076b3c049b9fb2c408"
|
||||
integrity sha512-vwHP++S+f6KL7rg8V1mfs62+MBKtbMeZDR8KiNmD7v98Gs3UPGsDZDahPJH2PVprFW5YHJfh6cbNim3zPndaSQ==
|
||||
dependencies:
|
||||
dom-helpers "^3.3.1"
|
||||
loose-envify "^1.4.0"
|
||||
prop-types "^15.6.2"
|
||||
react-lifecycles-compat "^3.0.4"
|
||||
|
||||
react-viewerbase@^0.1.8:
|
||||
version "0.1.8"
|
||||
resolved "https://registry.yarnpkg.com/react-viewerbase/-/react-viewerbase-0.1.8.tgz#982d25572a4b4ebf8f251e6770de23364421bff6"
|
||||
integrity sha512-bUg/bO6EQhbE6kEkfw1n91GTjSy52xP6BnfESSUEz9JcZ0VmcG8cDKhNSc+JVvtAAdjmmhLgCEkpoL9uza+CPQ==
|
||||
dependencies:
|
||||
classnames "^2.2.6"
|
||||
react-bootstrap-modal "^4.2.0"
|
||||
react-dnd "^7.0.2"
|
||||
react-dnd-html5-backend "^7.0.2"
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user