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

---
 CHANGELOG.md                                  |  5 +++
 .../react-flow/edges/EdgeDefaultV12.tsx       | 31 ++++++++++++++-----
 .../edges/stories/EdgeDefaultV12.stories.tsx  | 11 ++++++-
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1a3bc4d0d..ca580c173 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<Tooltip />`
     -   prove useage of `usePlaceholder` by jest test coverage
 
+### Changed
+
+-   `<EdgeDefaultV12 />`
+    -   introduced the new `arrowDirection` property, replacing the previous `inversePath` to provide more flexible control over edge arrows, including support for bidirectional edges
+
 ## [24.4.1] - 2025-08-25
 
 ### Fixed
diff --git a/src/extensions/react-flow/edges/EdgeDefaultV12.tsx b/src/extensions/react-flow/edges/EdgeDefaultV12.tsx
index 5ffed2cdc..664506fc4 100644
--- a/src/extensions/react-flow/edges/EdgeDefaultV12.tsx
+++ b/src/extensions/react-flow/edges/EdgeDefaultV12.tsx
@@ -25,11 +25,13 @@ export type EdgeDefaultV12DataProps = Record<string, unknown> & {
      * 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;
+    arrowDirection?: "normal" | "inversed" | "bidirectional";
     /**
      * Callback handler that returns a React element used as edge title.
      */
@@ -64,7 +66,15 @@ export const EdgeDefaultV12 = memo(
         data = {},
         ...edgeOriginalProperties
     }: EdgeProps<Edge<EdgeDefaultV12DataProps>>) => {
-        const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath, strokeType } = data;
+        const {
+            pathGlowWidth = 10,
+            highlightColor,
+            renderLabel,
+            edgeSvgProps,
+            intent,
+            strokeType,
+            arrowDirection = "normal",
+        } = data;
 
         const [edgePath, labelX, labelY] = getBezierPath({
             sourceX,
@@ -103,6 +113,13 @@ export const EdgeDefaultV12 = memo(
                 />
             ) : null);
 
+        const markerStart =
+            arrowDirection === "inversed" || arrowDirection === "bidirectional"
+                ? "url(#arrow-closed-reverse)"
+                : undefined;
+        const markerEnd =
+            arrowDirection === "normal" || arrowDirection === "bidirectional" ? "url(#arrow-closed)" : undefined;
+
         return (
             <g
                 className={
@@ -136,8 +153,8 @@ export const EdgeDefaultV12 = memo(
                     <BaseEdge
                         id={id}
                         path={edgePath}
-                        markerStart={inversePath ? "url(#arrow-closed-reverse)" : undefined}
-                        markerEnd={!inversePath ? "url(#arrow-closed)" : undefined}
+                        markerStart={markerStart}
+                        markerEnd={markerEnd}
                         className={edgeDefaultUtils.createEdgeDefaultClassName({ strokeType })}
                         interactionWidth={pathGlowWidth}
                         style={{
diff --git a/src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx b/src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx
index 5716e5924..a118d6333 100644
--- a/src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx
+++ b/src/extensions/react-flow/edges/stories/EdgeDefaultV12.stories.tsx
@@ -154,7 +154,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",
     },
 };