Make an endpoint follow the pointer, and recede further at rest

Two things from using it. The label only jumped to its new place on release: its position comes from a memo of ours rather than React Flow's own store, so nothing moved it until the drag had already finished. It is now updated on every drag frame, with the write to storage still happening once at the end rather than once per pixel. The edges deliberately do not depend on that position — an endpoint's edges follow from which messages it touches, never from where it sits — so dragging one no longer rebuilds the edge array on every frame. And they sit further back at rest, so the nodes read first. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011LF61rxW1FG5YCD2J9YqjY
2026-08-16 16:14:37 +02:00
parent c70359af67
commit b1e1b4d501
2 changed files with 17 additions and 6 deletions
@@ -29,7 +29,7 @@ function EndpointNodeComponent({ data, selected }: NodeProps) {
        // Padding keeps the text off the connector dot, which sits on the edge.
        "flex max-w-48 cursor-grab items-center gap-2 px-3 py-1",
        // Quiet at rest so the logic reads first; legible when reached for.
-        "text-muted-foreground transition-colors",
+        "text-muted-foreground/55 transition-colors",
        "hover:text-foreground active:cursor-grabbing",
        selected && "text-foreground",
      )}