From bbc7a88555e074a1fec9eab6daa323e70088b65f Mon Sep 17 00:00:00 2001
From: Andy Brenneke <andy.brenneke@ironcladhq.com>
Date: Tue, 17 Oct 2023 13:59:58 -0700
Subject: [PATCH] Fix rendering when input and output port has same name

---
 packages/app/src/components/Port.tsx           | 1 +
 packages/app/src/components/Wire.tsx           | 9 +++++----
 packages/app/src/hooks/useNodePortPositions.ts | 6 ++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/components/Port.tsx b/packages/app/src/components/Port.tsx
index cad9a95b8..789444ff6 100644
--- a/packages/app/src/components/Port.tsx
+++ b/packages/app/src/components/Port.tsx
@@ -31,6 +31,7 @@ export const Port: FC<{
         }}
         onMouseUp={(e) => onMouseUp?.(e, id)}
         data-portid={id}
+        data-porttype={input ? 'input' : 'output'}
         data-nodeid={nodeId}
       >
         {canDragTo && <div className={clsx('port-hover-area')} />}
diff --git a/packages/app/src/components/Wire.tsx b/packages/app/src/components/Wire.tsx
index 6f4ace1b3..530f47320 100644
--- a/packages/app/src/components/Wire.tsx
+++ b/packages/app/src/components/Wire.tsx
@@ -35,8 +35,8 @@ export const ConditionallyRenderWire: FC<WireProps> = ({
     return null;
   }
 
-  const start = getNodePortPosition(outputNode, connection.outputId, portPositions);
-  const end = getNodePortPosition(inputNode, connection.inputId, portPositions);
+  const start = getNodePortPosition(outputNode, connection.outputId, false, portPositions);
+  const end = getNodePortPosition(inputNode, connection.inputId, true, portPositions);
 
   // Optimization might not be needed
   // if (!lineCrossesViewport(canvasToClientPosition(start.x, start.y), canvasToClientPosition(end.x, end.y))) {
@@ -60,7 +60,7 @@ export const PartialWire: FC<{ connection: PartialConnection; portPositions: Por
     return null;
   }
 
-  const start = getNodePortPosition(node, connection.portId, portPositions);
+  const start = getNodePortPosition(node, connection.portId, false, portPositions);
   const end = { x: connection.toX, y: connection.toY };
 
   return (
@@ -102,6 +102,7 @@ export const Wire: FC<{
 export function getNodePortPosition(
   node: ChartNode,
   portId: PortId,
+  portIsInput: boolean,
   portPositions: PortPositions,
 ): { x: number; y: number } {
   if (!node) {
@@ -109,7 +110,7 @@ export function getNodePortPosition(
   }
 
   if (portId) {
-    const key = `${node.id}-${portId}`;
+    const key = `${node.id}-${portIsInput ? 'input' : 'output'}-${portId}`;
     const portPosition = portPositions[key];
     if (portPosition) {
       return { x: portPosition.x, y: portPosition.y };
diff --git a/packages/app/src/hooks/useNodePortPositions.ts b/packages/app/src/hooks/useNodePortPositions.ts
index 1b33f569e..ec4cf3e72 100644
--- a/packages/app/src/hooks/useNodePortPositions.ts
+++ b/packages/app/src/hooks/useNodePortPositions.ts
@@ -28,7 +28,8 @@ export function useNodePortPositions() {
     for (const elem of normalPortElements) {
       const portId = elem.dataset.portid! as PortId;
       const nodeId = elem.dataset.nodeid! as NodeId;
-      const key = `${nodeId}-${portId}`;
+      const portType = elem.dataset.porttype! as 'input' | 'output';
+      const key = `${nodeId}-${portType}-${portId}`;
 
       if (seen.has(key)) {
         return;
@@ -72,7 +73,8 @@ export function useNodePortPositions() {
 
       const portId = elem.dataset.portid! as PortId;
       const nodeId = elem.dataset.nodeid! as NodeId;
-      const key = `${nodeId}-${portId}`;
+      const portType = elem.dataset.porttype! as 'input' | 'output';
+      const key = `${nodeId}-${portType}-${portId}`;
 
       if (seen.has(key)) {
         return;