将当前可见的图区域捕获为图片

这个示例构建了什么

这个示例构建了一个查看器风格的 relation graph，并带有一个用于生成截图的浮动工具窗口。画布中展示的是一个紧凑的蓝色图，包含圆形节点、关系连线、右上角的内置工具栏，以及可选的缩略图叠加层。

核心工作流是依赖当前视口的捕获。在用户平移或缩放图之后，这个示例可以精确地从当前可见的图区域生成图片，而不是导出一张预先准备好的完整场景图片。同一个面板还会以内联方式显示生成结果，包括图片预览和 Base64 字符串。

数据是如何组织的

图数据在 initializeGraph 中以内联方式声明为一个 RGJsonData 对象。它使用 rootId、扁平的 nodes 数组和扁平的 lines 数组，因此这个示例不会在加载前请求远程数据，也不会对独立的业务 schema 做转换。

这里几乎没有预处理。组件挂载后，会构建这个静态数据对象，将其传给 setJsonData，然后把图重新居中并缩放到适配视图。在生产系统中，同样的数据形态可以表示设备层级、产品结构、流程拆解、依赖树，或任何其他可以用节点和边记录表达的有向关系集合。

relation-graph 是如何使用的

RGProvider 提供图上下文，而 RGHooks.useGraphInstance() 是这个示例中的主要集成入口。从当前源码可以看出，它没有添加自定义布局配置；而是以命令式方式加载 JSON 数据，然后调用 moveToCenter() 和 zoomToFit()，让图在初始状态下就具有合适的取景。

图选项更关注展示而不是编辑。这个示例把内置工具栏设为右上角的横向布局，为节点和连线统一使用蓝色，将每个节点设为 60x60 的圆形，并通过 RGJunctionPoint.border 让连线连接到节点边界。一个很小的 SCSS 覆盖把节点标签改成了白色。

视图层的扩展点是 RGSlotOnView。这个插槽会按条件挂载 RGMiniView，这意味着缩略图被当作视口叠加层处理，而不是节点内容。截图流程随后会在调用 DOM 转图片辅助函数之前切换 showToolBar 和本地的缩略图可见性。

这个示例没有实现图编辑。它的交互界面是一个查看器加导出工具。共享的浮动窗口还暴露了滚轮模式切换、拖拽模式切换，以及通过 prepareForImageGeneration() 和 restoreAfterImageGeneration() 执行的另一条完整图片下载路径，但这些设置属于复用的辅助面板，而不是核心的可见区域捕获行为。

关键交互

用户可以先平移或缩放图，捕获结果会跟随当前的视口状态。
两个布尔开关决定生成的图片中是否包含内置工具栏和缩略图。
点击 Generate Visible Area Image 会捕获当前图的实时 DOM，把结果转换为 Base64，并在浮动面板中同时渲染图片预览和 Base64 内容。
浮动工具窗口可以拖动、最小化，并可切换到共享设置面板，在运行时修改滚轮和拖拽行为。

关键代码片段

下面这段代码表明，这个示例在组件内部使用静态的 RGJsonData 数据，并会在加载后让图适配视图。

const initializeGraph = async () => {
    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' },
            // ...
        ],
        lines: [

下面这段代码表明，可见区域导出路径会捕获当前图的实时 DOM，并在截图前临时修改叠加层的可见性。

const generateImageBase64 = async () => {
    const canvasDom = graphInstance.$dom;
    graphInstance.updateOptions({
        showToolBar: toolbarVisibleInImage
    });
    await graphInstance.sleep(100);
    const orignMiniViewVisible = miniViewVisible;
    setMiniViewVisible(miniViewVisibleInImage);
    await graphInstance.sleep(100);
    const imageBlob = await domToImageByModernScreenshot(canvasDom, {
        backgroundColor: graphInstance.getOptions().backgroundColor
    });

下面这段代码表明，导出专用的控制项位于浮动叠加层中，而不是固定在页面的永久界面元素里。

<DraggableWindow>
    <div className="py-1 text-sm">
        尝试缩放、移动画布后，点击按钮生成图片，将会根据当前可见内容生成图片，你还可以指定某些组件（如工具栏、缩略图）是否包含在最终的图片中。
    </div>
    <div>
        <SimpleUIBoolean label="Toolbar Visible In Image" currentValue={toolbarVisibleInImage} onChange={setToolbarVisibleInImage} />
        <SimpleUIBoolean label="MiniView Visible In Image" currentValue={miniViewVisibleInImage} onChange={setMiniViewVisibleInImage} />
    </div>
    <SimpleUIButton onClick={generateImageBase64}>Generate Visible Area Image</SimpleUIButton>

下面这段代码表明，缩略图是通过视图插槽挂载的，因此它可以被当作可选的截图内容处理。

<RelationGraph options={graphOptions}>
    <RGSlotOnView>
        {miniViewVisible && <RGMiniView />}
    </RGSlotOnView>
</RelationGraph>

下面这段代码表明，共享辅助函数使用 modern-screenshot 的默认捕获设置，并返回一个 blob，之后这个示例再把它转换为 Base64。

const defaultOptions = {
    scale: 2,
    cacheBust: true,
    ...options
};

const blob = await domToBlob(element, defaultOptions);

return blob;

这个示例的独特之处

与附近的导出演示如 generate-image、generate-image-base64 和 generate-image-with-background 相比，这个示例是当前视口限定捕获最清晰的参考。它的主路径不会准备一个完整的导出场景，也不会抽象掉当前的平移或缩放状态。相反，它直接对 graphInstance.$dom 截图，因此捕获边界就是查看器当前正在显示的内容。

对比数据还表明，这个示例组合了邻近示例中较少见的一组能力：实时视口 DOM 捕获、显式控制是否包含工具栏、可选包含 RGMiniView、内联截图预览，以及在同一个由辅助窗口驱动的界面中输出 Base64 文本。相比面向展示的全图导出，这种组合更适合作为“捕获操作人员此刻正在看到的内容”类工作流的起点。

与 gee-thumbnail-diagram 相比，这里的缩略图承担的是不同角色。它主要不是一个带有位置或尺寸控制的导航部件，而是一个可选择是否出现在导出图片中的叠加内容。

这种模式还适用于哪里

这种模式可以适配到审查工具中，在这些场景下，用户需要把当前图视口精确附加到工单、评论或审批步骤中。

它也适合那些在上传、嵌入或进一步处理之前，需要先在应用内预览并拿到 Base64 负载的纯客户端工作流，而不是立即下载文件。

另一个扩展方向是分析师工具。在这类工具里，工具栏、缩略图或徽标等辅助叠加层，是否应出现在截图中，需要根据图片是用于调试、文档编写还是面向终端用户展示而被有意纳入或排除。

导出当前可见图谱区域图片