RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 15:48:12 +00:00
Code Issues Activity Actions

LibWeb: Rework the layout engine to use relative offsets

Browse source 
The box tree and line boxes now all store a relative offset from their
containing block, instead of an absolute (document-relative) position.

This removes a huge pain point from the layout system which was having
to adjust offsets recursively when something moved. It also makes some
layout logic significantly simpler.

Every box can still find its absolute position by walking its chain
of containing blocks and accumulating the translation from the root.
This is currently what we do both for rendering and hit testing.
This commit is contained in:
Andreas Kling 2020-06-10 10:42:29 +02:00
parent e836f09094
commit 656b01eb0f
21 changed files with 183 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

39
Libraries/LibWeb/Layout/LayoutBox.h
View file

@ -33,22 +33,33 @@ namespace Web {
class LayoutBox : public LayoutNodeWithStyleAndBoxModelMetrics {
public:
const Gfx::FloatRect& rect() const { return m_rect; }
Gfx::FloatRect& rect() { return m_rect; }
void set_rect(const Gfx::FloatRect&);
const Gfx::FloatRect absolute_rect() const;
float x() const { return rect().x(); }
float y() const { return rect().y(); }
float width() const { return rect().width(); }
float height() const { return rect().height(); }
Gfx::FloatSize size() const { return rect().size(); }
Gfx::FloatPoint position() const { return rect().location(); }
Gfx::FloatPoint effective_offset() const;
virtual HitTestResult hit_test(const Gfx::Point& position) const override;
void set_offset(const Gfx::FloatPoint& offset);
void set_offset(float x, float y) { set_offset({ x, y }); }
const Gfx::FloatSize& size() const { return m_size; }
void set_size(const Gfx::FloatSize&);
void set_size(float width, float height) { set_size({ width, height }); }
void set_width(float width) { set_size(width, height()); }
void set_height(float height) { set_size(width(), height); }
float width() const { return m_size.width(); }
float height() const { return m_size.height(); }
float absolute_x() const { return absolute_rect().x(); }
float absolute_y() const { return absolute_rect().y(); }
Gfx::FloatPoint absolute_position() const { return absolute_rect().location(); }
virtual HitTestResult hit_test(const Gfx::Point& absolute_position) const override;
virtual void set_needs_display() override;
bool is_body() const;
void set_containing_line_box_fragment(LineBoxFragment&);
protected:
LayoutBox(const Node* node, NonnullRefPtr<StyleProperties> style)
: LayoutNodeWithStyleAndBoxModelMetrics(node, move(style))
@ -57,7 +68,7 @@ protected:
virtual void render(RenderingContext&) override;
virtual void did_set_rect() {}
virtual void did_set_rect() { }
private:
virtual bool is_box() const override { return true; }
@ -70,7 +81,11 @@ private:
};
void paint_border(RenderingContext&, Edge, const Gfx::FloatRect&, CSS::PropertyID style_property_id, CSS::PropertyID color_property_id, CSS::PropertyID width_property_id);
Gfx::FloatRect m_rect;
Gfx::FloatPoint m_offset;
Gfx::FloatSize m_size;
// Some boxes hang off of line box fragments. (inline-block, inline-table, replaced, etc)
WeakPtr<LineBoxFragment> m_containing_line_box_fragment;
};
template<>