Why the connection starts from the Top Handle when I Try to Pull it From the Right Handle?

[Congyuwang]

2022-12-05.16.03.32.mov

[bcakmakoglu]

You probably didn't pass the handles unique ids, did you?

[Congyuwang]

Yes, the handles have unique ids within their Nodes. I have them numbered as 0, 1, 2, 3.

    <div class="circle-text" ref="circle" :style="circleStyle">
      <span ref="labelText" v-text="props.label" class="label-span"
            :style="labelStyle"></span>
    </div>
    <Handle :id="0" :position="Position.Top" class="handle"
            :style="{top: '0', left: `${width / 2}px`, ...handleStyle}"/>
    <Handle :id="1" :position="Position.Bottom" class="handle"
            :style="{top: `${height}px`, left: `${width / 2}px`, ...handleStyle}"/>
    <Handle :id="2" :position="Position.Left" class="handle"
            :style="{top: `${height / 2}px`, left: '0', ...handleStyle}"/>
    <Handle :id="3" :position="Position.Right" class="handle"
            :style="{left: `${width}px`, top: `${height / 2}px`, ...handleStyle}"/>

[bcakmakoglu]

Also use a more unique schema, something like handle_0 etc. instead of just 0

[bcakmakoglu]

Could you possibly provide a Sandbox with the issue so I can look at it directly?
Here's a basic template

That would make it easier to analyze the issue and find out why that's happening

[Congyuwang]

Sorry. I've tried again. Exactly. The problem is that I have to provide a string id. (I made a mistake and didn't change the right component, so it didn't work at first). Changing the ID to string solved my problem!!

[bcakmakoglu]

Glad it worked out 😄

[bcakmakoglu]

I'll add a more clear notice on that in the docs in the future (there will be a revamp of the docs at some point anyway) so this issue doesn't occur more often for users 😅

[Congyuwang]

It is strange that they just start from the wrong handle but end up connecting the right handles.