@eccenca/gui-elements 23.1.0-easynav.0 → 23.1.0-easynav.2

package/dist/esm/extensions/react-flow/versionsupport.js

@@ -1,2 +1,32 @@
-export {};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { useStoreState as useStoreStateFlowLegacy } from "react-flow-renderer";
+import { useStore as useStoreStateFlowNext } from "react-flow-renderer-lts";
+export var useReactFlowVersion = function () {
+    try {
+        var _a = __read(useStoreStateFlowLegacy(function (state) { return state.transform; }), 3), zoom = _a[2];
+        return !!zoom ? "legacy" : "none";
+    }
+    catch (_b) { }
+    try {
+        var _c = __read(useStoreStateFlowNext(function (state) { return state.transform; }), 3), zoom = _c[2];
+        return !!zoom ? "next" : "none";
+    }
+    catch (_d) { }
+    return "none";
+};
 //# sourceMappingURL=versionsupport.js.map

package/dist/esm/extensions/react-flow/versionsupport.js.map

@@ -1 +1 @@
-{"version":3,"file":"versionsupport.js","sourceRoot":"","sources":["../../../../src/extensions/react-flow/versionsupport.ts"],"names":[],"mappings":""}
+{"version":3,"file":"versionsupport.js","sourceRoot":"","sources":["../../../../src/extensions/react-flow/versionsupport.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,IAAI,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAS5E,MAAM,CAAC,IAAM,mBAAmB,GAAG;IAC/B,IAAI;QACM,IAAA,KAAA,OAAa,uBAAuB,CAAC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,SAAS,EAAf,CAAe,CAAC,IAAA,EAA3D,IAAI,QAAuD,CAAC;QACvE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;KACrC;IAAC,WAAM,GAAE;IACV,IAAI;QACM,IAAA,KAAA,OAAa,qBAAqB,CAAC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,SAAS,EAAf,CAAe,CAAC,IAAA,EAAzD,IAAI,QAAqD,CAAC;QACrE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;KACnC;IAAC,WAAM,GAAE;IAEV,OAAO,MAAM,CAAC;AAClB,CAAC,CAAA"}

package/dist/types/extensions/react-flow/edges/EdgeDefault.d.ts

@@ -1,13 +1,27 @@
 import React from 'react';
 import { EdgeProps as ReactFlowEdgeProps } from "react-flow-renderer/dist/types";
+import { IntentTypes } from "../../../common/Intent";
+import { NodeHighlightColor } from "./../nodes/NodeContent";
 export interface EdgeDefaultDataProps {
+    /**
+     * 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;
     inversePath?: boolean;
     /**
-     * Reference linnk to the SVG marker used for the start of the edge
+     * Reference link to the SVG marker used for the start of the edge
      */
     markerStart?: string;
     /**
@@ -26,3 +40,4 @@ export interface EdgeDefaultProps extends ReactFlowEdgeProps {
     drawSvgPath?: (edge: ReactFlowEdgeProps) => string;
 }
 export declare const EdgeDefault: React.MemoExoticComponent<(edge: EdgeDefaultProps) => JSX.Element>;
+export declare const createEdgeDefaultClassName: ({ strokeType, intent, highlightColor, }: EdgeDefaultDataProps, baseClass?: string) => string;

package/dist/types/extensions/react-flow/edges/EdgeLabel.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+import { DepictionProps } from "../../../index";
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import { IntentTypes } from "../../../common/Intent";
+export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Depiction element displayed left from the label.
+     */
+    depiction?: ValidIconName | React.ReactElement<DepictionProps>;
+    /**
+     * Label of the edge.
+     * Cannot overflow the parent container.
+     */
+    text: string | JSX.Element;
+    /**
+     * One or multiple other elements displayed right from label.
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * The element is increased in its size.
+     */
+    large?: boolean;
+    /**
+     * Stretches the label component to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Add a info state to the label, visualized by color.
+     */
+    intent?: IntentTypes;
+}
+export declare const EdgeLabel: React.MemoExoticComponent<({ depiction, text, actions, large, fullWidth, intent, ...otherDivProps }: EdgeLabelProps) => JSX.Element>;
+interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
+    /**
+     * The `<EdgeLabel />` element that need to be displayed.
+     */
+    children: React.ReactElement<EdgeLabelProps>;
+    /**
+     * Property from the `renderLabel` callback method.
+     */
+    edgeCenter: [number, number, number, number];
+}
+export declare const EdgeLabelObject: React.MemoExoticComponent<({ children, edgeCenter, ...otherForeignObjectProps }: EdgeLabelObjectProps) => JSX.Element>;
+export {};

