From 7b47d2e4d62b1675ace6da0f82a6d5f67661bc7b Mon Sep 17 00:00:00 2001
From: Leon Styhre <leon@leonstyhre.com>
Date: Tue, 14 Feb 2023 17:56:27 +0100
Subject: [PATCH] Added carousel theme support for offsetting items to achieve
 a diagonal layout.

---
 es-core/src/ThemeData.cpp                     |  1 +
 .../components/primary/CarouselComponent.h    | 25 +++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/es-core/src/ThemeData.cpp b/es-core/src/ThemeData.cpp
index c78f84f88..bab18dec6 100644
--- a/es-core/src/ThemeData.cpp
+++ b/es-core/src/ThemeData.cpp
@@ -158,6 +158,7 @@ std::map<std::string, std::map<std::string, ThemeData::ElementPropertyType>>
        {"imageBrightness", FLOAT},
        {"imageSaturation", FLOAT},
        {"itemTransitions", STRING},
+       {"itemDiagonalOffset", FLOAT},
        {"itemHorizontalAlignment", STRING},
        {"itemVerticalAlignment", STRING},
        {"wheelHorizontalAlignment", STRING},
diff --git a/es-core/src/components/primary/CarouselComponent.h b/es-core/src/components/primary/CarouselComponent.h
index 168b2baa7..842a232b0 100644
--- a/es-core/src/components/primary/CarouselComponent.h
+++ b/es-core/src/components/primary/CarouselComponent.h
@@ -167,6 +167,7 @@ private:
     bool mHasImageSelectedColor;
     float mImageBrightness;
     float mImageSaturation;
+    float mItemDiagonalOffset;
     bool mInstantItemTransitions;
     Alignment mItemHorizontalAlignment;
     Alignment mItemVerticalAlignment;
@@ -233,6 +234,7 @@ CarouselComponent<T>::CarouselComponent()
     , mHasImageSelectedColor {false}
     , mImageBrightness {0.0f}
     , mImageSaturation {1.0f}
+    , mItemDiagonalOffset {0.0f}
     , mInstantItemTransitions {false}
     , mItemHorizontalAlignment {ALIGN_CENTER}
     , mItemVerticalAlignment {ALIGN_CENTER}
@@ -1109,6 +1111,16 @@ template <typename T> void CarouselComponent<T>::render(const glm::mat4& parentT
                 metadataOpacity = 0.7f;
         }
 
+        const glm::vec3 origPos {comp->getPosition()};
+        if (mItemDiagonalOffset != 0.0f) {
+            if (mType == CarouselType::HORIZONTAL)
+                comp->setPosition(
+                    origPos.x, origPos.y - (mItemDiagonalOffset * renderItem.distance), origPos.z);
+            else
+                comp->setPosition(origPos.x - (mItemDiagonalOffset * renderItem.distance),
+                                  origPos.y, origPos.z);
+        }
+
         comp->setScale(renderItem.scale);
         comp->setOpacity(renderItem.opacity * metadataOpacity);
         if (renderItem.index == mCursor && (mHasImageSelectedColor || mHasTextSelectedColor)) {
@@ -1143,6 +1155,9 @@ template <typename T> void CarouselComponent<T>::render(const glm::mat4& parentT
             comp->render(renderItem.trans);
         }
 
+        if (mItemDiagonalOffset != 0.0f)
+            comp->setPosition(origPos);
+
         // TODO: Rewrite to use "real" reflections instead of this hack.
         // Don't attempt to add reflections for text entries.
         if (mReflections && (mEntries.at(renderItem.index).data.imagePath != "" ||
@@ -1415,6 +1430,16 @@ void CarouselComponent<T>::applyTheme(const std::shared_ptr<ThemeData>& theme,
         if (elem->has("imageSaturation"))
             mImageSaturation = glm::clamp(elem->get<float>("imageSaturation"), 0.0f, 1.0f);
 
+        if (elem->has("itemDiagonalOffset") &&
+            (mType == CarouselType::HORIZONTAL || mType == CarouselType::VERTICAL)) {
+            const float diagonalOffset {
+                glm::clamp(elem->get<float>("itemDiagonalOffset"), -0.5f, 0.5f)};
+            if (mType == CarouselType::HORIZONTAL)
+                mItemDiagonalOffset = diagonalOffset * Renderer::getScreenHeight();
+            else
+                mItemDiagonalOffset = diagonalOffset * Renderer::getScreenWidth();
+        }
+
         if (elem->has("imageInterpolation")) {
             const std::string& imageInterpolation {elem->get<std::string>("imageInterpolation")};
             if (imageInterpolation == "linear") {