new design for left click and wheel (#5566)

* new design for left click and wheel

* update snap

* fix import

* fix test

* default value

* fix test

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

src/platform/settings/composables/useLitegraphSettings.ts

@@ -131,11 +131,26 @@ export const useLitegraphSettings = () => {
     const navigationMode = settingStore.get('Comfy.Canvas.NavigationMode') as
       | 'standard'
       | 'legacy'
+      | 'custom'
 
     LiteGraph.canvasNavigationMode = navigationMode
     LiteGraph.macTrackpadGestures = navigationMode === 'standard'
   })
 
+  watchEffect(() => {
+    const leftMouseBehavior = settingStore.get(
+      'Comfy.Canvas.LeftMouseClickBehavior'
+    ) as 'panning' | 'select'
+    LiteGraph.leftMouseClickBehavior = leftMouseBehavior
+  })
+
+  watchEffect(() => {
+    const mouseWheelScroll = settingStore.get(
+      'Comfy.Canvas.MouseWheelScroll'
+    ) as 'panning' | 'zoom'
+    LiteGraph.mouseWheelScroll = mouseWheelScroll
+  })
+
   watchEffect(() => {
     LiteGraph.saveViewportWithGraph = settingStore.get(
       'Comfy.EnableWorkflowViewRestore'

src/platform/settings/constants/coreSettings.ts

@@ -1,4 +1,5 @@
 import { LinkMarkerShape, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
 import type { ColorPalettes } from '@/schemas/colorPaletteSchema'
 import type { Keybinding } from '@/schemas/keyBindingSchema'
@@ -138,6 +139,95 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'boolean',
     defaultValue: false
   },
+  {
+    id: 'Comfy.Canvas.NavigationMode',
+    category: ['LiteGraph', 'Canvas Navigation', 'NavigationMode'],
+    name: 'Navigation Mode',
+    defaultValue: 'legacy',
+    type: 'combo',
+    sortOrder: 100,
+    options: [
+      { value: 'standard', text: 'Standard (New)' },
+      { value: 'legacy', text: 'Drag Navigation' },
+      { value: 'custom', text: 'Custom' }
+    ],
+    versionAdded: '1.25.0',
+    defaultsByInstallVersion: {
+      '1.25.0': 'legacy'
+    },
+    onChange: async (newValue: string) => {
+      const settingStore = useSettingStore()
+
+      if (newValue === 'standard') {
+        // Update related settings to match standard mode - select + panning
+        await settingStore.set('Comfy.Canvas.LeftMouseClickBehavior', 'select')
+        await settingStore.set('Comfy.Canvas.MouseWheelScroll', 'panning')
+      } else if (newValue === 'legacy') {
+        // Update related settings to match legacy mode - panning + zoom
+        await settingStore.set('Comfy.Canvas.LeftMouseClickBehavior', 'panning')
+        await settingStore.set('Comfy.Canvas.MouseWheelScroll', 'zoom')
+      }
+    }
+  },
+  {
+    id: 'Comfy.Canvas.LeftMouseClickBehavior',
+    category: ['LiteGraph', 'Canvas Navigation', 'LeftMouseClickBehavior'],
+    name: 'Left Mouse Click Behavior',
+    defaultValue: 'panning',
+    type: 'radio',
+    sortOrder: 50,
+    options: [
+      { value: 'panning', text: 'Panning' },
+      { value: 'select', text: 'Select' }
+    ],
+    versionAdded: '1.27.4',
+    onChange: async (newValue: string) => {
+      const settingStore = useSettingStore()
+
+      const navigationMode = settingStore.get('Comfy.Canvas.NavigationMode')
+
+      if (navigationMode !== 'custom') {
+        if (
+          (newValue === 'select' && navigationMode === 'standard') ||
+          (newValue === 'panning' && navigationMode === 'legacy')
+        ) {
+          return
+        }
+
+        // only set to custom if it doesn't match the preset modes
+        await settingStore.set('Comfy.Canvas.NavigationMode', 'custom')
+      }
+    }
+  },
+  {
+    id: 'Comfy.Canvas.MouseWheelScroll',
+    category: ['LiteGraph', 'Canvas Navigation', 'MouseWheelScroll'],
+    name: 'Mouse Wheel Scroll',
+    defaultValue: 'zoom',
+    type: 'radio',
+    options: [
+      { value: 'panning', text: 'Panning' },
+      { value: 'zoom', text: 'Zoom in/out' }
+    ],
+    versionAdded: '1.27.4',
+    onChange: async (newValue: string) => {
+      const settingStore = useSettingStore()
+
+      const navigationMode = settingStore.get('Comfy.Canvas.NavigationMode')
+
+      if (navigationMode !== 'custom') {
+        if (
+          (newValue === 'panning' && navigationMode === 'standard') ||
+          (newValue === 'zoom' && navigationMode === 'legacy')
+        ) {
+          return
+        }
+
+        // only set to custom if it doesn't match the preset modes
+        await settingStore.set('Comfy.Canvas.NavigationMode', 'custom')
+      }
+    }
+  },
   {
     id: 'Comfy.Graph.CanvasInfo',
     category: ['LiteGraph', 'Canvas', 'CanvasInfo'],
@@ -813,21 +903,6 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: 8,
     versionAdded: '1.26.7'
   },
-  {
-    id: 'Comfy.Canvas.NavigationMode',
-    category: ['LiteGraph', 'Canvas', 'CanvasNavigationMode'],
-    name: 'Canvas Navigation Mode',
-    defaultValue: 'legacy',
-    type: 'combo',
-    options: [
-      { value: 'standard', text: 'Standard (New)' },
-      { value: 'legacy', text: 'Drag Navigation' }
-    ],
-    versionAdded: '1.25.0',
-    defaultsByInstallVersion: {
-      '1.25.0': 'legacy'
-    }
-  },
   {
     id: 'Comfy.Canvas.SelectionToolbox',
     category: ['LiteGraph', 'Canvas', 'SelectionToolbox'],