Feature request: customizable drag and select triggers

[rikkertkoppes]

I'd like to prioritize box selection over dragging the canvas, but allow both of them. To do that, I'd like to be able to appoint left mouse button drag to box selection (which is now shift-lmb-drag) and middle mouse button drag to canvas move (which is now lmb-drag).

I can imagine this being a configurable option though

[xtecox]

Got here looking for the same feature

[rsdouglas]

+1

Middle mouse to pan the canvas would be super useful for us.

[chrtze]

Thanks for this feature request. We could add a property for configuring the mouse button to drag the pane quite easily as d3-zoom already supports this. Open questions:

• Should we really expose the option for the middle mouse button? This won't work on trackpads etc.
• How should we call the new prop? Something like dragPaneMouseButton? Maybe there is a better idea.
• What options should this prop accept? 0 (left), 1 (center), 2 (right)?

[aleib]

Thanks for this feature request. We could add a property for configuring the mouse button to drag the pane quite easily as d3-zoom already supports this. Open questions:

• Should we really expose the option for the middle mouse button? This won't work on trackpads etc.
• How should we call the new prop? Something like dragPaneMouseButton? Maybe there is a better idea.
• What options should this prop accept? 0 (left), 1 (center), 2 (right)?

Hi @chrtze, thanks for the response. For our use case we actually would want to use both the left mouse and the middle mouse to pan under slightly different circumstances.

• Left mouse click & drag: this pans when clicking & dragging on the background canvas. Left clicking on a node moves the node around the canvas.
• Middle mouse click & drag: this is an explicit pan & drag for mouse users, so clicking on a node and dragging does not move the node, it drags the entire canvas. For trackpad users they get this functionality from 2 finger swiping.

This seems to be a fairly common behaviour on canvas style apps, I think?

So for us, I suppose maybe the flag would be a boolean like panOnMiddleMouseDrag, but that seems pretty specific. Maybe panOnMouseDrag that accepts an array.
e.g. [0, 1, 2] with default as [1],
or ['left', 'middle', 'right'] with default ['left']. Naming is hard 😄

[rikkertkoppes]

How about exposing a function via a hook. Any advanced scenario can then be implemented by the user. For example, by using use-gesture https://use-gesture.netlify.app/ Edit: The above was a bit of a low-effort quick reply via mail. Some details: Prioritizing drag-to-select or drag-to-pan depends a bit on the use case. Some implementations are really about exploring, in which case drag-to-pan on lmb is preferable. Others are more focused on editing (multiple) nodes. In that case drag-to-select on lmb is preferable. I would suggest having sensible defaults (the current defaults are fine), which can be disabled or overridden by a prop. One way to do this is a disable prop and adding the select and pan functions to the ReactFlow instance interface, e.g. by adding selectStart(x,y), selectMove(x,y) and selectEnd(x,y) functions. These can then be called by use-gesture callbacks. Same for panStart(x,y), panMove(x,y) and panEnd(x,y). Implementors can use use-gesture to implement all sorts of things, such as fallback for touch interfaces, drag on space-lmb-drag etc.