Menu from arbitrary Component

[mavam]

I am building an application with various panes that receive external input in the form of either plain text lines or JSON-like input. My current approach is using a Menu, but I struggle implementing a "follow-focus" mode where the focus is on the last entry in a scrollable pane. Here's one example:

  std::vector<std::string> messages;
  int index = 0;
  // fill messages elsewhere
  auto menu = Menu(&messages, &index);
  auto container = Container::Vertical({
      menu
      });
  return Renderer(container, [=] {
    return vbox({menu->Render() | vscroll_indicator | frame});
  });

If I just add | focus after frame, then the focus always remains in the middle.

How do I go about this?

(This is related to #211 (reply in thread), but there we add a dummy text element. I'm not sure how to simply focus the last element in the list.)

[ArthurSonzogni]

what about using: focusPositionRelative(0, 1) instead of using focus?
This will focus toward the end of the y axis.

Alternatively, you could focus an element close to the end.

  return Renderer(container, [=] {
    return vbox({
      menu->Render(),
      text("the end") | focus
    }) | vscroll_indicator | frame;
  });

[mavam]

Thanks the hints. I tried focusPositionRelative because I don't want to insert a dummy element at the end. Or is there a way to simply pull out the last component?

This worked for the focus only:

  return Renderer(container, [=] {
    return vbox({menu->Render()}) | focusPositionRelative(0, 1)| vscroll_indicator | frame;
  });

However, now the scrollbar is static/frozen and doesn't move anymore when entering the menu with the keyboard. I now have to skip over the "invisible" entries first before getting into the focused area at the end.

The mental model would be "tail -f" and then scroll upward if need be, even when entering the menu from above.

[ArthurSonzogni]

I would say executing:

index = messages.size() - 1;

everytime messages is modified. WDYT?

An example:

Component MyComponent(std::vector<std::string>* messages) {
  class Impl : public ComponentBase {
   public:
    Impl(std::vector<std::string> messages) : messages_(messages) {
      Add(Menu(messages_, &index_));
    }

    Element Render() override {
      if (saved_size != messages_->size()) {
        saved_size = messages_->size();
        *index = messages->size() - 1;
      }
      return ComponentBase::Render() | vscroll_indicator | frame;
    }

   private:
    std::vector<std::string>* message_;
    int index_ = 0;
    int saved_size = 0;
  };
  return Make<Impl>(messages);
}

[mavam]

That works partially. It works when MyComponent has the focus, but it doesn't work when the focus is elsewhere. For example, once you move the mouse to the component, the focus updates instantly to the last messages. But when adding messages without having the focus, MyComponent doesn't update.

I also tried

return ComponentBase::Render() | focusPositionRelative(0, 1) | vscroll_indicator | frame;

but then I land in the same scrolling bug where I can select invisible menu entries.

[mavam]

I tried illustrating the issue here: https://www.loom.com/share/69f6287cec9246b8bce9bf5d3eed96b9

This is with the following implementation:

Component LogPane(ui_state* state) {
  class Impl : public ComponentBase {
  public:
    Impl(ui_state* state) : state_{state} {
      Add(
        Menu(&state_->log_messages, &index_, state_->theme.structured_data()));
    }

    Element Render() override {
      auto size = static_cast<int>(state_->log_messages.size());
      if (saved_size_ != size) {
        saved_size_ = size;
        index_ = size - 1;
        TakeFocus();
      }
      return ComponentBase::Render() | vscroll_indicator | yframe;
    }

  private:
    ui_state* state_;
    int index_ = 0;
    int saved_size_ = 0;
  };
  return Make<Impl>(state);
}

TakeFocus() gets the last log line focused, as soon as the focus goes elsewhere, the log pane jumps to the top.

Whatever is "messing" with the component once the focus shifts away appears to be the issue: is that perhaps frame?