[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:en:partition-graph-with-canvas-zones":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# Partitioning a Fixed-Layout Graph with Canvas Zones\n\n## What This Example Builds\n\nThis example builds a full-screen relation graph that is visually divided into three colored regions. The user sees seven table-like nodes placed at fixed coordinates, six curved links between them, and a floating note window above the graph.\n\nThe graph behaves as a viewer rather than an editor. Users can inspect the arranged scene, use the built-in toolbar, drag the note window, open a shared settings panel, and export the current canvas as an image. The main point is the combination of fixed positioning, table-style node rendering, and canvas-level background partitions.\n\n## How the Data Is Organized\n\nThe graph data is declared inline as one `RGJsonData` object with two practical parts: a `nodes` array and a `lines` array. Each node already contains explicit `x` and `y` coordinates, so the scene is authored as a fixed composition instead of being computed by a tree or force layout.\n\nBefore layout, the code does not transform the dataset. It inserts `graphData.nodes` with `addNodes(...)`, inserts `graphData.lines` with `addLines(...)`, and then runs layout once to let relation-graph build the scene around those fixed positions. In a real system, the same structure could represent grouped database tables, business domains, risk zones, workflow stages, or regional ownership areas.\n\n## How relation-graph Is Used\n\n`RGProvider` wraps the example so both the graph component and the floating helper panel can access the active graph context. Inside `MyGraph`, `RGHooks.useGraphInstance()` is used to load the nodes and lines, run `doLayout()`, then call `moveToCenter()` and `zoomToFit()` so the authored arrangement is immediately visible.\n\nThe graph options are tuned for slot-driven rendering. `layout.layoutName` is set to `fixed`, the default node border and fill are removed, the toolbar is moved to the bottom-right in horizontal mode, and lines are drawn as black standard curves with left-right junction points. The options also enable line text on the path, although this dataset does not actually provide line labels.\n\nTwo slots define the visible presentation. `RGSlotOnNode` replaces the default node body with `MyNodeContent`, which returns HTML tables keyed by `node.id`. `RGSlotOnCanvas` inserts three absolutely positioned translucent rectangles behind the graph to create the blue, green, and yellow zones. Styling is intentionally light: the SCSS mainly defines the table appearance with a white background, collapsed borders, and dark cell lines.\n\nThe floating `DraggableWindow` is a shared helper component rather than logic unique to this example. It uses `RGHooks.useGraphStore()` to read the current interaction settings, `graphInstance.setOptions(...)` to switch wheel and drag behavior, and the image-generation helpers to export the current canvas.\n\n## Key Interactions\n\nThe graph is loaded as a read-only overview, so the important interactions are about inspection rather than editing. Users can pan and zoom the canvas through normal relation-graph behavior and the built-in toolbar.\n\nThe floating note window can be dragged, minimized, and toggled into a settings panel. That panel lets the user switch wheel behavior between scroll, zoom, and none, switch canvas dragging between selection, move, and none, and download the current graph as an image. There are no node editing, edge editing, or dynamic regrouping actions in this demo.\n\n## Key Code Fragments\n\nThis fragment shows that the scene is authored as a fixed-layout graph with explicit coordinates and curved connectors.\n\n```tsx\nconst graphOptions: RGOptions = {\n    defaultNodeBorderWidth: 0,\n    defaultNodeColor: 'transparent',\n    toolBarDirection: 'h',\n    toolBarPositionH: 'right',\n    toolBarPositionV: 'bottom',\n    defaultLineShape: RGLineShape.StandardCurve,\n    defaultJunctionPoint: RGJunctionPoint.lr,\n    layout: {\n        layoutName: 'fixed'\n    }\n};\n```\n\nThis fragment shows that nodes and lines are loaded separately and then centered into view after layout.\n\n```tsx\nconst initializeGraph = async () => {\n    graphInstance.addNodes(graphData.nodes);\n    graphInstance.addLines(graphData.lines);\n    await graphInstance.doLayout();\n    graphInstance.moveToCenter();\n    graphInstance.zoomToFit();\n};\n```\n\nThis fragment shows the two slots that create the example's visible structure: table nodes in front and partition bands behind.\n\n```tsx\n\u003CRelationGraph options={graphOptions}>\n    \u003CRGSlotOnNode>\n        {MyNodeContent}\n    \u003C/RGSlotOnNode>\n    \u003CRGSlotOnCanvas>\n        \u003Cdiv style={{ width: '500px', height: '800px', position: 'absolute', left: '-800px', top: '0px', backgroundColor: 'rgba(15,71,255,0.18)' }} />\n        \u003Cdiv style={{ width: '500px', height: '800px', position: 'absolute', left: '-250px', top: '0px', backgroundColor: 'rgba(116,255,5,0.24)' }} />\n        \u003Cdiv style={{ width: '500px', height: '800px', position: 'absolute', left: '300px', top: '0px', backgroundColor: 'rgba(255,247,9,0.24)' }} />\n    \u003C/RGSlotOnCanvas>\n\u003C/RelationGraph>\n```\n\nThis fragment proves that the node slot is not decorative text replacement; it renders actual table markup for each node identity.\n\n```tsx\n{node.id === 'table-1' && (\n    \u003Ctable className=\"c-data-table\">\n        \u003Ctr>\n            \u003Ctd colSpan={3}>{node.text}\u003C/td>\n        \u003C/tr>\n        \u003Ctr>\n            \u003Cth>Column 1\u003C/th>\n            \u003Cth>Column 2\u003C/th>\n            \u003Cth>Column 3\u003C/th>\n        \u003C/tr>\n        \u003Ctr>\n            \u003Ctd>xxxx\u003C/td>\n            \u003Ctd>xxxx\u003C/td>\n            \u003Ctd>xxxx\u003C/td>\n        \u003C/tr>\n    \u003C/table>\n)}\n```\n\n## What Makes This Example Distinct\n\nThe comparison data shows that this example is not distinctive because it merely uses slots or a fixed layout. Other examples such as `graph-offset`, `element-line-edit`, and `node-style4` also cover parts of that space. What stands out here is the specific combination: a compact fixed-position dataset, table-style node bodies rendered through `RGSlotOnNode`, and three fixed translucent partitions rendered through `RGSlotOnCanvas`.\n\nCompared with `canvas-bg2`, this example is not about wrapper-class theme switching or restyling a tree. It uses slot-mounted overlays to create semantic regions inside one already arranged graph. Compared with `element-line-edit`, the slots are passive presentation layers rather than interactive endpoints. Compared with `graph-offset`, the canvas overlay is tied to actual graph grouping instead of an empty measurement workspace. Compared with `node-style4`, the node slot is part of a zoned scene composition rather than a single global node skin.\n\nThat makes this example a strong starting point when the requirement is spatial grouping in a viewer-style graph. It stays simpler than an editor, map composition, or true table-relationship demo while still showing how multiple presentation layers can work together.\n\n## Where Else This Pattern Applies\n\nThis pattern transfers well to dashboards where one graph must be divided into business regions, lifecycle stages, risk classes, or operational territories without turning the graph into a full editor. The same approach can also support architecture overviews where systems are grouped by environment, ownership boundary, or deployment zone.\n\nIt is also useful for schema-like overviews that need table-shaped nodes without implementing true foreign-key modeling. In those scenarios, the canvas slot can define the high-level grouping, while the node slot can present richer HTML summaries for each entity.\n",false,500,1782615431277]