From ebb81b974e2b238023e371954cceafcea393ae1e Mon Sep 17 00:00:00 2001
From: Mariia Kovsharova <mariia.kovsharova@eccenca.com>
Date: Mon, 13 Oct 2025 15:45:54 +0200
Subject: [PATCH 1/2] bugfix: react-flow bidirectional edge (CMEM-7005)

---
 CHANGELOG.md                                  |  4 +++-
 .../react-flow/edges/EdgeDefault.tsx          | 10 ++++----
 .../react-flow/edges/EdgeDefaultV12.tsx       | 24 +++++++++++++------
 .../edges/stories/EdgeDefaultV12.stories.tsx  | 11 ++++++++-
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8001866b1..36d592c00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,7 +40,7 @@ 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)
-    -    `<AffirmativeButton />`, `<Button />`, `<DismissiveButton />`, `<DisruptiveButton />`, `<Checkbox />`, `<RadioButton />`, `<Tabs />`, `<TextField />`
+    -   `<AffirmativeButton />`, `<Button />`, `<DismissiveButton />`, `<DisruptiveButton />`, `<Checkbox />`, `<RadioButton />`, `<Tabs />`, `<TextField />`
 -   support for React Flow v10 was completely removed
 
 ### Fixed
@@ -52,6 +52,8 @@ This is a major release, and it might be not compatible with your current usage
 
 -   `<EdgeDefault />` and `<EdgeStep />`
     -   support now v9 and v12 of react flow
+-   `<EdgeDefault />`
+    -   introduced the new `arrowDirection` property, replacing the previous `inversePath` to provide more flexible control over edge arrows, including support for bidirectional edges
 -   `<ReactFlowExtended />`
     -   use `<EdgeNew />` by default for new connection lines, you can overwrite it by setting `connectionLineComponent` to `undefined`
 -   overrite the native SCSS `rgba()` function, so it now works for SCSS color values and CSS custom properties
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/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",
     },
 };
 

From f5ee0e1019ef3b3a7fe9901cb6737c57b4ec7970 Mon Sep 17 00:00:00 2001
From: Mariia Kovsharova <mariia.kovsharova@eccenca.com>
Date: Tue, 14 Oct 2025 14:19:39 +0200
Subject: [PATCH 2/2] Update the changelog entry, removed outdated prop from
 stories

---
 CHANGELOG.md                                                | 6 ++++--
 .../react-flow/edges/stories/EdgeDefault.stories.tsx        | 1 -
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36d592c00..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)
 -   `<EdgeDefaultV12 />`
     -   the `data` object provides `markerAppearance` to set and remove the edge arrows
+-   `<EdgeDefault />`
+    -   introduced the new `arrowDirection` property, including support for bidirectional edges - supported only for `<EdgeDefaultV12 />`
 -   `<EdgeNew />`
     -   component for React Flow v12, displaying new connection lines
 -   `<VisualTour />`
@@ -42,6 +44,8 @@ This is a major release, and it might be not compatible with your current usage
 -   removed direct replacements for legacy components (imported via @eccenca/gui-elements/src/legacy-replacements or LegacyReplacements)
     -   `<AffirmativeButton />`, `<Button />`, `<DismissiveButton />`, `<DisruptiveButton />`, `<Checkbox />`, `<RadioButton />`, `<Tabs />`, `<TextField />`
 -   support for React Flow v10 was completely removed
+-   `<EdgeDefault />`
+    -   removed `inversePath` property, can be replaced with `arrowDirection: "inversed"` property
 
 ### Fixed
 
@@ -52,8 +56,6 @@ This is a major release, and it might be not compatible with your current usage
 
 -   `<EdgeDefault />` and `<EdgeStep />`
     -   support now v9 and v12 of react flow
--   `<EdgeDefault />`
-    -   introduced the new `arrowDirection` property, replacing the previous `inversePath` to provide more flexible control over edge arrows, including support for bidirectional edges
 -   `<ReactFlowExtended />`
     -   use `<EdgeNew />` by default for new connection lines, you can overwrite it by setting `connectionLineComponent` to `undefined`
 -   overrite the native SCSS `rgba()` function, so it now works for SCSS color values and CSS custom properties
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),
     },
 };