Fluent style: The Slider and ScrollBar now updates as the mouse moves

Fixes #494

CHANGELOG.md

@@ -6,6 +6,7 @@ All notable changes to this project will be documented in this file.
 ### Changed
 
  - Due to changes in the build system, the C++ build now requires CMake >= 3.19.
+ - Fluent style: The Slider and ScrollBar now updates as the mouse moves.
 
 ### Added
 

sixtyfps_compiler/widgets/fluent/sixtyfps_widgets.60

@@ -195,7 +195,7 @@ export Slider := Rectangle {
     }
 
     Rectangle {
-        width: (parent.width - parent.min-height) * (handle.new-value / maximum);
+        width: (parent.width - parent.min-height) * (value / maximum);
         x: parent.height / 2;
         height: parent.min-height / 4;
         y: (parent.height - height) / 2;
@@ -214,20 +214,19 @@ export Slider := Rectangle {
             : touch.has-hover ? Palette.themePrimary
             : Palette.neutralSecondary;
         background: Palette.white;
-        x: (root.width - handle.width) * (new-value - minimum)/(maximum - minimum);
-        property<float> new-value-tmp : (touch.pressed && enabled)
-            ? root.value + (touch.mouse-x - touch.pressed-x) * (maximum - minimum) / (root.width - handle.width)
-            : root.value;
-        property<float> new-value : new-value-tmp < root.minimum ? root.minimum
-            : new-value-tmp > root.maximum ? root.maximum : new-value-tmp;
+        x: (root.width - handle.width) * (value - minimum)/(maximum - minimum);
     }
     touch := TouchArea {
         width: parent.width;
         height: parent.height;
-        clicked => {
-            if (enabled) {
-                root.value = handle.new-value;
-                root.changed(root.value);
+        property <float> pressed-value;
+        pressed-changed => {
+            if (pressed) { pressed-value = root.value; }
+        }
+        moved => {
+            if (enabled && pressed) {
+                value = max(root.minimum, min(root.maximum,
+                    pressed-value + (touch.mouse-x - touch.pressed-x) * (maximum - minimum) / (root.width - handle.width)));
             }
         }
     }

sixtyfps_compiler/widgets/fluent/sixtyfps_widgets_impl.60

@@ -120,33 +120,35 @@ ScrollBar := Rectangle {
    // border-color: Palette.button-background;
     border-width: 1px;
     property <bool> horizontal;
-    property<length> max;
+    property<length> maximum;
     property<length> page-size;
-    // this is always negative and migger than  -max
+    // this is always negative and bigger than  -maximum
     property<length> value;
 
     handle := Rectangle {
-        width: !horizontal ? parent.width : max <= 0phx ? 0phx : parent.width * (page-size / (max + page-size));
-        height: horizontal ? parent.height : max <= 0phx ? 0phx : parent.height * (page-size / (max + page-size));
+        width: !horizontal ? parent.width : maximum <= 0phx ? 0phx : parent.width * (page-size / (maximum + page-size));
+        height: horizontal ? parent.height : maximum <= 0phx ? 0phx : parent.height * (page-size / (maximum + page-size));
 
         border-radius: (horizontal ? self.height : self.width) / 2;
         background: touch-area.pressed ? Palette.themePrimary :
             touch-area.has-hover ? Palette.themeSecondary : Palette.neutralTertiary;
-        x: !horizontal ? 0phx : (root.width - handle.width) * (new-value / max);
-        y: horizontal ? 0phx : (root.height - handle.height) * (new-value / max);
-        property<length> new-value-tmp : -root.value + (
-            !touch-area.pressed ? 0phx
-            : horizontal ?  (touch-area.mouse-x - touch-area.pressed-x) * (max / (root.width - handle.width))
-            : (touch-area.mouse-y - touch-area.pressed-y) * (max / (root.height - handle.height)));
-        property<length> new-value : new-value-tmp < 0phx ? 0phx
-            : root.max < 0phx ? 0phx
-            : new-value-tmp > root.max ? root.max : new-value-tmp;
+        x: !horizontal ? 0phx : (root.width - handle.width) * (-value / maximum);
+        y: horizontal ? 0phx : (root.height - handle.height) * (-value / maximum);
     }
     touch-area := TouchArea {
         width: parent.width;
         height: parent.height;
-        clicked => {
-            root.value = -handle.new-value;
+        property <length> pressed-value;
+        pressed-changed => {
+            if (pressed) { pressed-value = -root.value; }
+        }
+        moved => {
+            if (enabled && pressed) {
+                value = -max(0px, min(root.maximum, pressed-value + (
+                    horizontal ? (touch-area.mouse-x - touch-area.pressed-x) * (maximum / (root.width - handle.width))
+                               : (touch-area.mouse-y - touch-area.pressed-y) * (maximum / (root.height - handle.height))
+                )));
+            }
         }
     }
 }
@@ -189,7 +191,7 @@ export ScrollView := Rectangle {
         y: fli.y;
         height: fli.height;
         horizontal: false;
-        max: fli.viewport-height - fli.height;
+        maximum: fli.viewport-height - fli.height;
         page-size: fli.height;
     }
     hbar := ScrollBar {
@@ -198,7 +200,7 @@ export ScrollView := Rectangle {
         x: fli.x;
         width: fli.width;
         horizontal: true;
-        max: fli.viewport-width - fli.width;
+        maximum: fli.viewport-width - fli.width;
         page-size: fli.width;
     }
 }