From ed50c8819cf9c029a5120fda518411b440714cb2 Mon Sep 17 00:00:00 2001 From: Titani Labaj <39532947+tlabaj@users.noreply.github.com> Date: Tue, 9 Aug 2022 16:22:42 -0400 Subject: [PATCH] Revert "feat(VisualizationSurface): replace react-measure with react-resize-detector (#7706)" This reverts commit 3249e465e90a8e9bcd3a93fc9e08ce10486ae3d1. --- packages/react-topology/package.json | 3 +- .../src/components/VisualizationSurface.tsx | 42 +++++++++++-------- yarn.lock | 34 +++++++++++---- 3 files changed, 52 insertions(+), 27 deletions(-) diff --git a/packages/react-topology/package.json b/packages/react-topology/package.json index 9f9477c8db8..69a6f64147a 100644 --- a/packages/react-topology/package.json +++ b/packages/react-topology/package.json @@ -34,6 +34,7 @@ "@types/d3": "^5.7.2", "@types/d3-force": "^1.2.1", "@types/dagre": "0.7.42", + "@types/react-measure": "^2.0.6", "@types/webcola": "3.2.0", "d3": "^5.16.0", "dagre": "0.8.2", @@ -42,7 +43,7 @@ "mobx-react": "^6.2.0", "point-in-svg-path": "^1.0.1", "popper.js": "^1.16.1", - "react-resize-detector": "^7.1.2", + "react-measure": "^2.3.0", "tslib": "^2.0.0", "webcola": "3.4.0" }, diff --git a/packages/react-topology/src/components/VisualizationSurface.tsx b/packages/react-topology/src/components/VisualizationSurface.tsx index c641aa8e7cc..968e4cd7dd1 100644 --- a/packages/react-topology/src/components/VisualizationSurface.tsx +++ b/packages/react-topology/src/components/VisualizationSurface.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; -import { useResizeDetector } from 'react-resize-detector'; +import * as _ from 'lodash'; import { action } from 'mobx'; // https://github.com/mobxjs/mobx-react#observer-batching import 'mobx-react/batchingForReactDom'; import { observer } from 'mobx-react'; +import ReactMeasure from 'react-measure'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Topology/topology-components'; import { State } from '../types'; @@ -31,20 +32,20 @@ const VisualizationSurface: React.FunctionComponent = state && controller.setState(state); }, [controller, state]); - const onResize = React.useMemo( + const onMeasure = React.useMemo( () => - action((width?: number, height?: number) => { - controller.getGraph().setDimensions(new Dimensions(width, height)); - }), + _.debounce( + action((contentRect: { client: { width: number; height: number } }) => { + controller.getGraph().setDimensions(new Dimensions(contentRect.client.width, contentRect.client.height)); + }), + 100, + { leading: true, trailing: true } + ), [controller] ); - const { ref } = useResizeDetector({ - onResize, - refreshMode: 'debounce', - refreshRate: 100, - refreshOptions: { leading: true, trailing: true } - }); + // dispose of onMeasure + React.useEffect(() => () => onMeasure.cancel(), [onMeasure]); if (!controller.hasGraph()) { return null; @@ -53,13 +54,18 @@ const VisualizationSurface: React.FunctionComponent = const graph = controller.getGraph(); return ( -
- - - - - -
+ + {({ measureRef }: { measureRef: React.LegacyRef }) => ( + // render an outer div because react-measure doesn't seem to fire events properly on svg resize +
+ + + + + +
+ )} + ); }; diff --git a/yarn.lock b/yarn.lock index eb53c4b24d7..448f0fdd985 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2055,6 +2055,12 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.2.0": + version "7.9.2" + resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz" + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.4.5", "@babel/runtime@^7.8.7": version "7.11.2" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz" @@ -4090,6 +4096,12 @@ dependencies: "@types/react" "*" +"@types/react-measure@^2.0.6": + version "2.0.6" + resolved "https://registry.npmjs.org/@types/react-measure/-/react-measure-2.0.6.tgz" + dependencies: + "@types/react" "*" + "@types/react-router-dom@^4.3.1": version "4.3.5" resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-4.3.5.tgz" @@ -9093,6 +9105,10 @@ get-intrinsic@^1.0.2: has "^1.0.3" has-symbols "^1.0.3" +get-node-dimensions@^1.2.1: + version "1.2.1" + resolved "https://registry.npmjs.org/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz" + get-own-enumerable-property-symbols@^3.0.0: version "3.0.2" resolved "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz" @@ -14325,6 +14341,15 @@ react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz" +react-measure@^2.3.0: + version "2.5.0" + resolved "https://registry.npmjs.org/react-measure/-/react-measure-2.5.0.tgz" + dependencies: + "@babel/runtime" "^7.2.0" + get-node-dimensions "^1.2.1" + prop-types "^15.6.2" + resize-observer-polyfill "^1.5.0" + react-monaco-editor@0.48.0: version "0.48.0" resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.48.0.tgz#f2b547c619f0ba3b49d3c8a0e0168ff9d0aa70dc" @@ -14339,13 +14364,6 @@ react-monaco-editor@^0.41.2: monaco-editor "*" prop-types "^15.7.2" -react-resize-detector@^7.1.2: - version "7.1.2" - resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-7.1.2.tgz#8ef975dd8c3d56f9a5160ac382ef7136dcd2d86c" - integrity sha512-zXnPJ2m8+6oq9Nn8zsep/orts9vQv3elrpA+R8XTcW7DVVUJ9vwDwMXaBtykAYjMnkCIaOoK9vObyR7ZgFNlOw== - dependencies: - lodash "^4.17.21" - react-router-dom@^4.3.1: version "4.3.1" resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz" @@ -14918,7 +14936,7 @@ requires-port@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz" -resize-observer-polyfill@^1.5.1: +resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1: version "1.5.1" resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"