LibGUI: Add a GItemView class.

This is a GAbstractView subclass that implements a icon-based view onto
a GModel. It still need a bunch of work, but it's in basic usable shape.

Applications/FileManager/DirectoryModel.cpp

@@ -165,11 +165,15 @@ GVariant DirectoryModel::data(const GModelIndex& index, Role role) const
         case Column::Inode: return (int)entry.inode;
         }
     }
+    if (role == Role::Icon) {
+        return icon_for(entry);
+    }
     return { };
 }
 
 void DirectoryModel::update()
 {
+    dbgprintf("DirectoryModel::update\n");
     DIR* dirp = opendir(m_path.characters());
     if (!dirp) {
         perror("opendir");

Applications/FileManager/DirectoryTableView.cpp

@@ -1,49 +1,75 @@
 #include "DirectoryTableView.h"
 #include <LibGUI/GSortingProxyModel.h>
 
-DirectoryTableView::DirectoryTableView(GWidget* parent)
-    : GTableView(parent)
+DirectoryView::DirectoryView(GWidget* parent)
+    : GStackWidget(parent)
     , m_model(DirectoryModel::create())
 {
-    set_model(GSortingProxyModel::create(m_model.copy_ref()));
-    GTableView::model()->set_key_column_and_sort_order(DirectoryModel::Column::Name, GSortOrder::Ascending);
+    set_active_widget(nullptr);
+    m_item_view = new GItemView(this);
+    m_item_view->set_model(model());
+
+    m_table_view = new GTableView(this);
+    m_table_view->set_model(GSortingProxyModel::create(m_model.copy_ref()));
+
+    model().set_key_column_and_sort_order(DirectoryModel::Column::Name, GSortOrder::Ascending);
+
+    m_item_view->set_model_column(DirectoryModel::Column::Name);
+
+    m_table_view->on_model_notification = [this] (const GModelNotification& notification) {
+        if (notification.type() == GModelNotification::Type::ModelUpdated) {
+            set_status_message(String::format("%d item%s (%u byte%s)",
+                                              model().row_count(),
+                                              model().row_count() != 1 ? "s" : "",
+                                              model().bytes_in_files(),
+                                              model().bytes_in_files() != 1 ? "s" : ""));
+
+            if (on_path_change)
+                on_path_change(model().path());
+        }
+    };
+
+    set_view_mode(ViewMode::Icon);
 }
 
-DirectoryTableView::~DirectoryTableView()
+DirectoryView::~DirectoryView()
 {
 }
 
-void DirectoryTableView::open(const String& path)
+void DirectoryView::set_view_mode(ViewMode mode)
+{
+    if (m_view_mode == mode)
+        return;
+    m_view_mode = mode;
+    update();
+    if (mode == ViewMode::List) {
+        set_active_widget(m_table_view);
+        return;
+    }
+    if (mode == ViewMode::Icon) {
+        set_active_widget(m_item_view);
+        return;
+    }
+    ASSERT_NOT_REACHED();
+}
+
+void DirectoryView::open(const String& path)
 {
     model().open(path);
 }
 
-void DirectoryTableView::model_notification(const GModelNotification& notification)
-{
-    if (notification.type() == GModelNotification::Type::ModelUpdated) {
-        set_status_message(String::format("%d item%s (%u byte%s)",
-        model().row_count(),
-        model().row_count() != 1 ? "s" : "",
-        model().bytes_in_files(),
-        model().bytes_in_files() != 1 ? "s" : ""));
-
-        if (on_path_change)
-            on_path_change(model().path());
-    }
-}
-
-void DirectoryTableView::set_status_message(const String& message)
+void DirectoryView::set_status_message(const String& message)
 {
     if (on_status_message)
         on_status_message(message);
 }
 
-void DirectoryTableView::open_parent_directory()
+void DirectoryView::open_parent_directory()
 {
     model().open(String::format("%s/..", model().path().characters()));
 }
 
-void DirectoryTableView::refresh()
+void DirectoryView::refresh()
 {
     model().update();
 }

Applications/FileManager/DirectoryTableView.h

@@ -1,13 +1,15 @@
 #pragma once
 
 #include <LibGUI/GTableView.h>
+#include <LibGUI/GItemView.h>
+#include <LibGUI/GStackWidget.h>
 #include <sys/stat.h>
 #include "DirectoryModel.h"
 
-class DirectoryTableView final : public GTableView {
+class DirectoryView final : public GStackWidget {
 public:
-    explicit DirectoryTableView(GWidget* parent);
-    virtual ~DirectoryTableView() override;
+    explicit DirectoryView(GWidget* parent);
+    virtual ~DirectoryView() override;
 
     void open(const String& path);
     String path() const { return model().path(); }
@@ -18,13 +20,20 @@ public:
     Function<void(const String&)> on_path_change;
     Function<void(String)> on_status_message;
 
-private:
-    virtual void model_notification(const GModelNotification&) override;
+    enum ViewMode { Invalid, List, Icon };
+    void set_view_mode(ViewMode);
+    ViewMode view_mode() const { return m_view_mode; }
 
+private:
     DirectoryModel& model() { return *m_model; }
     const DirectoryModel& model() const { return *m_model; }
 
     void set_status_message(const String&);
 
+    ViewMode m_view_mode { Invalid };
+
     Retained<DirectoryModel> m_model;
+
+    GTableView* m_table_view { nullptr };
+    GItemView* m_item_view { nullptr };
 };

Applications/FileManager/main.cpp

@@ -47,22 +47,22 @@ int main(int argc, char** argv)
 
     auto* location_textbox = new GTextEditor(GTextEditor::SingleLine, location_toolbar);
 
-    auto* directory_table_view = new DirectoryTableView(widget);
+    auto* directory_view = new DirectoryView(widget);
     auto* statusbar = new GStatusBar(widget);
 
-    location_textbox->on_return_pressed = [directory_table_view] (auto& editor) {
-        directory_table_view->open(editor.text());
+    location_textbox->on_return_pressed = [directory_view] (auto& editor) {
+        directory_view->open(editor.text());
     };
 
-    auto open_parent_directory_action = GAction::create("Open parent directory", { Mod_Alt, Key_Up }, GraphicsBitmap::load_from_file("/res/icons/parentdirectory16.png"), [directory_table_view] (const GAction&) {
-        directory_table_view->open_parent_directory();
+    auto open_parent_directory_action = GAction::create("Open parent directory", { Mod_Alt, Key_Up }, GraphicsBitmap::load_from_file("/res/icons/parentdirectory16.png"), [directory_view] (const GAction&) {
+        directory_view->open_parent_directory();
     });
 
     auto mkdir_action = GAction::create("New directory...", GraphicsBitmap::load_from_file("/res/icons/16x16/mkdir.png"), [&] (const GAction&) {
         GInputBox input_box("Enter name:", "New directory", window);
         if (input_box.exec() == GInputBox::ExecOK && !input_box.text_value().is_empty()) {
             auto new_dir_path = String::format("%s/%s",
-                directory_table_view->path().characters(),
+                directory_view->path().characters(),
                 input_box.text_value().characters()
             );
             int rc = mkdir(new_dir_path.characters(), 0777);
@@ -70,11 +70,19 @@ int main(int argc, char** argv)
                 GMessageBox message_box(String::format("mkdir() failed: %s", strerror(errno)), "Error", window);
                 message_box.exec();
             } else {
-                directory_table_view->refresh();
+                directory_view->refresh();
             }
         }
     });
 
+    auto view_as_list_action = GAction::create("List view", { Mod_Ctrl, KeyCode::Key_L }, [&] (const GAction&) {
+        directory_view->set_view_mode(DirectoryView::ViewMode::List);
+    });
+
+    auto view_as_icons_action = GAction::create("Icon view", { Mod_Ctrl, KeyCode::Key_I }, [&] (const GAction&) {
+        directory_view->set_view_mode(DirectoryView::ViewMode::Icon);
+    });
+
     auto copy_action = GAction::create("Copy", GraphicsBitmap::load_from_file("/res/icons/copyfile16.png"), [] (const GAction&) {
         dbgprintf("'Copy' action activated!\n");
     });
@@ -99,6 +107,11 @@ int main(int argc, char** argv)
     file_menu->add_action(delete_action.copy_ref());
     menubar->add_menu(move(file_menu));
 
+    auto view_menu = make<GMenu>("View");
+    view_menu->add_action(view_as_list_action.copy_ref());
+    view_menu->add_action(view_as_icons_action.copy_ref());
+    menubar->add_menu(move(view_menu));
+
     auto help_menu = make<GMenu>("Help");
     help_menu->add_action(GAction::create("About", [] (const GAction&) {
         dbgprintf("FIXME: Implement Help/About\n");
@@ -112,17 +125,17 @@ int main(int argc, char** argv)
     main_toolbar->add_action(copy_action.copy_ref());
     main_toolbar->add_action(delete_action.copy_ref());
 
-    directory_table_view->on_path_change = [window, location_textbox] (const String& new_path) {
+    directory_view->on_path_change = [window, location_textbox] (const String& new_path) {
         window->set_title(String::format("FileManager: %s", new_path.characters()));
         location_textbox->set_text(new_path);
     };
 
-    directory_table_view->on_status_message = [statusbar] (String message) {
+    directory_view->on_status_message = [statusbar] (String message) {
         statusbar->set_text(move(message));
     };
 
-    directory_table_view->open("/");
-    directory_table_view->set_focus(true);
+    directory_view->open("/");
+    directory_view->set_focus(true);
 
     window->set_main_widget(widget);
     window->show();

LibGUI/GAbstractView.cpp

@@ -25,8 +25,10 @@ void GAbstractView::set_model(RetainPtr<GModel>&& model)
     did_update_model();
 }
 
-void GAbstractView::model_notification(const GModelNotification&)
+void GAbstractView::model_notification(const GModelNotification& notification)
 {
+    if (on_model_notification)
+        on_model_notification(notification);
 }
 
 void GAbstractView::did_update_model()

LibGUI/GAbstractView.h

@@ -2,6 +2,7 @@
 
 #include <LibGUI/GModel.h>
 #include <LibGUI/GScrollableWidget.h>
+#include <AK/Function.h>
 
 class GAbstractView : public GScrollableWidget {
     friend class GModel;
@@ -18,6 +19,10 @@ public:
     virtual bool accepts_focus() const override { return true; }
     virtual void did_update_model();
 
+    Function<void(const GModelNotification&)> on_model_notification;
+
+    virtual const char* class_name() const override { return "GAbstractView"; }
+
 protected:
     virtual void model_notification(const GModelNotification&);
 

LibGUI/GItemView.cpp

@@ -0,0 +1,199 @@
+#include <LibGUI/GItemView.h>
+#include <LibGUI/GModel.h>
+#include <LibGUI/GScrollBar.h>
+#include <SharedGraphics/Painter.h>
+#include <Kernel/KeyCode.h>
+
+GItemView::GItemView(GWidget* parent)
+    : GAbstractView(parent)
+{
+}
+
+GItemView::~GItemView()
+{
+}
+
+void GItemView::scroll_into_view(const GModelIndex& index, Orientation orientation)
+{
+    GScrollableWidget::scroll_into_view(item_rect(index.row()), orientation);
+}
+
+void GItemView::resize_event(GResizeEvent& event)
+{
+    GAbstractView::resize_event(event);
+    update_content_size();
+}
+
+void GItemView::did_update_model()
+{
+    GAbstractView::did_update_model();
+    update_content_size();
+    update();
+}
+
+void GItemView::update_content_size()
+{
+    if (!model())
+        return set_content_size({ });
+
+    m_visual_column_count = available_size().width() / effective_item_size().width();
+    if (m_visual_column_count)
+        m_visual_row_count = ceil_div(model()->row_count(), m_visual_column_count);
+    else
+        m_visual_row_count = 0;
+
+    int content_width = available_size().width();
+    int content_height = m_visual_row_count * effective_item_size().height();
+
+    set_content_size({ content_width, content_height });
+}
+
+Rect GItemView::item_rect(int item_index) const
+{
+    if (!m_visual_row_count || !m_visual_column_count)
+        return { };
+    int visual_row_index = item_index / m_visual_column_count;
+    int visual_column_index = item_index % m_visual_column_count;
+    return {
+        visual_column_index * effective_item_size().width(),
+        visual_row_index * effective_item_size().height(),
+        effective_item_size().width(),
+        effective_item_size().height()
+    };
+}
+
+void GItemView::mousedown_event(GMouseEvent& event)
+{
+    if (event.button() == GMouseButton::Left) {
+        // FIXME: Since all items are the same size, just compute the clicked item index
+        //        instead of iterating over everything.
+        auto adjusted_position = event.position().translated(0, vertical_scrollbar().value());
+        for (int i = 0; i < item_count(); ++i) {
+            if (item_rect(i).contains(adjusted_position)) {
+                model()->set_selected_index({ i, 0 });
+                update();
+                return;
+            }
+        }
+        model()->set_selected_index({ });
+        update();
+    }
+}
+
+void GItemView::paint_event(GPaintEvent& event)
+{
+    Painter painter(*this);
+    painter.set_clip_rect(event.rect());    
+    painter.fill_rect(event.rect(), Color::White);
+    painter.save();
+    painter.translate(-horizontal_scrollbar().value(), -vertical_scrollbar().value());
+
+    auto column_metadata = model()->column_metadata(m_model_column);
+    const Font& font = column_metadata.font ? *column_metadata.font : this->font();
+
+    for (int item_index = 0; item_index < model()->row_count(); ++item_index) {
+        bool is_selected_item = item_index == model()->selected_index().row();
+        Color background_color;
+        if (is_selected_item) {
+            background_color = is_focused() ? Color::from_rgb(0x84351a) : Color::from_rgb(0x606060);
+        } else {
+            background_color = Color::White;
+        }
+
+        Rect item_rect = this->item_rect(item_index);
+        GModelIndex model_index(item_index, m_model_column);
+
+        auto icon = model()->data(model_index, GModel::Role::Icon);
+        auto item_text = model()->data(model_index, GModel::Role::Display);
+
+        Rect icon_rect = { 0, 0, 32, 32 };
+        icon_rect.center_within(item_rect);
+        icon_rect.move_by(0, -font.glyph_height() - 6);
+
+        if (icon.is_bitmap()) {
+            painter.draw_scaled_bitmap(icon_rect, icon.as_bitmap(), icon.as_bitmap().rect());
+        }
+
+        Rect text_rect { 0, icon_rect.bottom() + 6 + 1, font.width(item_text.to_string()), font.glyph_height() };
+        text_rect.center_horizontally_within(item_rect);
+        text_rect.inflate(4, 4);
+
+        Color text_color;
+        if (is_selected_item)
+            text_color = Color::White;
+        else
+            text_color = model()->data(model_index, GModel::Role::ForegroundColor).to_color(Color::Black);
+        painter.fill_rect(text_rect, background_color);
+        painter.draw_text(text_rect, item_text.to_string(), font, TextAlignment::Center, text_color);
+    };
+
+    painter.restore();
+
+    if (is_focused())
+        painter.draw_rect({ { }, available_size() }, Color::from_rgb(0x84351a));
+}
+
+int GItemView::item_count() const
+{
+    if (!model())
+        return 0;
+    return model()->row_count();
+}
+
+void GItemView::keydown_event(GKeyEvent& event)
+{
+    if (!model())
+        return;
+    auto& model = *this->model();
+    if (event.key() == KeyCode::Key_Return) {
+        model.activate(model.selected_index());
+        return;
+    }
+    if (event.key() == KeyCode::Key_Up) {
+        GModelIndex new_index;
+        if (model.selected_index().is_valid())
+            new_index = { model.selected_index().row() - 1, model.selected_index().column() };
+        else
+            new_index = { 0, 0 };
+        if (model.is_valid(new_index)) {
+            model.set_selected_index(new_index);
+            scroll_into_view(new_index, Orientation::Vertical);
+            update();
+        }
+        return;
+    }
+    if (event.key() == KeyCode::Key_Down) {
+        GModelIndex new_index;
+        if (model.selected_index().is_valid())
+            new_index = { model.selected_index().row() + 1, model.selected_index().column() };
+        else
+            new_index = { 0, 0 };
+        if (model.is_valid(new_index)) {
+            model.set_selected_index(new_index);
+            scroll_into_view(new_index, Orientation::Vertical);
+            update();
+        }
+        return;
+    }
+    if (event.key() == KeyCode::Key_PageUp) {
+        int items_per_page = visible_content_rect().height() / effective_item_size().height();
+        GModelIndex new_index(max(0, model.selected_index().row() - items_per_page), model.selected_index().column());
+        if (model.is_valid(new_index)) {
+            model.set_selected_index(new_index);
+            scroll_into_view(new_index, Orientation::Vertical);
+            update();
+        }
+        return;
+    }
+    if (event.key() == KeyCode::Key_PageDown) {
+        int items_per_page = visible_content_rect().height() / effective_item_size().height();
+        GModelIndex new_index(min(model.row_count() - 1, model.selected_index().row() + items_per_page), model.selected_index().column());
+        if (model.is_valid(new_index)) {
+            model.set_selected_index(new_index);
+            scroll_into_view(new_index, Orientation::Vertical);
+            update();
+        }
+        return;
+    }
+    return GWidget::keydown_event(event);
+}

LibGUI/GItemView.h

@@ -0,0 +1,44 @@
+#pragma once
+
+#include <LibGUI/GModel.h>
+#include <LibGUI/GAbstractView.h>
+#include <AK/Function.h>
+#include <AK/HashMap.h>
+
+class GScrollBar;
+class Painter;
+
+class GItemView : public GAbstractView {
+public:
+    explicit GItemView(GWidget* parent);
+    virtual ~GItemView() override;
+
+    int content_width() const;
+    int horizontal_padding() const { return m_horizontal_padding; }
+
+    void scroll_into_view(const GModelIndex&, Orientation);
+    Size effective_item_size() const { return m_effective_item_size; }
+
+    int model_column() const { return m_model_column; }
+    void set_model_column(int column) { m_model_column = column; }
+
+    virtual const char* class_name() const override { return "GItemView"; }
+
+private:
+    virtual void did_update_model() override;
+    virtual void paint_event(GPaintEvent&) override;
+    virtual void resize_event(GResizeEvent&) override;
+    virtual void mousedown_event(GMouseEvent&) override;
+    virtual void keydown_event(GKeyEvent&) override;
+
+    int item_count() const;
+    Rect item_rect(int item_index) const;
+    void update_content_size();
+
+    int m_horizontal_padding { 5 };
+    int m_model_column { 0 };
+    int m_visual_column_count { 0 };
+    int m_visual_row_count { 0 };
+
+    Size m_effective_item_size { 80, 80 };
+};

LibGUI/GModel.h

@@ -42,7 +42,7 @@ public:
         const Font* font { nullptr };
     };
 
-    enum class Role { Display, Sort, Custom, ForegroundColor, BackgroundColor };
+    enum class Role { Display, Sort, Custom, ForegroundColor, BackgroundColor, Icon };
 
     virtual ~GModel();
 

LibGUI/GScrollableWidget.cpp

@@ -39,14 +39,21 @@ void GScrollableWidget::resize_event(GResizeEvent& event)
     }
 }
 
+Size GScrollableWidget::available_size() const
+{
+    int available_width = width() - m_size_occupied_by_fixed_elements.width() - width_occupied_by_vertical_scrollbar();
+    int available_height = height() - m_size_occupied_by_fixed_elements.height() - height_occupied_by_horizontal_scrollbar();
+    return { available_width, available_height };
+}
+
 void GScrollableWidget::update_scrollbar_ranges()
 {
-    int available_height = height() - m_size_occupied_by_fixed_elements.height() - height_occupied_by_horizontal_scrollbar();
-    int excess_height = max(0, m_content_size.height() - available_height);
+    auto available_size = this->available_size();
+
+    int excess_height = max(0, m_content_size.height() - available_size.height());
     m_vertical_scrollbar->set_range(0, excess_height);
 
-    int available_width = width() - m_size_occupied_by_fixed_elements.width() - width_occupied_by_vertical_scrollbar();
-    int excess_width = max(0, m_content_size.width() - available_width);
+    int excess_width = max(0, m_content_size.width() - available_size.width());
     m_horizontal_scrollbar->set_range(0, excess_width);
 
     m_vertical_scrollbar->set_big_step(visible_content_rect().height() - m_vertical_scrollbar->step());

LibGUI/GScrollableWidget.h

@@ -20,6 +20,8 @@ public:
     void set_scrollbars_enabled(bool);
     bool is_scrollbars_enabled() const { return m_scrollbars_enabled; }
 
+    Size available_size() const;
+
     GScrollBar& vertical_scrollbar() { return *m_vertical_scrollbar; }
     const GScrollBar& vertical_scrollbar() const { return *m_vertical_scrollbar; }
     GScrollBar& horizontal_scrollbar() { return *m_horizontal_scrollbar; }

LibGUI/GStackWidget.cpp

@@ -39,7 +39,7 @@ void GStackWidget::child_event(GChildEvent& event)
     if (event.type() == GEvent::ChildAdded) {
         if (!m_active_widget)
             set_active_widget(&child);
-        else
+        else if (m_active_widget != &child)
             child.set_visible(false);
     } else if (event.type() == GEvent::ChildRemoved) {
         if (m_active_widget == &child) {

LibGUI/GTableView.cpp

@@ -30,9 +30,9 @@ void GTableView::update_content_size()
 
 void GTableView::did_update_model()
 {
+    GAbstractView::did_update_model();
     update_content_size();
     update();
-    GAbstractView::did_update_model();
 }
 
 Rect GTableView::row_rect(int item_index) const

LibGUI/GTableView.h

@@ -30,6 +30,8 @@ public:
     bool is_column_hidden(int) const;
     void set_column_hidden(int, bool);
 
+    virtual const char* class_name() const override { return "GTableView"; }
+
 private:
     virtual void did_update_model() override;
     virtual void paint_event(GPaintEvent&) override;

LibGUI/Makefile

@@ -49,6 +49,7 @@ LIBGUI_OBJS = \
     GDesktop.o \
     GProgressBar.o \
     GAbstractView.o \
+    GItemView.o \
     GWindow.o
 
 OBJS = $(SHAREDGRAPHICS_OBJS) $(LIBGUI_OBJS)