[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:en:connect-lines-to-node-content-targets":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# Connect Curved Lines to Exact Targets Inside Table Nodes\n\n## What This Example Builds\n\nThis example builds a small fixed-position relationship view made of four rectangular panels. Each panel is rendered as custom table markup instead of a default graph node, and the visible connectors land on specific headers or cells inside those tables rather than on the outer node border.\n\nWhat the user sees is a full-height canvas with gray table cards, dark title bars, bright pink anchor chips, and blue or pink curved lines crossing between the cards. The user can click nodes or lines to inspect the bound graph objects in the console, but the main point of the demo is visual: it shows how to expose precise connection targets inside node content.\n\n## How the Data Is Organized\n\nThe graph data is assembled inline inside `initializeGraph()`. It defines `rootId: 'a'`, four rectangle nodes with explicit `x` and `y` coordinates, an empty `lines` array, and ten `fakeLines`. Each fake line uses `from` and `to` ids such as `a-r2-c2` or `b-r1-c1`, and those ids are matched to `RGConnectTarget` components rendered inside the node slot content.\n\nThere is no separate preprocessing pass before `setJsonData()`, but there is a deliberate naming convention: the fake-line endpoints and the slot-rendered target ids must stay in sync. In a real application, the same pattern could represent schema columns, form fields, approval checkpoints, data lineage fields, account mappings, or any structured panel where connections need to land on exact internal rows or headers.\n\n## How relation-graph Is Used\n\n`RGProvider` wraps the example so `MyGraph` can read the live graph instance with `RGHooks.useGraphInstance()`. The graph runs in `fixed` layout mode, so relation-graph does not calculate placement; the four nodes already carry their coordinates in the inline `RGJsonData`. The options stay minimal: `debug` is disabled, and `defaultJunctionPoint` is set to `RGJunctionPoint.lr`.\n\nThe main integration point is `RGSlotOnNode`. Instead of accepting the default node body, the example branches on `node.id` and renders four different table panels. Inside those panels, selected headers and cells are wrapped in `RGConnectTarget`, which registers named HTML targets that the `fakeLines` can attach to. That is the core technique: the graph still manages line routing and viewport behavior, but the actual endpoints are embedded inside custom node DOM.\n\nThe graph instance API handles startup. On mount, `initializeGraph()` builds the inline payload, calls `setJsonData(...)`, then recenters and fits the view with `moveToCenter()` and `zoomToFit()`. There are no editor tools, drag handles, overlay slots, or runtime data mutations. Styling is lightweight and local: `.c-data-table` adds white table backgrounds, dark borders, and rounded pink chips so the connectable fragments are visually obvious.\n\n## Key Interactions\n\n- Clicking a node triggers `onNodeClick`, which logs the selected `RGNode` object for inspection.\n- Clicking a curve triggers `onLineClick`, which logs the selected `RGLine` object without changing graph state.\n- The main interaction pattern is visual inspection: users trace which specific header or cell chip is connected to which target in another panel.\n\n## Key Code Fragments\n\nThis block shows that the graph is intentionally configured as a fixed-position viewer with left-right junction defaults.\n\n```tsx\nconst graphOptions: RGOptions = {\n    debug: false,\n    defaultJunctionPoint: RGJunctionPoint.lr,\n    layout: {\n        layoutName: 'fixed'\n    }\n};\n```\n\nThis block shows the inline dataset using four positioned nodes, no normal lines, and fake lines instead.\n\n```tsx\nconst myJsonData: RGJsonData = {\n    rootId: 'a',\n    nodes: [\n        { id: 'a', text: 'A区内配矿', nodeShape: RGNodeShape.rect, x: -500, y: -200 },\n        { id: 'b', text: 'B区内洗选贸易企业', nodeShape: RGNodeShape.rect, x: 0, y: -400 },\n        { id: 'c', text: 'C区内电场焦化企业', nodeShape: RGNodeShape.rect, x: 500, y: -200 },\n        { id: 'd', text: 'D区外企业', nodeShape: RGNodeShape.rect, x: 0, y: 0 }\n    ],\n    lines: [],\n    fakeLines: [\n```\n\nThis block shows the endpoint-mapping pattern: fake lines reference the same ids that will later be registered inside node content.\n\n```tsx\nfakeLines: [\n    { id: 'fl-1', from: 'a-r2-c2', to: 'b-r1-c1', text: '', lineShape: RGLineShape.StandardCurve, color: 'rgba(29,169,245,0.76)', lineWidth: 3 },\n    { id: 'fl-2', from: 'a-r2-c2', to: 'b-r2-c1', text: '', lineShape: RGLineShape.StandardCurve, color: 'rgba(29,169,245,0.76)', lineWidth: 3 },\n    { id: 'fl-3', from: 'a-r3-c2', to: 'b-r3-c1', text: '', lineShape: RGLineShape.StandardCurve, color: '#e85f84', lineWidth: 3 },\n    { id: 'fl-4', from: 'a-r3-c2', to: 'd-r2-c1', text: '', lineShape: RGLineShape.StandardCurve, color: '#e85f84', lineWidth: 3 },\n    { id: 'fl-5', from: 'a-r3-c2', to: 'c-r4-c1', text: '', lineShape: RGLineShape.Curve5, color: '#e85f84', lineWidth: 3 },\n    // ...\n]\n```\n\nThis block shows the mount-time initialization flow through the graph instance API.\n\n```tsx\nawait graphInstance.setJsonData(myJsonData);\ngraphInstance.moveToCenter();\ngraphInstance.zoomToFit();\n\nuseEffect(() => {\n    initializeGraph();\n}, []);\n```\n\nThis block shows relation-graph receiving the click handlers and the custom node slot.\n\n```tsx\n\u003CRelationGraph\n    options={graphOptions}\n    onNodeClick={onNodeClick}\n    onLineClick={onLineClick}\n>\n    \u003CRGSlotOnNode>\n        {({ node }: RGNodeSlotProps) => (\n```\n\nThis block shows a real node-content anchor: the visible chip is wrapped in `RGConnectTarget`, so a fake line can terminate on that exact table cell.\n\n```tsx\n\u003Ctd>\n    \u003CRGConnectTarget targetId=\"a-r2-c2\">\n        \u003Cdiv>a-r2-c2\u003C/div>\n    \u003C/RGConnectTarget>\n\u003C/td>\n```\n\nThis block shows the local styling that makes the target chips look like explicit connection points.\n\n```scss\n.c-data-table {\n    width: 100%;\n    background-color: #ffffff;\n    td, th {\n        border: 1px solid #4a5568;\n        color: #000000;\n        padding: 5px;\n    }\n    td div, th div {\n        background-color: #e85f84;\n        padding: 2px 10px;\n        border-radius: 5px;\n        color: #fff;\n    }\n}\n```\n\n## What Makes This Example Distinct\n\nThe comparison data identifies this example as a compact technique reference for node-internal anchor wiring. Its distinctive feature is not just that it customizes node content, but that it spreads named `RGConnectTarget` endpoints across both table headers and body cells, then connects them with curved `fakeLines` inside one small fixed-layout viewer.\n\nCompared with [`table-relationship`](/Users/gaokui/WebstormProjects/relation-graph-site-v3/site-markdown-contents/markdown-files/en/examples/database-foreign-key-diagram.md.md), this example is lighter and more generic. It keeps only four hand-authored panel templates, avoids extra utility windows, and mixes different target positions instead of repeating one schema-card pattern. Compared with [`advanced-line-usage`](/Users/gaokui/WebstormProjects/relation-graph-site-v3/site-markdown-contents/markdown-files/en/examples/built-in-line-rendering-options.md.md), the lesson is not about line metadata or arrow variations on default nodes; it is about attaching curves to exact DOM positions inside slot-rendered node bodies. Compared with [`node-menu-2`](/Users/gaokui/WebstormProjects/relation-graph-site-v3/site-markdown-contents/markdown-files/en/examples/node-context-menu-via-slots.md.md) and [`node-tips`](/Users/gaokui/WebstormProjects/relation-graph-site-v3/site-markdown-contents/markdown-files/en/examples/node-hover-tooltip.md.md), the slot DOM is structural rather than overlay-oriented: it exists so lines can land on internal targets, not so menus or tips can appear near the pointer.\n\nThat combination of `fixed` layout, per-node table JSX, mixed header-and-cell targets, and color-coded curved fake lines makes this a better starting point than nearby examples when the real problem is precise endpoint placement inside complex node content.\n\n## Where Else This Pattern Applies\n\nThis pattern applies to schema browsers, field-mapping tools, policy coverage matrices, process handoff boards, bill-of-material tables, and data lineage views where a connection should land on a specific row, column, or label inside a structured card. It is also useful when migrating an existing HTML panel design into relation-graph without flattening every relationship down to one connection point per node.\n\nThe same approach can be extended beyond tables. Any custom node body that can render stable internal fragments with predictable ids can expose those fragments as `RGConnectTarget`s and let relation-graph route visible curves to them.\n",false,500,1782615413648]