display icons in custom edge labels

Author: haschek

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

@@ -67,7 +67,7 @@
     position: absolute;
 }
 
-.react-flow .react-flow__edges svg {
+.react-flow .react-flow__edges svg:not(.#{$eccgui}-icon) {
     position: absolute;
     overflow: visible;
     pointer-events: none;

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;
     /**

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

@@ -271,6 +271,10 @@ path.react-flow__edge-path-highlight {
 
 // 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};

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 { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
+import { EdgeDefaultProps, EdgeLabel, EdgeLabelObject, ReactFlowExtended } from "./../../../../../index";
 import { edgeTypes } from "./../../../../cmem/react-flow/configuration/workflow";
+import { EdgeDefault, EdgeDefaultDataProps as EdgeData } from "./../EdgeDefault";
 
 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}