feat: adding trackpad mode

Author: Ignacio Ildefonso de Miguel Ruano

package-lock.json

@@ -48,6 +48,25 @@ export const ZoomSettings = () => {
               </Box>
             }
           />
+          
+          <FormControlLabel
+            control={
+              <Switch
+                checked={zoomSettings.trackpadMode}
+                onChange={() => handleToggle('trackpadMode')}
+              />
+            }
+            label={
+              <Box>
+                <Typography variant="body1">
+                  {locale.settings.zoom.trackpadMode}
+                </Typography>
+                <Typography variant="caption" color="text.secondary">
+                  {locale.settings.zoom.trackpadModeDesc}
+                </Typography>
+              </Box>
+            }
+          />
         </FormGroup>
       </FormControl>
     </Box>

packages/fossflow-lib/src/components/ZoomSettings/ZoomSettings.tsx

@@ -1,9 +1,13 @@
 export interface ZoomSettings {
   // Zoom behavior
   zoomToCursor: boolean;
+  // Trackpad mode: scroll=pan, pinch=zoom
+  trackpadMode: boolean;
 }
 
 export const DEFAULT_ZOOM_SETTINGS: ZoomSettings = {
   // Default to zoom-to-cursor for better UX
-  zoomToCursor: true
+  zoomToCursor: true,
+  // Default to mouse mode (scroll=zoom) for backwards compatibility
+  trackpadMode: false
 };

packages/fossflow-lib/src/config/zoomSettings.ts

