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

[danielcrt]

trafficstars

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: https://github.com/reaviz/reaflow/commit/a94f903be676472dc579ebba65bd13e65c52f457 After some debugging I found out that these 2 properties are not passed down to child component: https://github.com/reaviz/reaflow/blob/3ae9826ce8241e527eda28d365dab532550a472c/src/Canvas.tsx#L422-L423

which means this is not called: https://github.com/reaviz/reaflow/blob/3ae9826ce8241e527eda28d365dab532550a472c/src/Canvas.tsx#L300

which makes the following return false - not rendering the dragged edge. https://github.com/reaviz/reaflow/blob/3ae9826ce8241e527eda28d365dab532550a472c/src/Canvas.tsx#L440-L443

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

[amcdnl]

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

[danielcrt]

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