Skip to content

Commit 12216a1

Browse files
fiorsaoirsefiorsaoirse
committed
Adjusted edge label component for v12
1 parent afeab7f commit 12216a1

3 files changed

Lines changed: 109 additions & 71 deletions

File tree

‎src/extensions/react-flow/edges/EdgeDefaultV12.tsx‎

Lines changed: 95 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { memo } from "react";
22
import React from "react";
3-
import { BaseEdge, Edge, EdgeLabelRenderer, EdgeProps, EdgeText, getEdgeCenter, getStraightPath } from "@xyflow/react";
3+
import { BaseEdge, Edge, EdgeLabelRenderer, EdgeProps, getBezierPath } from "@xyflow/react";
44

55
import { IntentTypes } from "../../../common/Intent";
66
import { nodeContentUtils } from "../nodes/NodeContent";
77
import { NodeHighlightColor } from "../nodes/sharedTypes";
88

99
import { edgeDefaultUtils } from "./EdgeDefault";
1010

11-
export type EdgeDefaultDataProps = Record<string, unknown> & {
11+
export type EdgeDefaultV12DataProps = Record<string, unknown> & {
1212
/**
1313
* Overwrites the default style how the edge stroke is displayed.
1414
*/
@@ -30,11 +30,6 @@ export type EdgeDefaultDataProps = Record<string, unknown> & {
3030
* This is important for the placement of the markers and the animation movement.
3131
*/
3232
inversePath?: boolean;
33-
/**
34-
* Reference link to the SVG marker used for the start of the edge
35-
*/
36-
markerStart?: string;
37-
markerEnd?: string;
3833
/**
3934
* Callback handler that returns a React element used as edge title.
4035
*/
@@ -53,6 +48,8 @@ export const EdgeDefaultV12 = memo(
5348
sourceY,
5449
targetX,
5550
targetY,
51+
sourcePosition,
52+
targetPosition,
5653
label,
5754
labelStyle,
5855
labelShowBg,
@@ -61,77 +58,109 @@ export const EdgeDefaultV12 = memo(
6158
labelBgBorderRadius = 3,
6259
data = {},
6360
...edgeOriginalProperties
64-
}: EdgeProps<Edge<EdgeDefaultDataProps>>) => {
65-
const { pathGlowWidth = 10, markerStart, markerEnd, highlightColor, renderLabel, edgeSvgProps, intent } = data;
66-
67-
const [edgePath] = getStraightPath({ sourceX, sourceY, targetX, targetY });
68-
const edgeCenter = getEdgeCenter({ sourceX, sourceY, targetX, targetY });
61+
}: EdgeProps<Edge<EdgeDefaultV12DataProps>>) => {
62+
const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath } = data;
6963

70-
// todo: replace?
71-
const renderedLabel =
72-
renderLabel?.(edgeCenter) ??
73-
(label ? (
74-
typeof label === "string" || typeof label === "number" ? (
75-
<EdgeLabelRenderer>
76-
<EdgeText
77-
x={edgeCenter[0]}
78-
y={edgeCenter[1]}
79-
label={label}
80-
labelStyle={labelStyle}
81-
labelShowBg={labelShowBg}
82-
labelBgStyle={labelBgStyle}
83-
labelBgPadding={labelBgPadding}
84-
labelBgBorderRadius={labelBgBorderRadius}
85-
/>
86-
</EdgeLabelRenderer>
87-
) : (
88-
<EdgeLabelRenderer>
89-
<foreignObject
90-
x={edgeCenter[0] - 50}
91-
y={edgeCenter[1] - 20}
92-
width={100}
93-
height={40}
94-
requiredExtensions="http://www.w3.org/1999/xhtml"
95-
>
96-
<div style={{ padding: 4, background: "white", border: "1px solid #ccc" }}>{label}</div>
97-
</foreignObject>
98-
</EdgeLabelRenderer>
99-
)
100-
) : null);
64+
const [edgePath, labelX, labelY] = getBezierPath({
65+
sourceX,
66+
sourceY,
67+
sourcePosition,
68+
targetX,
69+
targetY,
70+
targetPosition,
71+
});
10172

10273
const edgeStyle = edgeOriginalProperties.style ?? {};
10374
const { highlightCustomPropertySettings } = nodeContentUtils.evaluateHighlightColors(
10475
"--edge-highlight",
10576
highlightColor
10677
);
10778

108-
return (
109-
<g
110-
{...edgeSvgProps}
111-
className={edgeDefaultUtils.createEdgeDefaultClassName({ intent }, edgeSvgProps?.className ?? "")}
112-
style={{
113-
...edgeSvgProps?.style,
114-
...edgeStyle,
115-
color: edgeStyle.color || edgeStyle.stroke,
116-
}}
117-
>
118-
{highlightColor && (
119-
<path
120-
d={edgePath}
121-
className={edgeDefaultUtils.createEdgeDefaultClassName(
122-
{ highlightColor },
123-
"react-flow__edge-path-highlight"
124-
)}
125-
strokeWidth={pathGlowWidth}
79+
const renderedLabel =
80+
renderLabel?.([labelX, labelY, sourceX, targetX]) ??
81+
(label ? (
82+
<EdgeLabelRenderer>
83+
<div
12684
style={{
127-
...highlightCustomPropertySettings,
85+
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
86+
...labelStyle,
87+
...(labelShowBg
88+
? {
89+
background: labelBgStyle?.fill || "white",
90+
padding: `${labelBgPadding[1]}px ${labelBgPadding[0]}px`,
91+
borderRadius: `${labelBgBorderRadius}px`,
92+
border: labelBgStyle?.stroke ? `1px solid ${labelBgStyle.stroke}` : undefined,
93+
}
94+
: {}),
12895
}}
129-
/>
130-
)}
96+
className="edge-label-renderer__custom-edge nodrag nopan"
97+
>
98+
{label}
99+
</div>
100+
</EdgeLabelRenderer>
101+
) : null);
102+
103+
return (
104+
<>
105+
<svg style={{ position: "absolute", top: 0, left: 0 }}>
106+
<defs>
107+
<marker
108+
id="arrow-closed"
109+
viewBox="-10 -10 20 20"
110+
markerWidth="10"
111+
markerHeight="10"
112+
refX="0"
113+
refY="0"
114+
orient="auto"
115+
>
116+
<path d="M-4,-4 L4,0 L-4,4 Z" fill="currentColor" />
117+
</marker>
118+
<marker
119+
id="arrow-closed-reverse"
120+
viewBox="-10 -10 20 20"
121+
markerWidth="10"
122+
markerHeight="10"
123+
refX="0"
124+
refY="0"
125+
orient="auto-start-reverse"
126+
>
127+
<path d="M-4,-4 L4,0 L-4,4 Z" fill="currentColor" />
128+
</marker>
129+
</defs>
130+
</svg>
131131

132-
<BaseEdge id={id} path={edgePath} markerStart={markerStart} markerEnd={markerEnd} />
132+
<g
133+
{...edgeSvgProps}
134+
className={edgeDefaultUtils.createEdgeDefaultClassName({ intent }, edgeSvgProps?.className ?? "")}
135+
style={{
136+
...edgeSvgProps?.style,
137+
...edgeStyle,
138+
color: edgeStyle.color || edgeStyle.stroke,
139+
}}
140+
>
141+
{highlightColor && (
142+
<path
143+
d={edgePath}
144+
className={edgeDefaultUtils.createEdgeDefaultClassName(
145+
{ highlightColor },
146+
"react-flow__edge-path-highlight"
147+
)}
148+
strokeWidth={pathGlowWidth}
149+
style={{
150+
...highlightCustomPropertySettings,
151+
}}
152+
/>
153+
)}
154+
155+
<BaseEdge
156+
id={id}
157+
path={edgePath}
158+
markerStart={inversePath ? "url(#arrow-closed-reverse)" : undefined}
159+
markerEnd={!inversePath ? "url(#arrow-closed)" : undefined}
160+
/>
161+
</g>
133162
{renderedLabel}
134-
</g>
163+
</>
135164
);
136165
}
137166
);

‎src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React, { useCallback, useMemo, useState } from "react";
2-
import { ArrowHeadType, getMarkerEnd } from "react-flow-renderer";
32
import { Meta, StoryFn } from "@storybook/react";
4-
import { Edge, Node, ReactFlow } from "@xyflow/react";
3+
import { Edge, Node, Position, ReactFlow } from "@xyflow/react";
54

65
import { NodeDefaultV12 } from "../../nodes/NodeDefaultV12";
7-
import { EdgeDefaultDataProps as EdgeData, EdgeDefaultV12 } from "../EdgeDefaultV12";
6+
import { EdgeDefaultV12, EdgeDefaultV12DataProps as EdgeData } from "../EdgeDefaultV12";
87

98
import { EdgeLabel, EdgeLabelObject } from "./../../../../../index";
109

@@ -55,7 +54,17 @@ const EdgeDefault = (args: Edge) => {
5554
position: { x: 300, y: 0 },
5655
},
5756
] as Node[],
58-
[args],
57+
[
58+
{
59+
...args,
60+
sourceX: 150,
61+
sourceY: 0,
62+
targetX: 250,
63+
targetY: 0,
64+
sourcePosition: Position.Right,
65+
targetPosition: Position.Left,
66+
},
67+
],
5968
];
6069
}, [args]);
6170

@@ -118,7 +127,6 @@ InverseEdge.args = {
118127
id: "inverse",
119128
data: {
120129
inversePath: true,
121-
markerStart: getMarkerEnd(`${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType),
122130
},
123131
};
124132

‎src/extensions/react-flow/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export * from "./edges/EdgeLabel";
1313
export * from "./markers/ReactFlowMarkers";
1414
export * from "./minimap/MiniMap";
1515
export * from "./minimap/utils";
16+
export * from "./edges/EdgeDefaultV12";
1617

1718
// deprecated exports
1819
export { nodeTypes } from "./nodes/nodeTypes"; // @deprecated removed in v25

0 commit comments

Comments
 (0)