Fix rendering when input and output port has same name

Ironclad · Oct 17, 2023 · bbc7a88 · bbc7a88
1 parent 69e3cb2
commit bbc7a88
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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,14 +102,15 @@ export const Wire: FC<{
 export function getNodePortPosition(
   node: ChartNode,
   portId: PortId,
+  portIsInput: boolean,
   portPositions: PortPositions,
 ): { x: number; y: number } {
   if (!node) {
     return { x: 0, y: 0 };
   }
 
   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
@@ -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;