1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
/*
* Copyright (c) 2022, Michiel Vrins
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "ElementSizePreviewWidget.h"
#include <LibGUI/Painter.h>
namespace Browser {
void ElementSizePreviewWidget::paint_event(GUI::PaintEvent& event)
{
GUI::Frame::paint_event(event);
GUI::Painter painter(*this);
painter.fill_rect(frame_inner_rect(), Color::White);
int outer_margin = 10;
int text_width_padding = 4;
int text_height_padding = 4;
int content_width_padding = 8;
int content_height_padding = 8;
auto content_size_text = String::formatted("{}x{}", m_node_content_width, m_node_content_height);
int inner_content_width = max(100, font().width(content_size_text) + 2 * content_width_padding);
int inner_content_height = max(15, font().glyph_height() + 2 * content_height_padding);
auto format_size_text = [&](float size) {
return String::formatted("{:.4f}", size);
};
auto compute_text_string_width = [&](float size) {
return font().width(format_size_text(size)) + 2 * text_width_padding;
};
int margin_left_width = max(25, compute_text_string_width(m_node_box_sizing.margin.left));
int margin_right_width = max(25, compute_text_string_width(m_node_box_sizing.margin.right));
int border_left_width = max(25, compute_text_string_width(m_node_box_sizing.border.left));
int border_right_width = max(25, compute_text_string_width(m_node_box_sizing.border.right));
int padding_left_width = max(25, compute_text_string_width(m_node_box_sizing.padding.left));
int padding_right_width = max(25, compute_text_string_width(m_node_box_sizing.padding.right));
// outer rect
auto margin_rect = to_widget_rect({ outer_margin,
outer_margin,
inner_content_width + border_left_width + border_right_width + margin_left_width + margin_right_width + padding_left_width + padding_right_width,
inner_content_height * 7 });
Gfx::IntSize content_size { margin_rect.width() + 2 * outer_margin, margin_rect.height() + 2 * outer_margin };
set_content_size(content_size);
auto border_rect = margin_rect;
border_rect.take_from_left(margin_left_width);
border_rect.take_from_right(margin_right_width);
border_rect.shrink({ 0, inner_content_height * 2 });
auto padding_rect = border_rect;
padding_rect.take_from_left(border_left_width);
padding_rect.take_from_right(border_right_width);
padding_rect.shrink({ 0, inner_content_height * 2 });
auto content_rect = padding_rect;
content_rect.take_from_left(padding_left_width);
content_rect.take_from_right(padding_right_width);
content_rect.shrink({ 0, inner_content_height * 2 });
auto draw_borders = [&](Gfx::IntRect rect, Color color) {
painter.fill_rect(rect.take_from_top(1), color);
painter.fill_rect(rect.take_from_right(1), color);
painter.fill_rect(rect.take_from_bottom(1), color);
painter.fill_rect(rect.take_from_left(1), color);
};
auto draw_size_texts = [&](Gfx::IntRect rect, Color color, Web::Layout::PixelBox box) {
painter.draw_text(rect, format_size_text(box.top), font(), Gfx::TextAlignment::TopCenter, color);
painter.draw_text(rect, format_size_text(box.right), font(), Gfx::TextAlignment::CenterRight, color);
painter.draw_text(rect, format_size_text(box.bottom), font(), Gfx::TextAlignment::BottomCenter, color);
painter.draw_text(rect, format_size_text(box.left), font(), Gfx::TextAlignment::CenterLeft, color);
};
// paint margin box
painter.fill_rect(margin_rect, Color(249, 204, 157));
draw_borders(margin_rect, Color::Black);
margin_rect.shrink(1, 1, 1, 1);
margin_rect.shrink(text_height_padding, text_width_padding, text_height_padding, text_width_padding);
painter.draw_text(margin_rect, "margin", font(), Gfx::TextAlignment::TopLeft, Color::Black);
draw_size_texts(margin_rect, Color::Black, m_node_box_sizing.margin);
// paint border box
painter.fill_rect(border_rect, Color(253, 221, 155));
draw_borders(border_rect, Color::Black);
border_rect.shrink(1, 1, 1, 1);
border_rect.shrink(text_height_padding, text_width_padding, text_height_padding, text_width_padding);
painter.draw_text(border_rect, "border", font(), Gfx::TextAlignment::TopLeft, Color::Black);
draw_size_texts(border_rect, Color::Black, m_node_box_sizing.border);
// paint padding box
painter.fill_rect(padding_rect, Color(195, 208, 139));
draw_borders(padding_rect, Color::Black);
padding_rect.shrink(1, 1, 1, 1);
padding_rect.shrink(text_height_padding, text_width_padding, text_height_padding, text_width_padding);
painter.draw_text(padding_rect, "padding", font(), Gfx::TextAlignment::TopLeft, Color::Black);
draw_size_texts(padding_rect, Color::Black, m_node_box_sizing.padding);
// paint content box
painter.fill_rect(content_rect, Color(140, 182, 192));
draw_borders(content_rect, Color::Black);
content_rect.shrink(1, 1, 1, 1);
painter.draw_text(content_rect, content_size_text, font(), Gfx::TextAlignment::Center, Color::Black);
}
}
|
