refactor(deps): remove react-sizeme

package-lock.json

@@ -1735,11 +1735,6 @@
       "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw==",
       "dev": true
     },
-    "batch-processor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
-      "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
-    },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -3088,14 +3083,6 @@
       "integrity": "sha512-jasjtY5RUy/TOyiUYM2fb4BDaPZfm6CXRFeJDMfFsXYADGxUN49RBqtgB7EL2RmJXeIRUk9lM1U6A5yk2YJMPQ==",
       "dev": true
     },
-    "element-resize-detector": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.1.15.tgz",
-      "integrity": "sha512-16/5avDegXlUxytGgaumhjyQoM6hpp5j3+L79sYq5hlXfTNRy5WMMuTVWkZU3egp/CokCmTmvf18P3KeB57Iog==",
-      "requires": {
-        "batch-processor": "^1.0.0"
-      }
-    },
     "elliptic": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.0.tgz",
@@ -4589,6 +4576,7 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -7048,17 +7036,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
-    "react-sizeme": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/react-sizeme/-/react-sizeme-2.6.7.tgz",
-      "integrity": "sha512-xCjPoBP5jmeW58TxIkcviMZqabZis7tTvDFWf0/Wa5XCgVWQTIe74NQBes2N1Kmp64GRLkpm60BaP0kk+v8aCQ==",
-      "requires": {
-        "element-resize-detector": "^1.1.15",
-        "invariant": "^2.2.4",
-        "shallowequal": "^1.1.0",
-        "throttle-debounce": "^2.1.0"
-      }
-    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -7721,11 +7698,6 @@
       "integrity": "sha1-QV9CcC1z2BAzApLMXuhurhoRoXA=",
       "dev": true
     },
-    "shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
-    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -8230,11 +8202,6 @@
         }
       }
     },
-    "throttle-debounce": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
-      "integrity": "sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg=="
-    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",

package.json

@@ -14,7 +14,6 @@
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-draggable": "^3.3.0",
-    "react-sizeme": "^2.6.7",
     "scheduler": "^0.15.0"
   },
   "devDependencies": {

src/GraphView/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useContext, useRef, memo } from 'react';
-import ReactSizeMe from 'react-sizeme';
 
 import { Provider } from '../ConnectionContext';
 import { GraphContext } from '../GraphContext';
@@ -11,19 +10,29 @@ import { setNodesSelection } from '../state/actions';
 import { updateSize, fitView, zoomIn, zoomOut } from '../state/view-actions';
 import useKeyPress from '../hooks/useKeyPress';
 import useD3Zoom from '../hooks/useD3Zoom';
+import { getDimensions } from '../utils';
 
 const GraphView = memo((props) => {
-  const zoomPane = useRef(null);
+  const zoomPane = useRef();
+  const rendererNode = useRef();
   const { state, dispatch } = useContext(GraphContext);
   const shiftPressed = useKeyPress('Shift');
+  const updateDimensions = () => {
+    const size = getDimensions(rendererNode.current);
+    dispatch(updateSize(size));
+  };
+
+  useEffect(() => {
+    updateDimensions();
+    window.onresize = updateDimensions;
+
+    return () => {
+      window.onresize = null;
+    };
+  }, []);
 
   useD3Zoom(zoomPane, props.onMove, shiftPressed);
 
-  useEffect(
-    () => dispatch(updateSize(props.size)),
-    [props.size.width, props.size.height]
-  );
-
   useEffect(() => {
     if (state.d3Initialised) {
       props.onLoad({
@@ -37,7 +46,7 @@ const GraphView = memo((props) => {
   }, [state.d3Initialised]);
 
   return (
-    <div className="react-graph__renderer">
+    <div className="react-graph__renderer" ref={rendererNode}>
       <Provider onConnect={props.onConnect}>
         <NodeRenderer
           nodeTypes={props.nodeTypes}
@@ -64,4 +73,6 @@ const GraphView = memo((props) => {
   );
 });
 
-export default ReactSizeMe.withSize({ monitorHeight: true })(GraphView);
+GraphView.displayName = 'GraphView';
+
+export default GraphView;

src/ReactGraph/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, memo } from 'react';
+import React, { useMemo } from 'react';
 
 if (process.env.NODE_ENV !== 'production') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
@@ -21,16 +21,14 @@ import { createEdgeTypes } from '../EdgeRenderer/utils';
 
 import '../style.css';
 
-const ReactGraph = (props) => {
+const ReactGraph = ({
+  style, onElementClick, elements, children,
+  onLoad, onMove, onElementsRemove, onConnect,
+  onNodeDragStop, connectionLineType, connectionLineStyle
+}) => {
   const nodeTypes = useMemo(() => createNodeTypes(props.nodeTypes), []);
   const edgeTypes = useMemo(() => createEdgeTypes(props.edgeTypes), []);
 
-  const {
-    style, onElementClick, elements, children,
-    onLoad, onMove, onElementsRemove, onConnect,
-    onNodeDragStop, connectionLineType, connectionLineStyle
-  } = props;
-
   return (
     <div style={style} className="react-graph">
       <Provider elements={elements}>

src/utils.js

@@ -1 +1,8 @@
 export const isFunction = obj => !!(obj && obj.constructor && obj.call && obj.apply);
+
+export const getDimensions = (node) => {
+  return {
+    width: node.offsetWidth,
+    height: node.offsetHeight
+  };
+};