web
web copied to clipboard
Clarification in "updatable edge" docs
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 theedge.updatable
itself would activate the "updatable edges" behavior and that thisonEdgeUpdate
callback was simply an event callback and didn't have this dual role) -
edgesUpdatable
bool (it istrue
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 settingonEdgeUpdate
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 unlessonEdgeUpdate
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.