From ce2a2dd2b6ab04fe0a41bc017445223fe3a17f2d Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Sat, 10 Aug 2024 10:30:29 -0400
Subject: [PATCH] Add link release searchbox trigger mode (#356)

---
 .../searchbox/NodeSearchBoxPopover.vue        | 24 +++++++++++++++++--
 src/scripts/ui.ts                             |  8 -------
 src/stores/settingStore.ts                    | 18 ++++++++++++++
 src/types/searchBoxTypes.ts                   |  5 ++++
 4 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 src/types/searchBoxTypes.ts

diff --git a/src/components/searchbox/NodeSearchBoxPopover.vue b/src/components/searchbox/NodeSearchBoxPopover.vue
index 95a76c32e..b330dd2a7 100644
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/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) {
diff --git a/src/scripts/ui.ts b/src/scripts/ui.ts
index 6299d31d3..4e81caaaa 100644
--- a/src/scripts/ui.ts
+++ b/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',
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index e9b824b1e..afc28fd7d 100644
--- a/src/stores/settingStore.ts
+++ b/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) {
diff --git a/src/types/searchBoxTypes.ts b/src/types/searchBoxTypes.ts
new file mode 100644
index 000000000..91855e76c
--- /dev/null
+++ b/src/types/searchBoxTypes.ts
@@ -0,0 +1,5 @@
+export enum LinkReleaseTriggerMode {
+  ALWAYS = 'always',
+  HOLD_SHIFT = 'hold shift',
+  NOT_HOLD_SHIFT = 'NOT hold shift'
+}