Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarification in "updatable edge" docs #384

Open
IanLondon opened this issue May 7, 2024 · 1 comment
Open

Clarification in "updatable edge" docs #384

IanLondon opened this issue May 7, 2024 · 1 comment
Assignees

Comments

@IanLondon
Copy link

IanLondon commented May 7, 2024

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.

@hayleigh-dot-dev
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants