LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-21 18:37:58 +03:00
Code Issues Packages Projects Releases Wiki Activity
e941f07931
ladybird/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h

147 lines
5.7 KiB
C
Raw Normal View History

LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 19:33:46 +03:00
/*
* Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
*
Everything: Move to SPDX license identifiers in all files. SPDX License Identifiers are a more compact / standardized way of representing file license information. See: https://spdx.dev/resources/use/#identifiers This was done with the `ambr` search and replace tool. ambr --no-parent-ignore --key-from-file --rep-from-file key.txt rep.txt *
2021-04-22 11:24:48 +03:00
* SPDX-License-Identifier: BSD-2-Clause
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 19:33:46 +03:00
*/
#pragma once
LibWeb: Add missing headers
2021-10-10 16:56:29 +03:00
#include <LibWeb/Layout/Box.h>
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 19:33:46 +03:00
#include <LibWeb/Layout/FormattingContext.h>
namespace Web::Layout {
class FlexFormattingContext final : public FormattingContext {
public:
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 17:51:24 +03:00
FlexFormattingContext(FormattingState&, Box const& flex_container, FormattingContext* parent);
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 19:33:46 +03:00
~FlexFormattingContext();
LibWeb: Implement "out-of-flow" property of Layout Box In some situations, a layout box should not participate in the standard layout process, for example when set to `position: absolute`.
2021-09-15 14:19:42 +03:00
virtual bool inhibits_floating() const override { return true; }
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 17:51:24 +03:00
virtual void run(Box const&, LayoutMode) override;
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 20:57:26 +03:00
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 23:52:50 +03:00
Box const& flex_container() const { return context_box(); }
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 20:57:26 +03:00
private:
LibWeb: Add a debug helper to dump current state of an FFC
2022-03-13 02:03:59 +03:00
void dump_items() const;
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 23:44:54 +03:00
struct DirectionAgnosticMargins {
float main_before { 0 };
float main_after { 0 };
float cross_before { 0 };
float cross_after { 0 };
};
struct FlexItem {
Box& box;
float flex_base_size { 0 };
float hypothetical_main_size { 0 };
float hypothetical_cross_size { 0 };
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 17:14:18 +03:00
float hypothetical_cross_size_with_margins() { return hypothetical_cross_size + margins.cross_before + margins.cross_after + borders.cross_after + borders.cross_before + padding.cross_after + padding.cross_before; }
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 23:44:54 +03:00
float target_main_size { 0 };
bool frozen { false };
Optional<float> flex_factor {};
float scaled_flex_shrink_factor { 0 };
float max_content_flex_fraction { 0 };
float main_size { 0 };
float cross_size { 0 };
float main_offset { 0 };
float cross_offset { 0 };
DirectionAgnosticMargins margins {};
LibWeb: Take borders and padding into account when doing Flex layout Before this the flex layout didn't take into account the applied borders or padding while laying out the items. The child's top and left borders would get painted over the parent's borders, also due to it not taking borders into account, children with borders would overlap each other. Due to it not taking padding into account, the children would get drawn outside the parent element.
2022-03-27 17:14:18 +03:00
DirectionAgnosticMargins borders {};
DirectionAgnosticMargins padding {};
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 23:44:54 +03:00
bool is_min_violation { false };
bool is_max_violation { false };
};
struct FlexLine {
Vector<FlexItem*> items;
float cross_size { 0 };
};
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 22:24:00 +03:00
bool has_definite_main_size(Box const&) const;
bool has_definite_cross_size(Box const&) const;
float specified_main_size(Box const&) const;
float specified_cross_size(Box const&) const;
LibWeb: Add FFC helpers for resolving definite main/cross sizes Although something has a definite size, we may still have to "resolve" it, since FFC is quite liberal in what it considers to be definite. Let's put that logic in a set of helper functions.
2022-03-12 16:11:55 +03:00
float resolved_definite_main_size(Box const&) const;
float resolved_definite_cross_size(Box const&) const;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 22:24:00 +03:00
bool has_main_min_size(Box const&) const;
bool has_cross_min_size(Box const&) const;
float specified_main_max_size(Box const&) const;
float specified_cross_max_size(Box const&) const;
float calculated_main_size(Box const&) const;
bool is_cross_auto(Box const&) const;
bool is_main_axis_margin_first_auto(Box const&) const;
bool is_main_axis_margin_second_auto(Box const&) const;
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 23:52:50 +03:00
float specified_main_size_of_child_box(Box const& child_box) const;
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 22:24:00 +03:00
float specified_main_min_size(Box const&) const;
float specified_cross_min_size(Box const&) const;
bool has_main_max_size(Box const&) const;
bool has_cross_max_size(Box const&) const;
float sum_of_margin_padding_border_in_main_axis(Box const&) const;
LibWeb: Fix sizing of flex child that has flex-basis 0 Before if an element didn't have a main min size we would clamp it to a literal zero. If that element also had a flex-basis 0 it's width would end up being 0. This patch adds a determine_min_main_size_of_child function that will calculate the minimum main size for the box based on the content of the box. We use the result of that function now instead of clamping the element main min size to 0. This also adds one more box to the flex.html test page, which is the same flex: 0 0 0 box but with flex-direction: column.
2022-03-30 20:50:57 +03:00
float determine_min_main_size_of_child(Box const& box);
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 22:24:00 +03:00
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 17:51:24 +03:00
void set_main_size(Box const&, float size);
void set_cross_size(Box const&, float size);
void set_offset(Box const&, float main_offset, float cross_offset);
void set_main_axis_first_margin(Box const&, float margin);
void set_main_axis_second_margin(Box const&, float margin);
LibWeb: Turn FlexFormattingContext helper lambdas into member functions Continuing on the quest towards making FlexFormattingContext readable.
2021-10-13 22:24:00 +03:00
LibWeb: Fix flex line alignment in single-line flex containers For single-line flex containers, center the only flex line along the cross axis. Alignment of multi-line flex containers are left as a FIXME. This patch also moves out the assignment of final metrics to the FormattingState from align_all_flex_lines() to a separate function.
2022-02-28 01:58:54 +03:00
void copy_dimensions_from_flex_items_to_boxes();
LibWeb: Move unrelated things out of FFC step 1 Setting some initial width and height on the flex container is totally unrelated to the "generate anonymous flex items" step.
2022-02-27 11:50:09 +03:00
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 23:52:50 +03:00
void generate_anonymous_flex_items();
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 20:57:26 +03:00
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 16:40:13 +03:00
void determine_available_main_and_cross_space(bool& main_is_constrained, bool& cross_is_constrained, float& main_min_size, float& main_max_size, float& cross_min_size, float& cross_max_size);
LibWeb: Move FFC layout algorithm step 2 into a separate function Determining the available main and cross space is now done by a separate function. The signature is a little bit hairy since this function computes some things that are used by subsequent algorithm steps. Factoring can definitely be improved further.
2021-10-13 22:41:35 +03:00
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 16:40:13 +03:00
float calculate_indefinite_main_size(FlexItem const&);
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 23:52:50 +03:00
void determine_flex_base_size_and_hypothetical_main_size(FlexItem&);
LibWeb: Move FFC layout algorithm step 3 to a separate function
2021-10-13 22:49:28 +03:00
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 16:40:13 +03:00
void determine_main_size_of_flex_container(bool main_is_constrained, float main_min_size, float main_max_size);
LibWeb: Move FFC layout algorithm step 4 to a separate function
2021-10-13 23:03:39 +03:00
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 16:40:13 +03:00
void collect_flex_items_into_flex_lines();
LibWeb: Move FFC layout algorithm step 5 to a separate function
2021-10-13 23:07:55 +03:00
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 16:40:13 +03:00
void resolve_flexible_lengths();
LibWeb: Move FFC layout algorithm step 6 to a separate function
2021-10-13 23:11:50 +03:00
LibWeb: Improve FFC step 7 (hypothetical cross size) - Avoid performing inside layout on definite-size flex items (since their computed size can be used as-is.) - Use FormattingState::clone() to generate a throwaway layout instead of mutating the tree in-place. - Update spec link & comments based on current CSSWG draft. The latest version is quite a bit clearer on how this should work.
2022-02-27 15:39:38 +03:00
void determine_hypothetical_cross_size_of_item(FlexItem&);
LibWeb: Move FFC layout algorithm step 7 to a separate function
2021-10-13 23:15:16 +03:00
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 23:52:50 +03:00
void calculate_cross_size_of_each_flex_line(float cross_min_size, float cross_max_size);
LibWeb: Move FFC layout algorithm step 8 to a separate function
2021-10-13 23:17:33 +03:00
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 23:52:50 +03:00
void determine_used_cross_size_of_each_flex_item();
LibWeb: Move FFC layout algorithm step 11 to a separate function
2021-10-13 23:19:17 +03:00
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 16:40:13 +03:00
void distribute_any_remaining_free_space();
LibWeb: Move FFC layout algorithm step 12 to a separate function
2021-10-13 23:20:55 +03:00
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 23:52:50 +03:00
void align_all_flex_items_along_the_cross_axis();
LibWeb: Move FFC layout algorithm step 14 to a separate function
2021-10-13 23:22:30 +03:00
LibWeb: Add FFC::flex_container() and use throughout Since FFC is only ever run() on the flex container, we can assume (but verify) that the run box is the flex container and use an accessor throughout. The end result: less parameter passing.
2021-10-13 23:52:50 +03:00
void determine_flex_container_used_cross_size(float cross_min_size, float cross_max_size);
LibWeb: Move FFC layout algorithm step 15 to a separate function
2021-10-13 23:24:09 +03:00
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 23:44:54 +03:00
void align_all_flex_lines();
LibWeb: Move FFC layout algorithm step 16 to a separate function
2021-10-13 23:25:39 +03:00
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 20:57:26 +03:00
bool is_row_layout() const { return m_flex_direction == CSS::FlexDirection::Row || m_flex_direction == CSS::FlexDirection::RowReverse; }
LibWeb: Add spec comments to FFC layout algorithm step 5
2021-10-14 00:38:04 +03:00
bool is_single_line() const { return flex_container().computed_values().flex_wrap() == CSS::FlexWrap::Nowrap; }
LibWeb: Implement flex reverse layouts This builds on the work done by implementing the flex order CSS property and implements flex reverse layouts by just reversing the order and the items within each order bucket.
2022-04-02 12:29:55 +03:00
bool is_direction_reverse() const { return m_flex_direction == CSS::FlexDirection::ColumnReverse || m_flex_direction == CSS::FlexDirection::RowReverse; }
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 23:44:54 +03:00
void populate_specified_margins(FlexItem&, CSS::FlexDirection) const;
LibWeb: Implement basic intrinsic sizing algorithms for flex containers This patch adds support for MinContent and MaxContent layout to FFC. This means that an FFC can now calculate intrinsic sizes for the flex container, to be used by the parent formatting context. There are some FIXME's as usual, but this already works on basic things.
2022-04-06 02:20:20 +03:00
void determine_intrinsic_size_of_flex_container(LayoutMode);
[[nodiscard]] float calculate_intrinsic_main_size_of_flex_container(LayoutMode);
[[nodiscard]] float calculate_intrinsic_cross_size_of_flex_container(LayoutMode);
[[nodiscard]] float calculate_cross_min_content_contribution(FlexItem const&) const;
[[nodiscard]] float calculate_cross_max_content_contribution(FlexItem const&) const;
[[nodiscard]] float calculate_main_min_content_contribution(FlexItem const&) const;
[[nodiscard]] float calculate_main_max_content_contribution(FlexItem const&) const;
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 17:51:24 +03:00
FormattingState::NodeState& m_flex_container_state;
LibWeb: Make FFC line and item vectors members instead of locals This gives all member functions access to these vectors without having to pass them as arguments.
2021-10-13 23:44:54 +03:00
Vector<FlexLine> m_flex_lines;
Vector<FlexItem> m_flex_items;
LibWeb: Split out FFC's "generate anonymous flex items" to a function Let's begin splitting the FlexFormattingContext layout algorithm into separate functions to make it more manageable.
2021-10-13 20:57:26 +03:00
CSS::FlexDirection m_flex_direction {};
LibWeb: Put available space information in an FFC member This makes it easier for each step of the flex layout algorithm to access this information.
2022-02-27 14:19:58 +03:00
struct AvailableSpace {
LibWeb: Handle many more cases with intrinsic/auto sizing in flex layout The flexbox specification barely even handwaves about automatically sized items, but there's actually a lot of work to do in order for them to get the correct size. This patch is messy, but does make significant progress on supporting flex items with indefinite width and/or height. There's a fair amount of nested layout going on here, but do note that we'll be hitting the intrinsic sizes cache whenever possible.
2022-03-12 16:40:13 +03:00
Optional<float> main;
Optional<float> cross;
LibWeb: Put available space information in an FFC member This makes it easier for each step of the flex layout algorithm to access this information.
2022-02-27 14:19:58 +03:00
};
Optional<AvailableSpace> m_available_space;
LibWeb: Add a very naive Layout::FlexFormattingContext :^) This is very dumb and only lays out its child boxes on a horizontal line with their shrink-to-fit widths. You have to start somewhere! :^)
2021-01-18 19:33:46 +03:00
};
}
Reference in New Issue Copy Permalink