From f7ae544716d9000f536423701864b8d18cdc5892 Mon Sep 17 00:00:00 2001 From: "James A. Petts" Date: Tue, 19 May 2020 13:01:39 +0100 Subject: [PATCH] WIP, wrap command manager controls so we can pass these to the UI component. --- extensions/default/src/ViewerLayout/index.jsx | 74 +++++++++++++------ .../default/src/getLayoutTemplateModule.js | 13 +++- platform/core/src/ToolbarLayoutContext.js | 39 ---------- platform/core/src/index.js | 6 -- 4 files changed, 62 insertions(+), 70 deletions(-) delete mode 100644 platform/core/src/ToolbarLayoutContext.js diff --git a/extensions/default/src/ViewerLayout/index.jsx b/extensions/default/src/ViewerLayout/index.jsx index 6896ad3e3..caba65b44 100644 --- a/extensions/default/src/ViewerLayout/index.jsx +++ b/extensions/default/src/ViewerLayout/index.jsx @@ -1,28 +1,14 @@ import React, { useEffect, useState, useCallback } from 'react'; import PropTypes from 'prop-types'; import { SidePanel, Toolbar } from '@ohif/ui'; -import { useToolbarLayout } from '@ohif/core'; // import Header from './Header.jsx'; -import { displaySetManager } from '@ohif/core'; - -// function ViewportDataCreator({ setViewportData }) { -// const { displaySetInstanceUIDs } = useViewModel(); -// console.log(displaySetInstanceUIDs); - -// useEffect(() => { -// setViewportData([ -// displaySetManager.getDisplaySetByUID(displaySetInstanceUIDs[0]), -// ]); -// }, [displaySetInstanceUIDs, setViewportData]); - -// return null; -// } function ViewerLayout({ // From Extension Module Params extensionManager, servicesManager, + commandsManager, // From Modes leftPanels, rightPanels, @@ -69,8 +55,56 @@ function ViewerLayout({ }; const handleToolBarSubscription = newToolBarLayout => { + // Get buttons to pass to toolbars. + console.log(commandsManager); + + const firstTool = newToolBarLayout[0].tools[0]; + + const toolBarLayout = []; + + newToolBarLayout.forEach(newToolBar => { + const toolBar = { tools: [], moreTools: [] }; + + Object.keys(newToolBar).forEach(key => { + if (newToolBar[key].length) { + newToolBar[key].forEach(tool => { + const commandOptions = tool.commandOptions || {}; + + toolBar[key].push({ + context: tool.context, + icon: tool.icon, + id: tool.id, + label: tool.label, + type: 'setToolActive', + onClick: () => + commandsManager.runCommand(tool.commandName, commandOptions), + }); + }); + } + }); + + toolBarLayout.push(toolBar); + + // if (newToolBar.moreTools && newToolBar.moreTools.length) { + // newToolBar.moreTools.forEach(tool => { + // const commandOptions = tool.commandOptions || {}; + + // toolBar.push({ + // context: tool.context, + // icon: tool.icon, + // id: tool.id, + // label: tool.label, + // type: 'setToolActive', + // command: () => + // commandsManager.runCommand(tool.commandName, commandOptions), + // }); + // }); + // } + }); + debugger; - setToolBarLayout(newToolBarLayout); + + setToolBarLayout(toolBarLayout); }; const [toolBarLayout, setToolBarLayout] = useState([ @@ -188,6 +222,7 @@ ViewerLayout.propTypes = { extensionManager: PropTypes.shape({ getModuleEntry: PropTypes.func.isRequired, }).isRequired, + commandsManager: PropTypes.object, // From modes // TODO: Not in love with this shape, toolBarLayout: PropTypes.arrayOf( @@ -203,11 +238,4 @@ ViewerLayout.propTypes = { children: PropTypes.oneOfType(PropTypes.node, PropTypes.func).isRequired, }; -ViewerLayout.defaultProps = { - toolBarLayout: [ - { tools: [], moreTools: [] }, - { tools: [], moreTools: [] }, - ], -}; - export default ViewerLayout; diff --git a/extensions/default/src/getLayoutTemplateModule.js b/extensions/default/src/getLayoutTemplateModule.js index 595f83474..e70d961c1 100644 --- a/extensions/default/src/getLayoutTemplateModule.js +++ b/extensions/default/src/getLayoutTemplateModule.js @@ -5,9 +5,18 @@ import ViewerLayout from './ViewerLayout'; - Init layout based on the displaySets and the objects. */ -export default function({ servicesManager, extensionManager }) { +export default function({ + servicesManager, + extensionManager, + commandsManager, +}) { function ViewerLayoutWithServices(props) { - return ViewerLayout({ servicesManager, extensionManager, ...props }); + return ViewerLayout({ + servicesManager, + extensionManager, + commandsManager, + ...props, + }); } return [ diff --git a/platform/core/src/ToolbarLayoutContext.js b/platform/core/src/ToolbarLayoutContext.js deleted file mode 100644 index c88419831..000000000 --- a/platform/core/src/ToolbarLayoutContext.js +++ /dev/null @@ -1,39 +0,0 @@ -import React, { Component, useContext } from 'react'; - -/// TODO MAKE THIS PRETTY DANNY - -const ToolbarLayoutContext = React.createContext({ - toolBarLayout: [], - setToolBarLayout: () => {}, -}); - -ToolbarLayoutContext.displayName = 'ToolbarLayoutContext'; - -class ToolbarLayoutProvider extends Component { - state = { - toolBarLayout: [], - }; - - render() { - const setToolBarLayout = toolBarLayout => { - this.setState({ toolBarLayout }); - }; - - return ( - - {this.props.children} - - ); - } -} - -const useToolbarLayout = () => useContext(ToolbarLayoutContext); - -export default ToolbarLayoutContext; - -export { ToolbarLayoutProvider, useToolbarLayout }; diff --git a/platform/core/src/index.js b/platform/core/src/index.js index 57705c424..09067349b 100644 --- a/platform/core/src/index.js +++ b/platform/core/src/index.js @@ -21,10 +21,6 @@ import ui from './ui'; import user from './user.js'; import dicomMetadataStore from './dicomMetadataStore'; import { ViewModelProvider, useViewModel } from './ViewModelContext'; -import { - ToolbarLayoutProvider, - useToolbarLayout, -} from './ToolbarLayoutContext'; import utils, { hotkeys } from './utils/'; import { @@ -119,8 +115,6 @@ export { dicomMetadataStore, ViewModelProvider, useViewModel, - ToolbarLayoutProvider, - useToolbarLayout, }; export { OHIF };