Fixed many element scroll area and added color palette picker

CMakeLists.txt

@@ -129,6 +129,7 @@ set(sources "src/main.cpp"
             "src/GUIStuff/Elements/LayoutElement.cpp"
             "src/GUIStuff/Elements/ColorRectangleDisplay.cpp"
             "src/GUIStuff/Elements/ScrollArea.cpp"
+            "src/GUIStuff/Elements/ManyElementScrollArea.cpp"
             "src/GUIStuff/Elements/PositionAdjustingPopupMenu.cpp"
             "src/GUIStuff/Elements/ColorPickerShaders.cpp"
             "src/GUIStuff/Elements/GridScrollArea.cpp"
@@ -139,7 +140,6 @@ set(sources "src/main.cpp"
             "src/GUIStuff/ElementHelpers/TextLabelHelpers.cpp"
             "src/GUIStuff/ElementHelpers/RadioButtonHelpers.cpp"
             "src/GUIStuff/ElementHelpers/CheckBoxHelpers.cpp"
-            "src/GUIStuff/ElementHelpers/ScrollAreaHelpers.cpp"
             "include/Helpers/Networking/NetLibrary.cpp"
             "include/Helpers/Networking/NetServer.cpp"
             "include/Helpers/Networking/NetClient.cpp"

src/GUIStuff/ElementHelpers/ScrollAreaHelpers.cpp

@@ -1,72 +0,0 @@
-#include "ScrollAreaHelpers.hpp"
-#include "../GUIManager.hpp"
-#include "Helpers/ConvertVec.hpp"
-
-namespace GUIStuff { namespace ElementHelpers {
-
-ScrollArea* scroll_area_many_entries(GUIManager& gui, const char* id, const ScrollBarManyEntriesOptions& options) {
-    return gui.clipping_element<ScrollArea>(id, ScrollArea::Options{
-        .scrollVertical = true,
-        .clipHorizontal = options.clipHorizontal,
-        .clipVertical = true,
-        .scrollbarY = options.scrollbar,
-        .xAlign = options.xAlign,
-        .yAlign = CLAY_ALIGN_Y_TOP,
-        .innerContent = [&](const ScrollArea::InnerContentParameters& params) {
-            if(options.innerContentExtraCallback) options.innerContentExtraCallback(params);
-
-            if(params.containerDimensions.y() == 0.0f) {
-                if(options.growing) {
-                    CLAY_AUTO_ID({
-                        .layout = {
-                            .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(1)},
-                        }
-                    }) { }
-                }
-                else {
-                    CLAY_AUTO_ID({
-                        .layout = {
-                            .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
-                        }
-                    }) { }
-                }
-                return;
-            }
-
-            float absScrollAmount = std::fabs(params.scrollOffset->y());
-            size_t startPoint = absScrollAmount / options.entryHeight;
-            size_t elementsContainable = (params.containerDimensions.y() / options.entryHeight) + 2; // Displaying 2 more elements ensures that there isn't any empty space in the container
-            size_t endPoint = std::min(options.entryCount, startPoint + elementsContainable);
-
-            if(startPoint != 0) {
-                CLAY_AUTO_ID({
-                    .layout = {
-                        .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(startPoint * options.entryHeight)},
-                    }
-                }) { }
-            }
-
-            gui.new_id("many element list", [&] {
-                for(size_t i = startPoint; i < endPoint; i++) {
-                    gui.new_id(i - startPoint, [&] {
-                        CLAY_AUTO_ID({
-                            .layout = { .sizing = {.width = options.xElementSize, .height = CLAY_SIZING_FIXED(options.entryHeight)}}
-                        }) {
-                            options.elementContent(i);
-                        }
-                    });
-                }
-            });
-
-            if(endPoint != options.entryCount) {
-                CLAY_AUTO_ID({
-                    .layout = {
-                        .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED((options.entryCount - endPoint) * options.entryHeight)},
-                    }
-                }) { }
-            }
-        }
-    });
-}
-
-}}

