fix edge markers and add colors of intent states for v12 support

Author: haschek

src/extensions/react-flow/_react-flow.scss

@@ -1,6 +1,7 @@
 @import "config";
 @import "nodes/nodes";
 @import "edges/edges";
+@import "markers/markers";
 @import "handles/handles";
 @import "minimap/minimap";
 @import "react-flow_v12";

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

@@ -10,7 +10,7 @@ import { EdgeDefaultDataProps, edgeDefaultUtils } from "./EdgeDefault";
 /**
  * @deprecated (v26) use EdgeDefaultDataProps
  */
-type EdgeDefaultV12DataProps = Record<string, unknown> & EdgeDefaultDataProps;
+export type EdgeDefaultV12DataProps = Record<string, unknown> & EdgeDefaultDataProps;
 /**
  * @deprecated (v26) use EdgeDefaultProps
  */
@@ -71,6 +71,8 @@ export const EdgeDefaultV12 = memo(
                 />
             ) : null);
 
+        const appearance = "arrow-closed"; // test
+
         return (
             <g
                 className={
@@ -105,8 +107,16 @@ export const EdgeDefaultV12 = memo(
                     <BaseEdge
                         id={id}
                         path={edgePath}
-                        markerStart={inversePath ? "url(#arrow-closed-reverse)" : undefined}
-                        markerEnd={!inversePath ? "url(#arrow-closed)" : undefined}
+                        markerStart={
+                            inversePath
+                                ? `url(#react-flow__marker--${appearance}${intent ? `-${intent}` : "-none"}-reverse)`
+                                : undefined
+                        }
+                        markerEnd={
+                            !inversePath
+                                ? `url(#react-flow__marker--${appearance}${intent ? `-${intent}` : "-none"}`
+                                : undefined
+                        }
                         className={edgeDefaultUtils.createEdgeDefaultClassName({ strokeType })}
                         interactionWidth={pathGlowWidth}
                         style={{

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

@@ -1,5 +1,8 @@
 import React from "react";
 
+/**
+ * @deprecated (v26) use `<ReactFlowMarkers /`
+ */
 export const EdgeDefs = React.memo(() => (
     <svg style={{ position: "absolute", top: 0, left: 0 }}>
         <defs>

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

@@ -1,12 +1,15 @@
 import React, { useCallback, useState } from "react";
 import { Meta, StoryFn } from "@storybook/react";
-import { addEdge, Edge, OnConnect, Position, ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";
+import { addEdge, Edge, Node, OnConnect, Position, useEdgesState, useNodesState } from "@xyflow/react";
 
-import { NodeDefaultV12 } from "../../nodes/NodeDefaultV12";
-import { EdgeDefaultV12, EdgeDefaultV12DataProps as EdgeData } from "../EdgeDefaultV12";
-import { EdgeDefs } from "../EdgeDefs";
-
-import { EdgeLabel, EdgeLabelObject } from "./../../../../../index";
+import {
+    EdgeDefaultV12,
+    EdgeDefaultV12DataProps as EdgeData,
+    EdgeLabel,
+    EdgeLabelObject,
+    ReactFlowExtended,
+    ReactFlowVersions,
+} from "./../../../../../index";
 
 /**
  * this is only a mock to get it as sub element in the table
@@ -16,12 +19,6 @@ const EdgeDefaultDataProps = (data: EdgeData) => {
     return <></>;
 };
 
-const edgeTypes = {
-    default: EdgeDefaultV12,
-};
-const nodeTypes = {
-    default: NodeDefaultV12,
-};
 export default {
     title: "Extensions/React Flow V12/Edge",
     component: EdgeDefaultV12,
@@ -76,17 +73,11 @@ const EdgeDefault = (args: Edge) => {
             },
             position: { x: 600, y: 200 },
         },
-    ]);
+    ] as Node[]);
 
     const [edges, setEdges, onEdgesChange] = useEdgesState([
         {
             ...args,
-            // sourceX: 150,
-            // sourceY: 0,
-            // targetX: 250,
-            // targetY: 0,
-            sourcePosition: Position.Left,
-            targetPosition: Position.Right,
         },
     ]);
 
@@ -102,17 +93,16 @@ const EdgeDefault = (args: Edge) => {
     );
 
     return (
-        <div style={{ width: "1000px", height: "800px" }}>
-            <EdgeDefs />
-            <ReactFlow
+        <div style={{ height: "400px" }}>
+            <ReactFlowExtended
+                flowVersion={ReactFlowVersions.V12}
                 nodes={nodes}
                 edges={edges}
                 onLoad={onLoad}
-                edgeTypes={edgeTypes}
-                nodeTypes={nodeTypes}
                 onNodesChange={onNodesChange}
                 onEdgesChange={onEdgesChange}
                 onConnect={onConnect}
+                defaultZoom={1}
             />
         </div>
     );

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

@@ -1,5 +1,8 @@
 import React, { FC } from "react";
 
+/**
+ * @deprecated (v26) only necessary for react flow v9, support will be removed
+ */
 export const MarkerArrowClosedInverse: FC = () => {
     return (
         <marker

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

@@ -1,16 +1,73 @@
 import React, { FC } from "react";
 
+import { intentClassName, IntentTypes } from "../../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
 // FIXME: we need to check how these markers are used and if we can justify the namings
 import { MarkerArrowClosedInverse } from "./MarkerArrowClosedInverse";
 
+type ReactFlowMarkerAppearance = "arrow-closed";
+
+interface ReactFlowMarkerProps extends React.SVGProps<SVGMarkerElement> {
+    /**
+     * Visual appearance of the marker.
+     */
+    appearance?: ReactFlowMarkerAppearance;
+    /**
+     * Feedback state of the marker.
+     * SVG markers are reused by paths but they cannot inherit their state color automatically.
+     */
+    intent?: IntentTypes;
+    /**
+     * If set, then the marker orientation is reversed.
+     * Can be used if a start marker should displayed similar to an end marker.
+     */
+    reverse?: boolean;
+}
+
+const ReactFlowMarker = ({ className, appearance = "arrow-closed", intent, reverse }: ReactFlowMarkerProps) => {
+    const markerDisplay: Record<ReactFlowMarkerAppearance, unknown> = {
+        "arrow-closed": (
+            <path d="M-5,-4 L5,0 L-5,4 Z" fill="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+        ),
+    };
+
+    return (
+        <marker
+            id={`react-flow__marker--${appearance}${intent ? `-${intent}` : ""}${reverse ? "-reverse" : ""}`}
+            className={
+                `${eccgui}-graphviz__marker` +
+                (className ? ` ${className}` : "") +
+                (intent ? ` ${intentClassName(intent)}` : "")
+            }
+            markerWidth="12.5"
+            markerHeight="12.5"
+            viewBox="-10 -10 20 20"
+            refX="0"
+            refY="0"
+            orient={reverse ? "auto-start-reverse" : "auto"}
+        >
+            {markerDisplay[appearance]}
+        </marker>
+    );
+};
+
 const ReactFlowMarkers: FC = () => {
+    const intents = ["none", "primary", "success", "warning", "danger", "info"] as IntentTypes[];
+
     return (
         <svg>
             <defs>
                 <MarkerArrowClosedInverse />
+                {intents.map((intent) => (
+                    <>
+                        <ReactFlowMarker appearance="arrow-closed" intent={intent} />
+                        <ReactFlowMarker appearance="arrow-closed" intent={intent} reverse />
+                    </>
+                ))}
             </defs>
         </svg>
     );
 };
 
-export { MarkerArrowClosedInverse, ReactFlowMarkers };
+export { MarkerArrowClosedInverse, ReactFlowMarkers, ReactFlowMarker };

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

@@ -0,0 +1,27 @@
+marker[id|="react-flow__marker"] {
+    color: var(--marker-intent-color);
+
+    &.#{$eccgui}-intent--none {
+        --marker-intent-color: #{$reactflow-edge-stroke-color-default};
+    }
+
+    &.#{$eccgui}-intent--primary {
+        --marker-intent-color: #{$eccgui-color-primary};
+    }
+
+    &.#{$eccgui}-intent--info {
+        --marker-intent-color: #{$eccgui-color-info-text};
+    }
+
+    &.#{$eccgui}-intent--success {
+        --marker-intent-color: #{$eccgui-color-success-text};
+    }
+
+    &.#{$eccgui}-intent--warning {
+        --marker-intent-color: #{$eccgui-color-warning-text};
+    }
+
+    &.#{$eccgui}-intent--danger {
+        --marker-intent-color: #{$eccgui-color-danger-text};
+    }
+}