Merge pull request #5384 from Sec-ant/fix/unknown-node-type-fallback

fix(react): respect custom default node/edge type when falling back from unknown type

.changeset/forty-dryers-cry.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Fix node fallback to respect custom default node type when unknown node type is encountered

.changeset/purple-donuts-fail.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Fix edge fallback to respect custom default edge type when unknown edge type is encountered.

examples/react/src/App/routes.ts

@@ -9,6 +9,8 @@ import ControlledViewport from '../examples/ControlledViewport';
 import CustomConnectionLine from '../examples/CustomConnectionLine';
 import CustomMiniMapNode from '../examples/CustomMiniMapNode';
 import CustomNode from '../examples/CustomNode';
+import DefaultEdgeOverwrite from '../examples/DefaultEdgeOverwrite';
+import DefaultNodeOverwrite from '../examples/DefaultNodeOverwrite';
 import DefaultNodes from '../examples/DefaultNodes';
 import DragHandle from '../examples/DragHandle';
 import DragNDrop from '../examples/DragNDrop';
@@ -129,6 +131,16 @@ const routes: IRoute[] = [
     path: 'custom-node',
     component: CustomNode,
   },
+  {
+    name: 'Default Node Overwrite',
+    path: 'default-node-overwrite',
+    component: DefaultNodeOverwrite,
+  },
+  {
+    name: 'Default Edge Overwrite',
+    path: 'default-edge-overwrite',
+    component: DefaultEdgeOverwrite,
+  },
   {
     name: 'Default Nodes',
     path: 'default-nodes',

examples/react/src/examples/DefaultEdgeOverwrite/index.tsx

@@ -0,0 +1,69 @@
+import {
+  ReactFlow,
+  Node,
+  Edge,
+  ReactFlowProvider,
+  Background,
+  BackgroundVariant,
+  EdgeProps,
+  getBezierPath,
+} from '@xyflow/react';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+    className: 'light',
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+    className: 'light',
+  },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+    type: 'unregistered', // This will fallback to custom default
+  },
+];
+
+const CustomEdge = ({ sourceX, sourceY, targetX, targetY }: EdgeProps) => {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  });
+
+  return (
+    <>
+      <path d={edgePath} stroke="red" strokeWidth={3} fill="none" strokeDasharray="5,5" />
+    </>
+  );
+};
+
+const edgeTypes = {
+  default: CustomEdge,
+};
+
+const DefaultEdgeOverwrite = () => {
+  return (
+    <ReactFlow defaultNodes={initialNodes} defaultEdges={initialEdges} edgeTypes={edgeTypes} fitView>
+      <Background variant={BackgroundVariant.Lines} />
+    </ReactFlow>
+  );
+};
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <DefaultEdgeOverwrite />
+    </ReactFlowProvider>
+  );
+}

examples/react/src/examples/DefaultNodeOverwrite/index.tsx

@@ -0,0 +1,41 @@
+import { ReactFlow, Node, ReactFlowProvider, Background, BackgroundVariant, NodeProps } from '@xyflow/react';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+    className: 'light',
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    type: 'unregistered',
+    position: { x: 100, y: 100 },
+    className: 'light',
+  },
+];
+
+const CustomNode = (_: NodeProps) => {
+  return <div>Custom node</div>;
+};
+
+const nodeTypes = {
+  default: CustomNode,
+};
+
+const DefaultNodeOverwrite = () => {
+  return (
+    <ReactFlow defaultNodes={initialNodes} nodeTypes={nodeTypes} fitView>
+      <Background variant={BackgroundVariant.Lines} />
+    </ReactFlow>
+  );
+};
+
+export default function App() {
+  return (
+    <ReactFlowProvider>
+      <DefaultNodeOverwrite />
+    </ReactFlowProvider>
+  );
+}

packages/react/src/components/EdgeWrapper/index.tsx

@@ -46,7 +46,7 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
   if (EdgeComponent === undefined) {
     onError?.('011', errorMessages['error011'](edgeType));
     edgeType = 'default';
-    EdgeComponent = builtinEdgeTypes.default;
+    EdgeComponent = edgeTypes?.['default'] || builtinEdgeTypes.default;
   }
 
   const isFocusable = !!(edge.focusable || (edgesFocusable && typeof edge.focusable === 'undefined'));

packages/react/src/components/NodeWrapper/index.tsx

@@ -58,7 +58,7 @@ export function NodeWrapper<NodeType extends Node>({
   if (NodeComponent === undefined) {
     onError?.('003', errorMessages['error003'](nodeType));
     nodeType = 'default';
-    NodeComponent = builtinNodeTypes.default;
+    NodeComponent = nodeTypes?.['default'] || builtinNodeTypes.default;
   }
 
   const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));