mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 06:17: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:
parent
dc9cb449b1
commit
c93d367d95
16 changed files with 209 additions and 173 deletions
|
@ -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()));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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:
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue