Custom Fullscreen Target Element

Demonstrates how to customize the fullscreen functionality to include additional page elements beyond the graph canvas using the fullscreenElementXPath option.

Custom Fullscreen Target Element

Functional Overview

This example demonstrates how to customize the fullscreen functionality to include additional page elements beyond the graph canvas. By using the fullscreenElementXPath option, you can specify a larger container element as the fullscreen target.

Implementation of Key Features

Fullscreen Target Configuration

Use the fullscreenElementXPath option to specify which DOM element should become fullscreen when the toolbar button is clicked:

const graphOptions: RGOptions = {
    fullscreenElementXPath: '#my-fullscreen-content',
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 120,
        treeNodeGapV: 10
    }
};

Container Element Setup

Wrap the graph and additional elements in a container with the matching ID:

<div className="my-graph bg-white" id="my-fullscreen-content">
    <div className="flex flex-col" style={{ height: '100vh' }}>
        <div className="border-b">
            {/* Header content with instructions */}
        </div>
        <div className="grow flex">
            <div className="bg-pink-200 w-36">Left</div>
            <RelationGraph options={graphOptions} onNodeClick={onNodeClick} />
            <div className="bg-blue-200 w-36">Right</div>
        </div>
    </div>
</div>

Use Case Explanation

The example includes informational text explaining the feature:

• By default, fullscreen only affects the relation-graph component itself
• This can cause surrounding content to become invisible
• Using fullscreenElementXPath solves this by including all relevant content

<div className="text-xs">
    <div className="font-bold">Customize the fullscreen display content using the fullscreenElementXPath option.</div>
    <div>"This can resolve the issue of 'Why does my content become invisible after going fullscreen?'"</div>
    <div className="font-bold">This example specifies a larger fullscreen target. Give it a try.</div>
</div>

Creative Use Cases

• Dashboard Layouts: Include sidebars, headers, and toolbars in fullscreen mode
• Presentations: Show explanatory content alongside the graph in fullscreen
• Documentation: Display help text or instructions when presenting graphs
• Multi-Panel Views: Keep related panels visible during fullscreen
• Embedded Graphs: Maintain context with surrounding interface elements