edgeCenterX and edgeCenterY sometimes aren't calculated properly!

[mdmag]

Describe the Bug

Hello @tisoap,

Thanks for this awesome library. I noticed that when you use the following code:

    const { edgeCenterX, edgeCenterY, svgPathString } = getSmartEdgeResponse;
       return (
        <>
            <BlockEdge {...props} />

            <EdgeLabelRenderer>
                <div
                    style={{
                        position: 'absolute',
                        transform: `translate(-50%, -50%) translate(${edgeCenterX}px,${edgeCenterY}px)`,
                        fontSize: 12,
                        // everything inside EdgeLabelRenderer has no pointer events by default
                        // if you have an interactive element, set pointer-events: all
                        pointerEvents: 'all',
                    }}
                    className="nodrag nopan"
                >
                    <div className="edgebutton">
                        <LogicIcon />
                    </div>
                </div>
            </EdgeLabelRenderer>
        </>
    );

This edge button sometime isn't on the path itself when you try dragging the node.

Minimal Example

N/A

Steps to Reproduce the Bug or Issue

1- Try to add an edge button 2- Try dragging the nodes 3- You will notice that the edge button isn't always on the path.

Expected behavior

The edge button x and y should be always on the path.

Screenshots or Videos

Video: https://www.awesomescreenshot.com/video/18125673?key=f23c09850e5998229585d2a49ea8a2f6

Platform

OS: [Windows]

Additional context

No response

[tisoap]

Hey @mdmag, I'm glad you're liking the library! 🎉 Unfortunately, I'll have to close this issue due to a lack of minimal example repo. Please create one before submitting a new issue