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

Add layout tools based on mode.

Browse Source
This commit is contained in:
James A. Petts 2020-05-13 12:00:23 +01:00
parent c23c1e8db6
commit 41c508b2da
4 changed files with 90 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/cornerstone/src/toolbarModule.js
View File

@ -47,7 +47,7 @@ const definitions = [
{
id: 'Zoom',
label: 'Zoom',
icon: 'search-plus',
icon: 'tool-zoom',
//
type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
commandName: 'setToolActive',

104
extensions/default/src/getLayoutTemplateModule.js
View File

@ -18,7 +18,7 @@ export default function() {
];
}
const Header = () => {
const Header = ({ tools, moreTools }) => {
const [activeTool, setActiveTool] = useState('Zoom');
const dropdownContent = [
{
@ -30,6 +30,7 @@ const Header = () => {
{ name: 'Bone', value: '2500 / 480' },
{ name: 'Brain', value: '80 / 40' },
];
/*
const tools = [
{
id: 'Zoom',
@ -90,6 +91,7 @@ const Header = () => {
onClick: () => setActiveTool('Layout'),
},
];
*/
return (
<NavBar className="justify-between border-b-4 border-black">
<div className="flex flex-1 justify-between">
@ -106,7 +108,11 @@ const Header = () => {
</div>
</div>
<div className="flex items-center">
<Toolbar tools={tools} activeTool={activeTool} moreTools={tools} />
<Toolbar
tools={tools}
activeTool={activeTool}
moreTools={moreTools}
/>
</div>
<div className="flex items-center">
<span className="mr-3 text-common-light text-lg">
@ -128,45 +134,45 @@ const Header = () => {
);
};
const ViewportToolbar = () => {
const tools = [
{
id: 'Annotate',
label: 'Annotate',
icon: 'tool-annotate',
type: null,
commandName: 'setToolActive',
commandOptions: { toolName: 'Annotate' },
onClick: () => console.log('Activate Annotate'),
},
{
id: 'Bidirectional',
label: 'Bidirectional',
icon: 'tool-bidirectional',
type: null,
commandName: 'setToolActive',
commandOptions: { toolName: 'Bidirectional' },
onClick: () => console.log('Activate Bidirectional'),
},
{
id: 'Elipse',
label: 'Elipse',
icon: 'tool-elipse',
type: null,
commandName: 'setToolActive',
commandOptions: { toolName: 'Elipse' },
onClick: () => console.log('Activate Elipse'),
},
{
id: 'Length',
label: 'Length',
icon: 'tool-length',
type: null,
commandName: 'setToolActive',
commandOptions: { toolName: 'Length' },
onClick: () => console.log('Activate Length'),
},
];
const ViewportToolbar = ({ tools }) => {
// const tools = [
// {
// id: 'Annotate',
// label: 'Annotate',
// icon: 'tool-annotate',
// type: null,
// commandName: 'setToolActive',
// commandOptions: { toolName: 'Annotate' },
// onClick: () => console.log('Activate Annotate'),
// },
// {
// id: 'Bidirectional',
// label: 'Bidirectional',
// icon: 'tool-bidirectional',
// type: null,
// commandName: 'setToolActive',
// commandOptions: { toolName: 'Bidirectional' },
// onClick: () => console.log('Activate Bidirectional'),
// },
// {
// id: 'Elipse',
// label: 'Elipse',
// icon: 'tool-elipse',
// type: null,
// commandName: 'setToolActive',
// commandOptions: { toolName: 'Elipse' },
// onClick: () => console.log('Activate Elipse'),
// },
// {
// id: 'Length',
// label: 'Length',
// icon: 'tool-length',
// type: null,
// commandName: 'setToolActive',
// commandOptions: { toolName: 'Length' },
// onClick: () => console.log('Activate Length'),
// },
// ];
return <Toolbar type="secondary" tools={tools} />;
};
@ -197,9 +203,14 @@ function viewerLayout({
console.warn(displaySetInstanceUids);
console.warn(toolBarLayout);
const [primaryToolBarLayout, secondaryToolBarLayout] = toolBarLayout;
return (
<div>
<Header />
<Header
tools={primaryToolBarLayout.tools}
moreTools={primaryToolBarLayout.moreTools}
/>
<div
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
style={{ height: 'calc(100vh - 57px' }}
@ -211,7 +222,7 @@ function viewerLayout({
/>
<div className="flex flex-col flex-1 h-full pb-2">
<div className="flex flex-2 w-100 border-b border-transparent h-12">
<ViewportToolbar />
<ViewportToolbar tools={secondaryToolBarLayout.tools} />
</div>
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
{/*<ViewportGrid
@ -287,3 +298,10 @@ function viewerLayout({
</div>
);
}
viewerLayout.defaultProps = {
toolBarLayout: [
{ tools: [], moreTools: [] },
{ tools: [], moreTools: [] },
],
};

11
modes/example/src/index.js
View File

@ -24,12 +24,19 @@ export default function mode({ modeConfiguration }) {
},
]);
debugger;
// Could import layout selector here from org.ohif.default (when it exists!)
toolBarManager.setToolBarLayout([
// Primary
['StackScroll', { label: 'More', subMenu: ['Zoom'] }],
{
tools: ['Zoom'],
moreTools: ['Zoom'],
},
// Secondary
['StackScroll'],
{
tools: ['Zoom'],
},
]);
},
layoutTemplate: ({ routeProps }) => {

38
platform/core/src/ToolBarManager.js
View File

@ -2,7 +2,7 @@ export default class toolBarManager {
constructor(extensionManager, setToolBarLayout) {
this.buttons = {};
this.extensionManager = extensionManager;
this.setToolBarLayout = setToolBarLayout;
this.viewModelContextSetToolBarLayout = setToolBarLayout;
}
addButtons(buttons) {
@ -22,34 +22,34 @@ export default class toolBarManager {
setToolBarLayout(layouts) {
const toolBarLayout = [];
debugger;
console.log('setToolBarLayout');
layouts.forEach(layout => {
const toolBarDefinitions = [];
const toolBarDefinitions = { tools: [], moreTools: [] };
layout.forEach(element => {
if (typeof element === 'object') {
// process submenu.
const { tools, moreTools } = layout;
const subMenuDefinition = { label: element.label, subMenu: [] };
element.subMenu.forEach(subMenuElement => {
const button = this.buttons[subMenuElement];
subMenuDefinition.subMenu.push(button);
});
toolBarDefinitions.push(subMenuDefinition);
} else {
tools &&
tools.forEach(element => {
const button = this.buttons[element];
toolBarDefinitions.push(button);
}
});
toolBarDefinitions.tools.push(button);
});
moreTools &&
moreTools.forEach(element => {
const button = this.buttons[element];
toolBarDefinitions.moreTools.push(button);
});
toolBarLayout.push(toolBarDefinitions);
});
console.log(`TOOLBAR LAYOUT`);
console.log(toolBarLayout);
setToolBarLayout(toolBarLayout);
this.viewModelContextSetToolBarLayout(toolBarLayout);
}
}