Skip to content

Commit a8873a4

Browse files
haschekhaschek
committed
add ability to use different path layous for v12 edges, provide straight, step and bezier edges for configurations
1 parent 7f393d8 commit a8873a4

9 files changed

Lines changed: 167 additions & 60 deletions

File tree

‎src/cmem/react-flow/configuration/graph.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
1+
import { EdgeBezier } from "./../../../extensions/react-flow/edges/EdgeBezier";
22
import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
33
import { GRAPH_NODE_TYPES } from "./typing";
44
//import {ComponentType} from "react";
55
//import {NodeProps} from "react-flow-renderer-lts";
66

77
const edgeTypes = {
8-
default: EdgeDefault,
9-
implicit: EdgeDefault,
10-
import: EdgeDefault,
11-
subclass: EdgeDefault,
12-
subproperty: EdgeDefault,
13-
rdftype: EdgeDefault,
14-
success: EdgeDefault,
15-
warning: EdgeDefault,
16-
danger: EdgeDefault,
8+
default: EdgeBezier,
9+
implicit: EdgeBezier,
10+
import: EdgeBezier,
11+
subclass: EdgeBezier,
12+
subproperty: EdgeBezier,
13+
rdftype: EdgeBezier,
14+
success: EdgeBezier,
15+
warning: EdgeBezier,
16+
danger: EdgeBezier,
1717
};
1818

