copilot/infinipaint
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Improved file selector grid alignment

Browse source
This commit is contained in:
Yousef Khadadeh 2026-04-21 18:38:24 +03:00
parent 3b9b9c0cf9
commit c75c668bf7
7 changed files with 45 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/GUIStuff/ElementHelpers/ScrollAreaHelpers.cpp
View file

@ -1,5 +1,6 @@
#include "ScrollAreaHelpers.hpp"
#include "../GUIManager.hpp"
#include "Helpers/ConvertVec.hpp"
namespace GUIStuff { namespace ElementHelpers {
@ -9,6 +10,8 @@ ScrollArea* scroll_area_many_entries(GUIManager& gui, const char* id, const Scro
.clipHorizontal = options.clipHorizontal,
.clipVertical = true,
.showScrollbarY = true,
.xAlign = options.xAlign,
.yAlign = CLAY_ALIGN_Y_TOP,
.innerContent = [&](const ScrollArea::InnerContentParameters& params) {
if(options.innerContentExtraCallback) options.innerContentExtraCallback(params);
@ -47,7 +50,7 @@ ScrollArea* scroll_area_many_entries(GUIManager& gui, const char* id, const Scro
for(size_t i = startPoint; i < endPoint; i++) {
gui.new_id(i - startPoint, [&] {
CLAY_AUTO_ID({
.layout = { .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(options.entryHeight)}}
.layout = { .sizing = {.width = options.xElementSize, .height = CLAY_SIZING_FIXED(options.entryHeight)}}
}) {
options.elementContent(i);
}

3
src/GUIStuff/ElementHelpers/ScrollAreaHelpers.hpp
View file

@ -1,5 +1,6 @@
#pragma once
#include "../Elements/ScrollArea.hpp"
#include "Helpers/ConvertVec.hpp"
namespace GUIStuff { namespace ElementHelpers {
@ -8,6 +9,8 @@ struct ScrollBarManyEntriesOptions {
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);
std::function<void(size_t elementIndex)> elementContent;
std::function<void(const ScrollArea::InnerContentParameters&)> innerContentExtraCallback;
};

19
src/GUIStuff/Elements/GridScrollArea.cpp
View file

@ -19,15 +19,20 @@ void GridScrollArea::layout(const Clay_ElementId& id, const Options& o) {
rowWidth = std::fabs(contParams.containerDimensions.x());
if(extraCallback) extraCallback(contParams);
};
size_t entriesPerRow = static_cast<size_t>(rowWidth / options.entryMaximumWidth) + 1;
size_t entriesPerRow = std::max<size_t>(rowWidth / options.entryWidth, 1);
size_t rowCount = (options.entryCount + entriesPerRow - 1) / entriesPerRow;
float entryWidth = rowWidth == 0.0f ? 100.0f : (rowWidth / entriesPerRow);
opts.entryCount = rowCount;
uint16_t xPadding = 0;
if(rowCount > 1 || (rowCount == 1 && ((options.entryCount + entriesPerRow) / entriesPerRow) > 1)) // More than 1 row or 1st row is full
xPadding = static_cast<float>(std::max<float>(rowWidth - (entriesPerRow * options.entryWidth), 0) / (entriesPerRow * 2));
opts.elementContent = [&] (size_t rowIndex) {
gui.new_id("grid row", [&] {
CLAY_AUTO_ID({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(options.entryHeight)},
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.padding = {.left = xPadding, .right = xPadding},
.childGap = xPadding,
.childAlignment = { .x = options.childAlignmentX}
}
}) {
@ -36,7 +41,9 @@ void GridScrollArea::layout(const Clay_ElementId& id, const Options& o) {
for(size_t i = startIndex; i < endIndex; i++) {
gui.new_id(static_cast<int64_t>(i - startIndex), [&] {
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(entryWidth), .height = CLAY_SIZING_FIXED(options.entryHeight)}}
.layout = {
.sizing = {.width = CLAY_SIZING_FIXED(options.entryWidth), .height = CLAY_SIZING_FIXED(options.entryHeight)},
}
}) {
options.elementContent(i);
}
@ -46,7 +53,9 @@ void GridScrollArea::layout(const Clay_ElementId& id, const Options& o) {
});
};
CLAY(id, {
.layout = {.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}}
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}
}
}) {
scroll_area_many_entries(gui, "scroll many area", opts);
}

2
src/GUIStuff/Elements/GridScrollArea.hpp
View file

@ -10,7 +10,7 @@ class GridScrollArea : public Element {
GridScrollArea(GUIManager& gui);
struct Options {
float entryMaximumWidth;
float entryWidth;
Clay_LayoutAlignmentX childAlignmentX = CLAY_ALIGN_X_LEFT;
float entryHeight;
size_t entryCount;

2
src/GUIStuff/Elements/ScrollArea.cpp
View file

@ -31,7 +31,7 @@ void ScrollArea::layout(const Clay_ElementId& id, const Options& options) {
CLAY(localID, {
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.childAlignment = {.x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_TOP},
.childAlignment = {.x = opts.xAlign, .y = opts.yAlign},
.layoutDirection = opts.layoutDirection
},
.clip = {.horizontal = opts.clipHorizontal, .vertical = opts.clipVertical, .childOffset = {.x = scrollOffset.x(), .y = scrollOffset.y()}}

2
src/GUIStuff/Elements/ScrollArea.hpp
View file

@ -22,6 +22,8 @@ class ScrollArea : public Element {
bool showScrollbarX = false;
bool showScrollbarY = false;
Clay_LayoutDirection layoutDirection = CLAY_TOP_TO_BOTTOM;
Clay_LayoutAlignmentX xAlign = CLAY_ALIGN_X_LEFT;
Clay_LayoutAlignmentY yAlign = CLAY_ALIGN_Y_TOP;
std::function<void(const InnerContentParameters&)> innerContent;
};

26
src/Screens/FileSelectScreen.cpp
View file

@ -2,6 +2,7 @@
#include "../MainProgram.hpp"
#include "../GUIHolder.hpp"
#include "../GUIStuff/ElementHelpers/TextLabelHelpers.hpp"
#include "../GUIStuff/ElementHelpers/ButtonHelpers.hpp"
#include "Helpers/ConvertVec.hpp"
#include "../GUIStuff/Elements/GridScrollArea.hpp"
#include "../GUIStuff/Elements/ImageDisplay.hpp"
@ -18,17 +19,30 @@ void FileSelectScreen::gui_layout_run() {
CLAY_AUTO_ID({
.layout = {
.sizing = {.width = CLAY_SIZING_FIXED(gui.io.windowSize.x()), .height = CLAY_SIZING_FIXED(gui.io.windowSize.y())},
.padding = {.top = 15},
.childGap = 15,
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.padding = CLAY_PADDING_ALL(gui.io.theme->padding1),
.childGap = gui.io.theme->childGap1,
.childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_TOP },
.layoutDirection = CLAY_TOP_TO_BOTTOM,
},
}) {
text_label(gui, "File selector");
CLAY_AUTO_ID({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(40)},
.padding = CLAY_PADDING_ALL(gui.io.theme->padding1),
.childGap = gui.io.theme->childGap1,
.childAlignment = { .x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_CENTER },
.layoutDirection = CLAY_LEFT_TO_RIGHT,
}
}) {
svg_icon_button(gui, "main settings button", "data/icons/menu.svg", {
.drawType = SelectableButton::DrawType::TRANSPARENT_ALL
});
text_label(gui, "File selector");
}
auto& fileList = get_file_list();
gui.element<GridScrollArea>("File selector grid", GridScrollArea::Options{
.entryMaximumWidth = 200.0f,
.entryWidth = 200.0f,
.childAlignmentX = CLAY_ALIGN_X_LEFT,
.entryHeight = 220.0f,
.entryCount = fileList.size(),
@ -43,7 +57,7 @@ void FileSelectScreen::gui_layout_run() {
}
}) {
CLAY_AUTO_ID({
.layout = { .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0) }},
.layout = { .sizing = {.width = CLAY_SIZING_FIXED(150), .height = CLAY_SIZING_GROW(0) }},
.aspectRatio = { .aspectRatio = 1.0f }
}) {
gui.element<ImageDisplay>("ico", ImageDisplay::Data{