Hugging Face's logo

Spaces:
dataera2013
/
podcraft_web_app
Sleeping

App Files Community
podcraft_web_app
File size: 2,882 Bytes 
fd52f31
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
import React from 'react';
import {
    getSmoothStepPath,
    EdgeText
} from 'reactflow';

// Custom animated edge component with contextual styling
const CustomEdge = (props) => {
    const {
        id,
        sourceX,
        sourceY,
        targetX,
        targetY,
        sourcePosition,
        targetPosition,
        style = {},
        markerEnd,
        data,
        label,
        labelStyle,
        labelShowBg = true
    } = props;

    // Get edge path based on the edge type (default to smoothstep)
    const [edgePath, labelX, labelY] = getSmoothStepPath({
        sourceX,
        sourceY,
        sourcePosition,
        targetX,
        targetY,
        targetPosition,
        borderRadius: 20, // Add rounded corners to the paths
    });

    // Determine edge style based on source node type
    const sourceType = data?.sourceType || 'default';

    // Default style if nothing specific is provided
    const edgeStyle = {
        strokeWidth: 3, // Increase stroke width from default
        ...style,
    };

    return (
        <>
            {/* Main path */}
            <path
                id={id}
                className={`react-flow__edge-path animated source-${sourceType}`}
                d={edgePath}
                style={edgeStyle}
                markerEnd={markerEnd}
                strokeDasharray="6 3" // Improved dash pattern
                strokeLinecap="round"
                filter="drop-shadow(0px 1px 2px rgba(0,0,0,0.3))" // Add subtle shadow
            />

            {/* Glow effect for the path */}
            <path
                d={edgePath}
                className={`edge-glow source-${sourceType}`}
                style={{
                    ...edgeStyle,
                    stroke: style.stroke,
                    strokeWidth: 10,
                    strokeOpacity: 0.15,
                    filter: 'blur(3px)',
                    pointerEvents: 'none', // Ensure this doesn't interfere with clicks
                }}
            />

            {/* Edge label */}
            {label && (
                <EdgeText
                    x={labelX}
                    y={labelY}
                    label={label}
                    labelStyle={{
                        fontWeight: 500,
                        fill: 'white',
                        fontSize: 12,
                        ...labelStyle,
                    }}
                    labelShowBg={labelShowBg}
                    labelBgStyle={{
                        fill: '#1E1E28',
                        opacity: 0.8,
                        rx: 4,
                        ry: 4,
                    }}
                    labelBgPadding={[4, 6]}
                />
            )}
        </>
    );
};

// Define edge types for ReactFlow
export const customEdgeTypes = {
    custom: CustomEdge,
};

export default CustomEdge;