1919
const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { memo } from "react";
2+
import { Edge, EdgeProps, getBezierPath } from "@xyflow/react";
3+
4+
import { ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
5+
6+
import { EdgeDefault, EdgeDefaultV9Props } from "./EdgeDefault";
7+
import { EdgeDefaultV12DataProps, EdgeDefaultV12Props } from "./EdgeDefaultV12";
8+
9+
interface EdgeBezierDataV12Props extends EdgeDefaultV12DataProps {
10+
curvature?: number;
11+
}
12+
13+
/**
14+
* @deprecated (v26) v9 support is removed after v25
15+
*/
16+
export interface EdgeBezierV12Props
17+
extends Omit<EdgeDefaultV12Props, "data">,
18+
EdgeProps<Edge<EdgeBezierDataV12Props>> {}
19+
20+
export type EdgeBezierProps = EdgeDefaultV9Props | EdgeBezierV12Props;
21+
22+
/**
23+
* This element cannot be used directly, it must be connected via a `edgeTypes` definition.
24+
* Our v9 edges do not support bezier paths.
25+
* @see https://reactflow.dev/docs/api/nodes/
26+
*/
27+
export const EdgeBezier = memo((props: EdgeBezierProps) => {
28+
const flowVersionCheck = useReactFlowVersion();
29+
switch (flowVersionCheck) {
30+
case ReactFlowVersions.V9:
31+
return <EdgeDefault {...(props as EdgeDefaultV9Props)} />;
32+
case ReactFlowVersions.V12:
33+
return (
34+
<EdgeDefault
35+
{...(props as EdgeDefaultV12Props)}
36+
getPath={(params) => {
37+
return getBezierPath({
38+
...params,
39+
curvature: (props.data as EdgeBezierDataV12Props)?.curvature,
40+
});
41+
}}
42+
/>
43+
);
44+
default:
45+
return <></>;
46+
}
47+
});

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export interface EdgeDefaultDataProps {
4747
/**
4848
* @deprecated (v26) v9 support is removed after v25
4949
*/
50-
interface EdgeDefaultV9DataProps extends EdgeDefaultDataProps {
50+
export interface EdgeDefaultV9DataProps extends EdgeDefaultDataProps {
5151
/**
5252
* Reference link to the SVG marker used for the start of the edge
5353
* @deprecated (v26) only necessary for react flow v9
@@ -58,7 +58,7 @@ interface EdgeDefaultV9DataProps extends EdgeDefaultDataProps {
5858
/**
5959
* @deprecated (v26) v9 support is removed after v25
6060
*/
61-
interface EdgeDefaultV9Props extends ReactFlowEdgeProps {
61+
export interface EdgeDefaultV9Props extends ReactFlowEdgeProps {
6262
/**
6363
* Defining content and markers for the edge.
6464
*/
@@ -155,9 +155,9 @@ const EdgeDefaultV9 = memo(
155155
export const EdgeDefault = memo((props: EdgeDefaultProps) => {
156156
const flowVersionCheck = useReactFlowVersion();
157157
switch (flowVersionCheck) {
158-
case "v9":
158+
case ReactFlowVersions.V9:
159159
return <EdgeDefaultV9 {...(props as EdgeDefaultV9Props)} />;
160-
case "v12":
160+
case ReactFlowVersions.V12:
161161
return <EdgeDefaultV12 {...(props as EdgeDefaultV12Props)} />;
162162
default:
163163
return <></>;

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

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React, { memo } from "react";
2-
import { BaseEdge, Edge, EdgeProps, EdgeText, getBezierPath } from "@xyflow/react";
2+
import { BaseEdge, Edge, EdgeProps, EdgeText, GetBezierPathParams } from "@xyflow/react";
33

44
import { nodeContentUtils } from "../nodes/NodeContent";
55
import { ReactFlowVersions } from "../versionsupport";
66

77
import { EdgeDefaultDataProps, edgeDefaultUtils } from "./EdgeDefault";
8+
import { getStraightPath } from "./utils";
89

910
/**
1011
* @deprecated (v26) use EdgeDefaultDataProps
@@ -19,7 +20,14 @@ export interface EdgeDefaultV12DataProps extends Record<string, unknown>, EdgeDe
1920
/**
2021
* @deprecated (v26) use EdgeDefaultProps
2122
*/
22-
export type EdgeDefaultV12Props = EdgeProps<Edge<EdgeDefaultV12DataProps>>;
23+
export type EdgeDefaultV12Props = EdgeProps<Edge<EdgeDefaultV12DataProps>> & {
24+
/**
25+
* Callback handler that returns SVG path and label position of the edge.
26+
*/
27+
getPath?: (
28+
edgeParams: Omit<GetBezierPathParams, "curvature"> & Record<string, unknown>
29+
) => [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number];
30+
};
2331

2432
/**
2533
* This element cannot be used directly, it must be connected via a `edgeTypes` definition.
@@ -42,11 +50,12 @@ export const EdgeDefaultV12 = memo(
4250
labelBgPadding = [5, 5],
4351
labelBgBorderRadius = 3,
4452
data = {},
53+
getPath = getStraightPath,
4554
...edgeOriginalProperties
4655
}: EdgeDefaultV12Props) => {
4756
const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath, strokeType } = data;
4857

49-
const [edgePath, labelX, labelY] = getBezierPath({
58+
const [edgePath, labelX, labelY] = getPath({
5059
sourceX,
5160
sourceY,
5261
sourcePosition,
@@ -92,48 +101,43 @@ export const EdgeDefaultV12 = memo(
92101

93102
return (
94103
<g
95-
className={
96-
"react-flow__edge " +
97-
edgeDefaultUtils.createEdgeDefaultClassName(
98-
{ intent },
99-
`${edgeOriginalProperties.selected ? "selected" : ""}`,
100-
ReactFlowVersions.V12
101-
)
102-
}
104+
{...edgeSvgProps}
105+
className={edgeDefaultUtils.createEdgeDefaultClassName(
106+
{ intent },
107+
`${edgeSvgProps?.className ?? ""}`,
108+
ReactFlowVersions.V12
109+
)}
103110
tabIndex={0}
104111
role="button"
105112
data-id={id}
106113
aria-label={`Edge from ${edgeOriginalProperties.source} to ${edgeOriginalProperties.target}`}
107114
aria-describedby={`react-flow__edge-desc-${id}`}
108115
>
109-
<g className={edgeSvgProps?.className ?? ""}>
110-
{highlightColor && (
111-
<path
112-
d={edgePath}
113-
className={edgeDefaultUtils.createEdgeDefaultClassName(
114-
{ highlightColor },
115-
"react-flow__edge-path-highlight"
116-
)}
117-
strokeWidth={10}
118-
style={{
119-
...highlightCustomPropertySettings,
120-
}}
121-
/>
122-
)}
123-
124-
<BaseEdge
125-
id={id}
126-
path={edgePath}
127-
{...marker}
128-
className={edgeDefaultUtils.createEdgeDefaultClassName({ strokeType })}
129-
interactionWidth={pathGlowWidth}
116+
{highlightColor && (
117+
<path
118+
d={edgePath}
119+
className={edgeDefaultUtils.createEdgeDefaultClassName(
120+
{ highlightColor },
121+
"react-flow__edge-path-highlight"
122+
)}
123+
strokeWidth={pathGlowWidth}
130124
style={{
131-
...edgeSvgProps?.style,
132-
...edgeStyle,
133-
color: edgeStyle.color || edgeStyle.stroke,
125+
...highlightCustomPropertySettings,
134126
}}
135127
/>
136-
</g>
128+
)}
129+
<BaseEdge
130+
id={id}
131+
path={edgePath}
132+
{...marker}
133+
className={edgeDefaultUtils.createEdgeDefaultClassName({ strokeType })}
134+
interactionWidth={pathGlowWidth}
135+
style={{
136+
...edgeSvgProps?.style,
137+
...edgeStyle,
138+
color: edgeStyle.color || edgeStyle.stroke,
139+
}}
140+
/>
137141
{renderedLabel}
138142
</g>
139143
);

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

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,51 @@
11
import React, { memo } from "react";
2+
import { Edge, EdgeProps, getSmoothStepPath } from "@xyflow/react";
23

3-
import { EdgeDefault, EdgeDefaultDataProps, EdgeDefaultProps } from "./EdgeDefault";
4+
import { ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
5+
6+
import { EdgeDefault, EdgeDefaultV9DataProps, EdgeDefaultV9Props } from "./EdgeDefault";
7+
import { EdgeDefaultV12DataProps, EdgeDefaultV12Props } from "./EdgeDefaultV12";
48
import { drawEdgeStep } from "./utils";
59

6-
interface EdgeStepDataProps extends EdgeDefaultDataProps {
10+
interface EdgeStepDataV9Props extends EdgeDefaultV9DataProps {
11+
stepCornerRadius?: number;
12+
}
13+
interface EdgeStepDataV12Props extends EdgeDefaultV12DataProps {
714
stepCornerRadius?: number;
815
}
916

10-
export interface EdgeStepProps extends EdgeDefaultProps {
11-
data?: EdgeStepDataProps;
17+
/**
18+
* @deprecated (v26) v9 support is removed after v25
19+
*/
20+
export interface EdgeStepV9Props extends EdgeDefaultV9Props {
21+
data?: EdgeStepDataV9Props;
1222
}
23+
/**
24+
* @deprecated (v26) v9 support is removed after v25
25+
*/
26+
export interface EdgeStepV12Props extends Omit<EdgeDefaultV12Props, "data">, EdgeProps<Edge<EdgeStepDataV12Props>> {}
27+
28+
export type EdgeStepProps = EdgeStepV9Props | EdgeStepV12Props;
1329

14-
export const EdgeStep = memo((edge: EdgeStepProps) => {
15-
return <EdgeDefault {...edge} drawSvgPath={drawEdgeStep} />;
30+
/**
31+
* This element cannot be used directly, it must be connected via a `edgeTypes` definition.
32+
* @see https://reactflow.dev/docs/api/nodes/
33+
*/
34+
export const EdgeStep = memo((props: EdgeStepProps) => {
35+
const flowVersionCheck = useReactFlowVersion();
36+
switch (flowVersionCheck) {
37+
case ReactFlowVersions.V9:
38+
return <EdgeDefault {...(props as EdgeDefaultV9Props)} drawSvgPath={drawEdgeStep} />;
39+
case ReactFlowVersions.V12:
40+
return (
41+
<EdgeDefault
42+
{...(props as EdgeDefaultV12Props)}
43+
getPath={(params) => {
44+
return getSmoothStepPath({ ...params, borderRadius: props.data?.stepCornerRadius ?? 7 });
45+
}}
46+
/>
47+
);
48+
default:
49+
return <></>;
50+
}
1651
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { EdgeDefault as EdgeStraight } from "./EdgeDefault";

‎src/extensions/react-flow/edges/edgeTypes.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@
77

88
import { EdgeDefault } from "./EdgeDefault";
99
import { EdgeStep } from "./EdgeStep";
10+
import { EdgeStraight } from "./EdgeStraight";
1011

11-
/**
12-
* @deprecated (v25) will be removed without replacement, define it yourself or use `<ReactFlow/` with `configuration` option.
12+
/**
13+
* @deprecated (v25) will be removed without replacement, define it yourself or use `<ReactFlow/` with `configuration` option.
1314
*/
1415
export const edgeTypes = {
1516
default: EdgeDefault,
16-
straight: EdgeDefault,
17+
straight: EdgeStraight,
1718
step: EdgeStep,
1819

1920
success: EdgeDefault,

‎src/extensions/react-flow/edges/utils.ts‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Position } from "react-flow-renderer";
1+
import { getEdgeCenter, Position } from "react-flow-renderer";
2+
import { GetBezierPathParams } from "@xyflow/react";
23

34
import { EdgeDefaultProps } from "./EdgeDefault";
45
import { EdgeStepProps } from "./EdgeStep";
@@ -145,6 +146,23 @@ export const drawEdgeStraight = ({
145146
});
146147
};
147148

149+
export const getStraightPath = (params: Omit<GetBezierPathParams, "curvature">) => {
150+
const path = drawEdgeStraight(params as EdgeDefaultProps);
151+
const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({
152+
sourceX: params.sourceX,
153+
sourceY: params.sourceY,
154+
targetX: params.targetX,
155+
targetY: params.targetY,
156+
});
157+
return [path, labelX, labelY, offsetX, offsetY] as [
158+
path: string,
159+
labelX: number,
160+
labelY: number,
161+
offsetX: number,
162+
offsetY: number
163+
];
164+
};
165+
148166
export const drawEdgeStep = ({
149167
sourceX,
150168
sourceY,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export * from "./edges/EdgeDefault";
1010
export * from "./edges/EdgeDefaultV12";
1111
export * from "./edges/EdgeDefs";
1212
export * from "./edges/EdgeStep";
13+
export * from "./edges/EdgeStraight";
1314
export * from "./edges/EdgeTools";
1415
export * from "./edges/EdgeLabel";
1516
export * from "./edges/EdgeDefs";

0 commit comments

Comments
 (0)