[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:en:fullscreen-target-container":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# Redirecting Fullscreen to a Page-Level Graph Wrapper\n\n## What This Example Builds\n\nThis example builds a small left-to-right tree inside a full-page wrapper that also contains explanatory text and two fixed side panels. The visible screen is intentionally simple: a header, a green info callout, the graph in the center, and placeholder blocks on the left and right.\n\nThe user can click nodes and use the built-in relation-graph toolbar. The important interaction is the fullscreen button, because this demo makes fullscreen include the surrounding wrapper content instead of isolating only the graph canvas.\n\nThe main point is not the tree itself. The main point is how to keep adjacent page UI visible when relation-graph enters fullscreen mode.\n\n## How the Data Is Organized\n\nThe graph data is declared inline inside `initializeGraph()` as one `RGJsonData` object with `rootId: 'a'`, a flat `nodes` array, and a flat `lines` array. It describes a compact branching tree with 16 nodes and 15 links.\n\nBefore loading the data, the code performs one preprocessing step: it assigns `line-${index}` to any line that does not already have an `id`. After that, the dataset is passed directly to `setJsonData()` with no fetch step, adapter layer, or derived view model.\n\nIn a real application, the same structure could represent an approval chain, a component dependency tree, an organizational branch, or any other small relationship set that needs to appear inside a larger page layout.\n\n## How relation-graph Is Used\n\n`index.tsx` wraps the example in `RGProvider`, and `MyGraph.tsx` retrieves the active graph instance through `RGHooks.useGraphInstance()`. A mount-only `useEffect()` runs `initializeGraph()`, then loads the inline dataset and normalizes the viewport with `setJsonData()`, `moveToCenter()`, and `zoomToFit()`.\n\nThe graph itself is configured as a left-to-right tree with `layoutName: 'tree'`, `from: 'left'`, `treeNodeGapH: 120`, and `treeNodeGapV: 10`. Default nodes are rectangular `100x30` blocks, lines use `RGLineShape.StandardCurve`, junction points use `RGJunctionPoint.lr`, and the expand holder position is set to the right.\n\nThe most important option is `fullscreenElementXPath: '#my-fullscreen-content'`. That tells relation-graph's built-in fullscreen action to target the outer wrapper element rather than the graph element alone, so the header and both side panels are pulled into fullscreen together with the graph.\n\nNo custom slots, editing APIs, or custom toolbar logic appear in this example. The local SCSS file only contains empty selector scaffolding, so the visible result comes from the graph options and the surrounding flex layout rather than from heavy style overrides.\n\n## Key Interactions\n\n- Clicking the built-in toolbar fullscreen button switches the entire `#my-fullscreen-content` wrapper into fullscreen, so the header and both side panels stay visible with the graph.\n- Clicking a node triggers `onNodeClick` and logs the node text. It does not change the rendered UI, so node inspection is secondary to the fullscreen lesson.\n\n## Key Code Fragments\n\nThis wrapper shows that the whole demo runs inside one relation-graph provider context.\n\n```tsx\nconst Demo = () => {\n    return (\n        \u003CRGProvider>\n            \u003CMyGraph />\n        \u003C/RGProvider>\n    );\n};\n```\n\nThis options block proves that the graph stays simple while fullscreen is redirected to a larger DOM container.\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\nThis fragment shows that the example builds its `RGJsonData` inline as flat nodes and lines.\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\nThis preprocessing step backfills missing line ids before the dataset is loaded.\n\n```tsx\nmyJsonData.lines.forEach((line, index) => {\n    if (!line.id) {\n        line.id = `line-${index}`;\n    }\n});\n```\n\nThis initialization sequence is the complete graph-instance workflow after the data object is prepared.\n\n```tsx\nawait graphInstance.setJsonData(myJsonData);\ngraphInstance.moveToCenter();\ngraphInstance.zoomToFit();\n```\n\nThis layout fragment shows that the fullscreen target is a page-level wrapper containing instructional content and side panels, not only the `RelationGraph` component.\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## What Makes This Example Distinct\n\nThe comparison data makes the main distinction clear: this example is not primarily about tree layout, imperative graph control, or slot placement. Its distinctive lesson is that relation-graph fullscreen can be redirected to an outer wrapper so surrounding page content remains part of the fullscreen experience.\n\nCompared with `graph-instance-api`, it uses a very similar provider-and-instance setup and a similar tree scaffold, but it does much less with graph state after load. Compared with `adv-hide-2-show`, it is not about delayed mounting inside a hidden container. Compared with `built-in-slots`, the auxiliary UI is ordinary page-level sibling DOM outside `RelationGraph`, not HTML injected into graph-owned view or canvas layers.\n\nThat combination of a plain three-column wrapper, a small left-to-right tree, and `fullscreenElementXPath` makes this example a stronger starting point when the real requirement is \"my graph sits inside a broader page, and fullscreen should include that broader page.\"\n\n## Where Else This Pattern Applies\n\nThis pattern transfers well to architecture viewers with persistent legends, case-review screens with evidence sidebars, org-tree pages with summary panels, and monitoring dashboards with header instructions or filters. In each of those migration scenarios, the graph can stay technically simple while fullscreen still respects the surrounding layout.\n\nIt also applies to documentation and onboarding screens where the graph needs explanatory copy next to it. The reusable idea is to choose one wrapper that contains every UI element that should remain visible after fullscreen begins, then point `fullscreenElementXPath` at that wrapper.\n",false,500,1782615422881]