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;
+  };
+}

src/dawnhelloworld/scene/HelloWorldScene.cpp

@@ -14,6 +14,9 @@
 #include "component/ui/UICanvas.hpp"
 #include "ui/UIRectangle.hpp"
 #include "ui/UILabel.hpp"
+#include "ui/UIMenu.hpp"
+#include "ui/container/UIRowContainer.hpp"
+#include "ui/container/UIGroupContainer.hpp"
 
 #include <ft2build.h>
 #include FT_FREETYPE_H
@@ -55,18 +58,40 @@ void Dawn::helloWorldScene(Scene &s) {
   auto uiCanvasItem = s.createSceneItem();
   auto uiCanvas = uiCanvasItem->addComponent<UICanvas>();
 
+  auto container = std::make_shared<UIGroupContainer>();
+  container->align = { 32, 32, 300, 250 };
+  container->alignX = UIAlignmentType::START;
+  container->alignY = UIAlignmentType::START;
+  uiCanvas->addElement(container);
+
   auto rect = std::make_shared<UIRectangle>();
   rect->color = COLOR_MAGENTA;
-  rect->align = { 32, 32, 300, 250 };
-  rect->alignX = UIAlignmentType::START;
-  rect->alignY = UIAlignmentType::START;
-  uiCanvas->addComponent(rect);
+  container->appendChild(rect);
 
-  auto label = std::make_shared<UILabel>();
-  label->setText(L"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
-  label->setFont(texture);
-  label->align = { 32, 32, 300, 250 };
-  label->alignX = UIAlignmentType::START;
-  label->alignY = UIAlignmentType::START;
-  uiCanvas->addComponent(label);
+  auto menu = std::make_shared<UIMenu>();
+  menu->setSize(1, 4);
+  container->appendChild(menu);
+
+  auto rowContainer = std::make_shared<UIRowContainer>();
+  menu->children.push_back(rowContainer);
+
+  auto label0 = std::make_shared<UILabel>();
+  label0->setText(L"New Game");
+  label0->setFont(texture);
+  rowContainer->appendChild(label0);
+
+  auto label1 = std::make_shared<UILabel>();
+  label1->setText(L"Load Game");
+  label1->setFont(texture);
+  rowContainer->appendChild(label1);
+
+  auto label2 = std::make_shared<UILabel>();
+  label2->setText(L"Options");
+  label2->setFont(texture);
+  rowContainer->appendChild(label2);
+
+  auto label3 = std::make_shared<UILabel>();
+  label3->setText(L"Exit");
+  label3->setFont(texture);
+  rowContainer->appendChild(label3);
 }