Add properties for flexbox layout

Include/RmlUi/Core/ComputedValues.h

@@ -32,9 +32,7 @@
 #include "Animation.h"
 
 namespace Rml {
-
-namespace Style
-{
+namespace Style {
 
 struct LengthPercentageAuto {
 	enum Type { Auto, Length, Percentage } type = Length;
@@ -60,7 +58,7 @@ struct NumberAuto {
 using Margin = LengthPercentageAuto;
 using Padding = LengthPercentage;
 
-enum class Display : uint8_t { None, Block, Inline, InlineBlock, Table, TableRow, TableRowGroup, TableColumn, TableColumnGroup, TableCell };
+enum class Display : uint8_t { None, Block, Inline, InlineBlock, Flex, Table, TableRow, TableRowGroup, TableColumn, TableColumnGroup, TableCell };
 enum class Position : uint8_t { Static, Relative, Absolute, Fixed };
 
 using Top = LengthPercentageAuto;
@@ -135,6 +133,14 @@ using TransformOrigin = LengthPercentage;
 enum class OriginX : uint8_t { Left, Center, Right };
 enum class OriginY : uint8_t { Top, Center, Bottom };
 
+enum class AlignContent : uint8_t { FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround, Stretch };
+enum class AlignItems : uint8_t { FlexStart, FlexEnd, Center, Baseline, Stretch };
+enum class AlignSelf : uint8_t { Auto, FlexStart, FlexEnd, Center, Baseline, Stretch };
+using FlexBasis = LengthPercentageAuto;
+enum class FlexDirection : uint8_t { Row, RowReverse, Column, ColumnReverse };
+enum class FlexWrap : uint8_t { Nowrap, Wrap, WrapReverse };
+enum class JustifyContent : uint8_t { FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround };
+
 
 /* 
 	A computed value is a value resolved as far as possible :before: introducing layouting. See CSS specs for details of each property.
@@ -223,8 +229,19 @@ struct ComputedValues
 
 	bool has_decorator = false;
 	bool has_font_effect = false;
+
+	AlignContent align_content = AlignContent::Stretch;
+	AlignItems align_items = AlignItems::Stretch;
+	AlignSelf align_self = AlignSelf::Auto;
+	FlexDirection flex_direction = FlexDirection::Row;
+	FlexWrap flex_wrap = FlexWrap::Nowrap;
+	JustifyContent justify_content = JustifyContent::FlexStart;
+	FlexBasis flex_basis = { FlexBasis::Auto };
+	float flex_grow = 0.f;
+	float flex_shrink = 1.f;
 };
-}
+
+} // namespace Style
 
 
 // Resolves a computed LengthPercentage value to the base unit 'px'. 

Include/RmlUi/Core/ID.h

@@ -59,6 +59,8 @@ enum class ShorthandId : uint8_t
 	Gap,
 	PerspectiveOrigin,
 	TransformOrigin,
+	Flex,
+	FlexFlow,
 
 	NumDefinedIds,
 	FirstCustomId = NumDefinedIds,
@@ -159,6 +161,16 @@ enum class PropertyId : uint8_t
 
 	FillImage,
 
+	AlignContent,
+	AlignItems,
+	AlignSelf,
+	FlexBasis,
+	FlexDirection,
+	FlexGrow,
+	FlexShrink,
+	FlexWrap,
+	JustifyContent,
+
 	NumDefinedIds,
 	FirstCustomId = NumDefinedIds,
 

Source/Core/ElementStyle.cpp

@@ -905,6 +905,34 @@ PropertyIdSet ElementStyle::ComputeValues(Style::ComputedValues& values, const S
 			values.has_font_effect = (p->unit == Property::FONTEFFECT);
 			break;
 
+		case PropertyId::AlignContent:
+			values.align_content = (AlignContent)p->Get<int>();
+			break;
+		case PropertyId::AlignItems:
+			values.align_items = (AlignItems)p->Get<int>();
+			break;
+		case PropertyId::AlignSelf:
+			values.align_self = (AlignSelf)p->Get<int>();
+			break;
+		case PropertyId::FlexBasis:
+			values.flex_basis = ComputeLengthPercentageAuto(p, font_size, document_font_size, dp_ratio, vp_dimensions);
+			break;
+		case PropertyId::FlexDirection:
+			values.flex_direction = (FlexDirection)p->Get<int>();
+			break;
+		case PropertyId::FlexGrow:
+			values.flex_grow = p->Get<float>();
+			break;
+		case PropertyId::FlexShrink:
+			values.flex_shrink = p->Get<float>();
+			break;
+		case PropertyId::FlexWrap:
+			values.flex_wrap = (FlexWrap)p->Get<int>();
+			break;
+		case PropertyId::JustifyContent:
+			values.justify_content = (JustifyContent)p->Get<int>();
+			break;
+
 		// Unhandled properties. Must be manually retrieved with 'GetProperty()'.
 		case PropertyId::FillImage:
 		case PropertyId::CaretColor:

Source/Core/LayoutEngine.cpp

@@ -171,6 +171,7 @@ bool LayoutEngine::FormatElement(LayoutBlockBox* block_context_box, Element* ele
 		case Style::Display::Block:       return FormatElementBlock(block_context_box, element);
 		case Style::Display::Inline:      return FormatElementInline(block_context_box, element);
 		case Style::Display::InlineBlock: return FormatElementInlineBlock(block_context_box, element);
+		case Style::Display::Flex:        return FormatElementFlex(block_context_box, element);
 		case Style::Display::Table:       return FormatElementTable(block_context_box, element);
 
 		case Style::Display::TableRow:
@@ -310,6 +311,13 @@ bool LayoutEngine::FormatElementInlineBlock(LayoutBlockBox* block_context_box, E
 	return true;
 }
 
+bool LayoutEngine::FormatElementFlex(LayoutBlockBox* /*block_context_box*/, Element* /*element*/)
+{
+	// TODO
+
+	return true;
+}
+
 
 bool LayoutEngine::FormatElementTable(LayoutBlockBox* block_context_box, Element* element_table)
 {

Source/Core/LayoutEngine.h

@@ -71,6 +71,10 @@ private:
 	/// @param[in] block_context_box The open block box to layout the element in.
 	/// @param[in] element The inline-block element.
 	static bool FormatElementInlineBlock(LayoutBlockBox* block_context_box, Element* element);
+	/// Formats and positions a flexbox.
+	/// @param[in] block_context_box The open block box to layout the element in.
+	/// @param[in] element The flex container element.
+	static bool FormatElementFlex(LayoutBlockBox* block_context_box, Element* element);
 	/// Formats and positions a table, including all table-rows and table-cells contained within.
 	/// @param[in] block_context_box The open block box to layout the element in.
 	/// @param[in] element The table element.

Source/Core/StyleSheetSpecification.cpp

@@ -319,7 +319,7 @@ void StyleSheetSpecification::RegisterDefaultProperties()
 	RegisterProperty(PropertyId::BorderBottomLeftRadius, "border-bottom-left-radius", "0px", false, false).AddParser("length");
 	RegisterShorthand(ShorthandId::BorderRadius, "border-radius", "border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius", ShorthandType::Box);
 
-	RegisterProperty(PropertyId::Display, "display", "inline", false, true).AddParser("keyword", "none, block, inline, inline-block, table, table-row, table-row-group, table-column, table-column-group, table-cell");
+	RegisterProperty(PropertyId::Display, "display", "inline", false, true).AddParser("keyword", "none, block, inline, inline-block, flex, table, table-row, table-row-group, table-column, table-column-group, table-cell");
 	RegisterProperty(PropertyId::Position, "position", "static", false, true).AddParser("keyword", "static, relative, absolute, fixed");
 	RegisterProperty(PropertyId::Top, "top", "auto", false, false)
 		.AddParser("keyword", "auto")
@@ -422,6 +422,22 @@ void StyleSheetSpecification::RegisterDefaultProperties()
 	// Rare properties (not added to computed values)
 	RegisterProperty(PropertyId::FillImage, "fill-image", "", false, false).AddParser("string");
 
+	// Flexbox
+	RegisterProperty(PropertyId::AlignContent, "align-content", "stretch", false, true).AddParser("keyword", "flex-start, flex-end, center, space-between, space-around, stretch");
+	RegisterProperty(PropertyId::AlignItems, "align-items", "stretch", false, true).AddParser("keyword", "flex-start, flex-end, center, baseline, stretch");
+	RegisterProperty(PropertyId::AlignSelf, "align-self", "auto", false, true).AddParser("keyword", "auto, flex-start, flex-end, center, baseline, stretch");
+	
+	RegisterProperty(PropertyId::FlexBasis, "flex-basis", "auto", false, true).AddParser("keyword", "auto").AddParser("length_percent");
+	RegisterProperty(PropertyId::FlexDirection, "flex-direction", "row", false, true).AddParser("keyword", "row, row-reverse, column, column-reverse");
+
+	RegisterProperty(PropertyId::FlexGrow, "flex-grow", "0", false, true).AddParser("number");
+	RegisterProperty(PropertyId::FlexShrink, "flex-shrink", "1", false, true).AddParser("number");
+	RegisterProperty(PropertyId::FlexWrap, "flex-wrap", "nowrap", false, true).AddParser("keyword", "nowrap, wrap, wrap-reverse");
+	RegisterProperty(PropertyId::JustifyContent, "justify-content", "flex-start", false, true).AddParser("keyword", "flex-start, flex-end, center, space-between, space-around");
+
+	RegisterShorthand(ShorthandId::Flex, "flex", "flex-grow, flex-shrink, flex-basis", ShorthandType::FallThrough); // Todo: 'none' keyword
+	RegisterShorthand(ShorthandId::FlexFlow, "flex-flow", "flex-direction, flex-wrap", ShorthandType::FallThrough);
+
 	RMLUI_ASSERTMSG(instance->properties.shorthand_map->AssertAllInserted(ShorthandId::NumDefinedIds), "Missing specification for one or more Shorthand IDs.");
 	RMLUI_ASSERTMSG(instance->properties.property_map->AssertAllInserted(PropertyId::NumDefinedIds), "Missing specification for one or more Property IDs.");
 }