1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 10:57:35 +00:00

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

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

View file

@ -6,7 +6,6 @@
*/
#include <LibGfx/AntiAliasingPainter.h>
#include <LibWeb/Layout/ImageBox.h>
#include <LibWeb/Painting/SVGGeometryPaintable.h>
#include <LibWeb/SVG/SVGSVGElement.h>
@ -30,9 +29,9 @@ Layout::SVGGeometryBox const& SVGGeometryPaintable::layout_box() const
Optional<HitTestResult> SVGGeometryPaintable::hit_test(CSSPixelPoint position, HitTestType type) const
{
auto result = SVGGraphicsPaintable::hit_test(position, type);
if (!result.has_value() || !path_data().has_value())
if (!result.has_value() || !computed_path().has_value())
return {};
auto transformed_bounding_box = path_data()->svg_to_css_pixels_transform().map_to_quad(path_data()->computed_path().bounding_box());
auto transformed_bounding_box = computed_transforms().svg_to_css_pixels_transform().map_to_quad(computed_path()->bounding_box());
if (!transformed_bounding_box.contains(position.to_type<float>()))
return {};
return result;
@ -52,7 +51,7 @@ static Gfx::Painter::WindingRule to_gfx_winding_rule(SVG::FillRule fill_rule)
void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
{
if (!is_visible() || !path_data().has_value())
if (!is_visible() || !computed_path().has_value())
return;
SVGGraphicsPaintable::paint(context, phase);
@ -71,8 +70,8 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
auto offset = context.floored_device_point(svg_element_rect.location()).to_type<int>().to_type<float>();
auto maybe_view_box = geometry_element.view_box();
auto paint_transform = path_data()->svg_to_device_pixels_transform(context, context.svg_transform());
Gfx::Path path = path_data()->computed_path().copy_transformed(paint_transform);
auto paint_transform = computed_transforms().svg_to_device_pixels_transform(context);
Gfx::Path path = computed_path()->copy_transformed(paint_transform);
// Fills are computed as though all subpaths are closed (https://svgwg.org/svg2-draft/painting.html#FillProperties)
auto closed_path = [&] {
@ -95,7 +94,7 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
SVG::SVGPaintContext paint_context {
.viewport = svg_viewport,
.path_bounding_box = path_data()->computed_path().bounding_box(),
.path_bounding_box = computed_path()->bounding_box(),
.transform = paint_transform
};

View file

@ -15,41 +15,6 @@ class SVGGeometryPaintable final : public SVGGraphicsPaintable {
JS_CELL(SVGGeometryPaintable, SVGGraphicsPaintable);
public:
class PathData {
public:
PathData(Gfx::Path path, Gfx::AffineTransform svg_to_viewbox_transform, Gfx::AffineTransform svg_transform)
: m_computed_path(move(path))
, m_svg_to_viewbox_transform(svg_to_viewbox_transform)
, m_svg_transform(svg_transform)
{
}
Gfx::Path const& computed_path() const { return m_computed_path; }
Gfx::AffineTransform const& svg_to_viewbox_transform() const { return m_svg_to_viewbox_transform; }
Gfx::AffineTransform const& svg_transform() const { return m_svg_transform; }
Gfx::AffineTransform svg_to_css_pixels_transform(
Optional<Gfx::AffineTransform const&> additional_svg_transform = {}) const
{
return Gfx::AffineTransform {}.multiply(svg_to_viewbox_transform()).multiply(additional_svg_transform.value_or(Gfx::AffineTransform {})).multiply(svg_transform());
}
Gfx::AffineTransform svg_to_device_pixels_transform(
PaintContext const& context,
Gfx::AffineTransform const& additional_svg_transform) const
{
auto css_scale = context.device_pixels_per_css_pixel();
return Gfx::AffineTransform {}.scale({ css_scale, css_scale }).multiply(svg_to_css_pixels_transform(additional_svg_transform));
}
private:
Gfx::Path m_computed_path;
Gfx::AffineTransform m_svg_to_viewbox_transform;
Gfx::AffineTransform m_svg_transform;
};
static JS::NonnullGCPtr<SVGGeometryPaintable> create(Layout::SVGGeometryBox const&);
virtual Optional<HitTestResult> hit_test(CSSPixelPoint, HitTestType) const override;
@ -58,17 +23,17 @@ public:
Layout::SVGGeometryBox const& layout_box() const;
void set_path_data(PathData path_data)
void set_computed_path(Gfx::Path path)
{
m_path_data = move(path_data);
m_computed_path = move(path);
}
Optional<PathData> const& path_data() const { return m_path_data; }
Optional<Gfx::Path> const& computed_path() const { return m_computed_path; }
protected:
SVGGeometryPaintable(Layout::SVGGeometryBox const&);
Optional<PathData> m_path_data = {};
Optional<Gfx::Path> m_computed_path = {};
};
}

View file

@ -15,6 +15,36 @@ class SVGGraphicsPaintable : public SVGPaintable {
JS_CELL(SVGGraphicsPaintable, SVGPaintable);
public:
class ComputedTransforms {
public:
ComputedTransforms(Gfx::AffineTransform svg_to_viewbox_transform, Gfx::AffineTransform svg_transform)
: m_svg_to_viewbox_transform(svg_to_viewbox_transform)
, m_svg_transform(svg_transform)
{
}
ComputedTransforms() = default;
Gfx::AffineTransform const& svg_to_viewbox_transform() const { return m_svg_to_viewbox_transform; }
Gfx::AffineTransform const& svg_transform() const { return m_svg_transform; }
Gfx::AffineTransform svg_to_css_pixels_transform(
Optional<Gfx::AffineTransform const&> additional_svg_transform = {}) const
{
return Gfx::AffineTransform {}.multiply(svg_to_viewbox_transform()).multiply(additional_svg_transform.value_or(Gfx::AffineTransform {})).multiply(svg_transform());
}
Gfx::AffineTransform svg_to_device_pixels_transform(PaintContext const& context) const
{
auto css_scale = context.device_pixels_per_css_pixel();
return Gfx::AffineTransform {}.scale({ css_scale, css_scale }).multiply(svg_to_css_pixels_transform(context.svg_transform()));
}
private:
Gfx::AffineTransform m_svg_to_viewbox_transform {};
Gfx::AffineTransform m_svg_transform {};
};
static JS::NonnullGCPtr<SVGGraphicsPaintable> create(Layout::SVGGraphicsBox const&);
Layout::SVGGraphicsBox const& layout_box() const;
@ -25,8 +55,20 @@ public:
virtual Optional<Gfx::Bitmap::MaskKind> get_mask_type() const override;
virtual RefPtr<Gfx::Bitmap> calculate_mask(PaintContext&, CSSPixelRect const& masking_area) const override;
void set_computed_transforms(ComputedTransforms computed_transforms)
{
m_computed_transforms = computed_transforms;
}
ComputedTransforms const& computed_transforms() const
{
return m_computed_transforms;
}
protected:
SVGGraphicsPaintable(Layout::SVGGraphicsBox const&);
ComputedTransforms m_computed_transforms;
};
}

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);
}
}

View file

@ -17,8 +17,6 @@ class SVGTextPaintable final : public SVGGraphicsPaintable {
public:
static JS::NonnullGCPtr<SVGTextPaintable> create(Layout::SVGTextBox const&);
virtual Optional<HitTestResult> hit_test(CSSPixelPoint, HitTestType) const override;
virtual void paint(PaintContext&, PaintPhase) const override;
Layout::SVGTextBox const& layout_box() const