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