package/dist/types/extensions/react-flow/edges/edgeTypes.d.ts

@@ -3,13 +3,14 @@ export declare const edgeTypes: {
     default: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
     straight: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
     step: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => JSX.Element>;
-    smoothstep: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => JSX.Element>;
-    implicitEdge: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
-    importEdge: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
-    subclassEdge: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
-    subpropertyEdge: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
-    rdftypeEdge: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
-    successStep: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => JSX.Element>;
-    warningStep: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => JSX.Element>;
-    dangerStep: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => JSX.Element>;
+    success: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    warning: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    danger: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    implicit: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    import: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    subclass: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    subproperty: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    rdftype: import("react").MemoExoticComponent<(edge: import("./EdgeDefault").EdgeDefaultProps) => JSX.Element>;
+    value: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => JSX.Element>;
+    score: import("react").MemoExoticComponent<(edge: import("./EdgeStep").EdgeStepProps) => JSX.Element>;
 };

package/dist/types/extensions/react-flow/index.d.ts

@@ -3,10 +3,10 @@ export { NodeContent } from "./nodes/NodeContent";
 export { NodeContentExtension } from "./nodes/NodeContentExtension";
 export { NodeTools } from "./nodes/NodeTools";
 export { nodeTypes } from "./nodes/nodeTypes";
-export { EdgeDefault } from "./edges/EdgeDefault";
 export { EdgeStep } from "./edges/EdgeStep";
 export { EdgeTools } from "./edges/EdgeTools";
 export { edgeTypes } from "./edges/edgeTypes";
+export * from "./edges/EdgeLabel";
 export { MarkerArrowClosedInverse } from "./markers/MarkerArrowClosedInverse";
 export { ReactFlowMarkers } from "./markers/ReactFlowMarkers";
 export { MiniMap } from "./minimap/MiniMap";
@@ -16,6 +16,6 @@ export type { NodeProps } from "./nodes/NodeDefault";
 export type { NodeContentProps } from "./nodes/NodeContent";
 export type { NodeContentExtensionProps } from "./nodes/NodeContentExtension";
 export type { NodeToolsProps } from "./nodes/NodeTools";
-export type { EdgeDefaultProps } from "./edges/EdgeDefault";
 export type { EdgeStepProps } from "./edges/EdgeStep";
 export type { MiniMapProps } from "./minimap/MiniMap";
+export * from "./edges/EdgeDefault";

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -1,12 +1,15 @@
 import React from "react";
+import Color from "color";
 import { Position } from "react-flow-renderer";
 import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
 import { DepictionProps } from "../../../components/Depiction/Depiction";
+import { IntentTypes } from "../../../common/Intent";
 import { ReacFlowVersionSupportProps } from "../versionsupport";
 import { HandleProps, HandleNextProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
 import { NodeContentExtensionProps } from "./NodeContentExtension";
 export declare type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
+export declare type NodeHighlightColor = "default" | "alternate" | Color | string;
 export interface IHandleProps extends HandleProps {
     category?: "configuration";
 }
@@ -35,7 +38,11 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Label that is displayed in the node header.
      */
-    label: string;
+    label: string | JSX.Element;
+    /**
+     * Element that is displayed as subline under the label in the header.
+     */
+    labelSubline?: JSX.Element;
     /**
      * Content element, displayed in the node body.
      */
@@ -61,9 +68,35 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      */
     minimalShape?: "none" | "circular" | "rectangular";
     /**
+     * Stretches the node to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Increase the hight of the node header.
+     * Use this for example if you need more space for a label subline.
+     * Also the depiction is displayed larger.
+     */
+    enlargeHeader?: boolean;
+    /**
+     * @deprecated
      * Set the type of used highlights to mark the node.
+     * Replaced by `intent` and `highlightColor` properties.
      */
     highlightedState?: HighlightingState | HighlightingState[];
+    /**
+     * Defines how the borders of a node are displayed.
+     * Use this property to overwrite default styles.
+     * You can use this to visuaize different states or type without depending only on color.
+     */
+    border?: "solid" | "double" | "dashed" | "dotted";
+    /**
+     * Feedback state of the node.
+     */
+    intent?: IntentTypes;
+    /**
+     * Set the type of used highlights to mark the node.
+     */
+    highlightColor?: NodeHighlightColor | [NodeHighlightColor, NodeHighlightColor];
     /**
      * Text used for tooltip used on icon and depiction.
      */
@@ -144,10 +177,14 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      */
     nodeDimensions?: NodeDimensions;
 }
