Basic UI Alignment controls examples

src/dawn/component/ui/UICanvas.cpp

@@ -6,7 +6,7 @@
 #include "UICanvas.hpp"
 #include "display/pass/RenderPass.hpp"
 #include "display/mesh/QuadMesh.hpp"
-#include "ui/UIComponent.hpp"
+#include "ui/UIElement.hpp"
 
 using namespace Dawn;
 
@@ -36,15 +36,12 @@ void UICanvas::onDispose() {
 std::vector<std::shared_ptr<IRenderPass>> UICanvas::getPasses(
 struct RenderPassContext &ctx
 ) {
-  if(this->components.empty()) return {};
+  if(this->elements.empty()) return {};
 
   glm::mat4 projection;
   glm::mat4 view;
-
-  // data.projection = ctx.camera->getProjection();
-  // data.view = ctx.camera->getItem()->getWorldTransform();
-  // data.model = this->getItem()->getWorldTransform();
-
+  
+  // Setup the projection and views
   data.projection = glm::ortho(
     0.0f, ctx.renderTarget->getWidth(),
     ctx.renderTarget->getHeight(), 0.0f,
@@ -53,24 +50,27 @@ struct RenderPassContext &ctx
   data.view = glm::mat4(1.0f);
   data.model = glm::mat4(1.0f);
 
+  // Reset the passes
   this->passes.clear();
   this->textureBindings.clear();
   this->textures.clear();
   quadCount = 0;
   nextBinding = 0;
 
-  // Define the root alignment
+  // Alignment root
+  const glm::vec2 rootPosition = { 0, 0 };
+  const glm::vec2 rootSize = {
+    ctx.renderTarget->getWidth(),
+    ctx.renderTarget->getHeight()
+  };
+  const float_t rootScale = 1.0f;
 
   // Get the quads for each component
-  auto itComponents = components.begin();
+  auto itComponents = elements.begin();
   auto self = std::ref(*this);
-  while(itComponents != components.end()) {
+  while(itComponents != elements.end()) {
     auto component = *itComponents;
-    component->updateAlignment(
-      glm::vec2(0, 0),
-      glm::vec2(ctx.renderTarget->getWidth(), ctx.renderTarget->getHeight()),
-      1.0f
-    );
+    component->updateAlignment(rootPosition, rootSize, rootScale);
     component->getQuads(self);
     ++itComponents;
   }
@@ -139,6 +139,6 @@ void UICanvas::flushPass() {
   textureBindings.clear();
 }
 
-void UICanvas::addComponent(std::shared_ptr<UIComponent> component) {
-  components.push_back(component);
+void UICanvas::addElement(std::shared_ptr<UIElement> element) {
+  elements.push_back(element);
 }

src/dawn/component/ui/UICanvas.hpp

@@ -9,7 +9,7 @@
 #include "display/shader/UIShader.hpp"
 
 namespace Dawn {
-  class UIComponent;
+  class UIElement;
 
   class UICanvas :
     public SceneComponent,
@@ -18,7 +18,7 @@ namespace Dawn {
     private:
       std::shared_ptr<Mesh> mesh;
       UIShaderData data;
-      std::vector<std::shared_ptr<UIComponent>> components;
+      std::vector<std::shared_ptr<UIElement>> elements;
 
       size_t quadCount = 0;
       shadertexturebinding_t nextBinding = 0;
@@ -68,6 +68,6 @@ namespace Dawn {
        * 
        * @param component The component to add.
        */
-      void addComponent(std::shared_ptr<UIComponent> component);
+      void addElement(std::shared_ptr<UIElement> component);
   };
 }

src/dawn/ui/CMakeLists.txt

@@ -5,7 +5,12 @@
 
 target_sources(${DAWN_TARGET_NAME}
   PRIVATE
-    UIComponent.cpp
+    UIAlignableElement.cpp
+    UIElement.cpp
     UIRectangle.cpp
     UILabel.cpp
-)
+    UIMenu.cpp
+)
+
+# Subdirs
+add_subdirectory(container)

src/dawn/ui/UIAlignableElement.cpp

@@ -3,12 +3,11 @@
 // This software is released under the MIT License.
 // https://opensource.org/licenses/MIT
 
-#include "UIComponent.hpp"
-#include "assert/assert.hpp"
+#include "UIAlignableElement.hpp"
 
 using namespace Dawn;
 
-UIComponent::UIComponent() {
+UIAlignableElement::UIAlignableElement() {
   alignUnit[0] = UIAlignmentUnit::SCALE;
   alignUnit[1] = UIAlignmentUnit::SCALE;
   alignUnit[2] = UIAlignmentUnit::SCALE;
@@ -18,7 +17,7 @@ UIComponent::UIComponent() {
   };
 }
 
-void UIComponent::updateAlignment(
+void UIAlignableElement::updateSelfAlignment(
   const glm::vec2 pPos,
   const glm::vec2 pSize,
   const float_t canvasScale
@@ -180,18 +179,20 @@ void UIComponent::updateAlignment(
     );
   }
 
+  this->position += pPos;
   this->eventAlignmentUpdated(position, size);
 }
 
-std::vector<std::shared_ptr<UIComponent>> UIComponent::getChildren() {
-  return {};
-}
-
-void UIComponent::getQuads(UICanvas &ctx) {
-  this->getSelfQuads(ctx);
+void UIAlignableElement::updateAlignment(
+  const glm::vec2 pPos,
+  const glm::vec2 pSize,
+  const float_t canvasScale
+) {
+  this->updateSelfAlignment(pPos, pSize, canvasScale);
 
+  // Now update children alignment
   auto children = getChildren();
   for(auto &c : children) {
-    c->getQuads(ctx);
+    c->updateAlignment(this->position, this->size, canvasScale);
   }
 }

src/dawn/ui/UIAlignableElement.hpp

@@ -0,0 +1,64 @@
+// Copyright (c) 2023 Dominic Masters
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+#pragma once
+#include "ui/UIElement.hpp"
+
+namespace Dawn {
+  enum class UIAlignmentType {
+    START,
+    MIDDLE,
+    END,
+    STRETCH
+  };
+
+  enum class UIAlignmentUnit {
+    PIXEL,
+    SCALE,
+    PERCENT,
+    RATIO
+  };
+
+  class UIAlignableElement : public UIElement {
+    protected:
+      glm::vec2 position;
+      glm::vec2 size;
+      
+      /**
+       * Updates the alignment of this element ONLY.
+       * 
+       * @param parentPosition The position of the parent.
+       * @param parentSize The size of the parent.
+       * @param canvasScale The scale of the canvas.
+       */
+      virtual void updateSelfAlignment(
+        const glm::vec2 parentPosition,
+        const glm::vec2 parentSize,
+        const float_t canvasScale
+      );
+
+    public:
+      // Primary alignment controls
+      glm::vec4 align = glm::vec4(0, 0, 0, 0);
+      enum UIAlignmentType alignX = UIAlignmentType::STRETCH;
+      enum UIAlignmentType alignY = UIAlignmentType::STRETCH;
+      enum UIAlignmentUnit alignUnit[4];
+      
+      std::function<
+        void(const glm::vec2, const glm::vec2)
+      > eventAlignmentUpdated;
+
+      /**
+       * Constructor for the UIAlignableElement.
+       */
+      UIAlignableElement();
+
+      void updateAlignment(
+        const glm::vec2 parentPosition,
+        const glm::vec2 parentSize,
+        const float_t canvasScale
+      ) override;
+  };
+}

src/dawn/ui/UIElement.cpp

@@ -0,0 +1,37 @@
+// Copyright (c) 2023 Dominic Masters
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+#include "UIElement.hpp"
+#include "assert/assert.hpp"
+
+using namespace Dawn;
+
+std::vector<std::shared_ptr<UIElement>> UIElement::getChildren() {
+  return {};
+}
+
+void UIElement::getSelfQuads(UICanvas &ctx) {
+  //Do nothing
+}
+
+void UIElement::getQuads(UICanvas &ctx) {
+  this->getSelfQuads(ctx);
+
+  auto children = getChildren();
+  for(auto &c : children) {
+    c->getQuads(ctx);
+  }
+}
+
+void UIElement::updateAlignment(
+  const glm::vec2 parentPosition,
+  const glm::vec2 parentSize,
+  const float_t canvasScale
+) {
+  auto children = getChildren();
+  for(auto &c : children) {
+    c->updateAlignment(parentPosition, parentSize, canvasScale);
+  }
+}

src/dawn/ui/UIElement.hpp

@@ -8,66 +8,23 @@
 #include "component/ui/UICanvas.hpp"
 
 namespace Dawn {
-  enum class UIAlignmentType {
-    START,
-    MIDDLE,
-    END,
-    STRETCH
-  };
-
-  enum class UIAlignmentUnit {
-    PIXEL,
-    SCALE,
-    PERCENT,
-    RATIO
-  };
-
-  class UIComponent {
+  class UIElement {
     protected:
-      glm::vec2 position;
-      glm::vec2 size;
-
       /**
-       * Virtual method overridden by the UIComponent to get the quads for the
+       * Virtual method overridden by the UIElement to get the quads for the
        * component.
        * 
        * @param alignment The alignment of this component.
        * @param ctx The canvas to add the quads to.
        */
-      virtual void getSelfQuads(UICanvas &ctx) = 0;
-
-      /**
-       * Updates the alignment of this component based on the parent.
-       * 
-       * @param parentPosition The position of the parent.
-       * @param parentSize The size of the parent.
-       */
-      void updateAlignment(
-        const glm::vec2 parentPosition,
-        const glm::vec2 parentSize,
-        const float_t canvasScale
-      );
+      virtual void getSelfQuads(UICanvas &ctx);
 
     public:
-      glm::vec4 align = glm::vec4(0, 0, 32, 32);
-      enum UIAlignmentType alignX = UIAlignmentType::START;
-      enum UIAlignmentType alignY = UIAlignmentType::START;
-      enum UIAlignmentUnit alignUnit[4];
-
-      std::function<
-        void(const glm::vec2, const glm::vec2)
-      > eventAlignmentUpdated;
-
       /**
-       * Instantiates a new UIComponent.
-       */
-      UIComponent();
-
-      /**
-       * Virtual method overridden by the UIComponent to get the children of
+       * Virtual method overridden by the UIElement to get the children of
        * this component.
        */
-      virtual std::vector<std::shared_ptr<UIComponent>> getChildren();
+      virtual std::vector<std::shared_ptr<UIElement>> getChildren();
 
       /**
        * Method called by the UICanvas to get the quads for this component.
@@ -76,6 +33,18 @@ namespace Dawn {
        */
       void getQuads(UICanvas &ctx);
 
-      friend class UICanvas;
+      /**
+       * Updates the alignment of this component based on the parent. Typically
+       * left to the UIAlignableElement to implement, default implementation
+       * does nothing but invoke children.
+       * 
+       * @param parentPosition The position of the parent.
+       * @param parentSize The size of the parent.
+       */
+      virtual void updateAlignment(
+        const glm::vec2 parentPosition,
+        const glm::vec2 parentSize,
+        const float_t canvasScale
+      );
   };
 }

src/dawn/ui/UILabel.cpp

@@ -75,7 +75,7 @@ void UILabel::getSelfQuads(UICanvas &ctx) {
         info.quad.z,
         info.quad.w
       },
-      COLOR_WHITE,
+      this->color,
       UIShaderQuadStyle::FONT,
       texture->texture
     );

src/dawn/ui/UILabel.hpp

@@ -4,11 +4,11 @@
 // https://opensource.org/licenses/MIT
 
 #pragma once
-#include "ui/UIComponent.hpp"
+#include "ui/UIAlignableElement.hpp"
 #include "display/font/TrueTypeTexture.hpp"
 
 namespace Dawn {
-  class UILabel final : public UIComponent {
+  class UILabel final : public UIAlignableElement {
     private:
       std::shared_ptr<TrueTypeTexture> texture = nullptr;
       std::wstring text = L"Hello World";
@@ -18,6 +18,7 @@ namespace Dawn {
 
     public:
       bool_t wordWrap = true;
+      struct Color color = COLOR_WHITE;
 
       /**
        * Returns the font used for this label.

src/dawn/ui/UIMenu.cpp

@@ -0,0 +1,54 @@
+// Copyright (c) 2023 Dominic Masters
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+#include "UIMenu.hpp"
+
+using namespace Dawn;
+
+std::vector<std::shared_ptr<UIElement>> UIMenu::getChildren() {
+  return children;
+}
+
+void UIMenu::setPosition(int32_t x, int32_t y) {
+  assertTrue(x >= 0, "X position must be greater than or equal to 0.");
+  assertTrue(y >= 0, "Y position must be greater than or equal to 0.");
+  assertTrue(x < columns, "X must be less than the number of columns.");
+  assertTrue(y < rows, "Y must be less than the number of rows.");
+
+  if(this->x == x && this->y == y) return;
+
+  this->x = x;
+  this->y = y;
+
+  eventPositionChanged.emit(x, y);
+}
+
+void UIMenu::setSize(int32_t columns, int32_t rows) {
+  assertTrue(columns > 0, "Columns must be greater than 0.");
+  assertTrue(rows > 0, "Rows must be greater than 0.");
+  assertTrue(columns > x, "Columns must be greater than current x position.");
+  assertTrue(rows > y, "Rows must be greater than current y position.");
+
+  if(this->columns == columns && this->rows == rows) return;
+
+  this->columns = columns;
+  this->rows = rows;
+}
+
+int32_t UIMenu::getX() {
+  return x;
+}
+
+int32_t UIMenu::getY() {
+  return y;
+}
+
+int32_t UIMenu::getColumns() {
+  return columns;
+}
+
+int32_t UIMenu::getRows() {
+  return rows;
+}

src/dawn/ui/UIMenu.hpp

@@ -0,0 +1,67 @@
+// Copyright (c) 2023 Dominic Masters
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+#pragma once
+#include "ui/UIElement.hpp"
+
+namespace Dawn {
+  class UIMenu final : public UIElement {
+    private:
+      int32_t x = 0;
+      int32_t y = 0;
+      int32_t columns = 1;
+      int32_t rows = 1;
+
+    public:
+      Event<int32_t, int32_t> eventPositionChanged;
+      std::vector<std::shared_ptr<UIElement>> children;
+
+      std::vector<std::shared_ptr<UIElement>> getChildren() override;
+
+      /**
+       * Sets the position of this menu.
+       * 
+       * @param x The x position of this menu.
+       * @param y The y position of this menu.
+       */
+      void setPosition(int32_t x, int32_t y);
+
+      /**
+       * Sets the size of this menu.
+       * 
+       * @param columns The number of columns in this menu.
+       * @param rows The number of rows in this menu.
+       */
+      void setSize(int32_t columns, int32_t rows);
+
+      /**
+       * Gets the x position of this menu.
+       * 
+       * @return The x position of this menu.
+       */
+      int32_t getX();
+
+      /**
+       * Gets the y position of this menu.
+       * 
+       * @return The y position of this menu.
+       */
+      int32_t getY();
+
+      /**
+       * Gets the number of columns in this menu.
+       * 
+       * @return The number of columns in this menu.
+       */
+      int32_t getColumns();
+
+      /**
+       * Gets the number of rows in this menu.
+       * 
+       * @return The number of rows in this menu.
+       */
+      int32_t getRows();
+  };
+}

src/dawn/ui/UIRectangle.hpp

@@ -4,10 +4,10 @@
 // https://opensource.org/licenses/MIT
 
 #pragma once
-#include "ui/UIComponent.hpp"
+#include "ui/UIAlignableElement.hpp"
 
 namespace Dawn {
-  class UIRectangle final : public UIComponent {
+  class UIRectangle final : public UIAlignableElement {
     protected:
       void getSelfQuads(UICanvas &ctx) override;
 

src/dawn/ui/container/CMakeLists.txt

@@ -0,0 +1,10 @@
+# Copyright (c) 2023 Dominic Masters
+# 
+# This software is released under the MIT License.
+# https://opensource.org/licenses/MIT
+
+target_sources(${DAWN_TARGET_NAME}
+  PRIVATE
+    UIGroupContainer.cpp
+    UIRowContainer.cpp
+)

src/dawn/ui/container/UIContainer.hpp

@@ -4,10 +4,11 @@
 // https://opensource.org/licenses/MIT
 
 #pragma once
-#include "dawnlibs.hpp"
+#include "ui/UIAlignableElement.hpp"
 
 namespace Dawn {
-  struct UIAlign {
-    glm::vec2 position;
+  class UIContainer : public UIAlignableElement {
+    public:
+      
   };
 }

src/dawn/ui/container/UIGroupContainer.cpp

@@ -0,0 +1,28 @@
+// Copyright (c) 2023 Dominic Masters
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+#include "UIGroupContainer.hpp"
+
+using namespace Dawn;
+
+std::vector<std::shared_ptr<UIElement>> UIGroupContainer::getChildren() {
+  return this->children;
+}
+
+void UIGroupContainer::appendChild(std::shared_ptr<UIElement> child) {
+  assertNotNull(child, "Cannot append a null child!");
+  this->children.push_back(child);
+}
+
+void UIGroupContainer::removeChild(std::shared_ptr<UIElement> child) {
+  assertNotNull(child, "Cannot remove a null child!");
+  auto it = std::find(this->children.begin(), this->children.end(), child);
+  if(it == this->children.end()) return;
+  this->children.erase(it);
+}
+
+void UIGroupContainer::clearChildren() {
+  this->children.clear();
+}

src/dawn/ui/container/UIGroupContainer.hpp

@@ -0,0 +1,36 @@
+// Copyright (c) 2023 Dominic Masters
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+#pragma once
+#include "ui/container/UIContainer.hpp"
+
+namespace Dawn {
+  class UIGroupContainer : public UIContainer {
+    private:
+      std::vector<std::shared_ptr<UIElement>> children;
+
+    public:
+      std::vector<std::shared_ptr<UIElement>> getChildren() override;
+
+      /**
+       * Appends a child to this container.
+       * 
+       * @param child Child to append.
+       */
+      void appendChild(std::shared_ptr<UIElement> child);
+
+      /**
+       * Removes a child from this container.
+       * 
+       * @param child Child to remove.
+       */
+      void removeChild(std::shared_ptr<UIElement> child);
+
+      /**
+       * Removes all children from this container.
+       */
+      void clearChildren();
+  };
+}

src/dawn/ui/container/UIRowContainer.cpp

@@ -0,0 +1,56 @@
+// Copyright (c) 2023 Dominic Masters
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+#include "assert/assert.hpp"
+#include "UIRowContainer.hpp"
+
+using namespace Dawn;
+
+std::vector<std::shared_ptr<UIElement>> UIRowContainer::getChildren() {
+  return this->children;
+}
+
+void UIRowContainer::appendChild(std::shared_ptr<UIElement> child) {
+  assertNotNull(child, "Cannot append a null child!");
+  this->children.push_back(child);
+}
+
+void UIRowContainer::removeChild(std::shared_ptr<UIElement> child) {
+  assertNotNull(child, "Cannot remove a null child!");
+  auto it = std::find(this->children.begin(), this->children.end(), child);
+  if(it == this->children.end()) return;
+  this->children.erase(it);
+}
+
+void UIRowContainer::clearChildren() {
+  this->children.clear();
+}
+
+void UIRowContainer::updateAlignment(
+  const glm::vec2 parentPosition,
+  const glm::vec2 parentSize,
+  const float_t canvasScale
+) {
+  this->updateSelfAlignment(parentPosition, parentSize, canvasScale);
+
+  // Now we have our dimensions, divide evenly
+  auto children = this->getChildren();
+
+  float_t y = 0.0f;
+  float_t yPiece = this->size.y / (float_t)children.size();
+  
+  // Update all children
+  for(auto &child : this->children) {
+    child->updateAlignment(
+      this->position + glm::vec2(0, y),
+      glm::vec2(
+        this->size.x,
+        yPiece
+      ),
+      canvasScale
+    );
+    y += yPiece;
+  }
+}

src/dawn/ui/container/UIRowContainer.hpp

@@ -0,0 +1,42 @@
+// Copyright (c) 2023 Dominic Masters
+// 
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+#pragma once
+#include "ui/container/UIContainer.hpp"
+
+namespace Dawn {
+  class UIRowContainer final : public UIContainer {
+    private:
+      std::vector<std::shared_ptr<UIElement>> children;
+
+    public:
+      std::vector<std::shared_ptr<UIElement>> getChildren() override;
+
+      /**
+       * Appends a child to this container.
+       * 
+       * @param child Child to append.
+       */
+      void appendChild(std::shared_ptr<UIElement> child);
+
+      /**
+       * Removes a child from this container.
+       * 
+       * @param child Child to remove.
+       */
+      void removeChild(std::shared_ptr<UIElement> child);
+
+      /**
+       * Removes all children from this container.
+       */
+      void clearChildren();
+
+      void updateAlignment(
+        const glm::vec2 parentPosition,
+        const glm::vec2 parentSize,
+        const float_t canvasScale
+      ) override;
+  };
+}