Displaying the circle int he middle of the available area; Cleaning up display logic

Author: StanleyGoldman

src/GitHub.VisualStudio.UI/UI/Controls/PullRequestStatusCircle.xaml

@@ -8,8 +8,6 @@
              d:DesignHeight="250" d:DesignWidth="250">
     <Grid>
         <Polygon Grid.Row="0" Grid.Column="0" Name="PendingPolygon" 
-                     Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
-                     Height="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
                      StrokeThickness="0" Fill="Yellow" 
                      Points="0,0 250,0 250,250 0,250">
             <Polygon.Clip>
@@ -24,8 +22,6 @@
             </Polygon.Clip>
         </Polygon>
         <Polygon Grid.Row="0" Grid.Column="0" Name="SuccessPolygon"
-                     Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
-                     Height="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
                      StrokeThickness="0" Fill="Green"
                      Points="125,125 125,0 250,0 250,250 0,250 0,216.50635094611">
             <Polygon.Clip>
@@ -40,8 +36,6 @@
             </Polygon.Clip>
         </Polygon>
         <Polygon Grid.Row="0" Grid.Column="0" Name="ErrorPolygon"
-                     Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
-                     Height="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
                      StrokeThickness="0" Fill="Red" 
                      Points="125,125 125,0 250,0 250,197.168783648703">
             <Polygon.Clip>

src/GitHub.VisualStudio.UI/UI/Controls/PullRequestStatusCircle.xaml.cs

@@ -41,25 +41,35 @@ public partial class PullRequestStatusCircle : UserControl
             "InnerRadius", typeof(double), typeof(PullRequestStatusCircle),
             new PropertyMetadata((double)200, (d, args) => ((PullRequestStatusCircle)d).InnerRadius = (double)args.NewValue));
 
