FlexFormattingContext.cpp 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999
  1. /*
  2. * This source file is part of RmlUi, the HTML/CSS Interface Middleware
  3. *
  4. * For the latest information, see http://github.com/mikke89/RmlUi
  5. *
  6. * Copyright (c) 2008-2010 CodePoint Ltd, Shift Technology Ltd
  7. * Copyright (c) 2019-2023 The RmlUi Team, and contributors
  8. *
  9. * Permission is hereby granted, free of charge, to any person obtaining a copy
  10. * of this software and associated documentation files (the "Software"), to deal
  11. * in the Software without restriction, including without limitation the rights
  12. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  13. * copies of the Software, and to permit persons to whom the Software is
  14. * furnished to do so, subject to the following conditions:
  15. *
  16. * The above copyright notice and this permission notice shall be included in
  17. * all copies or substantial portions of the Software.
  18. *
  19. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  20. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  21. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  22. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  23. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  24. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  25. * THE SOFTWARE.
  26. *
  27. */
  28. #include "FlexFormattingContext.h"
  29. #include "../../../Include/RmlUi/Core/ComputedValues.h"
  30. #include "../../../Include/RmlUi/Core/Element.h"
  31. #include "../../../Include/RmlUi/Core/ElementScroll.h"
  32. #include "../../../Include/RmlUi/Core/Profiling.h"
  33. #include "../../../Include/RmlUi/Core/Types.h"
  34. #include "ContainerBox.h"
  35. #include "LayoutDetails.h"
  36. #include <algorithm>
  37. #include <float.h>
  38. #include <numeric>
  39. namespace Rml {
  40. UniquePtr<LayoutBox> FlexFormattingContext::Format(ContainerBox* parent_container, Element* element, const Box* override_initial_box)
  41. {
  42. RMLUI_ZoneScopedC(0xAFAF4F);
  43. auto flex_container_box = MakeUnique<FlexContainer>(element, parent_container);
  44. ElementScroll* element_scroll = element->GetElementScroll();
  45. const ComputedValues& computed = element->GetComputedValues();
  46. const Vector2f containing_block = parent_container->GetContainingBlockSize(element->GetPosition());
  47. RMLUI_ASSERT(containing_block.x >= 0.f);
  48. // Build the initial box as specified by the flex's style, as if it was a normal block element.
  49. Box& box = flex_container_box->GetBox();
  50. if (override_initial_box)
  51. box = *override_initial_box;
  52. else
  53. LayoutDetails::BuildBox(box, containing_block, element, BuildBoxMode::Block);
  54. // Start with any auto-scrollbars off.
  55. flex_container_box->ResetScrollbars(box);
  56. FlexFormattingContext context;
  57. context.flex_container_box = flex_container_box.get();
  58. context.element_flex = element;
  59. LayoutDetails::GetMinMaxWidth(context.flex_min_size.x, context.flex_max_size.x, computed, box, containing_block.x);
  60. LayoutDetails::GetMinMaxHeight(context.flex_min_size.y, context.flex_max_size.y, computed, box, containing_block.y);
  61. const Vector2f box_content_size = box.GetSize();
  62. const bool auto_height = (box_content_size.y < 0.0f);
  63. context.flex_content_offset = box.GetPosition();
  64. for (int layout_iteration = 0; layout_iteration < 3; layout_iteration++)
  65. {
  66. // One or both scrollbars can be enabled between iterations.
  67. const Vector2f scrollbar_size = {
  68. element_scroll->GetScrollbarSize(ElementScroll::VERTICAL),
  69. element_scroll->GetScrollbarSize(ElementScroll::HORIZONTAL),
  70. };
  71. context.flex_available_content_size = Math::Max(box_content_size - scrollbar_size, Vector2f(0.f));
  72. context.flex_content_containing_block = context.flex_available_content_size;
  73. if (auto_height)
  74. {
  75. context.flex_available_content_size.y = -1.f; // Negative means infinite space
  76. context.flex_content_containing_block.y = containing_block.y;
  77. }
  78. // Format the flexbox and all its children.
  79. Vector2f flex_resulting_content_size, content_overflow_size;
  80. float flex_baseline = 0.f;
  81. context.Format(flex_resulting_content_size, content_overflow_size, flex_baseline);
  82. // Output the size of the formatted flexbox. The width is determined as a normal block box so we don't need to change that.
  83. Vector2f formatted_content_size = box_content_size;
  84. if (auto_height)
  85. formatted_content_size.y = flex_resulting_content_size.y + scrollbar_size.y;
  86. Box sized_box = box;
  87. sized_box.SetContent(formatted_content_size);
  88. // Change the flex baseline coordinates to the element baseline, which is defined as the distance from the element's bottom margin edge.
  89. const float element_baseline =
  90. sized_box.GetSizeAcross(BoxDirection::Vertical, BoxArea::Border) + sized_box.GetEdge(BoxArea::Margin, BoxEdge::Bottom) - flex_baseline;
  91. // Close the box, and break out of the loop if it did not produce any new scrollbars, otherwise continue to format the flexbox again.
  92. if (flex_container_box->Close(content_overflow_size, sized_box, element_baseline))
  93. break;
  94. }
  95. return flex_container_box;
  96. }
  97. Vector2f FlexFormattingContext::GetMaxContentSize(Element* element)
  98. {
  99. // A large but finite number is used here, since layouting doesn't always work well with infinities.
  100. const Vector2f infinity(10000.0f, 10000.0f);
  101. RootBox root(infinity);
  102. auto flex_container_box = MakeUnique<FlexContainer>(element, &root);
  103. FlexFormattingContext context;
  104. context.flex_container_box = flex_container_box.get();
  105. context.element_flex = element;
  106. context.flex_available_content_size = Vector2f(-1, -1);
  107. context.flex_content_containing_block = infinity;
  108. context.flex_max_size = Vector2f(FLT_MAX, FLT_MAX);
  109. // Format the flexbox and all its children.
  110. Vector2f flex_resulting_content_size, content_overflow_size;
  111. float flex_baseline = 0.f;
  112. context.Format(flex_resulting_content_size, content_overflow_size, flex_baseline);
  113. return flex_resulting_content_size;
  114. }
  115. struct FlexItem {
  116. // In the following, suffix '_a' means flex start edge while '_b' means flex end edge.
  117. struct Size {
  118. bool auto_margin_a, auto_margin_b;
  119. bool auto_size;
  120. float margin_a, margin_b;
  121. float sum_edges_a; // Start edge: margin (non-auto) + border + padding
  122. float sum_edges; // Inner->outer size
  123. float min_size, max_size; // Inner size
  124. };
  125. Element* element;
  126. Box box;
  127. // Filled during the build step.
  128. Size main;
  129. Size cross;
  130. float flex_shrink_factor;
  131. float flex_grow_factor;
  132. Style::AlignSelf align_self; // 'Auto' is replaced by container's 'align-items' value
  133. float inner_flex_base_size; // Inner size
  134. float flex_base_size; // Outer size
  135. float hypothetical_main_size; // Outer size
  136. // Used for resolving flexible length
  137. enum class Violation : uint8_t { None = 0, Min, Max };
  138. bool frozen;
  139. Violation violation;
  140. float target_main_size; // Outer size
  141. float used_main_size; // Outer size (without auto margins)
  142. float main_auto_margin_size_a, main_auto_margin_size_b;
  143. float main_offset;
  144. // Used for resolving cross size
  145. float hypothetical_cross_size; // Outer size
  146. float used_cross_size; // Outer size
  147. float cross_offset; // Offset within line
  148. float cross_baseline_top; // Only used for baseline cross alignment
  149. };
  150. struct FlexLine {
  151. FlexLine(Vector<FlexItem>&& items) : items(std::move(items)) {}
  152. Vector<FlexItem> items;
  153. float accumulated_hypothetical_main_size = 0;
  154. float cross_size = 0; // Excludes line spacing
  155. float cross_spacing_a = 0, cross_spacing_b = 0;
  156. float cross_offset = 0;
  157. };
  158. struct FlexLineContainer {
  159. Vector<FlexLine> lines;
  160. };
  161. static void GetItemSizing(FlexItem::Size& destination, const ComputedAxisSize& computed_size, const float base_value, const bool direction_reverse)
  162. {
  163. float margin_a, margin_b, padding_border_a, padding_border_b;
  164. LayoutDetails::GetEdgeSizes(margin_a, margin_b, padding_border_a, padding_border_b, computed_size, base_value);
  165. const float padding_border = padding_border_a + padding_border_b;
  166. const float margin = margin_a + margin_b;
  167. destination.auto_margin_a = (computed_size.margin_a.type == Style::Margin::Auto);
  168. destination.auto_margin_b = (computed_size.margin_b.type == Style::Margin::Auto);
  169. destination.auto_size = (computed_size.size.type == Style::LengthPercentageAuto::Auto);
  170. destination.margin_a = margin_a;
  171. destination.margin_b = margin_b;
  172. destination.sum_edges = padding_border + margin;
  173. destination.sum_edges_a = (direction_reverse ? padding_border_b + margin_b : padding_border_a + margin_a);
  174. destination.min_size = ResolveValue(computed_size.min_size, base_value);
  175. destination.max_size = ResolveValue(computed_size.max_size, base_value);
  176. if (computed_size.box_sizing == Style::BoxSizing::BorderBox)
  177. {
  178. destination.min_size = Math::Max(0.0f, destination.min_size - padding_border);
  179. if (destination.max_size < FLT_MAX)
  180. destination.max_size = Math::Max(0.0f, destination.max_size - padding_border);
  181. }
  182. if (direction_reverse)
  183. {
  184. std::swap(destination.auto_margin_a, destination.auto_margin_b);
  185. std::swap(destination.margin_a, destination.margin_b);
  186. }
  187. }
  188. static float GetInnerUsedMainSize(const FlexItem& item)
  189. {
  190. // Due to floating-point precision the outer size may be smaller than `sum_edges`, so clamp the result to zero.
  191. return Math::Max(item.used_main_size - item.main.sum_edges, 0.f);
  192. }
  193. static float GetInnerUsedCrossSize(const FlexItem& item)
  194. {
  195. return Math::Max(item.used_cross_size - item.cross.sum_edges, 0.f);
  196. }
  197. void FlexFormattingContext::Format(Vector2f& flex_resulting_content_size, Vector2f& flex_content_overflow_size, float& flex_baseline) const
  198. {
  199. // The following procedure is based on the CSS flexible box layout algorithm.
  200. // For details, see https://drafts.csswg.org/css-flexbox/#layout-algorithm
  201. const ComputedValues& computed_flex = element_flex->GetComputedValues();
  202. const Style::FlexDirection direction = computed_flex.flex_direction();
  203. const Style::LengthPercentage row_gap = computed_flex.row_gap();
  204. const Style::LengthPercentage column_gap = computed_flex.column_gap();
  205. const bool main_axis_horizontal = (direction == Style::FlexDirection::Row || direction == Style::FlexDirection::RowReverse);
  206. const bool direction_reverse = (direction == Style::FlexDirection::RowReverse || direction == Style::FlexDirection::ColumnReverse);
  207. const bool flex_single_line = (computed_flex.flex_wrap() == Style::FlexWrap::Nowrap);
  208. const bool wrap_reverse = (computed_flex.flex_wrap() == Style::FlexWrap::WrapReverse);
  209. const float main_available_size = (main_axis_horizontal ? flex_available_content_size.x : flex_available_content_size.y);
  210. const float cross_available_size = (!main_axis_horizontal ? flex_available_content_size.x : flex_available_content_size.y);
  211. const float main_min_size = (main_axis_horizontal ? flex_min_size.x : flex_min_size.y);
  212. const float main_max_size = (main_axis_horizontal ? flex_max_size.x : flex_max_size.y);
  213. const float cross_min_size = (main_axis_horizontal ? flex_min_size.y : flex_min_size.x);
  214. const float cross_max_size = (main_axis_horizontal ? flex_max_size.y : flex_max_size.x);
  215. // For the purpose of placing items we make infinite size a big value.
  216. const float main_wrap_size = Math::Clamp(main_available_size < 0.0f ? FLT_MAX : main_available_size, main_min_size, main_max_size);
  217. // For the purpose of resolving lengths, infinite main size becomes zero.
  218. const float main_size_base_value = (main_available_size < 0.0f ? 0.0f : main_available_size);
  219. const float cross_size_base_value = (cross_available_size < 0.0f ? 0.0f : cross_available_size);
  220. const float main_gap_size = ResolveValue(main_axis_horizontal ? column_gap : row_gap, main_size_base_value);
  221. const float cross_gap_size = ResolveValue(main_axis_horizontal ? row_gap : column_gap, cross_size_base_value);
  222. // -- Build a list of all flex items with base size information --
  223. const int num_flex_children = element_flex->GetNumChildren();
  224. Vector<FlexItem> items;
  225. items.reserve(num_flex_children);
  226. for (int i = 0; i < num_flex_children; i++)
  227. {
  228. Element* element = element_flex->GetChild(i);
  229. const ComputedValues& computed = element->GetComputedValues();
  230. if (computed.display() == Style::Display::None)
  231. {
  232. continue;
  233. }
  234. else if (computed.position() == Style::Position::Absolute || computed.position() == Style::Position::Fixed)
  235. {
  236. flex_container_box->AddAbsoluteElement(element, {}, element_flex);
  237. continue;
  238. }
  239. else if (computed.position() == Style::Position::Relative)
  240. {
  241. flex_container_box->AddRelativeElement(element);
  242. }
  243. FlexItem item = {};
  244. item.element = element;
  245. LayoutDetails::BuildBox(item.box, flex_content_containing_block, element, BuildBoxMode::UnalignedBlock);
  246. Style::LengthPercentageAuto item_main_size;
  247. {
  248. const ComputedAxisSize computed_main_size =
  249. main_axis_horizontal ? LayoutDetails::BuildComputedHorizontalSize(computed) : LayoutDetails::BuildComputedVerticalSize(computed);
  250. const ComputedAxisSize computed_cross_size =
  251. !main_axis_horizontal ? LayoutDetails::BuildComputedHorizontalSize(computed) : LayoutDetails::BuildComputedVerticalSize(computed);
  252. GetItemSizing(item.main, computed_main_size, main_size_base_value, direction_reverse);
  253. GetItemSizing(item.cross, computed_cross_size, cross_size_base_value, wrap_reverse);
  254. item_main_size = computed_main_size.size;
  255. }
  256. item.flex_shrink_factor = computed.flex_shrink();
  257. item.flex_grow_factor = computed.flex_grow();
  258. item.align_self = computed.align_self();
  259. static_assert(int(Style::AlignSelf::FlexStart) == int(Style::AlignItems::FlexStart) + 1 &&
  260. int(Style::AlignSelf::Stretch) == int(Style::AlignItems::Stretch) + 1,
  261. "It is assumed below that align items is a shifted version (no auto value) of align self.");
  262. // Use the container's align-items property if align-self is auto.
  263. if (item.align_self == Style::AlignSelf::Auto)
  264. item.align_self = static_cast<Style::AlignSelf>(static_cast<int>(computed_flex.align_items()) + 1);
  265. auto GetMainSize = [&](const Box& box) { return box.GetSize()[main_axis_horizontal ? 0 : 1]; };
  266. const float sum_padding_border = item.main.sum_edges - (item.main.margin_a + item.main.margin_b);
  267. // Find the flex base size (possibly negative when using border box sizing)
  268. if (computed.flex_basis().type != Style::FlexBasis::Auto)
  269. {
  270. item.inner_flex_base_size = ResolveValue(computed.flex_basis(), main_size_base_value);
  271. if (computed.box_sizing() == Style::BoxSizing::BorderBox)
  272. item.inner_flex_base_size -= sum_padding_border;
  273. }
  274. else if (!item.main.auto_size)
  275. {
  276. item.inner_flex_base_size = ResolveValue(item_main_size, main_size_base_value);
  277. if (computed.box_sizing() == Style::BoxSizing::BorderBox)
  278. item.inner_flex_base_size -= sum_padding_border;
  279. }
  280. else if (GetMainSize(item.box) >= 0.f)
  281. {
  282. // The element is auto-sized, and yet its box was given a definite size. This can happen e.g. due to intrinsic sizing or aspect ratios.
  283. item.inner_flex_base_size = GetMainSize(item.box);
  284. }
  285. else if (main_axis_horizontal)
  286. {
  287. item.inner_flex_base_size = LayoutDetails::GetShrinkToFitWidth(element, flex_content_containing_block);
  288. }
  289. else
  290. {
  291. const Vector2f initial_box_size = item.box.GetSize();
  292. RMLUI_ASSERT(initial_box_size.y < 0.f);
  293. Box format_box = item.box;
  294. if (initial_box_size.x < 0.f && flex_available_content_size.x >= 0.f)
  295. format_box.SetContent(Vector2f(flex_available_content_size.x - item.cross.sum_edges, initial_box_size.y));
  296. FormattingContext::FormatIndependent(flex_container_box, element, (format_box.GetSize().x >= 0 ? &format_box : nullptr),
  297. FormattingContextType::Block);
  298. item.inner_flex_base_size = element->GetBox().GetSize().y;
  299. // Apply the automatic block size as minimum size (§4.5). Strictly speaking, we should also apply this to
  300. // the other branches in column mode (and inline min-content size in row mode). However, the formatting step
  301. // can be expensive, here we have already done that step so the value is readily accessible to us.
  302. if (item.main.min_size == 0.f && !LayoutDetails::IsScrollContainer(computed.overflow_x(), computed.overflow_y()))
  303. item.main.min_size = Math::Min(item.inner_flex_base_size, item.main.max_size);
  304. }
  305. // Calculate the hypothetical main size (clamped flex base size).
  306. item.hypothetical_main_size = Math::Clamp(item.inner_flex_base_size, item.main.min_size, item.main.max_size) + item.main.sum_edges;
  307. item.flex_base_size = item.inner_flex_base_size + item.main.sum_edges;
  308. items.push_back(std::move(item));
  309. }
  310. if (items.empty())
  311. {
  312. return;
  313. }
  314. // -- Collect the items into lines --
  315. FlexLineContainer container;
  316. if (flex_single_line)
  317. {
  318. container.lines.emplace_back(std::move(items));
  319. }
  320. else
  321. {
  322. float cursor = 0;
  323. Vector<FlexItem> line_items;
  324. for (FlexItem& item : items)
  325. {
  326. cursor += item.hypothetical_main_size;
  327. if (!line_items.empty() && cursor > main_wrap_size)
  328. {
  329. // Break into new line.
  330. container.lines.emplace_back(std::move(line_items));
  331. cursor = item.hypothetical_main_size;
  332. line_items = {std::move(item)};
  333. }
  334. else
  335. {
  336. // Add item to current line.
  337. line_items.push_back(std::move(item));
  338. }
  339. cursor += main_gap_size;
  340. }
  341. if (!line_items.empty())
  342. container.lines.emplace_back(std::move(line_items));
  343. items.clear();
  344. items.shrink_to_fit();
  345. }
  346. for (FlexLine& line : container.lines)
  347. {
  348. // now that items are in lines, we can add the main gap size to all but the last item
  349. if (main_gap_size > 0.f)
  350. {
  351. for (size_t i = 0; i < line.items.size() - 1; i++)
  352. {
  353. line.items[i].hypothetical_main_size += main_gap_size;
  354. line.items[i].flex_base_size += main_gap_size;
  355. line.items[i].main.margin_b += main_gap_size;
  356. line.items[i].main.sum_edges += main_gap_size;
  357. }
  358. }
  359. line.accumulated_hypothetical_main_size = std::accumulate(line.items.begin(), line.items.end(), 0.0f,
  360. [](float value, const FlexItem& item) { return value + item.hypothetical_main_size; });
  361. }
  362. // If the available main size is infinite, the used main size becomes the accumulated outer size of all items of the widest line.
  363. const float used_main_size_unconstrained = main_available_size >= 0.f
  364. ? main_available_size
  365. : std::max_element(container.lines.begin(), container.lines.end(), [](const FlexLine& a, const FlexLine& b) {
  366. return a.accumulated_hypothetical_main_size < b.accumulated_hypothetical_main_size;
  367. })->accumulated_hypothetical_main_size;
  368. const float used_main_size = Math::Clamp(used_main_size_unconstrained, main_min_size, main_max_size);
  369. // -- Determine main size --
  370. // Resolve flexible lengths to find the used main size of all items.
  371. for (FlexLine& line : container.lines)
  372. {
  373. const float available_flex_space = used_main_size - line.accumulated_hypothetical_main_size; // Possibly negative
  374. const bool flex_mode_grow = (available_flex_space > 0.f);
  375. auto FlexFactor = [flex_mode_grow](const FlexItem& item) { return (flex_mode_grow ? item.flex_grow_factor : item.flex_shrink_factor); };
  376. // Initialize items and freeze inflexible items.
  377. for (FlexItem& item : line.items)
  378. {
  379. item.target_main_size = item.flex_base_size;
  380. if (FlexFactor(item) == 0.f || (flex_mode_grow && item.flex_base_size > item.hypothetical_main_size) ||
  381. (!flex_mode_grow && item.flex_base_size < item.hypothetical_main_size))
  382. {
  383. item.frozen = true;
  384. item.target_main_size = item.hypothetical_main_size;
  385. }
  386. }
  387. auto RemainingFreeSpace = [used_main_size, &line]() {
  388. return used_main_size - std::accumulate(line.items.begin(), line.items.end(), 0.f, [](float value, const FlexItem& item) {
  389. return value + (item.frozen ? item.target_main_size : item.flex_base_size);
  390. });
  391. };
  392. const float initial_free_space = RemainingFreeSpace();
  393. // Now iteratively distribute or shrink the size of all the items, until all the items are frozen.
  394. while (!std::all_of(line.items.begin(), line.items.end(), [](const FlexItem& item) { return item.frozen; }))
  395. {
  396. float remaining_free_space = RemainingFreeSpace();
  397. const float flex_factor_sum = std::accumulate(line.items.begin(), line.items.end(), 0.f,
  398. [&FlexFactor](float value, const FlexItem& item) { return value + (item.frozen ? 0.0f : FlexFactor(item)); });
  399. if (flex_factor_sum < 1.f)
  400. {
  401. const float scaled_initial_free_space = initial_free_space * flex_factor_sum;
  402. if (Math::Absolute(scaled_initial_free_space) < Math::Absolute(remaining_free_space))
  403. remaining_free_space = scaled_initial_free_space;
  404. }
  405. if (remaining_free_space != 0.f)
  406. {
  407. // Distribute free space proportionally to flex factors
  408. if (flex_mode_grow)
  409. {
  410. for (FlexItem& item : line.items)
  411. {
  412. if (!item.frozen)
  413. {
  414. const float distribute_ratio = item.flex_grow_factor / flex_factor_sum;
  415. item.target_main_size = item.flex_base_size + distribute_ratio * remaining_free_space;
  416. }
  417. }
  418. }
  419. else
  420. {
  421. const float scaled_flex_shrink_factor_sum =
  422. std::accumulate(line.items.begin(), line.items.end(), 0.f, [](float value, const FlexItem& item) {
  423. return value + (item.frozen ? 0.0f : item.flex_shrink_factor * item.inner_flex_base_size);
  424. });
  425. const float scaled_flex_shrink_factor_sum_nonzero = (scaled_flex_shrink_factor_sum == 0 ? 1 : scaled_flex_shrink_factor_sum);
  426. for (FlexItem& item : line.items)
  427. {
  428. if (!item.frozen)
  429. {
  430. const float scaled_flex_shrink_factor = item.flex_shrink_factor * item.inner_flex_base_size;
  431. const float distribute_ratio = scaled_flex_shrink_factor / scaled_flex_shrink_factor_sum_nonzero;
  432. item.target_main_size = item.flex_base_size - distribute_ratio * Math::Absolute(remaining_free_space);
  433. }
  434. }
  435. }
  436. }
  437. // Clamp min/max violations
  438. float total_minmax_violation = 0.f;
  439. for (FlexItem& item : line.items)
  440. {
  441. if (!item.frozen)
  442. {
  443. const float inner_target_main_size = Math::Max(0.0f, item.target_main_size - item.main.sum_edges);
  444. const float clamped_target_main_size =
  445. Math::Clamp(inner_target_main_size, item.main.min_size, item.main.max_size) + item.main.sum_edges;
  446. const float violation_diff = clamped_target_main_size - item.target_main_size;
  447. item.violation = (violation_diff > 0.0f ? FlexItem::Violation::Min
  448. : (violation_diff < 0.f ? FlexItem::Violation::Max : FlexItem::Violation::None));
  449. item.target_main_size = clamped_target_main_size;
  450. total_minmax_violation += violation_diff;
  451. }
  452. }
  453. for (FlexItem& item : line.items)
  454. {
  455. if (total_minmax_violation > 0.0f)
  456. item.frozen |= (item.violation == FlexItem::Violation::Min);
  457. else if (total_minmax_violation < 0.0f)
  458. item.frozen |= (item.violation == FlexItem::Violation::Max);
  459. else
  460. item.frozen = true;
  461. }
  462. }
  463. // Now, each item's used main size is found!
  464. for (FlexItem& item : line.items)
  465. item.used_main_size = item.target_main_size;
  466. }
  467. // -- Align main axis (§9.5) --
  468. // Main alignment is done before cross sizing. Previously, doing it in this order was important due to pixel
  469. // rounding, since changing the main offset could change the main size after rounding, which in turn could influence
  470. // the cross size. However, now we no longer do pixel rounding, so we may be free to do cross sizing first if we
  471. // want to do it in that order for some particular reason.
  472. for (FlexLine& line : container.lines)
  473. {
  474. const float remaining_free_space = used_main_size -
  475. std::accumulate(line.items.begin(), line.items.end(), 0.f, [](float value, const FlexItem& item) { return value + item.used_main_size; });
  476. if (remaining_free_space > 0.0f)
  477. {
  478. const int num_auto_margins = std::accumulate(line.items.begin(), line.items.end(), 0,
  479. [](int value, const FlexItem& item) { return value + int(item.main.auto_margin_a) + int(item.main.auto_margin_b); });
  480. if (num_auto_margins > 0)
  481. {
  482. // Distribute the remaining space to the auto margins.
  483. const float space_per_auto_margin = remaining_free_space / float(num_auto_margins);
  484. for (FlexItem& item : line.items)
  485. {
  486. if (item.main.auto_margin_a)
  487. item.main_auto_margin_size_a = space_per_auto_margin;
  488. if (item.main.auto_margin_b)
  489. item.main_auto_margin_size_b = space_per_auto_margin;
  490. }
  491. }
  492. else
  493. {
  494. // Distribute the remaining space based on the 'justify-content' property.
  495. using Style::JustifyContent;
  496. const int num_items = int(line.items.size());
  497. switch (computed_flex.justify_content())
  498. {
  499. case JustifyContent::SpaceBetween:
  500. if (num_items > 1)
  501. {
  502. const float space_per_edge = remaining_free_space / float(2 * num_items - 2);
  503. for (int i = 0; i < num_items; i++)
  504. {
  505. FlexItem& item = line.items[i];
  506. if (i > 0)
  507. item.main_auto_margin_size_a = space_per_edge;
  508. if (i < num_items - 1)
  509. item.main_auto_margin_size_b = space_per_edge;
  510. }
  511. break;
  512. }
  513. //-fallthrough
  514. case JustifyContent::FlexStart: line.items.back().main_auto_margin_size_b = remaining_free_space; break;
  515. case JustifyContent::FlexEnd: line.items.front().main_auto_margin_size_a = remaining_free_space; break;
  516. case JustifyContent::Center:
  517. line.items.front().main_auto_margin_size_a = 0.5f * remaining_free_space;
  518. line.items.back().main_auto_margin_size_b = 0.5f * remaining_free_space;
  519. break;
  520. case JustifyContent::SpaceAround:
  521. {
  522. const float space_per_edge = remaining_free_space / float(2 * num_items);
  523. for (FlexItem& item : line.items)
  524. {
  525. item.main_auto_margin_size_a = space_per_edge;
  526. item.main_auto_margin_size_b = space_per_edge;
  527. }
  528. }
  529. break;
  530. case JustifyContent::SpaceEvenly:
  531. {
  532. const float space_per_edge = remaining_free_space / float(2 * (num_items + 1));
  533. for (int i = 0; i < num_items; i++)
  534. {
  535. FlexItem& item = line.items[i];
  536. item.main_auto_margin_size_a = space_per_edge;
  537. item.main_auto_margin_size_b = space_per_edge;
  538. if (i == 0)
  539. item.main_auto_margin_size_a *= 2.0f;
  540. else if (i == num_items - 1)
  541. item.main_auto_margin_size_b *= 2.0f;
  542. }
  543. }
  544. break;
  545. }
  546. }
  547. }
  548. // Now find the offset for each item.
  549. float cursor = 0.0f;
  550. for (FlexItem& item : line.items)
  551. {
  552. if (direction_reverse)
  553. item.main_offset = used_main_size - (cursor + item.used_main_size + item.main_auto_margin_size_a - item.main.margin_b);
  554. else
  555. item.main_offset = cursor + item.main.margin_a + item.main_auto_margin_size_a;
  556. cursor += item.used_main_size + item.main_auto_margin_size_a + item.main_auto_margin_size_b;
  557. }
  558. }
  559. // Apply cross axis gaps to every item in every line except the last line.
  560. if (cross_gap_size > 0.f)
  561. {
  562. for (size_t i = 0; i < container.lines.size() - 1; i++)
  563. {
  564. FlexLine& line = container.lines[i];
  565. for (FlexItem& item : line.items)
  566. {
  567. item.cross.margin_b += cross_gap_size;
  568. item.cross.sum_edges += cross_gap_size;
  569. }
  570. }
  571. }
  572. auto CanSkipHypotheticalCrossSize = [=](const FlexItem& item) {
  573. // If the following conditions are met, the hypothetical cross size will never be used. This allows us to skip a
  574. // potentially slow step with content-based sizing.
  575. const bool stretch_item = (item.align_self == Style::AlignSelf::Stretch);
  576. const bool stretched = (stretch_item && item.cross.auto_size && !item.cross.auto_margin_a && !item.cross.auto_margin_b);
  577. const bool single_line_definite_cross_size = (cross_available_size >= 0.f && flex_single_line);
  578. return stretched && single_line_definite_cross_size;
  579. };
  580. // -- Determine cross size (§9.4) --
  581. // First, determine the cross size of each item, format it if necessary.
  582. for (FlexLine& line : container.lines)
  583. {
  584. for (FlexItem& item : line.items)
  585. {
  586. if (CanSkipHypotheticalCrossSize(item))
  587. continue;
  588. const Vector2f content_size = item.box.GetSize();
  589. if (main_axis_horizontal)
  590. {
  591. if (content_size.y < 0.0f)
  592. {
  593. item.box.SetContent(Vector2f(GetInnerUsedMainSize(item), content_size.y));
  594. FormattingContext::FormatIndependent(flex_container_box, item.element, &item.box, FormattingContextType::Block);
  595. item.hypothetical_cross_size = item.element->GetBox().GetSize().y + item.cross.sum_edges;
  596. }
  597. else
  598. {
  599. item.hypothetical_cross_size = content_size.y + item.cross.sum_edges;
  600. }
  601. }
  602. else
  603. {
  604. if (content_size.x < 0.0f)
  605. {
  606. item.box.SetContent(Vector2f(content_size.x, GetInnerUsedMainSize(item)));
  607. item.hypothetical_cross_size =
  608. LayoutDetails::GetShrinkToFitWidth(item.element, flex_content_containing_block) + item.cross.sum_edges;
  609. }
  610. else
  611. {
  612. item.hypothetical_cross_size = content_size.x + item.cross.sum_edges;
  613. }
  614. }
  615. }
  616. }
  617. // Determine cross size of each line.
  618. if (cross_available_size >= 0.f && flex_single_line)
  619. {
  620. RMLUI_ASSERT(container.lines.size() == 1);
  621. container.lines[0].cross_size = cross_available_size;
  622. }
  623. else
  624. {
  625. for (FlexLine& line : container.lines)
  626. {
  627. RMLUI_ASSERT(std::none_of(line.items.begin(), line.items.end(), [&](const auto& item) { return CanSkipHypotheticalCrossSize(item); }));
  628. const float largest_hypothetical_cross_size =
  629. std::max_element(line.items.begin(), line.items.end(), [](const FlexItem& a, const FlexItem& b) {
  630. return a.hypothetical_cross_size < b.hypothetical_cross_size;
  631. })->hypothetical_cross_size;
  632. // Currently, we don't handle the case where baseline alignment could extend the line's cross size, see CSS specs 9.4.8.
  633. line.cross_size = Math::Max(0.0f, largest_hypothetical_cross_size);
  634. if (flex_single_line)
  635. line.cross_size = Math::Clamp(line.cross_size, cross_min_size, cross_max_size);
  636. }
  637. }
  638. // Stretch out the lines if we have extra space.
  639. if (cross_available_size >= 0.f && computed_flex.align_content() == Style::AlignContent::Stretch)
  640. {
  641. int remaining_space = static_cast<int>(cross_available_size -
  642. std::accumulate(container.lines.begin(), container.lines.end(), 0.f,
  643. [](float value, const FlexLine& line) { return value + line.cross_size; }));
  644. if (remaining_space > 0)
  645. {
  646. // Here we use integer math to ensure all space is distributed to pixel boundaries.
  647. const int num_lines = (int)container.lines.size();
  648. for (int i = 0; i < num_lines; i++)
  649. {
  650. const int add_space_to_line = remaining_space / (num_lines - i);
  651. remaining_space -= add_space_to_line;
  652. container.lines[i].cross_size += static_cast<float>(add_space_to_line);
  653. }
  654. }
  655. }
  656. // Determine the used cross size of items.
  657. for (FlexLine& line : container.lines)
  658. {
  659. for (FlexItem& item : line.items)
  660. {
  661. const bool stretch_item = (item.align_self == Style::AlignSelf::Stretch);
  662. if (stretch_item && item.cross.auto_size && !item.cross.auto_margin_a && !item.cross.auto_margin_b)
  663. {
  664. item.used_cross_size =
  665. Math::Clamp(line.cross_size - item.cross.sum_edges, item.cross.min_size, item.cross.max_size) + item.cross.sum_edges;
  666. // Here we are supposed to re-format the item with the new size, so that percentages can be resolved, see CSS specs Sec. 9.4.11. Seems
  667. // very slow, we skip this for now.
  668. }
  669. else
  670. {
  671. RMLUI_ASSERT(!CanSkipHypotheticalCrossSize(item));
  672. item.used_cross_size = item.hypothetical_cross_size;
  673. }
  674. }
  675. }
  676. // -- Align cross axis (§9.6) --
  677. for (FlexLine& line : container.lines)
  678. {
  679. constexpr float UndefinedBaseline = -FLT_MAX;
  680. float max_baseline_edge_distance = UndefinedBaseline;
  681. FlexItem* max_baseline_item = nullptr;
  682. for (FlexItem& item : line.items)
  683. {
  684. const float remaining_space = line.cross_size - item.used_cross_size;
  685. item.cross_offset = item.cross.margin_a;
  686. item.cross_baseline_top = UndefinedBaseline;
  687. const int num_auto_margins = int(item.cross.auto_margin_a) + int(item.cross.auto_margin_b);
  688. if (num_auto_margins > 0)
  689. {
  690. const float space_per_auto_margin = Math::Max(remaining_space, 0.0f) / float(num_auto_margins);
  691. item.cross_offset = item.cross.margin_a + (item.cross.auto_margin_a ? space_per_auto_margin : 0.f);
  692. }
  693. else
  694. {
  695. using Style::AlignSelf;
  696. const AlignSelf align_self = item.align_self;
  697. switch (align_self)
  698. {
  699. case AlignSelf::Auto:
  700. // Never encountered here: should already have been replaced by container's align-items property.
  701. RMLUI_ERROR;
  702. break;
  703. case AlignSelf::FlexStart:
  704. // Do nothing, cross offset set above with this behavior.
  705. break;
  706. case AlignSelf::FlexEnd: item.cross_offset = item.cross.margin_a + remaining_space; break;
  707. case AlignSelf::Center: item.cross_offset = item.cross.margin_a + 0.5f * remaining_space; break;
  708. case AlignSelf::Baseline:
  709. {
  710. // We don't currently have a good way to get the true baseline here, so we make a very rough zero-effort approximation.
  711. const float baseline_heuristic = 0.5f * item.element->GetLineHeight();
  712. const float sum_edges_top = (wrap_reverse ? item.cross.sum_edges - item.cross.sum_edges_a : item.cross.sum_edges_a);
  713. item.cross_baseline_top = sum_edges_top + baseline_heuristic;
  714. const float baseline_edge_distance = (wrap_reverse ? item.used_cross_size - item.cross_baseline_top : item.cross_baseline_top);
  715. if (baseline_edge_distance > max_baseline_edge_distance)
  716. {
  717. max_baseline_item = &item;
  718. max_baseline_edge_distance = baseline_edge_distance;
  719. }
  720. }
  721. break;
  722. case AlignSelf::Stretch:
  723. // Handled above
  724. break;
  725. }
  726. }
  727. if (wrap_reverse)
  728. {
  729. const float reverse_offset = line.cross_size - item.used_cross_size + item.cross.margin_a + item.cross.margin_b;
  730. item.cross_offset = reverse_offset - item.cross_offset;
  731. }
  732. }
  733. if (max_baseline_item)
  734. {
  735. // Align all baseline items such that their baselines are aligned with the one with the max. baseline distance.
  736. // Cross offset for all baseline items are currently set as in 'flex-start'.
  737. const float max_baseline_margin_top = (wrap_reverse ? max_baseline_item->cross.margin_b : max_baseline_item->cross.margin_a);
  738. const float line_top_to_baseline_distance =
  739. max_baseline_item->cross_offset - max_baseline_margin_top + max_baseline_item->cross_baseline_top;
  740. for (FlexItem& item : line.items)
  741. {
  742. if (item.cross_baseline_top != UndefinedBaseline)
  743. {
  744. const float margin_top = (wrap_reverse ? item.cross.margin_b : item.cross.margin_a);
  745. item.cross_offset = line_top_to_baseline_distance - item.cross_baseline_top + margin_top;
  746. }
  747. }
  748. }
  749. }
  750. const float accumulated_lines_cross_size = std::accumulate(container.lines.begin(), container.lines.end(), 0.f,
  751. [](float value, const FlexLine& line) { return value + line.cross_size; });
  752. // If the available cross size is infinite, the used cross size becomes the accumulated line cross size.
  753. const float used_cross_size_unconstrained = cross_available_size >= 0.f ? cross_available_size : accumulated_lines_cross_size;
  754. const float used_cross_size = Math::Clamp(used_cross_size_unconstrained, cross_min_size, cross_max_size);
  755. // Align the lines along the cross-axis.
  756. {
  757. const float remaining_free_space = used_cross_size - accumulated_lines_cross_size;
  758. const int num_lines = int(container.lines.size());
  759. if (remaining_free_space > 0.f)
  760. {
  761. using Style::AlignContent;
  762. switch (computed_flex.align_content())
  763. {
  764. case AlignContent::SpaceBetween:
  765. if (num_lines > 1)
  766. {
  767. const float space_per_edge = remaining_free_space / float(2 * num_lines - 2);
  768. for (int i = 0; i < num_lines; i++)
  769. {
  770. FlexLine& line = container.lines[i];
  771. if (i > 0)
  772. line.cross_spacing_a = space_per_edge;
  773. if (i < num_lines - 1)
  774. line.cross_spacing_b = space_per_edge;
  775. }
  776. }
  777. //-fallthrough
  778. case AlignContent::FlexStart: container.lines.back().cross_spacing_b = remaining_free_space; break;
  779. case AlignContent::FlexEnd: container.lines.front().cross_spacing_a = remaining_free_space; break;
  780. case AlignContent::Center:
  781. container.lines.front().cross_spacing_a = 0.5f * remaining_free_space;
  782. container.lines.back().cross_spacing_b = 0.5f * remaining_free_space;
  783. break;
  784. case AlignContent::SpaceAround:
  785. {
  786. const float space_per_edge = remaining_free_space / float(2 * num_lines);
  787. for (FlexLine& line : container.lines)
  788. {
  789. line.cross_spacing_a = space_per_edge;
  790. line.cross_spacing_b = space_per_edge;
  791. }
  792. }
  793. break;
  794. case AlignContent::SpaceEvenly:
  795. {
  796. const float space_per_edge = remaining_free_space / float(2 * (num_lines + 1));
  797. for (int i = 0; i < num_lines; i++)
  798. {
  799. FlexLine& line = container.lines[i];
  800. line.cross_spacing_a = space_per_edge;
  801. line.cross_spacing_b = space_per_edge;
  802. if (i == 0)
  803. line.cross_spacing_a *= 2.0f;
  804. else if (i == num_lines - 1)
  805. line.cross_spacing_b *= 2.0f;
  806. }
  807. }
  808. break;
  809. case AlignContent::Stretch:
  810. // Handled above.
  811. break;
  812. }
  813. }
  814. // Now find the offset and snap the line edges to the pixel grid.
  815. float cursor = 0.f;
  816. for (FlexLine& line : container.lines)
  817. {
  818. if (wrap_reverse)
  819. line.cross_offset = used_cross_size - (cursor + line.cross_spacing_a + line.cross_size);
  820. else
  821. line.cross_offset = cursor + line.cross_spacing_a;
  822. cursor += line.cross_spacing_a + line.cross_size + line.cross_spacing_b;
  823. }
  824. }
  825. auto MainCrossToVec2 = [main_axis_horizontal](const float v_main, const float v_cross) {
  826. return main_axis_horizontal ? Vector2f(v_main, v_cross) : Vector2f(v_cross, v_main);
  827. };
  828. bool baseline_set = false;
  829. // -- Format items --
  830. for (FlexLine& line : container.lines)
  831. {
  832. for (FlexItem& item : line.items)
  833. {
  834. const Vector2f item_size = MainCrossToVec2(GetInnerUsedMainSize(item), GetInnerUsedCrossSize(item));
  835. const Vector2f item_offset = MainCrossToVec2(item.main_offset, line.cross_offset + item.cross_offset);
  836. item.box.SetContent(item_size);
  837. UniquePtr<LayoutBox> item_layout_box =
  838. FormattingContext::FormatIndependent(flex_container_box, item.element, &item.box, FormattingContextType::Block);
  839. // Set the position of the element within the flex container
  840. item.element->SetOffset(flex_content_offset + item_offset, element_flex);
  841. // The flex container baseline is simply set to the first flex item that has a baseline.
  842. if (!baseline_set && item_layout_box->GetBaselineOfLastLine(flex_baseline))
  843. {
  844. flex_baseline += flex_content_offset.y + item_offset.y;
  845. baseline_set = true;
  846. }
  847. // The cell contents may overflow, propagate this to the flex container.
  848. const Vector2f overflow_size = item_offset + item_layout_box->GetVisibleOverflowSize();
  849. flex_content_overflow_size = Math::Max(flex_content_overflow_size, overflow_size);
  850. }
  851. }
  852. flex_resulting_content_size = MainCrossToVec2(used_main_size, used_cross_size);
  853. }
  854. } // namespace Rml