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

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

@@ -1,12 +1,220 @@
-// needed styles from "@xyflow/react/dist/style.css" to ensure proper functionality
+/**
+ * We need some styles from "@xyflow/react/dist/style.css" to ensure proper functionality.
+ * Some of them are directly included to the component styles.
+ * Other stuff is here.
+ * Colors are removed or altered.
+ */
+
+.react-flow {
+    direction: ltr;
+    z-index: 0;
+}
+
+.react-flow__pane {
+    z-index: 1;
+}
+
+.react-flow__pane.draggable {
+    cursor: grab;
+}
+
+.react-flow__pane.dragging {
+    cursor: grabbing;
+}
+
+.react-flow__pane.selection {
+    cursor: pointer;
+}
+
+.react-flow__viewport {
+    z-index: 2;
+    pointer-events: none;
+    transform-origin: 0 0;
+}
+
+.react-flow__renderer {
+    z-index: 4;
+}
+
+.react-flow__selection {
+    z-index: 6;
+}
+
+.react-flow__controls {
+    display: flex;
+    flex-direction: column;
+}
+
+.react-flow__controls.horizontal {
+    flex-direction: row;
+}
+
+.react-flow__controls-button {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.react-flow__controls-button svg {
+    width: 100%;
+    max-width: 12px;
+    max-height: 12px;
+    fill: currentcolor;
+}
+
+.react-flow .react-flow__edges {
+    position: absolute;
+}
+
+.react-flow .react-flow__edges svg:not(.#{$eccgui}-icon) {
+    position: absolute;
+    overflow: visible;
+    pointer-events: none;
+}
+
+.react-flow__edge {
+    pointer-events: visiblestroke;
+}
+
+.react-flow__edge.inactive {
+    pointer-events: none;
+}
+
+.react-flow__edge-textwrapper {
+    pointer-events: all;
+}
+
+.react-flow__edge .react-flow__edge-text {
+    pointer-events: none;
+    user-select: none;
+}
+
+.react-flow__connection {
+    pointer-events: none;
+}
+
 svg.react-flow__connectionline {
     position: absolute;
     z-index: 1001;
     overflow: visible;
 }
 
-.react-flow .react-flow__edges svg {
+.react-flow__nodes {
+    pointer-events: none;
+    transform-origin: 0 0;
+}
+
+.react-flow__node {
     position: absolute;
-    overflow: visible;
+    box-sizing: border-box;
+    pointer-events: all;
+    cursor: default;
+    user-select: none;
+    transform-origin: 0 0;
+}
+
+.react-flow__node.selectable {
+    cursor: pointer;
+}
+
+.react-flow__node.draggable {
+    pointer-events: all;
+    cursor: grab;
+}
+
+.react-flow__node.draggable.dragging {
+    cursor: grabbing;
+}
+
+.react-flow__nodesselection {
+    z-index: 3;
     pointer-events: none;
+    transform-origin: left top;
+}
+
+.react-flow__nodesselection-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: grab;
+}
+
+.react-flow__handle.connectingfrom {
+    pointer-events: all;
+}
+
+.react-flow__handle.connectionindicator {
+    pointer-events: all;
+}
+
+.react-flow__edgeupdater {
+    pointer-events: all;
+    cursor: move;
+}
+
+.react-flow__minimap-svg {
+    display: block;
+}
+
+.react-flow__node.selectable:focus,
+.react-flow__node.selectable:focus-visible {
+    outline: none;
+}
+
+.react-flow__nodesselection-rect:focus,
+.react-flow__nodesselection-rect:focus-visible,
+.react-flow__selection:focus,
+.react-flow__selection:focus-visible {
+    outline: none;
+}
+
+.react-flow__controls-button:disabled {
+    pointer-events: none;
+}
+
+// -- adjustments
+
+.react-flow__background {
+    z-index: -1;
+    pointer-events: none;
+    background-color: $reactflow-background-color;
+    border: solid 1px $eccgui-color-separation-divider;
+}
+
+.react-flow__background-pattern,
+.react-flow__background pattern *:first-child:not(.react-flow__background-pattern) {
+    opacity: $eccgui-opacity-muted;
+    stroke: $eccgui-color-separation-divider;
+}
+
+.react-flow__background-pattern.dots,
+.react-flow__background pattern circle:first-child:not(.react-flow__background-pattern) {
+    fill: #{eccgui-color-var("identity", "text", "500")};
+}
+
+.react-flow__background-pattern.cross {
+    opacity: $eccgui-opacity-disabled;
+    stroke: #{eccgui-color-var("identity", "text", "500")};
+    stroke-width: 0.3;
+}
+
+.react-flow__background-pattern.lines {
+    stroke-width: 0.4;
+}
+
+.react-flow__attribution {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    padding: $eccgui-size-inline-whitespace * 0.5 $eccgui-size-inline-whitespace;
+    margin: 0;
+    font-size: $eccgui-size-typo-caption * 0.61;
+    background: transparent;
+    opacity: $eccgui-opacity-muted;
+}
+
+.react-flow__attribution a {
+    color: $eccgui-color-workspace-text;
+    text-decoration: none;
 }

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

@@ -0,0 +1,47 @@
+import React, { memo } from "react";
+import { Edge, EdgeProps, getBezierPath } from "@xyflow/react";
+
+import { ReactFlowVersions, useReactFlowVersion } from "../versionsupport";
+
+import { EdgeDefault, EdgeDefaultV9Props } from "./EdgeDefault";
+import { EdgeDefaultV12DataProps, EdgeDefaultV12Props } from "./EdgeDefaultV12";
+
+interface EdgeBezierDataV12Props extends EdgeDefaultV12DataProps {
+    curvature?: number;
+}
+
+/**
+ * @deprecated (v26) v9 support is removed after v25
+ */
+export interface EdgeBezierV12Props
+    extends Omit<EdgeDefaultV12Props, "data">,
+        EdgeProps<Edge<EdgeBezierDataV12Props>> {}
+
+export type EdgeBezierProps = EdgeDefaultV9Props | EdgeBezierV12Props;
+
+/**
+ * This element cannot be used directly, it must be connected via a `edgeTypes` definition.
+ * Our v9 edges do not support bezier paths.
+ * @see https://reactflow.dev/docs/api/nodes/
+ */
+export const EdgeBezier = memo((props: EdgeBezierProps) => {
+    const flowVersionCheck = useReactFlowVersion();
+    switch (flowVersionCheck) {
+        case ReactFlowVersions.V9:
+            return <EdgeDefault {...(props as EdgeDefaultV9Props)} />;
+        case ReactFlowVersions.V12:
+            return (
+                <EdgeDefault
+                    {...(props as EdgeDefaultV12Props)}
+                    getPath={(params) => {
+                        return getBezierPath({
+                            ...params,
+                            curvature: (props.data as EdgeBezierDataV12Props)?.curvature,
+                        });
+                    }}
+                />
+            );
+        default:
+            return <></>;
+    }
+});

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,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} />;
+};
+