Draw borders with the same color in single bezpath. (#366)

* Draw adjacent borders with the same color in single bezpath.

* Avoid unnecessary deref.

* Avoid duplicate draw.

* Handle wraparound case.

* Handle non-adjacent edges touching.

---------

Co-authored-by: Austin M. Reppert <austinmreppert@protonmail.com>

Author: AustinMReppert

packages/blitz-paint/src/render.rs

@@ -35,7 +35,7 @@ use style::{
     },
 };
 
-use kurbo::{self, Affine, Insets, Point, Rect, Stroke, Vec2};
+use kurbo::{self, Affine, BezPath, Insets, Point, Rect, Stroke, Vec2};
 use peniko::{self, Fill, ImageData, ImageSampler};
 use style::values::generics::color::{ColorOrAuto, GenericColor};
 use taffy::Layout;
@@ -806,8 +806,69 @@ impl ElementCx<'_> {
 
     /// Draw all borders for a node
     fn draw_border(&self, scene: &mut impl PaintScene) {
-        for edge in [Edge::Top, Edge::Right, Edge::Bottom, Edge::Left] {
-            self.draw_border_edge(scene, edge);
+        let style = &*self.style;
+        let border = style.get_border();
+        let current_color = style.clone_color();
+
+        let mut borders: [(Color, Option<BezPath>); 4] = [
+            (Color::TRANSPARENT, None),
+            (Color::TRANSPARENT, None),
+            (Color::TRANSPARENT, None),
+            (Color::TRANSPARENT, None),
+        ];
+        let mut count = 0;
+
+        for &edge in &[Edge::Top, Edge::Right, Edge::Bottom, Edge::Left] {
+            let color = match edge {
+                Edge::Top => &border.border_top_color,
+                Edge::Right => &border.border_right_color,
+                Edge::Bottom => &border.border_bottom_color,
+                Edge::Left => &border.border_left_color,
+            }
+            .resolve_to_absolute(&current_color)
+            .as_srgb_color();
+
+            if color.components[3] > 0.0 {
+                borders[count] = (color, Some(self.frame.border_edge_shape(edge)));
+                count += 1;
+            }
+        }
+
+        if count == 0 {
+            return;
+        }
+
+        // Group together identical colors by sorting.
+        let active_slice = &mut borders[0..count];
+        active_slice.sort_unstable_by(|a, b| {
+            a.0.components
+                .partial_cmp(&b.0.components)
+                .unwrap_or(std::cmp::Ordering::Equal)
+        });
+
+        let mut start_border_index = 0;
+        while start_border_index < count {
+            let color = borders[start_border_index].0;
+            let mut next_border_index = start_border_index + 1;
+            let has_multiple_edges =
+                next_border_index < count && borders[next_border_index].0 == color;
+            if has_multiple_edges {
+                let mut border_path = borders[start_border_index].1.take().unwrap();
+                while next_border_index < count && borders[next_border_index].0 == color {
+                    border_path.extend(&borders[next_border_index].1.take().unwrap());
+                    next_border_index += 1;
+                }
+                scene.fill(Fill::NonZero, self.transform, color, None, &border_path);
+            } else {
+                scene.fill(
+                    Fill::NonZero,
+                    self.transform,
+                    color,
+                    None,
+                    borders[start_border_index].1.as_ref().unwrap(),
+                );
+            }
+            start_border_index = next_border_index;
         }
     }
 
@@ -900,38 +961,6 @@ impl ElementCx<'_> {
         }
     }
 
-    /// Draw a single border edge for a node
-    fn draw_border_edge(&self, scene: &mut impl PaintScene, edge: Edge) {
-        let style = &*self.style;
-        let border = style.get_border();
-        let path = self.frame.border_edge_shape(edge);
-
-        let current_color = style.clone_color();
-        let color = match edge {
-            Edge::Top => border
-                .border_top_color
-                .resolve_to_absolute(&current_color)
-                .as_srgb_color(),
-            Edge::Right => border
-                .border_right_color
-                .resolve_to_absolute(&current_color)
-                .as_srgb_color(),
-            Edge::Bottom => border
-                .border_bottom_color
-                .resolve_to_absolute(&current_color)
-                .as_srgb_color(),
-            Edge::Left => border
-                .border_left_color
-                .resolve_to_absolute(&current_color)
-                .as_srgb_color(),
-        };
-
-        let alpha = color.components[3];
-        if alpha != 0.0 {
-            scene.fill(Fill::NonZero, self.transform, color, None, &path);
-        }
-    }
-
     /// ❌ dotted - Defines a dotted border
     /// ❌ dashed - Defines a dashed border
     /// ✅ solid - Defines a solid border