Please pass the sourceEvent to onMoveStart, onMove and onMoveEnd

[Jinhai]

d3-drag stops the even propagation at https://github.com/d3/d3-drag/blob/main/src/drag.js#L58
This makes client code cannot get on mousedown event.
One possible fix is to pass the sourceEvent to onMoveStart, onMove and onMoveEnd, same as other handlers.

[moklick]

Hey @Jinhai could you explain what you want to achieve?

[Jinhai]

Hi @moklick, thanks for checking.
Commonly used libraries, like antd provides Popover and Dropdown UI components, they rely on mousedown event to auto close the Popover / Dropdown.
With react-flow, because d3-drag stops the event propagation, when clicking on react-flow pane, those UI components can not work properly.
I see the need of d3-drag to stop propagation to make sure gesture are not interrupted. But if the sourceEvent is passed to react-flow handlers, in this case onMoveStart, onMove and onMoveEnd, same as other handlers. Client code will have a chance to know there is a mousedown in react-flow pane, so client code can do necessary operation when needed. In above antd Popover / Dropdown case, client code can sent out a event to trigger the close properly. There are other cases too.

[BrianHung]

Encountered same problem integrating https://headlessui.dev/react/dialog with react flow. The dialog uses an event listener on window to listen for click outside events to close any currently open dialog. Right now opening a dialog then clicking on the canvas does not work since canvas intercepts and stops propagation of the event. As a result, the dialog will stay open.

A fix on the dialog library side would be to set capturing=true for the event listener, but I’ve looked at various other dialog libraries such as radix and they also run into the same problem.

@moklick

[moklick]

We updated the handlers for v10 and pass the source event:

export type OnMove = (event: MouseEvent | TouchEvent, viewport: Viewport) => void;
export type OnMoveStart = OnMove;
export type OnMoveEnd = OnMove;

[Jinhai]

We updated the handlers for v10 and pass the source event:

export type OnMove = (event: MouseEvent | TouchEvent, viewport: Viewport) => void;
export type OnMoveStart = OnMove;
export type OnMoveEnd = OnMove;

Awesome. Thank you!