[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:en:graph-resize":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# Keeping a Relation Graph Centered When the Container Resizes\n\n## What This Example Builds\n\nThis 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.\n\nVisually, 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.\n\n## How the Data Is Organized\n\nThe 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' }`.\n\nThere 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.\n\n## How relation-graph Is Used\n\nThe 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()`.\n\nThis 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.\n\nStyling 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.\n\n## Key Interactions\n\nThe 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.\n\nThe 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.\n\nThe 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.\n\n## Key Code Fragments\n\nThis wrapper is what makes the provider-scoped graph instance hook available inside the demo.\n\n```tsx\n\u003CRGProvider>\n    \u003CMyGraph />\n\u003C/RGProvider>\n```\n\nThis 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.\n\n```tsx\nconst graphOptions: RGOptions = {\n    debug: false,\n    defaultNodeBorderWidth: 0,\n    defaultLineColor: 'rgba(0, 186, 189, 1)',\n    defaultNodeColor: 'rgba(0, 206, 209, 1)',\n    defaultNodeShape: RGNodeShape.rect,\n    defaultLineShape: RGLineShape.StandardStraight,\n    defaultJunctionPoint: RGJunctionPoint.border\n};\n```\n\nThis startup sequence shows that the graph is loaded once from inline JSON and normalized immediately after mount.\n\n```tsx\nawait graphInstance.setJsonData(myJsonData);\ngraphInstance.moveToCenter();\ngraphInstance.zoomToFit();\n```\n\nThis handler is the core resize pattern: respond to the graph view resize event by recentering and refitting the current graph.\n\n```tsx\nconst onViewResize = () => {\n    console.log('onViewResize');\n    graphInstance.moveToCenter();\n    graphInstance.zoomToFit();\n};\n```\n\nThis state-driven wrapper proves that resizing comes from surrounding React UI, not from graph data changes.\n\n```tsx\nconst [currentSize, setCurrentSize] = useState(400);\n\n\u003Cdiv className=\"border-2 border-red-600 shadow-xl\"\n    style={{\n        width: currentSize + 'px',\n        height: currentSize + 'px',\n        position: 'relative'\n    }}\n>\n    \u003CRelationGraph options={graphOptions} onViewResize={onViewResize} />\n\u003C/div>\n```\n\n## What Makes This Example Distinct\n\nCompared 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.\n\nIts 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.\n\nThe 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.\n\n## Where Else This Pattern Applies\n\nThis 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.\n\nIt 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.\n",false,500,1782615426977]