Merge branch 'main' of https://github.com/clementloridan/react-flow into clementloridan-main

example/src/CustomNode/index.tsx

@@ -132,4 +132,4 @@ const CustomNodeFlow = () => {
   );
 };
 
-export default CustomNodeFlow;
+export default CustomNodeFlow;

package.json

@@ -75,11 +75,11 @@
     "typescript": "^4.4.4"
   },
   "peerDependencies": {
-    "react": "16 || 17",
+    "react": "16 || 17",
-    "react-dom": "16 || 17"
+    "react-dom": "16 || 17"
   },
   "files": [
     "dist",
     "nocss"
   ]
-}
+}

src/components/ConnectionLine/index.tsx

@@ -53,9 +53,22 @@ export default ({
     return null;
   }
 
-  const sourceHandle = handleId
+  const getSourceHandle = (handleId: ElementId | null, sourceNode: Node) => {
-    ? sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId)
+    const handleBound = sourceNode.__rf.handleBounds[connectionHandleType];
-    : sourceNode.__rf.handleBounds[connectionHandleType][0];
+    if (handleBound) {
+      if (handleId) {
+        return sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId);
+      }
+      return sourceNode.__rf.handleBounds[connectionHandleType][0]
+    }
+    const handleType = connectionHandleType === 'source' ? 'target' : 'source';
+    if (handleId) {
+      return sourceNode.__rf.handleBounds[handleType].find((d: HandleElement) => d.id === handleId);
+    }
+    return sourceNode.__rf.handleBounds[handleType][0]
+  }
+
+  const sourceHandle = getSourceHandle(handleId, sourceNode);
   const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rf.width / 2;
   const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rf.height;
   const sourceX = sourceNode.__rf.position.x + sourceHandleX;
@@ -68,6 +81,7 @@ export default ({
   const targetPosition = isRightOrLeft ? Position.Left : Position.Top;
 
   if (CustomConnectionLineComponent) {
+
     return (
       <g className="react-flow__connection">
         <CustomConnectionLineComponent

src/store/index.ts

@@ -1,3 +1,4 @@
+import { Store } from 'redux';
 import configureStore from './configure-store';
 
 import { ReactFlowState, ConnectionMode } from '../types';
@@ -56,7 +57,7 @@ export const initialState: ReactFlowState = {
   reactFlowVersion: typeof __REACT_FLOW_VERSION__ !== 'undefined' ? __REACT_FLOW_VERSION__ : '-',
 };
 
-const store = configureStore(initialState);
+const store: Store = configureStore(initialState);
 
 export type ReactFlowDispatch = typeof store.dispatch;
 

tsconfig.json

@@ -3,7 +3,10 @@
     "outDir": "dist",
     "module": "esnext",
     "target": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "jsx": "react",
     "moduleResolution": "node",
     "declaration": true,
@@ -21,6 +24,14 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true
   },
-  "include": ["src"],
+  "include": [
-  "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
+    "src"
-}
+  ],
+  "exclude": [
+    "node_modules",
+    "build",
+    "dist",
+    "example",
+    "rollup.config.js"
+  ]
+}