Dragged Node/Edge is not rendered when wrapping the Node component

[Daniel Isac]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When wrapping the <Node /> component with another component, the drag actions do not render the dragged component (Node/Edge).

Expected behavior

Should be able to visualize the node/edge that is dragged when having the Node component wrapped.

Minimal reproduction of the problem with instructions

const NodeRouter = (props) => {
  return <ReaflowNode {...props.nodeProps} dragType="all" />;
}

const Node = (nodeProps: NodeProps) => {
  // return <ReaflowNode {...props.nodeProps} dragType="all" />; // having it like this works
  return <NodeRouter nodeProps={nodeProps} />; // this does not work.
};
...
return <Canvas
  ...
  node={Node}
/>;

Issue is valid since this commit: a94f903
After some debugging I found out that these 2 properties are not passed down to child component:

reaflow/src/Canvas.tsx

Lines 422 to 423 in 3ae9826

 onDragStart={onDragStart} 
 id={`${id}-node-${n.id}`} 

which means this is not called:

reaflow/src/Canvas.tsx

Line 300 in 3ae9826

 setDragType(event.dragType); 

which makes the following return false - not rendering the dragged edge.

reaflow/src/Canvas.tsx

Lines 440 to 443 in 3ae9826

 {dragCoords !== null && 
   dragEdge && 
   dragType === 'port' && 
   !readonly && ( 

What is the motivation / use case for changing the behavior?

Allow having a Node router component which decides which type of node to render

Environment

Libs:
- reaflow: 4.2.15

[Austin]

Oh good find - happy to accept a PR if you want.

[Daniel Isac]

Just found the solution. It doesn't seem to be a bug but a bad developer experience.
In order to make the above example work I had to do something like:

const NodeRouter = (props) => {
  return <ReaflowNode {...props.nodeProps} dragType="all" onDragStart={props.onDragStart} />;
}

const Node = (nodeProps: NodeProps) => {
  return <NodeRouter nodeProps={nodeProps} />;
};

Maybe it's worth being mentioned in docs under this section: https://reaflow.dev/?path=/story/docs-advanced-custom-nodes--page