Merge pull request #314 from eccenca/fix/useCorrectEdgesAndArrows-CMEM-6721

Use correct edges and arrows for React Flow v12 (CMEM-6721)

Author: haschek

CHANGELOG.md

@@ -8,10 +8,39 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 This is a major release, and it might be not compatible with your current usage of our library. Please read about the necessary changes in the section about how to migrate.
 
+### Added
+
+-   `<EdgeStraight />`
+    -   it's basically `<EdgeDefault />` without any special configs
+-   `<EdgeBezier />`
+    -   only supported for v12, in v9 as straight edge is used
+    -   use `curvature` property in the edge `data` object to define the bezier layout (0..1, default: 0.25)
+-   `<EdgeDefaultV12 />`
+    -   the `data` object provides `markerAppearance` to set and remove the edge arrows
+-   `<EdgeNew />`
+    -   component for React Flow v12, displaying new connection lines
+
+### Removed
+
+-   support for React Flow v10 was completely removed
+
 ### Fixed
 
 -   `<Modal />`:
-    -    Add 'nopan', 'nowheel' and 'nodrag' classes to Modal's overlay classes in order to always prevent react-flow to react to drag and pan actions in modals.
+    -   Add 'nopan', 'nowheel' and 'nodrag' classes to Modal's overlay classes in order to always prevent react-flow to react to drag and pan actions in modals.
+
+### Changed
+
+-   `<EdgeDefault />` and `<EdgeStep />`
+    -   support now v9 and v12 of react flow
+-   `<ReactFlowExtended />`
+    -   use `<EdgeNew />` by default for new connection lines, you can overwrite it by setting `connectionLineComponent` to `undefined`
+
+### Deprecated
+
+-   support for React Flow v9 will be removed in v26
+-   `<EdgeDefs />`
+    -   use `<ReactFlowMarkers />` or build it on single `<ReactFlowMarker />`
 
 ## [24.4.0] - 2025-08-07
 
@@ -130,7 +159,7 @@ If you use Jest then you can use the same aliases for the `moduleNameMapper` con
 
 ### Migration from v24 to v25
 
--   remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the v24.* changelogs.
+-   remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the v24.\* changelogs.
     -   we changed the integration of the supported react flow versions, formerly names `legacy` and `next` resources were renamed to more precise `v9` and `v10`, please see all info in the section about changes
 
 ## [24.1.0] - 2025-04-16

package.json

@@ -94,7 +94,6 @@
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",
-        "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
         "react-markdown": "^10.1.0",
         "react-markdown-deprecated": "npm:react-markdown@^8.0.7",

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

@@ -6,16 +6,6 @@ import {
     FlowElement,
     Position,
 } from "react-flow-renderer";
-import {
-    Background as BackgroundV10,
-    BackgroundVariant as BackgroundVariantV10,
-    Edge as Edge10,
-    Node as Node10,
-    OnInit as OnInitV10,
-    ReactFlowInstance as ReactFlowInstanceV10,
-    useEdgesState as useEdgesState10,
-    useNodesState as useNodesState10,
-} from "react-flow-renderer-lts";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 import {
@@ -31,7 +21,6 @@ import {
     ApplicationContainer,
     EdgeTools,
     MiniMap,
-    MiniMapV10,
     MiniMapV12,
     NodeTools,
     ReactFlowExtended,
@@ -425,7 +414,7 @@ export default {
         },
         flowVersion: {
             control: "select",
-            options: [undefined, "v9", "v10", "v12"],
+            options: [undefined, "v9", "v12"],
         },
     },
 } as Meta<typeof ReactFlowExtended>;
@@ -490,33 +479,6 @@ const ReactFlowExampleV9: FC<ReactFlowExtendedProps> = (args) => {
     );
 };
 
