Custom Node Links bug after upgrade to 0.0.7 about react-flow-chart

[emmagoldblum]

Hi,

My guess is that the function that calculate the position of ports is not called with custom styled.div, the name of the function is onPortPositionChange, and it doesn't appear in the props passed to the custom node component (in the otherProps). I made a little test where i am passing NodeDefault as a customNode, and I had the same bug, and it appears that NodeDefault doesnt have this function as props either. The NodeWrapper has it.

Do you think it could be that ?

[mgcostaParedes]

Hello, yes, that should be the problem, someone already implemented some other way to fix that issue?

Thank you.

[emmagoldblum]

Hi again,
thanks to the help of another user, i think it might be a problem of ref.

This code is actually working for me :

export const CustomNode = forwardRef((props, ref) => <Node innerRef={ref} {...props} />)

const Node = ({ innerRef, isSelected, node, className, style, ...rest }) => (

)

Do you think passing the props innerRef as ref into the styledComponent might fix it ?

[krashdifferent]

NodeWrapper passes the callback to the PortWrapper which calculates position on component update life cycle. I don't have this issue but am not sure exactly what you are doing differently to cause it. I hav eonly used and looked at 0.7 so I don't know what was changed on that update. I use my own container to manage the state more directly but should still be using the default actions to manage position updates. I'm assuming you are using FlowChartWithState? If you are using the stateless FlowChart, you would need to manually add the port positions to the chart object. Are you using custom components for Port or Ports?

[timbrunette]

I had the same issue, have taken the storybook example NodeCustom and modified it to the following:

const NodeCustom = forwardRef(({ node, children, ...otherProps }, ref) => {
  if (node.type === 'output-only') {
    return (
      <DarkBox ref={ref} {...otherProps}>
        {children}
      </DarkBox>
    );
  } else {
    return (
      <Circle ref={ref} {...otherProps}>
        {children}
      </Circle>
    );
  }
});

This solved the problem for me.