Custom CSS Line Styles and Animations

Demonstrates custom CSS classes for styling checked/selected lines with multiple predefined styles and animations.

Custom CSS Line Styles and Animations

Functional Overview

This demo demonstrates how to use custom CSS classes to style lines when they are checked/selected. It provides multiple predefined styles and animations that can be applied dynamically.

Implementation of Key Features

1. CSS Class-Based Styling

Apply styles using CSS classes:

<div className={`my-graph my-line-style-${lineStyle} my-line-animation-${lineAnimation}`}>
    <RelationGraph options={graphOptions} />
</div>

2. Style Selection UI

Provide interface for choosing line styles:

<SimpleUISelect
    data={[
        { value: '', text: 'Default' },
        { value: '1', text: 'Style 1' },
        { value: '2', text: 'Style 2' },
        { value: '3', text: 'Style 3' },
        { value: '4', text: 'Style 4' }
    ]}
    onChange={(newValue: string) => setLineStyle(newValue)}
    currentValue={lineStyle}
/>

3. Animation Selection

Choose from predefined animations:

<SimpleUISelect
    data={[
        { value: '', text: 'None' },
        { value: '1', text: 'Animation 1' },
        { value: '2', text: 'Animation 2' },
        { value: '3', text: 'Animation 3' },
        { value: '4', text: 'Animation 4' }
    ]}
    onChange={(newValue: string) => setLineAnimation(newValue)}
    currentValue={lineAnimation}
/>

4. CSS Animation Definitions

Define animations in SCSS:

// Example: Flow animation
.my-line-animation-1 .rel-line-checked {
    stroke-dasharray: 10;
    animation: dash-flow 1s linear infinite;
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -20;
    }
}

// Example: Pulse animation
.my-line-animation-2 .rel-line-checked {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; stroke-width: 3px; }
    50% { opacity: 0.5; stroke-width: 5px; }
}

5. Checked Line State

Set initially checked line:

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

Creative Use Cases

• Active Route Highlighting: Show currently selected routes in navigation
• Data Flow Animation: Animate active data paths in system diagrams
• Alert States: Use pulsing animations for critical connections
• Progress Indication: Show flow direction in process diagrams
• Interactive Prototypes: Create engaging demo interfaces
• Status Monitoring: Visual indicators for system health