fix(state synchronization): SEG and RT viewports should keep their before hydration voi (#3560)

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -112,6 +112,7 @@ const OHIFCornerstoneViewport = React.memo(props => {
     viewportOptions,
     displaySetOptions,
     servicesManager,
+    commandsManager,
     onElementEnabled,
     onElementDisabled,
     isJumpToMeasurementDisabled,
@@ -152,33 +153,6 @@ const OHIFCornerstoneViewport = React.memo(props => {
     }
   }, [elementRef]);
 
-  const storePresentation = () => {
-    const currentPresentation = cornerstoneViewportService.getPresentation(
-      viewportIndex
-    );
-    if (!currentPresentation || !currentPresentation.presentationIds) return;
-    const {
-      lutPresentationStore,
-      positionPresentationStore,
-    } = stateSyncService.getState();
-    const { presentationIds } = currentPresentation;
-    const { lutPresentationId, positionPresentationId } = presentationIds || {};
-    const storeState = {};
-    if (lutPresentationId) {
-      storeState.lutPresentationStore = {
-        ...lutPresentationStore,
-        [lutPresentationId]: currentPresentation,
-      };
-    }
-    if (positionPresentationId) {
-      storeState.positionPresentationStore = {
-        ...positionPresentationStore,
-        [positionPresentationId]: currentPresentation,
-      };
-    }
-    stateSyncService.store(storeState);
-  };
-
   const cleanUpServices = useCallback(() => {
     const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
       viewportIndex
@@ -256,7 +230,9 @@ const OHIFCornerstoneViewport = React.memo(props => {
     setImageScrollBarHeight();
 
     return () => {
-      storePresentation();
+      commandsManager.runCommand('storePresentation', {
+        viewportIndex,
+      });
 
       cleanUpServices();
 
@@ -407,8 +383,6 @@ const OHIFCornerstoneViewport = React.memo(props => {
     };
   }, [displaySets, elementRef, viewportIndex]);
 
-  console.debug('OHIFCornerstoneViewport rendering');
-
   return (
     <React.Fragment>
       <div className="viewport-wrapper">

extensions/cornerstone/src/commandsModule.ts

@@ -28,6 +28,7 @@ function commandsModule({
     toolGroupService,
     cineService,
     toolbarService,
+    stateSyncService,
     uiDialogService,
     cornerstoneViewportService,
     uiNotificationService,
@@ -616,6 +617,35 @@ function commandsModule({
       );
       toolGroup.setToolEnabled(ReferenceLinesTool.toolName);
     },
+    storePresentation: ({ viewportIndex }) => {
+      const presentation = cornerstoneViewportService.getPresentation(
+        viewportIndex
+      );
+      if (!presentation || !presentation.presentationIds) {
+        return;
+      }
+      const {
+        lutPresentationStore,
+        positionPresentationStore,
+      } = stateSyncService.getState();
+      const { presentationIds } = presentation;
+      const { lutPresentationId, positionPresentationId } =
+        presentationIds || {};
+      const storeState = {};
+      if (lutPresentationId) {
+        storeState.lutPresentationStore = {
+          ...lutPresentationStore,
+          [lutPresentationId]: presentation,
+        };
+      }
+      if (positionPresentationId) {
+        storeState.positionPresentationStore = {
+          ...positionPresentationStore,
+          [positionPresentationId]: presentation,
+        };
+      }
+      stateSyncService.store(storeState);
+    },
   };
 
   const definitions = {
@@ -740,6 +770,11 @@ function commandsModule({
     toggleReferenceLines: {
       commandFn: actions.toggleReferenceLines,
     },
+    storePresentation: {
+      commandFn: actions.storePresentation,
+      storeContexts: [],
+      options: {},
+    },
   };
 
   return {