[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:fullscreen-target-container":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# 将全屏重定向到页面级图外层容器\n\n## 这个示例构建了什么\n\n这个示例在一个全页外层容器中构建了一棵小型的从左到右树形图，该容器还包含说明文字和两个固定侧边面板。可见界面刻意保持简洁：一个页头、一个绿色提示区块、中间的图，以及左右两侧的占位块。\n\n用户可以点击节点并使用 relation-graph 内置工具栏。这里最重要的交互是全屏按钮，因为这个 demo 让全屏范围包含周围的外层内容，而不是只把图画布单独全屏。\n\n重点不在树本身。重点在于当 relation-graph 进入全屏模式时，如何让相邻的页面 UI 继续保持可见。\n\n## 数据是如何组织的\n\n图数据直接在 `initializeGraph()` 中以内联方式声明为一个 `RGJsonData` 对象，包含 `rootId: 'a'`、一个扁平的 `nodes` 数组和一个扁平的 `lines` 数组。它描述了一棵紧凑的分支树，共有 16 个节点和 15 条连接。\n\n在加载数据之前，代码会执行一步预处理：为任何尚未拥有 `id` 的 line 赋值 `line-${index}`。之后，这份数据集会直接传给 `setJsonData()`，中间没有 fetch 步骤、适配层或派生视图模型。\n\n在真实应用中，同样的数据结构可以表示审批链、组件依赖树、组织分支，或任何其他需要出现在更大页面布局中的小型关系集合。\n\n## relation-graph 是如何使用的\n\n`index.tsx` 使用 `RGProvider` 包裹整个示例，`MyGraph.tsx` 则通过 `RGHooks.useGraphInstance()` 获取当前激活的图实例。一个仅在挂载时执行的 `useEffect()` 会运行 `initializeGraph()`，随后通过 `setJsonData()`、`moveToCenter()` 和 `zoomToFit()` 加载内联数据集并规范化视口。\n\n图本身被配置为一棵从左到右的树，参数包括 `layoutName: 'tree'`、`from: 'left'`、`treeNodeGapH: 120` 和 `treeNodeGapV: 10`。默认节点是矩形的 `100x30` 块，连线使用 `RGLineShape.StandardCurve`，连接点使用 `RGJunctionPoint.lr`，展开按钮位置设置在右侧。\n\n最重要的选项是 `fullscreenElementXPath: '#my-fullscreen-content'`。它告诉 relation-graph 的内置全屏操作应当以外层包装元素为目标，而不是仅针对图元素本身，因此页头和两侧面板会与图一起进入全屏。\n\n这个示例没有使用自定义 slots、编辑 API 或自定义工具栏逻辑。本地 SCSS 文件也只包含空的选择器骨架，因此最终可见效果主要来自图配置和外围的 flex 布局，而不是大量样式覆盖。\n\n## 关键交互\n\n- 点击内置工具栏中的全屏按钮后，整个 `#my-fullscreen-content` 外层容器会进入全屏，因此页头和两侧面板会与图一起保持可见。\n- 点击节点会触发 `onNodeClick` 并记录节点文本。它不会改变渲染出的 UI，因此节点检查并不是这个示例的重点，全屏行为才是。\n\n## 关键代码片段\n\n这个外层结构说明，整个 demo 都运行在同一个 relation-graph provider 上下文中。\n\n```tsx\nconst Demo = () => {\n    return (\n        \u003CRGProvider>\n            \u003CMyGraph />\n        \u003C/RGProvider>\n    );\n};\n```\n\n这个选项块证明，图本身保持了简单配置，而全屏则被重定向到一个更大的 DOM 容器。\n\n```tsx\nconst graphOptions: RGOptions = {\n    layout: {\n        layoutName: 'tree',\n        from: 'left',\n        treeNodeGapH: 120,\n        treeNodeGapV: 10\n    },\n    fullscreenElementXPath: '#my-fullscreen-content',\n    debug: false\n};\n```\n\n这个片段展示了该示例如何以内联方式构建由扁平 nodes 和 lines 组成的 `RGJsonData`。\n\n```tsx\nconst myJsonData: RGJsonData = {\n    rootId: 'a',\n    nodes: [\n        { id: 'a', text: 'a' },\n        { id: 'b', text: 'b' },\n        { id: 'b1', text: 'b1' }\n    ],\n    lines: [\n        { from: 'a', to: 'b' },\n        { from: 'b', to: 'b1' }\n    ]\n};\n```\n\n这一步预处理会在数据集加载前补齐缺失的 line id。\n\n```tsx\nmyJsonData.lines.forEach((line, index) => {\n    if (!line.id) {\n        line.id = `line-${index}`;\n    }\n});\n```\n\n这段初始化流程展示了在数据对象准备完成之后，图实例的完整工作流。\n\n```tsx\nawait graphInstance.setJsonData(myJsonData);\ngraphInstance.moveToCenter();\ngraphInstance.zoomToFit();\n```\n\n这段布局片段说明，全屏目标是一个包含说明内容和侧边面板的页面级外层容器，而不只是 `RelationGraph` 组件本身。\n\n```tsx\n\u003Cdiv className=\"my-graph bg-white\" id=\"my-fullscreen-content\">\n    \u003Cdiv className=\"flex flex-col\" style={{ height: '100vh' }}>\n        \u003Cdiv className=\"border-b\">\n            \u003Cdiv className=\"p-4 text-xs\">\n                \u003Cdiv className=\"font-bold text-sm\">Customize the fullscreen display content using the fullscreenElementXPath option.\u003C/div>\n            \u003C/div>\n        \u003C/div>\n        \u003Cdiv className=\"grow flex\">\n            \u003Cdiv className=\"bg-pink-200 w-36 shrink-0 flex place-items-center justify-center border-r border-gray-300\">Left\u003C/div>\n            \u003CRelationGraph options={graphOptions} onNodeClick={onNodeClick} />\n            \u003Cdiv className=\"bg-blue-200 w-36  shrink-0 flex place-items-center justify-center border-l border-gray-300\">Right\u003C/div>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n```\n\n## 这个示例的独特之处\n\n对比数据清楚地说明了它的核心差异：这个示例的重点并不主要在树布局、命令式图控制或 slot 放置上。它最独特的启示是，relation-graph 的全屏可以被重定向到外层容器，因此周围的页面内容仍然能成为全屏体验的一部分。\n\n与 `graph-instance-api` 相比，它使用了非常相似的 provider 与实例配合方式，也采用了相近的树形骨架，但在加载完成后对图状态的操作要少得多。与 `adv-hide-2-show` 相比，它关注的不是隐藏容器中的延迟挂载。与 `built-in-slots` 相比，这里的辅助 UI 是位于 `RelationGraph` 外部、普通的页面级同级 DOM，而不是注入到图自身 view 或 canvas 层中的 HTML。\n\n这种由朴素三栏外层结构、小型从左到右树形图以及 `fullscreenElementXPath` 组成的组合，使这个示例更适合作为以下需求的起点：“我的图位于一个更大的页面中，而全屏时也应该包含这个更大的页面。”\n\n## 这种模式还适用于哪里\n\n这种模式很适合迁移到以下场景：带持久图例的架构查看器、带证据侧边栏的案件审查页面、带摘要面板的组织树页面，以及带页头说明或筛选器的监控仪表板。在这些迁移场景中，图本身可以继续保持技术上简单，而全屏行为仍然尊重周围布局。\n\n它也适用于需要在图旁边放置说明文字的文档和引导页面。可复用的思路是选择一个包含所有需要在全屏后继续可见的 UI 元素的外层容器，然后将 `fullscreenElementXPath` 指向这个容器。\n",false,500,1782615422881]