56 lines
1.1 KiB
TypeScript
56 lines
1.1 KiB
TypeScript
import { FC, useMemo, CSSProperties } from 'react';
|
|
import {
|
|
EdgeProps,
|
|
useStore,
|
|
getBezierPath,
|
|
ReactFlowState,
|
|
} from '@react-flow/core';
|
|
|
|
import { getEdgeParams } from './utils';
|
|
|
|
const nodeSelector = (s: ReactFlowState) => s.nodeInternals;
|
|
|
|
const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
|
|
const nodeInternals = useStore(nodeSelector);
|
|
|
|
const sourceNode = useMemo(
|
|
() => nodeInternals.get(source),
|
|
[source, nodeInternals]
|
|
);
|
|
const targetNode = useMemo(
|
|
() => nodeInternals.get(target),
|
|
[target, nodeInternals]
|
|
);
|
|
|
|
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;
|