自定义连线操作工具栏

演示如何创建一个动态工具栏，当选中连线时出现，显示基于连线坐标自动定位的自定义操作。

自定义连线操作工具栏

功能概述

此示例演示如何创建一个动态工具栏，当选中连线时出现，显示所选连线的自定义操作。工具栏位置基于连线坐标自动调整，并在拖动和缩放时更新。

核心特性实现

连线选择处理

实现 onLineClick 以在单击连线时设置编辑连线：

const onLineClick = (lineObject: RGLine, linkObject: RGLink) => {
    graphInstance.setEditingLine(lineObject);
};

自定义连线工具栏组件

创建一个 MyLineToolbar 组件，该组件：

• 从 graphInstance 获取当前选中的连线
• 计算连线起点和终点之间的中点位置
• 在计算的位置显示操作按钮

const MyLineToolbar = ({ onLinePropChange, onRemoveLine }: MyLineToolbarProps) => {
    const editingLine = graphInstance.getEditingLine();
    if (!editingLine) return null;

    const lineConfig = graphInstance.generateLineConfig(editingLine);
    const midpoint = {
        x: (lineConfig.startPoint.x + lineConfig.endPoint.x) / 2,
        y: (lineConfig.startPoint.y + lineConfig.endPoint.y) / 2
    };

    return (
        <div style={{
            position: 'absolute',
            left: midpoint.x,
            top: midpoint.y,
            transform: 'translate(-50%, -50%)'
        }}>
            {/* 工具栏按钮 */}
        </div>
    );
};

连线属性修改

实现处理程序以动态修改连线属性：

const onLinePropChange = (line: RGLine, propName: string, newValue: any) => {
    graphInstance.updateLine(line, {
        [propName]: newValue
    });
};

连线删除

处理连线删除并提供用户反馈：

const onRemoveLine = (line: RGLine) => {
    SimpleGlobalMessage.warning('Line Removed:' + line.text);
    graphInstance.removeLine(line);
    graphInstance.setEditingLine(null);
    graphInstance.clearChecked();
};

节点和画布单击处理

在单击节点或画布时清除连线选择：

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    graphInstance.setEditingNodes([nodeObject]);
    graphInstance.setEditingLine(null);
};

const onCanvasClick = () => {
    graphInstance.setEditingLine(null);
    graphInstance.clearChecked();
};

视图插槽集成

将自定义工具栏与其他编辑控制器一起放置在视图插槽中：

<RelationGraph
    onLineClick={onLineClick}
    onNodeClick={onNodeClick}
>
    <RGSlotOnView>
        <RGEditingConnectController />
        <MyLineToolbar onLinePropChange={onLinePropChange} onRemoveLine={onRemoveLine} />
    </RGSlotOnView>
</RelationGraph>

创意使用场景

• 网络管理：显示连接状态、带宽或延迟信息
• 流程图编辑器：提供添加条件、循环或并行路径的选项
• 电路设计器：显示组件值或允许参数调整
• 流程映射：启用向连接添加文档或时间戳
• 社交网络：显示关系类型或交互强度控制