feat: accept any path element attribute as a prop - #4855

🦋 Changeset detected

Latest commit: 944238b

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@mhuggins Thanks for the initial PR! I saw that we can simplify a couple of things here and there.

I tried passing pathLength to the <BaseEdge /> which now works but Typescript is complaining.

I don't understand why even this is throwing a Typescript error:

const x : React.HTMLAttributes<SVGPathElement> = { pathLength: 5 };

Do you have any idea?

@peterkogo I fixed this by changing HTMLAttributes<...> to SVGAttributes<...> for the typing. I realized there were a couple other places that appeared to use this generic type incorrectly, so I updated those too.

I also added an example that demonstrates the pathLength being used in conjunction with a CSS animation that leverages the known path length.

Thanks for your help @mhuggins! I like the idea to pass svg attrs to the BaseEdge component but I am not sure if I would do the same for all built in edges. As soon as you want to do something fancy, you should use the BaseEdge and build your own edge component I would say. This would also make this change smaller since we would only need to update the BaseEdge component and not care about the prop drilling of the built in edges. wdyt?

I removed quite a lot of manual prop drilling from some of the components. Some, like the straight edge, were using ...props already.

In reverse this means we have to prop drill for all components manually. Either way is fine for me.

The prop drilling was introduced with this PR I think. Current main: https://github.com/xyflow/xyflow/blob/main/packages/react/src/components/Edges/StraightEdge.tsx

You're right! I must have mistaken the StepEdge for a regular Edge. Will revert it.

@moklick done, it's better this way.

Thanks for helping see this through, everyone! 😄