feat(resize): Optimize resizing process and maintain zoom level (#3889)

platform/app/package.json

@@ -25,6 +25,8 @@
     "build:viewer:qa": "cross-env NODE_ENV=production APP_CONFIG=config/google.js yarn run build",
     "build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html QUICK_BUILD=false yarn run build",
     "build": "node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js",
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
     "dev": "cross-env NODE_ENV=development webpack serve --config .webpack/webpack.pwa.js",
     "dev:no:cache": "cross-env NODE_ENV=development webpack serve --no-cache --config .webpack/webpack.pwa.js",
     "dev:orthanc": "cross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack serve --config .webpack/webpack.pwa.js",
@@ -52,6 +54,7 @@
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.5",
     "@cornerstonejs/dicom-image-loader": "^1.44.1",
+    "@emotion/serialize": "^1.1.3",
     "@ohif/core": "3.8.0-beta.54",
     "@ohif/extension-cornerstone": "3.8.0-beta.54",
     "@ohif/extension-cornerstone-dicom-rt": "3.8.0-beta.54",
@@ -88,7 +91,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^10.1.7",
     "react-i18next": "^12.2.2",
-    "react-resize-detector": "^6.7.6",
+    "react-resize-detector": "^9.1.0",
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1"
   },

platform/app/src/components/ViewportGrid.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useRef } from 'react';
+import ReactResizeDetector from 'react-resize-detector';
 import PropTypes from 'prop-types';
 import { ServicesManager, Types, MeasurementService } from '@ohif/core';
 import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
@@ -13,6 +14,7 @@ function ViewerViewportGrid(props) {
 
   const { layout, activeViewportId, viewports } = viewportGrid;
   const { numCols, numRows } = layout;
+  const elementRef = useRef(null);
 
   // TODO -> Need some way of selecting which displaySets hit the viewports.
   const { displaySetService, measurementService, hangingProtocolService, uiNotificationService } = (
@@ -342,13 +344,26 @@ function ViewerViewportGrid(props) {
   }
 
   return (
-    <ViewportGrid
-      numRows={numRows}
-      numCols={numCols}
+    <div
+      ref={elementRef}
+      className="h-full w-full"
     >
-      {/* {ViewportPanes} */}
-      {getViewportPanes()}
-    </ViewportGrid>
+      <ViewportGrid
+        numRows={numRows}
+        numCols={numCols}
+      >
+        <ReactResizeDetector
+          refreshMode="debounce"
+          refreshRate={7} // ms seems to be fine for 10 viewports
+          onResize={() => {
+            viewportGridService.setViewportGridSizeChanged();
+          }}
+          targetRef={elementRef.current}
+        />
+        {/* {ViewportPanes} */}
+        {getViewportPanes()}
+      </ViewportGrid>
+    </div>
   );
 }