dbdae8e83c
### What problem does this PR solve? feat: add FlowChatBox #918 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import {
|
||
BaseEdge,
|
||
EdgeLabelRenderer,
|
||
EdgeProps,
|
||
getBezierPath,
|
||
} from 'reactflow';
|
||
import useGraphStore from '../../store';
|
||
|
||
import { useMemo } from 'react';
|
||
import styles from './index.less';
|
||
|
||
export function ButtonEdge({
|
||
id,
|
||
sourceX,
|
||
sourceY,
|
||
targetX,
|
||
targetY,
|
||
sourcePosition,
|
||
targetPosition,
|
||
style = {},
|
||
markerEnd,
|
||
selected,
|
||
}: EdgeProps) {
|
||
const deleteEdgeById = useGraphStore((state) => state.deleteEdgeById);
|
||
const [edgePath, labelX, labelY] = getBezierPath({
|
||
sourceX,
|
||
sourceY,
|
||
sourcePosition,
|
||
targetX,
|
||
targetY,
|
||
targetPosition,
|
||
});
|
||
|
||
const selectedStyle = useMemo(() => {
|
||
return selected ? { strokeWidth: 1, stroke: '#1677ff' } : {};
|
||
}, [selected]);
|
||
|
||
const onEdgeClick = () => {
|
||
deleteEdgeById(id);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<BaseEdge
|
||
path={edgePath}
|
||
markerEnd={markerEnd}
|
||
style={{ ...style, ...selectedStyle }}
|
||
/>
|
||
<EdgeLabelRenderer>
|
||
<div
|
||
style={{
|
||
position: 'absolute',
|
||
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}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"
|
||
>
|
||
<button
|
||
className={styles.edgeButton}
|
||
type="button"
|
||
onClick={onEdgeClick}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</EdgeLabelRenderer>
|
||
</>
|
||
);
|
||
}
|