Keeping a Relation Graph Centered When the Container Resizes

What This Example Builds

This example builds a small viewer for a fixed sample graph inside a square host panel. A selector above the canvas switches the host size between 400, 600, 800, and 1000 pixels, and the graph recenters itself and zooms to fit after the view is resized.

Visually, the page stays minimal: cyan rectangular nodes, teal straight lines, and a red bordered viewport box. The main point is not the sample data. It is the resize-safe embedding pattern: change the outer container size, let RelationGraph report onViewResize, then normalize the viewport again.

How the Data Is Organized

The graph data is declared inline as one RGJsonData object with rootId, nodes, and lines. Nodes use flat records such as { id: 'b1-3', text: 'b1-3' }, and every line also has an explicit id, for example { id: 'l12', from: 'a', to: 'c' }.

There is no preprocessing step before setJsonData(). The component constructs the JSON object once, passes it directly to the graph instance, and keeps resize state separate in currentSize. In a real application, the same structure could represent an organization tree, a dependency graph, or a workflow branch map loaded from an API.

How relation-graph Is Used

The integration is deliberately small. index.tsx wraps the demo with RGProvider, and MyGraph.tsx calls RGHooks.useGraphInstance() to get the active graph instance. The component then loads data with setJsonData(), centers the graph with moveToCenter(), and fits the viewport with zoomToFit().

This example does not configure a custom layout algorithm, edit mode, or any rendering slots. Instead, it relies on a compact options object to define borderless rectangular nodes, straight lines, and border junction points. The RelationGraph component also binds onViewResize, which is the key feature here. When the host panel changes size, the callback recenters and refits the existing graph instead of rebuilding data or relaying out a new model.

Styling is split between graph options and the outer React wrapper. The visible square panel comes from ordinary wrapper markup and inline width and height styles driven by React state. The imported SCSS file contains only empty selector shells, so the example is effectively teaching behavior rather than custom skinning.

Key Interactions

The explicit user interaction is the size selector. Clicking a different value updates currentSize, which changes both the width and height of the square graph host.

The functional interaction happens immediately after that state change. RelationGraph emits onViewResize, and the handler calls moveToCenter() and zoomToFit() so the same graph stays centered and fully visible inside the new viewport size.

The same viewport-normalization pattern is used once during startup. After the inline JSON data is loaded, the component centers and fits the initial view so the first render and later resize events follow the same rule.

Key Code Fragments

This wrapper is what makes the provider-scoped graph instance hook available inside the demo.

<RGProvider>
    <MyGraph />
</RGProvider>

This options object proves that the demo uses relation-graph defaults only for behavior, while visual customization is kept to a few shape and color settings.

const graphOptions: RGOptions = {
    debug: false,
    defaultNodeBorderWidth: 0,
    defaultLineColor: 'rgba(0, 186, 189, 1)',
    defaultNodeColor: 'rgba(0, 206, 209, 1)',
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardStraight,
    defaultJunctionPoint: RGJunctionPoint.border
};

This startup sequence shows that the graph is loaded once from inline JSON and normalized immediately after mount.

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

This handler is the core resize pattern: respond to the graph view resize event by recentering and refitting the current graph.

const onViewResize = () => {
    console.log('onViewResize');
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

This state-driven wrapper proves that resizing comes from surrounding React UI, not from graph data changes.

const [currentSize, setCurrentSize] = useState(400);

<div className="border-2 border-red-600 shadow-xl"
    style={{
        width: currentSize + 'px',
        height: currentSize + 'px',
        position: 'relative'
    }}
>
    <RelationGraph options={graphOptions} onViewResize={onViewResize} />
</div>

What Makes This Example Distinct

Compared with nearby examples such as zoom, layout-tree, customize-fullscreen-action, and graph-instance-api, this one is focused on resize-responsive embedding rather than on zoom presets, relayout, fullscreen composition, or branch control APIs.

Its most distinctive feature is the explicit onViewResize binding. The comparison data marks that callback, the selector-driven square host, and the follow-up moveToCenter() plus zoomToFit() sequence as rare features in the example set. That matters because the graph data and options stay fixed after mount. The second viewport-management path exists only to keep an already loaded graph usable when the container changes size.

The example is also unusually compact for this pattern. It combines provider-based startup, inline RGJsonData, explicit line ids, a state-driven wrapper, and resize-triggered viewport correction without adding slots, editing tools, or domain-specific content. That makes it a cleaner starting point when the real problem is host resizing instead of graph semantics.

Where Else This Pattern Applies

This pattern transfers well to dashboard cards that can be expanded, collapsed, or dragged into different panel sizes. The same event-to-instance flow can keep the graph readable without rebuilding graph data every time the card geometry changes.

It also fits split panes, resizable dialogs, tab panels, and low-code editors where the graph is only one part of a larger screen. In those cases, the important idea is to let outer UI state control container dimensions and use onViewResize to restore a sensible viewport after the surrounding layout changes.