Fixed a bug that would prevent the workspace module from being scrolled. (#609)

src/components/bar/modules/workspaces/helpers/index.ts

@@ -162,7 +162,7 @@ const navigateWorkspace = (
     while (attempts < workspacesList.length) {
         const targetWS = workspacesList[newIndex];
         if (!isWorkspaceIgnored(ignoredWorkspaces, targetWS)) {
-            hyprlandService.message_async(`dispatch workspace ${targetWS}`);
+            hyprlandService.dispatch('workspace', targetWS.toString());
             return;
         }
         newIndex = (newIndex + step + workspacesList.length) % workspacesList.length;

src/components/bar/modules/workspaces/index.tsx

@@ -1,10 +1,11 @@
 import options from 'src/options';
 import { createThrottledScrollHandlers, getCurrentMonitorWorkspaces } from './helpers';
-import { BarBoxChild, SelfButton } from 'src/lib/types/bar';
+import { BarBoxChild } from 'src/lib/types/bar';
 import { WorkspaceModule } from './workspaces';
 import { bind, Variable } from 'astal';
 import { GtkWidget } from 'src/lib/types/widget';
-import { Gdk } from 'astal/gtk3';
+import { Astal, Gdk } from 'astal/gtk3';
+import { isScrollDown, isScrollUp } from 'src/lib/utils';
 
 const { workspaces, scroll_speed } = options.bar.workspaces;
 
@@ -27,23 +28,27 @@ const Workspaces = (monitor = -1): BarBoxChild => {
         boxClass: 'workspaces',
         isBox: true,
         props: {
-            setup: (self: SelfButton): void => {
+            setup: (self: Astal.EventBox): void => {
+                let scrollHandlers: number;
                 Variable.derive([bind(scroll_speed)], (scroll_speed) => {
+                    if (scrollHandlers) {
+                        self.disconnect(scrollHandlers);
+                    }
+
                     const { throttledScrollUp, throttledScrollDown } = createThrottledScrollHandlers(
                         scroll_speed,
                         currentMonitorWorkspaces,
                     );
 
-                    const scrollHandlers = self.connect('scroll-event', (_: GtkWidget, event: Gdk.Event) => {
+                    scrollHandlers = self.connect('scroll-event', (_: GtkWidget, event: Gdk.Event) => {
-                        const eventDirection = event.get_scroll_direction()[1];
+                        if (isScrollUp(event)) {
-                        if (eventDirection === Gdk.ScrollDirection.UP) {
-                            throttledScrollUp();
-                        } else if (eventDirection === Gdk.ScrollDirection.DOWN) {
                             throttledScrollDown();
                         }
-                    });
 
-                    self.disconnect(scrollHandlers);
+                        if (isScrollDown(event)) {
+                            throttledScrollUp();
+                        }
+                    });
                 });
             },
         },

src/components/bar/shared/WidgetContainer.tsx

@@ -26,9 +26,9 @@ export const WidgetContainer = (child: BarBoxChild): JSX.Element => {
 
     if (child.isBox) {
         return (
-            <box className={buttonClassName} visible={computeVisible(child)}>
+            <eventbox visible={computeVisible(child)} {...child.props}>
-                {child.component}
+                <box className={buttonClassName}>{child.component}</box>
-            </box>
+            </eventbox>
         );
     }
 

src/components/menus/audio/active/sliderItem/Slider.tsx

@@ -1,7 +1,7 @@
 import { bind } from 'astal';
 import { Gdk, Gtk } from 'astal/gtk3';
 import AstalWp from 'gi://AstalWp?version=0.1';
-import { capitalizeFirstLetter } from 'src/lib/utils';
+import { capitalizeFirstLetter, isScrollDown, isScrollUp } from 'src/lib/utils';
 import options from 'src/options';
 
 const { raiseMaximumVolume } = options.menus.volume;
@@ -34,15 +34,14 @@ export const Slider = ({ device, type }: SliderProps): JSX.Element => {
                 }}
                 setup={(self) => {
                     self.connect('scroll-event', (_, event: Gdk.Event) => {
-                        const [directionSuccess, direction] = event.get_scroll_direction();
+                        if (isScrollUp(event)) {
-                        const [deltasSuccess, , yScroll] = event.get_scroll_deltas();
+                            const newVolume = device.volume + 0.05;
+                            device.set_volume(Math.min(newVolume, 1));
+                        }
 
-                        if (directionSuccess) {
+                        if (isScrollDown(event)) {
-                            const newVolume = device.volume + (direction === Gdk.ScrollDirection.DOWN ? 0.05 : -0.05);
+                            const newVolume = device.volume - 0.05;
-                            device.set_volume(Math.min(newVolume, 1));
+                            device.set_volume(newVolume);
-                        } else if (deltasSuccess) {
-                            const newVolume = device.volume - yScroll / 100;
-                            device.set_volume(Math.min(newVolume, 1));
                         }
                     });
                 }}

src/lib/types/bar.d.ts

@@ -13,7 +13,7 @@ export type BarBoxChild = {
     isBox?: boolean;
     boxClass: string;
     tooltip_text?: string | Binding<string>;
-} & ({ isBox: true; props: Widget.BoxProps } | { isBox?: false; props: Widget.ButtonProps });
+} & ({ isBox: true; props: Widget.EventBoxProps } | { isBox?: false; props: Widget.ButtonProps });
 
 export type SelfButton = Button<Child, Attribute>;
 

src/lib/utils.ts

@@ -399,7 +399,20 @@ export const isMiddleClick = (event: Astal.ClickEvent): boolean => event.button
  *
  * @returns True if the event is a scroll up, false otherwise.
  */
-export const isScrollUp = (event: Astal.ScrollEvent): boolean => event.direction === Gdk.ScrollDirection.UP;
+export const isScrollUp = (event: Gdk.Event): boolean => {
+    const [directionSuccess, direction] = event.get_scroll_direction();
+    const [deltaSuccess, , yScroll] = event.get_scroll_deltas();
+
+    if (directionSuccess && direction === Gdk.ScrollDirection.UP) {
+        return true;
+    }
+
+    if (deltaSuccess && yScroll < 0) {
+        return true;
+    }
+
+    return false;
+};
 
 /**
  * Checks if an event is a scroll down.
@@ -410,4 +423,17 @@ export const isScrollUp = (event: Astal.ScrollEvent): boolean => event.direction
  *
  * @returns True if the event is a scroll down, false otherwise.
  */
-export const isScrollDown = (event: Astal.ScrollEvent): boolean => event.direction === Gdk.ScrollDirection.DOWN;
+export const isScrollDown = (event: Gdk.Event): boolean => {
+    const [directionSuccess, direction] = event.get_scroll_direction();
+    const [deltaSuccess, , yScroll] = event.get_scroll_deltas();
+
+    if (directionSuccess && direction === Gdk.ScrollDirection.DOWN) {
+        return true;
+    }
+
+    if (deltaSuccess && yScroll > 0) {
+        return true;
+    }
+
+    return false;
+};