RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 10:57:35 +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

13
Userland/Libraries/LibWeb/Painting/SVGGeometryPaintable.cpp
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
};

43
Userland/Libraries/LibWeb/Painting/SVGGeometryPaintable.h
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 = {};
};
}

42
Userland/Libraries/LibWeb/Painting/SVGGraphicsPaintable.h
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;
};
}

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

2
Userland/Libraries/LibWeb/Painting/SVGTextPaintable.h
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