feat: add helper to handle touch tap and scroll

Author: TimP4w

src/components/windowsSuggestions/suggestedWindowPreview.ts

@@ -11,6 +11,7 @@ import {
     GLib,
 } from '@gi.ext';
 import { logger } from '@utils/logger';
+import TouchEventHelper from '@utils/touch';
 
 const WINDOW_OVERLAY_FADE_TIME = 200;
 
@@ -40,6 +41,7 @@ export default class SuggestedWindowPreview extends Shell.WindowPreview {
     private _stackAbove: Clutter.Actor | null;
     private _destroyed: boolean;
     private _idleHideOverlayId: number;
+    private _touchHelper: TouchEventHelper;
 
     constructor(metaWindow: Meta.Window) {
         super({
@@ -153,6 +155,8 @@ export default class SuggestedWindowPreview extends Shell.WindowPreview {
             this._title.ensure_style();
             this._icon.ensure_style();
         });
+
+        this._touchHelper = new TouchEventHelper(this);
     }
 
     public get_window_clone(): Clutter.Actor | undefined {
@@ -351,4 +355,11 @@ export default class SuggestedWindowPreview extends Shell.WindowPreview {
 
         this.hideOverlay(true);
     }
+
+    vfunc_touch_event(event: Clutter.Event): boolean {
+        if (this._touchHelper.convertTapToButtonPress(event))
+            return super.vfunc_touch_event(event);
+
+        return false;
+    }
 }

src/components/windowsSuggestions/suggestionsTilePreview.ts

@@ -4,6 +4,7 @@ import TilePreview from '../tilepreview/tilePreview';
 import { buildBlurEffect, widgetOrientation } from '@utils/gnomesupport';
 import Tile from '@components/layout/Tile';
 import MasonryLayoutManager from './masonryLayoutManager';
+import TouchEventHelper from '@utils/touch';
 
 const MASONRY_LAYOUT_SPACING = 32;
 const SCROLLBARS_SHOW_ANIM_DURATION = 100; // ms
@@ -26,6 +27,7 @@ export default class SuggestionsTilePreview extends TilePreview {
     private _blur: boolean;
     private _container: St.BoxLayout;
     private _scrollView: St.ScrollView;
+    private _touchHelper: TouchEventHelper;
 
     constructor(params: {
         parent: Clutter.Actor;
@@ -94,6 +96,8 @@ export default class SuggestionsTilePreview extends TilePreview {
             // @ts-expect-error "get_vscroll_bar is valid for GNOME < 48"
             this._scrollView.get_vscroll_bar().opacity = 0;
         }
+
+        this._touchHelper = new TouchEventHelper(this);
     }
 
     set blur(value: boolean) {
@@ -127,6 +131,8 @@ export default class SuggestionsTilePreview extends TilePreview {
         this.add_effect(effect);
 
         this.add_style_class_name('selection-tile-preview');
+
+        this._setupTouchScrolling();
     }
 
     _recolor() {
@@ -243,4 +249,13 @@ export default class SuggestionsTilePreview extends TilePreview {
     public removeAllWindows() {
         this._container.destroy_all_children();
     }
+
+    private _setupTouchScrolling() {
+        this.connect('touch-event', (_, event: Clutter.Event) => {
+            return this._touchHelper.convertPanToScroll(
+                event,
+                this._scrollView,
+            );
+        });
+    }
 }

src/components/windowsSuggestions/tilingLayoutWithSuggestions.ts

@@ -13,6 +13,7 @@ import SignalHandling from '@utils/signalHandling';
 import SuggestionsTilePreview from '@components/windowsSuggestions/suggestionsTilePreview';
 import TilingShellWindowManager from '@components/windowManager/tilingShellWindowManager';
 import { unmaximizeWindow } from '@utils/gnomesupport';
+import TouchEventHelper from '@utils/touch';
 
 const debug = logger('TilingLayoutWithSuggestions');
 
@@ -25,6 +26,7 @@ export default class TilingLayoutWithSuggestions extends LayoutWidget<Suggestion
     private _lastTiledWindow: Meta.Window | null;
     private _showing: boolean;
     private _oldPreviews: SuggestionsTilePreview[];
+    private _touchHelper: TouchEventHelper;
 
     constructor(
         innerGaps: Clutter.Margin,
@@ -47,6 +49,7 @@ export default class TilingLayoutWithSuggestions extends LayoutWidget<Suggestion
         this._showing = false;
         this._oldPreviews = [];
         this.connect('destroy', () => this._signals.disconnect());
+        this._touchHelper = new TouchEventHelper(this);
     }
 
     protected override buildTile(
@@ -80,7 +83,13 @@ export default class TilingLayoutWithSuggestions extends LayoutWidget<Suggestion
         this._recursivelyShowPopup(nontiledWindows, monitorIndex);
 
         this._signals.disconnect();
-        this._signals.connect(this, 'touch-event', () => this.close());
+        this._signals.connect(
+            this,
+            'touch-event',
+            (_, event: Clutter.Event) => {
+                return this._touchHelper.convertTapToButtonPress(event);
+            },
+        );
         this._signals.connect(this, 'key-focus-out', () => this.close());
         this._signals.connect(this, 'button-press-event', () => {
             // if a window clone is pressed by a button, it will stop propagating the event
@@ -250,7 +259,6 @@ export default class TilingLayoutWithSuggestions extends LayoutWidget<Suggestion
 
             // when the clone is selected by the user
             winClone.connect('button-press-event', onSuggestionPress);
-            winClone.connect('touch-event', onSuggestionPress);
 
             return winClone;
         });

src/utils/touch.ts

@@ -0,0 +1,95 @@
+import { Clutter, St } from '@gi.ext';
+
+export default class TouchEventHelper {
+    private readonly TOUCH_SCROLL_THRESHOLD = 10;
+
+    private _touchStartY: number | null = null;
+    private _touchMoved: boolean = false;
+    private _scrollStartY: number = 0;
+    private _isDragging: boolean = false;
+
+    private _actor: Clutter.Actor;
+
+    constructor(actor: Clutter.Actor) {
+        this._actor = actor;
+    }
+
+    convertTapToButtonPress(event: Clutter.Event): boolean {
+        const eventType = event.type();
+        const [, y] = event.get_coords();
+
+        switch (eventType) {
+            case Clutter.EventType.TOUCH_BEGIN:
+                this._touchStartY = y;
+                this._isDragging = false;
+                return Clutter.EVENT_PROPAGATE;
+            case Clutter.EventType.TOUCH_UPDATE:
+                if (this._touchStartY !== null) {
+                    const deltaY = Math.abs(y - this._touchStartY);
+                    if (deltaY > this.TOUCH_SCROLL_THRESHOLD)
+                        this._isDragging = true;
+                }
+                return Clutter.EVENT_PROPAGATE;
+
+            case Clutter.EventType.TOUCH_END: {
+                const wasTap = !this._isDragging;
+                this._touchStartY = null;
+                this._isDragging = false;
+
+                if (wasTap) this._actor.emit('button-press-event', event);
+                return Clutter.EVENT_STOP;
+            }
+            default:
+                return Clutter.EVENT_PROPAGATE;
+        }
+    }
+
+    convertPanToScroll(
+        event: Clutter.Event,
+        scrollView: St.ScrollView,
+    ): boolean {
+        const eventType = event.type();
+        const [, y] = event.get_coords();
+
+        switch (eventType) {
+            case Clutter.EventType.TOUCH_BEGIN:
+                this._touchStartY = y;
+                this._scrollStartY = scrollView.vadjustment.value;
+                this._isDragging = false;
+                return Clutter.EVENT_STOP;
+
+            case Clutter.EventType.TOUCH_UPDATE:
+                if (this._touchStartY !== null) {
+                    const deltaY = this._touchStartY - y;
+                    const newScrollYValue = this._scrollStartY + deltaY;
+                    const adjustment = scrollView.vadjustment;
+                    const clampedValue = Math.max(
+                        0,
+                        Math.min(
+                            newScrollYValue,
+                            adjustment.upper - adjustment.page_size,
+                        ),
+                    );
+                    adjustment.set_value(clampedValue);
+
+                    if (Math.abs(deltaY) > this.TOUCH_SCROLL_THRESHOLD)
+                        this._isDragging = true;
+                }
+                return Clutter.EVENT_STOP;
+
+            case Clutter.EventType.TOUCH_END: {
+                const wasDragging = this._isDragging;
+                this._touchStartY = null;
+                this._isDragging = false;
+
+                // Propagate touch event if we weren't dragging
+                return wasDragging
+                    ? Clutter.EVENT_STOP
+                    : Clutter.EVENT_PROPAGATE;
+            }
+
+            default:
+                return Clutter.EVENT_PROPAGATE;
+        }
+    }
+}