Partial-interactive graph

[dekelb]

Feature request - support an option for drag&drop nodes, but prevent the user from creating new edges (connect between two nodes).

In general - I think the lib should support control for each of those:

<ReactFlow
    ...
    dragNodes={true/false}
    linkNodes={true/false}
/>

This way it's possible to control all options and mix between them.

One might want to allow all (same as what the lib supports now), but another might want to have the nodes fixed and allow creation of new edges/links, or maybe support moving around the nodes, but prevent create new connections between nodes.

Giving an option to control each of them allows much more flexibility to the lib.

[moklick]

If you don't implement an onConnect handler, no edges will be created. So your first request should already work.

If you want an inactive chart but be able to connect nodes that's not possible for now. Do you think this is really a use case?

[dekelb]

No implementing the onConnect is indeed an option, however this is really frustrating to the user (because it's looks like a bug in the system - "why do I have an option to start drag a new edge, but it will never connect to anywhere?").

In my case - yes, I need this. I want to give some users permissions to only view the graph without the ability to link between the nodes (and I do want them to be able to drag/drop/rearrange the graph structure).

[moklick]

Ah, you are right. We are still drawing the connection line even if there is no on connect handler. For this case we could introduce a new option like isConnectable. Do you also have the use case where you want to show an inactive graph where users can connect nodes?

[dekelb]

Sure, this is also a valid option:
I want the nodes to be fixed (in place) and give the user the ability to connect them (but now allowing drag and drop of nodes).

The reason is that sometimes flows should be handled by one person (and the position of the elements explains the flow of the data in the system), and some other person have the ability to create the connection, but not changing the position of the elements.

[moklick]

Ok, got it. I will see how we can achieve this.

[moklick]

You can now use the properties nodesDraggable, nodesConnectable and elementsSelectable in order to adjust the interaction level.