[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:en:checked-line-effects-presets":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# Checked-Line Style and Animation Presets\n\n## What This Example Builds\n\nThis example builds a small left-to-right tree viewer whose main lesson is selected-link emphasis. The graph loads a fixed icon-based tree, immediately marks one edge as checked, and lets the user switch that checked edge among four style presets and four animation presets from a floating control window.\n\nThe visible result is deliberately scoped. Default lines keep their normal appearance, while the active checked line gains a wider halo, dash pattern, text-color override, or animation effect depending on the chosen preset. Around that core behavior, the demo also includes a green gradient canvas, a translucent built-in toolbar, and a shared helper window for canvas settings and image export.\n\n## How the Data Is Organized\n\nThe graph data is assembled inline inside `initializeGraph()` as one `RGJsonData` object with `rootId`, a flat `nodes` array, and a flat `lines` array. Each node stores an icon key in `node.data.icon`, and each line only needs `id`, `from`, `to`, and `text`.\n\nThere is no preprocessing step before `setJsonData()`. The dataset is passed directly into relation-graph, then the graph instance centers the view, fits the viewport, and marks `line-1` as checked after load. In a real application, the same shape could represent service dependencies, approval transitions, route segments, or any other relationship set where one active connection needs stronger feedback than the rest.\n\n## How relation-graph Is Used\n\n`index.tsx` wraps the demo in `RGProvider`, and `MyGraph.tsx` uses `RGHooks.useGraphInstance()` as the main control surface. The graph is configured as a left-to-right tree with wide spacing, curved links, left-right junction points, and `defaultLineTextOnPath: true`, so the checked-line effects remain easy to compare without replacing the native renderer.\n\nThe example does not use a custom line slot. Instead, it keeps relation-graph's built-in line layers and targets the checked state from SCSS. Local React state only changes the outer wrapper classes `my-line-style-*` and `my-line-animation-*`; the stylesheet then scopes its overrides to `.rg-line-peel.rg-line-checked`. That is the core implementation idea: checked-line presentation is driven by container classes plus built-in checked-state selectors, not by per-line SVG rewriting.\n\nNode rendering is customized through `RGSlotOnNode`. The slot maps `node.data.icon` to Lucide components and renders each node as a large circular icon badge, which keeps the small tree readable while the line state stays the main lesson.\n\nThe floating helper window comes from the shared `DraggableWindow` component. That helper uses `RGHooks.useGraphStore()` to read the current wheel and drag settings, `graphInstance.setOptions()` to change those settings at runtime, and `prepareForImageGeneration()` plus `restoreAfterImageGeneration()` to export the graph as an image. The settings and export actions are secondary utilities, but they are part of the delivered interaction surface.\n\n## Key Interactions\n\n- On mount, the graph loads its static dataset, centers the camera, fits the content to the viewport, and prechecks `line-1` so the style presets have an immediate visible target.\n- The \"Line style when checked\" selector switches among four checked-line style wrappers without rebuilding the graph data.\n- The \"Line animation when checked\" selector switches among four animation wrappers that only affect the currently checked line.\n- The floating helper window can be dragged, minimized, and toggled into a settings panel.\n- The settings panel changes wheel and drag behavior at runtime and can export the current graph view as an image.\n\n## Key Code Fragments\n\nThis options block shows that the demo stays on relation-graph's native tree and line renderer while tuning the layout and default checked-item token.\n\n```tsx\nconst graphOptions: RGOptions = {\n    defaultLineColor: 'rgba(255, 255, 255, 0.6)',\n    defaultNodeColor: 'transparent',\n    defaultNodeBorderWidth: 0,\n    checkedItemBackgroundColor: 'rgba(255,255,255,0.3)',\n    defaultNodeShape: RGNodeShape.circle,\n    toolBarDirection: 'h',\n    toolBarPositionH: 'right',\n    toolBarPositionV: 'bottom',\n    defaultLineShape: RGLineShape.StandardCurve,\n    defaultJunctionPoint: RGJunctionPoint.lr,\n    defaultLineTextOnPath: true,\n    layout: {\n        layoutName: 'tree',\n        from: 'left',\n        treeNodeGapH: 310,\n        treeNodeGapV: 70\n    }\n};\n```\n\nThis initialization code proves that the example does not switch the checked target interactively. It loads a fixed dataset and programmatically checks `line-1` after the graph is ready.\n\n```tsx\nawait graphInstance.setJsonData(myJsonData);\ngraphInstance.moveToCenter();\ngraphInstance.zoomToFit();\ngraphInstance.setCheckedLine('line-1');\n```\n\nThis render fragment shows that runtime switching happens through wrapper classes and local state, not through `getLines()` or `updateLine()` calls.\n\n```tsx\n\u003Cdiv className={`my-graph my-line-style-${lineStyle} my-line-animation-${lineAnimation}`} style={{ height: '100vh' }}>\n    \u003CDraggableWindow width={450}>\n        \u003CSimpleUISelect\n            data={[\n                { value: '', text: 'Default' },\n                { value: '1', text: 'Style 1' },\n                { value: '2', text: 'Style 2' }\n            ]}\n            onChange={(newValue: string) => setLineStyle(newValue)}\n            currentValue={lineStyle}\n        />\n    \u003C/DraggableWindow>\n```\n\nThis node slot keeps the graph structure simple while replacing the default node body with an icon selected from `node.data.icon`.\n\n```tsx\n\u003CRGSlotOnNode>\n    {({ node }: RGNodeSlotProps) => {\n        const iconName = node.data?.icon || 'default';\n        const IconComponent = IconMapper[iconName] || CircleDot;\n        return (\n            \u003Cdiv className=\"my-icon-node h-20 w-20 text-white rounded flex place-items-center justify-center hover:bg-white hover:bg-opacity-40\">\n                \u003CIconComponent color=\"#ffffff\" size={60} strokeWidth={1.5} />\n            \u003C/div>\n        );\n    }}\n\u003C/RGSlotOnNode>\n```\n\nThis SCSS fragment is the key proof that the presets are scoped to checked-line layers only.\n\n```scss\n.my-line-style-1 {\n    .relation-graph {\n        .rg-line-peel.rg-line-checked {\n            .rg-line-bg {\n                stroke: rgba(244, 60, 229, 0.68);\n                stroke-width: calc(var(--rg-line-width) + 6px);\n                stroke-dasharray: 20, 20, 20;\n            }\n\n            .rg-line {\n                stroke-dasharray: 20, 20, 20;\n            }\n        }\n    }\n}\n```\n\nThis shared settings code shows how the helper window changes viewer behavior and supports export through graph-instance APIs.\n\n```tsx\nconst { options } = RGHooks.useGraphStore();\nconst dragMode = options.dragEventAction;\nconst wheelMode = options.wheelEventAction;\n\n\u003CSettingRow\n    label=\"Wheel Event:\"\n    options={[\n        { label: 'Scroll', value: 'scroll' },\n        { label: 'Zoom', value: 'zoom' },\n        { label: 'None', value: 'none' }\n    ]}\n    value={wheelMode}\n    onChange={(newValue: string) => { graphInstance.setOptions({ wheelEventAction: newValue }); }}\n/>\n```\n\n## What Makes This Example Distinct\n\nThe comparison data puts this example near `line-style1`, `custom-line-style`, `custom-line-animation`, and `customer-line1`, but its emphasis is narrower than those neighbors. Its most distinctive trait is that it prechecks one edge with `setCheckedLine('line-1')` and then layers style and animation presets onto that checked edge only. The rest of the graph stays on the default renderer.\n\nThat makes it meaningfully different from `line-style1`, which shows built-in line variants side by side in the dataset itself. It is also different from `custom-line-style` and `custom-line-animation`, which batch-update all rendered lines or push further into whole-graph effect galleries. Compared with `customer-line1`, this example keeps relation-graph's built-in edge geometry instead of moving to a custom line slot.\n\nThe rarity and comparison records also mark the combination as uncommon: a small left-to-right icon tree, a gradient showcase canvas, a checked-node background override, and two selector groups that separately restyle and animate only the active checked line.\n\n## Where Else This Pattern Applies\n\n- Dependency or topology viewers where one currently inspected connection should stand out without retheming every edge.\n- Workflow or approval diagrams that need stronger visual feedback for the active transition while leaving the rest of the process map neutral.\n- Investigation, monitoring, or routing tools where operators follow one highlighted path at a time and need interchangeable emphasis presets for demos or product tuning.\n- Design-system reference pages that teach teams how far checked-state feedback can go with native relation-graph rendering plus CSS alone.\n",false,500,1782615376748]