LibWeb: Add SVG <circle> element and test case :^)

This commit is contained in:
Sam Atkins 2022-02-11 16:14:58 +00:00 committed by Andreas Kling
parent 1dde6a0a2b
commit 21bdcee3c3
Notes: sideshowbarker 2024-07-17 19:00:36 +09:00
11 changed files with 132 additions and 0 deletions

View File

@ -47,6 +47,9 @@
<g transform="translate(450 450) rotate(-30)">
<rect x="0" y="0" width="120" height="60" rx="15" fill="none" stroke="purple" stroke-width="9" />
</g>
<!-- Based on https://svgwg.org/svg2-draft/shapes.html#CircleElement -->
<circle cx="100" cy="550" r="40" fill="red" stroke="blue" stroke-width="4" />
</svg>
</body>
</html>

View File

@ -82,6 +82,7 @@
#include <LibWeb/Bindings/HTMLVideoElementWrapper.h>
#include <LibWeb/Bindings/NodeWrapper.h>
#include <LibWeb/Bindings/NodeWrapperFactory.h>
#include <LibWeb/Bindings/SVGCircleElementWrapper.h>
#include <LibWeb/Bindings/SVGPathElementWrapper.h>
#include <LibWeb/Bindings/SVGRectElementWrapper.h>
#include <LibWeb/Bindings/SVGSVGElementWrapper.h>
@ -157,6 +158,7 @@
#include <LibWeb/HTML/HTMLUListElement.h>
#include <LibWeb/HTML/HTMLUnknownElement.h>
#include <LibWeb/HTML/HTMLVideoElement.h>
#include <LibWeb/SVG/SVGCircleElement.h>
#include <LibWeb/SVG/SVGPathElement.h>
#include <LibWeb/SVG/SVGRectElement.h>
#include <LibWeb/SVG/SVGSVGElement.h>
@ -311,6 +313,8 @@ NodeWrapper* wrap(JS::GlobalObject& global_object, DOM::Node& node)
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<HTML::HTMLElement>(node)));
if (is<SVG::SVGSVGElement>(node))
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGSVGElement>(node)));
if (is<SVG::SVGCircleElement>(node))
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGCircleElement>(node)));
if (is<SVG::SVGPathElement>(node))
return static_cast<NodeWrapper*>(wrap_impl(global_object, verify_cast<SVG::SVGPathElement>(node)));
if (is<SVG::SVGRectElement>(node))

View File

@ -247,6 +247,8 @@
#include <LibWeb/Bindings/RangePrototype.h>
#include <LibWeb/Bindings/ResizeObserverConstructor.h>
#include <LibWeb/Bindings/ResizeObserverPrototype.h>
#include <LibWeb/Bindings/SVGCircleElementConstructor.h>
#include <LibWeb/Bindings/SVGCircleElementPrototype.h>
#include <LibWeb/Bindings/SVGElementConstructor.h>
#include <LibWeb/Bindings/SVGElementPrototype.h>
#include <LibWeb/Bindings/SVGGeometryElementConstructor.h>
@ -434,6 +436,7 @@
ADD_WINDOW_OBJECT_INTERFACE(SubmitEvent) \
ADD_WINDOW_OBJECT_INTERFACE(SubtleCrypto) \
ADD_WINDOW_OBJECT_INTERFACE(SVGElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGCircleElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGGeometryElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGGraphicsElement) \
ADD_WINDOW_OBJECT_INTERFACE(SVGPathElement) \

View File

