From f32c3dc6f48f92520f9834d58d2a9f7f1c23ca91 Mon Sep 17 00:00:00 2001 From: Leon Styhre Date: Mon, 25 Oct 2021 19:13:54 +0200 Subject: [PATCH] Reintroduced column mode for BadgeComponent. Also fixed an issue with direction in FlexboxComponent when using column mode. --- es-core/src/ThemeData.cpp | 5 +-- es-core/src/components/BadgeComponent.cpp | 37 +++++++++++++-------- es-core/src/components/FlexboxComponent.cpp | 34 +++++++++++++------ es-core/src/components/FlexboxComponent.h | 16 ++++----- themes/rbsimple-DE/theme.xml | 5 +-- 5 files changed, 61 insertions(+), 36 deletions(-) diff --git a/es-core/src/ThemeData.cpp b/es-core/src/ThemeData.cpp index e1e83f432..2a1c7f07f 100644 --- a/es-core/src/ThemeData.cpp +++ b/es-core/src/ThemeData.cpp @@ -153,8 +153,9 @@ std::map> The {"rotation", FLOAT}, {"rotationOrigin", NORMALIZED_PAIR}, {"alignment", STRING}, - {"itemsPerRow", FLOAT}, - {"rows", FLOAT}, + {"direction", STRING}, + {"lines", FLOAT}, + {"itemsPerLine", FLOAT}, {"itemMargin", NORMALIZED_PAIR}, {"slots", STRING}, {"controllerPos", NORMALIZED_PAIR}, diff --git a/es-core/src/components/BadgeComponent.cpp b/es-core/src/components/BadgeComponent.cpp index 5402b62a9..3683b94b3 100644 --- a/es-core/src/components/BadgeComponent.cpp +++ b/es-core/src/components/BadgeComponent.cpp @@ -187,26 +187,37 @@ void BadgeComponent::applyTheme(const std::shared_ptr& theme, } } - if (elem->has("itemsPerRow")) { - const float itemsPerRow{elem->get("itemsPerRow")}; - if (itemsPerRow < 1.0f || itemsPerRow > 10.0f) { - LOG(LogWarning) - << "BadgeComponent: Invalid theme configuration, set to \"" - << itemsPerRow << "\""; + if (elem->has("direction")) { + const std::string direction{elem->get("direction")}; + if (direction != "row" && direction != "column") { + LOG(LogWarning) << "BadgeComponent: Invalid theme configuration, set to \"" + << direction << "\""; } else { - mFlexboxComponent.setItemsPerLine(static_cast(itemsPerRow)); + mFlexboxComponent.setDirection(direction); } } - if (elem->has("rows")) { - const float rows{elem->get("rows")}; - if (rows < 1.0f || rows > 10.0f) { - LOG(LogWarning) << "BadgeComponent: Invalid theme configuration, set to \"" - << rows << "\""; + if (elem->has("lines")) { + const float lines{elem->get("lines")}; + if (lines < 1.0f || lines > 10.0f) { + LOG(LogWarning) << "BadgeComponent: Invalid theme configuration, set to \"" + << lines << "\""; } else { - mFlexboxComponent.setLines(static_cast(rows)); + mFlexboxComponent.setLines(static_cast(lines)); + } + } + + if (elem->has("itemsPerLine")) { + const float itemsPerLine{elem->get("itemsPerLine")}; + if (itemsPerLine < 1.0f || itemsPerLine > 10.0f) { + LOG(LogWarning) + << "BadgeComponent: Invalid theme configuration, set to \"" + << itemsPerLine << "\""; + } + else { + mFlexboxComponent.setItemsPerLine(static_cast(itemsPerLine)); } } diff --git a/es-core/src/components/FlexboxComponent.cpp b/es-core/src/components/FlexboxComponent.cpp index da3bf1b1c..3b9fe9a0d 100644 --- a/es-core/src/components/FlexboxComponent.cpp +++ b/es-core/src/components/FlexboxComponent.cpp @@ -24,8 +24,8 @@ FlexboxComponent::FlexboxComponent(Window* window, std::vector& ite , mItems(items) , mDirection{DEFAULT_DIRECTION} , mAlignment{DEFAULT_ALIGNMENT} - , mItemsPerLine{DEFAULT_ITEMS_PER_LINE} , mLines{DEFAULT_LINES} + , mItemsPerLine{DEFAULT_ITEMS_PER_LINE} , mItemPlacement{DEFAULT_ITEM_PLACEMENT} , mItemMargin{glm::vec2{DEFAULT_MARGIN_X, DEFAULT_MARGIN_Y}} , mOverlayPosition{0.5f, 0.5f} @@ -86,8 +86,6 @@ void FlexboxComponent::setItemMargin(glm::vec2 value) void FlexboxComponent::computeLayout() { - // TODO: There is no right-alignment support for column mode. - // 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); @@ -107,7 +105,13 @@ void FlexboxComponent::computeLayout() mItemsPerLine = static_cast(mItems.size()); } - glm::vec2 grid{mItemsPerLine, mLines}; + glm::vec2 grid{}; + + if (mDirection == "row") + grid = {mItemsPerLine, mLines}; + else + grid = {mLines, mItemsPerLine}; + glm::vec2 maxItemSize{(mSize + mItemMargin - grid * mItemMargin) / grid}; float rowHeight{0.0f}; @@ -146,11 +150,11 @@ void FlexboxComponent::computeLayout() maxItemSize = glm::round(maxItemSize); - bool alignRight{mAlignment == "right" && mDirection == "row"}; + bool alignRight{mAlignment == "right"}; float alignRightComp{0.0f}; // If right-aligning, move the overall container contents during grid setup. - if (alignRight) + if (alignRight && mDirection == "row") alignRightComp = std::round(mSize.x - ((maxItemSize.x + mItemMargin.x) * grid.x) + mItemMargin.x); @@ -166,11 +170,19 @@ void FlexboxComponent::computeLayout() } } } - else { // Column mode. + else if (mDirection == "column" && !alignRight) { + for (int x = 0; x < grid.x; x++) { + for (int y = 0; y < grid.y; y++) { + itemPositions.push_back(glm::vec2{(x * (maxItemSize.x + mItemMargin.x)), + y * (rowHeight + mItemMargin.y)}); + } + } + } + else { // Right-aligned. for (int x = 0; x < grid.x; x++) { for (int y = 0; y < grid.y; y++) { itemPositions.push_back( - glm::vec2{(x * (maxItemSize.x + mItemMargin.x) + alignRightComp), + glm::vec2{(mSize.x - (x * (maxItemSize.x + mItemMargin.x)) - maxItemSize.x), y * (rowHeight + mItemMargin.y)}); } } @@ -185,7 +197,7 @@ void FlexboxComponent::computeLayout() if (!item.visible) continue; - if (pos > 0) { + if (mDirection == "row" && pos > 0) { if (itemPositions[pos - 1].y < itemPositions[pos].y) { lastY = itemPositions[pos].y; itemsOnLastRow = 0; @@ -225,8 +237,8 @@ void FlexboxComponent::computeLayout() pos++; } - // Apply right-align to the items (only works in row mode). - if (alignRight) { + // Apply right-align to the items if we're using row mode. + if (alignRight && mDirection == "row") { for (auto& item : mItems) { if (!item.visible) continue; diff --git a/es-core/src/components/FlexboxComponent.h b/es-core/src/components/FlexboxComponent.h index 4ab5ee5c3..ce5a6c60f 100644 --- a/es-core/src/components/FlexboxComponent.h +++ b/es-core/src/components/FlexboxComponent.h @@ -44,13 +44,6 @@ public: mLayoutValid = false; } - unsigned int getItemsPerLine() const { return mItemsPerLine; } - void setItemsPerLine(unsigned int value) - { - mItemsPerLine = value; - mLayoutValid = false; - } - unsigned int getLines() const { return mLines; } void setLines(unsigned int value) { @@ -58,6 +51,13 @@ public: mLayoutValid = false; } + unsigned int getItemsPerLine() const { return mItemsPerLine; } + void setItemsPerLine(unsigned int value) + { + mItemsPerLine = value; + mLayoutValid = false; + } + std::string getItemPlacement() const { return mItemPlacement; } void setItemPlacement(const std::string& value) { @@ -87,8 +87,8 @@ private: // Layout options. std::string mDirection; std::string mAlignment; - unsigned int mItemsPerLine; unsigned int mLines; + unsigned int mItemsPerLine; std::string mItemPlacement; glm::vec2 mItemMargin; diff --git a/themes/rbsimple-DE/theme.xml b/themes/rbsimple-DE/theme.xml index 7d543fe59..4d59d93e2 100644 --- a/themes/rbsimple-DE/theme.xml +++ b/themes/rbsimple-DE/theme.xml @@ -241,8 +241,9 @@ based on: 'recalbox-multi' by the Recalbox community 0.13 0.1635 0.5 0.5 left - 3 - 2 + row + 2 + 3 0.5 0.572 0.81 -1.0 0.005