How do you distinguish pane click from edge drag events?

[edwmurph]

Made a codesandbox to demo this that just adds an onPaneClick handler that logs the events

demo.mp4

Sorry the video resolution is low but the issue is that I need to distinguish a user clicking the pane/graph vs. when the user is dragging an edge. Currently if the user drags an edge, when finishing dragging, it fires an onPaneClick event which triggers my event handler. But I don't want my onPaneClick event handler to run when a user is dragging an edge, I only want it to run when the user clicks the empty part of the graph/pane

Also oddly the onPaneClick fires inconsistently when dragging an edge which is demoed in the video included in this post.

Is there a way to distinguish the onPaneClick events that are from clicking the empty graph/pane vs finishing dragging an edge? And why is the onPaneClick event inconsistently firing when finishing dragging an edge?

[bcakmakoglu]

Well, what happens is, if you release the connection on top of another element, it's not a pane click - if you release it somewhere on the pane, it will register a click because a click happened.
Problem with the video you posted is, that I can't really see where your mouse is and as handles have a connection radius, you can release a connection on the pane while also creating an edge.

To filter out if the pane click originated from a connection attempt, you could store a flag during onConnectStart and reset it on onConnectEnd.

[edwmurph]

sorry ya the video resolution isn't great but thanks for clarifying why i'm seeing the inconsistency. i can see now that it depends on precisely where the edge is released which makes sense

filtering out those edge drag pane clicks via setting a flag kind of works but it looks like both onConnectStart and onConnectEnd finish before onPaneClick so what i have to do is set the flag in onConnectEnd and then check and clear the flag in onPaneClick which is a little slightly counter intuitive and with this setup if the user drags an edge correctly and finishes by hovering perfectly over the handle, the flag is still set so the next pane click is treated as having originated from a connection attempt

i updated my codesandbox demo to illustrate this

here's a video with better resolution showing this updated behavior, the last pane click in the video incorrectly registers as having originated from a connection attempt:

Screen.Recording.2023-07-18.at.6.48.12.AM.mp4