Edge validation by handle type

[karenwanga]

Hi Sir,

I try to use VueFlow, it's really good to use, thank you so much!!
But I have some questions, could you please help me? Thank you.

Green handle is target type, blue handle is source type.

1. I don’t want to allow source to source connection, can I check this?

2. I make handle size more larger by change the style directly, is it right? Can I make the handle position in the center of node edge?

<Handle type="source" :position="Position.Right" :style="{ background: '#254ca5', width:'12px', height:'12px'  }" :is-valid-connection="isValidTargetPos"/>

And when I hover on handle left side, I cannot create handle connection but move node position, how can I fix this?

3. Arrow sometimes shows in Q3. in picture above. Is any suggetion to slove this problem?

Thank you again!!

[bcakmakoglu]

1. You can use ConnectionMode.Strict to only allow source -> target connections and not source -> source or target -> target

<VueFlow v-model="elements" :connection-mode="ConnectionMode.Strict"> ... </VueFlow>

3. I don't really understand the question, can you explain this a bit more?
4. What would you expect the arrow to look like instead?

[karenwanga]

Hi Sir,

Thank you for your reply!!

1. This is exactly what I want!!
2. Forgive me, I don't have problem now.
3. After I use "smoothstep", everything looks good.

Thank you so much!!