|
| 1 | +import { memo } from "react"; |
| 2 | +import React from "react"; |
| 3 | +import { BaseEdge, Edge, EdgeProps, EdgeText, getBezierPath, getEdgeCenter } from "@xyflow/react"; |
| 4 | + |
| 5 | +import { IntentTypes } from "../../../common/Intent"; |
| 6 | +import { nodeContentUtils } from "../nodes/NodeContent"; |
| 7 | +import { NodeHighlightColor } from "../nodes/sharedTypes"; |
| 8 | + |
| 9 | +import { edgeDefaultUtils } from "./EdgeDefault"; |
| 10 | + |
| 11 | +export type EdgeDefaultV12DataProps = Record<string, unknown> & { |
| 12 | + /** |
| 13 | + * Overwrites the default style how the edge stroke is displayed. |
| 14 | + */ |
| 15 | + strokeType?: "solid" | "dashed" | "dotted" | "double" | "doubledashed"; |
| 16 | + /** |
| 17 | + * Feedback state of the node. |
| 18 | + */ |
| 19 | + intent?: IntentTypes; |
| 20 | + /** |
| 21 | + * Set the color of used highlights to mark the edge. |
| 22 | + */ |
| 23 | + highlightColor?: NodeHighlightColor | [NodeHighlightColor, NodeHighlightColor]; |
| 24 | + /** |
| 25 | + * Size of the "glow" effect when the edge is hovered. |
| 26 | + */ |
| 27 | + pathGlowWidth?: number; |
| 28 | + /* |
| 29 | + * Direction of the SVG path is inversed. |
| 30 | + * This is important for the placement of the markers and the animation movement. |
| 31 | + */ |
| 32 | + inversePath?: boolean; |
| 33 | + /** |
| 34 | + * Callback handler that returns a React element used as edge title. |
| 35 | + */ |
| 36 | + renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode; |
| 37 | + /** |
| 38 | + * Properties are forwarded to the internally used SVG `g` element. |
| 39 | + * Data attributes for test ids coud be included here. |
| 40 | + */ |
| 41 | + edgeSvgProps?: React.SVGProps<SVGGElement>; |
| 42 | +}; |
| 43 | + |
| 44 | +/** |
| 45 | + * This element cannot be used directly, it must be connected via a `edgeTypes` definition. |
| 46 | + * @see https://reactflow.dev/docs/api/nodes/ |
| 47 | + * @deprecated (v26) will be removed when `EdgeDefault` supports v12 directly |
| 48 | + */ |
| 49 | +export const EdgeDefaultV12 = memo( |
| 50 | + ({ |
| 51 | + id, |
| 52 | + sourceX, |
| 53 | + sourceY, |
| 54 | + targetX, |
| 55 | + targetY, |
| 56 | + sourcePosition, |
| 57 | + targetPosition, |
| 58 | + label, |
| 59 | + labelStyle, |
| 60 | + labelShowBg, |
| 61 | + labelBgStyle, |
| 62 | + labelBgPadding = [5, 5], |
| 63 | + labelBgBorderRadius = 3, |
| 64 | + data = {}, |
| 65 | + ...edgeOriginalProperties |
| 66 | + }: EdgeProps<Edge<EdgeDefaultV12DataProps>>) => { |
| 67 | + const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath, strokeType } = data; |
| 68 | + |
| 69 | + const [edgePath, labelX, labelY] = getBezierPath({ |
| 70 | + sourceX, |
| 71 | + sourceY, |
| 72 | + sourcePosition, |
| 73 | + targetX, |
| 74 | + targetY, |
| 75 | + targetPosition, |
| 76 | + }); |
| 77 | + |
| 78 | + const edgeStyle = edgeOriginalProperties.style ?? {}; |
| 79 | + const { highlightCustomPropertySettings } = nodeContentUtils.evaluateHighlightColors( |
| 80 | + "--edge-highlight", |
| 81 | + highlightColor |
| 82 | + ); |
| 83 | + |
| 84 | + const edgeCenter = getEdgeCenter({ |
| 85 | + sourceX, |
| 86 | + sourceY, |
| 87 | + targetX, |
| 88 | + targetY, |
| 89 | + }); |
| 90 | + |
| 91 | + const renderedLabel = |
| 92 | + renderLabel?.([labelX, labelY, sourceX, targetX]) ?? |
| 93 | + (label ? ( |
| 94 | + <EdgeText |
| 95 | + x={edgeCenter[0]} |
| 96 | + y={edgeCenter[1]} |
| 97 | + label={label} |
| 98 | + labelStyle={labelStyle} |
| 99 | + labelShowBg={labelShowBg} |
| 100 | + labelBgStyle={labelBgStyle} |
| 101 | + labelBgPadding={labelBgPadding || [5, 5]} |
| 102 | + labelBgBorderRadius={labelBgBorderRadius || 3} |
| 103 | + /> |
| 104 | + ) : null); |
| 105 | + |
| 106 | + return ( |
| 107 | + <g |
| 108 | + className={ |
| 109 | + "react-flow__edge " + |
| 110 | + edgeDefaultUtils.createEdgeDefaultClassName( |
| 111 | + { intent }, |
| 112 | + `${edgeOriginalProperties.selected ? "selected" : ""}` |
| 113 | + ) |
| 114 | + } |
| 115 | + tabIndex={0} |
| 116 | + role="button" |
| 117 | + data-id={id} |
| 118 | + aria-label={`Edge from ${edgeOriginalProperties.source} to ${edgeOriginalProperties.target}`} |
| 119 | + aria-describedby={`react-flow__edge-desc-${id}`} |
| 120 | + > |
| 121 | + <g className={edgeSvgProps?.className ?? ""}> |
| 122 | + {highlightColor && ( |
| 123 | + <path |
| 124 | + d={edgePath} |
| 125 | + className={edgeDefaultUtils.createEdgeDefaultClassName( |
| 126 | + { highlightColor }, |
| 127 | + "react-flow__edge-path-highlight" |
| 128 | + )} |
| 129 | + strokeWidth={10} |
| 130 | + style={{ |
| 131 | + ...highlightCustomPropertySettings, |
| 132 | + }} |
| 133 | + /> |
| 134 | + )} |
| 135 | + |
| 136 | + <BaseEdge |
| 137 | + id={id} |
| 138 | + path={edgePath} |
| 139 | + markerStart={inversePath ? "url(#arrow-closed-reverse)" : undefined} |
| 140 | + markerEnd={!inversePath ? "url(#arrow-closed)" : undefined} |
| 141 | + className={edgeDefaultUtils.createEdgeDefaultClassName({ strokeType })} |
| 142 | + interactionWidth={pathGlowWidth} |
| 143 | + style={{ |
| 144 | + ...edgeSvgProps?.style, |
| 145 | + ...edgeStyle, |
| 146 | + color: edgeStyle.color || edgeStyle.stroke, |
| 147 | + }} |
| 148 | + /> |
| 149 | + </g> |
| 150 | + {renderedLabel} |
| 151 | + </g> |
| 152 | + ); |
| 153 | + } |
| 154 | +); |
0 commit comments