Merge branch 'clementloridan-main'

example/src/CustomNode/index.tsx

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

package.json

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

src/components/ConnectionLine/index.tsx

@@ -27,6 +27,14 @@ interface ConnectionLineProps {
   CustomConnectionLineComponent?: ConnectionLineComponent;
 }
 
+const getSourceHandle = (handleId: ElementId | null, sourceNode: Node, connectionHandleType: HandleType) => {
+  const handleTypeInverted = connectionHandleType === 'source' ? 'target' : 'source';
+  const handleBound =
+    sourceNode.__rf.handleBounds[connectionHandleType] || sourceNode.__rf.handleBounds[handleTypeInverted];
+
+  return handleId ? handleBound.find((d: HandleElement) => d.id === handleId) : handleBound[0];
+};
+
 export default ({
   connectionNodeId,
   connectionHandleId,
@@ -53,9 +61,7 @@ export default ({
     return null;
   }
 
-  const sourceHandle = handleId
-    ? sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId)
-    : sourceNode.__rf.handleBounds[connectionHandleType][0];
+  const sourceHandle = getSourceHandle(handleId, sourceNode, connectionHandleType);
   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;

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"],
-  "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
-}
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build",
+    "dist",
+    "example",
+    "rollup.config.js"
+  ]
+}