broke out handleId by itself rather than joined with nodeID, modded necessary functions to give handles not assigned IDs an empty string for backwards compadibility. Also modded handles so that only target-source and source-target connections are allowed, and no repeat connections are allowed.

example/src/CustomNode/ColorSelectorNode.js

@@ -15,8 +15,8 @@ export default memo(({ data }) => {
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>
       <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
-      <Handle type="source" position="right" id="a" style={{ top: 10, background: '#555' }} />
-      <Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#555' }} />
+      <Handle type="source" position="right" id="0" style={{ top: 10, background: '#555' }} />
+      <Handle type="source" position="right" id="1" style={{ bottom: 10, top: 'auto', background: '#555' }} />
     </>
   );
 });

example/src/CustomNode/index.js

@@ -56,8 +56,8 @@ const CustomNodeFlow = () => {
       { id: '4', type: 'output', data: { label: 'Output B' }, position: { x: 550, y: 100 }, targetPosition: 'left' },
 
       { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
-      { id: 'e2a-3', source: '2__a', target: '3', animated: true, style: { stroke: '#fff' } },
-      { id: 'e2b-4', source: '2__b', target: '4', animated: true, style: { stroke: '#fff' } },
+      { id: 'e2a-3', source: '2', sourceHandle: '0', target: '3', animated: true, style: { stroke: '#fff' } },
+      { id: 'e2b-4', source: '2', sourceHandle: '1', target: '4', animated: true, style: { stroke: '#fff' } },
     ]);
   }, []);
 

example/src/Validation/index.js

@@ -43,7 +43,7 @@ const nodeTypes = {
 const HorizontalFlow = () => {
   const [elements, setElements] = useState(initialElements);
   const onConnect = (params) => {
-    // console.log('on connect', params);
+    console.log('on connect', params);
     setElements((els) => addEdge(params, els));
   };
 
@@ -55,9 +55,9 @@ const HorizontalFlow = () => {
       onLoad={onLoad}
       className="validationflow"
       nodeTypes={nodeTypes}
-      // onConnectStart={onConnectStart}
-      // onConnectStop={onConnectStop}
-      // onConnectEnd={onConnectEnd}
+      onConnectStart={onConnectStart}
+      onConnectStop={onConnectStop}
+      onConnectEnd={onConnectEnd}
     />
   );
 };

example/src/index.js

@@ -117,19 +117,14 @@ const Header = () => {
 };
 
 ReactDOM.render(
-  <Validation />,
+  <Router forceRefresh={true}>
+    <Header />
+    <SourceDisplay />
+    <Switch>
+      {routes.map((route) => (
+        <Route exact path={route.path} render={() => <route.component />} key={route.path} />
+      ))}
+    </Switch>
+  </Router>,
   document.getElementById('root')
 );
-
-// ReactDOM.render(
-//   <Router forceRefresh={true}>
-//     <Header />
-//     <SourceDisplay />
-//     <Switch>
-//       {routes.map((route) => (
-//         <Route exact path={route.path} render={() => <route.component />} key={route.path} />
-//       ))}
-//     </Switch>
-//   </Router>,
-//   document.getElementById('root')
-// );