feat: adding trackpad mode

[Chuwee]

I decided to attempt to solve the issue

#220

I implemented a little trackpad mode which takes care of the problem (Settings -> Zoom)

Here's a video

Grabacion.de.pantalla.2026-02-04.a.las.11.30.06.mov

[stan-smith]

Hi 👋

Thanks for the contribution. I've recently tightened up the contribution guidelines for FossFLOW, including enforcing Conventional Commits for PR titles.

Your PR title doesn't follow the required format:

<type>(<scope>): <subject>

Valid types: feat, fix, perf, refactor, docs, style, test, chore, build, ci

Examples:

• feat: add undo/redo functionality
• fix: prevent menu from opening during drag
• docs: update installation instructions

I'm closing this PR. If your changes are still relevant, please:

1. Read the updated CONTRIBUTING.md
2. Resubmit with a compliant PR title
3. Make sure you fill in the PR template

Cheers,
Stan

[stan-smith]

^^ apologies @Chuwee this got caught up in my purge.
Looks great! Ill have a look.
Stan

[stan-smith]

Hi @Chuwee I've been moving house, so I've been really busy.
I promise I havent forgotten!

[Chuwee]

@stan-smith no worries! take your time

[Chuwee]

@stan-smith yo?

[stan-smith]

@Chuwee Im so sorry, I am just swamped at the moment, I'll try to give it a look today

[stan-smith]

Few things to sort before this can go in:

Bug: stale closure on uiState
On master, onScroll reads fresh state every invocation:
tsconst onScroll = (e: WheelEvent) => {
const uiState = uiStateApi.getState();
// ...

Your version captures uiState.zoomSettings.trackpadMode from the outer closure, so if someone toggles trackpad mode in settings it won't actually take effect until the effect re-runs. Call uiStateApi.getState() at the top of onScroll and you're sorted.
Perf: passive: false applied unconditionally
diff- uiState.rendererEl?.addEventListener('wheel', onScroll, { passive: true });

• uiState.rendererEl?.addEventListener('wheel', onScroll, { passive: false });
  This blocks the compositor thread on every wheel event for everyone, regardless of whether trackpad mode is on. preventDefault() is only relevant in trackpad mode, so passive should be conditional on the current setting — you'll need to tear down and re-register the listener when it changes.
  Code duplication

The zoom-to-cursor maths (~30 lines) is copy-pasted across both the trackpad-pinch and mouse-mode branches. Pull it out into a shared helper:
tsconst applyZoom = (e: WheelEvent, oldZoom: number, newZoom: number, uiState: ...) => {
if (uiState.zoomSettings.zoomToCursor && rendererRef.current && rendererSize) {
// zoom-to-cursor maths...
} else {
uiState.actions.setZoom(newZoom);
}
};

Both branches just call applyZoom(e, oldZoom, newZoom, uiState) and you're done.

Nitpicks:
const panSpeed = 1.0 — multiplying by 1.0 is a no-op. Either drop it or make it a configurable setting.

Please rebase on current master (1.10.8) so we don't get the stale package-lock.json version diff.

[Copilot]

Pull request overview

Adds an optional “Trackpad Mode” zoom/pan interaction scheme to improve trackpad UX (issue #220) by letting two-finger scroll pan the canvas while pinch (ctrl+wheel) zooms the canvas without browser zoom interference.

Changes:

• Introduces a new zoomSettings.trackpadMode flag (default false) and exposes it in Settings → Zoom.
• Updates wheel handling to support “pinch=zoom, scroll=pan” when Trackpad Mode is enabled, including switching the wheel listener to non-passive.
• Extends locale typings and updates translations with new Trackpad Mode labels/descriptions.

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/fossflow-lib/src/types/isoflowProps.ts	Extends locale typing for new Trackpad Mode strings.
packages/fossflow-lib/src/interaction/useInteractionManager.ts	Implements trackpad-specific wheel behavior + non-passive wheel listener when enabled.
packages/fossflow-lib/src/config/zoomSettings.ts	Adds trackpadMode to zoom settings + default value.
packages/fossflow-lib/src/components/ZoomSettings/ZoomSettings.tsx	Adds Trackpad Mode toggle to the Zoom settings UI.
packages/fossflow-lib/src/i18n/en-US.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/es-ES.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/fr-FR.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/it-IT.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/pl-PL.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/pt-BR.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/ru-RU.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/tr-TR.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/zh-CN.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/id-ID.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/hi-IN.ts	Adds Trackpad Mode label/description strings.
packages/fossflow-lib/src/i18n/bn-BD.ts	Adds Trackpad Mode label/description strings.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Chuwee]

@stan-smith we're ready