feat(resize): Optimize resizing process and maintain zoom level (OHIF…

…#3889)

extensions/cornerstone-dicom-rt/package.json

@@ -24,6 +24,8 @@
     "yarn": ">=1.18.0"
   },
   "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
     "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
     "dev:dicom-seg": "yarn run dev",
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",

extensions/cornerstone-dicom-seg/package.json

@@ -24,6 +24,8 @@
     "yarn": ">=1.18.0"
   },
   "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
     "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
     "dev:dicom-seg": "yarn run dev",
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",

extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx

@@ -116,7 +116,6 @@ function OHIFCornerstoneSEGViewport(props) {
         }}
         onElementEnabled={onElementEnabled}
         onElementDisabled={onElementDisabled}
-        // initialImageIndex={initialImageIndex}
       ></Component>
     );
   }, [viewportId, segDisplaySet, toolGroupId]);

extensions/cornerstone-dicom-sr/package.json

@@ -23,6 +23,8 @@
     "ohif-extension"
   ],
   "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
     "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
     "dev:cornerstone": "yarn run dev",
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",

extensions/cornerstone/package.json

@@ -25,6 +25,8 @@
     "access": "public"
   },
   "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
     "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
     "dev:cornerstone": "yarn run dev",
     "build": "cross-env NODE_ENV=production webpack --progress --config .webpack/webpack.prod.js",

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -21,6 +21,7 @@ import getSOPInstanceAttributes from '../utils/measurementServiceMappings/utils/
 import CornerstoneServices from '../types/CornerstoneServices';
 import CinePlayer from '../components/CinePlayer';
 import { Types } from '@ohif/core';
+import { LutPresentation, PositionPresentation } from '../types/Presentation';
 
 const STACK = 'stack';
 
@@ -101,7 +102,6 @@ const OHIFCornerstoneViewport = React.memo(props => {
     viewportOptions,
     displaySetOptions,
     servicesManager,
-    commandsManager,
     onElementEnabled,
     onElementDisabled,
     isJumpToMeasurementDisabled,
@@ -277,7 +277,10 @@ const OHIFCornerstoneViewport = React.memo(props => {
       // The presentation state will have been stored previously by closing
       // a viewport.  Otherwise, this viewport will be unchanged and the
       // presentation information will be directly carried over.
-      const { lutPresentationStore, positionPresentationStore } = stateSyncService.getState();
+      const state = stateSyncService.getState();
+      const lutPresentationStore = state.lutPresentationStore as LutPresentation;
+      const positionPresentationStore = state.positionPresentationStore as PositionPresentation;
+
       const { presentationIds } = viewportOptions;
       const presentations = {
         positionPresentation: positionPresentationStore[presentationIds?.positionPresentationId],
@@ -360,8 +363,6 @@ const OHIFCornerstoneViewport = React.memo(props => {
     <React.Fragment>
       <div className="viewport-wrapper">
         <ReactResizeDetector
-          refreshMode="debounce"
-          refreshRate={50} // Wait 50 ms after last move to render
           onResize={onResize}
           targetRef={elementRef.current}
         />

extensions/cornerstone/src/init.tsx

@@ -204,6 +204,16 @@ export default async function init({
     }
   );
 
+  // resize the cornerstone viewport service when the grid size changes
+  // IMPORTANT: this should happen outside of the OHIFCornerstoneViewport
+  // since it will trigger a rerender of each viewport and each resizing
+  // the offscreen canvas which would result in a performance hit, this should
+  // done only once per grid resize here. Doing it once here, allows us to reduce
+  // the refreshRage(in ms) to 10 from 50. I tried with even 1 or 5 ms it worked fine
+  viewportGridService.subscribe(viewportGridService.EVENTS.GRID_SIZE_CHANGED, () => {
+    cornerstoneViewportService.resize(true);
+  });
+
   initContextMenu({
     cornerstoneViewportService,
     customizationService,

extensions/cornerstone/src/services/SegmentationService/SegmentationServiceTypes.ts

@@ -67,4 +67,4 @@ type SegmentationRepresentationData = {
   LABELMAP?: LabelmapSegmentationData;
 };
 
-export { SegmentationConfig, Segment, Segmentation };
+export type { SegmentationConfig, Segment, Segmentation };