@eccenca/gui-elements 24.4.1 → 25.0.0-bugfixcenterednodecontentmenuitemscmem7184.0

package/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 {
@@ -26,15 +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.
-     */
-    inversePath?: boolean;
     /**
-     * Reference link to the SVG marker used for the start of the edge
+     * 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
      */
-    markerStart?: string;
+    arrowDirection?: "normal" | "inversed" | "bidirectional"; // FIXME: direction of animation is not inverted
     /**
      * Callback handler that returns a React element used as edge title.
      */
@@ -46,19 +46,35 @@ export interface EdgeDefaultDataProps {
     edgeSvgProps?: React.SVGProps<SVGGElement>;
 }
 
-export interface EdgeDefaultProps extends ReactFlowEdgeProps {
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+export 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
+ */
+export 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 +110,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 +150,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 ReactFlowVersions.V9:
+            return <EdgeDefaultV9 {...(props as EdgeDefaultV9Props)} />;
+        case ReactFlowVersions.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

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

@@ -1,44 +1,32 @@
-import { memo } from "react";
-import React from "react";
-import { BaseEdge, Edge, EdgeProps, EdgeText, getBezierPath, getEdgeCenter } from "@xyflow/react";
+import React, { memo } from "react";
+import { BaseEdge, Edge, EdgeProps, EdgeText, GetBezierPathParams } 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";
+import { getStraightPath } from "./utils";
 
-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;
+/**
+ * @deprecated (v26) use EdgeDefaultDataProps
+ */
+export interface EdgeDefaultV12DataProps extends Record<string, unknown>, EdgeDefaultDataProps {
     /**
-     * Callback handler that returns a React element used as edge title.
+     * Set the marker used on the start or end of the edge.
      */
-    renderLabel?: (edgeCenter: [number, number, number, number]) => React.ReactNode;
+    markerAppearance?: "arrow-closed" | "none";
+}
+
+/**
+ * @deprecated (v26) use EdgeDefaultProps
+ */
+export type EdgeDefaultV12Props = EdgeProps<Edge<EdgeDefaultV12DataProps>> & {
     /**
-     * Properties are forwarded to the internally used SVG `g` element.
-     * Data attributes for test ids coud be included here.
+     * Callback handler that returns SVG path and label position of the edge.
      */
-    edgeSvgProps?: React.SVGProps<SVGGElement>;
+    getPath?: (
+        edgeParams: Omit<GetBezierPathParams, "curvature"> & Record<string, unknown>
+    ) => [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number];
 };
 
 /**
@@ -62,11 +50,20 @@ export const EdgeDefaultV12 = memo(
         labelBgPadding = [5, 5],
         labelBgBorderRadius = 3,
         data = {},
+        getPath = getStraightPath,
         ...edgeOriginalProperties
-    }: EdgeProps<Edge<EdgeDefaultV12DataProps>>) => {
-        const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath, strokeType } = data;
+    }: EdgeDefaultV12Props) => {
+        const {
+            pathGlowWidth = 10,
+            highlightColor,
+            renderLabel,
+            edgeSvgProps,
+            intent,
+            arrowDirection = "normal",
+            strokeType,
+        } = data;
 
-        const [edgePath, labelX, labelY] = getBezierPath({
+        const [edgePath, labelX, labelY] = getPath({
             sourceX,
             sourceY,
             sourcePosition,
@@ -81,19 +78,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}
@@ -103,50 +93,61 @@ export const EdgeDefaultV12 = memo(
                 />
             ) : null);
 
+        const appearance = data.markerAppearance ?? "arrow-closed";
+
+        const marker =
+            appearance !== "none"
+                ? {
+                      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,
+                  }
+                : {};
+
         return (
             <g
-                className={
-                    "react-flow__edge " +
-                    edgeDefaultUtils.createEdgeDefaultClassName(
-                        { intent },
-                        `${edgeOriginalProperties.selected ? "selected" : ""}`
-                    )
-                }
+                {...edgeSvgProps}
+                className={edgeDefaultUtils.createEdgeDefaultClassName(
+                    { intent },
+                    `${edgeSvgProps?.className ?? ""}`,
+                    ReactFlowVersions.V12
+                )}
                 tabIndex={0}
                 role="button"
                 data-id={id}
                 aria-label={`Edge from ${edgeOriginalProperties.source} to ${edgeOriginalProperties.target}`}
                 aria-describedby={`react-flow__edge-desc-${id}`}
             >
-                <g className={edgeSvgProps?.className ?? ""}>
-                    {highlightColor && (
-                        <path
-                            d={edgePath}
-                            className={edgeDefaultUtils.createEdgeDefaultClassName(
-                                { highlightColor },
-                                "react-flow__edge-path-highlight"
-                            )}
-                            strokeWidth={10}
-                            style={{
-                                ...highlightCustomPropertySettings,
-                            }}
-                        />
-                    )}
-
-                    <BaseEdge
-                        id={id}
-                        path={edgePath}
-                        markerStart={inversePath ? "url(#arrow-closed-reverse)" : undefined}
-                        markerEnd={!inversePath ? "url(#arrow-closed)" : undefined}
-                        className={edgeDefaultUtils.createEdgeDefaultClassName({ strokeType })}
-                        interactionWidth={pathGlowWidth}
+                {highlightColor && (
+                    <path
+                        d={edgePath}
+                        className={edgeDefaultUtils.createEdgeDefaultClassName(
+                            { highlightColor },
+                            "react-flow__edge-path-highlight"
+                        )}
+                        strokeWidth={pathGlowWidth}
                         style={{
-                            ...edgeSvgProps?.style,
-                            ...edgeStyle,
-                            color: edgeStyle.color || edgeStyle.stroke,
+                            ...highlightCustomPropertySettings,
                         }}
                     />
-                </g>
+                )}
+                <BaseEdge
+                    id={id}
+                    path={edgePath}
+                    {...marker}
+                    className={edgeDefaultUtils.createEdgeDefaultClassName({ strokeType })}
+                    interactionWidth={pathGlowWidth}
+                    style={{
+                        ...edgeSvgProps?.style,
+                        ...edgeStyle,
+                        color: edgeStyle.color || edgeStyle.stroke,
+                    }}
+                />
                 {renderedLabel}
             </g>
         );

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

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

@@ -28,7 +28,7 @@ export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     fullWidth?: boolean;
     /**
-     * Label is diaplayed without a box that comes with borders and background color.
+     * Label is displayed without a box that comes with borders and background color.
      */
     loose?: boolean;
     /**

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

@@ -0,0 +1,53 @@
+import React from "react";
+import {
+    ConnectionLineComponentProps,
+    ConnectionLineType,
+} from "@xyflow/react";
+
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+
+import { EdgeBezier, EdgeDefaultV12Props,EdgeStep, EdgeStraight } from "./../index";
+
+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} />;
+};
+

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