diff --git a/modules/rcal/components/folk-calendar-view.ts b/modules/rcal/components/folk-calendar-view.ts index 6ba16cf..5b43373 100644 --- a/modules/rcal/components/folk-calendar-view.ts +++ b/modules/rcal/components/folk-calendar-view.ts @@ -2290,7 +2290,9 @@ class FolkCalendarView extends HTMLElement { }); }); - // Scroll/trackpad zoom on calendar pane + // Scroll/trackpad gestures on calendar pane + // - Pinch-to-zoom (ctrlKey wheel) → zoom in/out granularity + // - Two-finger scroll/pan (plain wheel) → navigate timeline const calPane = $("calendar-pane"); if (calPane) { calPane.addEventListener("wheel", (e: WheelEvent) => { @@ -2300,16 +2302,29 @@ class FolkCalendarView extends HTMLElement { e.preventDefault(); - // Debounce: 120ms - if (this._wheelTimer) clearTimeout(this._wheelTimer); - this._wheelTimer = setTimeout(() => { - if (e.deltaY > 0) { - this.zoomOut(); // scroll down → zoom out - } else if (e.deltaY < 0) { - this.zoomIn(); // scroll up → zoom in - } - this._wheelTimer = null; - }, 120); + if (e.ctrlKey) { + // Pinch-to-zoom on trackpad (or Ctrl+scroll with mouse) + if (this._wheelTimer) clearTimeout(this._wheelTimer); + this._wheelTimer = setTimeout(() => { + if (e.deltaY > 0) { + this.zoomOut(); + } else if (e.deltaY < 0) { + this.zoomIn(); + } + this._wheelTimer = null; + }, 120); + } else { + // Two-finger scroll / mouse wheel → navigate timeline + if (this._wheelTimer) clearTimeout(this._wheelTimer); + this._wheelTimer = setTimeout(() => { + if (e.deltaY > 0) { + this.navigate(1); // scroll down → next period + } else if (e.deltaY < 0) { + this.navigate(-1); // scroll up → previous period + } + this._wheelTimer = null; + }, 120); + } }, { passive: false }); // Pan/swipe + pinch-to-zoom on calendar pane