fix(react): respect custom default node type when falling back from unknown node type
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'@xyflow/react': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix node fallback to respect custom default node type when unknown node type is encountered
|
||||||
@@ -9,6 +9,7 @@ import ControlledViewport from '../examples/ControlledViewport';
|
|||||||
import CustomConnectionLine from '../examples/CustomConnectionLine';
|
import CustomConnectionLine from '../examples/CustomConnectionLine';
|
||||||
import CustomMiniMapNode from '../examples/CustomMiniMapNode';
|
import CustomMiniMapNode from '../examples/CustomMiniMapNode';
|
||||||
import CustomNode from '../examples/CustomNode';
|
import CustomNode from '../examples/CustomNode';
|
||||||
|
import DefaultNodeOverwrite from '../examples/DefaultNodeOverwrite';
|
||||||
import DefaultNodes from '../examples/DefaultNodes';
|
import DefaultNodes from '../examples/DefaultNodes';
|
||||||
import DragHandle from '../examples/DragHandle';
|
import DragHandle from '../examples/DragHandle';
|
||||||
import DragNDrop from '../examples/DragNDrop';
|
import DragNDrop from '../examples/DragNDrop';
|
||||||
@@ -129,6 +130,11 @@ const routes: IRoute[] = [
|
|||||||
path: 'custom-node',
|
path: 'custom-node',
|
||||||
component: CustomNode,
|
component: CustomNode,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'Default Node Overwrite',
|
||||||
|
path: 'default-node-overwrite',
|
||||||
|
component: DefaultNodeOverwrite,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'Default Nodes',
|
name: 'Default Nodes',
|
||||||
path: 'default-nodes',
|
path: 'default-nodes',
|
||||||
|
|||||||
@@ -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 DefaultNodes = () => {
|
||||||
|
return (
|
||||||
|
<ReactFlow defaultNodes={initialNodes} nodeTypes={nodeTypes} fitView>
|
||||||
|
<Background variant={BackgroundVariant.Lines} />
|
||||||
|
</ReactFlow>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<ReactFlowProvider>
|
||||||
|
<DefaultNodes />
|
||||||
|
</ReactFlowProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -58,7 +58,7 @@ export function NodeWrapper<NodeType extends Node>({
|
|||||||
if (NodeComponent === undefined) {
|
if (NodeComponent === undefined) {
|
||||||
onError?.('003', errorMessages['error003'](nodeType));
|
onError?.('003', errorMessages['error003'](nodeType));
|
||||||
nodeType = 'default';
|
nodeType = 'default';
|
||||||
NodeComponent = builtinNodeTypes.default;
|
NodeComponent = nodeTypes?.['default'] || builtinNodeTypes.default;
|
||||||
}
|
}
|
||||||
|
|
||||||
const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
|
const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
|
||||||
|
|||||||
Reference in New Issue
Block a user