initial working mod with nodeId and handleId split up in Connection type so that target-target and source-source connections cannot be made

example/src/Validation/index.js

@@ -20,15 +20,18 @@ const onConnectEnd = (event) => console.log('on connect end', event);
 const CustomInput = () => (
   <>
     <div>Only connectable with B</div>
-    <Handle type="source" position="right" isValidConnection={isValidConnection} />
+    <Handle type="source" position="right" id='a' isValidConnection={isValidConnection} />
+    {/* <Handle type="source" position="right" id='a' /> */}
   </>
 );
 
 const CustomNode = ({ id }) => (
   <>
     <Handle type="target" position="left" isValidConnection={isValidConnection} />
+    {/* <Handle type="target" position="left" /> */}
     <div>{id}</div>
     <Handle type="source" position="right" isValidConnection={isValidConnection} />
+    {/* <Handle type="source" position="right" /> */}
   </>
 );
 
@@ -40,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));
   };
 
@@ -52,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,14 +117,19 @@ const Header = () => {
 };
 
 ReactDOM.render(
-  <Router forceRefresh={true}>
-    <Header />
-    <SourceDisplay />
-    <Switch>
-      {routes.map((route) => (
-        <Route exact path={route.path} render={() => <route.component />} key={route.path} />
-      ))}
-    </Switch>
-  </Router>,
+  <Validation />,
   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')
+// );