From dca4d7c21e7e52a98f352eb3e826c4cce389a335 Mon Sep 17 00:00:00 2001
From: mkpaz <quizynox@gmail.com>
Date: Thu, 23 Feb 2023 13:03:56 +0400
Subject: [PATCH] Fix slider progress calc

---
 .../base/controls/ProgressSliderSkin.java     |  11 +-
 .../sampler/page/components/SliderPage.java   |   2 +-
 styles/src/components/_slider.scss            | 113 +++++++++++-------
 3 files changed, 77 insertions(+), 49 deletions(-)

diff --git a/base/src/main/java/atlantafx/base/controls/ProgressSliderSkin.java b/base/src/main/java/atlantafx/base/controls/ProgressSliderSkin.java
index 653c844..0d5399a 100644
--- a/base/src/main/java/atlantafx/base/controls/ProgressSliderSkin.java
+++ b/base/src/main/java/atlantafx/base/controls/ProgressSliderSkin.java
@@ -39,17 +39,16 @@ public class ProgressSliderSkin extends SliderSkin {
         double progressWidth;
         double progressHeight;
 
-        // intentionally ignore background radius in calculation,
-        // because slider looks better this way
         if (getSkinnable().getOrientation() == Orientation.HORIZONTAL) {
             progressY = track.getLayoutY();
-            progressWidth = thumb.getLayoutX() - snappedLeftInset();
+            progressWidth = thumb.getLayoutX() - track.getLayoutX()
+                + thumb.getLayoutBounds().getCenterX() - snappedLeftInset();
             progressHeight = track.getHeight();
         } else {
-            progressY = thumb.getLayoutY();
+            progressY = thumb.getLayoutY() + thumb.getLayoutBounds().getCenterY();
             progressWidth = track.getWidth();
-            progressHeight =
-                track.getLayoutBounds().getMaxY() + track.getLayoutY() - thumb.getLayoutY() - snappedBottomInset();
+            progressHeight = track.getLayoutBounds().getMaxY() + track.getLayoutY()
+                - thumb.getLayoutY() - thumb.getLayoutBounds().getCenterY() - snappedBottomInset();
         }
 
         progressTrack.resizeRelocate(progressX, progressY, progressWidth, progressHeight);
diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/SliderPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/SliderPage.java
index 0a09e93..5bdd46e 100644
--- a/sampler/src/main/java/atlantafx/sampler/page/components/SliderPage.java
+++ b/sampler/src/main/java/atlantafx/sampler/page/components/SliderPage.java
@@ -113,7 +113,7 @@ public class SliderPage extends AbstractPage {
     }
 
     private Slider createTickSlider() {
-        var slider = new Slider(0, 5, 3);
+        var slider = new Slider(1, 5, 3);
         slider.setShowTickLabels(true);
         slider.setShowTickMarks(true);
         slider.setMajorTickUnit(1);
diff --git a/styles/src/components/_slider.scss b/styles/src/components/_slider.scss
index d7ac00d..e113ff0 100755
--- a/styles/src/components/_slider.scss
+++ b/styles/src/components/_slider.scss
@@ -20,7 +20,7 @@ $thumb-size: (
   "large-w" : 12px
 ) !default;
 
-$thumb-radius: 10em !default;
+$thumb-radius:       50px !default;
 $thumb-border-width: 2px !default;
 $thumb-effect:       none !default;
 $thumb-effect-large: none !default;
@@ -62,11 +62,7 @@ $tick-minor-size: 3px !default;
     -fx-background-radius: $track-radius;
   }
 
-  >.progress {
-    -fx-background-color: transparent, -color-slider-track-progress;
-  }
-
-  // there's slightly noticable difference between axis length and track length,
+  // there's slightly noticeable difference between axis length and track length,
   // because SliderSkin ignores track radius in layoutChildren()
   >.axis {
     -fx-tick-label-fill: -color-slider-tick;
@@ -90,41 +86,32 @@ $tick-minor-size: 3px !default;
   // center thumb over track horizontally
   &:horizontal {
     >.thumb {
-      -fx-padding: map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w");
+      -fx-padding: map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w")
+                   map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w");
     }
     >.track {
       -fx-padding: map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h") 0;
       -fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
                                 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
-      -fx-background-radius: $track-radius 0 0 $track-radius;
-    }
-    >.progress {
-      -fx-background-radius: $track-radius;
-      -fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
-                                calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
-      -fx-background-radius: $track-radius 0 0 $track-radius;
     }
   }
 
   &.small:horizontal {
     >.thumb {
-      -fx-padding: map-get($thumb-size, "small-h") map-get($thumb-size, "small-w") map-get($thumb-size, "small-h") map-get($thumb-size, "small-w");
+      -fx-padding: map-get($thumb-size, "small-h") map-get($thumb-size, "small-w")
+                   map-get($thumb-size, "small-h") map-get($thumb-size, "small-w");
     }
     >.track {
       -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
       -fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
                                 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
     }
-    >.progress {
-      -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
-      -fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
-                                calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
-    }
   }
 
   &.large:horizontal {
     >.thumb {
-      -fx-padding: map-get($thumb-size, "large-h") map-get($thumb-size, "large-w") map-get($thumb-size, "large-h") map-get($thumb-size, "smlargeall-w");
+      -fx-padding: map-get($thumb-size, "large-h") map-get($thumb-size, "large-w")
+                   map-get($thumb-size, "large-h") map-get($thumb-size, "large-w");
       -fx-effect: $thumb-effect-large;
     }
     >.track {
@@ -132,11 +119,6 @@ $tick-minor-size: 3px !default;
       -fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
                                 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0;
     }
-    >.progress {
-      -fx-padding: map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h") 0;
-      -fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
-                                calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0;
-    }
   }
 
   /////////////////////////////////////////////////////////
@@ -146,49 +128,96 @@ $tick-minor-size: 3px !default;
   // center thumb over track vertically
   &:vertical {
     >.thumb {
-      -fx-padding: map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h");
+      -fx-padding: map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h")
+                   map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h");
     }
     >.track {
       -fx-padding: 0 map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h");
       -fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
                                 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
     }
-    >.progress {
-      -fx-background-radius: $thumb-radius $thumb-radius $track-radius $track-radius;
-      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
-                                0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
-    }
   }
 
   &.small:vertical {
     >.thumb {
-      -fx-padding: map-get($thumb-size, "small-w") map-get($thumb-size, "small-h") map-get($thumb-size, "small-w") map-get($thumb-size, "small-h");
+      -fx-padding: map-get($thumb-size, "small-w") map-get($thumb-size, "small-h")
+                   map-get($thumb-size, "small-w") map-get($thumb-size, "small-h");
     }
     >.track {
       -fx-padding: 0 map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h");
       -fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
                                 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
     }
-    >.progress {
-      -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
-      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
-                                0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
-    }
   }
 
   &.large:vertical {
     >.thumb {
-      -fx-padding: map-get($thumb-size, "large-w") map-get($thumb-size, "large-h") map-get($thumb-size, "large-w") map-get($thumb-size, "large-h");
+      -fx-padding: map-get($thumb-size, "large-w") map-get($thumb-size, "large-h")
+                   map-get($thumb-size, "large-w") map-get($thumb-size, "large-h");
     }
     >.track {
       -fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
       -fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
                                 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
     }
+  }
+
+  /////////////////////////////////////////////////////////
+  // Progress                                            //
+  /////////////////////////////////////////////////////////
+
+  &.progress-slider {
+
     >.progress {
-      -fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
-      -fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
-                                0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
+      -fx-background-color: transparent, -color-slider-track-progress;
+    }
+
+    &:horizontal {
+      >.progress {
+        -fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
+                                  calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
+        -fx-background-radius: $track-radius 0 0 $track-radius;
+      }
+    }
+
+    &.small:horizontal {
+      >.progress {
+        -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
+        -fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
+                                  calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
+      }
+    }
+
+    &.large:horizontal {
+      >.progress {
+        -fx-padding: map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h") 0;
+        -fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
+                                  calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0;
+      }
+    }
+
+    &:vertical {
+      >.progress {
+        -fx-background-radius: 0 0 $track-radius $track-radius;
+        -fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
+                                  0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
+      }
+    }
+
+    &.small:vertical {
+      >.progress {
+        -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
+        -fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
+                                  0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
+      }
+    }
+
+    &.large:vertical {
+      >.progress {
+        -fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
+        -fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
+                                  0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
+      }
     }
   }
 }