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

10
Userland/Libraries/LibWeb/Layout/LayoutState.cpp
View file

@ -10,6 +10,7 @@
#include <LibWeb/Layout/LayoutState.h>
#include <LibWeb/Layout/TextNode.h>
#include <LibWeb/Layout/Viewport.h>
#include <LibWeb/Painting/SVGGeometryPaintable.h>
namespace Web::Layout {
@ -266,9 +267,14 @@ void LayoutState::commit(Box& root)
paintables_with_lines.append(paintable_with_lines);
}
if (used_values.svg_path_data().has_value() && is<Painting::SVGGeometryPaintable>(paintable_box)) {
if (used_values.computed_svg_transforms().has_value() && is<Painting::SVGGraphicsPaintable>(paintable_box)) {
auto& svg_graphics_paintable = static_cast<Painting::SVGGraphicsPaintable&>(paintable_box);
svg_graphics_paintable.set_computed_transforms(*used_values.computed_svg_transforms());
}
if (used_values.computed_svg_path().has_value() && is<Painting::SVGGeometryPaintable>(paintable_box)) {
auto& svg_geometry_paintable = static_cast<Painting::SVGGeometryPaintable&>(paintable_box);
svg_geometry_paintable.set_path_data(move(*used_values.svg_path_data()));
svg_geometry_paintable.set_computed_path(move(*used_values.computed_svg_path()));
}
}
}

12
Userland/Libraries/LibWeb/Layout/LayoutState.h
View file

