diff --git a/README.md b/README.md index 6d101af99..dd0fe2d5c 100644 --- a/README.md +++ b/README.md @@ -468,6 +468,35 @@ We will support custom icons later. ![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0) +
+ v1.10.9: Selection Toolbox API + +Extensions can register commands that appear in the selection toolbox when specific items are selected on the canvas. + +```js +app.registerExtension({ + name: 'TestExtension1', + commands: [ + { + id: 'test.selection.command', + label: 'Test Command', + icon: 'pi pi-star', + function: () => { + // Command logic here + } + } + ], + // Return an array of command IDs to show in the selection toolbox + // when an item is selected + getSelectionToolboxCommands: (selectedItem) => ['test.selection.command'] +}) +``` + +The selection toolbox will display the command button when items are selected: +![Image](https://github.com/user-attachments/assets/28d91267-c0a9-4bd5-a7c4-36e8ec44c9bd) + +
+ ## Development ### Tech Stack diff --git a/browser_tests/extensionAPI.spec.ts b/browser_tests/extensionAPI.spec.ts index 2e5192e85..3ef5df74a 100644 --- a/browser_tests/extensionAPI.spec.ts +++ b/browser_tests/extensionAPI.spec.ts @@ -298,4 +298,45 @@ test.describe('Topbar commands', () => { expect(await comfyPage.page.evaluate(() => window['value'])).toBeNull() }) }) + + test.describe('Selection Toolbox', () => { + test.beforeEach(async ({ comfyPage }) => { + await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true) + }) + + test('Should allow adding commands to selection toolbox', async ({ + comfyPage + }) => { + // Register an extension with a selection toolbox command + await comfyPage.page.evaluate(() => { + window['app'].registerExtension({ + name: 'TestExtension1', + commands: [ + { + id: 'test.selection.command', + label: 'Test Command', + icon: 'pi pi-star', + function: () => { + window['selectionCommandExecuted'] = true + } + } + ], + getSelectionToolboxCommands: () => ['test.selection.command'] + }) + }) + + await comfyPage.selectNodes(['CLIP Text Encode (Prompt)']) + + // Click the command button in the selection toolbox + const toolboxButton = comfyPage.page.locator( + '.selection-toolbox button:has(.pi-star)' + ) + await toolboxButton.click() + + // Verify the command was executed + expect( + await comfyPage.page.evaluate(() => window['selectionCommandExecuted']) + ).toBe(true) + }) + }) }) diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue index 4f0ce961f..864c254a3 100644 --- a/src/components/graph/SelectionToolbox.vue +++ b/src/components/graph/SelectionToolbox.vue @@ -40,6 +40,14 @@ icon="pi pi-refresh" @click="refreshSelected" /> +