-export declare const gethighlightedStateClasses: (state: any, baseClassName: any) => any;
+export declare const gethighlightedStateClasses: (state: HighlightingState | HighlightingState[], baseClassName: string) => string;
 /**
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, highlightedState, intent, border, highlightColor, handles, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherProps }: NodeContentProps<any>): JSX.Element;
+export declare const evaluateHighlightColors: (baseCustomProperty: string, highlightColor?: NodeHighlightColor | NodeHighlightColor[] | undefined) => {
+    highlightClassNameSuffix: string[];
+    highlightCustomPropertySettings: React.CSSProperties;
+};
 export {};

package/dist/types/extensions/react-flow/versionsupport.d.ts

@@ -2,5 +2,6 @@ export interface ReacFlowVersionSupportProps {
     /**
      * Spevifies the context of the react flow renderer version that is used for the component.
      */
-    flowVersion?: "legacy" | "next";
+    flowVersion?: "legacy" | "next" | "none";
 }
+export declare const useReactFlowVersion: () => "none" | "legacy" | "next";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eccenca/gui-elements",
   "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-  "version": "23.1.0-easynav.0",
+  "version": "23.1.0-easynav.2",
   "license": "Apache-2.0",
   "homepage": "https://github.com/eccenca/gui-elements",
   "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx

@@ -125,8 +125,8 @@ const nodeExamples = {
             },
             position: { x: 50, y: 300 },
         },
-        { id: 'workflow-e1', arrowHeadType: "arrowclosed",source: 'workflow-1', target: 'workflow-2' },
-        { id: 'workflow-e2', arrowHeadType: "arrowclosed",source: 'workflow-2', target: 'workflow-3' },
+        { id: 'workflow-e1', label: "default", arrowHeadType: "arrowclosed",source: 'workflow-1', target: 'workflow-2' },
+        { id: 'workflow-e2', label: "default", arrowHeadType: "arrowclosed",source: 'workflow-2', target: 'workflow-3' },
         { id: 'workflow-e3', type: 'success', label: "success edge", arrowHeadType: "arrowclosed",source: 'workflow-3', target: 'workflow-4' },
         { id: 'workflow-e4', type: 'warning', label: "warning edge", arrowHeadType: "arrowclosed",source: 'workflow-4', target: 'workflow-5' },
         { id: 'workflow-e5', type: 'danger', label: "danger edge", arrowHeadType: "arrowclosed",source: 'workflow-5', target: 'workflow-1' },

package/src/cmem/react-flow/_edges.scss

@@ -5,8 +5,9 @@
 }
 
 @mixin edgecoloring($color) {
-    stroke: $color;
-    color: $color;
+    --#{$eccgui}-reactflow-node-color-default: #{$color};
+    --#{$eccgui}-reactflow-node-color-hover: #{$color};
+    --#{$eccgui}-reactflow-node-color-selected: #{$color};
 }
 
 // Graph edge types

package/src/components/Depiction/Depiction.tsx