@ -11,7 +11,7 @@
#include <LibWeb/Layout/Box.h>
#include <LibWeb/Layout/LineBox.h>
#include <LibWeb/Painting/PaintableBox.h>
#include <LibWeb/Painting/SVGGeometryPaintable.h>
#include <LibWeb/Painting/SVGGraphicsPaintable.h>
namespace Web::Layout {
@ -124,8 +124,11 @@ struct LayoutState {
void set_table_cell_coordinates(Painting::PaintableBox::TableCellCoordinates const& table_cell_coordinates) { m_table_cell_coordinates = table_cell_coordinates; }
auto const& table_cell_coordinates() const { return m_table_cell_coordinates; }
void set_svg_path_data(Painting::SVGGeometryPaintable::PathData const& svg_path_data) { m_svg_path_data = svg_path_data; }
auto& svg_path_data() const { return m_svg_path_data; }
void set_computed_svg_path(Gfx::Path const& svg_path) { m_computed_svg_path = svg_path; }
auto& computed_svg_path() { return m_computed_svg_path; }
void set_computed_svg_transforms(Painting::SVGGraphicsPaintable::ComputedTransforms const& computed_transforms) { m_computed_svg_transforms = computed_transforms; }
auto const& computed_svg_transforms() const { return m_computed_svg_transforms; }
private:
AvailableSize available_width_inside() const;
@ -151,7 +154,8 @@ struct LayoutState {
Optional<Painting::PaintableBox::BordersDataWithElementKind> m_override_borders_data;
Optional<Painting::PaintableBox::TableCellCoordinates> m_table_cell_coordinates;
Optional<Painting::SVGGeometryPaintable::PathData> m_svg_path_data;
Optional<Gfx::Path> m_computed_svg_path;
Optional<Painting::SVGGraphicsPaintable::ComputedTransforms> m_computed_svg_transforms;
};
// Commits the used values produced by layout and builds a paintable tree.

109
Userland/Libraries/LibWeb/Layout/SVGFormattingContext.cpp
View file

@ -135,8 +135,6 @@ static ViewBoxTransform scale_and_align_viewbox_content(SVG::PreserveAspectRatio
static bool should_ensure_creation_of_paintable(Node const& node)
{
if (is<SVGTextBox>(node))
return true;
if (is<SVGGraphicsBox>(node))
return true;
if (node.dom_node()) {
@ -166,46 +164,87 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
return IterationDecision::Continue;
});
auto compute_viewbox_transform = [&](auto const& viewbox) -> Gfx::AffineTransform {
if (!viewbox.has_value())
return {};
// FIXME: This should allow just one of width or height to be specified.
// E.g. We should be able to layout <svg width="100%"> where height is unspecified/auto.
if (!svg_box_state.has_definite_width() || !svg_box_state.has_definite_height()) {
dbgln_if(LIBWEB_CSS_DEBUG, "FIXME: Attempting to layout indefinitely sized SVG with a viewbox -- this likely won't work!");
}
auto scale_width = svg_box_state.has_definite_width() ? svg_box_state.content_width() / viewbox->width : 1;
auto scale_height = svg_box_state.has_definite_height() ? svg_box_state.content_height() / viewbox->height : 1;
// The initial value for preserveAspectRatio is xMidYMid meet.
auto preserve_aspect_ratio = svg_svg_element.preserve_aspect_ratio().value_or(SVG::PreserveAspectRatio {});
auto viewbox_offset_and_scale = scale_and_align_viewbox_content(preserve_aspect_ratio, *viewbox, { scale_width, scale_height }, svg_box_state);
CSSPixelPoint offset = viewbox_offset_and_scale.offset;
return Gfx::AffineTransform {}.translate(offset.to_type<float>()).scale(viewbox_offset_and_scale.scale_factor, viewbox_offset_and_scale.scale_factor).translate({ -viewbox->min_x, -viewbox->min_y });
};
box.for_each_in_subtree([&](Node const& descendant) {
if (is<SVGGeometryBox>(descendant)) {
auto const& geometry_box = static_cast<SVGGeometryBox const&>(descendant);
auto& geometry_box_state = m_state.get_mutable(geometry_box);
auto& dom_node = const_cast<SVGGeometryBox&>(geometry_box).dom_node();
if (is<SVGGraphicsBox>(descendant)) {
auto const& graphics_box = static_cast<SVGGraphicsBox const&>(descendant);
auto& graphics_box_state = m_state.get_mutable(graphics_box);
auto& dom_node = const_cast<SVGGraphicsBox&>(graphics_box).dom_node();
auto& path = dom_node.get_path();
auto svg_transform = dom_node.get_transform();
Gfx::AffineTransform viewbox_transform;
Gfx::AffineTransform viewbox_transform = compute_viewbox_transform(dom_node.view_box());
graphics_box_state.set_computed_svg_transforms(Painting::SVGGraphicsPaintable::ComputedTransforms(viewbox_transform, svg_transform));
auto to_css_pixels_transform = Gfx::AffineTransform {}.multiply(viewbox_transform).multiply(svg_transform);
double viewbox_scale = 1;
auto maybe_view_box = dom_node.view_box();
if (maybe_view_box.has_value()) {
// FIXME: This should allow just one of width or height to be specified.
// E.g. We should be able to layout <svg width="100%"> where height is unspecified/auto.
if (!svg_box_state.has_definite_width() || !svg_box_state.has_definite_height()) {
dbgln_if(LIBWEB_CSS_DEBUG, "FIXME: Attempting to layout indefinitely sized SVG with a viewbox -- this likely won't work!");
if (is<SVGGeometryBox>(descendant)) {
auto path = static_cast<SVG::SVGGeometryElement&>(dom_node).get_path();
auto path_bounding_box = to_css_pixels_transform.map(path.bounding_box()).to_type<CSSPixels>();
// Stroke increases the path's size by stroke_width/2 per side.
CSSPixels stroke_width = CSSPixels::nearest_value_for(graphics_box.dom_node().visible_stroke_width() * viewbox_transform.x_scale());
path_bounding_box.inflate(stroke_width, stroke_width);
graphics_box_state.set_content_offset(path_bounding_box.top_left());
graphics_box_state.set_content_width(path_bounding_box.width());
graphics_box_state.set_content_height(path_bounding_box.height());
graphics_box_state.set_computed_svg_path(move(path));
} else if (is<SVGTextBox>(descendant)) {
auto& text_element = static_cast<SVG::SVGTextPositioningElement&>(dom_node);
// FIXME: Support arbitrary path transforms for fonts.
// FIMXE: This assumes transform->x_scale() == transform->y_scale().
auto& scaled_font = graphics_box.scaled_font(to_css_pixels_transform.x_scale());
auto text_contents = text_element.text_contents();
auto text_offset = text_element.get_offset().transformed(to_css_pixels_transform).to_type<CSSPixels>();
auto text_width = CSSPixels::nearest_value_for(scaled_font.width(Utf8View { text_contents }));
// 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(-text_width / 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(-text_width, 0);
break;
}
default:
VERIFY_NOT_REACHED();
}
auto view_box = maybe_view_box.value();
auto scale_width = svg_box_state.has_definite_width() ? svg_box_state.content_width() / view_box.width : 1;
auto scale_height = svg_box_state.has_definite_height() ? svg_box_state.content_height() / view_box.height : 1;
// The initial value for preserveAspectRatio is xMidYMid meet.
auto preserve_aspect_ratio = svg_svg_element.preserve_aspect_ratio().value_or(SVG::PreserveAspectRatio {});
auto viewbox_offset_and_scale = scale_and_align_viewbox_content(preserve_aspect_ratio, view_box, { scale_width, scale_height }, svg_box_state);
viewbox_transform = Gfx::AffineTransform {}.translate(viewbox_offset_and_scale.offset.to_type<float>()).scale(viewbox_offset_and_scale.scale_factor, viewbox_offset_and_scale.scale_factor).translate({ -view_box.min_x, -view_box.min_y });
viewbox_scale = viewbox_offset_and_scale.scale_factor;
auto text_height = CSSPixels::nearest_value_for(scaled_font.pixel_size());
graphics_box_state.set_content_offset(text_offset.translated(0, -text_height));
graphics_box_state.set_content_width(text_width);
graphics_box_state.set_content_height(text_height);
}
// Stroke increases the path's size by stroke_width/2 per side.
auto path_transform = Gfx::AffineTransform {}.multiply(viewbox_transform).multiply(svg_transform);
auto path_bounding_box = path_transform.map(path.bounding_box()).to_type<CSSPixels>();
CSSPixels stroke_width = CSSPixels::nearest_value_for(static_cast<double>(geometry_box.dom_node().visible_stroke_width()) * viewbox_scale);
path_bounding_box.inflate(stroke_width, stroke_width);
geometry_box_state.set_content_offset(path_bounding_box.top_left());
geometry_box_state.set_content_width(path_bounding_box.width());
geometry_box_state.set_content_height(path_bounding_box.height());
geometry_box_state.set_svg_path_data(Painting::SVGGeometryPaintable::PathData(path, viewbox_transform, svg_transform));
} else if (is<SVGSVGBox>(descendant)) {
SVGFormattingContext nested_context(m_state, static_cast<SVGSVGBox const&>(descendant), this);
nested_context.run(static_cast<SVGSVGBox const&>(descendant), layout_mode, available_space);

21
Userland/Libraries/LibWeb/Layout/SVGTextBox.cpp
View file

@ -15,27 +15,6 @@ SVGTextBox::SVGTextBox(DOM::Document& document, SVG::SVGTextPositioningElement&
{
}
CSSPixelPoint SVGTextBox::viewbox_origin() const
{
auto* svg_box = dom_node().first_ancestor_of_type<SVG::SVGSVGElement>();
if (!svg_box || !svg_box->view_box().has_value())
return { 0, 0 };
return { svg_box->view_box().value().min_x, svg_box->view_box().value().min_y };
}
Optional<Gfx::AffineTransform> SVGTextBox::layout_transform() const
{
// FIXME: Since text layout boxes are currently 0x0 it is not possible handle viewBox scaling here.
auto& geometry_element = dom_node();
auto transform = geometry_element.get_transform();
auto* svg_box = geometry_element.first_ancestor_of_type<SVG::SVGSVGElement>();
auto origin = viewbox_origin().to_type<float>();
Gfx::FloatPoint paint_offset = {};
if (svg_box && svg_box->view_box().has_value())
paint_offset = svg_box->paintable_box()->absolute_rect().location().to_type<float>();
return Gfx::AffineTransform {}.translate(paint_offset).translate(-origin).multiply(transform);
}
JS::GCPtr<Painting::Paintable> SVGTextBox::create_paintable() const
{
return Painting::SVGTextPaintable::create(*this);

2
Userland/Libraries/LibWeb/Layout/SVGTextBox.h
View file

@ -22,8 +22,6 @@ public:
SVG::SVGTextPositioningElement& dom_node() { return static_cast<SVG::SVGTextPositioningElement&>(SVGGraphicsBox::dom_node()); }
SVG::SVGTextPositioningElement const& dom_node() const { return static_cast<SVG::SVGTextPositioningElement const&>(SVGGraphicsBox::dom_node()); }
Optional<Gfx::AffineTransform> layout_transform() const;
virtual JS::GCPtr<Painting::Paintable> create_paintable() const override;
private: