From b2330f2b35601fb930ffe9c55091aaafc91ac3d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tiziano=20M=C3=BCller?= <tiziano.mueller@hpe.com>
Date: Tue, 14 Feb 2023 16:57:06 +0100
Subject: [PATCH] Parse and add handle directions

fixes #1, which is caused by having multiple handles in the custom nodes but missing handle specs in the edges
---
 package.json                         |  2 +-
 src/components/Flow/FileNode.tsx     | 13 ++++++++++---
 src/components/Flow/LinkNode.tsx     | 15 +++++++++++----
 src/components/Flow/MarkdownNode.tsx | 14 +++++++++++---
 src/components/Flow/index.tsx        |  1 +
 src/utils/index.ts                   |  2 ++
 6 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 56be9a9..20a4c37 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.4",
-    "reactflow": "^11.4.0",
+    "reactflow": "^11.5.0",
     "swr": "^2.0.0",
     "typescript": "4.9.4"
   },
diff --git a/src/components/Flow/FileNode.tsx b/src/components/Flow/FileNode.tsx
index 39c7864..0a0af5e 100644
--- a/src/components/Flow/FileNode.tsx
+++ b/src/components/Flow/FileNode.tsx
@@ -19,10 +19,10 @@ const FileNode: FC<any> = memo(({ data, isConnectable }: any) => {
     return (
         <>
             <Handle
+                id="left"
                 type="target"
                 position={Position.Left}
                 style={{ background: "#555" }}
-                onConnect={(params) => console.log("handle onConnect", params)}
                 isConnectable={isConnectable}
             />
             {type === "image" && (
@@ -47,16 +47,23 @@ const FileNode: FC<any> = memo(({ data, isConnectable }: any) => {
                 />
             )}
             <Handle
+                id="top"
                 type="source"
                 position={Position.Top}
-                id="a"
                 style={{ top: 10, background: "#555" }}
                 isConnectable={isConnectable}
             />
             <Handle
+                id="right"
                 type="source"
                 position={Position.Right}
-                id="b"
+                style={{ background: "#555" }}
+                isConnectable={isConnectable}
+            />
+            <Handle
+                id="bottom"
+                type="source"
+                position={Position.Bottom}
                 style={{ bottom: 10, top: "auto", background: "#555" }}
                 isConnectable={isConnectable}
             />
diff --git a/src/components/Flow/LinkNode.tsx b/src/components/Flow/LinkNode.tsx
index 9a945b8..187b47a 100644
--- a/src/components/Flow/LinkNode.tsx
+++ b/src/components/Flow/LinkNode.tsx
@@ -5,24 +5,31 @@ const LinkNode: FC<any> = memo(({ data, isConnectable }: any) => {
     return (
         <>
             <Handle
-                type="target"
+                id="left"
+                type="source"
                 position={Position.Left}
                 style={{ background: "#555" }}
-                onConnect={(params) => console.log("handle onConnect", params)}
                 isConnectable={isConnectable}
             />
             <iframe className="w-full h-full" src={data.value} />
             <Handle
+                id="top"
                 type="source"
                 position={Position.Top}
-                id="a"
                 style={{ top: 10, background: "#555" }}
                 isConnectable={isConnectable}
             />
             <Handle
+                id="right"
+                type="source"
+                position={Position.Right}
+                style={{ background: "#555" }}
+                isConnectable={isConnectable}
+            />
+            <Handle
+                id="bottom"
                 type="source"
                 position={Position.Right}
-                id="b"
                 style={{ bottom: 10, top: "auto", background: "#555" }}
                 isConnectable={isConnectable}
             />
diff --git a/src/components/Flow/MarkdownNode.tsx b/src/components/Flow/MarkdownNode.tsx
index c85ada1..303d600 100644
--- a/src/components/Flow/MarkdownNode.tsx
+++ b/src/components/Flow/MarkdownNode.tsx
@@ -6,7 +6,8 @@ const MarkdownNode: FC<any> = memo(({ data, isConnectable }: any) => {
     return (
         <>
             <Handle
-                type="target"
+                id="left"
+                type="source"
                 position={Position.Left}
                 style={{ background: "#555" }}
                 onConnect={(params) => console.log("handle onConnect", params)}
@@ -14,16 +15,23 @@ const MarkdownNode: FC<any> = memo(({ data, isConnectable }: any) => {
             />
             <ReactMarkdown>{data.text}</ReactMarkdown>
             <Handle
+                id="top"
                 type="source"
                 position={Position.Top}
-                id="a"
                 style={{ top: 10, background: "#555" }}
                 isConnectable={isConnectable}
             />
             <Handle
+                id="right"
                 type="source"
                 position={Position.Right}
-                id="b"
+                style={{ background: "#555" }}
+                isConnectable={isConnectable}
+            />
+            <Handle
+                id="bottom"
+                type="source"
+                position={Position.Bottom}
                 style={{ bottom: 10, top: "auto", background: "#555" }}
                 isConnectable={isConnectable}
             />
diff --git a/src/components/Flow/index.tsx b/src/components/Flow/index.tsx
index 0f75e61..4b57f53 100644
--- a/src/components/Flow/index.tsx
+++ b/src/components/Flow/index.tsx
@@ -28,6 +28,7 @@ const Flow: FC<FlowProps> = ({ data }) => {
                     nodeTypes={nodeTypes}
                     nodes={nodes}
                     edges={edges}
+                    connectionMode="loose"
                 >
                     <Controls />
                 </ReactFlow>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 19cd7a9..3e19049 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -86,7 +86,9 @@ export const parseData = (data: {
             return {
                 id: edge.id,
                 source: edge.fromNode,
+                sourceHandle: edge.fromSide,
                 target: edge.toNode,
+                targetHandle: edge.toSide,
             };
         });
         res = { nodes, edges };