@@ -119,7 +119,10 @@ const locale: LocaleProps = {
     zoom: {
       description: "মাউস হুইল ব্যবহার করার সময় জুম আচরণ কনফিগার করুন।",
       zoomToCursor: "কার্সারে জুম করুন",
-      zoomToCursorDesc: "সক্রিয় থাকলে, মাউস কার্সার অবস্থানে কেন্দ্রীভূত জুম ইন/আউট। নিষ্ক্রিয় থাকলে, জুম ক্যানভাসে কেন্দ্রীভূত।"
+      zoomToCursorDesc: "সক্রিয় থাকলে, মাউস কার্সার অবস্থানে কেন্দ্রীভূত জুম ইন/আউট। নিষ্ক্রিয় থাকলে, জুম ক্যানভাসে কেন্দ্রীভূত।",
+
+      trackpadMode: "ট্র্যাকপ্যাড মোড",
+      trackpadModeDesc: "সক্ষম থাকলে: দুই আঙুলের স্ক্রল ক্যানভাস প্যান করে, পিঞ্চ ব্রাউজারকে প্রভাবিত না করে জুম করে। নিষ্ক্রিয় থাকলে: স্ক্রল হুইল ক্যানভাস জুম করে (ডিফল্ট মাউস আচরণ)।"
     },
     hotkeys: {
       title: "শর্টকাট সেটিংস",

packages/fossflow-lib/src/i18n/bn-BD.ts

@@ -119,7 +119,9 @@ const locale: LocaleProps = {
     zoom: {
       description: "Configure zoom behavior when using the mouse wheel.",
       zoomToCursor: "Zoom to Cursor",
-      zoomToCursorDesc: "When enabled, zoom in/out centered on the mouse cursor position. When disabled, zoom is centered on the canvas."
+      zoomToCursorDesc: "When enabled, zoom in/out centered on the mouse cursor position. When disabled, zoom is centered on the canvas.",
+      trackpadMode: "Trackpad Mode",
+      trackpadModeDesc: "When enabled: two-finger scroll pans the canvas, pinch zooms without affecting the browser. When disabled: scroll wheel zooms the canvas (default mouse behavior)."
     },
     hotkeys: {
       title: "Hotkey Settings",

packages/fossflow-lib/src/i18n/en-US.ts

@@ -119,7 +119,9 @@ const locale: LocaleProps = {
     zoom: {
       description: "Configura el comportamiento del zoom al usar la rueda del ratón.",
       zoomToCursor: "Zoom al cursor",
-      zoomToCursorDesc: "Cuando está habilitado, el zoom se centra en la posición del cursor del ratón. Cuando está deshabilitado, el zoom se centra en el lienzo."
+      zoomToCursorDesc: "Cuando está habilitado, el zoom se centra en la posición del cursor del ratón. Cuando está deshabilitado, el zoom se centra en el lienzo.",
+      trackpadMode: "Modo Trackpad",
+      trackpadModeDesc: "Cuando está activado: desplazamiento con dos dedos mueve el lienzo, pellizcar hace zoom sin afectar el navegador. Cuando está desactivado: la rueda hace zoom en el lienzo (comportamiento predeterminado del ratón)."
     },
     hotkeys: {
       title: "Configuración de atajos",

packages/fossflow-lib/src/i18n/es-ES.ts

@@ -119,7 +119,10 @@ const locale: LocaleProps = {
     zoom: {
       description: "Configurer le comportement du zoom lors de l'utilisation de la molette de la souris.",
       zoomToCursor: "Zoom sur le curseur",
-      zoomToCursorDesc: "Lorsqu'il est activé, le zoom est centré sur la position du curseur de la souris. Lorsqu'il est désactivé, le zoom est centré sur le canevas."
+      zoomToCursorDesc: "Lorsqu'il est activé, le zoom est centré sur la position du curseur de la souris. Lorsqu'il est désactivé, le zoom est centré sur le canevas.",
+
+      trackpadMode: "Mode Trackpad",
+      trackpadModeDesc: "Lorsqu'il est activé : le défilement à deux doigts déplace le canevas, le pincement effectue un zoom sans affecter le navigateur. Lorsqu'il est désactivé : la molette effectue un zoom sur le canevas (comportement par défaut de la souris)."
     },
     hotkeys: {
       title: "Paramètres des raccourcis",

packages/fossflow-lib/src/i18n/fr-FR.ts

@@ -119,7 +119,10 @@ const locale: LocaleProps = {
     zoom: {
       description: "माउस व्हील का उपयोग करते समय ज़ूम व्यवहार को कॉन्फ़िगर करें।",
       zoomToCursor: "कर्सर पर ज़ूम करें",
-      zoomToCursorDesc: "सक्षम होने पर, माउस कर्सर की स्थिति पर केंद्रित ज़ूम इन/आउट। अक्षम होने पर, ज़ूम कैनवास पर केंद्रित होता है।"
+      zoomToCursorDesc: "सक्षम होने पर, माउस कर्सर की स्थिति पर केंद्रित ज़ूम इन/आउट। अक्षम होने पर, ज़ूम कैनवास पर केंद्रित होता है।",
+
+      trackpadMode: "ट्रैकपैड मोड",
+      trackpadModeDesc: "सक्षम होने पर: दो उंगलियों से स्क्रॉल करने पर कैनवास पैन होता है, पिंच करने पर ब्राउज़र को प्रभावित किए बिना ज़ूम होता है। अक्षम होने पर: माउस व्हील से कैनवास ज़ूम होता है (डिफ़ॉल्ट माउस व्यवहार)।"
     },
     hotkeys: {
       title: "शॉर्टकट सेटिंग्स",

packages/fossflow-lib/src/i18n/hi-IN.ts

@@ -119,7 +119,10 @@ const locale: LocaleProps = {
     zoom: {
       description: "Konfigurasi perilaku zoom saat menggunakan roda mouse.",
       zoomToCursor: "Zoom ke Kursor",
-      zoomToCursorDesc: "Saat diaktifkan, zoom masuk/keluar terpusat pada posisi kursor mouse. Saat dinonaktifkan, zoom terpusat pada kanvas."
+      zoomToCursorDesc: "Saat diaktifkan, zoom masuk/keluar terpusat pada posisi kursor mouse. Saat dinonaktifkan, zoom terpusat pada kanvas.",
+
+      trackpadMode: "Mode Trackpad",
+      trackpadModeDesc: "Saat diaktifkan: gulir dua jari menggeser kanvas, cubit untuk memperbesar tanpa mempengaruhi browser. Saat dinonaktifkan: roda gulir memperbesar kanvas (perilaku mouse default)."
     },
     hotkeys: {
       title: "Pengaturan Pintasan",

packages/fossflow-lib/src/i18n/id-ID.ts

@@ -119,7 +119,10 @@ const locale: LocaleProps = {
     zoom: {
       description: "Configura il comportamento dello zoom quando si usa la rotella del mouse.",
       zoomToCursor: "Zoom sul cursore",
-      zoomToCursorDesc: "Se abilitato, ingrandisci o riduci centrando sul cursore del mouse. Se disabilitato, lo zoom è centrato sulla tela."
+      zoomToCursorDesc: "Se abilitato, ingrandisci o riduci centrando sul cursore del mouse. Se disabilitato, lo zoom è centrato sulla tela.",
+
+      trackpadMode: "Modalità Trackpad",
+      trackpadModeDesc: "Quando abilitato: lo scorrimento con due dita sposta la tela, il pizzico ingrandisce senza influire sul browser. Quando disabilitato: la rotellina del mouse ingrandisce la tela (comportamento predefinito del mouse)."
     },
     hotkeys: {
       title: "Impostazioni scorciatoie",