@ -271,6 +271,7 @@ set(SOURCES
SVG/SVGGeometryElement.cpp
SVG/SVGGraphicsElement.cpp
SVG/SVGPathElement.cpp
SVG/SVGCircleElement.cpp
SVG/SVGRectElement.cpp
SVG/SVGSVGElement.cpp
SVG/TagNames.cpp
@ -513,6 +514,7 @@ libweb_js_wrapper(ResizeObserver/ResizeObserver)
libweb_js_wrapper(SVG/SVGElement)
libweb_js_wrapper(SVG/SVGGeometryElement)
libweb_js_wrapper(SVG/SVGGraphicsElement)
libweb_js_wrapper(SVG/SVGCircleElement)
libweb_js_wrapper(SVG/SVGPathElement)
libweb_js_wrapper(SVG/SVGRectElement)
libweb_js_wrapper(SVG/SVGSVGElement)

View File

@ -76,6 +76,7 @@
#include <LibWeb/HTML/HTMLUListElement.h>
#include <LibWeb/HTML/HTMLUnknownElement.h>
#include <LibWeb/HTML/HTMLVideoElement.h>
#include <LibWeb/SVG/SVGCircleElement.h>
#include <LibWeb/SVG/SVGGElement.h>
#include <LibWeb/SVG/SVGPathElement.h>
#include <LibWeb/SVG/SVGRectElement.h>
@ -235,6 +236,8 @@ NonnullRefPtr<Element> create_element(Document& document, const FlyString& tag_n
return adopt_ref(*new HTML::HTMLElement(document, move(qualified_name)));
if (lowercase_tag_name == SVG::TagNames::svg)
return adopt_ref(*new SVG::SVGSVGElement(document, move(qualified_name)));
if (lowercase_tag_name == SVG::TagNames::circle)
return adopt_ref(*new SVG::SVGCircleElement(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)

View File

@ -244,6 +244,7 @@ class ResizeObserver;
}
namespace Web::SVG {
class SVGCircleElement;
class SVGElement;
class SVGGeometryElement;
class SVGGraphicsElement;
@ -450,6 +451,7 @@ class StyleSheetListWrapper;
class StyleSheetWrapper;
class SubmitEventWrapper;
class SubtleCryptoWrapper;
class SVGCircleElementWrapper;
class SVGElementWrapper;
class SVGGeometryElementWrapper;
class SVGGraphicsElementWrapper;

View File

@ -19,6 +19,8 @@ namespace Web::SVG::AttributeNames {
E(clipPathUnits) \
E(contentScriptType) \
E(contentStyleType) \
E(cx) \
E(cy) \
E(diffuseConstant) \
E(edgeMode) \
E(filterUnits) \
@ -49,6 +51,7 @@ namespace Web::SVG::AttributeNames {
E(preserveAlpha) \
E(preserveAspectRatio) \
E(primitiveUnits) \
E(r) \
E(refX) \
E(refY) \
E(repeatCount) \

View File

@ -0,0 +1,73 @@
/*
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "SVGCircleElement.h"
#include <LibWeb/SVG/AttributeNames.h>
#include <LibWeb/SVG/AttributeParser.h>
namespace Web::SVG {
SVGCircleElement::SVGCircleElement(DOM::Document& document, QualifiedName qualified_name)
: SVGGeometryElement(document, qualified_name)
{
}
void SVGCircleElement::parse_attribute(FlyString const& name, String const& value)
{
SVGGeometryElement::parse_attribute(name, value);
if (name == SVG::AttributeNames::cx) {
m_center_x = AttributeParser::parse_coordinate(value);
m_path.clear();
} else if (name == SVG::AttributeNames::cy) {
m_center_y = AttributeParser::parse_coordinate(value);
m_path.clear();
} else if (name == SVG::AttributeNames::r) {
m_radius = AttributeParser::parse_positive_length(value);
m_path.clear();
}
}
Gfx::Path& SVGCircleElement::get_path()
{
if (m_path.has_value())
return m_path.value();
float cx = m_center_x.value_or(0);
float cy = m_center_y.value_or(0);
float r = m_radius.value_or(0);
Gfx::Path path;
// A zero radius disables rendering.
if (r == 0) {
m_path = move(path);
return m_path.value();
}
bool large_arc = false;
bool sweep = true;
// 1. A move-to command to the point cx+r,cy;
path.move_to({ cx + r, cy });
// 2. arc to cx,cy+r;
path.arc_to({ cx, cy + r }, r, large_arc, sweep);
// 3. arc to cx-r,cy;
path.arc_to({ cx - r, cy }, r, large_arc, sweep);
// 4. arc to cx,cy-r;
path.arc_to({ cx, cy - r }, r, large_arc, sweep);
// 5. arc with a segment-completing close path operation.
path.arc_to({ cx + r, cy }, r, large_arc, sweep);
m_path = move(path);
return m_path.value();
}
}

View File

@ -0,0 +1,32 @@
/*
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibWeb/SVG/SVGGeometryElement.h>
namespace Web::SVG {
class SVGCircleElement final : public SVGGeometryElement {
public:
using WrapperType = Bindings::SVGCircleElementWrapper;
SVGCircleElement(DOM::Document&, QualifiedName);
virtual ~SVGCircleElement() override = default;
virtual void parse_attribute(FlyString const& name, String const& value) override;
virtual Gfx::Path& get_path() override;
private:
Optional<Gfx::Path> m_path;
Optional<float> m_center_x;
Optional<float> m_center_y;
Optional<float> m_radius;
};
}

View File

@ -0,0 +1,6 @@
[Exposed=Window]
interface SVGCircleElement : SVGGeometryElement {
// [SameObject] readonly attribute SVGAnimatedLength cx;
// [SameObject] readonly attribute SVGAnimatedLength cy;
// [SameObject] readonly attribute SVGAnimatedLength r;
};

View File

@ -11,6 +11,7 @@
namespace Web::SVG::TagNames {
#define ENUMERATE_SVG_GRAPHICS_TAGS \
__ENUMERATE_SVG_TAG(circle) \
__ENUMERATE_SVG_TAG(g) \
__ENUMERATE_SVG_TAG(path) \
__ENUMERATE_SVG_TAG(rect) \