OHIF-323: Cine Dialog (#1961)

* ohif-323: add cineplayer flow

* ohif-323: improve toolbar flow of cine

* ohif-323: improve cine styles

* ohif-323: use toggle instead of set

* ohif-323: add compatibility comment

* ohif-323: move cine logic to command

* ohif-323: cr update

* ohif-323: remove typo and update svg title

* ohif-323: remove log

* ohif-323: update props and remove dead code

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

extensions/default/src/ViewerLayout/index.jsx

@@ -91,10 +91,10 @@ function ToolbarSecondary({ servicesManager }) {
     isActive: false,
   };
   const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
-  const [activeTool, setActiveTool] = useState(defaultTool);
+  const [nestedActiveTool, setNestedActiveTool] = useState(defaultTool);
 
   const setActiveToolHandler = (tool, isNested) => {
-    setActiveTool(isNested ? tool : defaultTool);
+    setNestedActiveTool(isNested ? tool : defaultTool);
   };
 
   const onPrimaryClickHandler = (evt, btn) => {
@@ -257,6 +257,7 @@ function ViewerLayout({
               <ViewportGridComp
                 servicesManager={servicesManager}
                 viewportComponents={viewportComponents}
+                commandsManager={commandsManager}
               />
             </ErrorBoundary>
           </div>

extensions/default/src/commandsModule.js

@@ -1,10 +1,17 @@
-const commandsModule = ({ servicesManager }) => {
-  const { MeasurementService } = servicesManager.services;
+const commandsModule = ({ servicesManager, commandsManager }) => {
+  const { MeasurementService, ViewportGridService, ToolBarService, CineService } = servicesManager.services;
 
   const actions = {
     clearMeasurements: () => {
       MeasurementService.clear();
     },
+    toggleCine: () => {
+      const { viewports } = ViewportGridService.getState();
+      const { isCineEnabled } = CineService.getState();
+      CineService.setIsCineEnabled(!isCineEnabled);
+      ToolBarService.setButton('Cine', { props: { isActive: !isCineEnabled } });
+      viewports.forEach((_, index) => CineService.setCine({ id: index, isPlaying: false }));
+    },
   };
 
   const definitions = {
@@ -13,6 +20,11 @@ const commandsModule = ({ servicesManager }) => {
       storeContexts: [],
       options: {},
     },
+    toggleCine: {
+      commandFn: actions.toggleCine,
+      storeContexts: [],
+      options: {},
+    },
   };
 
   return {

extensions/default/src/getToolbarModule.js

@@ -85,8 +85,8 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
         thisButton.props.isActive = !thisButton.props.isActive;
 
         // Run button logic/command
-        // MAKE SURE THIS SUPPORTS TOGGLE!
-        // commandsManager.runCommand(props.commandName, props.commandOptions);
+        commandsManager.runCommand(props.commandName, props.commandOptions);
+
         // What if just toggled "content"?
         // commandName OR content?
 

extensions/default/src/index.js

@@ -18,7 +18,7 @@ export default {
   getPanelModule,
   getSopClassHandlerModule,
   getToolbarModule,
-  getCommandsModule({ servicesManager }) {
-    return commandsModule({ servicesManager });
+  getCommandsModule({ servicesManager, commandsManager }) {
+    return commandsModule({ servicesManager, commandsManager });
   },
 };