fix(react): also respect custom default edge type in fallback logic

This commit is contained in:
Ze-Zheng Wu
2025-07-05 19:31:55 +08:00
parent 680f6e8b2d
commit ab05d008d9
4 changed files with 81 additions and 1 deletions

View File

@@ -9,6 +9,7 @@ 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';
@@ -135,6 +136,11 @@ const routes: IRoute[] = [
path: 'default-node-overwrite',
component: DefaultNodeOverwrite,
},
{
name: 'Default Edge Overwrite',
path: 'default-edge-overwrite',
component: DefaultEdgeOverwrite,
},
{
name: 'Default Nodes',
path: 'default-nodes',

View File

@@ -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>
);
}