Added percentage support to UIElements

src/dawn/scene/components/ui/CMakeLists.txt

@@ -11,7 +11,6 @@ target_sources(${DAWN_TARGET_NAME}
     UILabel.cpp
     UIImage.cpp
     UIBorder.cpp
-    UIGrid.cpp
 )
 
 add_subdirectory(menu)

src/dawn/scene/components/ui/UIBorder.cpp

@@ -53,6 +53,8 @@ void UIBorder::onStart() {
   UIComponent::onStart();
 
   auto rebufferQuad = [&] {
+    std::cout << "W" << this->getWidth() << std::endl;
+    std::cout << "H" << this->getHeight() << std::endl;
     glm::vec2 tSize = glm::vec2(1, 1) / 3.0f;
     glm::vec2 bSize = (glm::vec2)borderSize;
     glm::vec2 iSize = glm::vec2(this->getWidth(), this->getHeight()) - ( bSize * 2.0f );

src/dawn/scene/components/ui/UIComponent.cpp

@@ -4,13 +4,17 @@
 // https://opensource.org/licenses/MIT
 
 #include "UIComponent.hpp"
-#include "UIGrid.hpp"
 
 using namespace Dawn;
 
+
 UIComponent::UIComponent(SceneItem *item) :
   SceneItemComponent(item),
   alignment(glm::vec4(0, 0, 128, 128)),
+  alignUnitLeft(UI_COMPONENT_ALIGN_UNIT_SCALE),
+  alignUnitTop(UI_COMPONENT_ALIGN_UNIT_SCALE),
+  alignUnitRight(UI_COMPONENT_ALIGN_UNIT_SCALE),
+  alignUnitBottom(UI_COMPONENT_ALIGN_UNIT_SCALE),
   alignX(UI_COMPONENT_ALIGN_START),
   alignY(UI_COMPONENT_ALIGN_START),
   alignmentNeedsUpdating(true)
@@ -33,19 +37,14 @@ void UIComponent::updateAlignment() {
   auto dimensional = this->getParentDimensional();
   auto translate = this->transform->getLocalPosition();
 
-  float_t parentWidth, parentHeight, parentX, parentY;
+  float_t parentWidth, parentHeight;
-  auto dimensionalAsGrid = dynamic_cast<UIGrid*>(dimensional);
+  parentWidth = dimensional->getWidth();
-  if(dimensionalAsGrid != nullptr) {
+  parentHeight = dimensional->getHeight();
-    std::cout << "TEST" << std::endl;
-  } else {
-    parentWidth = dimensional->getWidth();
-    parentHeight = dimensional->getHeight();
-    parentX = 0;
-    parentY = 0;
-  }
 
   UIComponent::calculateDimensions(
     this->alignX,
+    this->alignUnitLeft,
+    this->alignUnitRight,
     &translate.x,
     &this->width,
     parentWidth,
@@ -54,23 +53,33 @@ void UIComponent::updateAlignment() {
   );
   UIComponent::calculateDimensions(
     this->alignY,
+    this->alignUnitTop,
+    this->alignUnitBottom,
     &translate.y,
     &this->height,
     parentHeight,
     this->getContentHeight(),
     glm::vec2(align[1], align[3])
   );
-  
-  translate.x += parentX;
-  translate.y += parentY;
 
   this->transform->setLocalPosition(translate);
   this->alignmentNeedsUpdating = false;
   this->eventAlignmentUpdated.invoke();
 }
 
+float_t UIComponent::calculateAlignmentValue(
+  float_t alignmentValue,
+  float_t parentSize,
+  enum UIComponentAlignUnit unit
+) {
+  if(unit == UI_COMPONENT_ALIGN_UNIT_SCALE) return alignmentValue;
+  return (alignmentValue / 100.0f) * parentSize;
+}
+
 void UIComponent::calculateDimensions(
   enum UIComponentAlign align,
+  enum UIComponentAlignUnit unitStart,
+  enum UIComponentAlignUnit unitEnd,
   float_t *position,
   float_t *size,
   float_t outerSize,
@@ -81,25 +90,68 @@ void UIComponent::calculateDimensions(
   assertNotNull(size);
 
   switch(align) {
-    case UI_COMPONENT_ALIGN_STRETCH:
+    case UI_COMPONENT_ALIGN_STRETCH: {
-      *position = alignment[0];
+      // For stretch:
-      *size = outerSize + (alignment[0] + alignment[1]);
+      // Alignment 0 becomes START offset, Alignment 1 becomes END Offset
+      *position = UIComponent::calculateAlignmentValue(
+        alignment[0],
+        outerSize,
+        unitStart
+      );
+      *size = outerSize - (*position + UIComponent::calculateAlignmentValue(
+        alignment[1],
+        outerSize,
+        unitEnd
+      ));
       break;
+    }
 
-    case UI_COMPONENT_ALIGN_START:
+    case UI_COMPONENT_ALIGN_START: {
-      *position = alignment[0];
+      // For start:
-      *size = alignment[1];
+      // Alignment 0 becomes START offset, Alignment 1 becomes SIZE
+      *position = UIComponent::calculateAlignmentValue(
+        alignment[0],
+        outerSize,
+        unitStart
+      );
+      *size = UIComponent::calculateAlignmentValue(
+        alignment[1],
+        outerSize,
+        unitEnd
+      );
       break;
+    }
 
-    case UI_COMPONENT_ALIGN_MIDDLE:
+    case UI_COMPONENT_ALIGN_MIDDLE: {
-      *size = mathMax<float_t>(innerSize, alignment[1]);
+      *size = mathMax<float_t>(
-      *position = (outerSize / 2.0f) - (innerSize / 2.0f) + alignment[0];
+        innerSize,
+        UIComponent::calculateAlignmentValue(
+          alignment[1],
+          outerSize,
+          unitEnd
+        )
+      );
+      *position = (outerSize / 2.0f) - (*size / 2.0f) + UIComponent::calculateAlignmentValue(
+        alignment[0],
+        outerSize,
+        unitStart
+      );
       break;
+    }
 
-    case UI_COMPONENT_ALIGN_END:
+    case UI_COMPONENT_ALIGN_END: {
-      *size = alignment[0];
+      *size = UIComponent::calculateAlignmentValue(
-      *position = outerSize - innerSize - alignment[1];
+        alignment[0],
+        outerSize,
+        unitStart
+      );
+      *position = outerSize - *size - UIComponent::calculateAlignmentValue(
+        alignment[1],
+        outerSize,
+        unitEnd
+      );
       break;
+    }
     
     default:
       assertUnreachable();

src/dawn/scene/components/ui/UIComponent.hpp

@@ -16,6 +16,11 @@ namespace Dawn {
     UI_COMPONENT_ALIGN_STRETCH
   };
 
+  enum UIComponentAlignUnit {
+    UI_COMPONENT_ALIGN_UNIT_SCALE,
+    UI_COMPONENT_ALIGN_UNIT_PERCENT
+  };
+
   class UIComponentRenderable {
     public:
       /**
@@ -56,10 +61,26 @@ namespace Dawn {
     public:
       StateProperty<bool_t> alignmentNeedsUpdating;
 
+      /**
+       * Method used to calculate alignment values.
+       * 
+       * @param alignmentValue Alignment value.
+       * @param parentSize Parent size.
+       * @param unit Alignment unit.
+       * @return The calculated alignment value.
+       */
+      static float_t calculateAlignmentValue(
+        float_t alignmentValue,
+        float_t parentSize,
+        enum UIComponentAlignUnit unit
+      );
+
       /**
        * Method used to calculate alignment dimensions.
        * 
        * @param align Alignment  value enumator.
+       * @param unitStart Alignment start unit.
+       * @param unitEnd Alignment end unit.
        * @param position Output position floating point.
        * @param size Output size floating point.
        * @param outerSize Outer size (of the parent).
@@ -68,6 +89,8 @@ namespace Dawn {
        */
       static void calculateDimensions(
         enum UIComponentAlign align,
+        enum UIComponentAlignUnit unitStart,
+        enum UIComponentAlignUnit unitEnd,
         float_t *position,
         float_t *size,
         float_t outerSize,
@@ -80,6 +103,14 @@ namespace Dawn {
       // @optional
       StateProperty<enum UIComponentAlign> alignY;
       // @optional
+      StateProperty<enum UIComponentAlignUnit> alignUnitLeft;
+      // @optional
+      StateProperty<enum UIComponentAlignUnit> alignUnitTop;
+      // @optional
+      StateProperty<enum UIComponentAlignUnit> alignUnitRight;
+      // @optional
+      StateProperty<enum UIComponentAlignUnit> alignUnitBottom;
+      // @optional
       StateProperty<glm::vec4> alignment;
 
       UIComponent(SceneItem *item);

src/dawn/scene/components/ui/UIGrid.cpp

@@ -1,30 +0,0 @@
-// Copyright (c) 2023 Dominic Masters
-// 
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
-#include "UIGrid.hpp"
-
-using namespace Dawn;
-
-UIGrid::UIGrid(SceneItem *item) :
-  SceneItemComponent(item)
-{
-  
-}
-
-float_t UIGrid::getWidth() {
-  return 1;
-}
-
-float_t UIGrid::getHeight() {
-  return 1;
-}
-
-float_t UIGrid::getContentWidth() {
-  return 1;
-}
-
-float_t UIGrid::getContentHeight() {
-  return 1;
-}

src/dawn/scene/components/ui/UIGrid.hpp

@@ -1,22 +0,0 @@
-// Copyright (c) 2023 Dominic Masters
-// 
-// This software is released under the MIT License.
-// https://opensource.org/licenses/MIT
-
-#pragma once
-#include "scene/SceneItemComponent.hpp"
-#include "UICanvas.hpp"
-
-namespace Dawn {
-  class UIGrid :
-    public SceneItemComponent,
-    public UIComponentDimensional
-  {
-    public:
-      UIGrid(SceneItem *item);
-      float_t getWidth() override;
-      float_t getHeight() override;
-      float_t getContentWidth() override;
-      float_t getContentHeight() override;
-  };
-}

src/dawn/scene/components/ui/UILabel.cpp

@@ -37,6 +37,8 @@ void UILabel::updateMesh() {
     float_t x;
     UIComponent::calculateDimensions(
       this->alignX,
+      this->alignUnitLeft,
+      this->alignUnitRight,
       &x,
       &width,
       dimensional->getWidth(),