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

Author: fiorsaoirse

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

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.
      */

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,
                   }
                 : {};
 

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