Merge pull request Gnathonic#201 from Gnathonic/feat/swap-wheel-behavior

feat: Add toggle to swap mouse wheel scroll/zoom behavior

Author: Gnathonic

src/lib/components/Settings/Reader/ReaderToggles.svelte

@@ -18,6 +18,7 @@
     { key: 'mobile', text: 'Mobile', value: $settings.mobile },
     { key: 'showTimer', text: 'Show timer', value: $settings.showTimer },
     { key: 'quickActions', text: 'Show quick actions', value: $settings.quickActions },
+    { key: 'swapWheelBehavior', text: 'Swap mouse wheel scroll/zoom', value: $settings.swapWheelBehavior },
     { key: 'invertColors', text: 'Invert colors of the images', value: $settings.invertColors, shortcut: 'I' },
     { key: 'nightMode', text: 'Night mode (strong red filter)', value: $settings.nightMode, shortcut: 'N' }
   ] as { key: SettingsKey; text: string; value: any; shortcut?: string }[]);

src/lib/panzoom/util.ts

@@ -14,6 +14,7 @@ export const sessionFullscreenState = writable<boolean | undefined>(undefined);
 
 export function initPanzoom(node: HTMLElement) {
   container = node;
+
   pz = panzoom(node, {
     bounds: false,
     maxZoom: 10,
@@ -29,7 +30,12 @@ export function initPanzoom(node: HTMLElement) {
       // This allows text selection within text boxes
       return isTextBox;
     },
-    beforeWheel: (e) => !e.ctrlKey,
+    // When swapWheelBehavior is true: zoom without modifier, scroll with Ctrl
+    // When swapWheelBehavior is false (default): scroll without modifier, zoom with Ctrl
+    beforeWheel: (e) => {
+      const swapWheelBehavior = get(settings).swapWheelBehavior;
+      return swapWheelBehavior ? e.ctrlKey : !e.ctrlKey;
+    },
     onTouch: (e) => e.touches.length > 1,
     // Panzoom typing is wrong here
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -49,14 +55,19 @@ export function initPanzoom(node: HTMLElement) {
   pz.on('pan', () => keepInBounds());
   pz.on('zoom', () => keepInBounds());
 
-  // Add custom wheel handler for panning when Ctrl is not pressed
+  // Add custom wheel handler for panning/zooming based on swapWheelBehavior
   const wheelHandler = (e: WheelEvent) => {
-    if (!e.ctrlKey && pz) {
-      e.preventDefault();
-      const { x, y } = pz.getTransform();
-      // Pan vertically based on wheel deltaY
-      pz.moveTo(x, y - e.deltaY);
-      keepInBounds();
+    if (pz) {
+      const swapWheelBehavior = get(settings).swapWheelBehavior;
+      const shouldPan = swapWheelBehavior ? e.ctrlKey : !e.ctrlKey;
+
+      if (shouldPan) {
+        e.preventDefault();
+        const { x, y } = pz.getTransform();
+        // Pan vertically based on wheel deltaY
+        pz.moveTo(x, y - e.deltaY);
+        keepInBounds();
+      }
     }
   };
 

src/lib/settings/settings.ts

@@ -69,6 +69,7 @@ export type Settings = {
   invertColors: boolean;
   nightMode: boolean;
   inactivityTimeoutMinutes: number;
+  swapWheelBehavior: boolean;
   volumeDefaults: VolumeDefaults;
   ankiConnectSettings: AnkiConnectSettings;
   lastUpdated?: string; // ISO 8601 timestamp for sync conflict resolution
@@ -102,6 +103,7 @@ const defaultSettings: Settings = {
   invertColors: false,
   nightMode: false,
   inactivityTimeoutMinutes: 5,
+  swapWheelBehavior: false,
   volumeDefaults: {
     singlePageView: 'auto',
     rightToLeft: true,