| 
									
										
										
										
											2020-07-22 15:17:39 -07:00
										 |  |  | /*
 | 
					
						
							| 
									
										
										
										
											2021-04-22 16:53:07 -07:00
										 |  |  |  * Copyright (c) 2020, Matthew Olsson <mattco@serenityos.org> | 
					
						
							| 
									
										
										
										
											2022-01-24 15:43:44 +00:00
										 |  |  |  * Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org> | 
					
						
							| 
									
										
										
										
											2023-04-10 12:25:40 +01:00
										 |  |  |  * Copyright (c) 2023, MacDue <macdue@dueutil.tech> | 
					
						
							| 
									
										
										
										
											2020-07-22 15:17:39 -07:00
										 |  |  |  * | 
					
						
							| 
									
										
										
										
											2021-04-22 01:24:48 -07:00
										 |  |  |  * SPDX-License-Identifier: BSD-2-Clause | 
					
						
							| 
									
										
										
										
											2020-07-22 15:17:39 -07:00
										 |  |  |  */ | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-09-30 17:16:16 -06:00
										 |  |  | #include <LibWeb/Bindings/Intrinsics.h>
 | 
					
						
							| 
									
										
										
										
											2022-01-24 15:43:44 +00:00
										 |  |  | #include <LibWeb/CSS/Parser/Parser.h>
 | 
					
						
							| 
									
										
										
										
											2023-04-23 01:31:17 +01:00
										 |  |  | #include <LibWeb/DOM/Document.h>
 | 
					
						
							| 
									
										
										
										
											2022-04-10 20:16:47 +02:00
										 |  |  | #include <LibWeb/Layout/Node.h>
 | 
					
						
							| 
									
										
										
										
											2023-04-10 12:25:40 +01:00
										 |  |  | #include <LibWeb/SVG/AttributeParser.h>
 | 
					
						
							| 
									
										
										
										
											2023-04-23 01:31:17 +01:00
										 |  |  | #include <LibWeb/SVG/SVGGradientElement.h>
 | 
					
						
							| 
									
										
										
										
											2020-07-23 09:44:42 -07:00
										 |  |  | #include <LibWeb/SVG/SVGGraphicsElement.h>
 | 
					
						
							| 
									
										
										
										
											2022-04-10 20:16:47 +02:00
										 |  |  | #include <LibWeb/SVG/SVGSVGElement.h>
 | 
					
						
							| 
									
										
										
										
											2020-07-22 15:17:39 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-07-23 09:44:42 -07:00
										 |  |  | namespace Web::SVG { | 
					
						
							| 
									
										
										
										
											2020-07-22 15:17:39 -07:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-02-18 21:00:52 +01:00
										 |  |  | SVGGraphicsElement::SVGGraphicsElement(DOM::Document& document, DOM::QualifiedName qualified_name) | 
					
						
							| 
									
										
										
										
											2021-02-07 11:20:15 +01:00
										 |  |  |     : SVGElement(document, move(qualified_name)) | 
					
						
							| 
									
										
										
										
											2020-07-22 15:17:39 -07:00
										 |  |  | { | 
					
						
							| 
									
										
										
										
											2023-01-10 06:28:20 -05:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-28 12:33:35 -05:00
										 |  |  | JS::ThrowCompletionOr<void> SVGGraphicsElement::initialize(JS::Realm& realm) | 
					
						
							| 
									
										
										
										
											2023-01-10 06:28:20 -05:00
										 |  |  | { | 
					
						
							| 
									
										
										
										
											2023-01-28 12:33:35 -05:00
										 |  |  |     MUST_OR_THROW_OOM(Base::initialize(realm)); | 
					
						
							| 
									
										
										
										
											2023-01-10 06:28:20 -05:00
										 |  |  |     set_prototype(&Bindings::ensure_web_prototype<Bindings::SVGGraphicsElementPrototype>(realm, "SVGGraphicsElement")); | 
					
						
							| 
									
										
										
										
											2023-01-28 12:33:35 -05:00
										 |  |  | 
 | 
					
						
							|  |  |  |     return {}; | 
					
						
							| 
									
										
										
										
											2020-07-22 15:17:39 -07:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-04-10 12:25:00 +01:00
										 |  |  | void SVGGraphicsElement::parse_attribute(DeprecatedFlyString const& name, DeprecatedString const& value) | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     SVGElement::parse_attribute(name, value); | 
					
						
							| 
									
										
										
										
											2023-05-19 20:35:39 +01:00
										 |  |  |     if (name == "transform"sv) { | 
					
						
							| 
									
										
										
										
											2023-04-10 12:25:40 +01:00
										 |  |  |         auto transform_list = AttributeParser::parse_transform(value); | 
					
						
							|  |  |  |         if (transform_list.has_value()) | 
					
						
							|  |  |  |             m_transform = transform_from_transform_list(*transform_list); | 
					
						
							| 
									
										
										
										
											2023-04-10 12:25:00 +01:00
										 |  |  |     } | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-04-23 01:31:17 +01:00
										 |  |  | Optional<Gfx::PaintStyle const&> SVGGraphicsElement::fill_paint_style(SVGPaintContext const& paint_context) const | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     // FIXME: This entire function is an ad-hoc hack:
 | 
					
						
							|  |  |  |     if (!layout_node()) | 
					
						
							|  |  |  |         return {}; | 
					
						
							|  |  |  |     auto& fill = layout_node()->computed_values().fill(); | 
					
						
							|  |  |  |     if (!fill.has_value() || !fill->is_url()) | 
					
						
							|  |  |  |         return {}; | 
					
						
							|  |  |  |     auto& url = fill->as_url(); | 
					
						
							| 
									
										
										
										
											2023-05-19 15:14:34 +02:00
										 |  |  |     auto gradient = document().get_element_by_id(url.fragment()); | 
					
						
							|  |  |  |     if (!gradient) | 
					
						
							|  |  |  |         return {}; | 
					
						
							|  |  |  |     if (is<SVG::SVGGradientElement>(*gradient)) | 
					
						
							|  |  |  |         return static_cast<SVG::SVGGradientElement const&>(*gradient).to_gfx_paint_style(paint_context); | 
					
						
							| 
									
										
										
										
											2023-04-23 01:31:17 +01:00
										 |  |  |     return {}; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-04-12 13:32:21 -04:00
										 |  |  | Gfx::AffineTransform transform_from_transform_list(ReadonlySpan<Transform> transform_list) | 
					
						
							| 
									
										
										
										
											2023-04-10 12:25:40 +01:00
										 |  |  | { | 
					
						
							|  |  |  |     Gfx::AffineTransform affine_transform; | 
					
						
							|  |  |  |     auto to_radians = [](float degrees) { | 
					
						
							|  |  |  |         return degrees * (AK::Pi<float> / 180.0f); | 
					
						
							|  |  |  |     }; | 
					
						
							| 
									
										
										
										
											2023-04-12 13:32:21 -04:00
										 |  |  |     for (auto& transform : transform_list) { | 
					
						
							|  |  |  |         transform.operation.visit( | 
					
						
							| 
									
										
										
										
											2023-04-10 12:25:40 +01:00
										 |  |  |             [&](Transform::Translate const& translate) { | 
					
						
							|  |  |  |                 affine_transform.multiply(Gfx::AffineTransform {}.translate({ translate.x, translate.y })); | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             [&](Transform::Scale const& scale) { | 
					
						
							|  |  |  |                 affine_transform.multiply(Gfx::AffineTransform {}.scale({ scale.x, scale.y })); | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             [&](Transform::Rotate const& rotate) { | 
					
						
							|  |  |  |                 Gfx::AffineTransform translate_transform; | 
					
						
							|  |  |  |                 affine_transform.multiply( | 
					
						
							|  |  |  |                     Gfx::AffineTransform {} | 
					
						
							|  |  |  |                         .translate({ rotate.x, rotate.y }) | 
					
						
							|  |  |  |                         .rotate_radians(to_radians(rotate.a)) | 
					
						
							|  |  |  |                         .translate({ -rotate.x, -rotate.y })); | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             [&](Transform::SkewX const& skew_x) { | 
					
						
							|  |  |  |                 affine_transform.multiply(Gfx::AffineTransform {}.skew_radians(to_radians(skew_x.a), 0)); | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             [&](Transform::SkewY const& skew_y) { | 
					
						
							|  |  |  |                 affine_transform.multiply(Gfx::AffineTransform {}.skew_radians(0, to_radians(skew_y.a))); | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             [&](Transform::Matrix const& matrix) { | 
					
						
							|  |  |  |                 affine_transform.multiply(Gfx::AffineTransform { | 
					
						
							|  |  |  |                     matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f }); | 
					
						
							|  |  |  |             }); | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |     return affine_transform; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Gfx::AffineTransform SVGGraphicsElement::get_transform() const | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     // FIXME: It would be nice to do this using the SVGContext, however, then layout/hit testing knows nothing about the transform.
 | 
					
						
							|  |  |  |     Gfx::AffineTransform transform = m_transform; | 
					
						
							|  |  |  |     for (auto* svg_ancestor = first_ancestor_of_type<SVGGraphicsElement>(); svg_ancestor; svg_ancestor = svg_ancestor->first_ancestor_of_type<SVGGraphicsElement>()) { | 
					
						
							|  |  |  |         transform = Gfx::AffineTransform { svg_ancestor->m_transform }.multiply(transform); | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |     return transform; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-01-24 15:43:44 +00:00
										 |  |  | void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style) const | 
					
						
							| 
									
										
										
										
											2020-07-22 15:17:39 -07:00
										 |  |  | { | 
					
						
							| 
									
										
										
										
											2022-04-12 12:00:07 +01:00
										 |  |  |     CSS::Parser::ParsingContext parsing_context { document() }; | 
					
						
							| 
									
										
										
										
											2022-01-24 15:43:44 +00:00
										 |  |  |     for_each_attribute([&](auto& name, auto& value) { | 
					
						
							| 
									
										
										
										
											2023-03-10 08:48:54 +01:00
										 |  |  |         if (name.equals_ignoring_ascii_case("fill"sv)) { | 
					
						
							| 
									
										
										
										
											2022-01-24 15:43:44 +00:00
										 |  |  |             // FIXME: The `fill` attribute and CSS `fill` property are not the same! But our support is limited enough that they are equivalent for now.
 | 
					
						
							| 
									
										
										
										
											2023-05-02 15:09:46 +01:00
										 |  |  |             if (auto fill_value = parse_css_value(parsing_context, value, CSS::PropertyID::Fill).release_value_but_fixme_should_propagate_errors()) | 
					
						
							| 
									
										
										
										
											2022-01-24 15:43:44 +00:00
										 |  |  |                 style.set_property(CSS::PropertyID::Fill, fill_value.release_nonnull()); | 
					
						
							| 
									
										
										
										
											2023-03-10 08:48:54 +01:00
										 |  |  |         } else if (name.equals_ignoring_ascii_case("stroke"sv)) { | 
					
						
							| 
									
										
										
										
											2022-01-24 15:43:44 +00:00
										 |  |  |             // FIXME: The `stroke` attribute and CSS `stroke` property are not the same! But our support is limited enough that they are equivalent for now.
 | 
					
						
							| 
									
										
										
										
											2023-05-02 15:09:46 +01:00
										 |  |  |             if (auto stroke_value = parse_css_value(parsing_context, value, CSS::PropertyID::Stroke).release_value_but_fixme_should_propagate_errors()) | 
					
						
							| 
									
										
										
										
											2022-01-24 15:43:44 +00:00
										 |  |  |                 style.set_property(CSS::PropertyID::Stroke, stroke_value.release_nonnull()); | 
					
						
							| 
									
										
										
										
											2023-03-10 08:48:54 +01:00
										 |  |  |         } else if (name.equals_ignoring_ascii_case("stroke-width"sv)) { | 
					
						
							| 
									
										
										
										
											2023-05-02 15:09:46 +01:00
										 |  |  |             if (auto stroke_width_value = parse_css_value(parsing_context, value, CSS::PropertyID::StrokeWidth).release_value_but_fixme_should_propagate_errors()) | 
					
						
							| 
									
										
										
										
											2022-01-24 15:43:44 +00:00
										 |  |  |                 style.set_property(CSS::PropertyID::StrokeWidth, stroke_width_value.release_nonnull()); | 
					
						
							| 
									
										
										
										
											2023-05-19 20:35:39 +01:00
										 |  |  |         } else if (name.equals_ignoring_ascii_case("fill-opacity"sv)) { | 
					
						
							|  |  |  |             if (auto fill_opacity_value = parse_css_value(parsing_context, value, CSS::PropertyID::FillOpacity).release_value_but_fixme_should_propagate_errors()) | 
					
						
							|  |  |  |                 style.set_property(CSS::PropertyID::FillOpacity, fill_opacity_value.release_nonnull()); | 
					
						
							|  |  |  |         } else if (name.equals_ignoring_ascii_case("stroke-opacity"sv)) { | 
					
						
							|  |  |  |             if (auto stroke_opacity_value = parse_css_value(parsing_context, value, CSS::PropertyID::FillOpacity).release_value_but_fixme_should_propagate_errors()) | 
					
						
							|  |  |  |                 style.set_property(CSS::PropertyID::StrokeOpacity, stroke_opacity_value.release_nonnull()); | 
					
						
							| 
									
										
										
										
											2022-01-24 15:43:44 +00:00
										 |  |  |         } | 
					
						
							|  |  |  |     }); | 
					
						
							| 
									
										
										
										
											2020-07-22 15:17:39 -07:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-09-16 12:28:14 +01:00
										 |  |  | Optional<Gfx::Color> SVGGraphicsElement::fill_color() const | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     if (!layout_node()) | 
					
						
							|  |  |  |         return {}; | 
					
						
							|  |  |  |     // FIXME: In the working-draft spec, `fill` is intended to be a shorthand, with `fill-color`
 | 
					
						
							|  |  |  |     //        being what we actually want to use. But that's not final or widely supported yet.
 | 
					
						
							| 
									
										
										
										
											2023-04-23 01:31:17 +01:00
										 |  |  |     return layout_node()->computed_values().fill().map([&](auto& paint) -> Gfx::Color { | 
					
						
							|  |  |  |         if (!paint.is_color()) | 
					
						
							|  |  |  |             return Color::Black; | 
					
						
							| 
									
										
										
										
											2023-05-19 20:35:39 +01:00
										 |  |  |         return paint.as_color(); | 
					
						
							| 
									
										
										
										
											2023-04-10 12:25:00 +01:00
										 |  |  |     }); | 
					
						
							| 
									
										
										
										
											2021-09-16 12:28:14 +01:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Optional<Gfx::Color> SVGGraphicsElement::stroke_color() const | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     if (!layout_node()) | 
					
						
							|  |  |  |         return {}; | 
					
						
							|  |  |  |     // FIXME: In the working-draft spec, `stroke` is intended to be a shorthand, with `stroke-color`
 | 
					
						
							|  |  |  |     //        being what we actually want to use. But that's not final or widely supported yet.
 | 
					
						
							| 
									
										
										
										
											2023-04-23 01:31:17 +01:00
										 |  |  |     return layout_node()->computed_values().stroke().map([](auto& paint) -> Gfx::Color { | 
					
						
							|  |  |  |         if (!paint.is_color()) | 
					
						
							|  |  |  |             return Color::Black; | 
					
						
							|  |  |  |         return paint.as_color(); | 
					
						
							|  |  |  |     }); | 
					
						
							| 
									
										
										
										
											2021-09-16 12:28:14 +01:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-05-19 20:35:39 +01:00
										 |  |  | Optional<float> SVGGraphicsElement::fill_opacity() const | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     if (!layout_node()) | 
					
						
							|  |  |  |         return {}; | 
					
						
							|  |  |  |     return layout_node()->computed_values().fill_opacity(); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | Optional<float> SVGGraphicsElement::stroke_opacity() const | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     if (!layout_node()) | 
					
						
							|  |  |  |         return {}; | 
					
						
							|  |  |  |     return layout_node()->computed_values().stroke_opacity(); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2021-09-16 12:28:14 +01:00
										 |  |  | Optional<float> SVGGraphicsElement::stroke_width() const | 
					
						
							|  |  |  | { | 
					
						
							|  |  |  |     if (!layout_node()) | 
					
						
							|  |  |  |         return {}; | 
					
						
							|  |  |  |     // FIXME: Converting to pixels isn't really correct - values should be in "user units"
 | 
					
						
							|  |  |  |     //        https://svgwg.org/svg2-draft/coords.html#TermUserUnits
 | 
					
						
							| 
									
										
										
										
											2022-01-14 16:52:14 +00:00
										 |  |  |     if (auto width = layout_node()->computed_values().stroke_width(); width.has_value()) { | 
					
						
							|  |  |  |         // Resolved relative to the "Scaled viewport size": https://www.w3.org/TR/2017/WD-fill-stroke-3-20170413/#scaled-viewport-size
 | 
					
						
							|  |  |  |         // FIXME: This isn't right, but it's something.
 | 
					
						
							| 
									
										
										
										
											2022-11-08 17:29:52 +00:00
										 |  |  |         CSSPixels viewport_width = 0; | 
					
						
							|  |  |  |         CSSPixels viewport_height = 0; | 
					
						
							| 
									
										
										
										
											2022-04-10 20:16:47 +02:00
										 |  |  |         if (auto* svg_svg_element = first_ancestor_of_type<SVGSVGElement>()) { | 
					
						
							|  |  |  |             if (auto* svg_svg_layout_node = svg_svg_element->layout_node()) { | 
					
						
							| 
									
										
										
										
											2023-05-06 16:34:55 +02:00
										 |  |  |                 viewport_width = svg_svg_layout_node->computed_values().width().to_px(*svg_svg_layout_node, 0); | 
					
						
							|  |  |  |                 viewport_height = svg_svg_layout_node->computed_values().height().to_px(*svg_svg_layout_node, 0); | 
					
						
							| 
									
										
										
										
											2022-04-10 20:16:47 +02:00
										 |  |  |             } | 
					
						
							|  |  |  |         } | 
					
						
							| 
									
										
										
										
											2023-05-06 16:34:55 +02:00
										 |  |  |         auto scaled_viewport_size = (viewport_width + viewport_height) * 0.5f; | 
					
						
							|  |  |  |         return width->to_px(*layout_node(), scaled_viewport_size).value(); | 
					
						
							| 
									
										
										
										
											2022-01-14 16:52:14 +00:00
										 |  |  |     } | 
					
						
							| 
									
										
										
										
											2021-09-16 12:28:14 +01:00
										 |  |  |     return {}; | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-07-22 15:17:39 -07:00
										 |  |  | } |