Added percentage support to UIElements

This commit is contained in:
2023-05-09 23:51:12 -07:00
parent e6b93fe5db
commit 9f5c39b8d0
8 changed files with 127 additions and 88 deletions

View File

@ -1,16 +1,21 @@
<prefab name="VNTextbox" type="">
<asset type="truetype" name="font_main" />
<UIGrid columns="2" />
<UIBorder
ref="border"
borderSize="8, 8"
alignment="50, 0, 0, 0"
alignUnitLeft="UI_COMPONENT_ALIGN_UNIT_PERCENT"
ref="border"
alignX="UI_COMPONENT_ALIGN_STRETCH"
alignY="UI_COMPONENT_ALIGN_STRETCH"
/>
<child>
<UIBorder ref="border" borderSize="16, 16" alignment="32, 32, 320, 320" ref="border" />
<child>
<UILabel text="bruh" font="font_main" fontSize="32"
alignment="16, 16, -1, -1"
alignX="UI_COMPONENT_ALIGN_STRETCH"
alignY="UI_COMPONENT_ALIGN_STRETCH"
/>
</child>
<UILabel text="bruh" font="font_main" fontSize="32"
alignment="16, 16, -1, -1"
alignX="UI_COMPONENT_ALIGN_STRETCH"
alignY="UI_COMPONENT_ALIGN_STRETCH"
/>
</child>
</prefab>

View File

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

View File

@ -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 );

View File

@ -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;
auto dimensionalAsGrid = dynamic_cast<UIGrid*>(dimensional);
if(dimensionalAsGrid != nullptr) {
std::cout << "TEST" << std::endl;
} else {
parentWidth = dimensional->getWidth();
parentHeight = dimensional->getHeight();
parentX = 0;
parentY = 0;
}
float_t parentWidth, parentHeight;
parentWidth = dimensional->getWidth();
parentHeight = dimensional->getHeight();
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:
*position = alignment[0];
*size = outerSize + (alignment[0] + alignment[1]);
case UI_COMPONENT_ALIGN_STRETCH: {
// For stretch:
// 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:
*position = alignment[0];
*size = alignment[1];
case UI_COMPONENT_ALIGN_START: {
// For start:
// 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:
*size = mathMax<float_t>(innerSize, alignment[1]);
*position = (outerSize / 2.0f) - (innerSize / 2.0f) + alignment[0];
case UI_COMPONENT_ALIGN_MIDDLE: {
*size = mathMax<float_t>(
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:
*size = alignment[0];
*position = outerSize - innerSize - alignment[1];
case UI_COMPONENT_ALIGN_END: {
*size = UIComponent::calculateAlignmentValue(
alignment[0],
outerSize,
unitStart
);
*position = outerSize - *size - UIComponent::calculateAlignmentValue(
alignment[1],
outerSize,
unitEnd
);
break;
}
default:
assertUnreachable();

View File

@ -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);

View File

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

View File

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

View File

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