Fix stylings

Author: fiorsaoirse

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

@@ -3,7 +3,7 @@
 @import "edges/edges";
 @import "handles/handles";
 @import "minimap/minimap";
-@import "@xyflow/react/dist/style.css";
+@import "react-flow_v12";
 
 .react-flow__background {
     border: solid 1px $eccgui-color-separation-divider;

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

@@ -0,0 +1,5 @@
+.react-flow .react-flow__edges svg {
+    overflow: visible;
+    position: absolute;
+    pointer-events: none;
+}

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

@@ -102,24 +102,29 @@ export const EdgeDefaultV12 = memo(
             ) : null);
 
         return (
-            <>
-                <g
-                    {...edgeSvgProps}
-                    className={edgeDefaultUtils.createEdgeDefaultClassName({ intent }, edgeSvgProps?.className ?? "")}
-                    style={{
-                        ...edgeSvgProps?.style,
-                        ...edgeStyle,
-                        color: edgeStyle.color || edgeStyle.stroke,
-                    }}
-                >
+            <g
+                className={
+                    "react-flow__edge " +
+                    edgeDefaultUtils.createEdgeDefaultClassName(
+                        { intent },
+                        `${edgeOriginalProperties.selected ? "selected" : ""}`
+                    )
+                }
+                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={pathGlowWidth}
+                            strokeWidth={10}
                             style={{
                                 ...highlightCustomPropertySettings,
                             }}
@@ -131,10 +136,17 @@ export const EdgeDefaultV12 = memo(
                         path={edgePath}
                         markerStart={inversePath ? "url(#arrow-closed-reverse)" : undefined}
                         markerEnd={!inversePath ? "url(#arrow-closed)" : undefined}
+                        className="react-flow__edge-path"
+                        interactionWidth={pathGlowWidth}
+                        style={{
+                            ...edgeSvgProps?.style,
+                            ...edgeStyle,
+                            color: edgeStyle.color || edgeStyle.stroke,
+                        }}
                     />
                 </g>
                 {renderedLabel}
-            </>
+            </g>
         );
     }
 );

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

@@ -45,6 +45,12 @@
             stroke-opacity: $reactflow-edge-stroke-opacity-selected;
         }
 
+        // Edge interaction path with reduced opacity for selected state
+        // The same as path.react-flow__edge-path-glow - in v12 we have a special class for edge-interaction
+        path[class*="react-flow__edge-interaction"] {
+            stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
+        }
+
         text[class*="react-flow__edge"] {
             opacity: $reactflow-edge-stroke-opacity-selected;
         }

src/extensions/react-flow/nodes/NodeContent.tsx

@@ -229,19 +229,23 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any>
 
 interface MemoHandlerLegacyProps extends HandleProps {
     posdirection: string;
-    style: {
-        [key: string]: string | undefined;
-    };
+    style: React.CSSProperties;
+    flowVersion: "legacy";
 }
 
 interface MemoHandlerNextProps extends HandleNextProps {
     posdirection: string;
-    style: {
-        [key: string]: string | undefined;
-    };
+    style: React.CSSProperties;
+    flowVersion: "next";
+}
+
+interface MemoHandlerV12Props extends HandleV12Props {
+    posdirection: string;
+    style: React.CSSProperties;
+    flowVersion: "v12";
 }
 
-type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps;
+type MemoHandlerProps = MemoHandlerLegacyProps | MemoHandlerNextProps | MemoHandlerV12Props;
 
 const defaultHandles = (flowVersion: ReacFlowVersionSupportProps["flowVersion"]): NodeContentHandleProps[] => {
     switch (flowVersion) {