Added other required definitions.

extensions/cornerstone/src/toolbarModule.js

@@ -35,15 +35,7 @@ const enums = {
 };
 
 const definitions = [
-  {
+  // UPDATED
-    id: 'StackScroll',
-    label: 'Stack Scroll',
-    icon: 'bars',
-    //
-    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
-    commandName: 'setToolActive',
-    commandOptions: { toolName: 'StackScroll' },
-  },
   {
     id: 'Zoom',
     label: 'Zoom',
@@ -56,7 +48,7 @@ const definitions = [
   {
     id: 'Wwwc',
     label: 'Levels',
-    icon: 'level',
+    icon: 'tool-window-level',
     //
     type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
     commandName: 'setToolActive',
@@ -65,30 +57,70 @@ const definitions = [
   {
     id: 'Pan',
     label: 'Pan',
-    icon: 'arrows',
+    icon: 'tool-move',
     //
     type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
     commandName: 'setToolActive',
     commandOptions: { toolName: 'Pan' },
   },
   {
-    id: 'Length',
+    id: 'Capture',
-    label: 'Length',
+    label: 'Capture',
-    icon: 'measure-temp',
+    icon: 'tool-capture',
     //
-    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    type: TOOLBAR_BUTTON_TYPES.BUILT_IN,
-    commandName: 'setToolActive',
+    options: {
-    commandOptions: { toolName: 'Length' },
+      behavior: TOOLBAR_BUTTON_BEHAVIORS.DOWNLOAD_SCREEN_SHOT,
+      togglable: true,
+    },
   },
   {
-    id: 'ArrowAnnotate',
+    id: 'Annotate',
     label: 'Annotate',
-    icon: 'measure-non-target',
+    icon: 'tool-annotate',
     //
     type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
     commandName: 'setToolActive',
     commandOptions: { toolName: 'ArrowAnnotate' },
   },
+  {
+    id: 'Bidirectional',
+    label: 'Bidirectional',
+    icon: 'tool-bidirectional',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'Bidirectional' },
+  },
+  {
+    id: 'Ellipse',
+    label: 'Ellipse',
+    icon: 'tool-elipse',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'EllipticalRoi' },
+  },
+  {
+    id: 'Length',
+    label: 'Length',
+    icon: 'tool-length',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'Length' },
+  },
+  // OLD
+  {
+    id: 'StackScroll',
+    label: 'Stack Scroll',
+    icon: 'bars',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'StackScroll' },
+  },
+
   {
     id: 'Angle',
     label: 'Angle',
@@ -148,15 +180,6 @@ const definitions = [
         commandName: 'setToolActive',
         commandOptions: { toolName: 'DragProbe' },
       },
-      {
-        id: 'EllipticalRoi',
-        label: 'Ellipse',
-        icon: 'circle-o',
-        //
-        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'EllipticalRoi' },
-      },
       {
         id: 'RectangleRoi',
         label: 'Rectangle',
@@ -207,24 +230,13 @@ const definitions = [
         commandName: 'clearAnnotations',
       },
       {
-        id: 'Bidirectional',
+        id: 'Eraser',
-        label: 'Bidirectional',
+        label: 'Eraser',
-        icon: 'measure-target',
+        icon: 'eraser',
         //
         type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
         commandName: 'setToolActive',
-        commandOptions: { toolName: 'Bidirectional' },
+        commandOptions: { toolName: 'Eraser' },
-      },
-      {
-        id: 'Download',
-        label: 'Download',
-        icon: 'create-screen-capture',
-        //
-        type: TOOLBAR_BUTTON_TYPES.BUILT_IN,
-        options: {
-          behavior: TOOLBAR_BUTTON_BEHAVIORS.DOWNLOAD_SCREEN_SHOT,
-          togglable: true,
-        },
       },
     ],
   },

extensions/default/src/getLayoutTemplateModule.js

@@ -30,6 +30,7 @@ const Header = ({ tools, moreTools }) => {
     { name: 'Bone', value: '2500 / 480' },
     { name: 'Brain', value: '80 / 40' },
   ];
+
   /*
   const tools = [
     {

extensions/default/src/getToolbarModule.js

@@ -0,0 +1,19 @@
+const TOOLBAR_BUTTON_TYPES = {
+  COMMAND: 'command',
+  SET_TOOL_ACTIVE: 'setToolActive',
+  BUILT_IN: 'builtIn',
+};
+
+const definitions = [
+  {
+    id: 'Layout',
+    label: 'Layout',
+    icon: 'tool-layout',
+    commandName: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandOptions: { toolName: 'Layout' }, // TODO
+  },
+];
+
+export default function getToolbarModule() {
+  return { definitions, defaultContext: 'ACTIVE_VIEWPORT::CORNERSTONE' };
+}

extensions/default/src/index.js

@@ -3,6 +3,7 @@ import getDataSourcesModule from './getDataSourcesModule.js';
 import getLayoutTemplateModule from './getLayoutTemplateModule.js';
 import getPanelModule from './getPanelModule.js';
 import getSopClassHandlerModule from './getSopClassHandlerModule.js';
+import getToolbarModule from './getToolbarModule.js';
 import id from './id';
 
 export default {
@@ -15,4 +16,5 @@ export default {
   getLayoutTemplateModule,
   getPanelModule,
   getSopClassHandlerModule,
+  getToolbarModule,
 };

modes/example/src/index.js

@@ -14,14 +14,42 @@ export default function mode({ modeConfiguration }) {
         path: 'viewer',
         init: ({ toolBarManager }) => {
           toolBarManager.addButtons([
-            {
-              id: 'StackScroll', // If id not given will use default in button definition.
-              namespace: 'org.ohif.cornerstone.toolbarModule.StackScroll',
-            },
             {
               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',
+            },
           ]);
 
           debugger;
@@ -30,12 +58,12 @@ export default function mode({ modeConfiguration }) {
           toolBarManager.setToolBarLayout([
             // Primary
             {
-              tools: ['Zoom'],
+              tools: ['Zoom', 'Levels', 'Pan', 'Capture', 'Layout'],
-              moreTools: ['Zoom'],
+              moreTools: ['Zoom', 'Levels', 'Pan', 'Capture', 'Layout'],
             },
             // Secondary
             {
-              tools: ['Zoom'],
+              tools: ['Annotate', 'Bidirectional', 'Ellipse', 'Length'],
             },
           ]);
         },