SVGGraphicsElement.cpp 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. /*
  2. * Copyright (c) 2020, Matthew Olsson <mattco@serenityos.org>
  3. * Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
  4. * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
  5. * Copyright (c) 2023, Andreas Kling <kling@serenityos.org>
  6. *
  7. * SPDX-License-Identifier: BSD-2-Clause
  8. */
  9. #include <LibWeb/Bindings/Intrinsics.h>
  10. #include <LibWeb/CSS/Parser/Parser.h>
  11. #include <LibWeb/DOM/Document.h>
  12. #include <LibWeb/Layout/Node.h>
  13. #include <LibWeb/SVG/AttributeNames.h>
  14. #include <LibWeb/SVG/AttributeParser.h>
  15. #include <LibWeb/SVG/SVGGradientElement.h>
  16. #include <LibWeb/SVG/SVGGraphicsElement.h>
  17. #include <LibWeb/SVG/SVGSVGElement.h>
  18. #include <LibWeb/SVG/SVGSymbolElement.h>
  19. namespace Web::SVG {
  20. SVGGraphicsElement::SVGGraphicsElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  21. : SVGElement(document, move(qualified_name))
  22. {
  23. }
  24. JS::ThrowCompletionOr<void> SVGGraphicsElement::initialize(JS::Realm& realm)
  25. {
  26. MUST_OR_THROW_OOM(Base::initialize(realm));
  27. set_prototype(&Bindings::ensure_web_prototype<Bindings::SVGGraphicsElementPrototype>(realm, "SVGGraphicsElement"));
  28. return {};
  29. }
  30. void SVGGraphicsElement::attribute_changed(DeprecatedFlyString const& name, DeprecatedString const& value)
  31. {
  32. SVGElement::attribute_changed(name, value);
  33. if (name == "transform"sv) {
  34. auto transform_list = AttributeParser::parse_transform(value);
  35. if (transform_list.has_value())
  36. m_transform = transform_from_transform_list(*transform_list);
  37. }
  38. }
  39. Optional<Gfx::PaintStyle const&> SVGGraphicsElement::svg_paint_computed_value_to_gfx_paint_style(SVGPaintContext const& paint_context, Optional<CSS::SVGPaint> const& paint_value) const
  40. {
  41. // FIXME: This entire function is an ad-hoc hack:
  42. if (!paint_value.has_value() || !paint_value->is_url())
  43. return {};
  44. auto& url = paint_value->as_url();
  45. auto gradient = document().get_element_by_id(url.fragment());
  46. if (!gradient)
  47. return {};
  48. if (is<SVG::SVGGradientElement>(*gradient))
  49. return static_cast<SVG::SVGGradientElement const&>(*gradient).to_gfx_paint_style(paint_context);
  50. return {};
  51. }
  52. Optional<Gfx::PaintStyle const&> SVGGraphicsElement::fill_paint_style(SVGPaintContext const& paint_context) const
  53. {
  54. if (!layout_node())
  55. return {};
  56. return svg_paint_computed_value_to_gfx_paint_style(paint_context, layout_node()->computed_values().fill());
  57. }
  58. Optional<Gfx::PaintStyle const&> SVGGraphicsElement::stroke_paint_style(SVGPaintContext const& paint_context) const
  59. {
  60. if (!layout_node())
  61. return {};
  62. return svg_paint_computed_value_to_gfx_paint_style(paint_context, layout_node()->computed_values().stroke());
  63. }
  64. Gfx::AffineTransform transform_from_transform_list(ReadonlySpan<Transform> transform_list)
  65. {
  66. Gfx::AffineTransform affine_transform;
  67. auto to_radians = [](float degrees) {
  68. return degrees * (AK::Pi<float> / 180.0f);
  69. };
  70. for (auto& transform : transform_list) {
  71. transform.operation.visit(
  72. [&](Transform::Translate const& translate) {
  73. affine_transform.multiply(Gfx::AffineTransform {}.translate({ translate.x, translate.y }));
  74. },
  75. [&](Transform::Scale const& scale) {
  76. affine_transform.multiply(Gfx::AffineTransform {}.scale({ scale.x, scale.y }));
  77. },
  78. [&](Transform::Rotate const& rotate) {
  79. Gfx::AffineTransform translate_transform;
  80. affine_transform.multiply(
  81. Gfx::AffineTransform {}
  82. .translate({ rotate.x, rotate.y })
  83. .rotate_radians(to_radians(rotate.a))
  84. .translate({ -rotate.x, -rotate.y }));
  85. },
  86. [&](Transform::SkewX const& skew_x) {
  87. affine_transform.multiply(Gfx::AffineTransform {}.skew_radians(to_radians(skew_x.a), 0));
  88. },
  89. [&](Transform::SkewY const& skew_y) {
  90. affine_transform.multiply(Gfx::AffineTransform {}.skew_radians(0, to_radians(skew_y.a)));
  91. },
  92. [&](Transform::Matrix const& matrix) {
  93. affine_transform.multiply(Gfx::AffineTransform {
  94. matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f });
  95. });
  96. }
  97. return affine_transform;
  98. }
  99. Gfx::AffineTransform SVGGraphicsElement::get_transform() const
  100. {
  101. Gfx::AffineTransform transform = m_transform;
  102. for (auto* svg_ancestor = shadow_including_first_ancestor_of_type<SVGGraphicsElement>(); svg_ancestor; svg_ancestor = svg_ancestor->shadow_including_first_ancestor_of_type<SVGGraphicsElement>()) {
  103. transform = Gfx::AffineTransform { svg_ancestor->m_transform }.multiply(transform);
  104. }
  105. return transform;
  106. }
  107. void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style) const
  108. {
  109. // FIXME: Hack to ensure unitless SVG properties (such as font-size) are parsed.
  110. FIXME::TemporarilyEnableQuirksMode enable_quirks(document());
  111. CSS::Parser::ParsingContext parsing_context { document() };
  112. for_each_attribute([&](auto& name, auto& value) {
  113. if (name.equals_ignoring_ascii_case("fill"sv)) {
  114. // FIXME: The `fill` attribute and CSS `fill` property are not the same! But our support is limited enough that they are equivalent for now.
  115. if (auto fill_value = parse_css_value(parsing_context, value, CSS::PropertyID::Fill).release_value_but_fixme_should_propagate_errors())
  116. style.set_property(CSS::PropertyID::Fill, fill_value.release_nonnull());
  117. } else if (name.equals_ignoring_ascii_case("stroke"sv)) {
  118. // FIXME: The `stroke` attribute and CSS `stroke` property are not the same! But our support is limited enough that they are equivalent for now.
  119. if (auto stroke_value = parse_css_value(parsing_context, value, CSS::PropertyID::Stroke).release_value_but_fixme_should_propagate_errors())
  120. style.set_property(CSS::PropertyID::Stroke, stroke_value.release_nonnull());
  121. } else if (name.equals_ignoring_ascii_case("stroke-width"sv)) {
  122. if (auto stroke_width_value = parse_css_value(parsing_context, value, CSS::PropertyID::StrokeWidth).release_value_but_fixme_should_propagate_errors())
  123. style.set_property(CSS::PropertyID::StrokeWidth, stroke_width_value.release_nonnull());
  124. } else if (name.equals_ignoring_ascii_case("fill-rule"sv)) {
  125. if (auto fill_rule_value = parse_css_value(parsing_context, value, CSS::PropertyID::FillRule).release_value_but_fixme_should_propagate_errors())
  126. style.set_property(CSS::PropertyID::FillRule, fill_rule_value.release_nonnull());
  127. } else if (name.equals_ignoring_ascii_case("fill-opacity"sv)) {
  128. if (auto fill_opacity_value = parse_css_value(parsing_context, value, CSS::PropertyID::FillOpacity).release_value_but_fixme_should_propagate_errors())
  129. style.set_property(CSS::PropertyID::FillOpacity, fill_opacity_value.release_nonnull());
  130. } else if (name.equals_ignoring_ascii_case("stroke-opacity"sv)) {
  131. if (auto stroke_opacity_value = parse_css_value(parsing_context, value, CSS::PropertyID::FillOpacity).release_value_but_fixme_should_propagate_errors())
  132. style.set_property(CSS::PropertyID::StrokeOpacity, stroke_opacity_value.release_nonnull());
  133. } else if (name.equals_ignoring_ascii_case(SVG::AttributeNames::opacity)) {
  134. if (auto stroke_opacity_value = parse_css_value(parsing_context, value, CSS::PropertyID::Opacity).release_value_but_fixme_should_propagate_errors())
  135. style.set_property(CSS::PropertyID::Opacity, stroke_opacity_value.release_nonnull());
  136. } else if (name.equals_ignoring_ascii_case("text-anchor"sv)) {
  137. if (auto text_anchor_value = parse_css_value(parsing_context, value, CSS::PropertyID::TextAnchor).release_value_but_fixme_should_propagate_errors())
  138. style.set_property(CSS::PropertyID::TextAnchor, text_anchor_value.release_nonnull());
  139. } else if (name.equals_ignoring_ascii_case("font-size"sv)) {
  140. if (auto font_size_value = parse_css_value(parsing_context, value, CSS::PropertyID::FontSize).release_value_but_fixme_should_propagate_errors())
  141. style.set_property(CSS::PropertyID::FontSize, font_size_value.release_nonnull());
  142. }
  143. });
  144. }
  145. Optional<FillRule> SVGGraphicsElement::fill_rule() const
  146. {
  147. if (!layout_node())
  148. return {};
  149. switch (layout_node()->computed_values().fill_rule()) {
  150. case CSS::FillRule::Nonzero:
  151. return FillRule::Nonzero;
  152. case CSS::FillRule::Evenodd:
  153. return FillRule::Evenodd;
  154. default:
  155. VERIFY_NOT_REACHED();
  156. }
  157. }
  158. Optional<Gfx::Color> SVGGraphicsElement::fill_color() const
  159. {
  160. if (!layout_node())
  161. return {};
  162. // FIXME: In the working-draft spec, `fill` is intended to be a shorthand, with `fill-color`
  163. // being what we actually want to use. But that's not final or widely supported yet.
  164. return layout_node()->computed_values().fill().map([&](auto& paint) -> Gfx::Color {
  165. if (!paint.is_color())
  166. return Color::Black;
  167. return paint.as_color();
  168. });
  169. }
  170. Optional<Gfx::Color> SVGGraphicsElement::stroke_color() const
  171. {
  172. if (!layout_node())
  173. return {};
  174. // FIXME: In the working-draft spec, `stroke` is intended to be a shorthand, with `stroke-color`
  175. // being what we actually want to use. But that's not final or widely supported yet.
  176. return layout_node()->computed_values().stroke().map([](auto& paint) -> Gfx::Color {
  177. if (!paint.is_color())
  178. return Color::Black;
  179. return paint.as_color();
  180. });
  181. }
  182. Optional<float> SVGGraphicsElement::fill_opacity() const
  183. {
  184. if (!layout_node())
  185. return {};
  186. return layout_node()->computed_values().fill_opacity();
  187. }
  188. Optional<float> SVGGraphicsElement::stroke_opacity() const
  189. {
  190. if (!layout_node())
  191. return {};
  192. return layout_node()->computed_values().stroke_opacity();
  193. }
  194. Optional<float> SVGGraphicsElement::stroke_width() const
  195. {
  196. if (!layout_node())
  197. return {};
  198. // FIXME: Converting to pixels isn't really correct - values should be in "user units"
  199. // https://svgwg.org/svg2-draft/coords.html#TermUserUnits
  200. auto width = layout_node()->computed_values().stroke_width();
  201. // Resolved relative to the "Scaled viewport size": https://www.w3.org/TR/2017/WD-fill-stroke-3-20170413/#scaled-viewport-size
  202. // FIXME: This isn't right, but it's something.
  203. CSSPixels viewport_width = 0;
  204. CSSPixels viewport_height = 0;
  205. if (auto* svg_svg_element = shadow_including_first_ancestor_of_type<SVGSVGElement>()) {
  206. if (auto* svg_svg_layout_node = svg_svg_element->layout_node()) {
  207. viewport_width = svg_svg_layout_node->computed_values().width().to_px(*svg_svg_layout_node, 0);
  208. viewport_height = svg_svg_layout_node->computed_values().height().to_px(*svg_svg_layout_node, 0);
  209. }
  210. }
  211. auto scaled_viewport_size = (viewport_width + viewport_height) * 0.5;
  212. return width.to_px(*layout_node(), scaled_viewport_size).to_double();
  213. }
  214. Optional<ViewBox> SVGGraphicsElement::view_box() const
  215. {
  216. if (auto* svg_svg_element = shadow_including_first_ancestor_of_type<SVGSVGElement>()) {
  217. if (svg_svg_element->view_box().has_value())
  218. return svg_svg_element->view_box();
  219. }
  220. if (auto* svg_symbol_element = shadow_including_first_ancestor_of_type<SVGSymbolElement>()) {
  221. if (svg_symbol_element->view_box().has_value())
  222. return svg_symbol_element->view_box();
  223. }
  224. return {};
  225. }
  226. }