35 lines
991 B
TypeScript
35 lines
991 B
TypeScript
import { FC, useMemo, CSSProperties } from 'react';
|
|
import { EdgeProps, useStoreState, getBezierPath } from 'react-flow-renderer';
|
|
|
|
import { getEdgeParams } from './utils';
|
|
|
|
const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
|
|
const nodes = useStoreState((state) => state.nodes);
|
|
|
|
const sourceNode = useMemo(() => nodes.find((n) => n.id === source), [source, nodes]);
|
|
const targetNode = useMemo(() => nodes.find((n) => n.id === target), [target, nodes]);
|
|
|
|
if (!sourceNode || !targetNode) {
|
|
return null;
|
|
}
|
|
|
|
const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
|
|
|
|
const d = getBezierPath({
|
|
sourceX: sx,
|
|
sourceY: sy,
|
|
sourcePosition: sourcePos,
|
|
targetPosition: targetPos,
|
|
targetX: tx,
|
|
targetY: ty,
|
|
});
|
|
|
|
return (
|
|
<g className="react-flow__connection">
|
|
<path id={id} className="react-flow__edge-path" d={d} style={style as CSSProperties} />
|
|
</g>
|
|
);
|
|
};
|
|
|
|
export default FloatingEdge;
|