jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(rcal): distinguish pinch-zoom from scroll-pan on calendar 

Trackpad pinch (ctrlKey wheel) zooms granularity, two-finger scroll
navigates the timeline forward/backward instead of zooming.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-22 12:44:45 -07:00
parent 0fbf12e5f8
commit 0d8d42c49e
1 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
modules/rcal/components/folk-calendar-view.ts
View File

@ -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"); const calPane = $("calendar-pane");
if (calPane) { if (calPane) {
calPane.addEventListener("wheel", (e: WheelEvent) => { calPane.addEventListener("wheel", (e: WheelEvent) => {
@ -2300,16 +2302,29 @@ class FolkCalendarView extends HTMLElement {
e.preventDefault(); e.preventDefault();
// Debounce: 120ms if (e.ctrlKey) {
if (this._wheelTimer) clearTimeout(this._wheelTimer); // Pinch-to-zoom on trackpad (or Ctrl+scroll with mouse)
this._wheelTimer = setTimeout(() => { if (this._wheelTimer) clearTimeout(this._wheelTimer);
if (e.deltaY > 0) { this._wheelTimer = setTimeout(() => {
this.zoomOut(); // scroll down → zoom out if (e.deltaY > 0) {
} else if (e.deltaY < 0) { this.zoomOut();
this.zoomIn(); // scroll up → zoom in } else if (e.deltaY < 0) {
} this.zoomIn();
this._wheelTimer = null; }
}, 120); 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 }); }, { passive: false });
// Pan/swipe + pinch-to-zoom on calendar pane // Pan/swipe + pinch-to-zoom on calendar pane