After finding inspiration from this particular example in the react-flow documentation, I decided to create my own customized version. It showcases a Material Ui Popper that appears when the edge is selected. However, my problem arises when attempting to zoom or pan on the react-flow surface as the popper becomes detached from its anchor point.
To further illustrate this issue, I have provided a sandbox link, and below is the relevant part of the code:
import React, { useState, useRef, useEffect } from "react";
import { getBezierPath } from "reactflow";
import { Fade, Paper, Popper } from "@mui/material";
import "./index.css";
const foreignObjectSize = 40;
export default function CustomEdge({
id,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
style = {},
markerEnd,
selected
}) {
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition
});
const [isPopperOpen, setIsPopperOpen] = useState(false);
const anchorElementRef = useRef();
useEffect(() => {
if (selected) {
setTimeout(() => setIsPopperOpen(true), 350);
}
}, [selected]);
return (
<>
<path
id={id}
style={style}
className="react-flow__edge-path"
d={edgePath}
markerEnd={markerEnd}
/>
<foreignObject
width={foreignObjectSize}
height={foreignObjectSize}
x={labelX - foreignObjectSize / 2}
y={labelY - foreignObjectSize / 2}
className="edgebutton-foreignobject"
requiredExtensions="http://www.w3.org/1999/xhtml"
>
<div ref={anchorElementRef}>
<button className="edgebutton">×</button>
<Popper
open={isPopperOpen}
anchorEl={anchorElementRef.current}
placement="top"
transition
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<Paper style={{ padding: 15 }}>Hello popper!</Paper>
</Fade>
)}
</Popper>
</div>
</foreignObject>
</>
);
}
I would greatly appreciate any assistance with this matter.