src/GUIStuff/ElementHelpers/ScrollAreaHelpers.hpp

@@ -1,21 +0,0 @@
-#pragma once
-#include "../Elements/ScrollArea.hpp"
-#include "Helpers/ConvertVec.hpp"
-
-namespace GUIStuff { namespace ElementHelpers {
-
-struct ScrollBarManyEntriesOptions {
-    float entryHeight;
-    size_t entryCount;
-    bool clipHorizontal = false;
-    bool growing = false; // If set to false, this element has a fixed size. Otherwise, is a growing element.
-    Clay_LayoutAlignmentX xAlign = CLAY_ALIGN_X_LEFT;
-    Clay_SizingAxis xElementSize = CLAY_SIZING_GROW(0);
-    ScrollArea::ScrollbarType scrollbar = ScrollArea::ScrollbarType::NORMAL;
-    std::function<void(size_t elementIndex)> elementContent;
-    std::function<void(const ScrollArea::InnerContentParameters&)> innerContentExtraCallback;
-};
-
-ScrollArea* scroll_area_many_entries(GUIManager& gui, const char* id, const ScrollBarManyEntriesOptions& options);
-
-}}

src/GUIStuff/Elements/DropDown.hpp

@@ -1,7 +1,7 @@
 #pragma once
 #include "Element.hpp"
+#include "ManyElementScrollArea.hpp"
 #include "SelectableButton.hpp"
-#include "../ElementHelpers/ScrollAreaHelpers.hpp"
 #include "../ElementHelpers/LayoutHelpers.hpp"
 #include "../ElementHelpers/TextLabelHelpers.hpp"
 #include "../ElementHelpers/ButtonHelpers.hpp"
