vaev-layout: Add SVG support: shapes, foreign HTML/CSS content, nested SVG.

Author: pauloamed

src/vaev-dom/defs/ns-svg-attr-names.inc

@@ -5,15 +5,19 @@ ATTR(ATTRIBUTE_TYPE, attributeType)
 ATTR(BASE_FREQUENCY, baseFrequency)
 ATTR(BASE_PROFILE, baseProfile)
 ATTR(CALC_MODE, calcMode)
+ATTR(CLASS, class)
 ATTR(CLIP_PATH_UNITS, clipPathUnits)
 ATTR(CONTENT_SCRIPT_TYPE, contentScriptType)
 ATTR(CONTENT_STYLE_TYPE, contentStyleType)
 ATTR(CX, cx)
 ATTR(CY, cy)
+ATTR(D, d)
 ATTR(DX, dx)
 ATTR(DY, dy)
 ATTR(DIFFUSE_CONSTANT, diffuseConstant)
 ATTR(EDGE_MODE, edgeMode)
+ATTR(FILL, fill)
+ATTR(FILL_OPACITY, fill-opacity)
 ATTR(FILTER_UNITS, filterUnits)
 ATTR(FR, fr)
 ATTR(FX, fx)
@@ -23,6 +27,7 @@ ATTR(GRADIENT_TRANSFORM, gradientTransform)
 ATTR(GRADIENT_UNITS, gradientUnits)
 ATTR(HEIGHT, height)
 ATTR(HREF, href)
+ATTR(ID, id)
 ATTR(KERNEL_MATRIX, kernelMatrix)
 ATTR(KERNEL_UNIT_LENGTH, kernelUnitLength)
 ATTR(KEY_POINTS, keyPoints)
@@ -64,6 +69,9 @@ ATTR(SPREAD_METHOD, spreadMethod)
 ATTR(START_OFFSET, startOffset)
 ATTR(STD_DEVIATION, stdDeviation)
 ATTR(STITCH_TILES, stitchTiles)
+ATTR(STYLE, style)
+ATTR(STROKE, stroke)
+ATTR(STROKE_WIDTH, stroke-width)
 ATTR(SURFACE_SCALE, surfaceScale)
 ATTR(SYSTEM_LANGUAGE, systemLanguage)
 ATTR(TABLE_VALUES, tableValues)

src/vaev-dom/element.h

