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/cornerstone/src/OHIFCornerstoneViewport.js

@@ -6,12 +6,6 @@ import debounce from 'lodash.debounce';
 
 import { setEnabledElement } from './state';
 
-
-// const cine = viewportSpecificData.cine;
-
-// isPlaying = cine.isPlaying === true;
-// frameRate = cine.cineFrameRate || frameRate;
-
 const { StackManager } = OHIF.utils;
 
 class OHIFCornerstoneViewport extends Component {

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 });
   },
 };

extensions/measurement-tracking/src/getViewportModule.js

@@ -12,10 +12,10 @@ const OHIFCornerstoneViewport = props => {
   );
 };
 
-function getViewportModule({ servicesManager }) {
+function getViewportModule({ servicesManager, commandsManager }) {
   const ExtendedOHIFCornerstoneSRViewport = props => {
     return (
-      <OHIFCornerstoneViewport servicesManager={servicesManager} {...props} />
+      <OHIFCornerstoneViewport servicesManager={servicesManager} commandsManager={commandsManager} {...props} />
     );
   };
 

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js

@@ -7,6 +7,7 @@ import OHIF, { utils } from '@ohif/core';
 import {
   Notification,
   ViewportActionBar,
+  useCine,
   useViewportGrid,
   useViewportDialog,
 } from '@ohif/ui';
@@ -35,10 +36,6 @@ const BaseAnnotationTool = cornerstoneTools.importInternal(
   'base/BaseAnnotationTool'
 );
 
-// const cine = viewportSpecificData.cine;
-// isPlaying = cine.isPlaying === true;
-// frameRate = cine.cineFrameRate || frameRate;
-
 const { StackManager } = OHIF.utils;
 
 function TrackedCornerstoneViewport({
@@ -47,6 +44,7 @@ function TrackedCornerstoneViewport({
   displaySet,
   viewportIndex,
   servicesManager,
+  commandsManager
 }) {
   const {
     ToolBarService,
@@ -54,12 +52,11 @@ function TrackedCornerstoneViewport({
     MeasurementService,
   } = servicesManager.services;
   const [trackedMeasurements] = useTrackedMeasurements();
-  const [{ activeViewportIndex, viewports }] = useViewportGrid();
-  // viewportIndex, onSubmit
+  const [{ activeViewportIndex, viewports }, viewportGridService] = useViewportGrid();
+  const [{ isCineEnabled, cines }, cineService] = useCine();
   const [viewportDialogState, viewportDialogApi] = useViewportDialog();
   const [viewportData, setViewportData] = useState(null);
   const [element, setElement] = useState(null);
-
   const [isTracked, setIsTracked] = useState(false);
   const [trackedMeasurementId, setTrackedMeasurementId] = useState(null);
 
@@ -71,6 +68,10 @@ function TrackedCornerstoneViewport({
     };
   }, []);
 
+  useEffect(() => {
+    cineService.setCine({ id: viewportIndex });
+  }, [viewportIndex]);
+
   useEffect(() => {
     const unsubcribeFromJumpToMeasurementEvents = _subscribeToJumpToMeasurementEvents(
       MeasurementService,
@@ -298,7 +299,9 @@ function TrackedCornerstoneViewport({
     );
   }
 
-  // TODO -> disabled double click for now: onDoubleClick={_onDoubleClick}
+  const cine = cines[viewportIndex];
+  const isPlaying = cine && cine.isPlaying || false;
+  const frameRate = cine && cine.frameRate || 24;
 
   return (
     <>
@@ -333,6 +336,14 @@ function TrackedCornerstoneViewport({
             scanner: ManufacturerModelName || '',
           },
         }}
+        showNavArrows={!isCineEnabled}
+        showCine={isCineEnabled}
+        cineProps={{
+          isPlaying,
+          onClose: () => commandsManager.runCommand('toggleCine'),
+          onPlayPauseChange: isPlaying => cineService.setCine({ id: activeViewportIndex, isPlaying }),
+          onFrameRateChange: frameRate => cineService.setCine({ id: activeViewportIndex, frameRate }),
+        }}
       />
       {/* TODO: Viewport interface to accept stack or layers of content like this? */}
       <div className="relative flex flex-row w-full h-full overflow-hidden">
@@ -347,8 +358,8 @@ function TrackedCornerstoneViewport({
           // TODO: ViewportGrid Context?
           isActive={true} // todo
           isStackPrefetchEnabled={true} // todo
-          isPlaying={false}
-          frameRate={24}
+          isPlaying={isPlaying}
+          frameRate={frameRate}
           isOverlayVisible={true}
           loadingIndicatorComponent={ViewportLoadingIndicator}
           viewportOverlayComponent={props => {
@@ -408,6 +419,7 @@ function _getCornerstoneStack(displaySet, dataSource) {
   return stack;
 }
 
+// TODO -> disabled double click for now: onDoubleClick={_onDoubleClick}
 function _onDoubleClick() {
   const cancelActiveManipulatorsForElement = cornerstoneTools.getModule(
     'manipulatorState'