通过平铺背景层预览完整图谱图像

这个示例构建了什么

这个示例在 relation-graph 中渲染了一棵大型的从左到右技术树，并把准备好的场景转换为内联截图预览。可见结果是一个白色节点层级结构，带有弯曲的带标签连线，并通过 RGBackground 在图谱画布内部叠加了重复的 PNG 平铺背景和浅色调背景层。

用户可以点击 Generate Image，在浮动窗口中查看捕获后的位图，拖动或最小化该窗口，并打开一个共享设置面板来调整滚轮模式、拖拽模式和下载行为。这个示例的核心要点是针对带装饰图谱场景的“先预览再导出”流程，而不是图谱编辑，也不是一个已确认的 RGWatermark 实现。

数据如何组织

图谱数据在 initializeGraph() 中以内联方式声明为一个静态的 RGJsonData 对象。它使用 rootId: '2'、一个扁平的 nodes 数组，以及一个扁平的 lines 数组，其中每条连线都带有重复的标签 Subsystem。

这里没有 fetch 步骤，也没有在布局前执行预处理。组件创建这个数据对象后，直接把它传给 setJsonData(...)，随后通过 moveToCenter() 和 zoomToFit() 将图谱重新居中并适配视图。

在生产系统中，这种数据结构同样可以表示产品装配结构、设备子系统、制造阶段、依赖树，或任何由一个根节点向多个技术分支展开的带标签层级结构。

relation-graph 的使用方式

index.tsx 使用 RGProvider 包裹整个示例，使当前图谱实例可供主图谱组件和共享浮动工具组件使用。随后，MyGraph.tsx 通过 RGHooks.useGraphInstance() 作为初始化、整图图像生成和状态恢复的中心入口。

该图谱被配置为一个查看器，并采用从左到右生长的树形布局。它的选项使用白色矩形节点、灰色曲线连线、左右连接点、右侧展开控制、沿路径显示的连线标签，以及较宽且固定的 levelGaps，使整个层级读起来像一张疏朗的技术结构图。reLayoutWhenExpandedOrCollapsed 已启用，但这个示例没有加入编辑 UI 或自定义变更逻辑。

导出行为依赖 relation-graph 的图像生成生命周期 API。prepareForImageGeneration() 返回一个适合截图的稳定 DOM 目标，domToImageByModernScreenshot(...) 把该目标转换为 blob，blobToBase64(...) 再把 blob 转成用于本地预览的数据 URL，最后 restoreAfterImageGeneration() 在截图后恢复图谱状态。

该示例还使用了 relation-graph 在主画布外围的组合能力。RGBackground 注入了会成为导出场景一部分的重复平铺背景层，而 RGSlotOnView 虽然被挂载，但这里并没有添加额外的覆盖内容。共享的 DraggableWindow 助手则通过 RGHooks.useGraphStore() 和 graphInstance.setOptions(...) 暴露运行时滚轮与拖拽模式切换，以及一条单独的下载路径。

这个 SCSS 文件刻意保持得很轻。大部分辨识度较强的样式都来自内联的 RGBackground 元素，而不是大量选择器覆盖，因此装饰层是附着在图谱场景本身上的，而不只是外层页面皮肤。

关键交互

点击 Generate Image 会执行完整的 prepare-capture-restore 流程，然后在浮动面板中显示生成后的图像。
预览区域只有在成功捕获后才会出现，因此该面板承担的是审核界面作用，而不只是一个命令启动器。
浮动辅助窗口可以通过标题栏拖动，也可以最小化，这让控件可以移动，同时不会改变图谱数据。
设置面板可以把滚轮行为切换为 scroll、zoom 或 none。
设置面板可以把画布拖拽行为切换为 selection、move 或 none。
同一个共享面板还提供了 Download Image 操作，但这是继承而来的通用工具行为，并不是这个示例的主要教学重点。

关键代码片段

这段代码说明该示例在传给图谱实例之前，先以内联方式构建了一份静态层级数据。

