LayoutFlex.cpp 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848
  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 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 "LayoutFlex.h"
  29. #include "../../Include/RmlUi/Core/Element.h"
  30. #include "../../Include/RmlUi/Core/ElementScroll.h"
  31. #include "../../Include/RmlUi/Core/Types.h"
  32. #include "LayoutDetails.h"
  33. #include "LayoutEngine.h"
  34. #include <algorithm>
  35. #include <float.h>
  36. #include <numeric>
  37. namespace Rml {
  38. void LayoutFlex::Format(const Box& box, const Vector2f min_size, const Vector2f max_size, const Vector2f flex_containing_block, Element* element_flex,
  39. Vector2f& out_formatted_content_size, Vector2f& out_content_overflow_size, ElementList& out_absolutely_positioned_elements)
  40. {
  41. ElementScroll* element_scroll = element_flex->GetElementScroll();
  42. const Vector2f scrollbar_size = {element_scroll->GetScrollbarSize(ElementScroll::VERTICAL),
  43. element_scroll->GetScrollbarSize(ElementScroll::HORIZONTAL)};
  44. Vector2f flex_content_offset = box.GetPosition();
  45. const Vector2f box_content_size = box.GetSize();
  46. const bool auto_height = (box_content_size.y < 0.0f);
  47. Vector2f flex_available_content_size = Math::Max(box_content_size - scrollbar_size, Vector2f(0.f));
  48. Vector2f flex_content_containing_block = flex_available_content_size;
  49. if (auto_height)
  50. {
  51. flex_available_content_size.y = -1.f; // Negative means infinite space
  52. flex_content_containing_block.y = flex_containing_block.y;
  53. }
  54. Math::SnapToPixelGrid(flex_content_offset, flex_available_content_size);
  55. // Construct the layout object and format the table.
  56. LayoutFlex layout_flex(element_flex, flex_available_content_size, flex_content_containing_block, flex_content_offset, min_size, max_size,
  57. out_absolutely_positioned_elements);
  58. layout_flex.Format();
  59. // Output the size of the formatted flexbox. The width is determined as a normal block box so we don't need to change that.
  60. out_formatted_content_size = box_content_size;
  61. if (auto_height)
  62. out_formatted_content_size = Vector2f(box_content_size.x, layout_flex.flex_resulting_content_size.y + scrollbar_size.y);
  63. out_content_overflow_size = layout_flex.flex_content_overflow_size;
  64. }
  65. LayoutFlex::LayoutFlex(Element* element_flex, Vector2f flex_available_content_size, Vector2f flex_content_containing_block,
  66. Vector2f flex_content_offset, Vector2f flex_min_size, Vector2f flex_max_size, ElementList& absolutely_positioned_elements) :
  67. element_flex(element_flex),
  68. flex_available_content_size(flex_available_content_size), flex_content_containing_block(flex_content_containing_block),
  69. flex_content_offset(flex_content_offset), flex_min_size(flex_min_size), flex_max_size(flex_max_size),
  70. absolutely_positioned_elements(absolutely_positioned_elements)
  71. {}
  72. struct FlexItem {
  73. // In the following, suffix '_a' means flex start edge while '_b' means flex end edge.
  74. struct Size {
  75. bool auto_margin_a, auto_margin_b;
  76. bool auto_size;
  77. float margin_a, margin_b;
  78. float sum_edges_a; // Start edge: margin (non-auto) + border + padding
  79. float sum_edges; // Inner->outer size
  80. float min_size, max_size; // Inner size
  81. };
  82. Element* element;
  83. Box box;
  84. // Filled during the build step.
  85. Size main;
  86. Size cross;
  87. float flex_shrink_factor;
  88. float flex_grow_factor;
  89. Style::AlignSelf align_self; // 'Auto' is replaced by container's 'align-items' value
  90. float inner_flex_base_size; // Inner size
  91. float flex_base_size; // Outer size
  92. float hypothetical_main_size; // Outer size
  93. // Used for resolving flexible length
  94. enum class Violation : std::uint8_t { None = 0, Min, Max };
  95. bool frozen;
  96. Violation violation;
  97. float target_main_size; // Outer size
  98. float used_main_size; // Outer size (without auto margins)
  99. float main_auto_margin_size_a, main_auto_margin_size_b;
  100. float main_offset;
  101. // Used for resolving cross size
  102. float hypothetical_cross_size; // Outer size
  103. float used_cross_size; // Outer size
  104. float cross_offset; // Offset within line
  105. float cross_baseline_top; // Only used for baseline cross alignment
  106. };
  107. struct FlexLine {
  108. FlexLine(Vector<FlexItem>&& items) : items(std::move(items)) {}
  109. Vector<FlexItem> items;
  110. float accumulated_hypothetical_main_size = 0;
  111. float cross_size = 0; // Excludes line spacing
  112. float cross_spacing_a = 0, cross_spacing_b = 0;
  113. float cross_offset = 0;
  114. };
  115. struct FlexContainer {
  116. Vector<FlexLine> lines;
  117. };
  118. static void GetItemSizing(FlexItem::Size& destination, const ComputedAxisSize& computed_size, const float base_value, const bool direction_reverse)
  119. {
  120. float margin_a, margin_b, padding_border_a, padding_border_b;
  121. LayoutDetails::GetEdgeSizes(margin_a, margin_b, padding_border_a, padding_border_b, computed_size, base_value);
  122. const float padding_border = padding_border_a + padding_border_b;
  123. const float margin = margin_a + margin_b;
  124. destination.auto_margin_a = (computed_size.margin_a.type == Style::Margin::Auto);
  125. destination.auto_margin_b = (computed_size.margin_b.type == Style::Margin::Auto);
  126. destination.auto_size = (computed_size.size.type == Style::LengthPercentageAuto::Auto);
  127. destination.margin_a = margin_a;
  128. destination.margin_b = margin_b;
  129. destination.sum_edges = padding_border + margin;
  130. destination.sum_edges_a = (direction_reverse ? padding_border_b + margin_b : padding_border_a + margin_a);
  131. destination.min_size = ResolveValue(computed_size.min_size, base_value);
  132. destination.max_size = (computed_size.max_size.value < 0.f ? FLT_MAX : ResolveValue(computed_size.max_size, base_value));
  133. if (computed_size.box_sizing == Style::BoxSizing::BorderBox)
  134. {
  135. destination.min_size = Math::Max(0.0f, destination.min_size - padding_border);
  136. if (destination.max_size < FLT_MAX)
  137. destination.max_size = Math::Max(0.0f, destination.max_size - padding_border);
  138. }
  139. if (direction_reverse)
  140. {
  141. std::swap(destination.auto_margin_a, destination.auto_margin_b);
  142. std::swap(destination.margin_a, destination.margin_b);
  143. }
  144. }
  145. void LayoutFlex::Format()
  146. {
  147. // The following procedure is generally based on the CSS flexible box layout algorithm.
  148. // For details, see https://drafts.csswg.org/css-flexbox/#layout-algorithm
  149. const ComputedValues& computed_flex = element_flex->GetComputedValues();
  150. const Style::FlexDirection direction = computed_flex.flex_direction;
  151. const bool main_axis_horizontal = (direction == Style::FlexDirection::Row || direction == Style::FlexDirection::RowReverse);
  152. const bool direction_reverse = (direction == Style::FlexDirection::RowReverse || direction == Style::FlexDirection::ColumnReverse);
  153. const bool flex_single_line = (computed_flex.flex_wrap == Style::FlexWrap::Nowrap);
  154. const bool wrap_reverse = (computed_flex.flex_wrap == Style::FlexWrap::WrapReverse);
  155. const float main_available_size = (main_axis_horizontal ? flex_available_content_size.x : flex_available_content_size.y);
  156. const float cross_available_size = (!main_axis_horizontal ? flex_available_content_size.x : flex_available_content_size.y);
  157. const float main_min_size = (main_axis_horizontal ? flex_min_size.x : flex_min_size.y);
  158. const float main_max_size = (main_axis_horizontal ? flex_max_size.x : flex_max_size.y);
  159. const float cross_min_size = (main_axis_horizontal ? flex_min_size.y : flex_min_size.x);
  160. const float cross_max_size = (main_axis_horizontal ? flex_max_size.y : flex_max_size.x);
  161. // For the purpose of placing items we make infinite size a big value.
  162. const float main_wrap_size = Math::Clamp(main_available_size < 0.0f ? FLT_MAX : main_available_size, main_min_size, main_max_size);
  163. // For the purpose of resolving lengths, infinite main size becomes zero.
  164. const float main_size_base_value = (main_available_size < 0.0f ? 0.0f : main_available_size);
  165. const float cross_size_base_value = (cross_available_size < 0.0f ? 0.0f : cross_available_size);
  166. // -- Build a list of all flex items with base size information --
  167. Vector<FlexItem> items;
  168. const int num_flex_children = element_flex->GetNumChildren();
  169. for (int i = 0; i < num_flex_children; i++)
  170. {
  171. Element* element = element_flex->GetChild(i);
  172. const ComputedValues& computed = element->GetComputedValues();
  173. if (computed.display == Style::Display::None)
  174. {
  175. continue;
  176. }
  177. else if (computed.position == Style::Position::Absolute || computed.position == Style::Position::Fixed)
  178. {
  179. absolutely_positioned_elements.push_back(element);
  180. continue;
  181. }
  182. FlexItem item = {};
  183. item.element = element;
  184. LayoutDetails::BuildBox(item.box, flex_content_containing_block, element, BoxContext::FlexOrTable, 0.0f);
  185. Style::LengthPercentageAuto item_main_size;
  186. {
  187. const ComputedAxisSize computed_main_size =
  188. main_axis_horizontal ? LayoutDetails::BuildComputedHorizontalSize(computed) : LayoutDetails::BuildComputedVerticalSize(computed);
  189. const ComputedAxisSize computed_cross_size =
  190. !main_axis_horizontal ? LayoutDetails::BuildComputedHorizontalSize(computed) : LayoutDetails::BuildComputedVerticalSize(computed);
  191. GetItemSizing(item.main, computed_main_size, main_size_base_value, direction_reverse);
  192. GetItemSizing(item.cross, computed_cross_size, cross_size_base_value, wrap_reverse);
  193. item_main_size = computed_main_size.size;
  194. }
  195. item.flex_shrink_factor = computed.flex_shrink;
  196. item.flex_grow_factor = computed.flex_grow;
  197. item.align_self = computed.align_self;
  198. static_assert(int(Style::AlignSelf::FlexStart) == int(Style::AlignItems::FlexStart) + 1 &&
  199. int(Style::AlignSelf::Stretch) == int(Style::AlignItems::Stretch) + 1,
  200. "It is assumed below that align items is a shifted version (no auto value) of align self.");
  201. // Use the container's align-items property if align-self is auto.
  202. if (item.align_self == Style::AlignSelf::Auto)
  203. item.align_self = static_cast<Style::AlignSelf>(static_cast<int>(computed_flex.align_items) + 1);
  204. const float sum_padding_border = item.main.sum_edges - (item.main.margin_a + item.main.margin_b);
  205. // Find the flex base size (possibly negative when using border box sizing)
  206. if (computed.flex_basis.type != Style::FlexBasis::Auto)
  207. {
  208. item.inner_flex_base_size = ResolveValue(computed.flex_basis, main_size_base_value);
  209. if (computed.box_sizing == Style::BoxSizing::BorderBox)
  210. item.inner_flex_base_size -= sum_padding_border;
  211. }
  212. else if (!item.main.auto_size)
  213. {
  214. item.inner_flex_base_size = ResolveValue(item_main_size, main_size_base_value);
  215. if (computed.box_sizing == Style::BoxSizing::BorderBox)
  216. item.inner_flex_base_size -= sum_padding_border;
  217. }
  218. else if (main_axis_horizontal)
  219. {
  220. item.inner_flex_base_size = LayoutDetails::GetShrinkToFitWidth(element, flex_content_containing_block);
  221. }
  222. else
  223. {
  224. const Vector2f initial_box_size = item.box.GetSize();
  225. RMLUI_ASSERT(initial_box_size.y < 0.f);
  226. Box format_box = item.box;
  227. if (initial_box_size.x < 0.f)
  228. format_box.SetContent(Vector2f(flex_available_content_size.x - item.cross.sum_edges, initial_box_size.y));
  229. LayoutEngine::FormatElement(element, flex_content_containing_block, &format_box);
  230. item.inner_flex_base_size = element->GetBox().GetSize().y;
  231. }
  232. // Calculate the hypothetical main size (clamped flex base size).
  233. item.hypothetical_main_size = Math::Clamp(item.inner_flex_base_size, item.main.min_size, item.main.max_size) + item.main.sum_edges;
  234. item.flex_base_size = item.inner_flex_base_size + item.main.sum_edges;
  235. items.push_back(std::move(item));
  236. }
  237. if (items.empty())
  238. {
  239. return;
  240. }
  241. // -- Collect the items into lines --
  242. FlexContainer container;
  243. if (flex_single_line)
  244. {
  245. container.lines.emplace_back(std::move(items));
  246. }
  247. else
  248. {
  249. float cursor = 0;
  250. Vector<FlexItem> line_items;
  251. for (FlexItem& item : items)
  252. {
  253. cursor += item.hypothetical_main_size;
  254. if (!line_items.empty() && cursor > main_wrap_size)
  255. {
  256. // Break into new line.
  257. container.lines.emplace_back(std::move(line_items));
  258. cursor = item.hypothetical_main_size;
  259. line_items = {std::move(item)};
  260. }
  261. else
  262. {
  263. // Add item to current line.
  264. line_items.push_back(std::move(item));
  265. }
  266. }
  267. if (!line_items.empty())
  268. container.lines.emplace_back(std::move(line_items));
  269. items.clear();
  270. items.shrink_to_fit();
  271. }
  272. for (FlexLine& line : container.lines)
  273. {
  274. line.accumulated_hypothetical_main_size = std::accumulate(line.items.begin(), line.items.end(), 0.0f,
  275. [](float value, const FlexItem& item) { return value + item.hypothetical_main_size; });
  276. }
  277. // If the available main size is infinite, the used main size becomes the accumulated outer size of all items of the widest line.
  278. const float used_main_size_unconstrained = main_available_size >= 0.f
  279. ? main_available_size
  280. : std::max_element(container.lines.begin(), container.lines.end(), [](const FlexLine& a, const FlexLine& b) {
  281. return a.accumulated_hypothetical_main_size < b.accumulated_hypothetical_main_size;
  282. })->accumulated_hypothetical_main_size;
  283. const float used_main_size = Math::Clamp(used_main_size_unconstrained, main_min_size, main_max_size);
  284. // -- Determine main size --
  285. // Resolve flexible lengths to find the used main size of all items.
  286. for (FlexLine& line : container.lines)
  287. {
  288. const float available_flex_space = used_main_size - line.accumulated_hypothetical_main_size; // Possibly negative
  289. const bool flex_mode_grow = (available_flex_space > 0.f);
  290. auto FlexFactor = [flex_mode_grow](const FlexItem& item) { return (flex_mode_grow ? item.flex_grow_factor : item.flex_shrink_factor); };
  291. // Initialize items and freeze inflexible items.
  292. for (FlexItem& item : line.items)
  293. {
  294. item.target_main_size = item.flex_base_size;
  295. if (FlexFactor(item) == 0.f || (flex_mode_grow && item.flex_base_size > item.hypothetical_main_size) ||
  296. (!flex_mode_grow && item.flex_base_size < item.hypothetical_main_size))
  297. {
  298. item.frozen = true;
  299. item.target_main_size = item.hypothetical_main_size;
  300. }
  301. }
  302. auto RemainingFreeSpace = [used_main_size, &line]() {
  303. return used_main_size - std::accumulate(line.items.begin(), line.items.end(), 0.f, [](float value, const FlexItem& item) {
  304. return value + (item.frozen ? item.target_main_size : item.flex_base_size);
  305. });
  306. };
  307. const float initial_free_space = RemainingFreeSpace();
  308. // Now iteratively distribute or shrink the size of all the items, until all the items are frozen.
  309. while (!std::all_of(line.items.begin(), line.items.end(), [](const FlexItem& item) { return item.frozen; }))
  310. {
  311. float remaining_free_space = RemainingFreeSpace();
  312. const float flex_factor_sum = std::accumulate(line.items.begin(), line.items.end(), 0.f,
  313. [&FlexFactor](float value, const FlexItem& item) { return value + (item.frozen ? 0.0f : FlexFactor(item)); });
  314. if (flex_factor_sum < 1.f)
  315. {
  316. const float scaled_initial_free_space = initial_free_space * flex_factor_sum;
  317. if (Math::AbsoluteValue(scaled_initial_free_space) < Math::AbsoluteValue(remaining_free_space))
  318. remaining_free_space = scaled_initial_free_space;
  319. }
  320. if (remaining_free_space != 0.f)
  321. {
  322. // Distribute free space proportionally to flex factors
  323. if (flex_mode_grow)
  324. {
  325. for (FlexItem& item : line.items)
  326. {
  327. if (!item.frozen)
  328. {
  329. const float distribute_ratio = item.flex_grow_factor / flex_factor_sum;
  330. item.target_main_size = item.flex_base_size + distribute_ratio * remaining_free_space;
  331. }
  332. }
  333. }
  334. else
  335. {
  336. const float scaled_flex_shrink_factor_sum =
  337. std::accumulate(line.items.begin(), line.items.end(), 0.f, [](float value, const FlexItem& item) {
  338. return value + (item.frozen ? 0.0f : item.flex_shrink_factor * item.inner_flex_base_size);
  339. });
  340. const float scaled_flex_shrink_factor_sum_nonzero = (scaled_flex_shrink_factor_sum == 0 ? 1 : scaled_flex_shrink_factor_sum);
  341. for (FlexItem& item : line.items)
  342. {
  343. if (!item.frozen)
  344. {
  345. const float scaled_flex_shrink_factor = item.flex_shrink_factor * item.inner_flex_base_size;
  346. const float distribute_ratio = scaled_flex_shrink_factor / scaled_flex_shrink_factor_sum_nonzero;
  347. item.target_main_size = item.flex_base_size - distribute_ratio * Math::AbsoluteValue(remaining_free_space);
  348. }
  349. }
  350. }
  351. }
  352. // Clamp min/max violations
  353. float total_minmax_violation = 0.f;
  354. for (FlexItem& item : line.items)
  355. {
  356. if (!item.frozen)
  357. {
  358. const float inner_target_main_size = Math::Max(0.0f, item.target_main_size - item.main.sum_edges);
  359. const float clamped_target_main_size =
  360. Math::Clamp(inner_target_main_size, item.main.min_size, item.main.max_size) + item.main.sum_edges;
  361. const float violation_diff = clamped_target_main_size - item.target_main_size;
  362. item.violation = (violation_diff > 0.0f ? FlexItem::Violation::Min
  363. : (violation_diff < 0.f ? FlexItem::Violation::Max : FlexItem::Violation::None));
  364. item.target_main_size = clamped_target_main_size;
  365. total_minmax_violation += violation_diff;
  366. }
  367. }
  368. for (FlexItem& item : line.items)
  369. {
  370. if (total_minmax_violation > 0.0f)
  371. item.frozen |= (item.violation == FlexItem::Violation::Min);
  372. else if (total_minmax_violation < 0.0f)
  373. item.frozen |= (item.violation == FlexItem::Violation::Max);
  374. else
  375. item.frozen = true;
  376. }
  377. }
  378. // Now, each item's used main size is found!
  379. for (FlexItem& item : line.items)
  380. item.used_main_size = item.target_main_size;
  381. }
  382. // -- Align main axis (§9.5) --
  383. // Main alignment is done before cross sizing. Due to rounding to the pixel grid, the main size can
  384. // change slightly after main alignment/offseting. Also, the cross sizing depends on the main sizing
  385. // so doing it in this order ensures no surprises (overflow/wrapping issues) due to pixel rounding.
  386. for (FlexLine& line : container.lines)
  387. {
  388. const float remaining_free_space = used_main_size -
  389. std::accumulate(line.items.begin(), line.items.end(), 0.f, [](float value, const FlexItem& item) { return value + item.used_main_size; });
  390. if (remaining_free_space > 0.0f)
  391. {
  392. const int num_auto_margins = std::accumulate(line.items.begin(), line.items.end(), 0,
  393. [](int value, const FlexItem& item) { return value + int(item.main.auto_margin_a) + int(item.main.auto_margin_b); });
  394. if (num_auto_margins > 0)
  395. {
  396. // Distribute the remaining space to the auto margins.
  397. const float space_per_auto_margin = remaining_free_space / float(num_auto_margins);
  398. for (FlexItem& item : line.items)
  399. {
  400. if (item.main.auto_margin_a)
  401. item.main_auto_margin_size_a = space_per_auto_margin;
  402. if (item.main.auto_margin_b)
  403. item.main_auto_margin_size_b = space_per_auto_margin;
  404. }
  405. }
  406. else
  407. {
  408. // Distribute the remaining space based on the 'justify-content' property.
  409. using Style::JustifyContent;
  410. const int num_items = int(line.items.size());
  411. switch (computed_flex.justify_content)
  412. {
  413. case JustifyContent::SpaceBetween:
  414. if (num_items > 1)
  415. {
  416. const float space_per_edge = remaining_free_space / float(2 * num_items - 2);
  417. for (int i = 0; i < num_items; i++)
  418. {
  419. FlexItem& item = line.items[i];
  420. if (i > 0)
  421. item.main_auto_margin_size_a = space_per_edge;
  422. if (i < num_items - 1)
  423. item.main_auto_margin_size_b = space_per_edge;
  424. }
  425. break;
  426. }
  427. //-fallthrough
  428. case JustifyContent::FlexStart:
  429. line.items.back().main_auto_margin_size_b = remaining_free_space;
  430. break;
  431. case JustifyContent::FlexEnd:
  432. line.items.front().main_auto_margin_size_a = remaining_free_space;
  433. break;
  434. case JustifyContent::Center:
  435. line.items.front().main_auto_margin_size_a = 0.5f * remaining_free_space;
  436. line.items.back().main_auto_margin_size_b = 0.5f * remaining_free_space;
  437. break;
  438. case JustifyContent::SpaceAround:
  439. {
  440. const float space_per_edge = remaining_free_space / float(2 * num_items);
  441. for (FlexItem& item : line.items)
  442. {
  443. item.main_auto_margin_size_a = space_per_edge;
  444. item.main_auto_margin_size_b = space_per_edge;
  445. }
  446. }
  447. break;
  448. }
  449. }
  450. }
  451. // Now find the offset and snap the outer edges to the pixel grid.
  452. float cursor = 0.0f;
  453. for (FlexItem& item : line.items)
  454. {
  455. if (direction_reverse)
  456. item.main_offset = used_main_size - (cursor + item.used_main_size + item.main_auto_margin_size_a - item.main.margin_b);
  457. else
  458. item.main_offset = cursor + item.main.margin_a + item.main_auto_margin_size_a;
  459. cursor += item.used_main_size + item.main_auto_margin_size_a + item.main_auto_margin_size_b;
  460. Math::SnapToPixelGrid(item.main_offset, item.used_main_size);
  461. }
  462. }
  463. // -- Determine cross size (§9.4) --
  464. // First, determine the cross size of each item, format it if necessary.
  465. for (FlexLine& line : container.lines)
  466. {
  467. for (FlexItem& item : line.items)
  468. {
  469. const Vector2f content_size = item.box.GetSize();
  470. const float used_main_size_inner = item.used_main_size - item.main.sum_edges;
  471. if (main_axis_horizontal)
  472. {
  473. if (content_size.y < 0.0f)
  474. {
  475. item.box.SetContent(Vector2f(used_main_size_inner, content_size.y));
  476. LayoutEngine::FormatElement(item.element, flex_content_containing_block, &item.box);
  477. item.hypothetical_cross_size = item.element->GetBox().GetSize().y + item.cross.sum_edges;
  478. }
  479. else
  480. {
  481. item.hypothetical_cross_size = content_size.y + item.cross.sum_edges;
  482. }
  483. }
  484. else
  485. {
  486. if (content_size.x < 0.0f || item.cross.auto_size)
  487. {
  488. item.box.SetContent(Vector2f(content_size.x, used_main_size_inner));
  489. item.hypothetical_cross_size =
  490. LayoutDetails::GetShrinkToFitWidth(item.element, flex_content_containing_block) + item.cross.sum_edges;
  491. }
  492. else
  493. {
  494. item.hypothetical_cross_size = content_size.x + item.cross.sum_edges;
  495. }
  496. }
  497. }
  498. }
  499. // Determine cross size of each line.
  500. if (cross_available_size >= 0.f && flex_single_line && container.lines.size() == 1)
  501. {
  502. container.lines[0].cross_size = cross_available_size;
  503. }
  504. else
  505. {
  506. for (FlexLine& line : container.lines)
  507. {
  508. const float largest_hypothetical_cross_size =
  509. std::max_element(line.items.begin(), line.items.end(), [](const FlexItem& a, const FlexItem& b) {
  510. return a.hypothetical_cross_size < b.hypothetical_cross_size;
  511. })->hypothetical_cross_size;
  512. // Currently, we don't handle the case where baseline alignment could extend the line's cross size, see CSS specs 9.4.8.
  513. line.cross_size = Math::Max(0.0f, Math::RoundFloat(largest_hypothetical_cross_size));
  514. if (flex_single_line)
  515. line.cross_size = Math::Clamp(line.cross_size, cross_min_size, cross_max_size);
  516. }
  517. }
  518. // Stretch out the lines if we have extra space.
  519. if (cross_available_size >= 0.f && computed_flex.align_content == Style::AlignContent::Stretch)
  520. {
  521. int remaining_space = static_cast<int>(cross_available_size -
  522. std::accumulate(container.lines.begin(), container.lines.end(), 0.f,
  523. [](float value, const FlexLine& line) { return value + line.cross_size; }));
  524. if (remaining_space > 0)
  525. {
  526. // Here we use integer math to ensure all space is distributed to pixel boundaries.
  527. const int num_lines = (int)container.lines.size();
  528. for (int i = 0; i < num_lines; i++)
  529. {
  530. const int add_space_to_line = remaining_space / (num_lines - i);
  531. remaining_space -= add_space_to_line;
  532. container.lines[i].cross_size += static_cast<float>(add_space_to_line);
  533. }
  534. }
  535. }
  536. // Determine the used cross size of items.
  537. for (FlexLine& line : container.lines)
  538. {
  539. for (FlexItem& item : line.items)
  540. {
  541. const bool stretch_item = (item.align_self == Style::AlignSelf::Stretch);
  542. if (stretch_item && item.cross.auto_size && !item.cross.auto_margin_a && !item.cross.auto_margin_b)
  543. {
  544. item.used_cross_size =
  545. Math::Clamp(line.cross_size - item.cross.sum_edges, item.cross.min_size, item.cross.max_size) + item.cross.sum_edges;
  546. // 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
  547. // very slow, we skip this for now.
  548. }
  549. else
  550. {
  551. item.used_cross_size = item.hypothetical_cross_size;
  552. }
  553. }
  554. }
  555. // -- Align cross axis (§9.6) --
  556. for (FlexLine& line : container.lines)
  557. {
  558. constexpr float UndefinedBaseline = -FLT_MAX;
  559. float max_baseline_edge_distance = UndefinedBaseline;
  560. FlexItem* max_baseline_item = nullptr;
  561. for (FlexItem& item : line.items)
  562. {
  563. const float remaining_space = line.cross_size - item.used_cross_size;
  564. item.cross_offset = item.cross.margin_a;
  565. item.cross_baseline_top = UndefinedBaseline;
  566. const int num_auto_margins = int(item.cross.auto_margin_a) + int(item.cross.auto_margin_b);
  567. if (num_auto_margins > 0)
  568. {
  569. const float space_per_auto_margin = Math::Max(remaining_space, 0.0f) / float(num_auto_margins);
  570. item.cross_offset = item.cross.margin_a + (item.cross.auto_margin_a ? space_per_auto_margin : 0.f);
  571. }
  572. else
  573. {
  574. using Style::AlignSelf;
  575. const AlignSelf align_self = item.align_self;
  576. switch (align_self)
  577. {
  578. case AlignSelf::Auto:
  579. // Never encountered here: should already have been replaced by container's align-items property.
  580. RMLUI_ERROR;
  581. break;
  582. case AlignSelf::FlexStart:
  583. // Do nothing, cross offset set above with this behavior.
  584. break;
  585. case AlignSelf::FlexEnd:
  586. item.cross_offset = item.cross.margin_a + remaining_space;
  587. break;
  588. case AlignSelf::Center:
  589. item.cross_offset = item.cross.margin_a + 0.5f * remaining_space;
  590. break;
  591. case AlignSelf::Baseline:
  592. {
  593. // We don't currently have a good way to get the true baseline here, so we make a very rough zero-effort approximation.
  594. const float baseline_heuristic = 0.5f * item.element->GetLineHeight();
  595. const float sum_edges_top = (wrap_reverse ? item.cross.sum_edges - item.cross.sum_edges_a : item.cross.sum_edges_a);
  596. item.cross_baseline_top = sum_edges_top + baseline_heuristic;
  597. const float baseline_edge_distance = (wrap_reverse ? item.used_cross_size - item.cross_baseline_top : item.cross_baseline_top);
  598. if (baseline_edge_distance > max_baseline_edge_distance)
  599. {
  600. max_baseline_item = &item;
  601. max_baseline_edge_distance = baseline_edge_distance;
  602. }
  603. }
  604. break;
  605. case AlignSelf::Stretch:
  606. // Handled above
  607. break;
  608. }
  609. }
  610. if (wrap_reverse)
  611. {
  612. const float reverse_offset = line.cross_size - item.used_cross_size + item.cross.margin_a + item.cross.margin_b;
  613. item.cross_offset = reverse_offset - item.cross_offset;
  614. }
  615. }
  616. if (max_baseline_item)
  617. {
  618. // Align all baseline items such that their baselines are aligned with the one with the max. baseline distance.
  619. // Cross offset for all baseline items are currently set as in 'flex-start'.
  620. const float max_baseline_margin_top = (wrap_reverse ? max_baseline_item->cross.margin_b : max_baseline_item->cross.margin_a);
  621. const float line_top_to_baseline_distance =
  622. max_baseline_item->cross_offset - max_baseline_margin_top + max_baseline_item->cross_baseline_top;
  623. for (FlexItem& item : line.items)
  624. {
  625. if (item.cross_baseline_top != UndefinedBaseline)
  626. {
  627. const float margin_top = (wrap_reverse ? item.cross.margin_b : item.cross.margin_a);
  628. item.cross_offset = line_top_to_baseline_distance - item.cross_baseline_top + margin_top;
  629. }
  630. }
  631. }
  632. // Snap the outer item cross edges to the pixel grid.
  633. for (FlexItem& item : line.items)
  634. Math::SnapToPixelGrid(item.cross_offset, item.used_cross_size);
  635. }
  636. const float accumulated_lines_cross_size = std::accumulate(container.lines.begin(), container.lines.end(), 0.f,
  637. [](float value, const FlexLine& line) { return value + line.cross_size; });
  638. // If the available cross size is infinite, the used cross size becomes the accumulated line cross size.
  639. const float used_cross_size_unconstrained = cross_available_size >= 0.f ? cross_available_size : accumulated_lines_cross_size;
  640. const float used_cross_size = Math::Clamp(used_cross_size_unconstrained, cross_min_size, cross_max_size);
  641. // Align the lines along the cross-axis.
  642. {
  643. const float remaining_free_space = used_cross_size - accumulated_lines_cross_size;
  644. const int num_lines = int(container.lines.size());
  645. if (remaining_free_space > 0.f)
  646. {
  647. using Style::AlignContent;
  648. switch (computed_flex.align_content)
  649. {
  650. case AlignContent::SpaceBetween:
  651. if (num_lines > 1)
  652. {
  653. const float space_per_edge = remaining_free_space / float(2 * num_lines - 2);
  654. for (int i = 0; i < num_lines; i++)
  655. {
  656. FlexLine& line = container.lines[i];
  657. if (i > 0)
  658. line.cross_spacing_a = space_per_edge;
  659. if (i < num_lines - 1)
  660. line.cross_spacing_b = space_per_edge;
  661. }
  662. }
  663. //-fallthrough
  664. case AlignContent::FlexStart:
  665. container.lines.back().cross_spacing_b = remaining_free_space;
  666. break;
  667. case AlignContent::FlexEnd:
  668. container.lines.front().cross_spacing_a = remaining_free_space;
  669. break;
  670. case AlignContent::Center:
  671. container.lines.front().cross_spacing_a = 0.5f * remaining_free_space;
  672. container.lines.back().cross_spacing_b = 0.5f * remaining_free_space;
  673. break;
  674. case AlignContent::SpaceAround:
  675. {
  676. const float space_per_edge = remaining_free_space / float(2 * num_lines);
  677. for (FlexLine& line : container.lines)
  678. {
  679. line.cross_spacing_a = space_per_edge;
  680. line.cross_spacing_b = space_per_edge;
  681. }
  682. }
  683. break;
  684. case AlignContent::Stretch:
  685. // Handled above.
  686. break;
  687. }
  688. }
  689. // Now find the offset and snap the line edges to the pixel grid.
  690. float cursor = 0.f;
  691. for (FlexLine& line : container.lines)
  692. {
  693. if (wrap_reverse)
  694. line.cross_offset = used_cross_size - (cursor + line.cross_spacing_a + line.cross_size);
  695. else
  696. line.cross_offset = cursor + line.cross_spacing_a;
  697. cursor += line.cross_spacing_a + line.cross_size + line.cross_spacing_b;
  698. Math::SnapToPixelGrid(line.cross_offset, line.cross_size);
  699. }
  700. }
  701. auto MainCrossToVec2 = [main_axis_horizontal](const float v_main, const float v_cross) {
  702. return main_axis_horizontal ? Vector2f(v_main, v_cross) : Vector2f(v_cross, v_main);
  703. };
  704. // -- Format items --
  705. for (FlexLine& line : container.lines)
  706. {
  707. for (FlexItem& item : line.items)
  708. {
  709. const Vector2f item_size = MainCrossToVec2(item.used_main_size - item.main.sum_edges, item.used_cross_size - item.cross.sum_edges);
  710. const Vector2f item_offset = MainCrossToVec2(item.main_offset, line.cross_offset + item.cross_offset);
  711. item.box.SetContent(item_size);
  712. Vector2f cell_visible_overflow_size;
  713. LayoutEngine::FormatElement(item.element, flex_content_containing_block, &item.box, &cell_visible_overflow_size);
  714. // Set the position of the element within the the flex container
  715. item.element->SetOffset(flex_content_offset + item_offset, element_flex);
  716. // The cell contents may overflow, propagate this to the flex container.
  717. const Vector2f overflow_size = item_offset + cell_visible_overflow_size -
  718. Vector2f(item.box.GetEdge(Box::MARGIN, Box::LEFT), item.box.GetEdge(Box::MARGIN, Box::TOP));
  719. flex_content_overflow_size.x = Math::Max(flex_content_overflow_size.x, overflow_size.x);
  720. flex_content_overflow_size.y = Math::Max(flex_content_overflow_size.y, overflow_size.y);
  721. }
  722. }
  723. flex_resulting_content_size = MainCrossToVec2(used_main_size, used_cross_size);
  724. }
  725. } // namespace Rml