ADD: JustifyContent

src/engine/core/gui/uiComponent/UiComponent.cpp

@@ -6,7 +6,6 @@
 
 void UiComponent::addChild(std::unique_ptr<UiComponent> child) {
     child->parent = this;
-    child->uiPositioner.compute(this->uiPositioner.screenSpace);
     children.emplace_back(std::move(child));
 }
 

src/engine/core/gui/uiComponent/UiComponent.h

@@ -26,6 +26,13 @@ public:
     UiComponent* parent = nullptr;
     UiPositioner uiPositioner;
     std::vector<std::unique_ptr<UiComponent>> children;
+
+    LayoutStyle& getLayoutStyle() {
+        return uiPositioner.getLayout();
+    }
+    void setLayoutStyle(const LayoutStyle& style) {
+        uiPositioner.setLayout(style);
+    }
 protected:
 
 

src/engine/core/gui/uiComponent/UiImage.cpp

@@ -4,9 +4,12 @@
 
 #include "UiImage.h"
 
+#include <iostream>
+
 void UiImage::onCollectRenderData(UiRenderBundle& renderBundle) {
     if (!visible) return;
     Dimensions dims = uiPositioner.screenSpace;
+    std::cout << "Child Y: " << uiPositioner.screenSpace.y << "Height " << uiPositioner.screenSpace.height <<std::endl;
     GUITexture texture(textureID, glm::vec2(dims.x, dims.y), glm::vec2(dims.width, dims.height));
     renderBundle.addGUITexture(std::make_shared<GUITexture>(texture));;
 }

src/engine/core/gui/uiComponent/layout/LayoutStyle.h

@@ -49,6 +49,7 @@ struct LayoutStyle {
     };
 
     FlexDirection flexDirection = FlexDirection::Column;
+    JustifyContent justifyContent = JustifyContent::Start;
 
     float flexGrow = 0.0f;
 };

src/engine/core/gui/uiComponent/layout/UiPositioner.cpp

@@ -16,33 +16,40 @@ void UiPositioner::compute(const Dimensions &parent) {
     screenSpace.width  = resolve(style.width, parent.width, screenWidth);
     screenSpace.height = resolve(style.height, parent.height, screenHeight);
 
-    // 2. Sibling-Offset nur anwenden, wenn parent existiert
-    if (uiComponent.parent) {
-        float siblingOffset = 0.0f;
-        for (auto& sibling : uiComponent.parent->children) {
-            if (&sibling->uiPositioner == this) break; // nur bis zu mir
-            if (uiComponent.parent->uiPositioner.style.flexDirection == FlexDirection::Column) {
-                siblingOffset += sibling->uiPositioner.screenSpace.height;
-                siblingOffset += sibling->uiPositioner.resolve(sibling->uiPositioner.style.margin.top, parent.height, screenHeight);
-            } else {
-                siblingOffset += sibling->uiPositioner.screenSpace.width;
-                siblingOffset += sibling->uiPositioner.resolve(sibling->uiPositioner.style.margin.left, parent.width, screenWidth);
-            }
-        }
-
-        if (uiComponent.parent->uiPositioner.style.flexDirection == FlexDirection::Column) {
-            screenSpace.y += siblingOffset;
-        } else {
-            screenSpace.x += siblingOffset;
-        }
-
-    }
-
-    // 3. Kinder rekursiv positionieren
-    float currentMainOffset = 0.0f;
+    // 3. Kinder rekursiv positionieren mit JustifyContent
     for (auto& child : uiComponent.children) {
         child->uiPositioner.compute(screenSpace);
+    }
+    float totalChildrenMainSize = 0.0f;
+    // 3a. Gesamtgröße der Kinder berechnen (inkl. Top/Left Margins)
+    for (auto& child : uiComponent.children) {
+        float childMainSize = 0.0f;
+        float marginMain = 0.0;
+        if (style.flexDirection == FlexDirection::Column) {
+            childMainSize = child->uiPositioner.screenSpace.height;
+            marginMain = child->uiPositioner.resolve(child->uiPositioner.style.margin.top, screenSpace.height, screenHeight);
+        } else {
+            childMainSize = child->uiPositioner.screenSpace.width;
+            marginMain = child->uiPositioner.resolve(child->uiPositioner.style.margin.left, screenSpace.width, screenWidth);
+        }
 
+        totalChildrenMainSize += childMainSize + marginMain;
+    }
+
+    // 3b JustifyContent-offset berechnen
+    float remainingSpace = ((style.flexDirection == FlexDirection::Column) ? screenSpace.height : screenSpace.width) - totalChildrenMainSize;
+    float justifyOffset = 0.0f;
+    switch (style.justifyContent) {
+        case JustifyContent::Start: justifyOffset = 0.0f; break;
+        case JustifyContent::Center: justifyOffset = remainingSpace / 2.0f; break;
+        case JustifyContent::End: justifyOffset = remainingSpace; break;
+        default: break; // Space between later
+    }
+
+
+    // 3. Kinder rekursiv positionieren
+    float currentMainOffset = justifyOffset;
+    for (auto& child : uiComponent.children) {
         if (style.flexDirection == FlexDirection::Column) {
             child->uiPositioner.screenSpace.y += currentMainOffset;
             currentMainOffset += child->uiPositioner.screenSpace.height;
@@ -56,6 +63,14 @@ void UiPositioner::compute(const Dimensions &parent) {
 
 }
 
+LayoutStyle & UiPositioner::getLayout() {
+    return style;
+}
+
+void UiPositioner::setLayout(const LayoutStyle &style) {
+    this->style = style;
+}
+
 
 float UiPositioner::resolve(const SizeValue &size, float parentSize, float axisLength) {
     switch (size.unit) {

src/engine/core/gui/uiComponent/layout/UiPositioner.h

@@ -19,6 +19,9 @@ public:
 
     void compute(const Dimensions& parentDimensions);
 
+    LayoutStyle & getLayout();
+    void setLayout(const LayoutStyle &style);
+
 private:
     UiComponent& uiComponent;
     LayoutStyle style;

src/engine/renderer/GUIRenderer.cpp

@@ -4,6 +4,7 @@
 
 #include "GUIRenderer.h"
 
+#include <iostream>
 #include <vector>
 
 #include "../core/gui/uiComponent/UiRenderBundle.h"

src/game/UILayer.cpp

@@ -22,11 +22,14 @@ void UILayer::onAttach() {
 
 
     rootContainer = std::make_unique<UiContainer>();
+    LayoutStyle& rootLayout = rootContainer->getLayoutStyle();
+    rootLayout.justifyContent = JustifyContent::End;
+
     auto imageStyle = LayoutStyle();
     imageStyle.width = SizeValue(0.25f, SizeUnit::Percent);
     imageStyle.height = SizeValue(0.25f, SizeUnit::Percent);
     imageStyle.margin.left   = {50.f, SizeUnit::Pixels}; // 50px
-    imageStyle.margin.top    = {0.1f, SizeUnit::Percent}; // 10% vom Parent
+    imageStyle.margin.top    = {0.1f, SizeUnit::Percent};
 
     auto image = std::make_unique<UiImage>(
         Loader::instance().loadTextureFromFile("assets/textures/texture.png").getTextureID(),
@@ -51,6 +54,9 @@ void UILayer::onAttach() {
 
 void UILayer::onUpdate() {
     Layer::onUpdate();
+    Dimensions rootParent {0.0, 0.0, 1.0, 1.0f};
+    rootContainer->uiPositioner.compute(rootParent);
+
     UiRenderBundle renderBundle;
     if (rootContainer) {
         rootContainer->collectRenderData(renderBundle);