带有表格内容和元素连接的节点

演示包含表格结构的节点，这些节点具有可连接的单元格，可以使用假线进行链接。

带有表格内容和元素连接的节点

功能概述

此示例演示了如何创建包含表格结构的节点，这些节点具有可以使用假线连接的特定连接点（单元格）。这对于可视化表格单元格之间的数据关系很有用。

核心特性实现

1. 带连接目标的表格节点

创建具有可连接单元格的表格：

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div className="h-fit">
            {node.id === 'a' && (
                <div style={{ width: '300px', backgroundColor: '#bbbbbb' }}>
                    <div className="bg-gray-900 text-white p-2.5">{node.text}</div>
                    <table className="c-data-table">
                        <thead>
                            <tr>
                                <th>Column 1</th>
                                <th>Column 2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>xxxx</td>
                                <td>
                                    <RGConnectTarget targetId="a-r2-c2">
                                        <div>a-r2-c2</div>
                                    </RGConnectTarget>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            )}
        </div>
    )}
</RGSlotOnNode>

2. 表格单元格之间的假线

使用假线连接特定单元格：

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'A区内配矿', nodeShape: RGNodeShape.rect, x: -500, y: -200 },
        { id: 'b', text: 'B区内洗选贸易企业', nodeShape: RGNodeShape.rect, x: 0, y: -400 }
    ],
    lines: [],
    fakeLines: [
        {
            id: 'fl-1',
            from: 'a-r2-c2',  // 特定单元格 ID
            to: 'b-r1-c1',    // 特定单元格 ID
            text: '',
            lineShape: RGLineShape.StandardCurve,
            color: 'rgba(29,169,245,0.76)',
            lineWidth: 3
        }
    ]
};

3. 多个表格结构

不同的节点可以具有不同的表格布局：

{node.id === 'a' && (
    <table>
        {/* 3 列，3 行 */}
    </table>
)}
{node.id === 'b' && (
    <table>
        {/* 不同结构 */}
    </table>
)}

4. 固定位置布局

使用固定定位进行精确的表格放置：

layout: {
    layoutName: 'fixed'
}

5. 颜色编码连接

为不同连接类型使用不同的颜色：

fakeLines: [
    { color: 'rgba(29,169,245,0.76)', lineWidth: 3 },  // 蓝色连接
    { color: '#e85f84', lineWidth: 3 }                  // 粉色连接
]

创意使用场景

• 数据映射：可视化数据库表之间的映射
• 字段关系：显示表单字段之间的关系
• API 文档：显示 API 请求/响应映射
• 数据转换：显示数据转换流程
• 架构比较：比较数据库架构
• 业务规则：可视化业务规则连接