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");
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