使用画布分区对固定布局图进行分区

这个示例构建了什么

这个示例构建了一个全屏 relation graph，并在视觉上划分为三个彩色区域。用户会看到七个放置在固定坐标上的表格风格节点、六条连接它们的曲线连线，以及一个悬浮在图上方的说明窗口。

这个图的行为更像一个查看器而不是编辑器。用户可以查看已经排布好的场景、使用内置工具栏、拖动说明窗口、打开共享设置面板，并将当前画布导出为图片。这个示例的重点在于固定定位、表格风格的节点渲染，以及画布级背景分区的组合方式。

数据是如何组织的

图数据以内联方式声明为一个 RGJsonData 对象，实际由两个部分组成：nodes 数组和 lines 数组。每个节点都已经包含明确的 x 和 y 坐标，因此这个场景是作为固定构图来编排的，而不是通过树形布局或力导布局计算出来的。

在布局之前，代码不会对数据集做任何转换。它先通过 addNodes(...) 插入 graphData.nodes，再通过 addLines(...) 插入 graphData.lines，然后只运行一次布局，让 relation-graph 围绕这些固定位置构建场景。在真实系统中，相同的结构可以表示分组后的数据库表、业务域、风险区域、工作流阶段或区域归属范围。

relation-graph 是如何使用的

RGProvider 包裹了这个示例，因此图组件和悬浮辅助面板都可以访问当前激活的图上下文。在 MyGraph 内部，使用 RGHooks.useGraphInstance() 加载节点和连线、运行 doLayout()，然后调用 moveToCenter() 和 zoomToFit()，从而让预先编排好的布局在初始时就完整可见。

图选项针对基于 slot 的渲染进行了调整。layout.layoutName 被设置为 fixed，默认节点边框和填充被移除，工具栏以水平模式移动到右下角，连线则以黑色标准曲线绘制，并使用左右连接点。选项还启用了路径上的连线文本，虽然这份数据实际上并没有提供连线标签。

两个 slot 定义了可见表现。RGSlotOnNode 用 MyNodeContent 替换了默认节点主体，而后者会根据 node.id 返回 HTML 表格。RGSlotOnCanvas 在图后方插入三个绝对定位的半透明矩形，用来创建蓝色、绿色和黄色区域。样式刻意保持轻量：SCSS 主要定义了表格外观，包括白色背景、边框折叠和深色单元格边线。

悬浮的 DraggableWindow 是一个共享辅助组件，而不是这个示例独有的逻辑。它使用 RGHooks.useGraphStore() 读取当前交互设置，使用 graphInstance.setOptions(...) 切换滚轮和拖拽行为，并使用图片生成相关辅助方法导出当前画布。

关键交互

这个图作为只读总览加载，因此重要交互集中在查看而不是编辑上。用户可以通过 relation-graph 的常规行为和内置工具栏来平移与缩放画布。

悬浮说明窗口可以被拖动、最小化，并切换为设置面板。该面板允许用户在滚动、缩放和无操作之间切换滚轮行为，在选择、移动和无操作之间切换画布拖拽行为，并将当前图下载为图片。这个演示中没有节点编辑、边编辑或动态重新分组等操作。

关键代码片段

这段代码展示了该场景是如何作为一个具有显式坐标和曲线连接器的固定布局图来编排的。

const graphOptions: RGOptions = {
    defaultNodeBorderWidth: 0,
    defaultNodeColor: 'transparent',
    toolBarDirection: 'h',
    toolBarPositionH: 'right',
    toolBarPositionV: 'bottom',
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    layout: {
        layoutName: 'fixed'
    }
};

这段代码展示了节点和连线是分别加载的，并且在布局完成后会被居中到可视区域中。

const initializeGraph = async () => {
    graphInstance.addNodes(graphData.nodes);
    graphInstance.addLines(graphData.lines);
    await graphInstance.doLayout();
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

这段代码展示了构成示例可见结构的两个 slot：前景中的表格节点，以及后景中的分区色带。

<RelationGraph options={graphOptions}>
    <RGSlotOnNode>
        {MyNodeContent}
    </RGSlotOnNode>
    <RGSlotOnCanvas>
        <div style={{ width: '500px', height: '800px', position: 'absolute', left: '-800px', top: '0px', backgroundColor: 'rgba(15,71,255,0.18)' }} />
        <div style={{ width: '500px', height: '800px', position: 'absolute', left: '-250px', top: '0px', backgroundColor: 'rgba(116,255,5,0.24)' }} />
        <div style={{ width: '500px', height: '800px', position: 'absolute', left: '300px', top: '0px', backgroundColor: 'rgba(255,247,9,0.24)' }} />
    </RGSlotOnCanvas>
</RelationGraph>

这段代码证明节点 slot 并不是装饰性的文本替换；它会针对每个节点标识实际渲染表格标记。

{node.id === 'table-1' && (
    <table className="c-data-table">
        <tr>
            <td colSpan={3}>{node.text}</td>
        </tr>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr>
            <td>xxxx</td>
            <td>xxxx</td>
            <td>xxxx</td>
        </tr>
    </table>
)}

这个示例的独特之处

对比数据表明，这个示例的独特性并不在于它只是使用了 slot 或固定布局。像 graph-offset、element-line-edit 和 node-style4 这样的其他示例，也分别覆盖了这类能力的一部分。这里真正突出的，是一种具体组合：紧凑的固定位置数据集、通过 RGSlotOnNode 渲染的表格风格节点主体，以及通过 RGSlotOnCanvas 渲染的三个固定半透明分区。

与 canvas-bg2 相比，这个示例关注的不是通过包裹类切换主题，或对一棵树进行重新换肤。它使用通过 slot 挂载的覆盖层，在一张已经排布完成的图内部创建语义区域。与 element-line-edit 相比，这里的 slot 是被动展示层，而不是交互式端点。与 graph-offset 相比，这里的画布覆盖层绑定的是实际图分组，而不是一个空的测量工作区。与 node-style4 相比，这里的节点 slot 是分区场景构图的一部分，而不是一种全局统一节点皮肤。

这使得这个示例在需要构建查看器风格图中的空间分组时，成为一个很好的起点。它比编辑器、地图式构图或真正的表关系演示都更简单，但仍然展示了多层表现是如何协同工作的。

这一模式还能应用到哪里

这一模式很适合用于那些需要把一张图划分为业务区域、生命周期阶段、风险类别或运营辖区，同时又不希望把图变成完整编辑器的仪表盘。相同的方法也可以用于架构总览，在其中系统按环境、归属边界或部署区域进行分组。

它同样适用于那些需要表格形状节点、但又不打算实现真正外键建模的类 schema 总览。在这类场景中，画布 slot 可以定义高层分组，而节点 slot 则可以为每个实体呈现更丰富的 HTML 摘要。

用画布分区展示图谱