Add link release searchbox trigger mode (#356)

Author: huchenlei

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -22,14 +22,17 @@
 
 <script setup lang="ts">
 import { app } from '@/scripts/app'
-import { onMounted, onUnmounted, reactive, ref } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 import NodeSearchBox from './NodeSearchBox.vue'
 import Dialog from 'primevue/dialog'
 import { LiteGraphCanvasEvent, ConnectingLink } from '@comfyorg/litegraph'
 import { FilterAndValue } from '@/services/nodeSearchService'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { ConnectingLinkImpl } from '@/types/litegraphTypes'
-import { LiteGraph } from '@comfyorg/litegraph'
+import { useSettingStore } from '@/stores/settingStore'
+import { LinkReleaseTriggerMode } from '@/types/searchBoxTypes'
+
+const settingStore = useSettingStore()
 
 interface LiteGraphPointerEvent extends Event {
   canvasX: number
@@ -83,7 +86,24 @@ const addNode = (nodeDef: ComfyNodeDefImpl) => {
   }, 100)
 }
 
+const linkReleaseTriggerMode = computed<LinkReleaseTriggerMode>(() => {
+  return settingStore.get<LinkReleaseTriggerMode>(
+    'Comfy.NodeSearchBoxImpl.LinkReleaseTrigger'
+  )
+})
+
 const canvasEventHandler = (e: LiteGraphCanvasEvent) => {
+  const shiftPressed = (e.detail.originalEvent as KeyboardEvent).shiftKey
+
+  if (
+    (linkReleaseTriggerMode.value === LinkReleaseTriggerMode.HOLD_SHIFT &&
+      !shiftPressed) ||
+    (linkReleaseTriggerMode.value === LinkReleaseTriggerMode.NOT_HOLD_SHIFT &&
+      shiftPressed)
+  ) {
+    return
+  }
+
   if (e.detail.subType === 'empty-release') {
     const context = e.detail.linkReleaseContext
     if (context.links.length === 0) {

src/scripts/ui.ts

@@ -424,14 +424,6 @@ export class ComfyUI {
       defaultValue: 0
     })
 
-    this.settings.addSetting({
-      id: 'Comfy.NodeSearchBoxImpl',
-      name: 'Node Search box implementation',
-      type: 'combo',
-      options: ['default', 'litegraph (legacy)'],
-      defaultValue: 'default'
-    })
-
     this.settings.addSetting({
       id: 'Comfy.EnableTooltips',
       name: 'Enable Tooltips',

src/stores/settingStore.ts

@@ -9,6 +9,7 @@
 
 import { app } from '@/scripts/app'
 import { ComfySettingsDialog } from '@/scripts/ui/settings'
+import { LinkReleaseTriggerMode } from '@/types/searchBoxTypes'
 import { SettingParams } from '@/types/settingTypes'
 import { buildTree } from '@/utils/treeUtil'
 import { defineStore } from 'pinia'
@@ -63,6 +64,23 @@ export const useSettingStore = defineStore('setting', {
         type: 'boolean',
         defaultValue: true
       })
+
+      app.ui.settings.addSetting({
+        id: 'Comfy.NodeSearchBoxImpl',
+        name: 'Node Search box implementation',
+        type: 'combo',
+        options: ['default', 'litegraph (legacy)'],
+        defaultValue: 'default'
+      })
+
+      app.ui.settings.addSetting({
+        id: 'Comfy.NodeSearchBoxImpl.LinkReleaseTrigger',
+        name: 'Trigger on link release',
+        tooltip: 'Only applies to the default implementation',
+        type: 'combo',
+        options: Object.values(LinkReleaseTriggerMode),
+        defaultValue: LinkReleaseTriggerMode.ALWAYS
+      })
     },
 
     set(key: string, value: any) {

src/types/searchBoxTypes.ts

@@ -0,0 +1,5 @@
+export enum LinkReleaseTriggerMode {
+  ALWAYS = 'always',
+  HOLD_SHIFT = 'hold shift',
+  NOT_HOLD_SHIFT = 'NOT hold shift'
+}