Xargon/ES-DE
1
0
Fork 0
mirror of https://github.com/RetroDECK/ES-DE.git synced 2024-11-24 15:15:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed some issues in FlexboxComponent.

Browse source 
Also added some sanity checks and size restrictions to BadgeComponent and FlexboxComponent.
This commit is contained in:
Leon Styhre 2021-10-13 18:18:23 +02:00
parent c2d059f92e
commit eb611d12db
3 changed files with 63 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
es-core/src/components/BadgesComponent.cpp
View file

@ -138,11 +138,11 @@ void BadgesComponent::applyTheme(const std::shared_ptr<ThemeData>& theme,
if (elem->has("itemMargin")) {
const glm::vec2 itemMargin = elem->get<glm::vec2>("itemMargin");
if (itemMargin.x < 0.0f || itemMargin.x > 100.0f || itemMargin.y < 0.0f ||
itemMargin.y > 100.0f) {
if (itemMargin.x < 0.0f || itemMargin.x > 0.2f || itemMargin.y < 0.0f ||
itemMargin.y > 0.2f) {
LOG(LogWarning)
<< "BadgesComponent: Invalid theme configuration, <itemMargin> set to \""
<< itemMargin.x << "x" << itemMargin.y << "\"";
<< itemMargin.x << " " << itemMargin.y << "\"";
}
else {
mFlexboxComponent.setItemMargin(itemMargin);

87
es-core/src/components/FlexboxComponent.cpp
View file

@ -11,8 +11,8 @@
#define DEFAULT_ITEMS_PER_LINE 4
#define DEFAULT_LINES 2
#define DEFAULT_ITEM_PLACEMENT "center"
#define DEFAULT_MARGIN_X 10.0f
#define DEFAULT_MARGIN_Y 10.0f
#define DEFAULT_MARGIN_X std::roundf(0.01f * Renderer::getScreenWidth())
#define DEFAULT_MARGIN_Y std::roundf(0.01f * Renderer::getScreenHeight())
#include "components/FlexboxComponent.h"
@ -33,6 +33,32 @@ FlexboxComponent::FlexboxComponent(Window* window,
{
}
void FlexboxComponent::render(const glm::mat4& parentTrans)
{
if (!isVisible())
return;
if (!mLayoutValid)
computeLayout();
glm::mat4 trans{parentTrans * getTransform()};
Renderer::setMatrix(trans);
if (Settings::getInstance()->getBool("DebugImage"))
Renderer::drawRect(0.0f, 0.0f, mSize.x, mSize.y, 0xFF000033, 0xFF000033);
for (auto& image : mImages) {
if (mOpacity == 255) {
image.second.render(trans);
}
else {
image.second.setOpacity(mOpacity);
image.second.render(trans);
image.second.setOpacity(255);
}
}
}
void FlexboxComponent::computeLayout()
{
// Start placing items in the top-left.
@ -49,19 +75,35 @@ void FlexboxComponent::computeLayout()
directionRow = {1, 0};
}
// If we're not clamping itemMargin to a reasonable value, all kinds of weird rendering
// issues could occur.
mItemMargin.x = glm::clamp(mItemMargin.x, 0.0f, mSize.x / 2.0f);
mItemMargin.y = glm::clamp(mItemMargin.y, 0.0f, mSize.y / 2.0f);
// Also keep the size within reason.
mSize.x = glm::clamp(mSize.x, static_cast<float>(Renderer::getScreenWidth()) * 0.03f,
static_cast<float>(Renderer::getScreenWidth()));
mSize.y = glm::clamp(mSize.y, static_cast<float>(Renderer::getScreenHeight()) * 0.03f,
static_cast<float>(Renderer::getScreenHeight()));
// Compute maximum image dimensions.
glm::vec2 grid;
if (mDirection == "row")
grid = {mItemsPerLine, mLines};
else
grid = {mLines, mItemsPerLine};
glm::vec2 maxItemSize{(mSize + mItemMargin - grid * mItemMargin) / grid};
maxItemSize.x = floorf(maxItemSize.x);
maxItemSize.y = floorf(maxItemSize.y);
if (grid.x * grid.y < static_cast<float>(mImages.size())) {
LOG(LogWarning) << "FlexboxComponent: Invalid theme configuration, the number of badges "
"exceeds the product of <lines> times <itemsPerLine>";
}
glm::vec2 sizeChange{0.0f, 0.0f};
// Set final image dimensions.
for (auto& image : mImages) {
if (!image.second.isVisible())
@ -78,9 +120,22 @@ void FlexboxComponent::computeLayout()
newSize = sizeMaxX;
else
newSize = sizeMaxX.x * sizeMaxX.y >= sizeMaxY.x * sizeMaxY.y ? sizeMaxX : sizeMaxY;
image.second.setResize(newSize.x, newSize.y);
if (image.second.getSize() != newSize)
image.second.setResize(newSize.x, newSize.y);
// In case maxItemSize needs to be updated.
if (newSize.x != sizeChange.x)
sizeChange.x = newSize.x;
if (newSize.y != sizeChange.y)
sizeChange.y = newSize.y;
}
if (maxItemSize.x != sizeChange.x)
maxItemSize.x = sizeChange.x;
if (maxItemSize.y != sizeChange.y)
maxItemSize.y = sizeChange.y;
// Pre-compute layout parameters.
float anchorXStart{anchorX};
float anchorYStart{anchorY};
@ -140,29 +195,3 @@ void FlexboxComponent::computeLayout()
mLayoutValid = true;
}
void FlexboxComponent::render(const glm::mat4& parentTrans)
{
if (!isVisible())
return;
if (!mLayoutValid)
computeLayout();
glm::mat4 trans{parentTrans * getTransform()};
Renderer::setMatrix(trans);
if (Settings::getInstance()->getBool("DebugImage"))
Renderer::drawRect(0.0f, 0.0f, mSize.x, mSize.y, 0xFF000033, 0xFF000033);
for (auto& image : mImages) {
if (mOpacity == 255) {
image.second.render(trans);
}
else {
image.second.setOpacity(mOpacity);
image.second.render(trans);
image.second.setOpacity(255);
}
}
}

4
es-core/src/components/FlexboxComponent.h
View file

@ -15,10 +15,10 @@
class FlexboxComponent : public GuiComponent
{
public:
explicit FlexboxComponent(Window* window,
std::vector<std::pair<std::string, ImageComponent>>& images);
FlexboxComponent(Window* window, std::vector<std::pair<std::string, ImageComponent>>& images);
// Getters/setters for the layout.
std::string getDirection() const { return mDirection; }
void setDirection(const std::string& direction)
{
assert(direction == "row" || direction == "column");