mirror of
https://github.com/RGBCube/serenity
synced 2025-05-21 10:55:07 +00:00
147c3b3d97
Although DistinctNumeric, which is supposed to abstract the underlying type, was used to represent CSSPixels, we have a whole bunch of places in the layout code that assume CSSPixels::value() returns a floating-point type. This assumption makes it difficult to replace the underlying type in CSSPixels with a non-floating type. To make it easier to transition CSSPixels to fixed-point math, one step we can take is to prevent access to the underlying type using value() and instead use explicit conversions with the to_float(), to_double(), and to_int() methods.
131 lines
5.3 KiB
C++
131 lines
5.3 KiB
C++
/*
|
||
* Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
|
||
*
|
||
* SPDX-License-Identifier: BSD-2-Clause
|
||
*/
|
||
|
||
#include <LibGfx/AntiAliasingPainter.h>
|
||
#include <LibGfx/StylePainter.h>
|
||
#include <LibWeb/Layout/ListItemMarkerBox.h>
|
||
#include <LibWeb/Painting/MarkerPaintable.h>
|
||
|
||
namespace Web::Painting {
|
||
|
||
JS::NonnullGCPtr<MarkerPaintable> MarkerPaintable::create(Layout::ListItemMarkerBox const& layout_box)
|
||
{
|
||
return layout_box.heap().allocate_without_realm<MarkerPaintable>(layout_box);
|
||
}
|
||
|
||
MarkerPaintable::MarkerPaintable(Layout::ListItemMarkerBox const& layout_box)
|
||
: PaintableBox(layout_box)
|
||
{
|
||
}
|
||
|
||
Layout::ListItemMarkerBox const& MarkerPaintable::layout_box() const
|
||
{
|
||
return static_cast<Layout::ListItemMarkerBox const&>(layout_node());
|
||
}
|
||
|
||
constexpr float sin_60_deg = 0.866025403f;
|
||
|
||
void MarkerPaintable::paint(PaintContext& context, PaintPhase phase) const
|
||
{
|
||
if (phase == PaintPhase::Overlay)
|
||
PaintableBox::paint(context, phase);
|
||
if (phase != PaintPhase::Foreground)
|
||
return;
|
||
|
||
// FIXME: All this does is round to the nearest whole CSS pixel, but it's goofy.
|
||
CSSPixelRect enclosing = absolute_rect().to_type<double>().to_type<float>().to_rounded<float>().to_type<CSSPixels>();
|
||
auto device_enclosing = context.enclosing_device_rect(enclosing);
|
||
|
||
CSSPixels marker_width = enclosing.height() / 2.0;
|
||
|
||
if (auto const* list_style_image = layout_box().list_style_image()) {
|
||
CSSPixelRect image_rect {
|
||
0, 0,
|
||
list_style_image->natural_width().value_or(marker_width),
|
||
list_style_image->natural_height().value_or(marker_width)
|
||
};
|
||
image_rect.center_within(enclosing);
|
||
|
||
auto device_image_rect = context.enclosing_device_rect(image_rect);
|
||
list_style_image->resolve_for_size(layout_box(), image_rect.size());
|
||
list_style_image->paint(context, device_image_rect, computed_values().image_rendering());
|
||
return;
|
||
}
|
||
|
||
CSSPixelRect marker_rect { 0, 0, marker_width, marker_width };
|
||
marker_rect.center_within(enclosing);
|
||
auto device_marker_rect = context.enclosing_device_rect(marker_rect);
|
||
|
||
float left = device_marker_rect.x().value();
|
||
float right = left + device_marker_rect.width().value();
|
||
float top = device_marker_rect.y().value();
|
||
float bottom = top + device_marker_rect.height().value();
|
||
|
||
auto color = computed_values().color();
|
||
|
||
Gfx::AntiAliasingPainter aa_painter { context.painter() };
|
||
|
||
switch (layout_box().list_style_type()) {
|
||
case CSS::ListStyleType::Square:
|
||
context.painter().fill_rect(device_marker_rect.to_type<int>(), color);
|
||
break;
|
||
case CSS::ListStyleType::Circle:
|
||
aa_painter.draw_ellipse(device_marker_rect.to_type<int>(), color, 1);
|
||
break;
|
||
case CSS::ListStyleType::Disc:
|
||
aa_painter.fill_ellipse(device_marker_rect.to_type<int>(), color);
|
||
break;
|
||
case CSS::ListStyleType::DisclosureClosed: {
|
||
// https://drafts.csswg.org/css-counter-styles-3/#disclosure-closed
|
||
// For the disclosure-open and disclosure-closed counter styles, the marker must be an image or character suitable for indicating the open and closed states of a disclosure widget, such as HTML’s details element.
|
||
// FIXME: If the image is directional, it must respond to the writing mode of the element, similar to the bidi-sensitive images feature of the Images 4 module.
|
||
|
||
// Draw an equilateral triangle pointing right.
|
||
auto path = Gfx::Path();
|
||
path.move_to({ left, top });
|
||
path.line_to({ left + sin_60_deg * (right - left), (top + bottom) / 2 });
|
||
path.line_to({ left, bottom });
|
||
path.close();
|
||
aa_painter.fill_path(path, color);
|
||
break;
|
||
}
|
||
case CSS::ListStyleType::DisclosureOpen: {
|
||
// https://drafts.csswg.org/css-counter-styles-3/#disclosure-open
|
||
// For the disclosure-open and disclosure-closed counter styles, the marker must be an image or character suitable for indicating the open and closed states of a disclosure widget, such as HTML’s details element.
|
||
// FIXME: If the image is directional, it must respond to the writing mode of the element, similar to the bidi-sensitive images feature of the Images 4 module.
|
||
|
||
// Draw an equilateral triangle pointing down.
|
||
auto path = Gfx::Path();
|
||
path.move_to({ left, top });
|
||
path.line_to({ right, top });
|
||
path.line_to({ (left + right) / 2, top + sin_60_deg * (bottom - top) });
|
||
path.close();
|
||
aa_painter.fill_path(path, color);
|
||
break;
|
||
}
|
||
case CSS::ListStyleType::Decimal:
|
||
case CSS::ListStyleType::DecimalLeadingZero:
|
||
case CSS::ListStyleType::LowerAlpha:
|
||
case CSS::ListStyleType::LowerLatin:
|
||
case CSS::ListStyleType::LowerRoman:
|
||
case CSS::ListStyleType::UpperAlpha:
|
||
case CSS::ListStyleType::UpperLatin:
|
||
case CSS::ListStyleType::UpperRoman:
|
||
if (layout_box().text().is_null())
|
||
break;
|
||
// FIXME: This should use proper text layout logic!
|
||
// This does not line up with the text in the <li> element which looks very sad :(
|
||
context.painter().draw_text(device_enclosing.to_type<int>(), layout_box().text(), layout_box().scaled_font(context), Gfx::TextAlignment::Center);
|
||
break;
|
||
case CSS::ListStyleType::None:
|
||
return;
|
||
|
||
default:
|
||
VERIFY_NOT_REACHED();
|
||
}
|
||
}
|
||
|
||
}
|