web icon indicating copy to clipboard operation
web copied to clipboard

Clarification in "updatable edge" docs

Open IanLondon opened this issue 9 months ago • 1 comments

Please describe the feature that you want to propose

Overview

The docs reference the concept of an updatable edge: https://reactflow.dev/examples/edges/updatable-edge

An edge is updatable by dragging it to another handle if you are using the onEdgeUpdate handler prop. The handler gets called after the edge gets dropped to a new handle. You can use the updateEdge helper function to update your edges state accordingly.

I'm going to use the phase "updatable edge behavior" below. By that I just mean "adding the draggable invisible <circle> with react-flow__edgeupdater to the end(s) of the edge", I believe this is theEdgeAnchor component.

<ReactFlow> component has several props related to updatable edge behavior:

  • onEdgeUpdate handler is what is actually responsible for toggling updatable edge behavior, even if I don't want the callback to do anything. I wish I could pass a boolean instead (or ideally, I wish setting the edge.updatable itself would activate the "updatable edges" behavior and that this onEdgeUpdate callback was simply an event callback and didn't have this dual role)
  • edgesUpdatable bool (it is true by default, but it is not enough to activate "updatable edges" behavior, even if on my edges themselves I have {...edgeDataHere, updatable: true}).
  • onEdgeUpdateStart, onEdgeUpdateEnd - I assume these don't have the special behavior that setting onEdgeUpdate has and are solely event callbacks?
  • edgeUpdaterRadius is clear, just a bit hidden in the docs

https://reactflow.dev/api-reference/types/edge#updatable

  • Setting updatable on edges seems to do nothing unless onEdgeUpdate is set (<ReactFlow onEdgeUpdate={something} ... />). The only docs I can find on this are from the updatable edge example.

Please let me know if I'm misunderstanding how these are intended to work.

Desired documentation

It would be nice if the behavior of the props listed above could be a bit more explicit, I listed them out because I'm not confident that I understand how they work. It would be helpful to call out "EdgeAnchor" as the name for the component the "updatable edges" have, and describe exactly how the props above contribute to rendering an EdgeAnchor or not.

IanLondon avatar May 07 '24 15:05 IanLondon