带可切换小地图的自定义工具栏按钮

这个示例构建了什么

这个示例构建了一个小型图谱查看器，它隐藏了 relation-graph 的默认工具栏，并使用自定义覆盖层控件替代它。用户会看到一个居中的示例图谱、左上角的纵向迷你工具栏、一个标准工具栏，以及右上角第二个可显示或隐藏小地图的迷你工具栏。这个示例的核心要点是：如何将 relation-graph 的工具栏容器复用为项目自定义按钮的外壳，而不是直接接受默认的图谱界面组件。

数据是如何组织的

图数据在 initializeGraph 内以内联方式声明为一个静态 RGJsonData 对象，包含 rootId: 'a'、五个节点和四条连线。在调用 setJsonData 之前，没有获取数据的步骤，也没有转换流水线；唯一的预处理就是直接构造这份数据集，以及为每个节点设置诸如 color、nodeShape、width 和 height 之类的视觉覆盖项。在真实应用中，同样的结构可以表示人员与汇报关系、服务与依赖关系，或设备与上游连接。

relation-graph 是如何使用的

index.tsx 用 RGProvider 包裹整个示例，从而使 MyGraph.tsx 内可以使用 RGHooks.useGraphInstance()。图谱配置使用 center 布局，关闭调试输出，并设置 showToolBar: false，使内置工具栏不再渲染。组件挂载后，会在图谱实例上调用 setJsonData(...)、moveToCenter() 和 zoomToFit()，以加载并规范化初始视图。

自定义控件通过 RGSlotOnView 挂载。在这层覆盖层中，示例渲染了一个 RGToolBar、一个左上角纵向 RGMiniToolBar、一个右上角横向 RGMiniToolBar，以及一个按条件渲染的 RGMiniView。随后，SCSS 文件会重新定义 .rg-miniview 的样式，为它添加粉色描边、带色调的可见区域遮罩，以及更低的顶部偏移。这里没有使用节点插槽、画布插槽、编辑 API 或图谱变更流程；它仍然是一个以查看器定制为主的示例。

关键交互

点击任意一个星标按钮都会切换共享的 favo 状态，因此收藏图标会在迷你工具栏和标准工具栏中同步更新。
点击右上角迷你工具栏中的定位按钮会切换 showMiniView，从而挂载或卸载 RGMiniView。
分享和帮助按钮会调用 alert(...)，因此它们只是产品动作的占位符，而不是图谱操作。

关键代码片段

这段配置证明，内置工具栏是被刻意禁用的，因此覆盖层插槽可以替代它。

const graphOptions: RGOptions = {
    debug: false,
    layout: {
        layoutName: 'center'
    },
    showToolBar: false // We render custom toolbar content in the view slot.
};

这段初始化流程说明，自定义工具栏层依然建立在标准的 relation-graph 启动流程之上。

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'A', color: '#43a2f1' },
        { id: 'b', text: 'B', color: '#229502ff' },
        { id: 'c', text: 'C', nodeShape: 1, width: 120, height: 80 }
        // ...
    ]
};

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

这个处理函数表明，收藏操作只影响本地 React 状态，而其他按钮只是占位动作。

const myToolbarBtnAction = (msg: string) => {
    if (msg === 'favo') {
        setFavo(!favo);
    } else {
        alert(msg);
    }
};

这段插槽组合是核心模式：多个工具栏界面和小地图都挂载在图谱视图覆盖层中。

<RGSlotOnView>
    <RGMiniToolBar positionV='top' positionH='left' direction='v'>
        {/* custom favorite and share buttons */}
    </RGMiniToolBar>
    <RGToolBar>
        {/* custom favorite, share, and help buttons */}
    </RGToolBar>
    <RGMiniToolBar positionV='top' positionH='right' direction='h'>
        {/* minimap toggle button */}
    </RGMiniToolBar>
    {showMiniView && <RGMiniView position='tr' />}
</RGSlotOnView>

这段 SCSS 片段展示了如何在不改变其底层行为的前提下，为小地图加入轻量的品牌化样式。

.rg-miniview {
    top: 50px;
    box-shadow: 0 0 0 1px #ec4899;

    .rg-mv-visible-area {
        box-shadow: 0 0 0 9999px #ec489a3f;
        border: #ec4899 solid 1px;
    }
}

这个示例的独特之处

根据对比数据，这个示例的独特之处在于：它在禁用内置工具栏的前提下，在同一个 RGSlotOnView 层中同时组合了一个 RGToolBar、两个位置不同的 RGMiniToolBar 实例，以及一个按条件渲染的 RGMiniView。这比一般的工具栏样式示例体现出更具体的组合模式。

与 toolbar-tooltips 相比，这里的主要要点不是 tooltip 管线或悬停检查，而是对内置工具栏容器的具体复用，以及通过共享本地状态让收藏按钮在不同工具栏变体之间保持同步。与 simple 和 gee-thumbnail-diagram 相比，这里的小地图是次要且可切换的，而不是主要的导航功能。与 node-menu-2 相比，图谱表面基本保持被动，可操作入口位于覆盖层界面组件中，而不是节点级菜单。

因此，当真实需求是“用品牌化控件替换默认图谱控件，并让这些控件管理内置图谱部件”时，这个示例是一个很好的起点。

这种模式还适用于哪里

这种模式可以适配需要品牌化控件的白标图谱查看器、按需暴露小地图的监控或调查类仪表盘，以及保持图谱只读但仍需要在周边提供自定义分享、收藏或帮助动作的嵌入式管理工具。它也适用于多界面控制设计，在这种设计中，同一份 React 状态必须在紧凑工具栏、完整工具栏和辅助功能部件之间保持一致。