Reintroduced column mode for BadgeComponent.

Also fixed an issue with direction in FlexboxComponent when using column mode.
This commit is contained in:
Leon Styhre 2021-10-25 19:13:54 +02:00
parent 4f6d2c7fae
commit f32c3dc6f4
5 changed files with 61 additions and 36 deletions

View file

@ -153,8 +153,9 @@ std::map<std::string, std::map<std::string, ThemeData::ElementPropertyType>> 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},

View file

@ -187,26 +187,37 @@ void BadgeComponent::applyTheme(const std::shared_ptr<ThemeData>& theme,
}
}
if (elem->has("itemsPerRow")) {
const float itemsPerRow{elem->get<float>("itemsPerRow")};
if (itemsPerRow < 1.0f || itemsPerRow > 10.0f) {
LOG(LogWarning)
<< "BadgeComponent: Invalid theme configuration, <itemsPerRow> set to \""
<< itemsPerRow << "\"";
if (elem->has("direction")) {
const std::string direction{elem->get<std::string>("direction")};
if (direction != "row" && direction != "column") {
LOG(LogWarning) << "BadgeComponent: Invalid theme configuration, <direction> set to \""
<< direction << "\"";
}
else {
mFlexboxComponent.setItemsPerLine(static_cast<unsigned int>(itemsPerRow));
mFlexboxComponent.setDirection(direction);
}
}
if (elem->has("rows")) {
const float rows{elem->get<float>("rows")};
if (rows < 1.0f || rows > 10.0f) {
LOG(LogWarning) << "BadgeComponent: Invalid theme configuration, <rows> set to \""
<< rows << "\"";
if (elem->has("lines")) {
const float lines{elem->get<float>("lines")};
if (lines < 1.0f || lines > 10.0f) {
LOG(LogWarning) << "BadgeComponent: Invalid theme configuration, <lines> set to \""
<< lines << "\"";
}
else {
mFlexboxComponent.setLines(static_cast<unsigned int>(rows));
mFlexboxComponent.setLines(static_cast<unsigned int>(lines));
}
}
if (elem->has("itemsPerLine")) {
const float itemsPerLine{elem->get<float>("itemsPerLine")};
if (itemsPerLine < 1.0f || itemsPerLine > 10.0f) {
LOG(LogWarning)
<< "BadgeComponent: Invalid theme configuration, <itemsPerLine> set to \""
<< itemsPerLine << "\"";
}
else {
mFlexboxComponent.setItemsPerLine(static_cast<unsigned int>(itemsPerLine));
}
}

View file

@ -24,8 +24,8 @@ FlexboxComponent::FlexboxComponent(Window* window, std::vector<FlexboxItem>& 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<unsigned int>(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;

View file

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

View file

@ -241,8 +241,9 @@ based on: 'recalbox-multi' by the Recalbox community
<size>0.13 0.1635</size>
<origin>0.5 0.5</origin>
<alignment>left</alignment>
<itemsPerRow>3</itemsPerRow>
<rows>2</rows>
<direction>row</direction>
<lines>2</lines>
<itemsPerLine>3</itemsPerLine>
<controllerPos>0.5 0.572</controllerPos>
<controllerSize>0.81</controllerSize>
<itemMargin>-1.0 0.005</itemMargin>