SVGGraphicsElement.cpp 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  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/SVGMaskElement.h>
  18. #include <LibWeb/SVG/SVGSVGElement.h>
  19. #include <LibWeb/SVG/SVGSymbolElement.h>
  20. namespace Web::SVG {
  21. SVGGraphicsElement::SVGGraphicsElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  22. : SVGElement(document, move(qualified_name))
  23. {
  24. }
  25. void SVGGraphicsElement::initialize(JS::Realm& realm)
  26. {
  27. Base::initialize(realm);
  28. WEB_SET_PROTOTYPE_FOR_INTERFACE(SVGGraphicsElement);
  29. }
  30. void SVGGraphicsElement::attribute_changed(FlyString const& name, Optional<String> const& value)
  31. {
  32. SVGElement::attribute_changed(name, value);
  33. if (name == "transform"sv) {
  34. auto transform_list = AttributeParser::parse_transform(value.value_or(String {}));
  35. if (transform_list.has_value())
  36. m_transform = transform_from_transform_list(*transform_list);
  37. // FIXME: This should only invalidate the contents of the SVG.
  38. document().invalidate_layout();
  39. }
  40. }
  41. Optional<Gfx::PaintStyle const&> SVGGraphicsElement::svg_paint_computed_value_to_gfx_paint_style(SVGPaintContext const& paint_context, Optional<CSS::SVGPaint> const& paint_value) const
  42. {
  43. // FIXME: This entire function is an ad-hoc hack:
  44. if (!paint_value.has_value() || !paint_value->is_url())
  45. return {};
  46. if (auto gradient = try_resolve_url_to<SVG::SVGGradientElement const>(paint_value->as_url()))
  47. return gradient->to_gfx_paint_style(paint_context);
  48. return {};
  49. }
  50. Optional<Gfx::PaintStyle const&> SVGGraphicsElement::fill_paint_style(SVGPaintContext const& paint_context) const
  51. {
  52. if (!layout_node())
  53. return {};
  54. return svg_paint_computed_value_to_gfx_paint_style(paint_context, layout_node()->computed_values().fill());
  55. }
  56. Optional<Gfx::PaintStyle const&> SVGGraphicsElement::stroke_paint_style(SVGPaintContext const& paint_context) const
  57. {
  58. if (!layout_node())
  59. return {};
  60. return svg_paint_computed_value_to_gfx_paint_style(paint_context, layout_node()->computed_values().stroke());
  61. }
  62. JS::GCPtr<SVG::SVGMaskElement const> SVGGraphicsElement::mask() const
  63. {
  64. auto const& mask_reference = layout_node()->computed_values().mask();
  65. if (!mask_reference.has_value())
  66. return {};
  67. return try_resolve_url_to<SVG::SVGMaskElement const>(mask_reference->url());
  68. }
  69. Gfx::AffineTransform transform_from_transform_list(ReadonlySpan<Transform> transform_list)
  70. {
  71. Gfx::AffineTransform affine_transform;
  72. for (auto& transform : transform_list) {
  73. transform.operation.visit(
  74. [&](Transform::Translate const& translate) {
  75. affine_transform.multiply(Gfx::AffineTransform {}.translate({ translate.x, translate.y }));
  76. },
  77. [&](Transform::Scale const& scale) {
  78. affine_transform.multiply(Gfx::AffineTransform {}.scale({ scale.x, scale.y }));
  79. },
  80. [&](Transform::Rotate const& rotate) {
  81. Gfx::AffineTransform translate_transform;
  82. affine_transform.multiply(
  83. Gfx::AffineTransform {}
  84. .translate({ rotate.x, rotate.y })
  85. .rotate_radians(AK::to_radians(rotate.a))
  86. .translate({ -rotate.x, -rotate.y }));
  87. },
  88. [&](Transform::SkewX const& skew_x) {
  89. affine_transform.multiply(Gfx::AffineTransform {}.skew_radians(AK::to_radians(skew_x.a), 0));
  90. },
  91. [&](Transform::SkewY const& skew_y) {
  92. affine_transform.multiply(Gfx::AffineTransform {}.skew_radians(0, AK::to_radians(skew_y.a)));
  93. },
  94. [&](Transform::Matrix const& matrix) {
  95. affine_transform.multiply(Gfx::AffineTransform {
  96. matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f });
  97. });
  98. }
  99. return affine_transform;
  100. }
  101. Gfx::AffineTransform SVGGraphicsElement::get_transform() const
  102. {
  103. Gfx::AffineTransform transform = m_transform;
  104. for (auto* svg_ancestor = shadow_including_first_ancestor_of_type<SVGGraphicsElement>(); svg_ancestor; svg_ancestor = svg_ancestor->shadow_including_first_ancestor_of_type<SVGGraphicsElement>()) {
  105. transform = Gfx::AffineTransform { svg_ancestor->element_transform() }.multiply(transform);
  106. }
  107. return transform;
  108. }
  109. struct NamedPropertyID {
  110. NamedPropertyID(CSS::PropertyID property_id)
  111. : id(property_id)
  112. , name(CSS::string_from_property_id(property_id))
  113. {
  114. }
  115. CSS::PropertyID id;
  116. StringView name;
  117. };
  118. void SVGGraphicsElement::apply_presentational_hints(CSS::StyleProperties& style) const
  119. {
  120. static const Array attribute_style_properties {
  121. // FIXME: The `fill` attribute and CSS `fill` property are not the same! But our support is limited enough that they are equivalent for now.
  122. NamedPropertyID(CSS::PropertyID::Fill),
  123. // FIXME: The `stroke` attribute and CSS `stroke` property are not the same! But our support is limited enough that they are equivalent for now.
  124. NamedPropertyID(CSS::PropertyID::Stroke),
  125. NamedPropertyID(CSS::PropertyID::StrokeWidth),
  126. NamedPropertyID(CSS::PropertyID::FillRule),
  127. NamedPropertyID(CSS::PropertyID::FillOpacity),
  128. NamedPropertyID(CSS::PropertyID::StrokeOpacity),
  129. NamedPropertyID(CSS::PropertyID::Opacity),
  130. NamedPropertyID(CSS::PropertyID::TextAnchor),
  131. NamedPropertyID(CSS::PropertyID::FontSize),
  132. NamedPropertyID(CSS::PropertyID::Mask),
  133. NamedPropertyID(CSS::PropertyID::MaskType)
  134. };
  135. CSS::Parser::ParsingContext parsing_context { document(), CSS::Parser::ParsingContext::Mode::SVGPresentationAttribute };
  136. for_each_attribute([&](auto& name, auto& value) {
  137. for (auto property : attribute_style_properties) {
  138. if (!name.equals_ignoring_ascii_case(property.name))
  139. continue;
  140. if (auto style_value = parse_css_value(parsing_context, value, property.id))
  141. style.set_property(property.id, style_value.release_nonnull());
  142. break;
  143. }
  144. });
  145. }
  146. Optional<FillRule> SVGGraphicsElement::fill_rule() const
  147. {
  148. if (!layout_node())
  149. return {};
  150. switch (layout_node()->computed_values().fill_rule()) {
  151. case CSS::FillRule::Nonzero:
  152. return FillRule::Nonzero;
  153. case CSS::FillRule::Evenodd:
  154. return FillRule::Evenodd;
  155. default:
  156. VERIFY_NOT_REACHED();
  157. }
  158. }
  159. Optional<Gfx::Color> SVGGraphicsElement::fill_color() const
  160. {
  161. if (!layout_node())
  162. return {};
  163. // FIXME: In the working-draft spec, `fill` is intended to be a shorthand, with `fill-color`
  164. // being what we actually want to use. But that's not final or widely supported yet.
  165. return layout_node()->computed_values().fill().map([&](auto& paint) -> Gfx::Color {
  166. if (!paint.is_color())
  167. return Color::Black;
  168. return paint.as_color();
  169. });
  170. }
  171. Optional<Gfx::Color> SVGGraphicsElement::stroke_color() const
  172. {
  173. if (!layout_node())
  174. return {};
  175. // FIXME: In the working-draft spec, `stroke` is intended to be a shorthand, with `stroke-color`
  176. // being what we actually want to use. But that's not final or widely supported yet.
  177. return layout_node()->computed_values().stroke().map([](auto& paint) -> Gfx::Color {
  178. if (!paint.is_color())
  179. return Color::Black;
  180. return paint.as_color();
  181. });
  182. }
  183. Optional<float> SVGGraphicsElement::fill_opacity() const
  184. {
  185. if (!layout_node())
  186. return {};
  187. return layout_node()->computed_values().fill_opacity();
  188. }
  189. Optional<float> SVGGraphicsElement::stroke_opacity() const
  190. {
  191. if (!layout_node())
  192. return {};
  193. return layout_node()->computed_values().stroke_opacity();
  194. }
  195. Optional<float> SVGGraphicsElement::stroke_width() const
  196. {
  197. if (!layout_node())
  198. return {};
  199. // FIXME: Converting to pixels isn't really correct - values should be in "user units"
  200. // https://svgwg.org/svg2-draft/coords.html#TermUserUnits
  201. auto width = layout_node()->computed_values().stroke_width();
  202. // Resolved relative to the "Scaled viewport size": https://www.w3.org/TR/2017/WD-fill-stroke-3-20170413/#scaled-viewport-size
  203. // FIXME: This isn't right, but it's something.
  204. CSSPixels viewport_width = 0;
  205. CSSPixels viewport_height = 0;
  206. if (auto* svg_svg_element = shadow_including_first_ancestor_of_type<SVGSVGElement>()) {
  207. if (auto* svg_svg_layout_node = svg_svg_element->layout_node()) {
  208. viewport_width = svg_svg_layout_node->computed_values().width().to_px(*svg_svg_layout_node, 0);
  209. viewport_height = svg_svg_layout_node->computed_values().height().to_px(*svg_svg_layout_node, 0);
  210. }
  211. }
  212. auto scaled_viewport_size = (viewport_width + viewport_height) * CSSPixels(0.5);
  213. return width.to_px(*layout_node(), scaled_viewport_size).to_double();
  214. }
  215. }