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>
|
2023-06-20 12:57:54 +02:00
|
|
|
* Copyright (c) 2023, Andreas Kling <kling@serenityos.org>
|
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>
|
2024-04-27 12:09:58 +12:00
|
|
|
#include <LibWeb/Bindings/SVGGraphicsElementPrototype.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>
|
2024-06-13 15:22:46 +03:00
|
|
|
#include <LibWeb/Painting/PaintStyle.h>
|
2024-04-20 23:10:26 +01:00
|
|
|
#include <LibWeb/Painting/PaintableBox.h>
|
|
|
|
#include <LibWeb/Painting/SVGGraphicsPaintable.h>
|
2023-06-20 12:57:54 +02:00
|
|
|
#include <LibWeb/SVG/AttributeNames.h>
|
2023-04-10 12:25:40 +01:00
|
|
|
#include <LibWeb/SVG/AttributeParser.h>
|
2024-03-27 00:06:35 +00:00
|
|
|
#include <LibWeb/SVG/SVGClipPathElement.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>
|
2023-09-10 14:10:55 +01:00
|
|
|
#include <LibWeb/SVG/SVGMaskElement.h>
|
2022-04-10 20:16:47 +02:00
|
|
|
#include <LibWeb/SVG/SVGSVGElement.h>
|
2023-07-31 18:37:44 +02:00
|
|
|
#include <LibWeb/SVG/SVGSymbolElement.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-08-07 08:41:28 +02:00
|
|
|
void SVGGraphicsElement::initialize(JS::Realm& realm)
|
2023-01-10 06:28:20 -05:00
|
|
|
{
|
2023-08-07 08:41:28 +02:00
|
|
|
Base::initialize(realm);
|
2024-03-16 13:13:08 +01:00
|
|
|
WEB_SET_PROTOTYPE_FOR_INTERFACE(SVGGraphicsElement);
|
2020-07-22 15:17:39 -07:00
|
|
|
}
|
|
|
|
|
2024-07-09 20:18:41 +01:00
|
|
|
void SVGGraphicsElement::attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value)
|
2023-04-10 12:25:00 +01:00
|
|
|
{
|
2024-07-09 20:18:41 +01:00
|
|
|
SVGElement::attribute_changed(name, old_value, value);
|
2023-05-19 20:35:39 +01:00
|
|
|
if (name == "transform"sv) {
|
2023-11-19 18:10:36 +13:00
|
|
|
auto transform_list = AttributeParser::parse_transform(value.value_or(String {}));
|
2023-04-10 12:25:40 +01:00
|
|
|
if (transform_list.has_value())
|
|
|
|
m_transform = transform_from_transform_list(*transform_list);
|
2024-02-04 21:17:45 +00:00
|
|
|
// FIXME: This should only invalidate the contents of the SVG.
|
|
|
|
document().invalidate_layout();
|
2023-04-10 12:25:00 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-06-13 15:22:46 +03:00
|
|
|
Optional<Painting::PaintStyle> SVGGraphicsElement::svg_paint_computed_value_to_gfx_paint_style(SVGPaintContext const& paint_context, Optional<CSS::SVGPaint> const& paint_value) const
|
2023-04-23 01:31:17 +01:00
|
|
|
{
|
|
|
|
// FIXME: This entire function is an ad-hoc hack:
|
2023-06-06 20:40:10 +01:00
|
|
|
if (!paint_value.has_value() || !paint_value->is_url())
|
2023-04-23 01:31:17 +01:00
|
|
|
return {};
|
2023-09-10 14:10:55 +01:00
|
|
|
if (auto gradient = try_resolve_url_to<SVG::SVGGradientElement const>(paint_value->as_url()))
|
|
|
|
return gradient->to_gfx_paint_style(paint_context);
|
2023-04-23 01:31:17 +01:00
|
|
|
return {};
|
|
|
|
}
|
|
|
|
|
2024-06-13 15:22:46 +03:00
|
|
|
Optional<Painting::PaintStyle> SVGGraphicsElement::fill_paint_style(SVGPaintContext const& paint_context) const
|
2023-06-06 20:40:10 +01:00
|
|
|
{
|
|
|
|
if (!layout_node())
|
|
|
|
return {};
|
|
|
|
return svg_paint_computed_value_to_gfx_paint_style(paint_context, layout_node()->computed_values().fill());
|
|
|
|
}
|
|
|
|
|
2024-06-13 15:22:46 +03:00
|
|
|
Optional<Painting::PaintStyle> SVGGraphicsElement::stroke_paint_style(SVGPaintContext const& paint_context) const
|
2023-06-06 20:40:10 +01:00
|
|
|
{
|
|
|
|
if (!layout_node())
|
|
|
|
return {};
|
|
|
|
return svg_paint_computed_value_to_gfx_paint_style(paint_context, layout_node()->computed_values().stroke());
|
|
|
|
}
|
|
|
|
|
2023-09-10 14:10:55 +01:00
|
|
|
JS::GCPtr<SVG::SVGMaskElement const> SVGGraphicsElement::mask() const
|
|
|
|
{
|
|
|
|
auto const& mask_reference = layout_node()->computed_values().mask();
|
|
|
|
if (!mask_reference.has_value())
|
|
|
|
return {};
|
|
|
|
return try_resolve_url_to<SVG::SVGMaskElement const>(mask_reference->url());
|
|
|
|
}
|
|
|
|
|
2024-03-27 00:06:35 +00:00
|
|
|
JS::GCPtr<SVG::SVGClipPathElement const> SVGGraphicsElement::clip_path() const
|
|
|
|
{
|
|
|
|
auto const& clip_path_reference = layout_node()->computed_values().clip_path();
|
2024-05-26 00:25:05 +01:00
|
|
|
if (!clip_path_reference.has_value() || !clip_path_reference->is_url())
|
2024-03-27 00:06:35 +00:00
|
|
|
return {};
|
|
|
|
return try_resolve_url_to<SVG::SVGClipPathElement const>(clip_path_reference->url());
|
|
|
|
}
|
|
|
|
|
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;
|
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 })
|
2023-09-09 14:43:39 +02:00
|
|
|
.rotate_radians(AK::to_radians(rotate.a))
|
2023-04-10 12:25:40 +01:00
|
|
|
.translate({ -rotate.x, -rotate.y }));
|
|
|
|
},
|
|
|
|
[&](Transform::SkewX const& skew_x) {
|
2023-09-09 14:43:39 +02:00
|
|
|
affine_transform.multiply(Gfx::AffineTransform {}.skew_radians(AK::to_radians(skew_x.a), 0));
|
2023-04-10 12:25:40 +01:00
|
|
|
},
|
|
|
|
[&](Transform::SkewY const& skew_y) {
|
2023-09-09 14:43:39 +02:00
|
|
|
affine_transform.multiply(Gfx::AffineTransform {}.skew_radians(0, AK::to_radians(skew_y.a)));
|
2023-04-10 12:25:40 +01:00
|
|
|
},
|
|
|
|
[&](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
|
|
|
|
{
|
|
|
|
Gfx::AffineTransform transform = m_transform;
|
2023-05-28 18:27:35 +01:00
|
|
|
for (auto* svg_ancestor = shadow_including_first_ancestor_of_type<SVGGraphicsElement>(); svg_ancestor; svg_ancestor = svg_ancestor->shadow_including_first_ancestor_of_type<SVGGraphicsElement>()) {
|
2023-08-31 08:58:41 +01:00
|
|
|
transform = Gfx::AffineTransform { svg_ancestor->element_transform() }.multiply(transform);
|
2023-04-10 12:25:40 +01:00
|
|
|
}
|
|
|
|
return transform;
|
|
|
|
}
|
|
|
|
|
2023-11-12 11:54:13 +00:00
|
|
|
struct NamedPropertyID {
|
|
|
|
NamedPropertyID(CSS::PropertyID property_id)
|
|
|
|
: id(property_id)
|
|
|
|
, name(CSS::string_from_property_id(property_id))
|
|
|
|
{
|
|
|
|
}
|
|
|
|
|
|
|
|
CSS::PropertyID id;
|
|
|
|
StringView name;
|
|
|
|
};
|
|
|
|
|
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
|
|
|
{
|
2024-04-18 15:32:56 -04:00
|
|
|
static Array const attribute_style_properties {
|
2023-11-12 11:54:13 +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.
|
|
|
|
NamedPropertyID(CSS::PropertyID::Fill),
|
|
|
|
// FIXME: The `stroke` attribute and CSS `stroke` property are not the same! But our support is limited enough that they are equivalent for now.
|
|
|
|
NamedPropertyID(CSS::PropertyID::Stroke),
|
|
|
|
NamedPropertyID(CSS::PropertyID::StrokeWidth),
|
|
|
|
NamedPropertyID(CSS::PropertyID::FillRule),
|
|
|
|
NamedPropertyID(CSS::PropertyID::FillOpacity),
|
|
|
|
NamedPropertyID(CSS::PropertyID::StrokeOpacity),
|
|
|
|
NamedPropertyID(CSS::PropertyID::Opacity),
|
|
|
|
NamedPropertyID(CSS::PropertyID::TextAnchor),
|
|
|
|
NamedPropertyID(CSS::PropertyID::FontSize),
|
2023-11-12 12:22:16 +00:00
|
|
|
NamedPropertyID(CSS::PropertyID::Mask),
|
2024-03-27 00:06:35 +00:00
|
|
|
NamedPropertyID(CSS::PropertyID::MaskType),
|
|
|
|
NamedPropertyID(CSS::PropertyID::ClipPath),
|
2024-05-12 20:19:43 +01:00
|
|
|
NamedPropertyID(CSS::PropertyID::ClipRule),
|
2023-11-12 11:54:13 +00:00
|
|
|
};
|
|
|
|
|
2023-09-25 15:28:05 +01:00
|
|
|
CSS::Parser::ParsingContext parsing_context { document(), CSS::Parser::ParsingContext::Mode::SVGPresentationAttribute };
|
2022-01-24 15:43:44 +00:00
|
|
|
for_each_attribute([&](auto& name, auto& value) {
|
2023-11-12 11:54:13 +00:00
|
|
|
for (auto property : attribute_style_properties) {
|
|
|
|
if (!name.equals_ignoring_ascii_case(property.name))
|
|
|
|
continue;
|
|
|
|
if (auto style_value = parse_css_value(parsing_context, value, property.id))
|
|
|
|
style.set_property(property.id, style_value.release_nonnull());
|
|
|
|
break;
|
2022-01-24 15:43:44 +00:00
|
|
|
}
|
|
|
|
});
|
2020-07-22 15:17:39 -07:00
|
|
|
}
|
|
|
|
|
2024-05-12 20:19:43 +01:00
|
|
|
static FillRule to_svg_fill_rule(CSS::FillRule fill_rule)
|
2023-06-11 16:43:46 +01:00
|
|
|
{
|
2024-05-12 20:19:43 +01:00
|
|
|
switch (fill_rule) {
|
2023-06-11 16:43:46 +01:00
|
|
|
case CSS::FillRule::Nonzero:
|
|
|
|
return FillRule::Nonzero;
|
|
|
|
case CSS::FillRule::Evenodd:
|
|
|
|
return FillRule::Evenodd;
|
|
|
|
default:
|
|
|
|
VERIFY_NOT_REACHED();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-05-12 20:19:43 +01:00
|
|
|
Optional<FillRule> SVGGraphicsElement::fill_rule() const
|
|
|
|
{
|
|
|
|
if (!layout_node())
|
|
|
|
return {};
|
|
|
|
return to_svg_fill_rule(layout_node()->computed_values().fill_rule());
|
|
|
|
}
|
|
|
|
|
|
|
|
Optional<ClipRule> SVGGraphicsElement::clip_rule() const
|
|
|
|
{
|
|
|
|
if (!layout_node())
|
|
|
|
return {};
|
|
|
|
return to_svg_fill_rule(layout_node()->computed_values().clip_rule());
|
|
|
|
}
|
|
|
|
|
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
|
2023-06-15 16:51:17 +01:00
|
|
|
auto width = layout_node()->computed_values().stroke_width();
|
|
|
|
// 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.
|
|
|
|
CSSPixels viewport_width = 0;
|
|
|
|
CSSPixels viewport_height = 0;
|
|
|
|
if (auto* svg_svg_element = shadow_including_first_ancestor_of_type<SVGSVGElement>()) {
|
2024-05-02 22:32:44 +12:00
|
|
|
if (auto svg_svg_layout_node = svg_svg_element->layout_node()) {
|
2023-06-15 16:51:17 +01: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
|
|
|
}
|
2022-01-14 16:52:14 +00:00
|
|
|
}
|
2023-08-26 15:03:04 +01:00
|
|
|
auto scaled_viewport_size = (viewport_width + viewport_height) * CSSPixels(0.5);
|
2023-06-15 16:51:17 +01:00
|
|
|
return width.to_px(*layout_node(), scaled_viewport_size).to_double();
|
2021-09-16 12:28:14 +01:00
|
|
|
}
|
|
|
|
|
2024-04-01 00:49:02 +01:00
|
|
|
JS::NonnullGCPtr<Geometry::DOMRect> SVGGraphicsElement::get_b_box(Optional<SVGBoundingBoxOptions>)
|
|
|
|
{
|
2024-04-20 23:10:26 +01:00
|
|
|
// FIXME: It should be possible to compute this without layout updates. The bounding box is within the
|
|
|
|
// SVG coordinate space (before any viewbox or other transformations), so it should be possible to
|
|
|
|
// calculate this from SVG geometry without a full layout tree (at least for simple cases).
|
|
|
|
// See: https://svgwg.org/svg2-draft/coords.html#BoundingBoxes
|
|
|
|
const_cast<DOM::Document&>(document()).update_layout();
|
|
|
|
if (!layout_node())
|
|
|
|
return Geometry::DOMRect::create(realm());
|
|
|
|
// Invert the SVG -> screen space transform.
|
|
|
|
auto svg_element_rect = shadow_including_first_ancestor_of_type<SVG::SVGSVGElement>()->paintable_box()->absolute_rect();
|
|
|
|
auto inverse_transform = static_cast<Painting::SVGGraphicsPaintable&>(*paintable_box()).computed_transforms().svg_to_css_pixels_transform().inverse();
|
2024-07-21 23:29:06 +01:00
|
|
|
auto translated_rect = paintable_box()->absolute_rect().to_type<float>().translated(-svg_element_rect.location().to_type<float>());
|
|
|
|
if (inverse_transform.has_value())
|
|
|
|
translated_rect = inverse_transform->map(translated_rect);
|
|
|
|
return Geometry::DOMRect::create(realm(), translated_rect);
|
2024-04-01 00:49:02 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
JS::NonnullGCPtr<SVGAnimatedTransformList> SVGGraphicsElement::transform() const
|
|
|
|
{
|
|
|
|
dbgln("(STUBBED) SVGGraphicsElement::transform(). Called on: {}", debug_description());
|
|
|
|
auto base_val = SVGTransformList::create(realm());
|
|
|
|
auto anim_val = SVGTransformList::create(realm());
|
|
|
|
return SVGAnimatedTransformList::create(realm(), base_val, anim_val);
|
|
|
|
}
|
|
|
|
|
2020-07-22 15:17:39 -07:00
|
|
|
}
|