Annotate Edges (without renderEdge prop)

[gilneto8]

Is your feature request related to a problem? Please describe. It seems that, some time ago, there was a prop called renderEdge, that has been deprecated since then, that enabled an override to the way each edge was rendered. I've found this info on #12 . Now, I'm not sure what approach to take to annotate each edge. My idea is to add a specific text element over each edge, near its center.

Describe the solution you'd like Something along the lines of the renderEdge prop.

Describe alternatives you've considered I tried to use the afterRenderEdge, but since it returns nothing I have to use jquery, which is not an option for now.

Thanks, Gil

[ajbogh]

Hello @gilneto8. The afterRenderEdge function is a callback for edge rendering. It allows the user to modify the edge once react-digraph has completed rendering it. This modification is usually DOM related, such as changing CSS style attributes or updating the HTML.

The format of the function is:

 afterRenderEdge?: (id: string, element: any, edge: IEdge, edgeContainer: any, isEdgeSelected: boolean) => void;

Using this information, it's possible to add new elements around the edge. You will be able to retrieve the edge element, then you could find its parent, then append children to the parent if you want (these are examples of what you could do, it's up to your imagination).

The reason why we removed the renderEdge function was that rendering an edge is a rather complex operation that involves calculating distances from the center of nodes and determining intersection points. We didn't want to duplicate this code in everyone's project, and it's nearly impossible to calculate intersections correctly if everyone renders a different type of edge with different properties, so now react-digraph does the work itself, but we still allow you to modify the edge after we're done.

[ajbogh]

Regarding adding text elements around the edges, there are a few properties to achieve this:

edge.handleText - handleText is a property of each edge object that allows you to render specific text in the middle of the edge. Usually this is a short message that fits within an edge type SVG element. Example: handleText: '5',

edge.handleTooltipText - a property of the edge which allows a tooltip to be added to the edge handle text. You can add more information within this element about what the edge does. Example: handleTooltipText: 'This edge connects Node A and Node B',

edge.label_from: Similar to handleText, but this adds the label at the beginning of the edge.

edge.label_to: Similar to label_from.

I believe that your comment has alluded to the need to document edge and node properties to a greater extent, so I will do that in #162.