-const ReactFlowExampleV10: FC<ReactFlowExtendedProps> = (args) => {
-    const [reactFlowInstance, setReactFlowInstance] = React.useState<ReactFlowInstanceV10 | undefined>(undefined);
-    const [nodes, ,] = useNodesState10(nodeExamples[args.configuration ?? "unspecified"].nodes as Node10[]);
-    const [edges, ,] = useEdgesState10(nodeExamples[args.configuration ?? "unspecified"].edges as Edge10[]);
-
-    const onInit: OnInitV10 = React.useCallback((_reactFlowInstance: ReactFlowInstanceV10) => {
-        setReactFlowInstance(_reactFlowInstance);
-    }, []);
-
-    const reactFlowExtendedProps = {
-        ...args,
-        defaultZoom: 1,
-        nodes,
-        edges,
-        onInit,
-    } as ReactFlowExtendedProps;
-
-    return (
-        <ApplicationContainer monitorDropzonesFor={args.dropzoneFor} style={{ background: "white" }}>
-            <ReactFlowExtended {...reactFlowExtendedProps}>
-                <MiniMapV10 flowInstance={reactFlowInstance} enableNavigation={true} />
-                <BackgroundV10 variant={BackgroundVariantV10.Lines} gap={16} />
-            </ReactFlowExtended>
-        </ApplicationContainer>
-    );
-};
-
 const ReactFlowExampleV12: FC<ReactFlowExtendedProps> = (args) => {
     const [nodes, ,] = useNodesState12(nodeExamples[args.configuration ?? "unspecified"].nodes as Node12[]);
     const [edges, ,] = useEdgesState12(nodeExamples[args.configuration ?? "unspecified"].edges as Edge12[]);
@@ -549,8 +511,6 @@ const ReactFlowExample: FC<ReactFlowExtendedProps> = (args) => {
         case undefined:
         case "v9":
             return <ReactFlowExampleV9 {...args} />;
-        case "v10":
-            return <ReactFlowExampleV10 {...args} />;
         case "v12":
             return <ReactFlowExampleV12 {...args} />;
         default:

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

@@ -1,21 +1,18 @@
 import React, {ReactElement, Ref} from "react";
 import { KeyCode as KeyCodeV9 } from "react-flow-renderer";
-import { KeyCode as KeyCodeV10 } from "react-flow-renderer-lts";
 import { KeyCode as KeyCodeV12} from "@xyflow/react";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import { ReactFlowMarkers } from "../../../extensions/react-flow/markers/ReactFlowMarkers";
 import { ReactFlowVersions } from "../../../extensions/react-flow/versionsupport";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 import { useReactFlowScrollOnDragV9 } from "../extensions/scrollOnDragHook";
-import { useReactFlowScrollOnDragV10 } from "../extensions/scrollOnDragHookV10";
 
 import * as graphConfig from "./../configuration/graph";
 import * as linkingConfig from "./../configuration/linking";
 import * as unspecifiedConfig from "./../configuration/unspecified";
 import * as workflowConfig from "./../configuration/workflow";
 import { ReactFlowV9Container, ReactFlowV9ContainerProps } from "./ReactFlowV9";
-import { ReactFlowV10Container, ReactFlowV10ContainerProps } from "./ReactFlowV10";
 import { ReactFlowV12Container, ReactFlowV12ContainerProps } from "./ReactFlowV12";
 
 export interface ReactFlowExtendedExtraProps {
@@ -55,13 +52,6 @@ interface ReactFlowExtendedVersion9SupportProps {
     flowVersion?: ReactFlowVersions.V9;
 }
 
-interface ReactFlowExtendedVersion10SupportProps {
-    /**
-     * Set version of `ReactFlow` that is used internally.
-     */
-    flowVersion: ReactFlowVersions.V10;
-}
-
 interface ReactFlowExtendedVersion12SupportProps {
     /**
      * Set version of `ReactFlow` that is used internally.
@@ -74,16 +64,15 @@ interface ReactFlowExtendedVersion12SupportProps {
 }
 
 export type ReactFlowExtendedPropsV9 = ReactFlowExtendedVersion9SupportProps & ReactFlowV9ContainerProps & ReactFlowExtendedExtraProps & ReactFlowExtendedScrollProps
-export type ReactFlowExtendedPropsV10 = ReactFlowExtendedVersion10SupportProps & ReactFlowV10ContainerProps & ReactFlowExtendedExtraProps & ReactFlowExtendedScrollProps
 export type ReactFlowExtendedPropsV12 = ReactFlowExtendedVersion12SupportProps & ReactFlowV12ContainerProps & ReactFlowExtendedExtraProps
 
-export type ReactFlowExtendedProps = ReactFlowExtendedPropsV9 | ReactFlowExtendedPropsV10 | ReactFlowExtendedPropsV12
+export type ReactFlowExtendedProps = ReactFlowExtendedPropsV9 | ReactFlowExtendedPropsV12
 
 /**
  * `ReactFlow` container extension that includes pre-configured nodes and edges for
  * Corporate Memory tools.
  *
- * @param T The concrete type of the corresponding version, i.e. either one of ReactFlowExtendedPropsV9, ReactFlowExtendedPropsV10 or ReactFlowExtendedPropsV12
+ * @param T The concrete type of the corresponding version, i.e. either one of ReactFlowExtendedPropsV9 or ReactFlowExtendedPropsV12
  */
 const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>({
             configuration = "unspecified",
@@ -157,14 +146,6 @@ const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>({
                     zoomActivationKeyCode: hotKeysDisabled ? undefined : (zoomActivationKeyCode as KeyCodeV9),
                 };
                 break;
-            case "v10":
-                keyCodeConfig = {
-                    selectionKeyCode: hotKeysDisabled ? undefined : (selectionKeyCode as KeyCodeV10),
-                    deleteKeyCode: hotKeysDisabled ? undefined : (deleteKeyCode as KeyCodeV10),
-                    multiSelectionKeyCode: hotKeysDisabled ? undefined : (multiSelectionKeyCode as KeyCodeV10),
-                    zoomActivationKeyCode: hotKeysDisabled ? undefined : (zoomActivationKeyCode as KeyCodeV10),
-                };
-                break;
             case "v12":
                 keyCodeConfig = {
                     selectionKeyCode: hotKeysDisabled ? null : (selectionKeyCode as KeyCodeV12),
@@ -183,12 +164,6 @@ const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>({
                     scrollOnDrag,
                 });
                 break;
-            case "v10":
-                scrollOnDragFunctions = useReactFlowScrollOnDragV10({
-                    reactFlowProps: originalProps as ReactFlowV10ContainerProps,
-                    scrollOnDrag,
-                });
-                break;
             // should not be necessary for v12
         }
 
@@ -207,13 +182,6 @@ const ReactFlowExtendedPlain = <T extends ReactFlowExtendedProps>({
                         <ReactFlowMarkers />
                     </ReactFlowV9Container>
                 );
-            case "v10":
-                return (
-                    <ReactFlowV10Container ref={innerRef} {...(containerConfig as ReactFlowV10ContainerProps)}>
-                        {children}
-                        <ReactFlowMarkers />
-                    </ReactFlowV10Container>
-                );
             case "v12":
                 return (
                     <ReactFlowV12Container ref={innerRef} {...(containerConfig as ReactFlowV12ContainerProps)}>

src/cmem/react-flow/ReactFlow/ReactFlowV10.tsx

@@ -9,6 +9,7 @@ import {
 } from "@xyflow/react";
 
 import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
+import { EdgeNew } from "./../../../extensions/react-flow/edges/EdgeNew";
 
 export type ReactFlowV12ContainerProps = ReactFlowV12Props;
 
@@ -43,6 +44,7 @@ export const ReactFlowV12Container = React.forwardRef<HTMLDivElement, ReactFlowV
             <ReactFlowV12
                 ref={innerRef}
                 className={`${eccgui}-graphviz__canvas--reactflow12` + (className ? ` ${className}` : "")}
+                connectionLineComponent={EdgeNew}
                 {...originalProps}
                 {...missingNodesChangeCallback}
                 {...missingEdgesChangeCallback}

src/cmem/react-flow/ReactFlow/ReactFlowV12.tsx

@@ -1,22 +1,22 @@
-import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
+import { EdgeBezier } from "./../../../extensions/react-flow/edges/EdgeBezier";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { GRAPH_NODE_TYPES } from "./typing";
-import {ComponentType} from "react";
-import {NodeProps} from "react-flow-renderer-lts";
+//import {ComponentType} from "react";
+//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
-    default: EdgeDefault,
-    implicit: EdgeDefault,
-    import: EdgeDefault,
-    subclass: EdgeDefault,
-    subproperty: EdgeDefault,
-    rdftype: EdgeDefault,
-    success: EdgeDefault,
-    warning: EdgeDefault,
-    danger: EdgeDefault,
+    default: EdgeBezier,
+    implicit: EdgeBezier,
+    import: EdgeBezier,
+    subclass: EdgeBezier,
+    subproperty: EdgeBezier,
+    rdftype: EdgeBezier,
+    success: EdgeBezier,
+    warning: EdgeBezier,
+    danger: EdgeBezier,
 };
 
-const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode & ComponentType<NodeProps>> = {
+const nodeTypes: Record<GRAPH_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     graph: NodeDefault,
     class: NodeDefault,

src/cmem/react-flow/configuration/graph.ts

@@ -2,8 +2,8 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { StickyNoteNode } from "./../nodes/StickyNoteNode";
 import { LINKING_NODE_TYPES } from "./typing";
-import {ComponentType} from "react";
-import {NodeProps} from "react-flow-renderer-lts";
+//import {ComponentType} from "react";
+//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -14,7 +14,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode & ComponentType<NodeProps>> = {
+const nodeTypes: Record<LINKING_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     sourcepath: NodeDefault,
     targetpath: NodeDefault,

src/cmem/react-flow/configuration/linking.ts

@@ -1,10 +1,11 @@
 import { EdgeDefault } from "./../../../extensions/react-flow/edges/EdgeDefault";
 import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
+import { EdgeStraight } from "./../../../extensions/react-flow/edges/EdgeStraight";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 
 export const edgeTypes = {
     default: EdgeDefault,
-    straight: EdgeDefault,
+    straight: EdgeStraight,
     step: EdgeStep,
 };
 

src/cmem/react-flow/configuration/unspecified.ts

@@ -2,8 +2,8 @@ import { EdgeStep } from "./../../../extensions/react-flow/edges/EdgeStep";
 import { NodeDefault } from "./../../../extensions/react-flow/nodes/NodeDefault";
 import { StickyNoteNode } from "./../nodes/StickyNoteNode";
 import { WORKFLOW_NODE_TYPES } from "./typing";
-import {ComponentType} from "react";
-import {NodeProps} from "react-flow-renderer-lts";
+//import {ComponentType} from "react";
+//import {NodeProps} from "react-flow-renderer-lts";
 
 const edgeTypes = {
     default: EdgeStep,
@@ -12,7 +12,7 @@ const edgeTypes = {
     danger: EdgeStep,
 };
 
-const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode & ComponentType<NodeProps>> = {
+const nodeTypes: Record<WORKFLOW_NODE_TYPES, React.ReactNode /*& ComponentType<NodeProps>*/> = {
     default: NodeDefault,
     dataset: NodeDefault,
     linking: NodeDefault,