[New Feature] Selection Toolbox (#2608)

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

browser_tests/fixtures/ComfyPage.ts

@@ -1,3 +1,4 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
 import type { APIRequestContext, Locator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { test as base } from '@playwright/test'
@@ -646,6 +647,18 @@ export class ComfyPage {
     await this.nextFrame()
   }
 
+  async selectNodes(nodeTitles: string[]) {
+    await this.page.keyboard.down('Control')
+    for (const nodeTitle of nodeTitles) {
+      const nodes = await this.getNodeRefsByTitle(nodeTitle)
+      for (const node of nodes) {
+        await node.click('title')
+      }
+    }
+    await this.page.keyboard.up('Control')
+    await this.nextFrame()
+  }
+
   async select2Nodes() {
     // Select 2 CLIP nodes.
     await this.page.keyboard.down('Control')
@@ -835,12 +848,24 @@ export class ComfyPage {
       (
         await this.page.evaluate((type) => {
           return window['app'].graph.nodes
-            .filter((n) => n.type === type)
-            .map((n) => n.id)
+            .filter((n: LGraphNode) => n.type === type)
+            .map((n: LGraphNode) => n.id)
         }, type)
       ).map((id: NodeId) => this.getNodeRefById(id))
     )
   }
+  async getNodeRefsByTitle(title: string): Promise<NodeReference[]> {
+    return Promise.all(
+      (
+        await this.page.evaluate((title) => {
+          return window['app'].graph.nodes
+            .filter((n: LGraphNode) => n.title === title)
+            .map((n: LGraphNode) => n.id)
+        }, title)
+      ).map((id: NodeId) => this.getNodeRefById(id))
+    )
+  }
+
   async getFirstNodeRef(): Promise<NodeReference | null> {
     const id = await this.page.evaluate(() => {
       return window['app'].graph.nodes[0]?.id
@@ -896,9 +921,10 @@ export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
     try {
       await comfyPage.setupSettings({
         'Comfy.UseNewMenu': 'Disabled',
-        // Hide canvas menu/info by default.
+        // Hide canvas menu/info/selection toolbox by default.
         'Comfy.Graph.CanvasInfo': false,
         'Comfy.Graph.CanvasMenu': false,
+        'Comfy.Canvas.SelectionToolbox': false,
         // Hide all badges by default.
         'Comfy.NodeBadge.NodeIdBadgeMode': NodeBadgeMode.None,
         'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,

browser_tests/selectionToolbox.spec.ts

@@ -0,0 +1,60 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture } from './fixtures/ComfyPage'
+
+const test = comfyPageFixture
+
+test.describe('Selection Toolbox', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
+  })
+
+  test('shows/hides selection toolbox based on setting', async ({
+    comfyPage
+  }) => {
+    // By default, selection toolbox should be enabled
+    expect(
+      await comfyPage.page.locator('.selection-overlay-container').isVisible()
+    ).toBe(false)
+
+    // Select multiple nodes
+    await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+
+    // Selection toolbox should be visible with multiple nodes selected
+    await expect(
+      comfyPage.page.locator('.selection-overlay-container')
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.locator('.selection-overlay-container.show-border')
+    ).toBeVisible()
+  })
+
+  test('shows border only with multiple selections', async ({ comfyPage }) => {
+    // Select single node
+    await comfyPage.selectNodes(['KSampler'])
+
+    // Selection overlay should be visible but without border
+    await expect(
+      comfyPage.page.locator('.selection-overlay-container')
+    ).toBeVisible()
+    await expect(
+      comfyPage.page.locator('.selection-overlay-container.show-border')
+    ).not.toBeVisible()
+
+    // Select multiple nodes
+    await comfyPage.selectNodes(['KSampler', 'CLIP Text Encode (Prompt)'])
+
+    // Selection overlay should show border with multiple selections
+    await expect(
+      comfyPage.page.locator('.selection-overlay-container.show-border')
+    ).toBeVisible()
+
+    // Deselect to single node
+    await comfyPage.selectNodes(['CLIP Text Encode (Prompt)'])
+
+    // Border should be hidden again
+    await expect(
+      comfyPage.page.locator('.selection-overlay-container.show-border')
+    ).not.toBeVisible()
+  })
+})