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

platform/cli/package.json

@@ -9,6 +9,8 @@
     "ohif-cli": "src/index.js"
   },
   "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [

platform/core/package.json

@@ -22,6 +22,8 @@
     "yarn": ">=1.16.0"
   },
   "scripts": {
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
     "dev": "jest --watchAll",
     "dev:core": "yarn run dev",
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",

platform/core/src/services/ViewportGridService/ViewportGridService.ts

@@ -6,6 +6,7 @@ class ViewportGridService extends PubSubService {
     ACTIVE_VIEWPORT_ID_CHANGED: 'event::activeviewportidchanged',
     LAYOUT_CHANGED: 'event::layoutChanged',
     GRID_STATE_CHANGED: 'event::gridStateChanged',
+    GRID_SIZE_CHANGED: 'event::gridSizeChanged',
   };
 
   public static REGISTRATION = {
@@ -64,7 +65,6 @@ class ViewportGridService extends PubSubService {
 
   public setActiveViewportId(id: string) {
     this.serviceImplementation._setActiveViewport(id);
-    const state = this.getState();
     this._broadcastEvent(this.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED, {
       viewportId: id,
     });
@@ -79,6 +79,13 @@ class ViewportGridService extends PubSubService {
     return state.activeViewportId;
   }
 
+  public setViewportGridSizeChanged() {
+    const state = this.getState();
+    this._broadcastEvent(this.EVENTS.GRID_SIZE_CHANGED, {
+      state,
+    });
+  }
+
   public setDisplaySetsForViewport(props) {
     // Just update a single viewport, but use the multi-viewport update for it.
     this.setDisplaySetsForViewports([props]);

platform/docs/package.json

@@ -15,6 +15,8 @@
   },
   "scripts": {
     "docusaurus": "docusaurus",
+    "clean": "shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
     "start": "docusaurus start --port 8001",
     "dev": "docusaurus start --port 8001",
     "docs": "docusaurus start --port 8001",

platform/i18n/package.json

@@ -20,6 +20,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:i18n": "yarn run dev",
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",

platform/ui/package.json

@@ -19,11 +19,12 @@
     "README.md"
   ],
   "scripts": {
+    "clean": "rm -rf node_modules/.cache/storybook && shx rm -rf dist",
+    "clean:deep": "yarn run clean && shx rm -rf node_modules",
     "start": "yarn run build --watch",
     "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
     "build:package": "yarn run build",
     "storybook": "storybook dev -p 6006",
-    "clean": "rm -rf node_modules/.cache/storybook",
     "dev": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

platform/ui/src/contextProviders/ViewportGridProvider.tsx

@@ -406,6 +406,7 @@ export function ViewportGridProvider({ children, service }) {
     set: gridLayoutState => service.setState(gridLayoutState), // run it through the service itself since we want to publish events
     getNumViewportPanes,
     getActiveViewportOptionByKey,
+    setViewportGridSizeChanged: props => service.setViewportGridSizeChanged(props),
   };
 
   return (