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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
|
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2022, MacDue <macdue@dueutil.tech>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibGfx/DisjointRectSet.h>
#include <LibGfx/Filters/StackBlurFilter.h>
#include <LibGfx/Painter.h>
#include <LibWeb/Layout/LineBoxFragment.h>
#include <LibWeb/Painting/BorderPainting.h>
#include <LibWeb/Painting/BorderRadiusCornerClipper.h>
#include <LibWeb/Painting/PaintContext.h>
#include <LibWeb/Painting/ShadowPainting.h>
namespace Web::Painting {
void paint_box_shadow(PaintContext& context, Gfx::IntRect const& content_rect, BorderRadiiData const& border_radii, Vector<ShadowData> const& box_shadow_layers)
{
if (box_shadow_layers.is_empty())
return;
auto& painter = context.painter();
auto top_left_corner = border_radii.top_left.as_corner();
auto top_right_corner = border_radii.top_right.as_corner();
auto bottom_right_corner = border_radii.bottom_right.as_corner();
auto bottom_left_corner = border_radii.bottom_left.as_corner();
ScopedCornerRadiusClip corner_clipper { painter, content_rect, border_radii, CornerClip::Inside };
// Note: Box-shadow layers are ordered front-to-back, so we paint them in reverse
for (auto& box_shadow_data : box_shadow_layers.in_reverse()) {
// FIXME: Paint inset shadows.
if (box_shadow_data.placement != ShadowPlacement::Outer)
continue;
auto fill_rect_masked = [](auto& painter, auto fill_rect, auto mask_rect, auto color) {
Gfx::DisjointRectSet rect_set;
rect_set.add(fill_rect);
auto shattered = rect_set.shatter(mask_rect);
for (auto& rect : shattered.rects())
painter.fill_rect(rect, color);
};
// Our blur cannot handle radii over 255 so there's no point trying (255 is silly big anyway)
auto blur_radius = clamp(box_shadow_data.blur_radius, 0, 255);
// If there's no blurring, nor rounded corners, we can save a lot of effort.
auto non_blurred_shadow_rect = content_rect.inflated(box_shadow_data.spread_distance, box_shadow_data.spread_distance, box_shadow_data.spread_distance, box_shadow_data.spread_distance);
if (blur_radius == 0 && !border_radii.has_any_radius()) {
fill_rect_masked(painter, non_blurred_shadow_rect.translated(box_shadow_data.offset_x, box_shadow_data.offset_y), content_rect, box_shadow_data.color);
continue;
}
auto top_left_shadow_corner = top_left_corner;
auto top_right_shadow_corner = top_right_corner;
auto bottom_right_shadow_corner = bottom_right_corner;
auto bottom_left_shadow_corner = bottom_left_corner;
auto spread_corner = [&](auto& corner) {
if (corner) {
corner.horizontal_radius += box_shadow_data.spread_distance;
corner.vertical_radius += box_shadow_data.spread_distance;
}
};
spread_corner(top_left_shadow_corner);
spread_corner(top_right_shadow_corner);
spread_corner(bottom_right_shadow_corner);
spread_corner(bottom_left_shadow_corner);
auto expansion = box_shadow_data.spread_distance - (blur_radius * 2);
Gfx::IntRect inner_bounding_rect = {
content_rect.x() + box_shadow_data.offset_x - expansion,
content_rect.y() + box_shadow_data.offset_y - expansion,
content_rect.width() + 2 * expansion,
content_rect.height() + 2 * expansion
};
// Calculating and blurring the box-shadow full size is expensive, and wasteful - aside from the corners,
// all vertical strips of the shadow are identical, and the same goes for horizontal ones.
// So instead, we generate a shadow bitmap that is just large enough to include the corners and 1px of
// non-corner, and then we repeatedly blit sections of it. This is similar to a NinePatch on Android.
auto double_radius = blur_radius * 2;
auto blurred_edge_thickness = blur_radius * 4;
auto default_corner_size = Gfx::IntSize { double_radius, double_radius };
auto top_left_corner_size = top_left_shadow_corner ? top_left_shadow_corner.as_rect().size() : default_corner_size;
auto top_right_corner_size = top_right_shadow_corner ? top_right_shadow_corner.as_rect().size() : default_corner_size;
auto bottom_left_corner_size = bottom_left_shadow_corner ? bottom_left_shadow_corner.as_rect().size() : default_corner_size;
auto bottom_right_corner_size = bottom_right_shadow_corner ? bottom_right_shadow_corner.as_rect().size() : default_corner_size;
auto max_edge_width = non_blurred_shadow_rect.width() / 2;
auto max_edge_height = non_blurred_shadow_rect.height() / 2;
auto extra_edge_width = non_blurred_shadow_rect.width() % 2;
auto extra_edge_height = non_blurred_shadow_rect.height() % 2;
auto clip_corner_size = [&](auto& size, int x_bonus = 0, int y_bonus = 0) {
size.set_width(min(size.width(), max_edge_width + x_bonus));
size.set_height(min(size.height(), max_edge_height + y_bonus));
};
if (!top_left_corner)
clip_corner_size(top_left_corner_size, extra_edge_width, extra_edge_height);
if (!top_right_corner)
clip_corner_size(top_right_corner_size, 0, extra_edge_height);
if (!bottom_left_corner)
clip_corner_size(bottom_left_corner_size, extra_edge_width);
if (!bottom_right_corner)
clip_corner_size(bottom_right_corner_size);
auto shadow_bitmap_rect = Gfx::IntRect(
0, 0,
max(
top_left_corner_size.width() + top_right_corner_size.width(),
bottom_left_corner_size.width() + bottom_right_corner_size.width())
+ 1 + blurred_edge_thickness,
max(
top_left_corner_size.height() + bottom_left_corner_size.height(),
top_right_corner_size.height() + bottom_right_corner_size.height())
+ 1 + blurred_edge_thickness);
auto top_left_corner_rect = Gfx::IntRect {
0, 0,
top_left_corner_size.width() + double_radius,
top_left_corner_size.height() + double_radius
};
auto top_right_corner_rect = Gfx::IntRect {
shadow_bitmap_rect.width() - (top_right_corner_size.width() + double_radius), 0,
top_right_corner_size.width() + double_radius,
top_right_corner_size.height() + double_radius
};
auto bottom_right_corner_rect = Gfx::IntRect {
shadow_bitmap_rect.width() - (bottom_right_corner_size.width() + double_radius),
shadow_bitmap_rect.height() - (bottom_right_corner_size.height() + double_radius),
bottom_right_corner_size.width() + double_radius,
bottom_right_corner_size.height() + double_radius
};
auto bottom_left_corner_rect = Gfx::IntRect {
0, shadow_bitmap_rect.height() - (bottom_left_corner_size.height() + double_radius),
bottom_left_corner_size.width() + double_radius,
bottom_left_corner_size.height() + double_radius
};
auto horizontal_edge_width = min(max_edge_height, double_radius) + double_radius;
auto vertical_edge_width = min(max_edge_width, double_radius) + double_radius;
auto horizontal_top_edge_width = min(max_edge_height + extra_edge_height, double_radius) + double_radius;
auto vertical_left_edge_width = min(max_edge_width + extra_edge_width, double_radius) + double_radius;
Gfx::IntRect left_edge_rect { 0, top_left_corner_rect.height(), vertical_left_edge_width, 1 };
Gfx::IntRect right_edge_rect { shadow_bitmap_rect.width() - vertical_edge_width, top_right_corner_rect.height(), vertical_edge_width, 1 };
Gfx::IntRect top_edge_rect { top_left_corner_rect.width(), 0, 1, horizontal_top_edge_width };
Gfx::IntRect bottom_edge_rect { bottom_left_corner_rect.width(), shadow_bitmap_rect.height() - horizontal_edge_width, 1, horizontal_edge_width };
auto shadows_bitmap = Gfx::Bitmap::try_create(Gfx::BitmapFormat::BGRA8888, shadow_bitmap_rect.size());
if (shadows_bitmap.is_error()) {
dbgln("Unable to allocate temporary bitmap for box-shadow rendering: {}", shadows_bitmap.error());
return;
}
auto shadow_bitmap = shadows_bitmap.release_value();
Gfx::Painter corner_painter { *shadow_bitmap };
Gfx::AntiAliasingPainter aa_corner_painter { corner_painter };
aa_corner_painter.fill_rect_with_rounded_corners(shadow_bitmap_rect.shrunken(double_radius, double_radius, double_radius, double_radius), box_shadow_data.color, top_left_shadow_corner, top_right_shadow_corner, bottom_right_shadow_corner, bottom_left_shadow_corner);
Gfx::StackBlurFilter filter(*shadow_bitmap);
filter.process_rgba(blur_radius, box_shadow_data.color);
auto paint_shadow_infill = [&] {
if (!border_radii.has_any_radius())
return painter.fill_rect(inner_bounding_rect, box_shadow_data.color);
auto top_left_inner_width = top_left_corner_rect.width() - blurred_edge_thickness;
auto top_left_inner_height = top_left_corner_rect.height() - blurred_edge_thickness;
auto top_right_inner_width = top_right_corner_rect.width() - blurred_edge_thickness;
auto top_right_inner_height = top_right_corner_rect.height() - blurred_edge_thickness;
auto bottom_right_inner_width = bottom_right_corner_rect.width() - blurred_edge_thickness;
auto bottom_right_inner_height = bottom_right_corner_rect.height() - blurred_edge_thickness;
auto bottom_left_inner_width = bottom_left_corner_rect.width() - blurred_edge_thickness;
auto bottom_left_inner_height = bottom_left_corner_rect.height() - blurred_edge_thickness;
Gfx::IntRect top_rect {
inner_bounding_rect.x() + top_left_inner_width,
inner_bounding_rect.y(),
inner_bounding_rect.width() - top_left_inner_width - top_right_inner_width,
top_left_inner_height
};
Gfx::IntRect right_rect {
inner_bounding_rect.x() + inner_bounding_rect.width() - top_right_inner_width,
inner_bounding_rect.y() + top_right_inner_height,
top_right_inner_width,
inner_bounding_rect.height() - top_right_inner_height - bottom_right_inner_height
};
Gfx::IntRect bottom_rect {
inner_bounding_rect.x() + bottom_left_inner_width,
inner_bounding_rect.y() + inner_bounding_rect.height() - bottom_right_inner_height,
inner_bounding_rect.width() - bottom_left_inner_width - bottom_right_inner_width,
bottom_right_inner_height
};
Gfx::IntRect left_rect {
inner_bounding_rect.x(),
inner_bounding_rect.y() + top_left_inner_height,
bottom_left_inner_width,
inner_bounding_rect.height() - top_left_inner_height - bottom_left_inner_height
};
Gfx::IntRect inner = {
left_rect.x() + left_rect.width(),
left_rect.y(),
inner_bounding_rect.width() - left_rect.width() - right_rect.width(),
inner_bounding_rect.height() - top_rect.height() - bottom_rect.height()
};
painter.fill_rect(top_rect, box_shadow_data.color);
painter.fill_rect(right_rect, box_shadow_data.color);
painter.fill_rect(bottom_rect, box_shadow_data.color);
painter.fill_rect(left_rect, box_shadow_data.color);
painter.fill_rect(inner, box_shadow_data.color);
};
auto left_start = inner_bounding_rect.left() - blurred_edge_thickness;
auto right_start = inner_bounding_rect.left() + inner_bounding_rect.width() + (blurred_edge_thickness - vertical_edge_width);
auto top_start = inner_bounding_rect.top() - blurred_edge_thickness;
auto bottom_start = inner_bounding_rect.top() + inner_bounding_rect.height() + (blurred_edge_thickness - horizontal_edge_width);
// Note: The +1s in a few of the following translations are due to the -1s Gfx::Rect::right() and Gfx::Rect::bottom().
auto top_left_corner_blit_pos = inner_bounding_rect.top_left().translated(-blurred_edge_thickness, -blurred_edge_thickness);
auto top_right_corner_blit_pos = inner_bounding_rect.top_right().translated(-top_right_corner_size.width() + 1 + double_radius, -blurred_edge_thickness);
auto bottom_left_corner_blit_pos = inner_bounding_rect.bottom_left().translated(-blurred_edge_thickness, -bottom_left_corner_size.height() + 1 + double_radius);
auto bottom_right_corner_blit_pos = inner_bounding_rect.bottom_right().translated(-bottom_right_corner_size.width() + 1 + double_radius, -bottom_right_corner_size.height() + 1 + double_radius);
auto paint_shadow = [&](Gfx::IntRect clip_rect) {
Gfx::PainterStateSaver save { painter };
painter.add_clip_rect(clip_rect);
paint_shadow_infill();
// Corners
painter.blit(top_left_corner_blit_pos, shadow_bitmap, top_left_corner_rect);
painter.blit(top_right_corner_blit_pos, shadow_bitmap, top_right_corner_rect);
painter.blit(bottom_left_corner_blit_pos, shadow_bitmap, bottom_left_corner_rect);
painter.blit(bottom_right_corner_blit_pos, shadow_bitmap, bottom_right_corner_rect);
// Horizontal edges
for (auto x = inner_bounding_rect.left() + (bottom_left_corner_size.width() - double_radius); x <= inner_bounding_rect.right() - (bottom_right_corner_size.width() - double_radius); ++x)
painter.blit({ x, bottom_start }, shadow_bitmap, bottom_edge_rect);
for (auto x = inner_bounding_rect.left() + (top_left_corner_size.width() - double_radius); x <= inner_bounding_rect.right() - (top_right_corner_size.width() - double_radius); ++x)
painter.blit({ x, top_start }, shadow_bitmap, top_edge_rect);
// Vertical edges
for (auto y = inner_bounding_rect.top() + (top_right_corner_size.height() - double_radius); y <= inner_bounding_rect.bottom() - (bottom_right_corner_size.height() - double_radius); ++y)
painter.blit({ right_start, y }, shadow_bitmap, right_edge_rect);
for (auto y = inner_bounding_rect.top() + (top_left_corner_size.height() - double_radius); y <= inner_bounding_rect.bottom() - (bottom_left_corner_size.height() - double_radius); ++y)
painter.blit({ left_start, y }, shadow_bitmap, left_edge_rect);
};
// FIXME: Painter only lets us define a clip-rect which discards drawing outside of it, whereas here we want
// a rect which discards drawing inside it. So, we run the draw operations 4 to 8 times with clip-rects
// covering each side of the content_rect exactly once.
// If we were painting a shadow without a border radius we'd want to clip everything inside the box below.
// If painting a shadow with rounded corners (but still rectangular) we want to clip everything inside
// the box except the corners. This gives us an upper bound of 8 shadow paints now :^(.
// (However, this does not seem to be the costly part in profiling).
//
// ┌───┬────────┬───┐
// │ │xxxxxxxx│ │
// ├───┼────────┼───┤
// │xxx│xxxxxxxx│xxx│
// │xxx│xxxxxxxx│xxx│
// │xxx│xxxxxxxx│xxx│
// │xxx│xxxxxxxx│xxx│
// │xxx│xxxxxxxx│xxx│
// ├───┼────────┼───┤
// │ │ xxxxxx │ │
// └───┴────────┴───┘
// How many times would you like to paint the shadow sir?
// Yes.
// FIXME: Could reduce the shadow paints from 8 to 4 for shadows with all corner radii 50%.
// Everything above content_rect, including sides
paint_shadow({ 0, 0, painter.target()->width(), content_rect.top() });
// Everything below content_rect, including sides
paint_shadow({ 0, content_rect.bottom() + 1, painter.target()->width(), painter.target()->height() });
// Everything directly to the left of content_rect
paint_shadow({ 0, content_rect.top(), content_rect.left(), content_rect.height() });
// Everything directly to the right of content_rect
paint_shadow({ content_rect.right() + 1, content_rect.top(), painter.target()->width(), content_rect.height() });
if (top_left_corner) {
// Inside the top left corner (the part outside the border radius)
auto top_left = top_left_corner.as_rect().translated(content_rect.top_left());
paint_shadow(top_left);
}
if (top_right_corner) {
// Inside the top right corner (the part outside the border radius)
auto top_right = top_right_corner.as_rect().translated(content_rect.top_right().translated(-top_right_corner.horizontal_radius + 1, 0));
paint_shadow(top_right);
}
if (bottom_right_corner) {
// Inside the bottom right corner (the part outside the border radius)
auto bottom_right = bottom_right_corner.as_rect().translated(content_rect.bottom_right().translated(-bottom_right_corner.horizontal_radius + 1, -bottom_right_corner.vertical_radius + 1));
paint_shadow(bottom_right);
}
if (bottom_left_corner) {
// Inside the bottom left corner (the part outside the border radius)
auto bottom_left = bottom_left_corner.as_rect().translated(content_rect.bottom_left().translated(0, -bottom_left_corner.vertical_radius + 1));
paint_shadow(bottom_left);
}
}
}
void paint_text_shadow(PaintContext& context, Layout::LineBoxFragment const& fragment, Vector<ShadowData> const& shadow_layers)
{
if (shadow_layers.is_empty())
return;
auto& painter = context.painter();
// Note: Box-shadow layers are ordered front-to-back, so we paint them in reverse
for (auto& layer : shadow_layers.in_reverse()) {
// Space around the painted text to allow it to blur.
// FIXME: Include spread in this once we use that.
auto margin = layer.blur_radius * 2;
Gfx::IntRect text_rect {
margin, margin,
static_cast<int>(ceilf(fragment.width())),
static_cast<int>(ceilf(fragment.height()))
};
Gfx::IntRect bounding_rect {
0, 0,
text_rect.width() + margin + margin,
text_rect.height() + margin + margin
};
// FIXME: Figure out the maximum bitmap size for all shadows and then allocate it once and reuse it?
auto maybe_shadow_bitmap = Gfx::Bitmap::try_create(Gfx::BitmapFormat::BGRA8888, bounding_rect.size());
if (maybe_shadow_bitmap.is_error()) {
dbgln("Unable to allocate temporary bitmap for box-shadow rendering: {}", maybe_shadow_bitmap.error());
return;
}
auto shadow_bitmap = maybe_shadow_bitmap.release_value();
Gfx::Painter shadow_painter { *shadow_bitmap };
shadow_painter.set_font(context.painter().font());
// FIXME: "Spread" the shadow somehow.
Gfx::FloatPoint baseline_start(text_rect.x(), text_rect.y() + fragment.baseline());
shadow_painter.draw_text_run(baseline_start, Utf8View(fragment.text()), context.painter().font(), layer.color);
// Blur
Gfx::StackBlurFilter filter(*shadow_bitmap);
filter.process_rgba(layer.blur_radius, layer.color);
auto draw_rect = Gfx::enclosing_int_rect(fragment.absolute_rect());
Gfx::IntPoint draw_location {
draw_rect.x() + layer.offset_x - margin,
draw_rect.y() + layer.offset_y - margin
};
painter.blit(draw_location, *shadow_bitmap, bounding_rect);
}
}
}
|