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

fix: rFlows canvas two-finger scroll pans instead of zooming 

Wheel without Ctrl/Meta now pans (trackpad two-finger scroll, mouse
wheel). Ctrl+wheel and trackpad pinch zoom with reduced sensitivity
(0.003 multiplier vs old binary 0.9/1.1 toggle).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-04 17:31:31 -08:00
parent 57fd1f4913
commit 0bf3b3430c
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
modules/rflows/components/folk-flows-app.ts
View File

@ -682,18 +682,26 @@ class FolkFlowsApp extends HTMLElement {
const svg = this.shadow.getElementById("flow-canvas"); const svg = this.shadow.getElementById("flow-canvas");
if (!svg) return; if (!svg) return;
// Wheel zoom // Wheel: pan (default) or zoom (Ctrl/pinch)
// Trackpad two-finger scroll → pan; trackpad pinch / Ctrl+scroll → zoom
svg.addEventListener("wheel", (e: WheelEvent) => { svg.addEventListener("wheel", (e: WheelEvent) => {
e.preventDefault(); e.preventDefault();
const delta = e.deltaY > 0 ? 0.9 : 1.1; if (e.ctrlKey || e.metaKey) {
const rect = svg.getBoundingClientRect(); // Zoom — ctrlKey is set by trackpad pinch gestures and Ctrl+scroll
const mx = e.clientX - rect.left; const zoomFactor = 1 - e.deltaY * 0.003;
const my = e.clientY - rect.top; const rect = svg.getBoundingClientRect();
const newZoom = Math.max(0.1, Math.min(4, this.canvasZoom * delta)); const mx = e.clientX - rect.left;
// Zoom toward pointer const my = e.clientY - rect.top;
this.canvasPanX = mx - (mx - this.canvasPanX) * (newZoom / this.canvasZoom); const newZoom = Math.max(0.1, Math.min(4, this.canvasZoom * zoomFactor));
this.canvasPanY = my - (my - this.canvasPanY) * (newZoom / this.canvasZoom); // Zoom toward pointer
this.canvasZoom = newZoom; this.canvasPanX = mx - (mx - this.canvasPanX) * (newZoom / this.canvasZoom);
this.canvasPanY = my - (my - this.canvasPanY) * (newZoom / this.canvasZoom);
this.canvasZoom = newZoom;
} else {
// Pan — two-finger trackpad scroll or mouse wheel
this.canvasPanX -= e.deltaX;
this.canvasPanY -= e.deltaY;
}
this.updateCanvasTransform(); this.updateCanvasTransform();
}, { passive: false }); }, { passive: false });