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

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 />`
@@ -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)
-    -    `<AffirmativeButton />`, `<Button />`, `<DismissiveButton />`, `<DisruptiveButton />`, `<Checkbox />`, `<RadioButton />`, `<Tabs />`, `<TextField />`
+    -   `<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
 

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/EdgeDefault.stories.tsx

@@ -117,7 +117,6 @@ InverseEdge.args = {
     id: "inverse",
     arrowHeadType: undefined,
     data: {
-        inversePath: true,
         markerStart: getMarkerEnd(`${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType),
     },
 };

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