javascriptcssreactjsinline-stylesreact-flow

Custom animated Reactflow Connection Lines


What i want is to create a custom animated connection lines in reactflow. i dont want the one provided by reactflow that is a dashed line when given the props anitmated: true

what i know is we can give them custom styling using

setEdges((eds) => [
                        ...eds,
                        {
                            source: 2,
                            targetHandle: 'bottom',
                            target: 1,
                            sourceHandle: 'top',
                            id: 1,
                            type: 'smoothstep',
                            style: { stroke: `${css}`, strokeWidth: 4 },
                        },
                    ]);

i want to create something like this using custom css

enter image description here


Solution

  • I created a custom Edge with the following code. Posting here incase someone else is looking for this answer

    import { useState } from 'react';
    import { getBezierPath, BaseEdge, EdgeLabelRenderer } from 'reactflow';
    
    export default function NormalEdge({
        id,
        sourceX,
        sourceY,
        targetX,
        targetY,
        sourcePosition,
        targetPosition,
        data,
        label,
        markerEnd,
    }) {
        const [edgePath, labelX, labelY] = getBezierPath({
            sourceX,
            sourceY,
            sourcePosition,
            targetX,
            targetY,
            targetPosition,
        });
    
        return (
            <>
                <BaseEdge path={edgePath} markerEnd={markerEnd} style={{ stroke: `${data.color1}`, strokeWidth: 4 }} />
    
                <EdgeLabelRenderer>
                    <div
                        style={{
                            position: 'absolute',
                            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
                            fontSize: 12,
                            backgroundColor: '#EEF0F6',
                            fill: '#EEF0F6',
                            pointerEvents: 'all',
                            padding: '4px',
                        }}
                        className="nodrag nopan"
                    >
                        {label}
                    </div>
                </EdgeLabelRenderer>
    
                <circle
                    style={{ filter: `drop-shadow(3px 3px 5px ${data.color1}` }}
                    r="4"
                    fill={`${data.color1}`}
                    className="circle"
                >
                    <animateMotion dur="6s" repeatCount="indefinite" path={edgePath} />
                </circle>
            </>
        );
    }