Checked-Line Style and Animation Presets

What This Example Builds

This 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.

The 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.

How the Data Is Organized

The 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.

There 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.

How relation-graph Is Used

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.

The 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.

Node 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.

The 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.

Key Interactions

• 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.
• The “Line style when checked” selector switches among four checked-line style wrappers without rebuilding the graph data.
• The “Line animation when checked” selector switches among four animation wrappers that only affect the currently checked line.
• The floating helper window can be dragged, minimized, and toggled into a settings panel.
• The settings panel changes wheel and drag behavior at runtime and can export the current graph view as an image.

Key Code Fragments

This 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.

const graphOptions: RGOptions = {
    defaultLineColor: 'rgba(255, 255, 255, 0.6)',
    defaultNodeColor: 'transparent',
    defaultNodeBorderWidth: 0,
    checkedItemBackgroundColor: 'rgba(255,255,255,0.3)',
    defaultNodeShape: RGNodeShape.circle,
    toolBarDirection: 'h',
    toolBarPositionH: 'right',
    toolBarPositionV: 'bottom',
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultLineTextOnPath: true,
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 310,
        treeNodeGapV: 70
    }
};

This 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.

await graphInstance.setJsonData(myJsonData);
graphInstance.moveToCenter();
graphInstance.zoomToFit();
graphInstance.setCheckedLine('line-1');

This render fragment shows that runtime switching happens through wrapper classes and local state, not through getLines() or updateLine() calls.

<div className={`my-graph my-line-style-${lineStyle} my-line-animation-${lineAnimation}`} style={{ height: '100vh' }}>
    <DraggableWindow width={450}>
        <SimpleUISelect
            data={[
                { value: '', text: 'Default' },
                { value: '1', text: 'Style 1' },
                { value: '2', text: 'Style 2' }
            ]}
            onChange={(newValue: string) => setLineStyle(newValue)}
            currentValue={lineStyle}
        />
    </DraggableWindow>

This node slot keeps the graph structure simple while replacing the default node body with an icon selected from node.data.icon.

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        const iconName = node.data?.icon || 'default';
        const IconComponent = IconMapper[iconName] || CircleDot;
        return (
            <div className="my-icon-node h-20 w-20 text-white rounded flex place-items-center justify-center hover:bg-white hover:bg-opacity-40">
                <IconComponent color="#ffffff" size={60} strokeWidth={1.5} />
            </div>
        );
    }}
</RGSlotOnNode>

This SCSS fragment is the key proof that the presets are scoped to checked-line layers only.

.my-line-style-1 {
    .relation-graph {
        .rg-line-peel.rg-line-checked {
            .rg-line-bg {
                stroke: rgba(244, 60, 229, 0.68);
                stroke-width: calc(var(--rg-line-width) + 6px);
                stroke-dasharray: 20, 20, 20;
            }

            .rg-line {
                stroke-dasharray: 20, 20, 20;
            }
        }
    }
}

This shared settings code shows how the helper window changes viewer behavior and supports export through graph-instance APIs.

const { options } = RGHooks.useGraphStore();
const dragMode = options.dragEventAction;
const wheelMode = options.wheelEventAction;

<SettingRow
    label="Wheel Event:"
    options={[
        { label: 'Scroll', value: 'scroll' },
        { label: 'Zoom', value: 'zoom' },
        { label: 'None', value: 'none' }
    ]}
    value={wheelMode}
    onChange={(newValue: string) => { graphInstance.setOptions({ wheelEventAction: newValue }); }}
/>

What Makes This Example Distinct

The 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.

That 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.

The 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.

Where Else This Pattern Applies

• Dependency or topology viewers where one currently inspected connection should stand out without retheming every edge.
• Workflow or approval diagrams that need stronger visual feedback for the active transition while leaving the rest of the process map neutral.
• Investigation, monitoring, or routing tools where operators follow one highlighted path at a time and need interchangeable emphasis presets for demos or product tuning.
• Design-system reference pages that teach teams how far checked-state feedback can go with native relation-graph rendering plus CSS alone.