feat: #comment updated input/output handling

src/App.tsx

@@ -39,6 +39,10 @@ function AudioDeviceArrangerApp() {
     deviceId: string;
     portId: string;
   } | null>(null);
+  const [tempConnection, setTempConnection] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
 
   const handleAddCustomDevice = (deviceData: Omit<Device, "id">) => {
     addDevice({
@@ -58,7 +62,6 @@ function AudioDeviceArrangerApp() {
 
   const handleDeleteDevice = (id: string) => {
     deleteDevice(id);
-    // Remove any connections associated with this device
     setConnections(
       connections.filter(
         (conn) => conn.sourceDeviceId !== id && conn.targetDeviceId !== id
@@ -69,12 +72,14 @@ function AudioDeviceArrangerApp() {
   const handlePortClick = (
     deviceId: string,
     portId: string,
-    isOutput: boolean
+    isOutput: boolean,
+    event: React.MouseEvent
   ) => {
     if (connectingFrom) {
       if (isOutput || connectingFrom.deviceId === deviceId) {
         // Can't connect output to output or to the same device
         setConnectingFrom(null);
+        setTempConnection(null);
         return;
       }
       // Complete the connection
@@ -87,9 +92,11 @@ function AudioDeviceArrangerApp() {
       };
       setConnections([...connections, newConnection]);
       setConnectingFrom(null);
+      setTempConnection(null);
     } else if (isOutput) {
       // Start a new connection from an output port
       setConnectingFrom({ deviceId, portId });
+      setTempConnection({ x: event.clientX, y: event.clientY });
     }
   };
 
@@ -127,6 +134,19 @@ function AudioDeviceArrangerApp() {
     }));
   };
 
+  const handleMouseMove = (event: React.MouseEvent) => {
+    if (connectingFrom) {
+      setTempConnection({ x: event.clientX, y: event.clientY });
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (connectingFrom) {
+      setConnectingFrom(null);
+      setTempConnection(null);
+    }
+  };
+
   if (isLoading)
     return (
       <div className="flex justify-center items-center h-screen">
@@ -191,7 +211,12 @@ function AudioDeviceArrangerApp() {
         </header>
 
         {/* Grid */}
-        <div ref={gridContainerRef} className="flex-1 overflow-auto">
+        <div
+          ref={gridContainerRef}
+          className="flex-1 overflow-auto"
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+        >
           <div
             className="border border-gray-300 dark:border-gray-600 relative transition-colors"
             style={dotMatrixStyle}
@@ -215,6 +240,23 @@ function AudioDeviceArrangerApp() {
                 />
               );
             })}
+            {connectingFrom && tempConnection && (
+              <ConnectionLine
+                startX={
+                  devices.find((d) => d.id === connectingFrom.deviceId)!
+                    .position.x +
+                  GRID_SIZE * 1.5
+                }
+                startY={
+                  devices.find((d) => d.id === connectingFrom.deviceId)!
+                    .position.y +
+                  GRID_SIZE * 1.5
+                }
+                endX={tempConnection.x}
+                endY={tempConnection.y}
+                isTemp={true}
+              />
+            )}
             {devices.map((device) => (
               <DeviceNode
                 key={device.id}

src/components/ConnectionLine.tsx

@@ -7,14 +7,22 @@ interface ConnectionLineProps {
   startY: number;
   endX: number;
   endY: number;
+  isTemp?: boolean;
 }
 
 const ConnectionLine: React.FC<ConnectionLineProps> = ({
   startX,
   startY,
   endX,
   endY,
+  isTemp = false,
 }) => {
+  // Calculate control points for a quadratic bezier curve
+  const midX = (startX + endX) / 2;
+  const midY = (startY + endY) / 2;
+  const controlX = midX;
+  const controlY = midY - Math.abs(endY - startY) / 2;
+
   return (
     <svg
       style={{
@@ -26,13 +34,12 @@ const ConnectionLine: React.FC<ConnectionLineProps> = ({
         pointerEvents: "none",
       }}
     >
-      <line
-        x1={startX}
-        y1={startY}
-        x2={endX}
-        y2={endY}
-        stroke="black"
+      <path
+        d={`M ${startX} ${startY} Q ${controlX} ${controlY} ${endX} ${endY}`}
+        fill="none"
+        stroke={isTemp ? "rgba(59, 130, 246, 0.5)" : "rgb(59, 130, 246)"}
         strokeWidth="2"
+        strokeDasharray={isTemp ? "5,5" : "none"}
       />
     </svg>
   );

src/components/DeviceNode.tsx

@@ -10,7 +10,12 @@ interface DeviceNodeProps {
   onMove: (id: string, position: { x: number; y: number }) => void;
   onEdit: (device: Device) => void;
   onDelete: (id: string) => void;
-  onPortClick: (deviceId: string, portId: string, isOutput: boolean) => void;
+  onPortClick: (
+    deviceId: string,
+    portId: string,
+    isOutput: boolean,
+    event: React.MouseEvent
+  ) => void;
   isConnecting: boolean;
   gridWidth: number;
   gridHeight: number;
@@ -105,12 +110,25 @@ const DeviceNode: React.FC<DeviceNodeProps> = ({
       {ports.map((port) => (
         <div
           key={port.id}
-          className={`text-xs cursor-pointer ${
-            isConnecting ? "hover:bg-blue-200 dark:hover:bg-blue-700" : ""
-          } text-gray-600 dark:text-gray-400`}
+          className={`
+            text-xs cursor-pointer
+            ${
+              isConnecting
+                ? isOutput
+                  ? "hover:bg-green-200 dark:hover:bg-green-700"
+                  : "hover:bg-blue-200 dark:hover:bg-blue-700"
+                : ""
+            }
+            ${
+              isOutput
+                ? "text-green-600 dark:text-green-400"
+                : "text-blue-600 dark:text-blue-400"
+            }
+            p-1 rounded transition-colors
+          `}
           onClick={(e) => {
             e.stopPropagation();
-            onPortClick(device.id, port.id, isOutput);
+            onPortClick(device.id, port.id, isOutput, e);
           }}
         >
           {port.name}