Merge pull request #390 from wbkd/develop

Develop

example/src/index.css

@@ -176,4 +176,4 @@ nav a.active:before {
   .overview-example__add {
     display: block;
   }
-}
+}

package.json

@@ -35,15 +35,15 @@
     "resize-observer": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.5",
-    "@babel/preset-env": "^7.10.4",
+    "@babel/core": "^7.11.0",
+    "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
     "@svgr/rollup": "^5.4.0",
     "@types/classnames": "^2.2.10",
     "@types/d3": "^5.7.2",
-    "@types/react": "^16.9.43",
+    "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.8",
-    "autoprefixer": "^9.8.5",
+    "autoprefixer": "^9.8.6",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",
     "cypress": "^4.11.0",

src/container/EdgeRenderer/index.tsx

@@ -7,8 +7,6 @@ import MarkerDefinitions from './MarkerDefinitions';
 import { XYPosition, Position, Edge, Node, ElementId, HandleElement, Elements, ConnectionLineType } from '../../types';
 
 interface EdgeRendererProps {
-  width: number;
-  height: number;
   edgeTypes: any;
   connectionLineType: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
@@ -203,8 +201,10 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
   const selectedElements = useStoreState((s) => s.selectedElements);
   const nodesConnectable = useStoreState((s) => s.nodesConnectable);
   const elementsSelectable = useStoreState((s) => s.elementsSelectable);
+  const width = useStoreState((state) => state.width);
+  const height = useStoreState((state) => state.height);
 
-  const { width, height, connectionLineStyle, connectionLineType, arrowHeadColor } = props;
+  const { connectionLineStyle, connectionLineType, arrowHeadColor } = props;
 
   if (!width) {
     return null;

src/container/GraphView/index.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useRef, memo, CSSProperties, MouseEvent } from 'react';
-import { ResizeObserver } from 'resize-observer';
+import React, { useEffect, useRef, useCallback, memo, CSSProperties, MouseEvent } from 'react';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
 import NodeRenderer from '../NodeRenderer';
@@ -10,7 +9,7 @@ import useKeyPress from '../../hooks/useKeyPress';
 import useD3Zoom from '../../hooks/useD3Zoom';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
-import { getDimensions } from '../../utils';
+import useResizeHandler from '../../hooks/useResizeHandler';
 import { project, getElements } from '../../utils/graph';
 import {
   Elements,
@@ -110,15 +109,12 @@ const GraphView = ({
 }: GraphViewProps) => {
   const zoomPane = useRef<HTMLDivElement>(null);
   const rendererNode = useRef<HTMLDivElement>(null);
-  const width = useStoreState((s) => s.width);
-  const height = useStoreState((s) => s.height);
-  const d3Initialised = useStoreState((s) => s.d3Initialised);
-  const nodesSelectionActive = useStoreState((s) => s.nodesSelectionActive);
-  const updateSize = useStoreActions((actions) => actions.updateSize);
+  const d3Initialised = useStoreState((state) => state.d3Initialised);
+  const nodesSelectionActive = useStoreState((state) => state.nodesSelectionActive);
   const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
-  const setOnConnect = useStoreActions((a) => a.setOnConnect);
-  const setOnConnectStart = useStoreActions((a) => a.setOnConnectStart);
-  const setOnConnectStop = useStoreActions((a) => a.setOnConnectStop);
+  const setOnConnect = useStoreActions((actions) => actions.setOnConnect);
+  const setOnConnectStart = useStoreActions((actions) => actions.setOnConnectStart);
+  const setOnConnectStop = useStoreActions((actions) => actions.setOnConnectStop);
   const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
   const setNodesDraggable = useStoreActions((actions) => actions.setNodesDraggable);
   const setNodesConnectable = useStoreActions((actions) => actions.setNodesConnectable);
@@ -128,51 +124,16 @@ const GraphView = ({
   const fitView = useStoreActions((actions) => actions.fitView);
   const zoom = useStoreActions((actions) => actions.zoom);
 
-  const selectionKeyPressed = useKeyPress(selectionKeyCode);
-
-  const onZoomPaneClick = () => {
+  const onZoomPaneClick = useCallback(() => {
     onPaneClick?.();
     setNodesSelection({ isActive: false });
-  };
+  }, [onPaneClick]);
 
-  const updateDimensions = () => {
-    if (!rendererNode.current) {
-      return;
-    }
+  useResizeHandler(rendererNode);
+  useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
+  useElementUpdater(elements);
 
-    const size = getDimensions(rendererNode.current);
-
-    if (size.height === 0 || size.width === 0) {
-      throw new Error('The React Flow parent container needs a width and a height to render the graph.');
-    }
-
-    updateSize(size);
-  };
-
-  useEffect(() => {
-    let resizeObserver: ResizeObserver;
-
-    updateDimensions();
-    window.onresize = updateDimensions;
-
-    if (rendererNode.current) {
-      resizeObserver = new ResizeObserver((entries) => {
-        for (let _ of entries) {
-          updateDimensions();
-        }
-      });
-
-      resizeObserver.observe(rendererNode.current);
-    }
-
-    return () => {
-      window.onresize = null;
-
-      if (resizeObserver && rendererNode.current) {
-        resizeObserver.unobserve(rendererNode.current!);
-      }
-    };
-  }, []);
+  const selectionKeyPressed = useKeyPress(selectionKeyCode);
 
   useD3Zoom({
     zoomPane,
@@ -231,7 +192,7 @@ const GraphView = ({
 
   useEffect(() => {
     setSnapGrid({ snapToGrid, snapGrid });
-  }, [snapToGrid]);
+  }, [snapToGrid, snapGrid]);
 
   useEffect(() => {
     setNodesDraggable(nodesDraggable);
@@ -249,9 +210,6 @@ const GraphView = ({
     setMinMaxZoom({ minZoom, maxZoom });
   }, [minZoom, maxZoom]);
 
-  useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
-  useElementUpdater(elements);
-
   return (
     <div className="react-flow__renderer" ref={rendererNode}>
       <NodeRenderer
@@ -267,8 +225,6 @@ const GraphView = ({
         selectNodesOnDrag={selectNodesOnDrag}
       />
       <EdgeRenderer
-        width={width}
-        height={height}
         edgeTypes={edgeTypes}
         onElementClick={onElementClick}
         connectionLineType={connectionLineType}

src/hooks/useResizeHandler.ts

@@ -0,0 +1,43 @@
+import { useEffect, MutableRefObject } from 'react';
+import { ResizeObserver } from 'resize-observer';
+import { useStoreActions } from '../store/hooks';
+
+import { getDimensions } from '../utils';
+
+export default (rendererNode: MutableRefObject<HTMLDivElement | null>) => {
+  const updateSize = useStoreActions((actions) => actions.updateSize);
+
+  useEffect(() => {
+    let resizeObserver: ResizeObserver;
+
+    const updateDimensions = () => {
+      if (!rendererNode.current) {
+        return;
+      }
+
+      const size = getDimensions(rendererNode.current);
+
+      if (size.height === 0 || size.width === 0) {
+        console.warn('The React Flow parent container needs a width and a height to render the graph.');
+      }
+
+      updateSize(size);
+    };
+
+    updateDimensions();
+    window.onresize = updateDimensions;
+
+    if (rendererNode.current) {
+      resizeObserver = new ResizeObserver(() => updateDimensions());
+      resizeObserver.observe(rendererNode.current);
+    }
+
+    return () => {
+      window.onresize = null;
+
+      if (resizeObserver && rendererNode.current) {
+        resizeObserver.unobserve(rendererNode.current!);
+      }
+    };
+  }, []);
+};

src/store/index.ts

@@ -365,8 +365,10 @@ export const storeModel: StoreModel = {
   }),
 
   updateSize: action((state, size) => {
-    state.width = size.width;
-    state.height = size.height;
+    // when parent has no size we use these default values
+    // so that the calculations don't throw any errors
+    state.width = size.width || 500;
+    state.height = size.height || 500;
   }),
 
   initD3: action((state, zoomPaneNode) => {

src/types/index.ts

@@ -174,7 +174,7 @@ export type FitViewParams = {
 export type FitViewFunc = (fitViewOptions?: FitViewParams) => void;
 export type ProjectFunc = (position: XYPosition) => XYPosition;
 
-type OnLoadParams = {
+export type OnLoadParams = {
   zoomIn: () => void;
   zoomOut: () => void;
   fitView: FitViewFunc;