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

Simplify toolbar module to be config only for now; use new modules in extension

Browse Source
This commit is contained in:
dannyrb 2019-06-16 13:56:24 -04:00
parent 43a493283a
commit 4de5fa2d0e
4 changed files with 89 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
extensions/ohif-cornerstone-extension/src/ConnectedToolbarSection.js
View File

@ -1,29 +0,0 @@
import { connect } from 'react-redux';
import { ToolbarSection } from 'react-viewerbase';
import OHIF from 'ohif-core'
const { setToolActive } = OHIF.redux.actions;
const mapStateToProps = state => {
const activeButton = state.tools.buttons.find(tool => tool.active === true);
return {
buttons: state.tools.buttons,
activeCommand: activeButton && activeButton.command
};
};
const mapDispatchToProps = dispatch => {
return {
setToolActive: tool => {
dispatch(setToolActive(tool.command))
}
};
};
const ConnectedToolbarSection = connect(
mapStateToProps,
mapDispatchToProps
)(ToolbarSection);
export default ConnectedToolbarSection;

65
extensions/ohif-cornerstone-extension/src/OHIFCornerstoneExtension.js
View File

@ -1,65 +0,0 @@
import OHIFCornerstoneViewport from './OHIFCornerstoneViewport.js';
import React from 'react';
import ToolbarModule from './ToolbarModule.js';
/**
* Pass in 'children' to a React component. The purpose of this is to
* allow end users of this extension to pass in components which will
* be rendered on top of the base components.
*
* @param WrappedComponent
* @param children
* @return {function(*): *}
*/
function componentWithProps(WrappedComponent, children, customProps) {
return function(props) {
const extraProps = {
customProps
};
if (children.viewport) {
extraProps.children = children.viewport;
}
const mergedProps = Object.assign({}, props, extraProps);
return <WrappedComponent {...mergedProps} />;
};
}
// Note: If you are authoring extensions which use stateful libraries (e.g. cornerstone-core, react-redux) as peerDependencies and are also duplicated at the application level, try using 'yalc' to link it to the application, rather than yarn link. This can help fix 'module not found' issues.
// https://github.com/whitecolor/yalc
export default class OHIFCornerstoneExtension {
constructor(props) {
const { children = {}, customProps = {} } = props;
this.children = children;
this.customProps = customProps;
}
/**
* Extension ID is a unique id, might be used for namespacing extension specific redux actions/reducers (?)
*/
getExtensionId() {
return 'cornerstone';
}
getViewportModule() {
return componentWithProps(
OHIFCornerstoneViewport,
this.children,
this.customProps
);
}
getSopClassHandler() {
return null;
}
getPanelModule() {
return null;
}
getToolbarModule() {
return ToolbarModule;
}
}

123
extensions/ohif-cornerstone-extension/src/ToolbarModule.js
View File

@ -1,43 +1,94 @@
import React, { Component } from 'react';
// TODO: A way to add Icons that don't already exist?
// - Register them and add
// - Include SVG Source/Inline?
// - By URL, or own component?
import ConnectedCineDialog from './ConnectedCineDialog';
import ConnectedToolbarSection from './ConnectedToolbarSection';
import { ToolbarButton } from 'react-viewerbase';
// TODO: `ohif-core` toolbar builder?
class ToolbarModule extends Component {
state = {
cineDialogOpen: false
};
// What KINDS of toolbar buttons do we have...
// - One's that dispatch commands
// - One's that set tool's active
// - More custom, like CINE
// - Built in for one's like this, or custom components?
onClickCineToolbarButton = () => {
this.setState({
cineDialogOpen: !this.state.cineDialogOpen
});
};
// Visible?
// Disabled?
// Based on contexts or misc. criteria?
// -- ACTIVE_ROUTE::VIEWER
// -- ACTIVE_VIEWPORT::CORNERSTONE
// setToolActive commands should receive the button event that triggered
// so we can do the "bind to this butyon" magic
render() {
const cineDialogContainerStyle = {
display: this.state.cineDialogOpen ? 'block' : 'none',
position: 'absolute',
top: '82px',
zIndex: 999
};
const TOOLBAR_BUTTON_TYPES = {
COMMAND: 'command',
SET_TOOL_ACTIVE: 'setToolActive'
};
return (
<div className="ToolbarModule">
<ConnectedToolbarSection />
<ToolbarButton
active={this.state.cineDialogOpen}
onClick={this.onClickCineToolbarButton}
text="CINE"
icon="youtube"
/>
<div className="CineDialogContainer" style={cineDialogContainerStyle}>
<ConnectedCineDialog />
</div>
</div>
);
const definitions = [
{
id: 'StackScroll',
label: 'Stack Scroll',
icon: 'bars',
//
type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
commandName: 'setToolActive',
commandOptions: { toolName: 'StackScroll' }
},
{
id: 'Zoom',
label: 'Zoom',
icon: 'search-plus',
//
type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
commandName: 'setToolActive',
commandOptions: { toolName: 'Zoom' }
},
{
id: 'Wwwc',
label: 'Levels',
icon: 'level',
//
type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
commandName: 'setToolActive',
commandOptions: { toolName: 'Wwwc' }
},
{
id: 'Pan',
label: 'Pan',
icon: 'arrows',
//
type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
commandName: 'setToolActive',
commandOptions: { toolName: 'Pan' }
},
{
id: 'Length',
label: 'Length',
icon: 'measure-temp',
//
type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
commandName: 'setToolActive',
commandOptions: { toolName: 'Length' }
},
{
id: 'Angle',
label: 'Angle',
icon: 'angle-left',
//
type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
commandName: 'setToolActive',
commandOptions: { toolName: 'Angle' }
},
{
id: 'Reset',
label: 'Reset',
icon: 'reset',
//
type: TOOLBAR_BUTTON_TYPES.COMMAND,
commandName: 'resetViewport'
}
}
];
export default ToolbarModule;
export default {
definitions
};

4
extensions/ohif-cornerstone-extension/src/index.js
View File

@ -1,6 +1,6 @@
import OHIFCornerstoneViewport from './OHIFCornerstoneViewport.js';
import ToolbarModule from './ToolbarModule.js';
import commandsModule from './commandsModule.js';
import toolbarModule from './toolbarModule.js';
/**
*
@ -15,7 +15,7 @@ export default {
return OHIFCornerstoneViewport;
},
getToolbarModule() {
return ToolbarModule;
return toolbarModule;
},
getCommandsModule() {
return commandsModule;