include version splitter for react flow edges

Author: haschek

src/extensions/react-flow/edges/EdgeDefault.tsx

@@ -4,9 +4,11 @@ import { EdgeProps as ReactFlowEdgeProps } from "react-flow-renderer/dist/types"
 
 import { intentClassName, IntentTypes } from "../../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
 
 import { nodeContentUtils } from "./../nodes/NodeContent";
 import { NodeHighlightColor } from "./../nodes/sharedTypes";
+import { EdgeDefaultV12, EdgeDefaultV12Props } from "./EdgeDefaultV12";
 import { drawEdgeStep, drawEdgeStraight } from "./utils";
 
 export interface EdgeDefaultDataProps {
@@ -30,11 +32,7 @@ export interface EdgeDefaultDataProps {
      * Direction of the SVG path is inversed.
      * This is important for the placement of the markers and the animation movement.
      */
-    inversePath?: boolean;
-    /**
-     * Reference link to the SVG marker used for the start of the edge
-     */
-    markerStart?: string;
+    inversePath?: boolean; // FIXME: diection of animation is not inverted
     /**
      * Callback handler that returns a React element used as edge title.
      */
@@ -46,19 +44,35 @@ export interface EdgeDefaultDataProps {
     edgeSvgProps?: React.SVGProps<SVGGElement>;
 }
 
-export interface EdgeDefaultProps extends ReactFlowEdgeProps {
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+interface EdgeDefaultV9DataProps extends EdgeDefaultDataProps {
+    /**
+     * Reference link to the SVG marker used for the start of the edge
+     * @deprecated (v26) only necessary for react flow v9
+     */
+    markerStart?: string;
+}
+
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+interface EdgeDefaultV9Props extends ReactFlowEdgeProps {
     /**
      * Defining content and markers for the edge.
      */
-    data?: EdgeDefaultDataProps;
+    data?: EdgeDefaultV9DataProps;
     /**
      * Callback handler that returns a SVG path as string to define how the edge is rendered.
      */
     drawSvgPath?: (edge: ReactFlowEdgeProps) => string;
 }
 
-export const EdgeDefault = memo(
-    ({ data = {}, drawSvgPath = drawEdgeStraight, ...edgeOriginalProperties }: EdgeDefaultProps) => {
+export type EdgeDefaultProps = EdgeDefaultV9Props | EdgeDefaultV12Props;
+
+const EdgeDefaultV9 = memo(
+    ({ data = {}, drawSvgPath = drawEdgeStraight, ...edgeOriginalProperties }: EdgeDefaultV9Props) => {
         const { pathGlowWidth = 10, markerStart, strokeType, intent, highlightColor, edgeSvgProps } = data;
 
         const pathDisplay = drawSvgPath({ ...edgeOriginalProperties, data });
@@ -94,7 +108,11 @@ export const EdgeDefault = memo(
         return (
             <g
                 {...edgeSvgProps}
-                className={createEdgeDefaultClassName({ intent }, edgeSvgProps?.className ?? "")}
+                className={createEdgeDefaultClassName(
+                    { intent },
+                    `${edgeSvgProps?.className ?? ""}`,
+                    ReactFlowVersions.V9
+                )}
                 style={{
                     ...edgeSvgProps?.style,
                     ...edgeStyle,
@@ -130,13 +148,31 @@ export const EdgeDefault = memo(
     }
 );
 
+/**
+ * This element cannot be used directly, it must be connected via a `edgeTypes` definition.
+ * @see https://reactflow.dev/docs/api/nodes/
+ */
+export const EdgeDefault = memo((props: EdgeDefaultProps) => {
+    const flowVersionCheck = useReactFlowVersion();
+    switch (flowVersionCheck) {
+        case "v9":
+            return <EdgeDefaultV9 {...(props as EdgeDefaultV9Props)} />;
+        case "v12":
+            return <EdgeDefaultV12 {...(props as EdgeDefaultV12Props)} />;
+        default:
+            return <></>;
+    }
+});
+
 const createEdgeDefaultClassName = (
     { strokeType, intent, highlightColor }: EdgeDefaultDataProps,
-    baseClass = "react-flow__edge-path"
+    baseClass = "react-flow__edge-path",
+    flowVersion?: ReactFlowVersions
 ) => {
     const { highlightClassNameSuffix } = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
     return (
         baseClass +
+        (flowVersion ? ` react-flow__edge--${flowVersion}` : "") +
         (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
         (intent ? ` ${intentClassName(intent)}` : "") +
         (highlightClassNameSuffix.length > 0

src/extensions/react-flow/edges/EdgeDefaultV12.tsx

@@ -1,45 +1,20 @@
 import { memo } from "react";
 import React from "react";
-import { BaseEdge, Edge, EdgeProps, EdgeText, getBezierPath, getEdgeCenter } from "@xyflow/react";
+import { BaseEdge, Edge, EdgeProps, EdgeText, getBezierPath } from "@xyflow/react";
 
-import { IntentTypes } from "../../../common/Intent";
 import { nodeContentUtils } from "../nodes/NodeContent";
-import { NodeHighlightColor } from "../nodes/sharedTypes";
+import { ReactFlowVersions } from "../versionsupport";
 
-import { edgeDefaultUtils } from "./EdgeDefault";
+import { EdgeDefaultDataProps, edgeDefaultUtils } from "./EdgeDefault";
 
-export type EdgeDefaultV12DataProps = Record<string, unknown> & {
-    /**
-     * Overwrites the default style how the edge stroke is displayed.
-     */
-    strokeType?: "solid" | "dashed" | "dotted" | "double" | "doubledashed";
-    /**
-     * Feedback state of the node.
-     */
-    intent?: IntentTypes;
-    /**
-     * Set the color of used highlights to mark the edge.
-     */
-    highlightColor?: NodeHighlightColor | [NodeHighlightColor, NodeHighlightColor];
-    /**
-     * 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.
-     */
-    inversePath?: boolean;
-    /**
-     * Callback handler that returns a React element used as edge title.
-     */
-    renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
-    /**
-     * Properties are forwarded to the internally used SVG `g` element.
-     * Data attributes for test ids coud be included here.
-     */
-    edgeSvgProps?: React.SVGProps<SVGGElement>;
-};
+/**
+ * @deprecated (v26) use EdgeDefaultDataProps
+ */
+type EdgeDefaultV12DataProps = Record<string, unknown> & EdgeDefaultDataProps;
+/**
+ * @deprecated (v26) use EdgeDefaultProps
+ */
+export type EdgeDefaultV12Props = EdgeProps<Edge<EdgeDefaultV12DataProps>>;
 
 /**
  * This element cannot be used directly, it must be connected via a `edgeTypes` definition.
@@ -63,7 +38,7 @@ export const EdgeDefaultV12 = memo(
         labelBgBorderRadius = 3,
         data = {},
         ...edgeOriginalProperties
-    }: EdgeProps<Edge<EdgeDefaultV12DataProps>>) => {
+    }: EdgeDefaultV12Props) => {
         const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath, strokeType } = data;
 
         const [edgePath, labelX, labelY] = getBezierPath({
@@ -81,19 +56,12 @@ export const EdgeDefaultV12 = memo(
             highlightColor
         );
 
-        const edgeCenter = getEdgeCenter({
-            sourceX,
-            sourceY,
-            targetX,
-            targetY,
-        });
-
         const renderedLabel =
             renderLabel?.([labelX, labelY, sourceX, targetX]) ??
             (label ? (
                 <EdgeText
-                    x={edgeCenter[0]}
-                    y={edgeCenter[1]}
+                    x={labelX}
+                    y={labelY}
                     label={label}
                     labelStyle={labelStyle}
                     labelShowBg={labelShowBg}
@@ -109,7 +77,8 @@ export const EdgeDefaultV12 = memo(
                     "react-flow__edge " +
                     edgeDefaultUtils.createEdgeDefaultClassName(
                         { intent },
-                        `${edgeOriginalProperties.selected ? "selected" : ""}`
+                        `${edgeOriginalProperties.selected ? "selected" : ""}`,
+                        ReactFlowVersions.V12
                     )
                 }
                 tabIndex={0}