1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-14 09:34:59 +00:00

LibWeb: Add initial support for SVG <textPath>

This patch adds basic support for the SVG `<textPath>`, so it supports
placing text along a path, but none of the extra attributes for
controlling the layout of the text. This is enough to correctly display
the MDN example.
This commit is contained in:
MacDue 2023-12-17 18:35:21 +00:00 committed by Andreas Kling
parent d327104910
commit 809c5b0b03
11 changed files with 171 additions and 0 deletions

View file

@ -458,6 +458,7 @@ set(SOURCES
Layout/SVGGraphicsBox.cpp
Layout/SVGSVGBox.cpp
Layout/SVGTextBox.cpp
Layout/SVGTextPathBox.cpp
Layout/TableFormattingContext.cpp
Layout/TableGrid.cpp
Layout/TableWrapper.cpp
@ -584,6 +585,7 @@ set(SOURCES
SVG/SVGSymbolElement.cpp
SVG/SVGTextContentElement.cpp
SVG/SVGTextElement.cpp
SVG/SVGTextPathElement.cpp
SVG/SVGTextPositioningElement.cpp
SVG/SVGTitleElement.cpp
SVG/SVGTSpanElement.cpp

View file

@ -105,6 +105,7 @@
#include <LibWeb/SVG/SVGSymbolElement.h>
#include <LibWeb/SVG/SVGTSpanElement.h>
#include <LibWeb/SVG/SVGTextElement.h>
#include <LibWeb/SVG/SVGTextPathElement.h>
#include <LibWeb/SVG/SVGTitleElement.h>
#include <LibWeb/SVG/SVGUseElement.h>
#include <LibWeb/SVG/TagNames.h>
@ -468,6 +469,8 @@ static JS::GCPtr<SVG::SVGElement> create_svg_element(JS::Realm& realm, Document&
return realm.heap().allocate<SVG::SVGSymbolElement>(realm, document, move(qualified_name));
if (local_name == SVG::TagNames::text)
return realm.heap().allocate<SVG::SVGTextElement>(realm, document, move(qualified_name));
if (local_name == SVG::TagNames::textPath)
return realm.heap().allocate<SVG::SVGTextPathElement>(realm, document, move(qualified_name));
if (local_name == SVG::TagNames::title)
return realm.heap().allocate<SVG::SVGTitleElement>(realm, document, move(qualified_name));
if (local_name == SVG::TagNames::tspan)

View file

@ -9,11 +9,14 @@
#include <AK/Debug.h>
#include <LibGfx/BoundingBox.h>
#include <LibGfx/Font/ScaledFont.h>
#include <LibGfx/TextLayout.h>
#include <LibWeb/Layout/BlockFormattingContext.h>
#include <LibWeb/Layout/SVGFormattingContext.h>
#include <LibWeb/Layout/SVGGeometryBox.h>
#include <LibWeb/Layout/SVGSVGBox.h>
#include <LibWeb/Layout/SVGTextBox.h>
#include <LibWeb/Layout/SVGTextPathBox.h>
#include <LibWeb/SVG/SVGForeignObjectElement.h>
#include <LibWeb/SVG/SVGGElement.h>
#include <LibWeb/SVG/SVGMaskElement.h>
@ -253,6 +256,18 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
path.move_to(text_offset);
path.text(text_utf8, font);
} else if (is<SVGTextPathBox>(descendant)) {
auto& text_path_element = static_cast<SVG::SVGTextPathElement&>(dom_node);
auto path_or_shape = text_path_element.path_or_shape();
if (!path_or_shape)
return IterationDecision::Continue;
auto& font = graphics_box.first_available_font();
auto text_contents = text_path_element.text_contents();
Utf8View text_utf8 { text_contents };
auto shape_path = const_cast<SVG::SVGGeometryElement&>(*path_or_shape).get_path();
path = shape_path.place_text_along(text_utf8, font);
}
auto path_bounding_box = to_css_pixels_transform.map(path.bounding_box()).to_type<CSSPixels>();

View file

@ -0,0 +1,22 @@
/*
* Copyright (c) 2023, MacDue <macdue@dueutil.tech>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibWeb/Layout/SVGTextPathBox.h>
#include <LibWeb/Painting/SVGPathPaintable.h>
namespace Web::Layout {
SVGTextPathBox::SVGTextPathBox(DOM::Document& document, SVG::SVGTextPathElement& element, NonnullRefPtr<CSS::StyleProperties> properties)
: SVGGraphicsBox(document, element, properties)
{
}
JS::GCPtr<Painting::Paintable> SVGTextPathBox::create_paintable() const
{
return Painting::SVGPathPaintable::create(*this);
}
}

View file

@ -0,0 +1,30 @@
/*
* Copyright (c) 2023, MacDue <macdue@dueutil.tech>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibWeb/Layout/SVGGraphicsBox.h>
#include <LibWeb/SVG/SVGTextPathElement.h>
namespace Web::Layout {
class SVGTextPathBox final : public SVGGraphicsBox {
JS_CELL(SVGTextPathBox, SVGGraphicsBox);
public:
SVGTextPathBox(DOM::Document&, SVG::SVGTextPathElement&, NonnullRefPtr<CSS::StyleProperties>);
virtual ~SVGTextPathBox() override = default;
SVG::SVGTextPathElement& dom_node() { return static_cast<SVG::SVGTextPathElement&>(SVGGraphicsBox::dom_node()); }
SVG::SVGTextPathElement const& dom_node() const { return static_cast<SVG::SVGTextPathElement const&>(SVGGraphicsBox::dom_node()); }
virtual JS::GCPtr<Painting::Paintable> create_paintable() const override;
private:
CSSPixelPoint viewbox_origin() const;
};
}

View file

@ -0,0 +1,41 @@
/*
* Copyright (c) 2023, MacDue <macdue@dueutil.tech>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <AK/URL.h>
#include <LibWeb/Layout/SVGTextPathBox.h>
#include <LibWeb/SVG/AttributeNames.h>
#include <LibWeb/SVG/SVGTextPathElement.h>
namespace Web::SVG {
JS_DEFINE_ALLOCATOR(SVGTextPathElement);
SVGTextPathElement::SVGTextPathElement(DOM::Document& document, DOM::QualifiedName qualified_name)
: SVGTextContentElement(document, move(qualified_name))
{
}
JS::GCPtr<SVGGeometryElement const> SVGTextPathElement::path_or_shape() const
{
auto href = get_attribute(AttributeNames::href);
if (!href.has_value())
return {};
auto url = document().url().complete_url(*href);
return try_resolve_url_to<SVGGeometryElement const>(url);
}
void SVGTextPathElement::initialize(JS::Realm& realm)
{
Base::initialize(realm);
set_prototype(&Bindings::ensure_web_prototype<Bindings::SVGTextPathElementPrototype>(realm, "SVGTextPathElement"_fly_string));
}
JS::GCPtr<Layout::Node> SVGTextPathElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style)
{
return heap().allocate_without_realm<Layout::SVGTextPathBox>(document(), *this, move(style));
}
};

View file

@ -0,0 +1,30 @@
/*
* Copyright (c) 2023, MacDue <macdue@dueutil.tech>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibWeb/SVG/SVGGeometryElement.h>
#include <LibWeb/SVG/SVGTextContentElement.h>
namespace Web::SVG {
// https://svgwg.org/svg2-draft/text.html#TextPathElement
class SVGTextPathElement : public SVGTextContentElement {
WEB_PLATFORM_OBJECT(SVGTextPathElement, SVGTextContentElement);
JS_DECLARE_ALLOCATOR(SVGTextPathElement);
public:
virtual JS::GCPtr<Layout::Node> create_layout_node(NonnullRefPtr<CSS::StyleProperties>) override;
JS::GCPtr<SVGGeometryElement const> path_or_shape() const;
protected:
SVGTextPathElement(DOM::Document&, DOM::QualifiedName);
virtual void initialize(JS::Realm&) override;
};
}

View file

@ -0,0 +1,23 @@
#import <SVG/SVGTextContentElement.idl>
#import <SVG/SVGURIReference.idl>
// https://svgwg.org/svg2-draft/text.html#InterfaceSVGTextPathElement
[Exposed=Window]
interface SVGTextPathElement : SVGTextContentElement {
// textPath Method Types
const unsigned short TEXTPATH_METHODTYPE_UNKNOWN = 0;
const unsigned short TEXTPATH_METHODTYPE_ALIGN = 1;
const unsigned short TEXTPATH_METHODTYPE_STRETCH = 2;
// textPath Spacing Types
const unsigned short TEXTPATH_SPACINGTYPE_UNKNOWN = 0;
const unsigned short TEXTPATH_SPACINGTYPE_AUTO = 1;
const unsigned short TEXTPATH_SPACINGTYPE_EXACT = 2;
// FIXME: [SameObject] readonly attribute SVGAnimatedLength startOffset;
// FIXME: [SameObject] readonly attribute SVGAnimatedEnumeration method;
// FIXME: [SameObject] readonly attribute SVGAnimatedEnumeration spacing;
};
SVGTextPathElement includes SVGURIReference;

View file

@ -0,0 +1,3 @@
interface mixin SVGURIReference {
// FIXME: [SameObject] readonly attribute SVGAnimatedString href;
};

View file

@ -22,6 +22,7 @@ namespace Web::SVG::TagNames {
__ENUMERATE_SVG_TAG(rect) \
__ENUMERATE_SVG_TAG(svg) \
__ENUMERATE_SVG_TAG(text) \
__ENUMERATE_SVG_TAG(textPath) \
__ENUMERATE_SVG_TAG(tspan)
#define ENUMERATE_SVG_TAGS \

View file

@ -253,6 +253,7 @@ libweb_js_bindings(SVG/SVGStyleElement)
libweb_js_bindings(SVG/SVGSymbolElement)
libweb_js_bindings(SVG/SVGTextContentElement)
libweb_js_bindings(SVG/SVGTextElement)
libweb_js_bindings(SVG/SVGTextPathElement)
libweb_js_bindings(SVG/SVGTextPositioningElement)
libweb_js_bindings(SVG/SVGTitleElement)
libweb_js_bindings(SVG/SVGTSpanElement)