LibWeb: Update SVG get_path() API to take a viewport size

This will allow resolving paths that use sizes that are relative to the
viewport. This necessarily removes the on element caching, which has
been redundant for a while as computed paths are stored on the
paintable.
This commit is contained in:
MacDue 2024-03-03 20:15:06 +00:00 committed by Andreas Kling
parent 1fbf1073ab
commit b9afea40e6
Notes: sideshowbarker 2024-07-19 01:59:31 +09:00
16 changed files with 55 additions and 126 deletions

View file

@ -262,13 +262,6 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
return IterationDecision::Continue; return IterationDecision::Continue;
}); });
for_each_in_subtree(box, [&](Node const& descendant) {
if (is<SVG::SVGViewport>(descendant.dom_node())) {
// Layout for a nested SVG viewport.
// https://svgwg.org/svg2-draft/coords.html#EstablishingANewSVGViewport.
SVGFormattingContext nested_context(m_state, static_cast<Box const&>(descendant), this, viewbox_transform);
auto& nested_viewport_state = m_state.get_mutable(static_cast<Box const&>(descendant));
auto viewport_width = [&] { auto viewport_width = [&] {
if (viewbox.has_value()) if (viewbox.has_value())
return CSSPixels::nearest_value_for(viewbox->width); return CSSPixels::nearest_value_for(viewbox->width);
@ -287,6 +280,12 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
return CSSPixels {}; return CSSPixels {};
}(); }();
for_each_in_subtree(box, [&](Node const& descendant) {
if (is<SVG::SVGViewport>(descendant.dom_node())) {
// Layout for a nested SVG viewport.
// https://svgwg.org/svg2-draft/coords.html#EstablishingANewSVGViewport.
SVGFormattingContext nested_context(m_state, static_cast<Box const&>(descendant), this, viewbox_transform);
auto& nested_viewport_state = m_state.get_mutable(static_cast<Box const&>(descendant));
auto resolve_dimension = [](auto& node, auto size, auto reference_value) { auto resolve_dimension = [](auto& node, auto size, auto reference_value) {
// The value auto for width and height on the svg element is treated as 100%. // The value auto for width and height on the svg element is treated as 100%.
// https://svgwg.org/svg2-draft/geometry.html#Sizing // https://svgwg.org/svg2-draft/geometry.html#Sizing
@ -318,7 +317,7 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
Gfx::Path path; Gfx::Path path;
if (is<SVGGeometryBox>(descendant)) { if (is<SVGGeometryBox>(descendant)) {
path = static_cast<SVG::SVGGeometryElement&>(dom_node).get_path(); path = static_cast<SVG::SVGGeometryElement&>(dom_node).get_path({ viewport_width, viewport_height });
} else if (is<SVGTextBox>(descendant)) { } else if (is<SVGTextBox>(descendant)) {
auto& text_element = static_cast<SVG::SVGTextPositioningElement&>(dom_node); auto& text_element = static_cast<SVG::SVGTextPositioningElement&>(dom_node);
@ -363,7 +362,7 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
auto text_contents = text_path_element.text_contents(); auto text_contents = text_path_element.text_contents();
Utf8View text_utf8 { text_contents }; Utf8View text_utf8 { text_contents };
auto shape_path = const_cast<SVG::SVGGeometryElement&>(*path_or_shape).get_path(); auto shape_path = const_cast<SVG::SVGGeometryElement&>(*path_or_shape).get_path({ viewport_width, viewport_height });
path = shape_path.place_text_along(text_utf8, font); path = shape_path.place_text_along(text_utf8, font);
} }

View file

@ -40,11 +40,8 @@ void SVGCircleElement::attribute_changed(FlyString const& name, Optional<String>
} }
} }
Gfx::Path& SVGCircleElement::get_path() Gfx::Path SVGCircleElement::get_path(CSSPixelSize viewport_size)
{ {
if (m_path.has_value())
return m_path.value();
float cx = m_center_x.value_or(0); float cx = m_center_x.value_or(0);
float cy = m_center_y.value_or(0); float cy = m_center_y.value_or(0);
float r = m_radius.value_or(0); float r = m_radius.value_or(0);
@ -52,10 +49,8 @@ Gfx::Path& SVGCircleElement::get_path()
Gfx::Path path; Gfx::Path path;
// A zero radius disables rendering. // A zero radius disables rendering.
if (r == 0) { if (r == 0)
m_path = move(path); return {};
return m_path.value();
}
bool large_arc = false; bool large_arc = false;
bool sweep = true; bool sweep = true;
@ -75,8 +70,7 @@ Gfx::Path& SVGCircleElement::get_path()
// 5. arc with a segment-completing close path operation. // 5. arc with a segment-completing close path operation.
path.arc_to({ cx + r, cy }, r, large_arc, sweep); path.arc_to({ cx + r, cy }, r, large_arc, sweep);
m_path = move(path); return path;
return m_path.value();
} }
// https://www.w3.org/TR/SVG11/shapes.html#CircleElementCXAttribute // https://www.w3.org/TR/SVG11/shapes.html#CircleElementCXAttribute

View file

@ -20,7 +20,7 @@ public:
virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override; virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override;
virtual Gfx::Path& get_path() override; virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
JS::NonnullGCPtr<SVGAnimatedLength> cx() const; JS::NonnullGCPtr<SVGAnimatedLength> cx() const;
JS::NonnullGCPtr<SVGAnimatedLength> cy() const; JS::NonnullGCPtr<SVGAnimatedLength> cy() const;
@ -31,8 +31,6 @@ private:
virtual void initialize(JS::Realm&) override; virtual void initialize(JS::Realm&) override;
Optional<Gfx::Path> m_path;
Optional<float> m_center_x; Optional<float> m_center_x;
Optional<float> m_center_y; Optional<float> m_center_y;
Optional<float> m_radius; Optional<float> m_radius;

View file

@ -30,24 +30,17 @@ void SVGEllipseElement::attribute_changed(FlyString const& name, Optional<String
if (name == SVG::AttributeNames::cx) { if (name == SVG::AttributeNames::cx) {
m_center_x = AttributeParser::parse_coordinate(value.value_or(String {})); m_center_x = AttributeParser::parse_coordinate(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::cy) { } else if (name == SVG::AttributeNames::cy) {
m_center_y = AttributeParser::parse_coordinate(value.value_or(String {})); m_center_y = AttributeParser::parse_coordinate(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::rx) { } else if (name == SVG::AttributeNames::rx) {
m_radius_x = AttributeParser::parse_positive_length(value.value_or(String {})); m_radius_x = AttributeParser::parse_positive_length(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::ry) { } else if (name == SVG::AttributeNames::ry) {
m_radius_y = AttributeParser::parse_positive_length(value.value_or(String {})); m_radius_y = AttributeParser::parse_positive_length(value.value_or(String {}));
m_path.clear();
} }
} }
Gfx::Path& SVGEllipseElement::get_path() Gfx::Path SVGEllipseElement::get_path(CSSPixelSize)
{ {
if (m_path.has_value())
return m_path.value();
float rx = m_radius_x.value_or(0); float rx = m_radius_x.value_or(0);
float ry = m_radius_y.value_or(0); float ry = m_radius_y.value_or(0);
float cx = m_center_x.value_or(0); float cx = m_center_x.value_or(0);
@ -55,10 +48,8 @@ Gfx::Path& SVGEllipseElement::get_path()
Gfx::Path path; Gfx::Path path;
// A computed value of zero for either dimension, or a computed value of auto for both dimensions, disables rendering of the element. // A computed value of zero for either dimension, or a computed value of auto for both dimensions, disables rendering of the element.
if (rx == 0 || ry == 0) { if (rx == 0 || ry == 0)
m_path = move(path); return path;
return m_path.value();
}
Gfx::FloatSize radii = { rx, ry }; Gfx::FloatSize radii = { rx, ry };
double x_axis_rotation = 0; double x_axis_rotation = 0;
@ -80,8 +71,7 @@ Gfx::Path& SVGEllipseElement::get_path()
// 5. arc with a segment-completing close path operation. // 5. arc with a segment-completing close path operation.
path.elliptical_arc_to({ cx + rx, cy }, radii, x_axis_rotation, large_arc, sweep); path.elliptical_arc_to({ cx + rx, cy }, radii, x_axis_rotation, large_arc, sweep);
m_path = move(path); return path;
return m_path.value();
} }
// https://www.w3.org/TR/SVG11/shapes.html#EllipseElementCXAttribute // https://www.w3.org/TR/SVG11/shapes.html#EllipseElementCXAttribute

View file

@ -20,7 +20,7 @@ public:
virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override; virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override;
virtual Gfx::Path& get_path() override; virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
JS::NonnullGCPtr<SVGAnimatedLength> cx() const; JS::NonnullGCPtr<SVGAnimatedLength> cx() const;
JS::NonnullGCPtr<SVGAnimatedLength> cy() const; JS::NonnullGCPtr<SVGAnimatedLength> cy() const;
@ -32,8 +32,6 @@ private:
virtual void initialize(JS::Realm&) override; virtual void initialize(JS::Realm&) override;
Optional<Gfx::Path> m_path;
Optional<float> m_center_x; Optional<float> m_center_x;
Optional<float> m_center_y; Optional<float> m_center_y;
Optional<float> m_radius_x; Optional<float> m_radius_x;

View file

@ -18,7 +18,7 @@ class SVGGeometryElement : public SVGGraphicsElement {
public: public:
virtual JS::GCPtr<Layout::Node> create_layout_node(NonnullRefPtr<CSS::StyleProperties>) override; virtual JS::GCPtr<Layout::Node> create_layout_node(NonnullRefPtr<CSS::StyleProperties>) override;
virtual Gfx::Path& get_path() = 0; virtual Gfx::Path get_path(CSSPixelSize viewport_size) = 0;
float get_total_length(); float get_total_length();
JS::NonnullGCPtr<Geometry::DOMPoint> get_point_at_length(float distance); JS::NonnullGCPtr<Geometry::DOMPoint> get_point_at_length(float distance);

View file

@ -30,24 +30,17 @@ void SVGLineElement::attribute_changed(FlyString const& name, Optional<String> c
if (name == SVG::AttributeNames::x1) { if (name == SVG::AttributeNames::x1) {
m_x1 = AttributeParser::parse_coordinate(value.value_or(String {})); m_x1 = AttributeParser::parse_coordinate(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::y1) { } else if (name == SVG::AttributeNames::y1) {
m_y1 = AttributeParser::parse_coordinate(value.value_or(String {})); m_y1 = AttributeParser::parse_coordinate(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::x2) { } else if (name == SVG::AttributeNames::x2) {
m_x2 = AttributeParser::parse_coordinate(value.value_or(String {})); m_x2 = AttributeParser::parse_coordinate(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::y2) { } else if (name == SVG::AttributeNames::y2) {
m_y2 = AttributeParser::parse_coordinate(value.value_or(String {})); m_y2 = AttributeParser::parse_coordinate(value.value_or(String {}));
m_path.clear();
} }
} }
Gfx::Path& SVGLineElement::get_path() Gfx::Path SVGLineElement::get_path(CSSPixelSize)
{ {
if (m_path.has_value())
return m_path.value();
Gfx::Path path; Gfx::Path path;
float x1 = m_x1.value_or(0); float x1 = m_x1.value_or(0);
float y1 = m_y1.value_or(0); float y1 = m_y1.value_or(0);
@ -60,8 +53,7 @@ Gfx::Path& SVGLineElement::get_path()
// 2. perform an absolute lineto operation to absolute location (x2,y2) // 2. perform an absolute lineto operation to absolute location (x2,y2)
path.line_to({ x2, y2 }); path.line_to({ x2, y2 });
m_path = move(path); return path;
return m_path.value();
} }
// https://www.w3.org/TR/SVG11/shapes.html#LineElementX1Attribute // https://www.w3.org/TR/SVG11/shapes.html#LineElementX1Attribute

View file

@ -20,7 +20,7 @@ public:
virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override; virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override;
virtual Gfx::Path& get_path() override; virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
JS::NonnullGCPtr<SVGAnimatedLength> x1() const; JS::NonnullGCPtr<SVGAnimatedLength> x1() const;
JS::NonnullGCPtr<SVGAnimatedLength> y1() const; JS::NonnullGCPtr<SVGAnimatedLength> y1() const;
@ -32,8 +32,6 @@ private:
virtual void initialize(JS::Realm&) override; virtual void initialize(JS::Realm&) override;
Optional<Gfx::Path> m_path;
Optional<float> m_x1; Optional<float> m_x1;
Optional<float> m_y1; Optional<float> m_y1;
Optional<float> m_x2; Optional<float> m_x2;

View file

@ -99,10 +99,8 @@ void SVGPathElement::attribute_changed(FlyString const& name, Optional<String> c
{ {
SVGGeometryElement::attribute_changed(name, value); SVGGeometryElement::attribute_changed(name, value);
if (name == "d") { if (name == "d")
m_instructions = AttributeParser::parse_path_data(value.value_or(String {})); m_instructions = AttributeParser::parse_path_data(value.value_or(String {}));
m_path.clear();
}
} }
Gfx::Path path_from_path_instructions(ReadonlySpan<PathInstruction> instructions) Gfx::Path path_from_path_instructions(ReadonlySpan<PathInstruction> instructions)
@ -273,12 +271,9 @@ Gfx::Path path_from_path_instructions(ReadonlySpan<PathInstruction> instructions
return path; return path;
} }
Gfx::Path& SVGPathElement::get_path() Gfx::Path SVGPathElement::get_path(CSSPixelSize)
{ {
if (!m_path.has_value()) { return path_from_path_instructions(m_instructions);
m_path = path_from_path_instructions(m_instructions);
}
return m_path.value();
} }
} }

View file

@ -22,7 +22,7 @@ public:
virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override; virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override;
virtual Gfx::Path& get_path() override; virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
private: private:
SVGPathElement(DOM::Document&, DOM::QualifiedName); SVGPathElement(DOM::Document&, DOM::QualifiedName);
@ -30,7 +30,6 @@ private:
virtual void initialize(JS::Realm&) override; virtual void initialize(JS::Realm&) override;
Vector<PathInstruction> m_instructions; Vector<PathInstruction> m_instructions;
Optional<Gfx::Path> m_path;
}; };
Gfx::Path path_from_path_instructions(ReadonlySpan<PathInstruction>); Gfx::Path path_from_path_instructions(ReadonlySpan<PathInstruction>);

View file

@ -28,23 +28,16 @@ void SVGPolygonElement::attribute_changed(FlyString const& name, Optional<String
{ {
SVGGeometryElement::attribute_changed(name, value); SVGGeometryElement::attribute_changed(name, value);
if (name == SVG::AttributeNames::points) { if (name == SVG::AttributeNames::points)
m_points = AttributeParser::parse_points(value.value_or(String {})); m_points = AttributeParser::parse_points(value.value_or(String {}));
m_path.clear();
}
} }
Gfx::Path& SVGPolygonElement::get_path() Gfx::Path SVGPolygonElement::get_path(CSSPixelSize)
{ {
if (m_path.has_value())
return m_path.value();
Gfx::Path path; Gfx::Path path;
if (m_points.is_empty()) { if (m_points.is_empty())
m_path = move(path); return path;
return m_path.value();
}
// 1. perform an absolute moveto operation to the first coordinate pair in the list of points // 1. perform an absolute moveto operation to the first coordinate pair in the list of points
path.move_to(m_points.first()); path.move_to(m_points.first());
@ -56,8 +49,7 @@ Gfx::Path& SVGPolygonElement::get_path()
// 3. perform a closepath command // 3. perform a closepath command
path.close(); path.close();
m_path = move(path); return path;
return m_path.value();
} }
} }

View file

@ -19,15 +19,13 @@ public:
virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override; virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override;
virtual Gfx::Path& get_path() override; virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
private: private:
SVGPolygonElement(DOM::Document&, DOM::QualifiedName); SVGPolygonElement(DOM::Document&, DOM::QualifiedName);
virtual void initialize(JS::Realm&) override; virtual void initialize(JS::Realm&) override;
Optional<Gfx::Path> m_path;
Vector<Gfx::FloatPoint> m_points; Vector<Gfx::FloatPoint> m_points;
}; };

View file

@ -28,23 +28,16 @@ void SVGPolylineElement::attribute_changed(FlyString const& name, Optional<Strin
{ {
SVGGeometryElement::attribute_changed(name, value); SVGGeometryElement::attribute_changed(name, value);
if (name == SVG::AttributeNames::points) { if (name == SVG::AttributeNames::points)
m_points = AttributeParser::parse_points(value.value_or(String {})); m_points = AttributeParser::parse_points(value.value_or(String {}));
m_path.clear();
}
} }
Gfx::Path& SVGPolylineElement::get_path() Gfx::Path SVGPolylineElement::get_path(CSSPixelSize)
{ {
if (m_path.has_value())
return m_path.value();
Gfx::Path path; Gfx::Path path;
if (m_points.is_empty()) { if (m_points.is_empty())
m_path = move(path); return path;
return m_path.value();
}
// 1. perform an absolute moveto operation to the first coordinate pair in the list of points // 1. perform an absolute moveto operation to the first coordinate pair in the list of points
path.move_to(m_points.first()); path.move_to(m_points.first());
@ -53,8 +46,7 @@ Gfx::Path& SVGPolylineElement::get_path()
for (size_t point_index = 1; point_index < m_points.size(); ++point_index) for (size_t point_index = 1; point_index < m_points.size(); ++point_index)
path.line_to(m_points[point_index]); path.line_to(m_points[point_index]);
m_path = move(path); return path;
return m_path.value();
} }
} }

View file

@ -19,15 +19,13 @@ public:
virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override; virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override;
virtual Gfx::Path& get_path() override; virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
private: private:
SVGPolylineElement(DOM::Document&, DOM::QualifiedName); SVGPolylineElement(DOM::Document&, DOM::QualifiedName);
virtual void initialize(JS::Realm&) override; virtual void initialize(JS::Realm&) override;
Optional<Gfx::Path> m_path;
Vector<Gfx::FloatPoint> m_points; Vector<Gfx::FloatPoint> m_points;
}; };

