diff --git a/Base/res/html/misc/svg.html b/Base/res/html/misc/svg.html index fd0062020d..0d02d71ed4 100644 --- a/Base/res/html/misc/svg.html +++ b/Base/res/html/misc/svg.html @@ -11,7 +11,7 @@ - + @@ -40,6 +40,13 @@ a 10,30 20 0,1 30,10 l 30,10 a 10,40 20 0,1 30,10 l 30,10 z"> + + + + + + + diff --git a/Userland/Libraries/LibWeb/Bindings/NodeWrapperFactory.cpp b/Userland/Libraries/LibWeb/Bindings/NodeWrapperFactory.cpp index eed54b961c..2af9ccd4e3 100644 --- a/Userland/Libraries/LibWeb/Bindings/NodeWrapperFactory.cpp +++ b/Userland/Libraries/LibWeb/Bindings/NodeWrapperFactory.cpp @@ -83,6 +83,7 @@ #include #include #include +#include #include #include #include @@ -157,6 +158,7 @@ #include #include #include +#include #include namespace Web::Bindings { @@ -311,6 +313,8 @@ NodeWrapper* wrap(JS::GlobalObject& global_object, DOM::Node& node) return static_cast(wrap_impl(global_object, verify_cast(node))); if (is(node)) return static_cast(wrap_impl(global_object, verify_cast(node))); + if (is(node)) + return static_cast(wrap_impl(global_object, verify_cast(node))); if (is(node)) return static_cast(wrap_impl(global_object, verify_cast(node))); if (is(node)) diff --git a/Userland/Libraries/LibWeb/Bindings/WindowObjectHelper.h b/Userland/Libraries/LibWeb/Bindings/WindowObjectHelper.h index deb454f5ed..945502d64e 100644 --- a/Userland/Libraries/LibWeb/Bindings/WindowObjectHelper.h +++ b/Userland/Libraries/LibWeb/Bindings/WindowObjectHelper.h @@ -255,6 +255,8 @@ #include #include #include +#include +#include #include #include #include @@ -435,6 +437,7 @@ ADD_WINDOW_OBJECT_INTERFACE(SVGGeometryElement) \ ADD_WINDOW_OBJECT_INTERFACE(SVGGraphicsElement) \ ADD_WINDOW_OBJECT_INTERFACE(SVGPathElement) \ + ADD_WINDOW_OBJECT_INTERFACE(SVGRectElement) \ ADD_WINDOW_OBJECT_INTERFACE(SVGSVGElement) \ ADD_WINDOW_OBJECT_INTERFACE(Text) \ ADD_WINDOW_OBJECT_INTERFACE(TextEncoder) \ diff --git a/Userland/Libraries/LibWeb/CMakeLists.txt b/Userland/Libraries/LibWeb/CMakeLists.txt index 0090210ed1..ec8bc6edf9 100644 --- a/Userland/Libraries/LibWeb/CMakeLists.txt +++ b/Userland/Libraries/LibWeb/CMakeLists.txt @@ -271,6 +271,7 @@ set(SOURCES SVG/SVGGeometryElement.cpp SVG/SVGGraphicsElement.cpp SVG/SVGPathElement.cpp + SVG/SVGRectElement.cpp SVG/SVGSVGElement.cpp SVG/TagNames.cpp SVG/ViewBox.cpp @@ -513,6 +514,7 @@ libweb_js_wrapper(SVG/SVGElement) libweb_js_wrapper(SVG/SVGGeometryElement) libweb_js_wrapper(SVG/SVGGraphicsElement) libweb_js_wrapper(SVG/SVGPathElement) +libweb_js_wrapper(SVG/SVGRectElement) libweb_js_wrapper(SVG/SVGSVGElement) libweb_js_wrapper(Selection/Selection) libweb_js_wrapper(UIEvents/FocusEvent) diff --git a/Userland/Libraries/LibWeb/DOM/ElementFactory.cpp b/Userland/Libraries/LibWeb/DOM/ElementFactory.cpp index 50a3522266..afde1ff1ed 100644 --- a/Userland/Libraries/LibWeb/DOM/ElementFactory.cpp +++ b/Userland/Libraries/LibWeb/DOM/ElementFactory.cpp @@ -78,6 +78,7 @@ #include #include #include +#include #include #include @@ -236,6 +237,8 @@ NonnullRefPtr create_element(Document& document, const FlyString& tag_n return adopt_ref(*new SVG::SVGSVGElement(document, move(qualified_name))); if (lowercase_tag_name == SVG::TagNames::path) return adopt_ref(*new SVG::SVGPathElement(document, move(qualified_name))); + if (lowercase_tag_name == SVG::TagNames::rect) + return adopt_ref(*new SVG::SVGRectElement(document, move(qualified_name))); if (lowercase_tag_name == SVG::TagNames::g) return adopt_ref(*new SVG::SVGGElement(document, move(qualified_name))); diff --git a/Userland/Libraries/LibWeb/Forward.h b/Userland/Libraries/LibWeb/Forward.h index 33fd353fc1..8dead35fb5 100644 --- a/Userland/Libraries/LibWeb/Forward.h +++ b/Userland/Libraries/LibWeb/Forward.h @@ -248,6 +248,7 @@ class SVGElement; class SVGGeometryElement; class SVGGraphicsElement; class SVGPathElement; +class SVGRectElement; class SVGSVGElement; } @@ -453,6 +454,7 @@ class SVGElementWrapper; class SVGGeometryElementWrapper; class SVGGraphicsElementWrapper; class SVGPathElementWrapper; +class SVGRectElementWrapper; class SVGSVGElementWrapper; class TextEncoderWrapper; class TextMetricsWrapper; diff --git a/Userland/Libraries/LibWeb/SVG/AttributeNames.h b/Userland/Libraries/LibWeb/SVG/AttributeNames.h index e8c746eab4..0cc3af1844 100644 --- a/Userland/Libraries/LibWeb/SVG/AttributeNames.h +++ b/Userland/Libraries/LibWeb/SVG/AttributeNames.h @@ -54,6 +54,8 @@ namespace Web::SVG::AttributeNames { E(repeatCount) \ E(repeatDur) \ E(requiredExtensions) \ + E(rx) \ + E(ry) \ E(requiredFeatures) \ E(specularConstant) \ E(specularExponent) \ diff --git a/Userland/Libraries/LibWeb/SVG/SVGRectElement.cpp b/Userland/Libraries/LibWeb/SVG/SVGRectElement.cpp new file mode 100644 index 0000000000..9086a4c2c9 --- /dev/null +++ b/Userland/Libraries/LibWeb/SVG/SVGRectElement.cpp @@ -0,0 +1,153 @@ +/* + * Copyright (c) 2022, Sam Atkins + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#include "SVGRectElement.h" +#include +#include + +namespace Web::SVG { + +SVGRectElement::SVGRectElement(DOM::Document& document, QualifiedName qualified_name) + : SVGGeometryElement(document, qualified_name) +{ +} + +void SVGRectElement::parse_attribute(FlyString const& name, String const& value) +{ + SVGGeometryElement::parse_attribute(name, value); + + if (name == SVG::AttributeNames::x) { + m_x = AttributeParser::parse_coordinate(value); + m_path.clear(); + } else if (name == SVG::AttributeNames::y) { + m_y = AttributeParser::parse_coordinate(value); + m_path.clear(); + } else if (name == SVG::AttributeNames::width) { + m_width = AttributeParser::parse_positive_length(value); + m_path.clear(); + } else if (name == SVG::AttributeNames::height) { + m_height = AttributeParser::parse_positive_length(value); + m_path.clear(); + } else if (name == SVG::AttributeNames::rx) { + m_radius_x = AttributeParser::parse_length(value); + m_path.clear(); + } else if (name == SVG::AttributeNames::ry) { + m_radius_y = AttributeParser::parse_length(value); + m_path.clear(); + } +} + +Gfx::Path& SVGRectElement::get_path() +{ + if (m_path.has_value()) + return m_path.value(); + + float width = m_width.value_or(0); + float height = m_height.value_or(0); + float x = m_x.value_or(0); + float y = m_y.value_or(0); + + Gfx::Path path; + // If width or height is zero, rendering is disabled. + if (width == 0 && height == 0) { + m_path = move(path); + return m_path.value(); + } + + auto corner_radii = calculate_used_corner_radius_values(); + float rx = corner_radii.x(); + float ry = corner_radii.y(); + + // 1. perform an absolute moveto operation to location (x+rx,y); + path.move_to({ x + rx, y }); + + // 2, perform an absolute horizontal lineto with parameter x+width-rx; + path.horizontal_line_to(x + width - rx); + + // 3. if both rx and ry are greater than zero, + // perform an absolute elliptical arc operation to coordinate (x+width,y+ry), + // where rx and ry are used as the equivalent parameters to the elliptical arc command, + // the x-axis-rotation and large-arc-flag are set to zero, + // the sweep-flag is set to one; + double x_axis_rotation = 0; + bool large_arc_flag = false; + bool sweep_flag = true; + if (rx > 0 && ry > 0) + path.elliptical_arc_to({ x + width, y + ry }, corner_radii, x_axis_rotation, large_arc_flag, sweep_flag); + + // 4. perform an absolute vertical lineto parameter y+height-ry; + path.vertical_line_to(y + height - ry); + + // 5. if both rx and ry are greater than zero, + // perform an absolute elliptical arc operation to coordinate (x+width-rx,y+height), + // using the same parameters as previously; + if (rx > 0 && ry > 0) + path.elliptical_arc_to({ x + width - rx, y + height }, corner_radii, x_axis_rotation, large_arc_flag, sweep_flag); + + // 6. perform an absolute horizontal lineto parameter x+rx; + path.horizontal_line_to(x + rx); + + // 7. if both rx and ry are greater than zero, + // perform an absolute elliptical arc operation to coordinate (x,y+height-ry), + // using the same parameters as previously; + if (rx > 0 && ry > 0) + path.elliptical_arc_to({ x, y + height - ry }, corner_radii, x_axis_rotation, large_arc_flag, sweep_flag); + + // 8. perform an absolute vertical lineto parameter y+ry + path.vertical_line_to(y + ry); + + // 9. if both rx and ry are greater than zero, + // perform an absolute elliptical arc operation with a segment-completing close path operation, + // using the same parameters as previously. + if (rx > 0 && ry > 0) + path.elliptical_arc_to({ x + rx, y }, corner_radii, x_axis_rotation, large_arc_flag, sweep_flag); + + m_path = move(path); + return m_path.value(); +} + +Gfx::FloatPoint SVGRectElement::calculate_used_corner_radius_values() +{ + // 1. Let rx and ry be length values. + float rx = 0; + float ry = 0; + + // 2. If neither ‘rx’ nor ‘ry’ are properly specified, then set both rx and ry to 0. (This will result in square corners.) + if (!m_radius_x.has_value() && !m_radius_y.has_value()) { + rx = 0; + ry = 0; + } + // 3. Otherwise, if a properly specified value is provided for ‘rx’, but not for ‘ry’, then set both rx and ry to the value of ‘rx’. + else if (m_radius_x.has_value()) { + rx = m_radius_x.value(); + ry = m_radius_x.value(); + } + // 4. Otherwise, if a properly specified value is provided for ‘ry’, but not for ‘rx’, then set both rx and ry to the value of ‘ry’. + else if (m_radius_y.has_value()) { + rx = m_radius_y.value(); + ry = m_radius_y.value(); + } + // 5. Otherwise, both ‘rx’ and ‘ry’ were specified properly. Set rx to the value of ‘rx’ and ry to the value of ‘ry’. + else { + rx = m_radius_x.value(); + ry = m_radius_y.value(); + } + + // 6. If rx is greater than half of ‘width’, then set rx to half of ‘width’. + auto half_width = m_width.value_or(0) / 2; + if (rx > half_width) + rx = half_width; + + // 7. If ry is greater than half of ‘height’, then set ry to half of ‘height’. + auto half_height = m_height.value_or(0) / 2; + if (ry > half_height) + ry = half_height; + + // 8. The effective values of ‘rx’ and ‘ry’ are rx and ry, respectively. + return Gfx::FloatPoint { rx, ry }; +} + +} diff --git a/Userland/Libraries/LibWeb/SVG/SVGRectElement.h b/Userland/Libraries/LibWeb/SVG/SVGRectElement.h new file mode 100644 index 0000000000..e98b82d52f --- /dev/null +++ b/Userland/Libraries/LibWeb/SVG/SVGRectElement.h @@ -0,0 +1,38 @@ +/* + * Copyright (c) 2022, Sam Atkins + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#pragma once + +#include + +namespace Web::SVG { + +// https://www.w3.org/TR/SVG11/shapes.html#RectElement +class SVGRectElement final : public SVGGeometryElement { +public: + using WrapperType = Bindings::SVGRectElementWrapper; + + SVGRectElement(DOM::Document&, QualifiedName); + virtual ~SVGRectElement() override = default; + + virtual void parse_attribute(FlyString const& name, String const& value) override; + + virtual Gfx::Path& get_path() override; + +private: + Gfx::FloatPoint calculate_used_corner_radius_values(); + + Optional m_path; + + Optional m_x; + Optional m_y; + Optional m_width; + Optional m_height; + Optional m_radius_x; + Optional m_radius_y; +}; + +} diff --git a/Userland/Libraries/LibWeb/SVG/SVGRectElement.idl b/Userland/Libraries/LibWeb/SVG/SVGRectElement.idl new file mode 100644 index 0000000000..40544b7f0b --- /dev/null +++ b/Userland/Libraries/LibWeb/SVG/SVGRectElement.idl @@ -0,0 +1,9 @@ +[Exposed=Window] +interface SVGRectElement : SVGGeometryElement { + // [SameObject] readonly attribute SVGAnimatedLength x; + // [SameObject] readonly attribute SVGAnimatedLength y; + // [SameObject] readonly attribute SVGAnimatedLength width; + // [SameObject] readonly attribute SVGAnimatedLength height; + // [SameObject] readonly attribute SVGAnimatedLength rx; + // [SameObject] readonly attribute SVGAnimatedLength ry; +}; diff --git a/Userland/Libraries/LibWeb/SVG/TagNames.h b/Userland/Libraries/LibWeb/SVG/TagNames.h index 072a404bae..f6791cdeed 100644 --- a/Userland/Libraries/LibWeb/SVG/TagNames.h +++ b/Userland/Libraries/LibWeb/SVG/TagNames.h @@ -13,6 +13,7 @@ namespace Web::SVG::TagNames { #define ENUMERATE_SVG_GRAPHICS_TAGS \ __ENUMERATE_SVG_TAG(g) \ __ENUMERATE_SVG_TAG(path) \ + __ENUMERATE_SVG_TAG(rect) \ __ENUMERATE_SVG_TAG(svg) #define ENUMERATE_SVG_TAGS \