@@ -81,11 +81,10 @@ template <typename T> class DropDown : public Element {
                                     .width = CLAY_BORDER_OUTSIDE(1)
                                 }
                             }) {
-                                ElementHelpers::scroll_area_many_entries(gui, "dropdown scroll area", {
+                                gui.element<ManyElementScrollArea>("dropdown scroll area", ManyElementScrollArea::Options{
                                     .entryHeight = 18.0f,
                                     .entryCount = selections.size(),
                                     .clipHorizontal = true,
-                                    .growing = true,
                                     .elementContent = [&](size_t i) {
                                         bool selectedEntry = static_cast<size_t>(*data) == i;
                                         gui.element<LayoutElement>("elem", [&] (LayoutElement*, const Clay_ElementId& lId) {

src/GUIStuff/Elements/FontPicker.cpp

@@ -10,9 +10,9 @@
 #include "../GUIManager.hpp"
 
 #include "../ElementHelpers/ButtonHelpers.hpp"
-#include "../ElementHelpers/ScrollAreaHelpers.hpp"
 #include "../ElementHelpers/TextBoxHelpers.hpp"
 #include "TextParagraph.hpp"
+#include "ManyElementScrollArea.hpp"
 
 std::vector<std::string> sortedFontList;
 std::vector<std::string> sortedFontListLowercase;
@@ -120,11 +120,10 @@ void FontPicker::layout(const Clay_ElementId& id, std::string* newFontName, cons
                             .width = CLAY_BORDER_OUTSIDE(1)
                         }
                     }) {
-                        ElementHelpers::scroll_area_many_entries(gui, "dropdown scroll area", {
+                        gui.element<ManyElementScrollArea>("dropdown scroll area", ManyElementScrollArea::Options{
                             .entryHeight = ENTRY_HEIGHT,
                             .entryCount = sortedFontList.size(),
                             .clipHorizontal = true,
-                            .growing = true,
                             .elementContent = [&](size_t i) {
                                 bool selectedEntry = val == i;
                                 gui.element<LayoutElement>("elem", [&] (LayoutElement*, const Clay_ElementId& lId) {

src/GUIStuff/Elements/GridScrollArea.cpp

@@ -1,21 +1,19 @@
 #include "GridScrollArea.hpp"
-#include "../ElementHelpers/ScrollAreaHelpers.hpp"
 #include "Helpers/ConvertVec.hpp"
 #include "../GUIManager.hpp"
+#include "ManyElementScrollArea.hpp"
 
 namespace GUIStuff {
 
 GridScrollArea::GridScrollArea(GUIManager& gui): Element(gui) {}
 
 void GridScrollArea::layout(const Clay_ElementId& id, const Options& o) {
-    using namespace ElementHelpers;
-
     options = o;
 
     if(boundingBox.has_value())
         rowWidth = boundingBox.value().width(); // Use grid element bounding box instead of inner content width because row width will decide whether a scroll bar appears or not, which will change the inner content width (circular dependency)
 
-    ScrollBarManyEntriesOptions opts;
+    ManyElementScrollArea::Options opts;
     opts.clipHorizontal = true;
     opts.entryHeight = options.entryHeight;
     opts.innerContentExtraCallback = [&, extraCallback = options.innerContentExtraCallback] (const ScrollArea::InnerContentParameters& contParams) {
@@ -72,7 +70,7 @@ void GridScrollArea::layout(const Clay_ElementId& id, const Options& o) {
             .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}
         }
     }) {
-        scrollArea = scroll_area_many_entries(gui, "scroll many area", opts);
+        gui.element<ManyElementScrollArea>("scroll many area", opts);
     }
 }
 

src/GUIStuff/Elements/ManyElementScrollArea.cpp

@@ -0,0 +1,62 @@
+#include "ManyElementScrollArea.hpp"
+#include "../GUIManager.hpp"
+
+namespace GUIStuff {
+
+ManyElementScrollArea::ManyElementScrollArea(GUIManager& gui): Element(gui) {}
+
+void ManyElementScrollArea::layout(const Clay_ElementId& id, const Options& opts) {
+    options = opts;
+    CLAY(id, {
+        .layout = {.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}}
+    }) {
+        if(boundingBox.has_value()) {
+            scrollArea = gui.clipping_element<ScrollArea>("scroll area", ScrollArea::Options{
+                .scrollVertical = true,
+                .clipHorizontal = options.clipHorizontal,
+                .clipVertical = true,
+                .scrollbarY = options.scrollbar,
+                .xAlign = options.xAlign,
+                .yAlign = CLAY_ALIGN_Y_TOP,
+                .innerContent = [&](const ScrollArea::InnerContentParameters& params) {
+                    if(options.innerContentExtraCallback) options.innerContentExtraCallback(params);
+
+                    float absScrollAmount = std::fabs(params.scrollOffset->y());
+                    size_t startPoint = absScrollAmount / options.entryHeight;
+                    size_t elementsContainable = (boundingBox.value().height() / options.entryHeight) + 2; // Displaying 2 more elements ensures that there isn't any empty space in the container
+                    size_t endPoint = std::min(options.entryCount, startPoint + elementsContainable);
+
+                    if(startPoint != 0) {
+                        CLAY_AUTO_ID({
+                            .layout = {
+                                .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(startPoint * options.entryHeight)},
+                            }
+                        }) { }
+                    }
+
+                    gui.new_id("many element list", [&] {
+                        for(size_t i = startPoint; i < endPoint; i++) {
+                            gui.new_id(i - startPoint, [&] {
+                                CLAY_AUTO_ID({
+                                    .layout = { .sizing = {.width = options.xElementSize, .height = CLAY_SIZING_FIXED(options.entryHeight)}}
+                                }) {
+                                    options.elementContent(i);
+                                }
+                            });
+                        }
+                    });
+
+                    if(endPoint != options.entryCount) {
+                        CLAY_AUTO_ID({
+                            .layout = {
+                                .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED((options.entryCount - endPoint) * options.entryHeight)},
+                            }
+                        }) { }
+                    }
+                }
+            });
+        }
+    }
+}
+
+}

src/GUIStuff/Elements/ManyElementScrollArea.hpp

@@ -0,0 +1,30 @@
+#pragma once
+#include "Element.hpp"
+#include "Helpers/ConvertVec.hpp"
+#include "ScrollArea.hpp"
+
+namespace GUIStuff {
+
+class ManyElementScrollArea : public Element {
+    public:
+        ManyElementScrollArea(GUIManager& gui);
+
+        struct Options {
+            float entryHeight;
+            size_t entryCount;
+            bool clipHorizontal = false;
+            Clay_LayoutAlignmentX xAlign = CLAY_ALIGN_X_LEFT;
+            Clay_SizingAxis xElementSize = CLAY_SIZING_GROW(0);
+            ScrollArea::ScrollbarType scrollbar = ScrollArea::ScrollbarType::NORMAL;
+            std::function<void(size_t elementIndex)> elementContent;
+            std::function<void(const ScrollArea::InnerContentParameters&)> innerContentExtraCallback;
+        };
+
+        void layout(const Clay_ElementId& id, const Options& opts);
+
+        ScrollArea* scrollArea = nullptr;
+    private:
+        Options options;
+};
+
+}

src/GUIStuff/Elements/TreeListing.cpp

@@ -1,9 +1,8 @@
 #include "TreeListing.hpp"
 #include "Helpers/ConvertVec.hpp"
-#include "ScrollArea.hpp"
+#include "ManyElementScrollArea.hpp"
 #include "../GUIManager.hpp"
 
-#include "../ElementHelpers/ScrollAreaHelpers.hpp"
 #include "../ElementHelpers/ButtonHelpers.hpp"
 #include "LayoutElement.hpp"
 
@@ -54,10 +53,9 @@ void TreeListing::layout(const Clay_ElementId& id, const Data& newDisplayData) {
             CLAY(lIdParent, {
                 .layout = {.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}}
             }) {
-                scroll_area_many_entries(gui, "scroll", {
+                gui.element<ManyElementScrollArea>("scroll", ManyElementScrollArea::Options{
                     .entryHeight = ENTRY_HEIGHT,
                     .entryCount = flattenedIndexList.size(),
-                    .growing = d.scrollAreaGrowing,
                     .elementContent = [&](size_t i) {
                         const ObjInfo& objInfo = flattenedIndexList[i];
                         gui.element<LayoutElement>("elem", [&](LayoutElement*, const Clay_ElementId& lId) {

src/GUIStuff/Elements/TreeListing.hpp

@@ -31,7 +31,6 @@ class TreeListing : public Element {
         };
 
         struct Data {
-            bool scrollAreaGrowing = true;
             std::set<TreeListingObjIndexList>* selectedIndices = nullptr;
             std::function<std::optional<DirectoryInfo>(const TreeListingObjIndexList& objIndex)> dirInfo;
             std::function<void(const TreeListingObjIndexList& objIndex, bool isOpen)> setDirectoryOpen;

src/Screens/FileSelectScreen.cpp

@@ -3,9 +3,9 @@
 #include "../GUIHolder.hpp"
 #include "../GUIStuff/ElementHelpers/TextLabelHelpers.hpp"
 #include "../GUIStuff/ElementHelpers/ButtonHelpers.hpp"
-#include "../GUIStuff/ElementHelpers/ScrollAreaHelpers.hpp"
 #include "Helpers/ConvertVec.hpp"
 #include "../GUIStuff/Elements/GridScrollArea.hpp"
+#include "../GUIStuff/Elements/ManyElementScrollArea.hpp"
 #include "../GUIStuff/Elements/ImageDisplay.hpp"
 #include "../GUIStuff/Elements/LayoutElement.hpp"
 #include "../GUIStuff/Elements/SVGIcon.hpp"
@@ -683,7 +683,7 @@ void FileSelectScreen::file_view() {
     };
 
     if(fileViewType == FileViewType::LIST) {
-        fileViewScrollArea = scroll_area_many_entries(gui, "File selector list", ScrollBarManyEntriesOptions{
+        fileViewScrollArea = gui.element<ManyElementScrollArea>("File selector list", ManyElementScrollArea::Options{
             .entryHeight = 150.0f,
             .entryCount = fileList.size(),
             .clipHorizontal = true,
@@ -691,7 +691,7 @@ void FileSelectScreen::file_view() {
             .elementContent = [&](size_t i) {
                 fileButton(i, true, Vector2f{100.0f, 100.0f});
             }
-        });
+        })->scrollArea;
     }
     else {
         Vector2f entrySize{0.0f, 0.0f};
@@ -712,7 +712,7 @@ void FileSelectScreen::file_view() {
             default:
                 break;
         }
-        GridScrollArea* gridArea = gui.element<GridScrollArea>("File selector grid", GridScrollArea::Options{
+        fileViewScrollArea = gui.element<GridScrollArea>("File selector grid", GridScrollArea::Options{
             .entryWidth = entrySize.x(),
             .childAlignmentX = CLAY_ALIGN_X_LEFT,
             .entryHeight = entrySize.y(),
@@ -721,8 +721,7 @@ void FileSelectScreen::file_view() {
             .elementContent = [&](size_t i) {
                 fileButton(i, false, iconSize);
             }
-        });
+        })->scrollArea;
-        fileViewScrollArea = gridArea->scrollArea;
     }
 }
 

src/Screens/PhoneDrawingProgramScreen.cpp

@@ -2,6 +2,7 @@
 #include "../MainProgram.hpp"
 #include "DrawingProgramScreen.hpp"
 #include "Helpers/ConvertVec.hpp"
+#include "../GUIStuff/Elements/GridScrollArea.hpp"
 #include "../GUIStuff/ElementHelpers/ButtonHelpers.hpp"
 #include "../GUIStuff/ElementHelpers/LayoutHelpers.hpp"
 #include "../GUIStuff/ElementHelpers/TextLabelHelpers.hpp"
@@ -116,8 +117,10 @@ void PhoneDrawingProgramScreen::bottom_toolbar() {
                             tool_settings_popup();
                             break;
                         case SettingsMenuPopup::FG_COLOR:
+                            color_settings_popup(&main.toolConfig.globalConf.foregroundColor);
                             break;
                         case SettingsMenuPopup::BG_COLOR:
+                            color_settings_popup(&main.toolConfig.globalConf.backgroundColor);
                             break;
                     }
                 }
@@ -198,10 +201,10 @@ void PhoneDrawingProgramScreen::bottom_toolbar_gui() {
 }
 
 void PhoneDrawingProgramScreen::tool_settings_popup() {
-    GUIManager& gui = main.g.gui;
     auto& drawP = main.world->drawProg;
+    auto& gui = main.g.gui;
     auto& io = gui.io;
-
+ 
     gui.element<LayoutElement>("tool settings popup", [&] (LayoutElement*, const Clay_ElementId& lId) {
         CLAY(lId, {
             .layout = {
@@ -231,6 +234,40 @@ void PhoneDrawingProgramScreen::tool_settings_popup() {
     });
 }
 
+void PhoneDrawingProgramScreen::color_settings_popup(Vector4f* color) {
+    auto& gui = main.g.gui;
+    auto& palette = main.conf.palettes[paletteData.selectedPalette];
+    gui.element<LayoutElement>("color settings popup", [&] (LayoutElement*, const Clay_ElementId& lId) {
+        CLAY(lId, {
+            .layout = {
+                .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0)},
+            },
+            .backgroundColor = convert_vec4<Clay_Color>(gui.io.theme->backColor1),
+            .cornerRadius = CLAY_CORNER_RADIUS(gui.io.theme->windowCorners1)
+        }) {
+            gui.element<GridScrollArea>("color selector grid", GridScrollArea::Options{
+                .entryWidth = BIG_BUTTON_SIZE,
+                .childAlignmentX = CLAY_ALIGN_X_CENTER,
+                .entryHeight = BIG_BUTTON_SIZE,
+                .entryCount = palette.colors.size(),
+                .elementContent = [&](size_t i) {
+                    auto newC = std::make_shared<Vector3f>(palette.colors[i].x(), palette.colors[i].y(), palette.colors[i].z());
+                    color_button(gui, "c", newC.get(), {
+                        .isSelected = newC->x() == color->x() && newC->y() == color->y() && newC->z() == color->z(),
+                        .hasAlpha = false,
+                        .onClick = [newC, color] {
+                            // We want to keep the old color's alpha
+                            color->x() = newC->x();
+                            color->y() = newC->y();
+                            color->z() = newC->z();
+                        }
+                    });
+                }
+            });
+        }
+    });
+}
+
 void PhoneDrawingProgramScreen::bottom_extra_toolbar_gui() {
     GUIManager& gui = main.g.gui;
 

src/Screens/PhoneDrawingProgramScreen.hpp

@@ -17,10 +17,16 @@ class PhoneDrawingProgramScreen : public DrawingProgramScreen {
         void bottom_toolbar();
         void main_display();
         void tool_settings_popup();
+        void color_settings_popup(Vector4f* color);
         enum class SettingsMenuPopup {
             NONE,
             SETTINGS,
             FG_COLOR,
             BG_COLOR
         } settingsMenuPopup = SettingsMenuPopup::NONE;
+        struct PaletteData {
+            size_t selectedPalette = 0;
+            bool addingPalette = false;
+            std::string newPaletteStr;
+        } paletteData;
 };

src/Toolbar.cpp

@@ -1,13 +1,12 @@
 #include "Toolbar.hpp"
 #include "CustomEvents.hpp"
 #include "DrawingProgram/Tools/DrawingProgramToolBase.hpp"
-#include "DrawingProgram/Tools/ScreenshotTool.hpp"
 #include "FileHelpers.hpp"
 #include "GUIStuff/ElementHelpers/CheckBoxHelpers.hpp"
 #include "GUIStuff/ElementHelpers/LayoutHelpers.hpp"
 #include "GUIStuff/ElementHelpers/PopupHelpers.hpp"
 #include "GUIStuff/ElementHelpers/RadioButtonHelpers.hpp"
-#include "GUIStuff/ElementHelpers/ScrollAreaHelpers.hpp"
+#include "GUIStuff/Elements/ManyElementScrollArea.hpp"
 #include "Helpers/ConvertVec.hpp"
 #include "Helpers/FileDownloader.hpp"
 #include "Helpers/MathExtras.hpp"
@@ -796,11 +795,10 @@ void Toolbar::grid_menu(Element* gridMenuButton) {
                     float ENTRY_HEIGHT = 25.0f;
                     if(main.world->gridMan.grids->empty())
                         text_label_centered(gui, "No grids yet...");
-                    scroll_area_many_entries(gui, "grid menu entries", {
+                    gui.element<ManyElementScrollArea>("grid menu entries", ManyElementScrollArea::Options{
                         .entryHeight = ENTRY_HEIGHT,
                         .entryCount = main.world->gridMan.grids->size(),
                         .clipHorizontal = true,
-                        .growing = true,
                         .elementContent = [&](size_t i) {
                             auto& grid = main.world->gridMan.grids->at(i)->obj;
                             bool selectedEntry = gridMenu.selectedGrid == i;
@@ -2081,7 +2079,7 @@ void Toolbar::file_picker_gui() {
             .backgroundColor = convert_vec4<Clay_Color>(io.theme->backColor2)
         }) {
             constexpr float entryHeight = 25.0f;
-            filePicker.entriesScrollArea = scroll_area_many_entries(gui, "file picker entries", {
+            filePicker.entriesScrollArea = gui.element<ManyElementScrollArea>("file picker entries", ManyElementScrollArea::Options{
                 .entryHeight = entryHeight,
                 .entryCount = filePicker.entries.size(),
                 .clipHorizontal = false,
@@ -2133,7 +2131,7 @@ void Toolbar::file_picker_gui() {
                         }
                     });
                 }
-            });
+            })->scrollArea;
         }
         left_to_right_line_layout(gui, [&]() {
             input_text(gui, "filepicker filename", &filePicker.fileName);