-        public static IEnumerable<Point> GeneratePoints(double diameter, float percentage)
+        public IEnumerable<Point> GeneratePoints(float percentage)
         {
+            double ToRadians(float val)
+            {
+                return (Math.PI / 180) * val;
+            }
+
             if (float.IsNaN(percentage))
             {
                 return Array.Empty<Point>();
             }
 
             if (percentage < 0 || percentage > 1)
             {
-                throw new ArgumentException($@"`{nameof(percentage)}` must be >=0 and <=1", nameof(percentage));
+                throw new ArgumentException();
             }
 
-            var radius = diameter / 2;
-            var origin = new Point(radius, radius);
-            var topMiddle = new Point(radius, 0);
-            var topRight = new Point(diameter, 0);
-            var bottomRight = new Point(diameter, diameter);
-            var bottomLeft = new Point(0, diameter);
-            var topLeft = new Point(0, 0);
+            var diameter = Diameter;
+
+            var leftEdge = XAdjust;
+            var rightEdge = diameter + XAdjust;
+            var topEdge = YAdjust;
+            var bottomEdge = diameter + YAdjust;
+
+            var topMiddle = new Point(Origin.X, topEdge);
+            var topRight = new Point(rightEdge, topEdge);
+            var bottomRight = new Point(rightEdge, bottomEdge);
+            var bottomLeft = new Point(leftEdge, bottomEdge);
+            var topLeft = new Point(leftEdge, topEdge);
 
             if (percentage == 1)
             {
@@ -74,118 +84,118 @@ public static IEnumerable<Point> GeneratePoints(double diameter, float percentag
                 var angleDegrees = adjustedDegrees - 90;
                 var angleRadians = ToRadians(angleDegrees);
                 var tan = Math.Tan(angleRadians);
-                var oppositeEdge = tan * radius;
-                return new[] { origin, topMiddle, new Point(radius + oppositeEdge, 0) };
+                var oppositeEdge = tan * Radius;
+                return new[] { Origin, topMiddle, new Point(topMiddle.X + oppositeEdge, topMiddle.Y) };
             }
 
             if (adjustedDegrees >= 135 && adjustedDegrees < 180)
             {
                 var angleDegrees = adjustedDegrees - 135;
                 var angleRadians = ToRadians(angleDegrees);
                 var tan = Math.Tan(angleRadians);
-                var oppositeEdge = tan * radius;
-                return new[] { origin, topMiddle, topRight, new Point(diameter, oppositeEdge) };
+                var oppositeEdge = tan * Radius;
+                return new[] { Origin, topMiddle, topRight, new Point(topRight.X, topRight.Y + oppositeEdge) };
             }
 
             if (adjustedDegrees >= 180 && adjustedDegrees < 225)
             {
                 var angleDegrees = adjustedDegrees - 180;
                 var angleRadians = ToRadians(angleDegrees);
                 var tan = Math.Tan(angleRadians);
-                var oppositeEdge = tan * radius;
-                return new[] { origin, topMiddle, topRight, new Point(diameter, radius + oppositeEdge) };
+                var oppositeEdge = tan * Radius;
+                return new[] { Origin, topMiddle, topRight, new Point(topRight.X, topRight.Y + Radius + oppositeEdge) };
             }
 
             if (adjustedDegrees >= 225 && adjustedDegrees < 270)
             {
                 var angleDegrees = adjustedDegrees - 225;
                 var angleRadians = ToRadians(angleDegrees);
                 var tan = Math.Tan(angleRadians);
-                var oppositeEdge = tan * radius;
-                return new[] { origin, topMiddle, topRight, bottomRight, new Point(diameter - oppositeEdge, diameter) };
+                var oppositeEdge = tan * Radius;
+                return new[] { Origin, topMiddle, topRight, bottomRight, new Point(bottomRight.X - oppositeEdge, bottomRight.Y) };
             }
 
             if (adjustedDegrees >= 270 && adjustedDegrees < 315)
             {
                 var angleDegrees = adjustedDegrees - 270;
                 var angleRadians = ToRadians(angleDegrees);
                 var tan = Math.Tan(angleRadians);
-                var oppositeEdge = tan * radius;
-                return new[] { origin, topMiddle, topRight, bottomRight, new Point(radius - oppositeEdge, diameter) };
+                var oppositeEdge = tan * Radius;
+                return new[] { Origin, topMiddle, topRight, bottomRight, new Point(bottomRight.X - Radius - oppositeEdge, bottomRight.Y) };
             }
 
             if (adjustedDegrees >= 315 && adjustedDegrees < 360)
             {
                 var angleDegrees = adjustedDegrees - 315;
                 var angleRadians = ToRadians(angleDegrees);
                 var tan = Math.Tan(angleRadians);
-                var oppositeEdge = tan * radius;
-                return new[] { origin, topMiddle, topRight, bottomRight, bottomLeft, new Point(0, diameter - oppositeEdge) };
+                var oppositeEdge = tan * Radius;
+                return new[] { Origin, topMiddle, topRight, bottomRight, bottomLeft, new Point(bottomLeft.X, bottomLeft.Y - oppositeEdge) };
             }
 
             if (adjustedDegrees >= 0 && adjustedDegrees < 45)
             {
                 var angleDegrees = adjustedDegrees;
                 var angleRadians = ToRadians(angleDegrees);
                 var tan = Math.Tan(angleRadians);
-                var oppositeEdge = tan * radius;
-                return new[] { origin, topMiddle, topRight, bottomRight, bottomLeft, new Point(0, radius - oppositeEdge) };
+                var oppositeEdge = tan * Radius;
+                return new[] { Origin, topMiddle, topRight, bottomRight, bottomLeft, new Point(bottomLeft.X, bottomLeft.Y - Radius - oppositeEdge) };
             }
 
             if (adjustedDegrees >= 45 && adjustedDegrees < 90)
             {
                 var angleDegrees = adjustedDegrees - 45;
                 var angleRadians = ToRadians(angleDegrees);
                 var tan = Math.Tan(angleRadians);
-                var oppositeEdge = tan * radius;
-                return new[] { origin, topMiddle, topRight, bottomRight, bottomLeft, topLeft, new Point(oppositeEdge, 0) };
+                var oppositeEdge = tan * Radius;
+                return new[] { Origin, topMiddle, topRight, bottomRight, bottomLeft, topLeft, new Point(topLeft.X + oppositeEdge, topLeft.Y) };
             }
 
             throw new InvalidOperationException();
         }
 
-        public static double ToRadians(float val)
-        {
-            return (Math.PI / 180) * val;
-        }
-
         public PullRequestStatusCircle()
         {
             InitializeComponent();
             GeneratePolygons();
-            ComputeMask();
+            GenerateMask();
         }
 
         private void GeneratePolygons()
         {
-            ErrorPolygon.Points = new PointCollection(GeneratePoints(Radius * 2, (float)ErrorCount / TotalCount));
-            SuccessPolygon.Points = new PointCollection(GeneratePoints(Radius * 2, (float)(SuccessCount + ErrorCount) / TotalCount));
-            PendingPolygon.Points = new PointCollection(GeneratePoints(Radius * 2, (float)(SuccessCount + ErrorCount + PendingCount) / TotalCount));
+            ErrorPolygon.Points = new PointCollection(GeneratePoints((float)ErrorCount / TotalCount));
+            SuccessPolygon.Points = new PointCollection(GeneratePoints((float)(SuccessCount + ErrorCount) / TotalCount));
+            PendingPolygon.Points = new PointCollection(GeneratePoints((float)(SuccessCount + ErrorCount + PendingCount) / TotalCount));
         }
 
-        private void ComputeMask()
+        private void GenerateMask()
         {
             var pendingPolygonClip = new CombinedGeometry(
                 GeometryCombineMode.Exclude,
-                new EllipseGeometry(Center, Radius, Radius),
-                new EllipseGeometry(Center, InnerRadius, InnerRadius));
+                new EllipseGeometry(Origin, Radius, Radius),
+                new EllipseGeometry(Origin, InnerRadius, InnerRadius));
 
             PendingPolygon.Clip = pendingPolygonClip;
             SuccessPolygon.Clip = pendingPolygonClip;
             ErrorPolygon.Clip = pendingPolygonClip;
         }
 
