mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 01:07:36 +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
|
@ -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
|
||||
};
|
||||
|
||||
|
|
|
@ -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 = {};
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue