带顶点选择的交互式线条创建

具有节点选择工具栏的交互式线条创建界面，用于精确的连接点控制。

带顶点选择的交互式线条创建

功能概述

此示例演示了一个交互式线条创建界面，用户可以在其中选择节点并选择特定的连接点（顶点）来创建新关系。它包括一个自定义节点工具栏，用于精确的连接控制。

核心特性实现

1. 编辑节点控制器

使用编辑节点控制器显示自定义工具栏：

<RelationGraph options={graphOptions}>
    <RGSlotOnView>
        <RGEditingNodeController>
            <MyNodeToolbar onStartCreateLine={onStartCreateLine} />
        </RGEditingNodeController>
        <RGEditingConnectController />
    </RGSlotOnView>
</RelationGraph>

2. 自定义节点工具栏

在选定节点周围创建按钮以进行连接创建：

// MyNodeToolbar.tsx
<div className="my-near-nodes">
    <button onClick={() => createLine('top')}>↑</button>
    <button onClick={() => createLine('left')}>←</button>
    <button onClick={() => createLine('right')}>→</button>
    <button onClick={() => createLine('bottom')}>↓</button>
</div>

3. 线条创建处理

实现线条创建逻辑：

const onStartCreateLine = (fromNode: RGNode, lineTemplate: JsonLineLike, e: React.MouseEvent) => {
    graphInstance.startCreatingLinePlot(e.nativeEvent, {
        template: lineTemplate,
        fromNode: fromNode,
        onCreateLine: (fromNode, toNode, newLineJson?: JsonLine) => {
            if (toNode.id) {
                const newLineId = graphInstance.generateNewUUID(8);
                const newLineJsonData = Object.assign({}, newLineJson, {
                    from: fromNode.id,
                    to: toNode.id,
                    text: 'New Line ' + newLineId
                });
                graphInstance.addLines([newLineJsonData]);
            }
        }
    });
};

4. 画布选择结束处理

处理框选多个节点：

const onCanvasSelectionEnd = (selectionView: RGSelectionView) => {
    const willSelectedNodes = graphInstance.getNodesInSelectionView(selectionView) || [];
    graphInstance.setEditingNodes(willSelectedNodes);
};

5. 单击交互模式

支持不同的交互模式：

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    if ($event.shiftKey || $event.ctrlKey || ($event.metaKey && !$event.altKey)) {
        // 切换选择
        graphInstance.toggleEditingNode(nodeObject);
    } else {
        // 单选
        graphInstance.setEditingNodes([nodeObject]);
    }
    graphInstance.setEditingLine(null);
};

创意使用场景

• 交互式图表构建器：创建图表编辑工具
• 工作流设计器：构建工作流创作界面
• 网络规划工具：交互式设计网络拓扑
• 教育游戏：创建基于连接的学习游戏
• 架构设计器：可视化数据库架构设计工具
• 思维导图应用：交互式思维导图创建器