Use react-resize-observer in Ports and notify the Node about size changes. In Node, set the minimum size (minWidth and minHeight css props) based on the size of Ports. Size of Ports is calculated from max(top.width, bottom.width) and max(left.height, right.height).
This way node size is still calculated based on NodeInner's size, but cannot be smaller than the minimal size specified by the ports. Also this magically solves the issue with Links getting rendered at the wrong place when PortGroup is larger than the side of the Node (as it won't be larger ever).
Use react-resize-observer in Ports and notify the Node about size changes. In Node, set the minimum size (minWidth and minHeight css props) based on the size of Ports. Size of Ports is calculated from max(top.width, bottom.width) and max(left.height, right.height).
This way node size is still calculated based on NodeInner's size, but cannot be smaller than the minimal size specified by the ports. Also this magically solves the issue with Links getting rendered at the wrong place when PortGroup is larger than the side of the Node (as it won't be larger ever).