ArthurSonzogni / FTXUI

:computer: C++ Functional Terminal User Interface. :heart:
MIT License
7.02k stars 427 forks source link

Menu item selection not drawn the whole way #932

Closed herring-swe closed 1 month ago

herring-swe commented 2 months ago

I want to achieve so that each menu item when selected is rendered the whole width of the menu. I tried to fix it by padding the string with spaces, excluding the "> " part that is added to menu item (can I change this??)

fmt::format("{: <{}s} ", "../", total_w - 2);

But when rendering it is as if the string is trimmed. What can I do to achieve what I want?

image

ArthurSonzogni commented 2 months ago

Hello @herring-swe !

I think you can populate a MenuOption, and pass it to the Menu function?

Specifically menu_option.entry_option.transform.

The default implementation is:

auto menu_option = MenuOption::Vertical(); 
menu_option.entry_option.transform = [](const EntryState&) {
  std::string label = (state.active ? "> " : "  ") + state.label;  // NOLINT
  Element e = text(std::move(label));
  if (state.focused) {
    e = e | inverted;
  }
  if (state.active) {
    e = e | bold;
  }
  return e;
}
auto menu = Menu(..., menu_option);

But you can tweak it to make the Element e flexible, before applying inverted.

I haven't try, but maybe:

menu_option.entry_option.transform = [](const EntryState&) {
  std::string label = (state.active ? "> " : "  ") + state.label;  // NOLINT
  Element e = text(std::move(label));
  e |= x_flex;
  if (state.focused) {
    e = e | inverted;
  }
  if (state.active) {
    e = e | bold;
  }
  return e;
}
herring-swe commented 2 months ago

@ArthurSonzogni

Thanks for the reply. Your suggestion got me going forward but xflex didn't work or any other flex option.

I added border (without flex) and this is result: image

So I then replaced inverted with |= bgcolor(Color::White) | color(Color::Black); and that did the trick. So problem is with inverted for some reason.

herring-swe commented 2 months ago

@ArthurSonzogni

Another request. Can you add index to struct EntryState? This way I can move all logic to transform function instead of updating the menu with strings containing info in intermediate format.

ArthurSonzogni commented 2 months ago

Sounds like a good idea. I passed a struct to allow forward compatible changes.

Do you want to submit a PR?

herring-swe commented 2 months ago

Sounds like a good idea. I passed a struct to allow forward compatible changes.

Do you want to submit a PR?

See PR #933

ArthurSonzogni commented 1 month ago

Thanks!

herring-swe commented 1 month ago

The initial report in this bug still persists. Workaround is to replace inverted with manual bgcolor and color in the transform function. See ftxui_example_menu_entries_animated

https://github.com/user-attachments/assets/846a33f9-1251-4c4c-9a2c-f8624a747928

herring-swe commented 1 month ago

ftxui_example_menu

https://github.com/user-attachments/assets/1c4f8f82-0ea9-40ba-a321-d3ed1933c2d1

herring-swe commented 1 month ago

Further testing reveal it's a problem when running in vscode on windows (ps or cmd terminal). Running it directly renders fine.