🐛 [BUG]: <title>Change the position of the connection handle of the node. The connection line does not change

[kzj0916]

Is there an existing issue for this?

• I have searched the existing issues and this is a new bug.

Current Behavior

When I change the connection handle position of the node, the connection line does not change, and the line through the connection handle is also wrong

Expected Behavior

I wanted the connection line to be updated when I modified the handle, but that didn't happen

Steps To Reproduce

Please refer to the code below to reproduce the bug

Relevant log output

const onChangeTS = () => {
  const node: any = nodes.value.find((n) => n.selected)
  if (!node) return
  node.targetPosition = node.targetPosition === 'left' ? 'top' : 'left'
  node.sourcePosition = node.sourcePosition === 'right' ? 'bottom' : 'right'
}

Anything else?

No response

[Braks]

Two things, both aren't a bug here.

1. If you wanna have a an edge that just connects to the same node, you'll have to use a custom edge and adjust the path, otherwise the edge will run through the node - default edges aren't meant for self-loops.
2. If you update the position of your handles, you need to notify your node about this. This is documented right here: https://vueflow.dev/guide/node.html#working-with-dynamic-handle-positions-adding-handles-dynamically
   So in your case

const onChange = () => {
  const node: any = nodes.value.find((n) => n.selected)

  if (!node) return

  node.targetPosition = node.targetPosition === 'left' ? 'top' : 'left'
  node.sourcePosition = node.sourcePosition === 'right' ? 'bottom' : 'right'

  setTimeout(() => {
    updateNodeInternals(['1'])
  }, 0)
}

Here's an example: https://codesandbox.io/p/devbox/sleepy-ritchie-p4yn9m?file=%2Fsrc%2FApp.vue%3A36%2C1-38%2C8

[kzj0916]

Thank you, boss.

[Braks]

This is a ReactFlow example for a self-connecting node but you can use the same concept for VueFlow: https://codesandbox.io/p/sandbox/sharp-orla-vyjqen