Relation Graph

功能概述

此示例演示了如何通过拖动手柄启用交互式节点调整大小。当选择节点时，调整大小手柄出现在角落和边缘，允许用户拖动以调整节点的尺寸。该演示展示了不同的调整大小控制器样式，并演示了调整大小如何与其他编辑功能集成。

核心特性实现

调整大小控制器组件

RGEditingResize 组件提供调整大小功能：

<RGSlotOnView>
    <RGEditingNodeController>
        <RGEditingResize />
    </RGEditingNodeController>
</RGSlotOnView>

当节点设置为编辑节点时，调整大小控制器会自动出现。

激活调整大小模式

通过将节点设置为编辑节点来激活调整大小模式：

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

单击节点会激活调整大小手柄。单击画布会清除选择。

可自定义的调整大小控制器样式

该演示允许在不同的视觉样式之间切换：

<SimpleUISelect
    data={[
        {value: '', text: 'Default'},
        {value: 'my-graph-style-01', text: 'Customize Style 1'},
        {value: 'my-graph-style-02', text: 'Customize Style 2'},
    ]}
    currentValue={myGraphStyle}
    onChange={setMyGraphStyle}
/>

父容器上的不同 CSS 类以不同方式样式化调整大小手柄，允许视觉自定义。

画布单击处理程序

在节点外部单击会清除编辑状态：

const onCanvasClick = () => {
    graphInstance.setEditingNodes([]);
};

这提供了直观的交互，其中单击空白空间取消选择节点。

拖动事件动作配置

图配置为拖动模式：

const graphOptions: RGOptions = {
    dragEventAction: 'move'
};

这确保拖动节点会移动它们而不是触发其他操作。

创意使用场景

UI 模型和线框工具

构建线框工具，设计师可以在其中创建和调整界面元素的大小。精确控制组件尺寸的能力有助于创建准确的模型。

卡片和仪表板布局设计器

创建用于设计基于卡片的布局或仪表板配置的工具。调整大小帮助设计师为不同的内容区域找到合适的比例。

组织架构图工具

用于组织架构图，其中不同层次级别的职位可能需要不同的大小。调整大小允许视觉上强调更重要的职位。

可变节点大小的心智映射

创建节点大小指示重要性或内容量的心智地图。用户可以调整节点大小以反映其重要性或容纳更多文本。

演示和海报设计

构建用于创建视觉演示的工具，其中元素需要适当的大小。调整大小手柄有助于实现平衡的构图。

表单和调查构建器

实施表单构建器，其中问题框、输入字段和其他元素需要调整大小以适应其内容。调整大小为不同的表单布局提供了灵活性。

信息图表和图表创建

创建信息图表工具，其中图表、文本框和图形元素需要相对调整大小。调整大小有助于实现视觉平衡和层次结构。

数据库架构和 ER 图工具

在数据库设计工具中使用，其中表大小应反映字段数量或复杂性。调整大小允许架构在视觉上传达结构信息。

编辑节点大小