View file

@ -32,30 +32,21 @@ void SVGRectElement::attribute_changed(FlyString const& name, Optional<String> c
if (name == SVG::AttributeNames::x) { if (name == SVG::AttributeNames::x) {
m_x = AttributeParser::parse_coordinate(value.value_or(String {})); m_x = AttributeParser::parse_coordinate(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::y) { } else if (name == SVG::AttributeNames::y) {
m_y = AttributeParser::parse_coordinate(value.value_or(String {})); m_y = AttributeParser::parse_coordinate(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::width) { } else if (name == SVG::AttributeNames::width) {
m_width = AttributeParser::parse_positive_length(value.value_or(String {})); m_width = AttributeParser::parse_positive_length(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::height) { } else if (name == SVG::AttributeNames::height) {
m_height = AttributeParser::parse_positive_length(value.value_or(String {})); m_height = AttributeParser::parse_positive_length(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::rx) { } else if (name == SVG::AttributeNames::rx) {
m_radius_x = AttributeParser::parse_length(value.value_or(String {})); m_radius_x = AttributeParser::parse_length(value.value_or(String {}));
m_path.clear();
} else if (name == SVG::AttributeNames::ry) { } else if (name == SVG::AttributeNames::ry) {
m_radius_y = AttributeParser::parse_length(value.value_or(String {})); m_radius_y = AttributeParser::parse_length(value.value_or(String {}));
m_path.clear();
} }
} }
Gfx::Path& SVGRectElement::get_path() Gfx::Path SVGRectElement::get_path(CSSPixelSize)
{ {
if (m_path.has_value())
return m_path.value();
float width = m_width.value_or(0); float width = m_width.value_or(0);
float height = m_height.value_or(0); float height = m_height.value_or(0);
float x = m_x.value_or(0); float x = m_x.value_or(0);
@ -63,10 +54,8 @@ Gfx::Path& SVGRectElement::get_path()
Gfx::Path path; Gfx::Path path;
// If width or height is zero, rendering is disabled. // If width or height is zero, rendering is disabled.
if (width == 0 && height == 0) { if (width == 0 || height == 0)
m_path = move(path); return path;
return m_path.value();
}
auto corner_radii = calculate_used_corner_radius_values(); auto corner_radii = calculate_used_corner_radius_values();
float rx = corner_radii.width(); float rx = corner_radii.width();
@ -116,8 +105,7 @@ Gfx::Path& SVGRectElement::get_path()
if (rx > 0 && ry > 0) if (rx > 0 && ry > 0)
path.elliptical_arc_to({ x + rx, y }, corner_radii, x_axis_rotation, large_arc_flag, sweep_flag); path.elliptical_arc_to({ x + rx, y }, corner_radii, x_axis_rotation, large_arc_flag, sweep_flag);
m_path = move(path); return path;
return m_path.value();
} }
Gfx::FloatSize SVGRectElement::calculate_used_corner_radius_values() const Gfx::FloatSize SVGRectElement::calculate_used_corner_radius_values() const

View file

@ -20,7 +20,7 @@ public:
virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override; virtual void attribute_changed(FlyString const& name, Optional<String> const& value) override;
virtual Gfx::Path& get_path() override; virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
JS::NonnullGCPtr<SVGAnimatedLength> x() const; JS::NonnullGCPtr<SVGAnimatedLength> x() const;
JS::NonnullGCPtr<SVGAnimatedLength> y() const; JS::NonnullGCPtr<SVGAnimatedLength> y() const;
@ -36,8 +36,6 @@ private:
Gfx::FloatSize calculate_used_corner_radius_values() const; Gfx::FloatSize calculate_used_corner_radius_values() const;
Optional<Gfx::Path> m_path;
Optional<float> m_x; Optional<float> m_x;
Optional<float> m_y; Optional<float> m_y;
Optional<float> m_width; Optional<float> m_width;