NodesCanvas = (props) => {
  const {
    nodes, onPortRegister, onNodeRegister, onNodeRemove, onDragNewSegment, onSegmentFail, onSegmentConnect, onChange,
  } = props;

  // when a node item update its position updates it within the nodes array
  const onNodePositionChange = (nodeId, newCoordinates) => {
    if (onChange) {
      const nextNodes = updateNodeCoordinates(nodeId, newCoordinates, nodes);
      onChange(nextNodes);
    }
  };

  return nodes && nodes.length > 0 && nodes.map(({ data, ...node }) => (
    <DiagramNode
      {...node}
      data={data}
      onPositionChange={onNodePositionChange}
      onPortRegister={onPortRegister}
      onNodeRemove={onNodeRemove}
      onDragNewSegment={onDragNewSegment}
      onSegmentFail={onSegmentFail}
      onSegmentConnect={onSegmentConnect}
      onMount={onNodeRegister}
      key={node.id}
    />
  ));
}
Handles the nodes' events and business logic