Added toolbar that goes into unsafe GUI area

This commit is contained in:
Yousef Khadadeh 2026-04-26 17:08:27 +03:00
parent b1f6f04d37
commit 667fefa3b4
3 changed files with 152 additions and 7 deletions

View file

@ -1,5 +1,6 @@
#include "LayoutHelpers.hpp"
#include "../Elements/LayoutElement.hpp"
#include "Helpers/ConvertVec.hpp"
namespace GUIStuff { namespace ElementHelpers {
@ -50,4 +51,131 @@ void left_to_right_line_centered_layout(GUIManager& gui, const std::function<voi
}
}
void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideBarConfig& config, const std::function<void()>& innerContent) {
gui.element<LayoutElement>(id, [&](LayoutElement* l, const Clay_ElementId& lId) {
switch(config.dir) {
case WindowFillSideBarConfig::Direction::TOP: {
CLAY(lId, {
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) },
.layoutDirection = CLAY_TOP_TO_BOTTOM
},
.backgroundColor = convert_vec4<Clay_Color>(config.backgroundColor),
.border = config.border
}) {
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(gui.io.safeWindowRect.min.y())}}
}) {}
CLAY_AUTO_ID({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) },
.layoutDirection = CLAY_LEFT_TO_RIGHT
}
}) {
float paddingElementWidth = (gui.io.windowSize.x() - gui.io.safeWindowRect.width()) / 2.0f;
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(paddingElementWidth), .height = CLAY_SIZING_FIT(0)}}
}) {}
innerContent();
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(paddingElementWidth), .height = CLAY_SIZING_FIT(0)}}
}) {}
}
}
break;
}
case WindowFillSideBarConfig::Direction::BOTTOM: {
CLAY(lId, {
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) },
.layoutDirection = CLAY_TOP_TO_BOTTOM
},
.backgroundColor = convert_vec4<Clay_Color>(config.backgroundColor),
.border = config.border
}) {
CLAY_AUTO_ID({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIT(0) },
.layoutDirection = CLAY_LEFT_TO_RIGHT
}
}) {
float paddingElementWidth = (gui.io.windowSize.x() - gui.io.safeWindowRect.width()) / 2.0f;
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(paddingElementWidth), .height = CLAY_SIZING_FIT(0)}}
}) {}
innerContent();
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(paddingElementWidth), .height = CLAY_SIZING_FIT(0)}}
}) {}
}
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(gui.io.windowSize.y() - gui.io.safeWindowRect.max.y())}}
}) {}
}
break;
}
case WindowFillSideBarConfig::Direction::LEFT: {
CLAY(lId, {
.layout = {
.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_GROW(0) },
.layoutDirection = CLAY_LEFT_TO_RIGHT
},
.backgroundColor = convert_vec4<Clay_Color>(config.backgroundColor),
.border = config.border
}) {
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(gui.io.safeWindowRect.min.x()), .height = CLAY_SIZING_GROW(0)}}
}) {}
CLAY_AUTO_ID({
.layout = {
.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_GROW(0) },
.layoutDirection = CLAY_TOP_TO_BOTTOM
}
}) {
float paddingElementHeight = (gui.io.windowSize.y() - gui.io.safeWindowRect.height()) / 2.0f;
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(paddingElementHeight)}}
}) {}
innerContent();
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(paddingElementHeight)}}
}) {}
}
}
break;
}
case WindowFillSideBarConfig::Direction::RIGHT: {
CLAY(lId, {
.layout = {
.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_GROW(0) },
.layoutDirection = CLAY_LEFT_TO_RIGHT
},
.backgroundColor = convert_vec4<Clay_Color>(config.backgroundColor),
.border = config.border
}) {
CLAY_AUTO_ID({
.layout = {
.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_GROW(0) },
.layoutDirection = CLAY_TOP_TO_BOTTOM
}
}) {
float paddingElementHeight = (gui.io.windowSize.y() - gui.io.safeWindowRect.height()) / 2.0f;
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(paddingElementHeight)}}
}) {}
innerContent();
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIT(0), .height = CLAY_SIZING_FIXED(paddingElementHeight)}}
}) {}
}
CLAY_AUTO_ID({
.layout = {.sizing = {.width = CLAY_SIZING_FIXED(gui.io.windowSize.x() - gui.io.safeWindowRect.max.x()), .height = CLAY_SIZING_GROW(0)}}
}) {}
}
break;
}
}
});
}
}}

View file

@ -9,4 +9,17 @@ void left_to_right_layout(GUIManager& gui, Clay_SizingAxis x, Clay_SizingAxis y,
void left_to_right_line_layout(GUIManager& gui, const std::function<void()>& innerContent);
void left_to_right_line_centered_layout(GUIManager& gui, const std::function<void()>& innerContent);
struct WindowFillSideBarConfig {
enum class Direction {
TOP,
BOTTOM,
LEFT,
RIGHT
} dir = Direction::TOP;
SkColor4f backgroundColor = {0.0f, 0.0f, 0.0f, 0.0f};
Clay_BorderElementConfig border;
};
void window_fill_side_bar(GUIManager& gui, const char* id, const WindowFillSideBarConfig& config, const std::function<void()>& innerContent);
}}