@eccenca/gui-elements 24.4.1 → 25.0.0-rc.1

package/src/extensions/react-flow/edges/EdgeStep.tsx

@@ -1,16 +1,51 @@
 import React, { memo } from "react";
+import { Edge, EdgeProps, getSmoothStepPath } from "@xyflow/react";
 
-import { EdgeDefault, EdgeDefaultDataProps, EdgeDefaultProps } from "./EdgeDefault";
+import { ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
+
+import { EdgeDefault, EdgeDefaultV9DataProps, EdgeDefaultV9Props } from "./EdgeDefault";
+import { EdgeDefaultV12DataProps, EdgeDefaultV12Props } from "./EdgeDefaultV12";
 import { drawEdgeStep } from "./utils";
 
-interface EdgeStepDataProps extends EdgeDefaultDataProps {
+interface EdgeStepDataV9Props extends EdgeDefaultV9DataProps {
+    stepCornerRadius?: number;
+}
+interface EdgeStepDataV12Props extends EdgeDefaultV12DataProps {
     stepCornerRadius?: number;
 }
 
-export interface EdgeStepProps extends EdgeDefaultProps {
-    data?: EdgeStepDataProps;
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+export interface EdgeStepV9Props extends EdgeDefaultV9Props {
+    data?: EdgeStepDataV9Props;
 }
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+export interface EdgeStepV12Props extends Omit<EdgeDefaultV12Props, "data">, EdgeProps<Edge<EdgeStepDataV12Props>> {}
+
+export type EdgeStepProps = EdgeStepV9Props | EdgeStepV12Props;
 
-export const EdgeStep = memo((edge: EdgeStepProps) => {
-    return <EdgeDefault {...edge} drawSvgPath={drawEdgeStep} />;
+/**
+ * This element cannot be used directly, it must be connected via a `edgeTypes` definition.
+ * @see https://reactflow.dev/docs/api/nodes/
+ */
+export const EdgeStep = memo((props: EdgeStepProps) => {
+    const flowVersionCheck = useReactFlowVersion();
+    switch (flowVersionCheck) {
+        case ReactFlowVersions.V9:
+            return <EdgeDefault {...(props as EdgeDefaultV9Props)} drawSvgPath={drawEdgeStep} />;
+        case ReactFlowVersions.V12:
+            return (
+                <EdgeDefault
+                    {...(props as EdgeDefaultV12Props)}
+                    getPath={(params) => {
+                        return getSmoothStepPath({ ...params, borderRadius: props.data?.stepCornerRadius ?? 7 });
+                    }}
+                />
+            );
+        default:
+            return <></>;
+    }
 });

package/src/extensions/react-flow/edges/EdgeStraight.tsx

@@ -0,0 +1 @@
+export { EdgeDefault as EdgeStraight } from "./EdgeDefault";

package/src/extensions/react-flow/edges/_edges.scss

@@ -10,7 +10,7 @@
     path[class*="react-flow__edge"],
     rect[class*="react-flow__edge"] {
         stroke-opacity: $reactflow-edge-stroke-opacity-default;
-        shape-rendering: optimizespeed;
+        shape-rendering: $reactflow-edge-rendering;
     }
 
     text[class*="react-flow__edge"] {
@@ -49,16 +49,26 @@
             opacity: $reactflow-edge-stroke-opacity-selected;
         }
     }
+
+    &.selected,
+    &:focus,
+    &:focus-visible {
+        outline: none;
+    }
 }
 
 path.react-flow__edge-path {
     stroke: currentcolor;
     stroke-opacity: $reactflow-edge-stroke-opacity-default;
-    stroke-width: 2;
+    stroke-width: $reactflow-edge-stroke-width-default;
+
+    .react-flow__edge:hover & {
+        stroke-width: $reactflow-edge-stroke-width-hover;
+    }
 
     .react-flow__edge.selected & {
         stroke: currentcolor;
-        stroke-width: 2;
+        stroke-width: $reactflow-edge-stroke-width-selected;
     }
 }
 
@@ -72,11 +82,11 @@ path.react-flow__edge-interaction {
     }
 
     .react-flow__edge:hover & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-hover * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-hover * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 
     .react-flow__edge.selected & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-selected * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 }
 
@@ -90,11 +100,11 @@ path.react-flow__edge-path-glow {
     }
 
     .react-flow__edge:hover & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-hover * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-hover * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 
     .react-flow__edge.selected & {
-        stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
+        stroke-opacity: $reactflow-edge-stroke-opacity-selected * $reactflow-edge-stroke-opacity-interaction-ratio;
     }
 
     .react-flow__edge.animated & {
@@ -143,8 +153,8 @@ path.react-flow__edge-path--stroke-double {
 path.react-flow__edge-path--stroke-doubledashed {
     filter: drop-shadow(1px 1px 1px currentcolor) drop-shadow(-1px -1px 1px currentcolor);
     stroke: #fff !important;
-    stroke-dasharray: 5;
     stroke-opacity: 1 !important;
+    stroke-dasharray: 5;
 }
 
 // Intent states
@@ -193,8 +203,8 @@ path.react-flow__edge-path-highlight {
         drop-shadow(-2px 2px 1px var(--edge-highlight-alternate-color, var(--edge-highlight-default-color)));
     fill: none;
     stroke: #fff;
-    stroke-linecap: round;
     stroke-opacity: 1;
+    stroke-linecap: round;
 }
 
 .#{$eccgui}-graphviz__edge--highlight-default {
@@ -256,15 +266,19 @@ path.react-flow__edge-path-highlight {
     polyline {
         fill: currentcolor;
         stroke: currentcolor;
+        stroke-width: 1px;
         stroke-linecap: square;
         stroke-linejoin: miter;
-        stroke-width: 1px;
         transform: scale(1.75, 0.75);
     }
 }
 
 // Custom label
 
+.#{$eccgui}-graphviz__edge-labelobject {
+    overflow: visible;
+}
+
 .#{$eccgui}-graphviz__edge-label {
     --#{$eccgui}-reactflow-edge-label-color: currentcolor;
     --#{$eccgui}-reactflow-edge-label-color-background: #{$card-background-color};
@@ -330,8 +344,8 @@ path.react-flow__edge-path-highlight {
     flex-shrink: 1;
     margin: 0 $eccgui-size-block-whitespace * 0.25;
     overflow: hidden;
-    text-align: center;
     text-overflow: ellipsis;
+    text-align: center;
     white-space: nowrap;
 
     .#{$eccgui}-graphviz__edge-label--fullwidth & {

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

@@ -2,13 +2,13 @@ import React, { useCallback, useEffect, useState } from "react";
 import { ArrowHeadType, Elements, getMarkerEnd, ReactFlowProvider } from "react-flow-renderer";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { EdgeLabel, EdgeLabelObject, ReactFlow } from "./../../../../../index";
+import { EdgeDefaultProps, EdgeLabel, EdgeLabelObject, ReactFlowExtended } from "./../../../../../index";
+import { edgeTypes } from "./../../../../cmem/react-flow/configuration/workflow";
 import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
-import { edgeTypes } from "./../edgeTypes";
 
 const EdgeDefaultDataProps = (data: EdgeData) => {
     // this is only a mock to get it as sub element in the table
-    return <></>;
+    return <>{data.intent}</>;
 };
 
 export default {
@@ -23,7 +23,7 @@ export default {
     },
 } as Meta<typeof EdgeDefault>;
 
-const EdgeDefaultExample = (args: any) => {
+const EdgeDefaultExample = (args: EdgeDefaultProps) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
 
@@ -66,7 +66,7 @@ const EdgeDefaultExample = (args: any) => {
 
     return (
         <ReactFlowProvider>
-            <ReactFlow
+            <ReactFlowExtended
                 elements={elements}
                 style={{ height: "400px" }}
                 onLoad={onLoad}
@@ -117,7 +117,6 @@ InverseEdge.args = {
     id: "inverse",
     arrowHeadType: undefined,
     data: {
-        inversePath: true,
         markerStart: getMarkerEnd(`${ArrowHeadType.ArrowClosed}-inverse` as ArrowHeadType),
     },
 };

package/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,14 +93,12 @@ 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}
@@ -135,6 +124,15 @@ const defaultEdge: Edge = {
 export const Default = Template.bind({});
 Default.args = defaultEdge;
 
+export const WithoutArrow = Template.bind({});
+WithoutArrow.args = {
+    ...Default.args,
+    id: "noarrow",
+    data: {
+        markerAppearance: "none",
+    },
+};
+
 export const CustomLabel = Template.bind({});
 CustomLabel.args = {
     ...Default.args,
@@ -154,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",
     },
 };
 

package/src/extensions/react-flow/edges/utils.ts

@@ -1,4 +1,5 @@
-import { Position } from "react-flow-renderer";
+import { getEdgeCenter, Position } from "react-flow-renderer";
+import { GetBezierPathParams } from "@xyflow/react";
 
 import { EdgeDefaultProps } from "./EdgeDefault";
 import { EdgeStepProps } from "./EdgeStep";
@@ -145,6 +146,23 @@ export const drawEdgeStraight = ({
     });
 };
 
+export const getStraightPath = (params: Omit<GetBezierPathParams, "curvature">) => {
+    const path = drawEdgeStraight(params as EdgeDefaultProps);
+    const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({
+        sourceX: params.sourceX,
+        sourceY: params.sourceY,
+        targetX: params.targetX,
+        targetY: params.targetY,
+    });
+    return [path, labelX, labelY, offsetX, offsetY] as [
+        path: string,
+        labelX: number,
+        labelY: number,
+        offsetX: number,
+        offsetY: number
+    ];
+};
+
 export const drawEdgeStep = ({
     sourceX,
     sourceY,

package/src/extensions/react-flow/handles/HandleDefault.tsx

@@ -1,6 +1,5 @@
 import React, { memo } from "react";
-import { Handle as HandleLegacy, HandleProps as ReactFlowHandleLegacyProps } from "react-flow-renderer";
-import { Handle as HandleNext, HandleProps as ReactFlowHandleNextProps } from "react-flow-renderer-lts";
+import { Handle as HandleV9, HandleProps as ReactFlowHandleV9Props } from "react-flow-renderer";
 import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xyflow/react";
 import { Classes as BlueprintClasses } from "@blueprintjs/core";
 
@@ -10,6 +9,7 @@ import { TooltipProps } from "../../../index";
 import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport";
 
 import { HandleContent, HandleContentProps } from "./HandleContent";
+import {Intent} from "@blueprintjs/core/src/common/intent";
 
 export type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency";
 
@@ -35,33 +35,44 @@ interface HandleExtensionProps
     children?: HandleContentProps["children"];
 }
 
-export interface HandleProps extends HandleExtensionProps, ReactFlowHandleLegacyProps {}
-export interface HandleNextProps extends HandleExtensionProps, ReactFlowHandleNextProps {}
+/**
+ * @deprecated (v26) use only `HandleDefaultProps`
+ */
+export interface HandleV9Props extends HandleExtensionProps, ReactFlowHandleV9Props {}
+/**
+ * @deprecated (v26) use only `HandleDefaultProps`
+ */
 export interface HandleV12Props extends HandleExtensionProps, ReactFlowHandleV12Props {}
-export type HandleDefaultProps = HandleProps | HandleNextProps | HandleV12Props;
+
+/**
+ * Combined interface, later this will be only a copy of `HandleV12Props`.
+ */
+export type HandleDefaultProps = HandleV9Props | HandleV12Props;
 
 export const HandleDefault = memo(
     ({ flowVersion, data, tooltip, children, category, intent, ...handleProps }: HandleDefaultProps) => {
         const evaluateFlowVersion = useReactFlowVersion();
         const flowVersionCheck = flowVersion || evaluateFlowVersion;
-        const handleDefaultRef = React.useRef<any>();
+        const handleDefaultRef = React.useRef<HTMLDivElement>(null);
         const [extendedTooltipDisplayed, setExtendedTooltipDisplayed] = React.useState<boolean>(false);
 
-        let toolsTarget: HTMLElement[];
+        let toolsTarget: HTMLCollectionOf<Element>;
 
         React.useEffect(() => {
-            toolsTarget = handleDefaultRef.current.getElementsByClassName(`${eccgui}-graphviz__handletools-target`);
-            if (toolsTarget && toolsTarget[0]) {
-                // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
-                // need to be re-evaluated then
-                // @see https://connect.mozilla.org/t5/ideas/when-is-has-css-selector-going-to-be-fully-implemented-in/idi-p/23794
-                handleDefaultRef.current.classList.add(`ffpolyfill-has-${eccgui}-graphviz__handletools-target`);
+            if (handleDefaultRef.current) {
+                toolsTarget = handleDefaultRef.current.getElementsByClassName(`${eccgui}-graphviz__handletools-target`);
+                if (toolsTarget && toolsTarget[0]) {
+                    // Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
+                    // need to be re-evaluated then
+                    // @see https://connect.mozilla.org/t5/ideas/when-is-has-css-selector-going-to-be-fully-implemented-in/idi-p/23794
+                    handleDefaultRef.current.classList.add(`ffpolyfill-has-${eccgui}-graphviz__handletools-target`);
+                }
             }
         });
 
         const tooltipTitle = tooltip ? { title: tooltip } : {};
 
-        const handleContentTooltipProps = {
+        const handleContentTooltipProps: Partial<TooltipProps> = {
             placement:
                 handleProps.position === "left" || handleProps.position === "right"
                     ? `${handleProps.position}-end`
@@ -74,39 +85,39 @@ export const HandleDefault = memo(
                     },
                 },
             },
-            intent: intent,
+            intent: intent as Intent,
             className: `${eccgui}-graphviz__handle__tooltip-target`,
             isOpen: extendedTooltipDisplayed,
-        };
+        }
 
-        const handleContentProps = {
+        const handleContentProps = React.useMemo(() => ({
             ...data,
             tooltipProps: {
                 ...handleContentTooltipProps,
                 ...data?.tooltipProps,
             } as TooltipProps,
-        };
+        }), [intent, category, handleProps.isConnectable])
 
-        const handleContent = <HandleContent {...handleContentProps}>{children}</HandleContent>;
+        const handleContent = React.useMemo(() => <HandleContent {...handleContentProps}>{children}</HandleContent>, [])
 
         let switchTooltipTimerOn: ReturnType<typeof setTimeout>;
         let switchToolsTimerOff: ReturnType<typeof setTimeout>;
 
-        const handleConfig = {
+        const handleConfig =  React.useMemo(() => ({
             ...handleProps,
             ...tooltipTitle,
-            className: intent ? `${intentClassName(intent)} ` : "",
-            onClick: (e: any) => {
+            className: intent ? `${intentClassName(intent)} ` : "" + ` ${eccgui}-graphviz__handle ${eccgui}-graphviz__handle--${flowVersionCheck}`,
+            onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
                 if (handleProps.onClick) {
                     handleProps.onClick(e);
                 }
                 if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
                     setExtendedTooltipDisplayed(false);
-                    toolsTarget[0].click();
+                    (toolsTarget[0] as HTMLElement).click();
                 }
             },
             "data-category": category,
-            onMouseEnter: (e: any) => {
+            onMouseEnter: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
                 if (switchToolsTimerOff) clearTimeout(switchToolsTimerOff);
                 if (e.target === handleDefaultRef.current) {
                     switchTooltipTimerOn = setTimeout(
@@ -118,24 +129,18 @@ export const HandleDefault = memo(
             onMouseLeave: () => {
                 if (switchTooltipTimerOn) clearTimeout(switchTooltipTimerOn);
                 if (toolsTarget.length > 0 && toolsTarget[0].classList.contains(BlueprintClasses.POPOVER_OPEN)) {
-                    switchToolsTimerOff = setTimeout(() => toolsTarget[0].click(), 500);
+                    switchToolsTimerOff = setTimeout(() => (toolsTarget[0] as HTMLElement).click(), 500);
                 }
                 setExtendedTooltipDisplayed(false);
             },
-        };
+        }), [intent, category, tooltip, handleProps.isConnectable, handleProps.style]);
 
         switch (flowVersionCheck) {
-            case "legacy":
-                return (
-                    <HandleLegacy ref={handleDefaultRef} {...(handleConfig as HandleProps)}>
-                        {handleContent}
-                    </HandleLegacy>
-                );
-            case "next":
+            case "v9":
                 return (
-                    <HandleNext ref={handleDefaultRef} {...(handleConfig as HandleNextProps)}>
+                    <HandleV9 ref={handleDefaultRef} {...(handleConfig as HandleV9Props)}>
                         {handleContent}
-                    </HandleNext>
+                    </HandleV9>
                 );
             case "v12":
                 return (

package/src/extensions/react-flow/handles/_handles.scss

@@ -90,7 +90,7 @@ div.react-flow__handle {
     }
 
     &[data-category="dependency"] {
-        background-color: color-mix(in srgb, currentcolor 39%, white);
+        background-color: eccgui-color-mix(currentcolor 39%, white);
         border-radius: 0;
         transform: rotate(45deg);
 
@@ -118,7 +118,7 @@ div.react-flow__handle {
     }
 
     &[data-category="unknown"] {
-        background-color: color-mix(in srgb, currentcolor 39%, white);
+        background-color: eccgui-color-mix(currentcolor 39%, white);
     }
 
     .react-flow__node:hover &.connectable {

package/src/extensions/react-flow/handles/stories/HandleDefault.stories.tsx

@@ -8,16 +8,15 @@ import { Definitions } from "../../../../common/Intent";
 import {
     Button,
     HandleDefault,
-    HandleProps,
+    HandleDefaultProps,
     HandleTools,
     Menu,
     MenuItem,
-    ReactFlow,
+    ReactFlowExtended,
     SimpleDialog,
 } from "./../../../../../index";
-import { edgeTypes } from "./../../edges/edgeTypes";
 
-const HandleDefaultDataProps = (data: HandleProps["data"]) => {
+const HandleDefaultDataProps = (data: HandleDefaultProps["data"]) => {
     // this is only a mock to get it as sub element in the table
     return <>{data?.extendedTooltip}</>;
 };
@@ -66,11 +65,10 @@ const HandleDefaultExample = (args: any) => {
     return (
         <OverlaysProvider>
             <ReactFlowProvider>
-                <ReactFlow
+                <ReactFlowExtended
                     elements={elements}
                     style={{ height: "400px" }}
                     onLoad={onLoad}
-                    edgeTypes={edgeTypes}
                     defaultZoom={1}
                 />
             </ReactFlowProvider>

package/src/extensions/react-flow/index.ts

@@ -6,17 +6,19 @@ export * from "./nodes/nodeUtils";
 export * from "./handles/HandleDefault";
 export * from "./handles/HandleContent";
 export * from "./handles/HandleTools";
+export * from "./edges/EdgeBezier";
 export * from "./edges/EdgeDefault";
+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";
 export * from "./edges/EdgeDefaultV12";
 export * from "./markers/ReactFlowMarkers";
 export * from "./minimap/MiniMap";
+export * from "./minimap/MiniMapV12";
 export * from "./minimap/utils";
-export * from "./versionsupport";
-
-// deprecated exports
-export { nodeTypes } from "./nodes/nodeTypes"; // @deprecated removed in v25
-export { edgeTypes } from "./edges/edgeTypes"; // @deprecated removed in v25
+export * from "./versionsupport";

package/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

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