GSlider: Make the knob width proportional to the range, if in that mode (#288)

Regardless of mode, made the knob container clickable so the knob position
can be moved without dragging the knob itself.

Added a 3rd GSlider to the WidgetGallery showing the proportional mode in
action.

Demos/WidgetGallery/main.cpp

@@ -70,6 +70,9 @@ int main(int argc, char** argv)
     (void)slider1;
     auto* slider2 = new GSlider(main_widget);
     slider2->set_enabled(false);
+    auto* slider3 = new GSlider(main_widget);
+    slider3->set_max(5);
+    slider3->set_knob_size_mode(GSlider::KnobSizeMode::Proportional);
 
     auto* scrollbar1 = new GScrollBar(Orientation::Horizontal, main_widget);
     scrollbar1->set_size_policy(SizePolicy::Fill, SizePolicy::Fixed);

Libraries/LibGUI/GSlider.cpp

@@ -56,15 +56,28 @@ void GSlider::paint_event(GPaintEvent& event)
 Rect GSlider::knob_rect() const
 {
     auto inner_rect = this->inner_rect();
-    float range_size = m_max - m_min;
+    Rect rect;
-    float adjusted_value = m_value - m_min;
+    rect.set_y(0);
-    float relative_value = adjusted_value / range_size;
+    rect.set_height(knob_height());
-    Rect rect {
+
-        inner_rect.x() + (int)(relative_value * inner_rect.width()) - knob_width() / 2,
+    if (knob_size_mode() == KnobSizeMode::Fixed) {
-        0,
+        if (m_max - m_min)
-        knob_width(),
+        {
-        knob_height()
+            float scale = (float)inner_rect.width() / (float)(m_max - m_min);
-    };
+            rect.set_x(inner_rect.x() + ((int)(m_value * scale)) - (knob_fixed_width() / 2));
+        }
+        else
+            rect.set_x(0);
+        rect.set_width(knob_fixed_width());
+    }
+    else {
+        float scale = (float)inner_rect.width() / (float)(m_max - m_min + 1);
+        rect.set_x(inner_rect.x() + ((int)(m_value * scale)));
+        if (m_max - m_min)
+            rect.set_width(::max((int)(scale), knob_fixed_width()));
+        else
+            rect.set_width(inner_rect.width());
+    }
     rect.center_vertically_within(inner_rect);
     return rect;
 }
@@ -80,6 +93,12 @@ void GSlider::mousedown_event(GMouseEvent& event)
             m_drag_origin_value = m_value;
             return;
         }
+        else {
+            if (event.position().x() > knob_rect().right())
+                set_value(m_value + 1);
+            else if (event.position().x() < knob_rect().left())
+                set_value(m_value - 1);
+        }
     }
     return GWidget::mousedown_event(event);
 }

Libraries/LibGUI/GSlider.h

@@ -4,6 +4,8 @@
 
 class GSlider : public GWidget {
 public:
+    enum class KnobSizeMode { Fixed, Proportional };
+
     explicit GSlider(GWidget*);
     virtual ~GSlider() override;
 
@@ -17,8 +19,11 @@ public:
     void set_min(int min) { set_range(min, max()); }
     void set_max(int max) { set_range(min(), max); }
 
+    void set_knob_size_mode(KnobSizeMode mode) { m_knob_size_mode = mode; }
+    KnobSizeMode knob_size_mode() const { return m_knob_size_mode; }
+
     int track_height() const { return 2; }
-    int knob_width() const { return 8; }
+    int knob_fixed_width() const { return 8; }
     int knob_height() const { return 20; }
 
     Rect knob_rect() const;
@@ -45,4 +50,6 @@ private:
     bool m_dragging { false };
     int m_drag_origin_value { 0 };
     Point m_drag_origin;
+
+    KnobSizeMode m_knob_size_mode { KnobSizeMode::Fixed };
 };