spinbutton: value scrubbing gesture

.config/ags/modules/.commonwidgets/configwidgets.js

@@ -1,9 +1,10 @@
+const { Gtk } = imports.gi;
 import Variable from 'resource:///com/github/Aylur/ags/variable.js';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
 import { MaterialIcon } from './materialicon.js';
-import { setupCursorHover } from '../.widgetutils/cursorhover.js';
-const { Box, Button, Label, Revealer, SpinButton } = Widget;
+import { setupCursorHover, setupCursorHoverHResize } from '../.widgetutils/cursorhover.js';
+const { Box, Button, EventBox, Label, Revealer, SpinButton } = Widget;
 
 // Basically M3 Switch
 // https://m3.material.io/components/switch/overview
@@ -204,10 +205,14 @@ export const ConfigGap = ({ vertical = true, size = 5, ...rest }) => Box({
     ...rest,
 })
 
+// Gtk SpinButton with value scrubbing gesture
+// scrubRatio is the ratio of changed value to drag distance in pixels
+// onReset must be async
 export const ConfigSpinButton = ({
     icon, name, desc = '', initValue,
     minValue = 0, maxValue = 100, step = 1,
     expandWidget = true, resetButton = false,
+    scrubRatio = 1 / 20, roundValue = true,
     onChange = () => { }, extraSetup = () => { },
     onReset = () => { }, fetchValue = () => { },
     ...rest
@@ -223,8 +228,10 @@ export const ConfigSpinButton = ({
             value.value = newValue;
             onChange(spinButton, newValue);
         },
+        // This funny line means: set value of the spinbutton to the value of the
+        //   Variable object called value that tracks the value of the widget
+        value: value.value,
     });
-    spinButton.value = value.value;
     const widgetContent = Box({
         tooltipText: desc,
         className: 'txt spacing-h-5 configtoggle-box',
@@ -256,6 +263,31 @@ export const ConfigSpinButton = ({
         },
         ...rest,
     });
-    widgetContent.enabled = value;
-    return widgetContent;
+    const interactionWrapper = EventBox({
+        child: widgetContent,
+        setup: setupCursorHoverHResize,
+    })
+    const gesture = Gtk.GestureDrag.new(interactionWrapper);
+    let gestureValueOnDragBegin;
+    const wholeThing = Box({
+        children: [interactionWrapper],
+        setup: (self) => self
+            .hook(gesture, (self) => {
+                gestureValueOnDragBegin = value.value;
+            }, 'drag-begin')
+            .hook(gesture, (self) => {
+                var offset_x = gesture.get_offset()[1];
+                var offset_y = gesture.get_offset()[2];
+                let newValue = gestureValueOnDragBegin + (offset_x * scrubRatio);
+                if (roundValue) newValue = Math.round(newValue);
+                if (newValue !== spinButton.value) {
+                    spinButton.value = newValue;
+                }
+            }, 'drag-update')
+            .hook(gesture, (self) => {
+
+            }, 'drag-end')
+    });
+    wholeThing.enabled = value;
+    return wholeThing;
 }

.config/ags/modules/.widgetutils/cursorhover.js

@@ -27,3 +27,10 @@ export function setupCursorHoverInfo(button) { // "?" mark cursor on hover
     setupCursorHover(button, 'help');
 }
 
+export function setupCursorHoverHResize(button) { // Resize left right
+    setupCursorHover(button, 'ew-resize');
+}
+
+export function setupCursorHoverVResize(button) { // Resize up down
+    setupCursorHover(button, 'ns-resize');
+}