diff --git a/OHIFViewer-react/package.json b/OHIFViewer-react/package.json index c0081cd84..57b702747 100644 --- a/OHIFViewer-react/package.json +++ b/OHIFViewer-react/package.json @@ -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": { diff --git a/OHIFViewer-react/src/App.css b/OHIFViewer-react/src/App.css index de919d2ba..1a19b79ec 100644 --- a/OHIFViewer-react/src/App.css +++ b/OHIFViewer-react/src/App.css @@ -13,4 +13,5 @@ body { padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -} \ No newline at end of file + font-family: Roboto,OpenSans,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif; +} diff --git a/OHIFViewer-react/src/FlexboxLayout/ConnectedLayoutButton.js b/OHIFViewer-react/src/FlexboxLayout/ConnectedLayoutButton.js new file mode 100644 index 000000000..f3801e4b0 --- /dev/null +++ b/OHIFViewer-react/src/FlexboxLayout/ConnectedLayoutButton.js @@ -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; diff --git a/OHIFViewer-react/src/FlexboxLayout/ConnectedLayoutManager.js b/OHIFViewer-react/src/FlexboxLayout/ConnectedLayoutManager.js new file mode 100644 index 000000000..2728e054e --- /dev/null +++ b/OHIFViewer-react/src/FlexboxLayout/ConnectedLayoutManager.js @@ -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; diff --git a/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js b/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js index 4b89709a7..aa6bbd373 100644 --- a/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js +++ b/OHIFViewer-react/src/FlexboxLayout/ToolbarRow.js @@ -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 (
-
-
- -
- -
- {/* > roundedButtonGroup rightSidebarToggleButtonData */} -
+
+ +
+ + +
+ {/* > roundedButtonGroup rightSidebarToggleButtonData */}
); diff --git a/OHIFViewer-react/src/FlexboxLayout/ViewerMain.js b/OHIFViewer-react/src/FlexboxLayout/ViewerMain.js index 452268a6e..acddeab6a 100644 --- a/OHIFViewer-react/src/FlexboxLayout/ViewerMain.js +++ b/OHIFViewer-react/src/FlexboxLayout/ViewerMain.js @@ -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 ( - +
); } diff --git a/OHIFViewer-react/src/index.js b/OHIFViewer-react/src/index.js index 619ade962..37fa24ddf 100644 --- a/OHIFViewer-react/src/index.js +++ b/OHIFViewer-react/src/index.js @@ -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: [ { diff --git a/OHIFViewer-react/src/sha.js b/OHIFViewer-react/src/sha.js index f72cc9801..f0d49bcbe 100644 --- a/OHIFViewer-react/src/sha.js +++ b/OHIFViewer-react/src/sha.js @@ -1 +1 @@ -export default 'f91fd93462f991cf94eb03a747e40a51826f5eaf'; +export default 'b84fd28dc262d3d3c569b38ac9e386857cced3e2'; diff --git a/OHIFViewer-react/yarn.lock b/OHIFViewer-react/yarn.lock index 42e28386a..d0636c8e3 100644 --- a/OHIFViewer-react/yarn.lock +++ b/OHIFViewer-react/yarn.lock @@ -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"