Fix stories issues, fix edge label

Author: fiorsaoirse

CHANGELOG.md

@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   some more interfaces are exposed:
     -   `IntentBlueprint`: BlueprintJS intent types, also available by `DefinitionsBlueprint`
     -   `TableDataContainerProps`, `TableSimpleContainerProps`, `TableHeadProps`, `TableBodyProps`, `TableExpandedRowProps`, `TableHeaderProps` and `DataTableRenderProps` as interfaces for diverse table components
+-   added support for `react-flow` v12 for `NodeContent` component, added v12-related components: `EdgeDefaultV12`, `NodeDefaultV12`, `EdgeDefs`
 
 ## [24.1.0] - 2025-04-16
 

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

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import React from "react";
-import { BaseEdge, Edge, EdgeLabelRenderer, EdgeProps, getBezierPath } from "@xyflow/react";
+import { BaseEdge, Edge, EdgeProps, EdgeText, getBezierPath, getEdgeCenter } from "@xyflow/react";
 
 import { IntentTypes } from "../../../common/Intent";
 import { nodeContentUtils } from "../nodes/NodeContent";
@@ -76,29 +76,26 @@ export const EdgeDefaultV12 = memo(
             highlightColor
         );
 
+        const edgeCenter = getEdgeCenter({
+            sourceX,
+            sourceY,
+            targetX,
+            targetY,
+        });
+
         const renderedLabel =
             renderLabel?.([labelX, labelY, sourceX, targetX]) ??
             (label ? (
-                <EdgeLabelRenderer>
-                    <div
-                        style={{
-                            position: "absolute",
-                            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-                            ...labelStyle,
-                            ...(labelShowBg
-                                ? {
-                                      background: labelBgStyle?.fill || "white",
-                                      padding: `${labelBgPadding[1]}px ${labelBgPadding[0]}px`,
-                                      borderRadius: `${labelBgBorderRadius}px`,
-                                      border: labelBgStyle?.stroke ? `1px solid ${labelBgStyle.stroke}` : undefined,
-                                  }
-                                : {}),
-                        }}
-                        className="edge-label-renderer__custom-edge nodrag nopan"
-                    >
-                        {label}
-                    </div>
-                </EdgeLabelRenderer>
+                <EdgeText
+                    x={edgeCenter[0]}
+                    y={edgeCenter[1]}
+                    label={label}
+                    labelStyle={labelStyle}
+                    labelShowBg={labelShowBg}
+                    labelBgStyle={labelBgStyle}
+                    labelBgPadding={labelBgPadding || [5, 5]}
+                    labelBgBorderRadius={labelBgBorderRadius || 3}
+                />
             ) : null);
 
         return (

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

@@ -45,12 +45,6 @@
             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;
         }
@@ -68,6 +62,24 @@ path.react-flow__edge-path {
     }
 }
 
+path.react-flow__edge-interaction {
+    fill: none;
+    stroke: currentcolor;
+    stroke-linecap: round;
+
+    .react-flow__edge & {
+        stroke-opacity: 0;
+    }
+
+    .react-flow__edge:hover & {
+        stroke-opacity: $reactflow-edge-stroke-opacity-hover * 0.2;
+    }
+
+    .react-flow__edge.selected & {
+        stroke-opacity: $reactflow-edge-stroke-opacity-selected * 0.2;
+    }
+}
+
 path.react-flow__edge-path-glow {
     fill: none;
     stroke: currentcolor;

src/extensions/react-flow/nodes/stories/NodeContentV12.stories.tsx

@@ -1,9 +1,10 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Node, Position, ReactFlow, ReactFlowProvider } from "@xyflow/react";
 import { LoremIpsum, loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
+import { Node, Position, ReactFlow, ReactFlowProvider, useNodesState } from "@xyflow/react";
 
 import { Definitions } from "../../../../common/Intent";
+import { NodeDefaultV12 } from "../NodeDefaultV12";
 
 import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
 import {
@@ -22,7 +23,6 @@ import {
     Default as ContentExtensionExample,
     SlideOutOfNode as ContentExtensionExampleSlideOut,
 } from "./NodeContentExtension.stories";
-import { NodeDefaultV12 } from "../NodeDefaultV12";
 
 export default {
     title: "Extensions/React Flow V12/Node Content",
@@ -144,7 +144,7 @@ const nodeTypes = { default: NodeDefaultV12 };
 
 const NodeContentExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
-    const [elements, setElements] = useState([] as Node[]);
+    const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
 
     const defaultElement = {
         id: "example-1",
@@ -169,30 +169,30 @@ const NodeContentExample = (args: any) => {
                             onClick={() => {
                                 // eslint-disable-next-line no-console
                                 console.log("reset size");
-                                setElements([
+                                setNodes([
                                     {
                                         ...defaultElement,
                                         data: { ...defaultElement.data, ...sizeReset, ...{ nodeDimensions: {} } },
                                     },
-                                ] as Node[]);
+                                ]);
                             }}
                         />
                     );
                 }
-                setElements([
+                setNodes([
                     {
                         ...defaultElement,
                         data: { ...defaultElement.data, ...sizeReset, ...{ nodeDimensions: dimensions } },
                     },
-                ] as Node[]);
+                ]);
             };
         }
-        setElements([
+        setNodes([
             {
                 ...defaultElement,
                 data: { ...defaultElement.data, ...sizeReset },
             },
-        ] as Node[]);
+        ]);
     }, [args]);
 
     const onLoad = useCallback(
@@ -208,11 +208,12 @@ const NodeContentExample = (args: any) => {
         <div style={{ width: "100%", height: "400px" }}>
             <ReactFlowProvider>
                 <ReactFlow
-                    nodes={elements}
+                    nodes={nodes}
                     edges={[]}
                     style={{ height: "400px" }}
                     onLoad={onLoad}
                     nodeTypes={nodeTypes}
+                    onNodesChange={onNodesChange}
                 />
             </ReactFlowProvider>
         </div>