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

feat: extension panels

Browse Source 
* Snapshot -- Switching branches
* fix classes and hooks for panel componet
* Restore button functionality
* feat: support for expandableToolMenu
* Shift cornerstoneTools config up a layer, and use globalToolSync
* Remaining initCornerstoneTools changes
* Pull in Segmentation Plugin
* Shift MeasurementsPanel to an extension
* Note regarding where data is coming from
* Make sure measurement callback is available
* Bump core version
* Shift MeasurementsTable to a local extensions directory
* Register appCommands as an extension
* Update package dependencies and yarn lock
* Support for panel width
* Ability to pass props to our panel component
* Add a safety check around calling our tacked on method for tool options
* Left sidebar plugins + fix activeIndex prop passed to sidebar.
* fix: viewer height
Now in a shared container w/ top bar, so we need to factor that in when calculating height
* lock file latest
* Update thumbnails if studies has changes
* bump cornerstone version to resolve globalToolSynch history issue
* Default panel to open; studies optional
* Bump minor version for ohif-cornestone-extension
* Simplify button logic
* Accommodate odd roundedButtonGroup value change emit
* Map viewers + selectedViewport instead of pulling off the window
This commit is contained in:
Danny Brown authored and GitHub committed 2019-07-04 14:09:13 -04:00
1 parent 514609708d
commit 5ac9048ef0
36 files changed
+554 -463
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/connectedComponents/ToolbarRow.js
+112 -69
View File
@@ -1,7 +1,11 @@
import './ToolbarRow.css';
import React, { Component } from 'react';
import { RoundedButtonGroup, ToolbarButton } from 'react-viewerbase';
import {
RoundedButtonGroup,
ToolbarButton,
ExpandableToolMenu,
} from 'react-viewerbase';
import { commandsManager, extensionManager } from './../App.js';
import ConnectedCineDialog from './ConnectedCineDialog';
@@ -11,19 +15,17 @@ import { MODULE_TYPES } from 'ohif-core';
import PropTypes from 'prop-types';
class ToolbarRow extends Component {
// TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
// closed if selected is null/undefined
static propTypes = {
leftSidebarOpen: PropTypes.bool.isRequired,
rightSidebarOpen: PropTypes.bool.isRequired,
setLeftSidebarOpen: PropTypes.func,
setRightSidebarOpen: PropTypes.func,
isLeftSidePanelOpen: PropTypes.bool.isRequired,
isRightSidePanelOpen: PropTypes.bool.isRequired,
selectedLeftSidePanel: PropTypes.string.isRequired,
selectedRightSidePanel: PropTypes.string.isRequired,
handleSidePanelChange: PropTypes.func,
activeContexts: PropTypes.arrayOf(PropTypes.string).isRequired,
};
static defaultProps = {
leftSidebarOpen: false,
rightSidebarOpen: false,
};
constructor(props) {
super(props);
@@ -43,6 +45,43 @@ class ToolbarRow extends Component {
};
this._handleBuiltIn = _handleBuiltIn.bind(this);
const panelModules = extensionManager.modules[MODULE_TYPES.PANEL];
this.buttonGroups = {
left: [
// TODO: This should come from extensions, instead of being baked in
{
value: 'studies',
icon: 'th-large',
bottomLabel: 'Series',
},
],
right: [],
};
panelModules.forEach(panelExtension => {
const panelModule = panelExtension.module;
const defaultContexts = Array.from(panelModule.defaultContext);
// MENU OPTIONS
panelModule.menuOptions.forEach(menuOption => {
const contexts = Array.from(menuOption.context || defaultContexts);
const activeContextIncludesAnyPanelContexts = this.props.activeContexts.some(
actx => contexts.includes(actx)
);
if (activeContextIncludesAnyPanelContexts) {
const menuOptionEntry = {
value: menuOption.target,
icon: menuOption.icon,
bottomLabel: menuOption.label,
};
const from = menuOption.from || 'right';
this.buttonGroups[from].push(menuOptionEntry);
}
});
});
}
componentDidUpdate(prevProps) {
@@ -56,39 +95,7 @@ class ToolbarRow extends Component {
}
}
onLeftSidebarValueChanged = value => {
this.props.setLeftSidebarOpen(!!value);
};
onRightSidebarValueChanged = value => {
this.props.setRightSidebarOpen(!!value);
};
render() {
const leftSidebarToggle = [
{
value: 'studies',
icon: 'th-large',
bottomLabel: 'Series',
},
];
const rightSidebarToggle = [
{
value: 'measurements',
icon: 'list',
bottomLabel: 'Measurements',
},
];
const leftSidebarValue = this.props.leftSidebarOpen
? leftSidebarToggle[0].value
: null;
const rightSidebarValue = this.props.rightSidebarOpen
? rightSidebarToggle[0].value
: null;
const buttonComponents = _getButtonComponents.call(
this,
this.state.toolbarButtons,
@@ -102,14 +109,20 @@ class ToolbarRow extends Component {
zIndex: 999,
};
const onPress = (side, value) => {
this.props.handleSidePanelChange(side, value);
};
const onPressLeft = onPress.bind(this, 'left');
const onPressRight = onPress.bind(this, 'right');
return (
<>
<div className="ToolbarRow">
<div className="pull-left m-t-1 p-y-1" style={{ padding: '10px' }}>
<RoundedButtonGroup
options={leftSidebarToggle}
value={leftSidebarValue}
onValueChanged={this.onLeftSidebarValueChanged}
options={this.buttonGroups.left}
value={this.props.selectedLeftSidePanel || ''}
onValueChanged={onPressLeft}
/>
</div>
{buttonComponents}
@@ -119,11 +132,13 @@ class ToolbarRow extends Component {
className="pull-right m-t-1 rm-x-1"
style={{ marginLeft: 'auto' }}
>
<RoundedButtonGroup
options={rightSidebarToggle}
value={rightSidebarValue}
onValueChanged={this.onRightSidebarValueChanged}
/>
{this.buttonGroups.right.length && (
<RoundedButtonGroup
options={this.buttonGroups.right}
value={this.props.selectedRightSidePanel || ''}
onValueChanged={onPressRight}
/>
)}
</div>
</div>
<div className="CineDialogContainer" style={cineDialogContainerStyle}>
@@ -140,36 +155,64 @@ class ToolbarRow extends Component {
*/
function _getButtonComponents(toolbarButtons, activeButtons) {
return toolbarButtons.map((button, index) => {
// TODO: If `button.buttons`, use `ExpandedToolMenu`
// I don't believe any extensions currently leverage this
if (button.buttons) {
// Iterate over button definitions and update `onClick` behavior
const childButtons = button.buttons.map(childButton => {
childButton.onClick = _handleToolbarButtonClick.bind(this, childButton);
return childButton;
});
return (
<ExpandableToolMenu
key={button.id}
text={button.label}
icon={button.icon}
buttons={childButtons}
/>
);
}
return (
<ToolbarButton
key={button.id}
label={button.label}
icon={button.icon}
onClick={(evt, props) => {
if (button.commandName) {
const options = Object.assign({ evt }, button.commandOptions);
commandsManager.runCommand(button.commandName, options);
}
// TODO: Use Types ENUM
// TODO: We can update this to be a `getter` on the extension to query
// For the active tools after we apply our updates?
if (button.type === 'setToolActive') {
this.setState({
activeButtons: [button.id],
});
} else if (button.type === 'builtIn') {
this._handleBuiltIn(button.options);
}
}}
onClick={_handleToolbarButtonClick.bind(this, button)}
isActive={activeButtons.includes(button.id)}
/>
);
});
}
/**
* A handy way for us to handle different button types. IE. firing commands for
* buttons, or initiation built in behavior.
*
* @param {*} button
* @param {*} evt
* @param {*} props
*/
function _handleToolbarButtonClick(button, evt, props) {
if (button.commandName) {
const options = Object.assign({ evt }, button.commandOptions);
commandsManager.runCommand(button.commandName, options);
}
// TODO: Use Types ENUM
// TODO: We can update this to be a `getter` on the extension to query
// For the active tools after we apply our updates?
if (button.type === 'setToolActive') {
this.setState({
activeButtons: [button.id],
});
} else if (button.type === 'builtIn') {
this._handleBuiltIn(button.options);
}
}
/**
*
*/
function _getVisibleToolbarButtons() {
const toolbarModules = extensionManager.modules[MODULE_TYPES.TOOLBAR];
const toolbarButtonDefinitions = [];