Relation Graph

功能概述

此示例演示了对齐参考线功能，它帮助用户相对于彼此精确地定位节点。当拖动节点时，系统会自动检测与其他节点的潜在对齐位置并显示视觉参考线。用户可以选择启用"吸附"（捕捉），当节点接近对齐位置时会自动移动到精确对齐。

核心特性实现

对齐参考线组件

RGEditingReferenceLine 组件提供对齐功能：

<RGSlotOnView>
    <RGEditingReferenceLine adsorption={adsorption} />
</RGSlotOnView>

当 adsorption 为 true 时，节点会自动吸附到对齐位置。当为 false 时，显示参考线但节点不会吸附。

吸附的切换控制

简单的布尔切换控制吸附行为：

<SimpleUIBoolean
    currentValue={adsorption}
    onChange={setAdsorption}
    label="Enable Adsorption Effect"
/>

这允许用户选择是否要自动吸附或仅视觉参考线。

带键盘修饰符的节点选择

该演示使用键盘修饰符实现标准选择模式：

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);
};

Shift/Ctrl/Cmd+单击添加到选择，常规单击替换选择。

框选择支持

画布选择结束处理器处理框选择：

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

用户可以在空画布上拖动以选择矩形区域内的多个节点。

创意使用场景

精确图表布局工具

用于创建精确对齐至关重要的技术图表，例如平面图、电路原理图或 UI 模型。对齐参考线确保专业外观的布局，无需手动测量。

表单和 UI 设计器

构建表单设计器或 UI 布局工具，其中控件需要精确对齐。吸附有助于创建清晰、有组织的界面，具有一致的间距和对齐。

组织架构图布局

创建组织架构图工具，其中同一级别的职位对齐对于视觉清晰度很重要。参考线有助于保持层次结构和组织。

数据库架构编辑器

实现数据库设计工具，其中表实体需要对齐以提高可读性。对齐参考线有助于保持相关表的组织，并使关系更容易遵循。

网络拓扑图表绘制

用于网络图表绘制，其中同一层或类别的设备应该对齐。这创建了更清晰的视觉分组，并使图表更易于理解。

演示和信息图表创建器

构建用于创建演示或信息图表的工具，其中视觉对齐影响专业外观。参考线帮助用户创建精美的布局，而无需设计专业知识。

教育图表工具

创建学生可以学习空间关系和结构的教育软件。对齐反馈有助于教授平行性、对称性和组织等概念。

节点对齐参考线