File 0002-fix_inverted_circular_progress.patch of Package aylurs-gtk-shell

From b97b36d40d133abe1629ed0908e116f31af4bfdd Mon Sep 17 00:00:00 2001
From: Sungyoon Cho <sungyooncho@outlook.com>
Date: Fri, 21 Jun 2024 06:53:15 +0900
Subject: [PATCH] Fix inverted circular progress (#423)

---
 src/widgets/circularprogress.ts | 62 +++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/widgets/circularprogress.ts b/src/widgets/circularprogress.ts
index d3df2b0f..45c20003 100644
--- a/src/widgets/circularprogress.ts
+++ b/src/widgets/circularprogress.ts
@@ -157,7 +157,7 @@ export class CircularProgress<
         return Math.abs(start - end) <= epsilon;
     }
 
-    private _mapArcValueToRange(start: number, end: number, value: number): number {
+    private _scaleArcValue(start: number, end: number, value: number): number {
         // Ensure that start and end are between 0 and 1
         start = (start % 1 + 1) % 1;
         end = (end % 1 + 1) % 1;
@@ -167,13 +167,13 @@ export class CircularProgress<
         if (arcLength < 0)
             arcLength += 1; // Adjust for circular representation
 
-        // Calculate the position on the arc based on the percentage value
-        let position = start + (arcLength * value);
+        // Calculate the scaled value on the arc based on the arcLength
+        let scaled = arcLength * value;
 
-        // Ensure the position is between 0 and 1
-        position = (position % 1 + 1) % 1;
+        // Ensure the scaled value is between 0 and 1
+        scaled = (scaled % 1 + 1) % 1;
 
-        return position;
+        return scaled;
     }
 
     vfunc_draw(cr: Context): boolean {
@@ -192,55 +192,73 @@ export class CircularProgress<
 
         const startBackground = this._toRadian(this.start_at);
         let endBackground = this._toRadian(this.end_at);
-        let rangedValue = this.value + this.start_at;
+        let rangedValue;
 
         const isCircle = this._isFullCircle(this.start_at, this.end_at);
 
         if (isCircle) {
             // Redefine endDraw in radius to create an accurate full circle
             endBackground = startBackground + 2 * Math.PI;
+            rangedValue = this._toRadian(this.value);
         } else {
-            // Range the value for the arc shape
-            rangedValue = this._mapArcValueToRange(
-                this.start_at,
-                this.end_at,
-                this.value,
+            // Scale the value for the arc shape
+            rangedValue = this._toRadian(
+                this._scaleArcValue(
+                    this.start_at,
+                    this.end_at,
+                    this.value,
+                ),
             );
         }
 
-        const to = this._toRadian(rangedValue);
         let startProgress, endProgress;
 
         if (this.inverted) {
-            startProgress = (2 * Math.PI - to) - startBackground;
-            endProgress = (2 * Math.PI - startBackground) - startBackground;
+            startProgress = endBackground - rangedValue;
+            endProgress = endBackground;
         } else {
             startProgress = startBackground;
-            endProgress = to;
+            endProgress = startBackground + rangedValue;
         }
 
         // Draw background
         cr.setSourceRGBA(bg.red, bg.green, bg.blue, bg.alpha);
         cr.arc(center.x, center.y, radius, startBackground, endBackground);
-
         cr.setLineWidth(bgStroke);
         cr.stroke();
 
+        // Draw rounded background ends
+        if (this.rounded) {
+            const start = {
+                x: center.x + Math.cos(startBackground) * radius,
+                y: center.y + Math.sin(startBackground) * radius,
+            };
+            const end = {
+                x: center.x + Math.cos(endBackground) * radius,
+                y: center.y + Math.sin(endBackground) * radius,
+            };
+            cr.setLineWidth(0);
+            cr.arc(start.x, start.y, fgStroke / 2, 0, 0 - 0.01);
+            cr.fill();
+            cr.arc(end.x, end.y, fgStroke / 2, 0, 0 - 0.01);
+            cr.fill();
+        }
+
         // Draw progress
         cr.setSourceRGBA(fg.red, fg.green, fg.blue, fg.alpha);
         cr.arc(center.x, center.y, radius, startProgress, endProgress);
         cr.setLineWidth(fgStroke);
         cr.stroke();
 
-        // Draw rounded ends
+        // Draw rounded progress ends
         if (this.rounded) {
             const start = {
-                x: center.x + Math.cos(startBackground) * radius,
-                y: center.y + Math.sin(startBackground) * radius,
+                x: center.x + Math.cos(startProgress) * radius,
+                y: center.y + Math.sin(startProgress) * radius,
             };
             const end = {
-                x: center.x + Math.cos(to) * radius,
-                y: center.y + Math.sin(to) * radius,
+                x: center.x + Math.cos(endProgress) * radius,
+                y: center.y + Math.sin(endProgress) * radius,
             };
             cr.setLineWidth(0);
             cr.arc(start.x, start.y, fgStroke / 2, 0, 0 - 0.01);