Provide support for custom Edge labels about react-flow-smart-edge HOT 9 CLOSED

@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

from react-flow-smart-edge.

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.

from react-flow-smart-edge.

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?

from react-flow-smart-edge.

@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

from react-flow-smart-edge.

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

from react-flow-smart-edge.

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.

from react-flow-smart-edge.

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.

from react-flow-smart-edge.

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.

from react-flow-smart-edge.

@NithishG @atruttmann : Version 2.0.0 was published

from react-flow-smart-edge.