Duplicate toolbar buttons for "example" mode and add nested menu buttons
This commit is contained in:
dannyrb
parent
0f2bae008d
commit
10484fceec
@ -1,3 +1,5 @@
|
||||
import toolbarButtons from './toolbarButtons.js';
|
||||
|
||||
export default function mode({ modeConfiguration }) {
|
||||
return {
|
||||
id: 'example-mode',
|
||||
@ -16,57 +18,33 @@ export default function mode({ modeConfiguration }) {
|
||||
init: ({ servicesManager, extensionManager }) => {
|
||||
const { ToolBarService } = servicesManager.services;
|
||||
ToolBarService.init(extensionManager);
|
||||
ToolBarService.addButtons([
|
||||
{
|
||||
id: 'Zoom',
|
||||
namespace: 'org.ohif.cornerstone.toolbarModule.Zoom',
|
||||
},
|
||||
{
|
||||
id: 'Levels',
|
||||
namespace: 'org.ohif.cornerstone.toolbarModule.Wwwc',
|
||||
},
|
||||
{
|
||||
id: 'Pan',
|
||||
namespace: 'org.ohif.cornerstone.toolbarModule.Pan',
|
||||
},
|
||||
{
|
||||
id: 'Capture',
|
||||
namespace: 'org.ohif.cornerstone.toolbarModule.Capture',
|
||||
},
|
||||
{
|
||||
id: 'Layout',
|
||||
namespace: 'org.ohif.default.toolbarModule.Layout',
|
||||
},
|
||||
{
|
||||
id: 'Annotate',
|
||||
namespace: 'org.ohif.cornerstone.toolbarModule.Annotate',
|
||||
},
|
||||
{
|
||||
id: 'Bidirectional',
|
||||
namespace: 'org.ohif.cornerstone.toolbarModule.Bidirectional',
|
||||
},
|
||||
{
|
||||
id: 'Ellipse',
|
||||
namespace: 'org.ohif.cornerstone.toolbarModule.Ellipse',
|
||||
},
|
||||
{
|
||||
id: 'Length',
|
||||
namespace: 'org.ohif.cornerstone.toolbarModule.Length',
|
||||
},
|
||||
ToolBarService.addButtons(toolbarButtons);
|
||||
ToolBarService.createButtonSection('primary', [
|
||||
'Zoom',
|
||||
'Wwwc',
|
||||
'Pan',
|
||||
'Capture',
|
||||
'Layout',
|
||||
'Divider',
|
||||
[
|
||||
'ResetView',
|
||||
'RotateClockwise',
|
||||
'FlipHorizontally',
|
||||
'StackScroll',
|
||||
'Magnify',
|
||||
'Invert',
|
||||
'Cine',
|
||||
'Angle',
|
||||
'Probe',
|
||||
'RectangleRoi',
|
||||
],
|
||||
]);
|
||||
ToolBarService.createButtonSection('secondary', [
|
||||
'Annotate',
|
||||
'Bidirectional',
|
||||
'Ellipse',
|
||||
'Length',
|
||||
]);
|
||||
|
||||
// Could import layout selector here from org.ohif.default (when it exists!)
|
||||
// ToolBarService.setToolBarLayout([
|
||||
// // Primary
|
||||
// {
|
||||
// tools: ['Zoom', 'Levels', 'Pan', 'Capture', 'Layout'],
|
||||
// moreTools: ['Zoom'],
|
||||
// },
|
||||
// // Secondary
|
||||
// {
|
||||
// tools: ['Annotate', 'Bidirectional', 'Ellipse', 'Length'],
|
||||
// },
|
||||
// ]);
|
||||
},
|
||||
layoutTemplate: ({ routeProps }) => {
|
||||
return {
|
||||
|
||||
259
modes/example/src/toolbarButtons.js
Normal file
259
modes/example/src/toolbarButtons.js
Normal file
@ -0,0 +1,259 @@
|
||||
// TODO: torn, can either bake this here; or have to create a whole new button type
|
||||
// Only ways that you can pass in a custom React component for render :l
|
||||
|
||||
export default [
|
||||
// Divider
|
||||
{
|
||||
id: 'Divider',
|
||||
type: 'ohif.divider',
|
||||
},
|
||||
// ~~ Primary
|
||||
{
|
||||
id: 'Zoom',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-zoom',
|
||||
label: 'Zoom',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Zoom' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Wwwc',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: true,
|
||||
icon: 'tool-window-level',
|
||||
label: 'Levels',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Wwwc' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Pan',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Pan',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Pan' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Capture',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Capture',
|
||||
commandName: 'showDownloadViewportModal',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Layout',
|
||||
type: 'ohif.layoutSelector',
|
||||
},
|
||||
// ~~ Primary: NESTED
|
||||
{
|
||||
id: 'ResetView',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Reset View',
|
||||
commandName: '',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'RotateClockwise',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Rotate Right',
|
||||
commandName: '',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'FlipHorizontally',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Flip Horizontally',
|
||||
commandName: '',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'StackScroll',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Stack Scroll',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'StackScroll' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Magnify',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Magnify',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Magnify' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Invert',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Invert',
|
||||
commandName: '',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
// TODO: Toggle
|
||||
{
|
||||
id: 'Cine',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Cine',
|
||||
commandName: '',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
// TODO: 2D MPR: We had said this was off the table?
|
||||
{
|
||||
id: 'Angle',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Angle',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Angle' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Probe',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Probe',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Probe' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'RectangleRoi',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Rectangle',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'RectangleRoi' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
// ~~ Secondary
|
||||
{
|
||||
id: 'Annotate',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-annotate',
|
||||
label: 'Annotate',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'ArrowAnnotate' },
|
||||
type: 'secondary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Bidirectional',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-bidirectional',
|
||||
label: 'Bidirectional',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Bidirectional' },
|
||||
type: 'secondary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Ellipse',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-elipse',
|
||||
label: 'Ellipse',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'EllipticalRoi' },
|
||||
type: 'secondary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Length',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-length',
|
||||
label: 'Length',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Length' },
|
||||
type: 'secondary',
|
||||
},
|
||||
},
|
||||
];
|
||||
@ -43,7 +43,18 @@ export default function mode({ modeConfiguration }) {
|
||||
'Capture',
|
||||
'Layout',
|
||||
'Divider',
|
||||
['Zoom', 'Wwwc'],
|
||||
[
|
||||
'ResetView',
|
||||
'RotateClockwise',
|
||||
'FlipHorizontally',
|
||||
'StackScroll',
|
||||
'Magnify',
|
||||
'Invert',
|
||||
'Cine',
|
||||
'Angle',
|
||||
'Probe',
|
||||
'RectangleRoi',
|
||||
],
|
||||
]);
|
||||
ToolBarService.createButtonSection('secondary', [
|
||||
'Annotate',
|
||||
|
||||
@ -68,6 +68,133 @@ export default [
|
||||
type: 'ohif.layoutSelector',
|
||||
},
|
||||
// ~~ Primary: NESTED
|
||||
{
|
||||
id: 'ResetView',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Reset View',
|
||||
commandName: '',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'RotateClockwise',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Rotate Right',
|
||||
commandName: '',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'FlipHorizontally',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Flip Horizontally',
|
||||
commandName: '',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'StackScroll',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Stack Scroll',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'StackScroll' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Magnify',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Magnify',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Magnify' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Invert',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Invert',
|
||||
commandName: '',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
// TODO: Toggle
|
||||
{
|
||||
id: 'Cine',
|
||||
type: 'ohif.action',
|
||||
props: {
|
||||
icon: 'tool-capture',
|
||||
label: 'Cine',
|
||||
commandName: '',
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
// TODO: 2D MPR: We had said this was off the table?
|
||||
{
|
||||
id: 'Angle',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Angle',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Angle' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'Probe',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Probe',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Probe' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'RectangleRoi',
|
||||
type: 'ohif.radioGroup',
|
||||
config: {
|
||||
groupName: 'primaryTool',
|
||||
},
|
||||
props: {
|
||||
isActive: false,
|
||||
icon: 'tool-move',
|
||||
label: 'Rectangle',
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'RectangleRoi' },
|
||||
type: 'primary',
|
||||
},
|
||||
},
|
||||
// ~~ Secondary
|
||||
{
|
||||
id: 'Annotate',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user