-        private int TotalCount => ErrorCount + SuccessCount + PendingCount;
+        private Point Origin => new Point(Radius + XAdjust, Radius + YAdjust);
+
+        private double Diameter => Radius * 2;
 
-        private Point Center => new Point(Radius, Radius);
+        private double XAdjust => (ActualWidth - Diameter) / 2;
+
+        private double YAdjust => (ActualHeight - Diameter) / 2;
+
+        private int TotalCount => ErrorCount + SuccessCount + PendingCount;
 
         public int ErrorCount
         {
             get => (int)GetValue(ErrorCountProperty);
             set
             {
                 SetValue(ErrorCountProperty, value);
-                ComputeMask();
                 GeneratePolygons();
             }
         }
@@ -196,7 +206,6 @@ public int SuccessCount
             set
             {
                 SetValue(SuccessCountProperty, value);
-                ComputeMask();
                 GeneratePolygons();
             }
         }
@@ -207,7 +216,6 @@ public int PendingCount
             set
             {
                 SetValue(PendingCountProperty, value);
-                ComputeMask();
                 GeneratePolygons();
             }
         }
@@ -218,7 +226,7 @@ public double Radius
             set
             {
                 SetValue(RadiusProperty, value);
-                ComputeMask();
+                GenerateMask();
                 GeneratePolygons();
             }
         }
@@ -229,7 +237,17 @@ public double InnerRadius
             set
             {
                 SetValue(InnerRadiusProperty, value);
-                ComputeMask();
+                GenerateMask();
+                GeneratePolygons();
+            }
+        }
+
+        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
+        {
+            base.OnRenderSizeChanged(sizeInfo);
+            if (sizeInfo.WidthChanged || sizeInfo.HeightChanged)
+            {
+                GenerateMask();
                 GeneratePolygons();
             }
         }

src/GitHub.VisualStudio.UI/Views/GitHubPane/PullRequestListItemView.xaml

@@ -100,8 +100,8 @@
                     <Run Text="{Binding CommentCount, Mode=OneWay}" BaselineAlignment="Bottom"/>
                 </TextBlock>
                 <controls:PullRequestStatusCircle 
-                    Height="16" Width="16"
-                    Radius="16" InnerRadius="10"
+                    Height="18" Width="18"
+                    Radius="8" InnerRadius="3"
                     PendingCount="{Binding ChecksPendingCount}"
                     ErrorCount="{Binding ChecksErrorCount}"
                     SuccessCount="{Binding ChecksSuccessCount}"