provide component that is used as default element for new connection lines in React Flow v12

Author: haschek

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
+-   `<EdgeNew />`
+    -   component for React Flow v12, displaying new connection lines
 
 ### Removed
 
@@ -31,6 +33,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
+-   `<ReactFlowExtended />`
+    -   use `<EdgeNew />` by default for new connection lines, you can overwrite it by setting `connectionLineComponent` to `undefined`
 
 ### Deprecated
 

src/cmem/react-flow/ReactFlow/ReactFlowV12.tsx

@@ -9,6 +9,7 @@ import {
 } from "@xyflow/react";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { EdgeNew } from "./../../../extensions/react-flow/edges/EdgeNew";
 
 export type ReactFlowV12ContainerProps = ReactFlowV12Props;
 
@@ -43,6 +44,7 @@ export const ReactFlowV12Container = React.forwardRef<HTMLDivElement, ReactFlowV
             <ReactFlowV12
                 ref={innerRef}
                 className={`${eccgui}-graphviz__canvas--reactflow12` + (className ? ` ${className}` : "")}
+                connectionLineComponent={EdgeNew}
                 {...originalProps}
                 {...missingNodesChangeCallback}
                 {...missingEdgesChangeCallback}

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

@@ -0,0 +1,52 @@
+import React from "react";
+import {
+    ConnectionLineComponentProps,
+    ConnectionLineType,
+} from "@xyflow/react";
+import { EdgeStraight, EdgeStep, EdgeBezier, EdgeDefaultV12Props } from "./../index";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
+export const EdgeNew = (edgeNewProps: ConnectionLineComponentProps) => {
+
+    const {
+        connectionLineType,
+        fromX,
+        fromY,
+        toX,
+        toY,
+        connectionStatus,
+        fromPosition,
+        toPosition,
+    } = edgeNewProps;
+
+    let EdgeType;
+
+    switch(connectionLineType) {
+        case ConnectionLineType.Step:
+        case ConnectionLineType.SmoothStep:
+            EdgeType = EdgeStep;
+            break;
+        case ConnectionLineType.Bezier:
+        case ConnectionLineType.SimpleBezier:
+            EdgeType = EdgeBezier;
+            break;
+        default:
+            EdgeType = EdgeStraight;
+    }
+
+    return <EdgeType {...{
+        sourceX: fromX,
+        sourceY: fromY,
+        targetX: toX,
+        targetY: toY,
+        sourcePosition: fromPosition,
+        targetPosition: toPosition,
+        data: {
+            strokeType: !connectionStatus ? "dashed" : undefined,
+            edgeSvgProps: {className: `${eccgui}-graphviz__edge--dragged`},
+            intent: connectionStatus === "valid" ? "success" : connectionStatus === "invalid" ? "warning" : "accent"
+        },
+    } as EdgeDefaultV12Props} />;
+};
+

src/extensions/react-flow/index.ts

@@ -12,6 +12,7 @@ export * from "./edges/EdgeDefaultV12";
 export * from "./edges/EdgeDefs";
 export * from "./edges/EdgeStep";
 export * from "./edges/EdgeStraight";
+export * from "./edges/EdgeNew";
 export * from "./edges/EdgeTools";
 export * from "./edges/EdgeLabel";
 export * from "./edges/EdgeDefs";

src/extensions/react-flow/markers/ReactFlowMarkers.tsx

@@ -53,7 +53,7 @@ const ReactFlowMarker = ({ className, appearance = "arrow-closed", intent, rever
 };
 
 const ReactFlowMarkers: FC = () => {
-    const intents = ["none", "primary", "success", "warning", "danger", "info"] as IntentTypes[];
+    const intents = ["none", "primary", "accent", "success", "warning", "danger", "info" ] as IntentTypes[];
 
     return (
         <svg>

src/extensions/react-flow/markers/_markers.scss

@@ -9,6 +9,10 @@ marker[id|="react-flow__marker"] {
         --marker-intent-color: #{$eccgui-color-primary};
     }
 
+    &.#{$eccgui}-intent--accent {
+        --marker-intent-color: #{$eccgui-color-accent};
+    }
+
     &.#{$eccgui}-intent--info {
         --marker-intent-color: #{$eccgui-color-info-text};
     }