You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { Menu } from '@arco-design/web-react';
|
|
import { Edge } from '@xyflow/react';
|
|
|
|
interface EdgeContextMenuProps {
|
|
edge: Edge;
|
|
onDelete?: (edge: Edge) => void;
|
|
onEdit?: (edge: Edge) => void;
|
|
onAddNode?: (edge: Edge) => void; // 添加在边上添加节点的功能
|
|
}
|
|
|
|
const EdgeContextMenu: React.FC<EdgeContextMenuProps> = ({
|
|
edge,
|
|
onDelete,
|
|
onEdit,
|
|
onAddNode
|
|
}) => {
|
|
const handleDelete = () => {
|
|
onDelete && onDelete(edge);
|
|
};
|
|
|
|
const handleEdit = () => {
|
|
onEdit && onEdit(edge);
|
|
};
|
|
|
|
// 添加在边上添加节点的处理函数
|
|
const handleAddNode = () => {
|
|
onAddNode && onAddNode(edge);
|
|
};
|
|
|
|
return (
|
|
<Menu
|
|
style={{
|
|
border: '1px solid #e4e7ed',
|
|
borderRadius: 4,
|
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
|
|
}}
|
|
>
|
|
<Menu.Item key="add-node" onClick={handleAddNode}>
|
|
添加节点
|
|
</Menu.Item>
|
|
<Menu.Item key="delete" onClick={handleDelete}>
|
|
删除连接
|
|
</Menu.Item>
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default EdgeContextMenu; |