const myJsonData: RGJsonData = {
    rootId: '2',
    nodes: [
        { id: '2', text: 'ALTXX' }, { id: '3', text: 'CH2 TTN' }, { id: '4', text: 'CH1 AlCu' },
        { id: '5', text: 'MainFrame' }, { id: '6', text: 'TestMainSys' }, { id: '7', text: 'Automotive Parts' },
        { id: '8', text: 'Automotive Process' }, { id: '9', text: 'Process Quality Inspection' },

这段代码展示了在组件挂载时的初始化路径：先加载图谱，再把它适配到当前视图，然后才进行任何导出操作。

await graphInstance.setJsonData(myJsonData);
graphInstance.moveToCenter();
graphInstance.zoomToFit();

这段代码展示了完整场景导出生命周期：先准备图谱，再以透明背景选项进行截图，随后恢复图谱状态，并把预览结果保存为 Base64。

const generateImageBase64 = async () => {
    const canvasDom = await graphInstance.prepareForImageGeneration();
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: null
    });
    await graphInstance.restoreAfterImageGeneration();
    if (imageBlob) {
        const base64 = await blobToBase64(imageBlob);
        setBase64String(base64);
    }
};

这段代码展示了用于建立从左到右技术树风格的图谱选项，这种风格同时用于实时视图和导出的预览图像。

const graphOptions: RGOptions = {
    reLayoutWhenExpandedOrCollapsed: true,
    defaultExpandHolderPosition: 'right',
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeBorderWidth: 1,
    defaultNodeColor: '#fff',
    defaultLineColor: '#666',
    defaultLineShape: RGLineShape.Curve2,
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultLineTextOnPath: true,

这段代码展示了装饰层如何通过 RGBackground 进行渲染，其中包含重复的 PNG 平铺背景和半透明色调，这些内容都会成为被捕获图谱场景的一部分。

<RGBackground>
    <div
        style={{
            width: '100%',
            height: '100%',
            backgroundImage: 'url(data:image/png;base64,...)',
            backgroundSize: '200px 200px',
            backgroundRepeat: 'repeat',
            backgroundColor: 'rgba(246, 167, 87, 0.1)'

这段代码展示了共享设置面板如何通过当前活动的图谱实例修改运行时交互模式。

<SettingRow
    label="Wheel Event:"
    options={[
        { label: 'Scroll', value: 'scroll' },
        { label: 'Zoom', value: 'zoom' },
        { label: 'None', value: 'none' },
    ]}
    value={wheelMode}
    onChange={(newValue: string) => { graphInstance.setOptions({ wheelEventAction: newValue }); }}
/>

这个示例的独特之处

对比数据表明，这个示例最接近 generate-image-with-background、generate-image、generate-image-base64 和 generate-image-visible-area，但它的侧重点比这些相邻示例中的任何一个都更收敛。它最明确的区分点在于：它把整图预览导出与 RGBackground 背景层结合在一起，因此生成的图像包含的是属于图谱场景本身的装饰内容，而不仅仅是外围页面 CSS。

与 generate-image 相比，这个示例把导出流程保持在一个可审核的内联预览工作流中，而不是把直接下载文件作为主要结果。与 generate-image-base64 相比，它的重点不是暴露原始图像数据或可配置背景色，而是保留捕获构图中的平铺装饰层。与 generate-image-visible-area 相比，它导出的是准备好的完整图谱，而不是用户当前视口状态。与 generate-image-with-background 相比，它演示的是内嵌 RGBackground 背景层，而不是仅依赖样式化画布表面。

稀有性记录和反向声明记录也进一步收窄了这篇文档的表述范围。它是“带有图谱附着装饰层的先预览后导出”这一模式的强参考示例，但不应被描述为唯一的内联预览示例，也不应被表述为一个已验证的水印组件演示，因为实际审查的 JSX 渲染的是 RGBackground，而不是 RGWatermark。

这种模式还适用于哪里

这种模式适用于用户在保存或分享之前需要先审核图谱图像的工作流。例如架构快照、子系统报告、制造拆解导出、技术方案图片，以及将生成后的图谱图像嵌入更大文档流程中的审批环节。

当导出的图谱图像需要包含装饰性或品牌化的场景内容时，这种模式同样适用，例如纹理背景、重复图案或浅色品牌背景。团队可以复用同样的 prepare-capture-restore 流程，让预览保留在页面内完成审批，同时把静态层级数据替换为自己的业务图谱数据。

预览带平铺背景的图谱图片