feat(layout): new layout selector with 3D volume rendering (#3923)

modes/longitudinal/src/index.js

@@ -83,11 +83,11 @@ function modeFactory({ modeConfiguration }) {
       toolbarService.createButtonSection('primary', [
         'MeasurementTools',
         'Zoom',
-        'WindowLevel',
         'Pan',
+        'TrackballRotate',
+        'WindowLevel',
         'Capture',
         'Layout',
-        'MPR',
         'Crosshairs',
         'MoreTools',
       ]);

modes/longitudinal/src/moreTools.ts

@@ -54,7 +54,7 @@ const moreTools = [
           label: 'Flip Horizontal',
           tooltip: 'Flip Horizontally',
           commands: 'flipViewportHorizontal',
-          evaluate: 'evaluate.viewportProperties.toggle',
+          evaluate: ['evaluate.viewportProperties.toggle', 'evaluate.not3D'],
         }),
         createButton({
           id: 'ImageSliceSync',
@@ -73,7 +73,7 @@ const moreTools = [
               commandOptions: { toggledState: true },
             },
           },
-          evaluate: 'evaluate.cornerstone.synchronizer',
+          evaluate: ['evaluate.cornerstone.synchronizer', 'evaluate.not3D'],
         }),
         createButton({
           id: 'ReferenceLines',
@@ -137,7 +137,7 @@ const moreTools = [
           label: 'Cine',
           tooltip: 'Cine',
           commands: 'toggleCine',
-          evaluate: 'evaluate.cine',
+          evaluate: ['evaluate.cine', 'evaluate.not3D'],
         }),
         createButton({
           id: 'Angle',

modes/longitudinal/src/toolbarButtons.ts

@@ -1,9 +1,6 @@
 // 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
-import {
-  // ListMenu,
-  WindowLevelMenuItem,
-} from '@ohif/ui';
+import { WindowLevelMenuItem } from '@ohif/ui';
 import { defaults, ToolbarService } from '@ohif/core';
 import type { Button } from '@ohif/core/types';
 
@@ -36,7 +33,7 @@ function _createWwwcPreset(preset, title, subtitle) {
 export const setToolActiveToolbar = {
   commandName: 'setToolActiveToolbar',
   commandOptions: {
-    toolGroupIds: ['default', 'mpr', 'SRToolGroup'],
+    toolGroupIds: ['default', 'mpr', 'SRToolGroup', 'volume3d'],
   },
 };
 
@@ -155,6 +152,17 @@ const toolbarButtons: Button[] = [
       evaluate: 'evaluate.cornerstoneTool',
     },
   },
+  {
+    id: 'TrackballRotate',
+    uiType: 'ohif.radioGroup',
+    props: {
+      type: 'tool',
+      icon: 'tool-3d-rotate',
+      label: '3D Rotate',
+      commands: setToolActiveToolbar,
+      evaluate: 'evaluate.cornerstoneTool',
+    },
+  },
   {
     id: 'Capture',
     uiType: 'ohif.radioGroup',
@@ -174,7 +182,7 @@ const toolbarButtons: Button[] = [
     uiType: 'ohif.layoutSelector',
     props: {
       rows: 3,
-      columns: 3,
+      columns: 4,
       evaluate: 'evaluate.action',
       commands: [
         {
@@ -183,23 +191,6 @@ const toolbarButtons: Button[] = [
       ],
     },
   },
-  {
-    id: 'MPR',
-    uiType: 'ohif.radioGroup',
-    props: {
-      icon: 'icon-mpr',
-      label: 'MPR',
-      commands: [
-        {
-          commandName: 'toggleHangingProtocol',
-          commandOptions: {
-            protocolId: 'mpr',
-          },
-        },
-      ],
-      evaluate: 'evaluate.mpr',
-    },
-  },
   {
     id: 'Crosshairs',
     uiType: 'ohif.radioGroup',