Fixed many element scroll area and added color palette picker

This commit is contained in:
Yousef Khadadeh 2026-04-30 14:45:36 +03:00
parent c90c09b169
commit c1cd3e4e49
14 changed files with 156 additions and 124 deletions

View file

@ -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"

View file

@ -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)},
}
}) { }
}
}
});
}
}}

View file

@ -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);
}}

View file

@ -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) {

View file

@ -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) {

View file

@ -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);
}
}

View file

@ -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)},
}
}) { }
}
}
});
}
}
}
}

View file

@ -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;
};
}

View file

@ -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) {

View file

@ -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;

View file

@ -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);
}
});
fileViewScrollArea = gridArea->scrollArea;
})->scrollArea;
}
}

View file

@ -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;

View file

@ -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;
};

View file

@ -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);