From 10484fceec42c63c3084828d2d5ae60b6be137c6 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Tue, 16 Jun 2020 23:57:38 -0400 Subject: [PATCH] Duplicate toolbar buttons for "example" mode and add nested menu buttons --- modes/example/src/index.js | 78 +++---- modes/example/src/toolbarButtons.js | 259 +++++++++++++++++++++++ modes/longitudinal/src/index.js | 13 +- modes/longitudinal/src/toolbarButtons.js | 127 +++++++++++ 4 files changed, 426 insertions(+), 51 deletions(-) create mode 100644 modes/example/src/toolbarButtons.js diff --git a/modes/example/src/index.js b/modes/example/src/index.js index 911fa112e..33aae7ad1 100644 --- a/modes/example/src/index.js +++ b/modes/example/src/index.js @@ -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 { diff --git a/modes/example/src/toolbarButtons.js b/modes/example/src/toolbarButtons.js new file mode 100644 index 000000000..4d1db386c --- /dev/null +++ b/modes/example/src/toolbarButtons.js @@ -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', + }, + }, +]; diff --git a/modes/longitudinal/src/index.js b/modes/longitudinal/src/index.js index 9a2f14268..71c249341 100644 --- a/modes/longitudinal/src/index.js +++ b/modes/longitudinal/src/index.js @@ -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', diff --git a/modes/longitudinal/src/toolbarButtons.js b/modes/longitudinal/src/toolbarButtons.js index 5f9b4beb4..4d1db386c 100644 --- a/modes/longitudinal/src/toolbarButtons.js +++ b/modes/longitudinal/src/toolbarButtons.js @@ -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',