bugfix: react-flow bidirectional edge (CMEM-7005)

Author: fiorsaoirse

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

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={{

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",
     },
 };