diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8001866b1..0aec2b95d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,8 @@ This is a major release, and it might be not compatible with your current usage
- use `curvature` property in the edge `data` object to define the bezier layout (0..1, default: 0.25)
- ``
- the `data` object provides `markerAppearance` to set and remove the edge arrows
+- ``
+ - introduced the new `arrowDirection` property, including support for bidirectional edges - supported only for ``
- ``
- component for React Flow v12, displaying new connection lines
- ``
@@ -40,8 +42,10 @@ This is a major release, and it might be not compatible with your current usage
### Removed
- removed direct replacements for legacy components (imported via @eccenca/gui-elements/src/legacy-replacements or LegacyReplacements)
- - ``, ``, ``, ``, ``, ``, ``, ``
+ - ``, ``, ``, ``, ``, ``, ``, ``
- support for React Flow v10 was completely removed
+- ``
+ - removed `inversePath` property, can be replaced with `arrowDirection: "inversed"` property
### Fixed
diff --git a/src/extensions/react-flow/edges/EdgeDefault.tsx b/src/extensions/react-flow/edges/EdgeDefault.tsx
index 86660a558..b7e395eab 100644
--- a/src/extensions/react-flow/edges/EdgeDefault.tsx
+++ b/src/extensions/react-flow/edges/EdgeDefault.tsx
@@ -28,11 +28,13 @@ export interface EdgeDefaultDataProps {
* Size of the "glow" effect when the edge is hovered.
*/
pathGlowWidth?: number;
- /*
- * Direction of the SVG path is inversed.
- * This is important for the placement of the markers and the animation movement.
+ /**
+ * Controls where arrow heads appear on the edge.
+ * - `normal`: arrow at the end (target)
+ * - `inversed`: arrow at the start (source)
+ * - `bidirectional`: arrows at both start and end
*/
- inversePath?: boolean; // FIXME: diection of animation is not inverted
+ arrowDirection?: "normal" | "inversed" | "bidirectional"; // FIXME: direction of animation is not inverted
/**
* Callback handler that returns a React element used as edge title.
*/
diff --git a/src/extensions/react-flow/edges/EdgeDefaultV12.tsx b/src/extensions/react-flow/edges/EdgeDefaultV12.tsx
index e3cea9ed9..621559603 100644
--- a/src/extensions/react-flow/edges/EdgeDefaultV12.tsx
+++ b/src/extensions/react-flow/edges/EdgeDefaultV12.tsx
@@ -53,7 +53,15 @@ export const EdgeDefaultV12 = memo(
getPath = getStraightPath,
...edgeOriginalProperties
}: EdgeDefaultV12Props) => {
- const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath, strokeType } = data;
+ const {
+ pathGlowWidth = 10,
+ highlightColor,
+ renderLabel,
+ edgeSvgProps,
+ intent,
+ arrowDirection = "normal",
+ strokeType,
+ } = data;
const [edgePath, labelX, labelY] = getPath({
sourceX,
@@ -90,12 +98,14 @@ export const EdgeDefaultV12 = memo(
const marker =
appearance !== "none"
? {
- markerStart: inversePath
- ? `url(#react-flow__marker--${appearance}${intent ? `-${intent}` : "-none"}-reverse)`
- : undefined,
- markerEnd: !inversePath
- ? `url(#react-flow__marker--${appearance}${intent ? `-${intent}` : "-none"}`
- : undefined,
+ markerStart:
+ arrowDirection === "inversed" || arrowDirection === "bidirectional"
+ ? `url(#react-flow__marker--${appearance}${intent ? `-${intent}` : "-none"}-reverse)`
+ : undefined,
+ markerEnd:
+ arrowDirection === "normal" || arrowDirection === "bidirectional"
+ ? `url(#react-flow__marker--${appearance}${intent ? `-${intent}` : "-none"}`
+ : undefined,
}
: {};
diff --git a/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx b/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx
index 9e93227e1..efa01941c 100644
--- a/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx
+++ b/src/extensions/react-flow/edges/stories/EdgeDefault.stories.tsx
@@ -117,7 +117,6 @@ InverseEdge.args = {
id: "inverse",
arrowHeadType: undefined,
data: {
- inversePath: true,
markerStart: getMarkerEnd(`${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType),
},
};
diff --git a/src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx b/src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx
index b2f4acfd4..0256bd8a4 100644
--- a/src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx
+++ b/src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx
@@ -152,7 +152,16 @@ InverseEdge.args = {
...Default.args,
id: "inverse",
data: {
- inversePath: true,
+ arrowDirection: "inversed",
+ },
+};
+
+export const Bidirectional = Template.bind({});
+Bidirectional.args = {
+ ...Default.args,
+ id: "bidirectional",
+ data: {
+ arrowDirection: "bidirectional",
},
};