Changing Focusable Tree Component while Loop is running

[lmarzull]

Hello All,

I've an application with GUI looking like the pasted image:

What I want to achieve is to swith between 'window 0' (Player info), 'window 1' (Race/Stat fixed info) etc ... and any others that will come later.

The GUI is working fine with initial focusable tree only containing the input related to 'Character name'.

Now, When I press Alt-1, the 'Race/Stat fixed info' become the new "active window" (i.e Player info is drawn with single border, while the Race/Stat Fixed info is drawn with double border). This swith is working fine.

But I want to change the focusable tree with only focusable components from the window Race/Stat fixed info.
Which is only The Input for Race:

Perhaps doing something like in the window.cpp example with using a Container::Stacked, but using some vbox, hbox layout instead of hard coded positionning.

Could you help me achieving this please ?
Thank you for any help

I paste here the header/source of the related stuff.

#pragma once


#include <UI/static_info_window.h>
#include <UI/race_fixed_info.h>
#include <UI/stats_creation_window.h>
#include <UI/status_line.h>
#include <UI/player_info_content.h>
#include <ftxui/component/component_base.hpp>
#include <ftxui/component/screen_interactive.hpp>
#include <ftxui/dom/elements.hpp>

#include <string>


namespace UI {


//------------------------------------------------------------------------------
class root_window
{
public:
  struct model : public static_info_window::model
               , public status_line::model
               , public player_info_content::model
               , public race_fixed_info::model
  {
  };

  root_window(model&);

  void operator()() { screen_.Loop(root_); }


private:
  model& model_;

  ftxui::ScreenInteractive  screen_;
  ftxui::Component root_;
  ftxui::Component root_renderer_;
  ftxui::Component root_container_;


  gargoyle_window* active_window_{};

  std::map<char, gargoyle_window*> activable_window_;

  struct win_info {
    std::string title;
    gargoyle_window* win;
  };
  player_info_content player_info_content_;
  race_fixed_info race_fixed_info_content_;
  stats_creation_window stats_creation_window_ ;

  win_info player_info_;
  win_info race_fixed_info_;
  win_info stats_creation_;

  status_line status_line_;

  void make_active_(gargoyle_window&);
  ftxui::BorderStyle border_style_(gargoyle_window& win); 
  win_info add_activable_window_(const char* title, gargoyle_window& win);

  std::function<void()> update_ui_;
  std::function<bool(ftxui::Event)> event_loop_;
};


} // UI

#include "UI/gargoyle_window.h"
#include <UI/root_window.h>
#include <ftxui/component/component.hpp>

#include <ftxui/component/component_options.hpp>
#include <ftxui/dom/elements.hpp>
#include <string>


namespace UI {


auto button_style = ftxui::ButtonOption::Animated();
ftxui::Component ModalComponent(std::function<void()> do_nothing,
                         std::function<void()> hide_modal)
{
  auto component = ftxui::Container::Vertical({
      Button("Do nothing", do_nothing, button_style),
      Button("Quit modal", hide_modal, button_style),
  });
  // Polish how the two buttons are rendered:
  component |= ftxui::Renderer([&](ftxui::Element inner) {
    return ftxui::vbox({
                ftxui::text("Modal component "),
                ftxui::separator(),
                inner,
           })                               //
           | size(ftxui::WIDTH, ftxui::GREATER_THAN, 30)  //
           | ftxui::border;                        //
  });
  return component;
}




//------------------------------------------------------------------------------
root_window::root_window(model& model)
    : model_{model}
    , screen_(ftxui::ScreenInteractive::Fullscreen())
    , active_window_{nullptr}
    , player_info_content_(model_)
    , race_fixed_info_content_(model_)
    , status_line_(model_)
{
  using namespace ftxui;

  player_info_ = add_activable_window_("Player info", player_info_content_);
  race_fixed_info_ = add_activable_window_("Race/Stat fixed info", race_fixed_info_content_);
  stats_creation_ = add_activable_window_("Stats", stats_creation_window_);
  make_active_(*player_info_.win);

  auto render_active_component = [&]{
    return
      vbox({
        window(text(player_info_.title), player_info_.win->get_element(), border_style_(*player_info_.win)),
        hbox({
          window(text(race_fixed_info_.title), race_fixed_info_.win->get_element(), border_style_(*race_fixed_info_.win)),
          window(text(stats_creation_.title), stats_creation_.win->get_element(), border_style_(*stats_creation_.win))
        })
        , filler()
        , status_line_.get_element()
      });
  };
  root_renderer_ = Renderer(active_window_->get_component(), render_active_component);

  //bool modal_shown = false;
  //auto show_modal = [&]{ modal_shown = true; };
  //auto hide_modal = [&]{ modal_shown = false; };
  //auto do_nothing = [&]{};
  //auto modal_component = ModalComponent(do_nothing, hide_modal);

  update_ui_ = [&]{
    root_renderer_ = ftxui::Renderer(active_window_->get_component(), render_active_component);
    root_ = ftxui::CatchEvent(root_renderer_, event_loop_); //| ftxui::Modal(modal_component, &modal_shown);
    screen_.PostEvent(ftxui::Event::Custom);
  };

  event_loop_ =
      [&](ftxui::Event event) {
        if (event == ftxui::Event::Escape) {
          screen_.Exit();
          return true;
        }
        /*
        else if (event == ftxui::Event::F10) {
          modal_shown = true;
          return true;
        }
        */
        else if (event.input().size()==2) {
          const auto& raw = event.input();
          if(raw[0] == '\x1B') {
            char c = raw[1];
            LOGGER_TRACE("gargoyle", "Character pressed [{}]", c);
            auto itr = activable_window_.find(c);
            if(itr!=activable_window_.end()) {
              LOGGER_TRACE("gargoyle", "New active window [{}]", c);
              make_active_(*itr->second);
              //update_ui_();
            }
          }
          return true;
        }
        return false;
      };

  root_ = ftxui::CatchEvent(root_renderer_, event_loop_); // | ftxui::Modal(modal_component, &modal_shown);
}


//------------------------------------------------------------------------------
void
root_window::make_active_(gargoyle_window& new_active_window)
{
  if(active_window_ == &new_active_window)
    return;

  if(active_window_)
    active_window_->active_mode(false);

  active_window_ = &new_active_window;
  active_window_->active_mode(true);
}


ftxui::BorderStyle
root_window::border_style_(gargoyle_window& win)
{
  return win.is_active() ? ftxui::DOUBLE : ftxui::ROUNDED;
}


root_window::win_info
root_window::add_activable_window_(const char* title, gargoyle_window& win)
{
  static char shortcut = '0';

  std::ostringstream oss;
  oss << " [" << shortcut << "] " << title << ' ';

  activable_window_.emplace(std::make_pair(shortcut, &win));
  ++shortcut;
  if(shortcut>'9') shortcut='A';
  if(shortcut>'Z') shortcut='a';

  return {.title=oss.str(), .win=&win};
}


} // UI