Duplicate toolbar buttons for "example" mode and add nested menu buttons

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([
+          ToolBarService.addButtons(toolbarButtons);
-            {
+          ToolBarService.createButtonSection('primary', [
-              id: 'Zoom',
+            'Zoom',
-              namespace: 'org.ohif.cornerstone.toolbarModule.Zoom',
+            'Wwwc',
-            },
+            'Pan',
-            {
+            'Capture',
-              id: 'Levels',
+            'Layout',
-              namespace: 'org.ohif.cornerstone.toolbarModule.Wwwc',
+            'Divider',
-            },
+            [
-            {
+              'ResetView',
-              id: 'Pan',
+              'RotateClockwise',
-              namespace: 'org.ohif.cornerstone.toolbarModule.Pan',
+              'FlipHorizontally',
-            },
+              'StackScroll',
-            {
+              'Magnify',
-              id: 'Capture',
+              'Invert',
-              namespace: 'org.ohif.cornerstone.toolbarModule.Capture',
+              'Cine',
-            },
+              'Angle',
-            {
+              'Probe',
-              id: 'Layout',
+              'RectangleRoi',
-              namespace: 'org.ohif.default.toolbarModule.Layout',
+            ],
-            },
+          ]);
-            {
+          ToolBarService.createButtonSection('secondary', [
-              id: 'Annotate',
+            'Annotate',
-              namespace: 'org.ohif.cornerstone.toolbarModule.Annotate',
+            'Bidirectional',
-            },
+            'Ellipse',
-            {
+            'Length',
-              id: 'Bidirectional',
-              namespace: 'org.ohif.cornerstone.toolbarModule.Bidirectional',
-            },
-            {
-              id: 'Ellipse',
-              namespace: 'org.ohif.cornerstone.toolbarModule.Ellipse',
-            },
-            {
-              id: 'Length',
-              namespace: 'org.ohif.cornerstone.toolbarModule.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 {

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',
+    },
+  },
+];

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',

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',