@@ -13,7 +13,21 @@ struct Element : Node {
     static constexpr auto TYPE = NodeType::ELEMENT;
 
     Opt<Str> id() const {
-        return this->getAttribute(Html::ID_ATTR);
+        if (tagName.ns == HTML)
+            return this->getAttribute(Html::ID_ATTR);
+        else if (tagName.ns == SVG)
+            return this->getAttribute(Svg::ID_ATTR);
+        else
+            return NONE;
+    }
+
+    Opt<Str> style() const {
+        if (tagName.ns == HTML)
+            return this->getAttribute(Html::STYLE_ATTR);
+        else if (tagName.ns == SVG)
+            return this->getAttribute(Svg::STYLE_ATTR);
+        else
+            return NONE;
     }
 
     TagName tagName;
@@ -55,7 +69,7 @@ struct Element : Node {
     }
 
     void setAttribute(AttrName name, String value) {
-        if (name == Html::CLASS_ATTR) {
+        if (name == Html::CLASS_ATTR or name == Svg::CLASS_ATTR) {
             for (auto class_ : iterSplit(value, ' ')) {
                 this->classList.add(class_);
             }

src/vaev-layout/base.cpp

@@ -6,6 +6,7 @@ module;
 #include <vaev-style/computer.h>
 
 export module Vaev.Layout:base;
+import :svg;
 
 namespace Vaev::Layout {
 
@@ -285,11 +286,39 @@ export struct InlineBox {
     }
 };
 
+struct SVGRoot {
+    using Element = Union<SVG::Shape, SVGRoot, ::Box<Box>>;
+    Vec<Element> elements;
+
+    Opt<ViewBox> viewBox;
+    Rc<Style::SpecifiedStyle> style;
+
+    void add(Element&& element) {
+        elements.pushBack(std::move(element));
+    }
+
+    void add(Box&& box);
+
+    SVGRoot(Rc<Style::SpecifiedStyle> style)
+        : viewBox(style->svg->viewBox), style(style) {}
+
+    void repr(Io::Emit& e) const {
+        e("(SVG {} viewBox:{}", SVG::buildRectangle(*style), viewBox);
+        e.indentNewline();
+        for (auto const& el : elements) {
+            e("{}", el);
+            e.newline();
+        }
+        e(")");
+    }
+};
+
 export using Content = Union<
     None,
     Vec<Box>,
     InlineBox,
-    Karm::Image::Picture>;
+    Karm::Image::Picture,
+    SVGRoot>;
 
 export struct Attrs {
     usize span = 1;
@@ -337,28 +366,36 @@ struct Box : Meta::NoCopy {
         }
     }
 
+    bool isReplaced() {
+        return content.is<Karm::Image::Picture>() or content.is<SVGRoot>();
+    }
+
     void repr(Io::Emit& e) const {
+        e("(box {} {} {}", attrs, style->display, style->position);
         if (children()) {
-            e("(box {} {} {}", attrs, style->display, style->position);
             e.indentNewline();
             for (auto& c : children()) {
                 c.repr(e);
                 e.newline();
             }
             e.deindent();
-            e(")");
         } else if (content.is<InlineBox>()) {
-            e("(box {} {} {}", attrs, style->display, style->position);
             e.indentNewline();
             e("{}", content.unwrap<InlineBox>());
             e.deindent();
-            e(")");
-        } else {
-            e("(box {} {} {})", attrs, style->display, style->position);
+        } else if (content.is<SVGRoot>()) {
+            e.indentNewline();
+            e("{}", content.unwrap<SVGRoot>());
+            e.deindent();
         }
+        e(")");
     }
 };
 
+void SVGRoot::add(Box&& box) {
+    add(makeBox<Box>(std::move(box)));
+}
+
 void InlineBox::add(Box&& b) {
     prose->append(Text::Prose::StrutCell{atomicBoxes.len()});
     atomicBoxes.pushBack(makeBox<Box>(std::move(b)));
@@ -414,10 +451,51 @@ export struct Metrics {
     }
 };
 
+export struct Frag;
+
+struct SVGRootFrag {
+    using Element = Union<SVG::ShapeFrag, SVGRootFrag, ::Box<Frag>>;
+    Vec<Element> elements = {};
+
+    // NOTE: SVG viewports have these intrinsic transformations; choosing to store these transforms is more compliant
+    // and somewhat rendering-friendly but makes it harder to debug
+    Math::Trans2f transf;
+    SVG::Rectangle<Au> boundingBox;
+
+    static SVGRootFrag build(SVGRoot const& box, Vec2Au position, Vec2Au viewportSize) {
+        SVG::Rectangle<Karm::Au> rect{position.x, position.y, viewportSize.x, viewportSize.y};
+
+        Math::Trans2f transf =
+            box.viewBox ? SVG::computeEquivalentTransformOfSVGViewport(*box.viewBox, position, viewportSize)
+                        : Math::Trans2f::translate(position.cast<f64>());
+
+        return {{}, transf, rect};
+    }
+
+    void add(Element&& el) {
+        elements.pushBack(std::move(el));
+    }
+
+    void repr(Io::Emit& e) const {
+        e("(SVGRootFrag)");
+    }
+
+    void offsetBoxFrags(Vec2Au d);
+
+    void offset(Vec2Au d) {
+        transf = transf.translated(d.cast<f64>());
+        offsetBoxFrags(d);
+    }
+};
+
+export using FragContent = Union<
+    Vec<Frag>,
+    SVGRootFrag>;
+
 export struct Frag {
     MutCursor<Box> box;
     Metrics metrics;
-    Vec<Frag> children;
+    FragContent content = Vec<Frag>{};
 
     Frag(MutCursor<Box> box) : box{std::move(box)} {}
 
@@ -430,16 +508,40 @@ export struct Frag {
     /// Offset the position of this fragment and its subtree.
     void offset(Vec2Au d) {
         metrics.position = metrics.position + d;
-        for (auto& c : children)
-            c.offset(d);
+
+        if (auto children = content.is<Vec<Frag>>()) {
+            for (auto& c : *children)
+                c.offset(d);
+        } else if (auto svg = content.is<SVGRootFrag>()) {
+            svg->offset(d);
+        }
+    }
+
+    MutSlice<Frag> children() {
+        if (auto children = content.is<Vec<Frag>>()) {
+            return *children;
+        }
+        return {};
     }
 
     /// Add a child fragment.
     void add(Frag&& frag) {
-        children.pushBack(std::move(frag));
+        if (auto children = content.is<Vec<Frag>>()) {
+            children->pushBack(std::move(frag));
+        }
     }
 };
 
+void SVGRootFrag::offsetBoxFrags(Vec2Au d) {
+    for (auto& element : elements) {
+        if (auto frag = element.is<::Box<Frag>>()) {
+            (*frag)->offset(d);
+        } else if (auto nestedRoot = element.is<SVGRootFrag>()) {
+            nestedRoot->offsetBoxFrags(d);
+        }
+    }
+}
+
 // MARK: Input & Output --------------------------------------------------------
 
 export enum struct IntrinsicSize {
@@ -532,6 +634,15 @@ export struct BaselinePositionsSet {
     Au xMiddle;
     Au capHeight;
 
+    static BaselinePositionsSet fromSinglePosition(Au pos) {
+        return {
+            pos,
+            pos,
+            pos,
+            pos,
+        };
+    }
+
     BaselinePositionsSet translate(Au delta) const {
         return {
             alphabetic + delta,

src/vaev-layout/builder.cpp

@@ -9,6 +9,7 @@ module;
 export module Vaev.Layout:builder;
 
 import :values;
+import :svg;
 
 namespace Vaev::Layout {
 
@@ -425,6 +426,58 @@ static void _buildInputProse(BuilderContext bc, Gc::Ref<Dom::Element> el) {
     bc.content() = InlineBox{prose};
 }
 
+void buildSVGChildren(Style::Computer& computer, Rc<Style::SpecifiedStyle> parentStyle, Gc::Ref<Dom::Element> el, SVGRoot& svgRoot);
+static void buildBlockFlowFromElement(BuilderContext bc, Gc::Ref<Dom::Element> el);
+
+void buildSVGElement(Style::Computer& computer, Rc<Style::SpecifiedStyle> parentStyle, Gc::Ref<Dom::Element> el, SVGRoot& svgRoot) {
+    auto style = computer.computeFor(*parentStyle, *el);
+
+    if (SVG::isShape(el->tagName)) {
+        svgRoot.add(SVG::Shape::build(style, el->tagName));
+    } else if (el->tagName == Svg::G) {
+        buildSVGChildren(computer, style, el, svgRoot);
+    } else if (el->tagName == Svg::SVG) {
+        SVGRoot newSvgRoot{style};
+        buildSVGChildren(computer, style, el, newSvgRoot);
+        svgRoot.add(std::move(newSvgRoot));
+    } else if (el->tagName == Svg::FOREIGN_OBJECT) {
+        auto font = _lookupFontface(computer.fontBook, *style);
+
+        Box box = {style, font, el};
+        InlineBox rootInlineBox{_proseStyleFomStyle(computer, *style)};
+
+        BuilderContext bc{
+            computer,
+            BuilderContext::From::BLOCK,
+            style,
+            box,
+            &rootInlineBox,
+        };
+
+        buildBlockFlowFromElement(bc, *el);
+
+        svgRoot.add(std::move(box));
+    } else {
+        // TODO
+        logWarn("cannot build element into svg tree: {}", el->tagName);
+    }
+}
+
+void buildSVGChildren(Style::Computer& computer, Rc<Style::SpecifiedStyle> parentStyle, Gc::Ref<Dom::Element> el, SVGRoot& svgRoot) {
+    for (auto child = el->firstChild(); child; child = child->nextSibling()) {
+        if (auto el = child->is<Dom::Element>()) {
+            buildSVGElement(computer, parentStyle, *el, svgRoot);
+        }
+        // TODO: process text into svg tree
+    }
+}
+
+SVGRoot _buildSVG(Style::Computer& computer, Gc::Ref<Dom::Element> el, Rc<Style::SpecifiedStyle> rootStyle) {
+    SVGRoot svgRoot{rootStyle};
+    buildSVGChildren(computer, rootStyle, el, svgRoot);
+    return svgRoot;
+}
+
 always_inline static bool isVoidElement(Gc::Ref<Dom::Element> el) {
     return contains(Html::VOID_TAGS, el->tagName);
 }
@@ -471,6 +524,8 @@ static void createAndBuildInlineFlowfromElement(BuilderContext bc, Rc<Style::Spe
 static void buildBlockFlowFromElement(BuilderContext bc, Gc::Ref<Dom::Element> el) {
     if (el->tagName == Html::BR) {
         // do nothing
+    } else if (el->tagName == Svg::SVG) {
+        bc.content() = _buildSVG(bc.computer, el, bc.parentStyle);
     } else if (isVoidElement(el)) {
         _buildVoidElement(bc, el);
     } else {