From 20b58e0214abf090ad90e6c9fd4a32f41fa88eb1 Mon Sep 17 00:00:00 2001
From: ThatsNoMoon <git@thatsnomoon.dev>
Date: Fri, 3 Jun 2022 15:34:51 -0600
Subject: fix arc_to

Fixed `path::Builder::arc_to` to behave the same as [HTML5's `arcTo`]
( https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-arcto ).
---
 graphics/src/widget/canvas/path/builder.rs | 48 +++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 7 deletions(-)

(limited to 'graphics/src')

diff --git a/graphics/src/widget/canvas/path/builder.rs b/graphics/src/widget/canvas/path/builder.rs
index 05316d8a..6561c393 100644
--- a/graphics/src/widget/canvas/path/builder.rs
+++ b/graphics/src/widget/canvas/path/builder.rs
@@ -42,23 +42,57 @@ impl Builder {
     /// Adds a circular arc to the [`Path`] with the given control points and
     /// radius.
     ///
-    /// The arc is connected to the previous point by a straight line, if
-    /// necessary.
+    /// This essentially draws two straight line segments, from the current
+    /// position to `a`, and from `a` to `b`, but smooths out the corner by
+    /// fitting a circular arc of `radius` tangent to both segments.
     pub fn arc_to(&mut self, a: Point, b: Point, radius: f32) {
         use lyon::{math, path};
 
-        let a = math::Point::new(a.x, a.y);
+        let start = self.raw.current_position();
+        let mid = math::Point::new(a.x, a.y);
+        let end = math::Point::new(b.x, b.y);
 
-        if self.raw.current_position() != a {
-            let _ = self.raw.line_to(a);
+        if start == mid || mid == end || radius == 0.0 {
+            let _ = self.raw.line_to(end);
+            return;
         }
 
+        let double_area = start.x * (mid.y - end.y)
+            + mid.x * (end.y - start.y)
+            + end.x * (start.y - mid.y);
+
+        if double_area == 0.0 {
+            let _ = self.raw.line_to(end);
+            return;
+        }
+
+        let to_start = (start - mid).normalize();
+        let to_end = (end - mid).normalize();
+
+        let inner_angle = to_start.dot(to_end).acos();
+
+        let origin_angle = inner_angle / 2.0;
+
+        let origin_adjacent = radius / origin_angle.tan();
+
+        let arc_start = mid + to_start * origin_adjacent;
+        let arc_end = mid + to_end * origin_adjacent;
+
+        let sweep = to_start.cross(to_end) < 0.0;
+
+        let _ = self.raw.line_to(arc_start);
+
         self.raw.arc_to(
             math::Vector::new(radius, radius),
             math::Angle::radians(0.0),
-            path::ArcFlags::default(),
-            math::Point::new(b.x, b.y),
+            path::ArcFlags {
+                large_arc: false,
+                sweep,
+            },
+            arc_end,
         );
+
+        let _ = self.raw.line_to(end);
     }
 
     /// Adds an ellipse to the [`Path`] using a clockwise direction.
-- 
cgit 


From 53d93a37dd2b0604897ef3cac9de5acb601ed230 Mon Sep 17 00:00:00 2001
From: ThatsNoMoon <git@thatsnomoon.dev>
Date: Sat, 4 Jun 2022 09:31:28 -0600
Subject: fix another discrepancy with HTML5 arcTo

HTML5's arcTo does not draw a line from the end of the arc to `b`, so
this should not either.
---
 graphics/src/widget/canvas/path/builder.rs | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'graphics/src')

diff --git a/graphics/src/widget/canvas/path/builder.rs b/graphics/src/widget/canvas/path/builder.rs
index 6561c393..88acf544 100644
--- a/graphics/src/widget/canvas/path/builder.rs
+++ b/graphics/src/widget/canvas/path/builder.rs
@@ -42,9 +42,16 @@ impl Builder {
     /// Adds a circular arc to the [`Path`] with the given control points and
     /// radius.
     ///
-    /// This essentially draws two straight line segments, from the current
-    /// position to `a`, and from `a` to `b`, but smooths out the corner by
-    /// fitting a circular arc of `radius` tangent to both segments.
+    /// This essentially draws a straight line segment from the current
+    /// position to `a`, but fits a circular arc of `radius` tangent to that
+    /// segment and tangent to the line between `a` and `b`.
+    ///
+    /// With another `.line_to(b)`, the result will be a path connecting the
+    /// starting point and `b` with straight line segments towards `a` and a
+    /// circular arc smoothing out the corner at `a`.
+    ///
+    /// See [the HTML5 specification of `arcTo`](https://html.spec.whatwg.org/multipage/canvas.html#building-paths:dom-context-2d-arcto)
+    /// for more details and examples.
     pub fn arc_to(&mut self, a: Point, b: Point, radius: f32) {
         use lyon::{math, path};
 
@@ -53,7 +60,7 @@ impl Builder {
         let end = math::Point::new(b.x, b.y);
 
         if start == mid || mid == end || radius == 0.0 {
-            let _ = self.raw.line_to(end);
+            let _ = self.raw.line_to(mid);
             return;
         }
 
@@ -62,7 +69,7 @@ impl Builder {
             + end.x * (start.y - mid.y);
 
         if double_area == 0.0 {
-            let _ = self.raw.line_to(end);
+            let _ = self.raw.line_to(mid);
             return;
         }
 
@@ -91,8 +98,6 @@ impl Builder {
             },
             arc_end,
         );
-
-        let _ = self.raw.line_to(end);
     }
 
     /// Adds an ellipse to the [`Path`] using a clockwise direction.
-- 
cgit