You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
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.
The text was updated successfully, but these errors were encountered:
Hey Ian thanks for bringing this up! We're missing descriptions on props in quite a few places so I'm on the case make sure everything is properly documented and up to date
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
I'm going to use the phase "updatable edge behavior" below. By that I just mean "adding the draggable invisible
<circle>
withreact-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 docshttps://reactflow.dev/api-reference/types/edge#updatable
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.
The text was updated successfully, but these errors were encountered: