chore: refresh fxnode gesture fixes

Amp-Thread-ID: https://ampcode.com/threads/T-019f9d91-77c1-7206-a60f-ed6554ce92ab

Co-authored-by: Heaust Azure <heaust.azure@gmail.com>

vendor/fxnode/src/layout/types.ts

@@ -204,3 +204,11 @@ export function layoutSocketsCompatible(from: LayoutSocket, to: LayoutSocket): b
     from.direction === "output" && to.direction === "input" && (to.wildcardInput || to.accepts.includes(from.dataType))
   );
 }
+
+export function layoutSocketAcceptsLink(from: LayoutSocket, to: LayoutSocket): boolean {
+  return (
+    from.nodeId !== to.nodeId &&
+    layoutSocketsCompatible(from, to) &&
+    (to.capacity === 1 || to.linkIds.length < to.capacity)
+  );
+}

vendor/fxnode/src/render/canvas-renderer.ts

@@ -2,7 +2,7 @@ import { GEOMETRY as G } from "../layout/constants.js";
 import { worldToView } from "../layout/geometry.js";
 import type { LinkId, NodeId, ParameterValue, SocketId } from "../core/types.js";
 import {
-  layoutSocketsCompatible,
+  layoutSocketAcceptsLink,
   type LayoutControl,
   type LayoutSnapshot,
   type LayoutSocket,
@@ -755,11 +755,24 @@ export function renderCanvas(
       context.bezierCurveTo(a.x + dx, a.y, b.x - dx, b.y, b.x, b.y);
       context.stroke();
       for (const socket of snapshot.sockets.values()) {
-        if (layoutSocketsCompatible(from, socket)) {
-          const p = worldToView(socket.anchor, t);
+        if (layoutSocketAcceptsLink(from, socket)) {
+          const candidate = socket.id === interaction.linkDrag.candidate;
           context.beginPath();
-          context.arc(p.x, p.y, socket.id === interaction.linkDrag.candidate ? 10 : 8, 0, Math.PI * 2);
-          context.strokeStyle = socket.id === interaction.linkDrag.candidate ? theme.emphasis : socket.color;
+          if (socket.shape === "multi-input" && socket.bounds) {
+            const topLeft = worldToView({ x: socket.bounds.x, y: socket.bounds.y }, t),
+              padding = candidate ? 4 : 2;
+            context.roundRect(
+              topLeft.x - padding,
+              topLeft.y - padding,
+              socket.bounds.width * t.zoom + padding * 2,
+              socket.bounds.height * t.zoom + padding * 2,
+              G.socket * t.zoom + padding,
+            );
+          } else {
+            const p = worldToView(socket.anchor, t);
+            context.arc(p.x, p.y, candidate ? 10 : 8, 0, Math.PI * 2);
+          }
+          context.strokeStyle = candidate ? theme.emphasis : socket.color;
           context.stroke();
         }
       }

vendor/fxnode/src/worker/interaction.ts

@@ -3,7 +3,7 @@ import type { Command } from "../commands/types.js";
 import { viewToWorld } from "../layout/geometry.js";
 import { GEOMETRY as G } from "../layout/constants.js";
 import {
-  layoutSocketsCompatible,
+  layoutSocketAcceptsLink,
   type LayoutControl,
   type LayoutSnapshot,
   type Rect,
@@ -219,7 +219,7 @@ export const boxNodes = (layout: LayoutSnapshot, a: Vec2, b: Vec2): NodeId[] =>
 export const compatibleTargets = (layout: LayoutSnapshot, fromId: SocketId) => {
   const from = layout.sockets.get(fromId);
   if (!from || from.direction !== "output") return [];
-  return [...layout.sockets.values()].filter((to) => to.nodeId !== from.nodeId && layoutSocketsCompatible(from, to));
+  return [...layout.sockets.values()].filter((to) => layoutSocketAcceptsLink(from, to));
 };
 export function planLink(
   layout: LayoutSnapshot,
@@ -230,8 +230,9 @@ export function planLink(
   const from = layout.sockets.get(fromId),
     to = layout.sockets.get(toId);
   if (!from || !to || !compatibleTargets(layout, fromId).some((s) => s.id === toId)) return;
+  const replacing = to.capacity === 1 && to.linkIds.length > 0;
   const link: GraphLink = {
-    id: to.linkIds[0] ?? newId,
+    id: replacing ? to.linkIds[0]! : newId,
     fromNodeId: from.nodeId,
     fromSocketId: from.id,
     toNodeId: to.nodeId,
@@ -239,9 +240,7 @@ export function planLink(
     muted: false,
     extensions: {},
   };
-  return to.capacity === 1 && to.linkIds.length
-    ? { type: "link.replace", removeId: to.linkIds[0]!, link }
-    : { type: "link.add", link };
+  return replacing ? { type: "link.replace", removeId: to.linkIds[0]!, link } : { type: "link.add", link };
 }
 export const clampResize = (layout: LayoutSnapshot, id: NodeId, world: Vec2): Vec2 | undefined => {
   const n = layout.nodes.get(id);