Built-in Line Styles and Animations

Showcase of built-in line dash patterns and animations using dashType and animation properties.

Built-in Line Styles and Animations

Functional Overview

This demo showcases relation-graph’s built-in line dash patterns and animations. It provides a quick reference for using the dashType and animation properties to create visually distinct connection styles.

Implementation of Key Features

1. Dash Type Configuration

Use different dash patterns for lines:

lines: [
    { id: 'line-1', from: 'a', to: 'b', text: 'dataType=1', dashType: 1 },
    { id: 'line-2', from: 'b', to: 'b1', text: 'dataType=2', dashType: 2 },
    { id: 'line-3', from: 'b', to: 'b2', text: 'dataType=3', dashType: 3 },
    { id: 'line-4', from: 'b2', to: 'b2-1', text: 'dataType=4', dashType: 4 },
    { id: 'line-5', from: 'b2', to: 'b2-2', text: 'Normal' }  // No dashType
]

2. Animation Effects

Apply built-in animations to lines:

lines: [
    { id: 'line-6', from: 'a', to: 'c', text: 'animation=1', animation: 1 },
    { id: 'line-7', from: 'c', to: 'c1', text: 'animation=2', animation: 2 },
    { id: 'line-8', from: 'c', to: 'c2', text: 'animation=3', animation: 3 },
    { id: 'line-9', from: 'c', to: 'c3', text: 'animation=4', animation: 4 }
]

3. Tree Layout Configuration

Configure horizontal tree layout for hierarchical display:

layout: {
    layoutName: 'tree',
    from: 'left',
    treeNodeGapH: 310,
    treeNodeGapV: 70
}

4. Text on Path

Enable text to follow curved lines:

defaultLineTextOnPath: true

5. Icon-Based Node Rendering

Use icons in node slots:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        const iconName = node.data?.icon || 'default';
        const IconComponent = IconMapper[iconName] || CircleDot;
        return (
            <div className="my-icon-node">
                <IconComponent size={40} />
            </div>
        );
    }}
</RGSlotOnNode>

Creative Use Cases

• Status Indication: Use dashed lines for tentative/proposed connections
• Data Flow Visualization: Animate lines to show direction and activity
• Network Traffic: Show active vs. inactive connections with animations
• Process States: Different line styles for different process states
• Security Levels: Use line styles to indicate security classifications
• Temporal Relationships: Animated lines for time-based relationships