RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 16:17:45 +00:00
Code Issues Activity Actions

LibWeb: Layout SVG <text> elements during layout (not while painting)

Browse source 
Previously, all SVG <text> elements were zero-sized boxes, that were
only actually positioned and sized during painting. This led to a number
of problems, the most visible of which being that text could not be
scaled based on the viewBox.

Which this patch, <text> elements get a correctly sized layout box,
that can be hit-tested and respects the SVG viewBox.

To share code with SVGGeometryElement's the PathData (from the prior
commit) has been split into a computed path and computed transforms.
The computed path is specific to geometry elements, but the computed
transforms are shared between all SVG graphics elements.
This commit is contained in:
MacDue 2023-10-29 19:11:46 +00:00 • committed by Alexander Kalenik
parent dc9cb449b1
commit c93d367d95
16 changed files with 209 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

61
Userland/Libraries/LibWeb/Painting/SVGTextPaintable.cpp
View file

@ -19,13 +19,6 @@ SVGTextPaintable::SVGTextPaintable(Layout::SVGTextBox const& layout_box)
{
}
Optional<HitTestResult> SVGTextPaintable::hit_test(CSSPixelPoint position, HitTestType type) const
{
(void)position;
(void)type;
return {};
}
void SVGTextPaintable::paint(PaintContext& context, PaintPhase phase) const
{
if (!is_visible())
@ -45,57 +38,13 @@ void SVGTextPaintable::paint(PaintContext& context, PaintPhase phase) const
return;
auto& painter = context.painter();
auto& text_element = layout_box().dom_node();
auto const* svg_element = text_element.shadow_including_first_ancestor_of_type<SVG::SVGSVGElement>();
auto svg_element_rect = svg_element->paintable_box()->absolute_rect();
RecordingPainterStateSaver save_painter { painter };
auto svg_context_offset = context.floored_device_point(svg_element_rect.location()).to_type<int>();
painter.translate(svg_context_offset);
auto const& dom_node = layout_box().dom_node();
auto paint_transform = computed_transforms().svg_to_device_pixels_transform(context);
auto& scaled_font = layout_box().scaled_font(paint_transform.x_scale());
auto text_rect = context.enclosing_device_rect(absolute_rect()).to_type<int>();
auto text_contents = dom_node.text_contents();
auto child_text_content = dom_node.child_text_content();
auto maybe_transform = layout_box().layout_transform();
if (!maybe_transform.has_value())
return;
auto transform = Gfx::AffineTransform(context.svg_transform()).multiply(*maybe_transform);
// FIXME: Support arbitrary path transforms for fonts.
// FIMXE: This assumes transform->x_scale() == transform->y_scale().
auto& scaled_font = layout_node().scaled_font(static_cast<float>(context.device_pixels_per_css_pixel()) * transform.x_scale());
Utf8View text_content { child_text_content };
auto text_offset = context.floored_device_point(dom_node.get_offset().transformed(transform).to_type<CSSPixels>());
// FIXME: Once SVGFormattingContext does text layout this logic should move there.
// https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties
switch (text_element.text_anchor().value_or(SVG::TextAnchor::Start)) {
case SVG::TextAnchor::Start:
// The rendered characters are aligned such that the start of the resulting rendered text is at the initial
// current text position.
break;
case SVG::TextAnchor::Middle: {
// The rendered characters are shifted such that the geometric middle of the resulting rendered text
// (determined from the initial and final current text position before applying the text-anchor property)
// is at the initial current text position.
text_offset.translate_by(-scaled_font.width(text_content) / 2, 0);
break;
}
case SVG::TextAnchor::End: {
// The rendered characters are shifted such that the end of the resulting rendered text (final current text
// position before applying the text-anchor property) is at the initial current text position.
text_offset.translate_by(-scaled_font.width(text_content), 0);
break;
}
default:
VERIFY_NOT_REACHED();
}
painter.draw_text_run(text_offset.to_type<int>(), text_content, scaled_font, layout_node().computed_values().fill()->as_color(), context.enclosing_device_rect(svg_element_rect).to_type<int>());
painter.draw_text_run(text_rect.bottom_left(), Utf8View { text_contents }, scaled_font, layout_node().computed_values().fill()->as_color(), text_rect);
}
}