link release pops up searchbox by default (#348) (#350)

* link release pops up searchbox by default (#348)

* link release pops up searchbox by default

* Update browser test

* Fix tests

* Update test expectations [skip ci]

---------

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

browser_tests/interaction.spec.ts

@@ -27,6 +27,9 @@ test.describe('Node Interaction', () => {
 
   test('Can disconnect/connect edge', async ({ comfyPage }) => {
     await comfyPage.disconnectEdge()
+    // Close search menu poped up.
+    await comfyPage.page.keyboard.press('Escape')
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'disconnected-edge-with-menu.png'
     )

browser_tests/nodeSearchBox.spec.ts

@@ -8,16 +8,10 @@ test.describe('Node search box', () => {
   })
 
   test('Can trigger on link release', async ({ comfyPage }) => {
-    await comfyPage.page.keyboard.down('Shift')
     await comfyPage.disconnectEdge()
     await expect(comfyPage.searchBox.input).toHaveCount(1)
   })
 
-  test('Does not trigger on link release (no shift)', async ({ comfyPage }) => {
-    await comfyPage.disconnectEdge()
-    await expect(comfyPage.searchBox.input).toHaveCount(0)
-  })
-
   test('Can add node', async ({ comfyPage }) => {
     await comfyPage.doubleClickCanvas()
     await expect(comfyPage.searchBox.input).toHaveCount(1)
@@ -26,9 +20,7 @@ test.describe('Node search box', () => {
   })
 
   test('Can auto link node', async ({ comfyPage }) => {
-    await comfyPage.page.keyboard.down('Shift')
     await comfyPage.disconnectEdge()
-    await comfyPage.page.keyboard.up('Shift')
     await comfyPage.searchBox.fillAndSelectFirstNode('CLIPTextEncode')
     await expect(comfyPage.canvas).toHaveScreenshot('auto-linked-node.png')
   })
@@ -44,7 +36,6 @@ test.describe('Node search box', () => {
       x: 5,
       y: 5
     }
-
     await comfyPage.page.keyboard.down('Shift')
     await comfyPage.dragAndDrop(outputSlot1Pos, emptySpacePos)
     await comfyPage.page.keyboard.up('Shift')

playwright.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
-      timeout: 5000
+      timeout: 15000
     }
 
     // {

src/components/graph/GraphCanvas.vue

@@ -44,9 +44,14 @@ const betaMenuEnabled = computed(
 const nodeSearchEnabled = computed<boolean>(
   () => settingStore.get('Comfy.NodeSearchBoxImpl') === 'default'
 )
-watch(nodeSearchEnabled, (newVal) => {
+watch(
-  if (comfyApp.canvas) comfyApp.canvas.allow_searchbox = !newVal
+  nodeSearchEnabled,
-})
+  (newVal) => {
+    LiteGraph.release_link_on_empty_shows_menu = !newVal
+    if (comfyApp.canvas) comfyApp.canvas.allow_searchbox = !newVal
+  },
+  { immediate: true }
+)
 
 let dropTargetCleanup = () => {}
 

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -29,6 +29,7 @@ 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'
 
 interface LiteGraphPointerEvent extends Event {
   canvasX: number
@@ -83,13 +84,6 @@ const addNode = (nodeDef: ComfyNodeDefImpl) => {
 }
 
 const canvasEventHandler = (e: LiteGraphCanvasEvent) => {
-  const shiftPressed = (e.detail.originalEvent as KeyboardEvent).shiftKey
-  // Ignore empty releases unless shift is pressed
-  // Empty release without shift is trigger right click menu
-  if (e.detail.subType === 'empty-release' && !shiftPressed) {
-    return
-  }
-
   if (e.detail.subType === 'empty-release') {
     const context = e.detail.linkReleaseContext
     if (context.links.length === 0) {

src/scripts/app.ts

@@ -1875,7 +1875,6 @@ export class ComfyApp {
     this.canvas = new LGraphCanvas(canvasEl, this.graph)
     this.ctx = canvasEl.getContext('2d')
 
-    LiteGraph.release_link_on_empty_shows_menu = true
     LiteGraph.alt_drag_do_clone_nodes = true
 
     this.graph.start()