feat(workflow): handles area and connection

[antlio]

description
this pr is a proposal to:

• increase node handle hit area on desktop
• connect edge to handle automatically on over the node release

state	preview
after	after.mov

[vercel]

@antlio is attempting to deploy a commit to the Vercel Labs Team on Vercel.

A member of the Team first needs to authorize it.

[ctate]

Great work on this! The drop-on-node connection feature is a nice UX improvement

One small thing I noticed: when dragging from a target handle and dropping on empty canvas, the edge direction might be inverted. In handleConnectionToNewNode, the edge is always created with the connecting node as the source:

const newEdge = {
  id: nanoid(),
  source: sourceNodeId,
  target: newNode.id,
  type: "animated",
};

But if dragging from a target handle, the new node should feed into the connecting node. You could mirror the logic from handleConnectionToExistingNode:

const fromSource = connectingHandleType.current === "source";

const newEdge = {
  id: nanoid(),
  source: fromSource ? sourceNodeId : newNode.id,
  target: fromSource ? newNode.id : sourceNodeId,
  type: "animated",
};

Let me know if I'm missing something!

[antlio]

@ctate great catch thank you for the feedback, just added in your suggestion without extracting it as there are only two occurrences but let me know!