tisoap / react-flow-smart-edge

Custom Edge for React Flow that never intersects with other nodes
https://tisoap.github.io/react-flow-smart-edge/
MIT License
242 stars 26 forks source link

Provide support for custom Edge labels #23

Closed NithishG closed 2 years ago

NithishG commented 2 years ago

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

Screenshot 2022-04-26 at 1 04 31 PM
tisoap commented 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.

atruttmann commented 2 years ago

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.

tisoap commented 2 years ago

@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

tisoap commented 2 years ago

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.

atruttmann commented 2 years ago

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.

NithishG commented 2 years ago

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?

tisoap commented 2 years ago

@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

NithishG commented 2 years ago

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

tisoap commented 2 years ago

@NithishG @atruttmann : Version 2.0.0 was published