Closed NithishG closed 2 years ago
Hey @NithishG , I'm glad you liked the library!
I see, you guys need to be able to implement an edge with an button, like this example on React Flow docs. Currently the smart edges in this package only allow for text labels using the edge options, but I can see this being a nice addition.
This library looks awesome! I have the same use case - a custom edge with a button - and would love to see support for this too. I would like to center the button the same way as React Flow provides with getBezierEdgeCenter
.
@atruttmann I'm working on this, it's a bit harder since I have to re-structure the library around a getSmartEdge
function instead of factories, so it'll be a breaking change. The good thing is it will have a very similar API to React Flow's examples, and it'll give more control to developers when the path-finding happens
Hey @NithishG and @atruttmann ! I've released a beta version of the library that exposes a getSmartEdge
function, that allows for custom edges with custom labels to be created, could you guys test it out?
Available to test using the beta
tag. Install with NPM:
npm install @tisoap/react-flow-smart-edge@beta
New documentation can be found here.
Hey @tisoap, these updates are fabulous! 🥳 This was really easy to add to my project and works really well for my use case. From my testing so far it all works great, I'll let you know if anything changes.
Hey @tisoap, thanks for the update, it looks great and working as expected in order to provide a custom label.
But one thing that I felt is that how can I chose what kind of smart edge I need using getSmartEdge
?
We have extra info about the type of edge as part of data
through which we used to identify what kind of smart edge need to be drawn and this is how the previous implementation looks like
This is my CustomEdge
component
const CustomEdge = props => {
const { data: { edgeLineType } } = props;
const edgeProps = { ...props, style: { strokeWidth: 2.2 }, labelStyle: { fontSize: '12px' } };
switch (edgeLineType) {
case 'straight': {
return <SmartStraightEdge { ...edgeProps } />;
}
case 'step': {
return <SmartStepEdge { ...edgeProps } />;
}
default: {
return <SmartBezierEdge { ...edgeProps } />;
}
}
};
In the other component where we render ReactFlow
const edgeTypes = {
customEdge: CustomEdge,
};
// Rest of the code
<ReactFlow
edgeTypes={ edgeTypes }
// other props
/>
Any suggestions how I can achieve this?
@NithishG
how can I chose what kind of smart edge I need using getSmartEdge?
You would need pass an options
object to the getSmartEdge
, with the specific drawEdge
and generatePath
functions to create the desired line shape and path-finding behavior, respectively. You can see some examples on the Advanced Custom Smart Edges sections of the README.
To create a custom edge that behaves the same way as the built-in SmartStepEdge
for example, you would need to do something like this:
import {
getSmartEdge,
svgDrawStraightLinePath,
pathfindingJumpPointNoDiagonal
} from '@tisoap/react-flow-smart-edge'
// ...
const result = getSmartEdge({
sourcePosition,
targetPosition,
sourceX,
sourceY,
targetX,
targetY,
nodes,
options: {
drawEdge: svgDrawStraightLinePath,
generatePath: pathfindingJumpPointNoDiagonal,
}
})
Now I realize the README needs better examples, and of the importance of working on issue #29
Hey @tisoap Thank you very much for the quick reply 🙌🏼. This works like a charm 🥳 🎉 as per our need. Will be waiting for the official release of this version of the library.
And sorry for missing out to check some of the examples under README as I was checking the source code and found that the getSmartEdge
also accepts options
as well. But, haven't checked that the methods under functions
like svgDrawStraightLinePath
, pathfindingJumpPointNoDiagonal
were also exposed to outside world.
I would be happy to help to work on #29
@NithishG @atruttmann : Version 2.0.0
was published
First of all thank you @tisoap for this amazing library.
We have a requirement of displaying a button along with the edge label, through which we want to perform some actions. Something similar to what we have as
CustomEdge
in react-flow.Below is the screenshot of what we are actually trying to achieve