@@ -92,18 +92,18 @@ export function Depiction({
 }: DepictionProps) {
     const containerRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-        if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
-            let color = Color("#ffffff")
-            try {
-                color = Color(backgroundColor);
-            } catch(ex) {
-                console.warn("Received invalid background color for depiction: " + backgroundColor)
+    let styleDepictionColors = {};
+    if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
+        try {
+            const color = Color(backgroundColor);
+            styleDepictionColors = {
+                [`--${eccgui}-depiction-background`]: color.rgb().toString(),
+                [`--${eccgui}-depiction-color`]: decideContrastColorValue({testColor: color})
             }
-            containerRef.current!.style.setProperty(`--${eccgui}-depiction-background`, color.rgb().toString());
-            containerRef.current!.style.setProperty(`--${eccgui}-depiction-color`, decideContrastColorValue({testColor: color}));
+        } catch(ex) {
+            console.warn("Received invalid background color for depiction: " + backgroundColor)
         }
-    }, [backgroundColor]);
+    }
 
     const updateSvgResizing = React.useCallback((el: SVGElement) => {
         let preserveAspectRatio = "";
@@ -164,6 +164,7 @@ export function Depiction({
                 (rounded ? ` ${eccgui}-depiction__image--roundedborder` : '') +
                 (padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : '')
             }
+            style={styleDepictionColors as React.CSSProperties}
         >
             {depiction}
         </div>

package/src/extensions/react-flow/_config.scss

@@ -1,16 +1,20 @@
 $reactflow-node-basesize: $button-height !default;
+$reactflow-node-largesize: mini-units(6) !default;
 $reactflow-node-border-color: $eccgui-color-workspace-text !default;
 $reactflow-node-background-color: $button-background-color !default;
 $reactflow-node-color: $eccgui-color-workspace-text !default;
 $reactflow-node-font-size: $eccgui-size-typo-caption !default;
 $reactflow-node-border-width: 2 * $button-border-width !default;
 $reactflow-node-border-radius: $button-border-radius !default;
-$reactflow-edge-stroke-color: rgba($eccgui-color-workspace-text, .61) !default;
+
+$reactflow-edge-stroke-opacity-default: 0.6 !default;
+$reactflow-edge-stroke-opacity-hover: 0.8 !default;
+$reactflow-edge-stroke-opacity-selected: 1 !default;
+$reactflow-edge-stroke-color-default: $eccgui-color-workspace-text !default;
 $reactflow-edge-stroke-color-hover: $eccgui-color-workspace-text !default;
 $reactflow-edge-stroke-color-selected: $eccgui-color-accent !default;
+
 $reactflow-transition-time: 0.25s !default;
 $reactflow-transition-function: "" !default;
 
-$reactflow-edge-stroke-opacity: alpha($reactflow-edge-stroke-color) !default;
-$reactflow-edge-stroke-opacity-hover: alpha($reactflow-edge-stroke-color) !default;
-$reactflow-edge-stroke-opacity-selected: alpha($reactflow-edge-stroke-color) !default;
+$reactflow-transition-anglestart: 270deg;

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

@@ -7,9 +7,24 @@ import {
     getEdgeCenter,
     EdgeText,
 } from "react-flow-renderer";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { IntentTypes, intentClassName } from "../../../common/Intent";
+import { NodeHighlightColor, evaluateHighlightColors } from "./../nodes/NodeContent";
 import { drawEdgeStraight} from "./utils";
 
 export interface EdgeDefaultDataProps {
+    /**
+     * 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.
      */
@@ -20,7 +35,7 @@ export interface EdgeDefaultDataProps {
      */
     inversePath?: boolean;
     /**
-     * Reference linnk to the SVG marker used for the start of the edge
+     * Reference link to the SVG marker used for the start of the edge
      */
     markerStart?: string;
     /**
@@ -49,7 +64,10 @@ export const EdgeDefault = memo(
         } = edge;
         const {
             pathGlowWidth = 10,
-            markerStart
+            markerStart,
+            strokeType,
+            intent,
+            highlightColor,
         } = data;
 
         const pathDisplay = drawSvgPath({...edgeOriginalProperties, data});
@@ -78,18 +96,38 @@ export const EdgeDefault = memo(
         ) : null);
 
         const edgeStyle = edgeOriginalProperties.style ?? {};
+        const {
+            highlightCustomPropertySettings
+        } = evaluateHighlightColors("--edge-highlight", highlightColor);
+
         return (
-            <g style={{...edgeStyle, color: edgeStyle.color || edgeStyle.stroke}}>
+            <g
+                className={createEdgeDefaultClassName({intent}, "")}
+                style={{
+                    ...edgeStyle,
+                    color: edgeStyle.color || edgeStyle.stroke
+                }}
+            >
+                { highlightColor && (
+                    <path
+                        d={pathDisplay}
+                        className={createEdgeDefaultClassName({highlightColor}, "react-flow__edge-path-highlight")}
+                        strokeWidth={pathGlowWidth}
+                        style={{
+                            ...highlightCustomPropertySettings,
+                        }}
+                    />
+                )}
                 { pathGlowWidth && (
                     <path
                         d={pathDisplay}
-                        className="react-flow__edge-path-glow"
+                        className={createEdgeDefaultClassName({}, "react-flow__edge-path-glow")}
                         strokeWidth={pathGlowWidth}
                     />
                 )}
                 <path
                     d={pathDisplay}
-                    className="react-flow__edge-path"
+                    className={createEdgeDefaultClassName({strokeType})}
                     markerStart={markerStart}
                     markerEnd={markerEnd}
                 />
@@ -98,3 +136,20 @@ export const EdgeDefault = memo(
         );
     }
 );
+
+export const createEdgeDefaultClassName = ({
+    strokeType,
+    intent,
+    highlightColor,
+}: EdgeDefaultDataProps, baseClass: string = "react-flow__edge-path") => {
+    const {
+        highlightClassNameSuffix,
+    } = evaluateHighlightColors("--edge-highlight", highlightColor);
+    return baseClass +
+    (strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
+    (intent ? ` ${intentClassName(intent)}` : "") +
+    (highlightClassNameSuffix.length > 0
+        ? highlightClassNameSuffix.map(highlight => ` ${eccgui}-graphviz__edge--highlight-${highlight}`).join("")
+        : ""
+    );
+}

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

@@ -0,0 +1,127 @@
+import React, { memo, useEffect, useRef } from "react";
+import { Icon, Depiction, DepictionProps, OverflowText } from "../../../index";
+import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { ValidIconName } from "../../../components/Icon/canonicalIconNames";
+import { IntentTypes, intentClassName } from "../../../common/Intent";
+
+export interface EdgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Depiction element displayed left from the label.
+     */
+    depiction?: ValidIconName | React.ReactElement<DepictionProps>;
+    /**
+     * Label of the edge.
+     * Cannot overflow the parent container.
+     */
+    text: string | JSX.Element;
+    /**
+     * One or multiple other elements displayed right from label.
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * The element is increased in its size.
+     */
+    large?: boolean;
+    /**
+     * Stretches the label component to the full available width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Add a info state to the label, visualized by color.
+     */
+    intent?: IntentTypes;
+}
+
+export const EdgeLabel = memo(({
+    depiction,
+    text,
+    actions,
+    large,
+    fullWidth,
+    intent,
+    ...otherDivProps
+} : EdgeLabelProps) => {
+
+    const depEl = (!!depiction && typeof depiction === "string")
+        ? <Depiction image={<Icon name={depiction as ValidIconName} />} />
+        : depiction;
+
+    return (
+        <div
+            className={
+                `${eccgui}-graphviz__edge-label` +
+                (large ? ` ${eccgui}-graphviz__edge-label--large` : "") +
+                (fullWidth ? ` ${eccgui}-graphviz__edge-label--fullwidth` : "") +
+                (!!intent ? ` ${intentClassName(intent)}` : '')
+            }
+            {...otherDivProps}
+        >
+            {!!depEl && (
+                <div className={`${eccgui}-graphviz__edge-label__depiction`}>
+                    {
+                        React.cloneElement(depEl, {
+                            padding: "tiny",
+                            ratio: "1:1",
+                            resizing: "contain",
+                            forceInlineSvg: true,
+                            border: false,
+                            backgroundColor: undefined,
+                        })
+                    }
+                </div>
+            )}
+            <div className={`${eccgui}-graphviz__edge-label__text`}>
+                { typeof text === "string" ? <OverflowText>{ text }</OverflowText> : text }
+            </div>
+            {!!actions && (
+                <div className={`${eccgui}-graphviz__edge-label__aux`}>
+                    { actions }
+                </div>
+            )}
+        </div>
+    )
+});
+
+interface EdgeLabelObjectProps extends React.SVGAttributes<SVGForeignObjectElement> {
+    /**
+     * The `<EdgeLabel />` element that need to be displayed.
+     */
+    children: React.ReactElement<EdgeLabelProps>;
+    /**
+     * Property from the `renderLabel` callback method.
+     */
+    edgeCenter: [number, number, number, number];
+}
+
+export const EdgeLabelObject = memo(({
+    children,
+    edgeCenter,
+    ...otherForeignObjectProps
+} : EdgeLabelObjectProps) => {
+    const containerRef = useRef<SVGForeignObjectElement>(null);
+
+    useEffect(() => {
+        const labelElement = containerRef.current!.getElementsByClassName(`${eccgui}-graphviz__edge-label`);
+        if (labelElement.length > 0) {
+            const width = (labelElement[0] as HTMLElement).offsetWidth;
+            const height = (labelElement[0] as HTMLElement).offsetHeight;
+            containerRef.current!.setAttribute("width", width.toString());
+            containerRef.current!.setAttribute("height", height.toString());
+            containerRef.current!.setAttribute("x", (edgeCenter[0] - width/2).toString());
+            containerRef.current!.setAttribute("y", (edgeCenter[1] - height/2).toString());
+        }
+    })
+
+    return (
+        <foreignObject
+            ref={containerRef}
+            className={`${eccgui}-graphviz__edge-labelobject`}
+            width="1"
+            height="1"
+            {...otherForeignObjectProps}
+            requiredExtensions="http://www.w3.org/1999/xhtml"
+        >
+            { children }
+        </foreignObject>
+    )
+});