LibWeb: Abstract common operations of graphical SVG elements

Author: https://github.com/mattco98
Commit: https://github.com/SerenityOS/serenity/commit/943e4f8bf17
Pull-request: https://github.com/SerenityOS/serenity/pull/2861

Libraries/LibGfx/Path.cpp

@@ -154,10 +154,8 @@ void Path::segmentize_path()
         float ymax = p0.y(), ymin = p1.y(), x_of_ymin = p1.x(), x_of_ymax = p0.x();
         auto slope = p0.x() == p1.x() ? 0 : ((float)(p0.y() - p1.y())) / ((float)(p0.x() - p1.x()));
         if (p0.y() < p1.y()) {
-            ymin = ymax;
-            ymax = p1.y();
-            x_of_ymax = x_of_ymin;
-            x_of_ymin = p0.x();
+            swap(ymin, ymax);
+            swap(x_of_ymin, x_of_ymax);
         }
 
         segments.append({ FloatPoint(p0.x(), p0.y()),

Libraries/LibWeb/CMakeLists.txt

@@ -57,6 +57,7 @@ set(SOURCES
     DOM/ImageData.cpp
     DOM/Node.cpp
     DOM/ParentNode.cpp
+    DOM/SvgContext.cpp
     DOM/TagNames.cpp
     DOM/Text.cpp
     DOM/Timer.cpp

Libraries/LibWeb/DOM/HTMLPathElement.cpp

@@ -417,6 +417,8 @@ static void print_instruction(const PathInstruction& instruction)
 void HTMLPathElement::parse_attribute(const FlyString& name, const String& value)
 {
     HTMLElement::parse_attribute(name, value);
+    SvgGraphicElement::parse_attribute(name, value);
+
     if (name == "d")
         m_instructions = PathDataParser(value).parse();
 }
@@ -586,11 +588,16 @@ void HTMLPathElement::paint(const SvgPaintingContext& context, Gfx::Painter& pai
         }
     }
 
-    painter.stroke_path(path, context.stroke_color, context.stroke_width);
+    // We need to fill the path before applying the stroke, however the filled
+    // path must be closed, whereas the stroke path may not necessary be closed.
+    // Copy the path and close it for filling, but use the previous path for stroke
+    auto closed_path = path;
+    closed_path.close();
 
     // Fills are computed as though all paths are closed (https://svgwg.org/svg2-draft/painting.html#FillProperties)
-    path.close();
-    painter.fill_path(path, context.fill_color, Gfx::Painter::WindingRule::EvenOdd);
+    painter.fill_path(closed_path, fill_color(context), Gfx::Painter::WindingRule::EvenOdd);
+    painter.stroke_path(path, stroke_color(context), stroke_width(context));
+
 }
 
 }

Libraries/LibWeb/DOM/SvgContext.cpp

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2020, Matthew Olsson <matthewcolsson@gmail.com>
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ *    list of conditions and the following disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#include <AK/FlyString.h>
+#include <LibWeb/DOM/SvgContext.h>
+
+namespace Web {
+
+void SvgGraphicElement::parse_attribute(const FlyString& name, const String& value)
+{
+    if (name == "stroke-width") {
+        m_stroke_width = strtof(value.characters(), nullptr);
+    } else if (name == "stroke") {
+        auto result = Gfx::Color::from_string(value);
+        m_stroke_color = result.value_or(Gfx::Color::Transparent);
+    } else if (name == "fill") {
+        auto result = Gfx::Color::from_string(value);
+        m_fill_color = result.value_or(Gfx::Color::Transparent);
+    }
+}
+
+Gfx::Color SvgGraphicElement::fill_color(const SvgPaintingContext& context) const
+{
+    return m_fill_color.value_or(context.fill_color);
+}
+
+Gfx::Color SvgGraphicElement::stroke_color(const SvgPaintingContext& context) const
+{
+    return m_stroke_color.value_or(context.stroke_color);
+}
+
+float SvgGraphicElement::stroke_width(const SvgPaintingContext& context) const
+{
+    return m_stroke_width.value_or(context.stroke_width);
+}
+
+}

Libraries/LibWeb/DOM/SvgContext.h

@@ -40,6 +40,16 @@ struct SvgPaintingContext {
 class SvgGraphicElement {
 public:
     virtual void paint(const SvgPaintingContext&, Gfx::Painter& painter) = 0;
+    void parse_attribute(const FlyString& name, const String& value);
+
+protected:
+    Gfx::Color fill_color(const SvgPaintingContext&) const;
+    Gfx::Color stroke_color(const SvgPaintingContext&) const;
+    float stroke_width(const SvgPaintingContext&) const;
+
+    Optional<Gfx::Color> m_fill_color;
+    Optional<Gfx::Color> m_stroke_color;
+    Optional<float> m_stroke_width;
 };
 
 }