+
diff --git a/src/components/card/CardGridList.stories.ts b/src/components/card/CardGridList.stories.ts
new file mode 100644
index 000000000..8ed61a691
--- /dev/null
+++ b/src/components/card/CardGridList.stories.ts
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { createGridStyle } from '@/utils/gridUtil'
+
+import CardBottom from './CardBottom.vue'
+import CardContainer from './CardContainer.vue'
+import CardTop from './CardTop.vue'
+
+const meta: Meta = {
+ title: 'Components/Card/CardGridList',
+ tags: ['autodocs'],
+ argTypes: {
+ minWidth: {
+ control: 'text',
+ description: 'Minimum width for each grid item'
+ },
+ maxWidth: {
+ control: 'text',
+ description: 'Maximum width for each grid item'
+ },
+ padding: {
+ control: 'text',
+ description: 'Padding around the grid'
+ },
+ gap: {
+ control: 'text',
+ description: 'Gap between grid items'
+ },
+ columns: {
+ control: 'number',
+ description: 'Fixed number of columns (overrides auto-fill)'
+ }
+ },
+ args: {
+ minWidth: '15rem',
+ maxWidth: '1fr',
+ padding: '0rem',
+ gap: '1rem'
+ }
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ render: (args) => ({
+ components: { CardContainer, CardTop, CardBottom },
+ setup() {
+ const gridStyle = createGridStyle(args)
+ return { gridStyle }
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
+
-
+
-
+
+
+
+
+
+
+
+
+
-
diff --git a/src/components/chip/SquareChip.vue b/src/components/chip/SquareChip.vue
index c886b089b..6a47bb643 100644
--- a/src/components/chip/SquareChip.vue
+++ b/src/components/chip/SquareChip.vue
@@ -1,13 +1,28 @@
-
-
+
+
{{ label }}
diff --git a/src/components/common/BackgroundImageUpload.vue b/src/components/common/BackgroundImageUpload.vue
index 7c20cbab1..46105e537 100644
--- a/src/components/common/BackgroundImageUpload.vue
+++ b/src/components/common/BackgroundImageUpload.vue
@@ -36,8 +36,8 @@ import Button from 'primevue/button'
import InputText from 'primevue/inputtext'
import { ref } from 'vue'
+import { useToastStore } from '@/platform/updates/common/toastStore'
import { api } from '@/scripts/api'
-import { useToastStore } from '@/stores/toastStore'
const modelValue = defineModel
()
diff --git a/src/components/common/ColorCustomizationSelector.spec.ts b/src/components/common/ColorCustomizationSelector.test.ts
similarity index 100%
rename from src/components/common/ColorCustomizationSelector.spec.ts
rename to src/components/common/ColorCustomizationSelector.test.ts
diff --git a/src/components/common/EditableText.spec.ts b/src/components/common/EditableText.spec.ts
deleted file mode 100644
index 2e7b036b5..000000000
--- a/src/components/common/EditableText.spec.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import InputText from 'primevue/inputtext'
-import { beforeAll, describe, expect, it } from 'vitest'
-import { createApp } from 'vue'
-
-import EditableText from './EditableText.vue'
-
-describe('EditableText', () => {
- beforeAll(() => {
- // Create a Vue app instance for PrimeVue
- const app = createApp({})
- app.use(PrimeVue)
- })
-
- // @ts-expect-error fixme ts strict error
- const mountComponent = (props, options = {}) => {
- return mount(EditableText, {
- global: {
- plugins: [PrimeVue],
- components: { InputText }
- },
- props,
- ...options
- })
- }
-
- it('renders span with modelValue when not editing', () => {
- const wrapper = mountComponent({
- modelValue: 'Test Text',
- isEditing: false
- })
- expect(wrapper.find('span').text()).toBe('Test Text')
- expect(wrapper.findComponent(InputText).exists()).toBe(false)
- })
-
- it('renders input with modelValue when editing', () => {
- const wrapper = mountComponent({
- modelValue: 'Test Text',
- isEditing: true
- })
- expect(wrapper.find('span').exists()).toBe(false)
- expect(wrapper.findComponent(InputText).props()['modelValue']).toBe(
- 'Test Text'
- )
- })
-
- it('emits edit event when input is submitted', async () => {
- const wrapper = mountComponent({
- modelValue: 'Test Text',
- isEditing: true
- })
- await wrapper.findComponent(InputText).setValue('New Text')
- await wrapper.findComponent(InputText).trigger('keyup.enter')
- // Blur event should have been triggered
- expect(wrapper.findComponent(InputText).element).not.toBe(
- document.activeElement
- )
- })
-
- it('finishes editing on blur', async () => {
- const wrapper = mountComponent({
- modelValue: 'Test Text',
- isEditing: true
- })
- await wrapper.findComponent(InputText).trigger('blur')
- expect(wrapper.emitted('edit')).toBeTruthy()
- // @ts-expect-error fixme ts strict error
- expect(wrapper.emitted('edit')[0]).toEqual(['Test Text'])
- })
-})
diff --git a/src/components/common/EditableText.test.ts b/src/components/common/EditableText.test.ts
new file mode 100644
index 000000000..2d31123b9
--- /dev/null
+++ b/src/components/common/EditableText.test.ts
@@ -0,0 +1,140 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import InputText from 'primevue/inputtext'
+import { beforeAll, describe, expect, it } from 'vitest'
+import { createApp } from 'vue'
+
+import EditableText from './EditableText.vue'
+
+describe('EditableText', () => {
+ beforeAll(() => {
+ // Create a Vue app instance for PrimeVue
+ const app = createApp({})
+ app.use(PrimeVue)
+ })
+
+ // @ts-expect-error fixme ts strict error
+ const mountComponent = (props, options = {}) => {
+ return mount(EditableText, {
+ global: {
+ plugins: [PrimeVue],
+ components: { InputText }
+ },
+ props,
+ ...options
+ })
+ }
+
+ it('renders span with modelValue when not editing', () => {
+ const wrapper = mountComponent({
+ modelValue: 'Test Text',
+ isEditing: false
+ })
+ expect(wrapper.find('span').text()).toBe('Test Text')
+ expect(wrapper.findComponent(InputText).exists()).toBe(false)
+ })
+
+ it('renders input with modelValue when editing', () => {
+ const wrapper = mountComponent({
+ modelValue: 'Test Text',
+ isEditing: true
+ })
+ expect(wrapper.find('span').exists()).toBe(false)
+ expect(wrapper.findComponent(InputText).props()['modelValue']).toBe(
+ 'Test Text'
+ )
+ })
+
+ it('emits edit event when input is submitted', async () => {
+ const wrapper = mountComponent({
+ modelValue: 'Test Text',
+ isEditing: true
+ })
+ await wrapper.findComponent(InputText).setValue('New Text')
+ await wrapper.findComponent(InputText).trigger('keyup.enter')
+ // Blur event should have been triggered
+ expect(wrapper.findComponent(InputText).element).not.toBe(
+ document.activeElement
+ )
+ })
+
+ it('finishes editing on blur', async () => {
+ const wrapper = mountComponent({
+ modelValue: 'Test Text',
+ isEditing: true
+ })
+ await wrapper.findComponent(InputText).trigger('blur')
+ expect(wrapper.emitted('edit')).toBeTruthy()
+ // @ts-expect-error fixme ts strict error
+ expect(wrapper.emitted('edit')[0]).toEqual(['Test Text'])
+ })
+
+ it('cancels editing on escape key', async () => {
+ const wrapper = mountComponent({
+ modelValue: 'Original Text',
+ isEditing: true
+ })
+
+ // Change the input value
+ await wrapper.findComponent(InputText).setValue('Modified Text')
+
+ // Press escape
+ await wrapper.findComponent(InputText).trigger('keyup.escape')
+
+ // Should emit cancel event
+ expect(wrapper.emitted('cancel')).toBeTruthy()
+
+ // Should NOT emit edit event
+ expect(wrapper.emitted('edit')).toBeFalsy()
+
+ // Input value should be reset to original
+ expect(wrapper.findComponent(InputText).props()['modelValue']).toBe(
+ 'Original Text'
+ )
+ })
+
+ it('does not save changes when escape is pressed and blur occurs', async () => {
+ const wrapper = mountComponent({
+ modelValue: 'Original Text',
+ isEditing: true
+ })
+
+ // Change the input value
+ await wrapper.findComponent(InputText).setValue('Modified Text')
+
+ // Press escape (which triggers blur internally)
+ await wrapper.findComponent(InputText).trigger('keyup.escape')
+
+ // Manually trigger blur to simulate the blur that happens after escape
+ await wrapper.findComponent(InputText).trigger('blur')
+
+ // Should emit cancel but not edit
+ expect(wrapper.emitted('cancel')).toBeTruthy()
+ expect(wrapper.emitted('edit')).toBeFalsy()
+ })
+
+ it('saves changes on enter but not on escape', async () => {
+ // Test Enter key saves changes
+ const enterWrapper = mountComponent({
+ modelValue: 'Original Text',
+ isEditing: true
+ })
+ await enterWrapper.findComponent(InputText).setValue('Saved Text')
+ await enterWrapper.findComponent(InputText).trigger('keyup.enter')
+ // Trigger blur that happens after enter
+ await enterWrapper.findComponent(InputText).trigger('blur')
+ expect(enterWrapper.emitted('edit')).toBeTruthy()
+ // @ts-expect-error fixme ts strict error
+ expect(enterWrapper.emitted('edit')[0]).toEqual(['Saved Text'])
+
+ // Test Escape key cancels changes with a fresh wrapper
+ const escapeWrapper = mountComponent({
+ modelValue: 'Original Text',
+ isEditing: true
+ })
+ await escapeWrapper.findComponent(InputText).setValue('Cancelled Text')
+ await escapeWrapper.findComponent(InputText).trigger('keyup.escape')
+ expect(escapeWrapper.emitted('cancel')).toBeTruthy()
+ expect(escapeWrapper.emitted('edit')).toBeFalsy()
+ })
+})
diff --git a/src/components/common/EditableText.vue b/src/components/common/EditableText.vue
index 16510d3fd..625df22a0 100644
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -7,17 +7,19 @@
![]()
-
+
@@ -35,17 +42,20 @@ import { computed, onUnmounted, ref, watch } from 'vue'
import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
import { useMediaCache } from '@/services/mediaCacheService'
+import type { ClassValue } from '@/utils/tailwindUtil'
const {
src,
alt = '',
+ containerClass = '',
imageClass = '',
imageStyle,
rootMargin = '300px'
} = defineProps<{
src: string
alt?: string
- imageClass?: string | string[] | Record
+ containerClass?: ClassValue
+ imageClass?: ClassValue
imageStyle?: Record
rootMargin?: string
}>()
@@ -77,8 +87,8 @@ const shouldLoad = computed(() => isIntersecting.value)
watch(
shouldLoad,
- async (shouldLoad) => {
- if (shouldLoad && src && !cachedSrc.value && !hasError.value) {
+ async (shouldLoadVal) => {
+ if (shouldLoadVal && src && !cachedSrc.value && !hasError.value) {
try {
const cachedMedia = await getCachedMedia(src)
if (cachedMedia.error) {
@@ -93,7 +103,7 @@ watch(
console.warn('Failed to load cached media:', error)
cachedSrc.value = src
}
- } else if (!shouldLoad) {
+ } else if (!shouldLoadVal) {
if (cachedSrc.value?.startsWith('blob:')) {
releaseUrl(src)
}
diff --git a/src/components/common/NoResultsPlaceholder.vue b/src/components/common/NoResultsPlaceholder.vue
index fbf8ca83d..79d0da4c7 100644
--- a/src/components/common/NoResultsPlaceholder.vue
+++ b/src/components/common/NoResultsPlaceholder.vue
@@ -1,11 +1,11 @@
-
+
{{ title }}
-
+
{{ message }}
@@ -27,7 +28,7 @@
()
const emit = defineEmits<{
diff --git a/src/components/common/SystemStatsPanel.vue b/src/components/common/SystemStatsPanel.vue
index 546d2b887..1d3612aa2 100644
--- a/src/components/common/SystemStatsPanel.vue
+++ b/src/components/common/SystemStatsPanel.vue
@@ -1,7 +1,7 @@
-
+
{{ $t('g.systemInfo') }}
@@ -17,7 +17,7 @@
-
+
{{ $t('g.devices') }}
diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 844a8e742..c6a3dbe60 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -1,8 +1,8 @@
{{ formattedBalance }}
diff --git a/src/components/common/VirtualGrid.vue b/src/components/common/VirtualGrid.vue
index 1c9be98d1..89de6e421 100644
--- a/src/components/common/VirtualGrid.vue
+++ b/src/components/common/VirtualGrid.vue
@@ -17,7 +17,8 @@
+
+
diff --git a/src/components/dialog/UnloadWindowConfirmDialog.vue b/src/components/dialog/UnloadWindowConfirmDialog.vue
index 2a26c276d..32ccedaa9 100644
--- a/src/components/dialog/UnloadWindowConfirmDialog.vue
+++ b/src/components/dialog/UnloadWindowConfirmDialog.vue
@@ -12,8 +12,8 @@
diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue
index 647987000..c5e0f6dce 100644
--- a/src/components/graph/NodeTooltip.vue
+++ b/src/components/graph/NodeTooltip.vue
@@ -19,10 +19,10 @@ import {
isOverNodeInput,
isOverNodeOutput
} from '@/lib/litegraph/src/litegraph'
+import { useSettingStore } from '@/platform/settings/settingStore'
import { app as comfyApp } from '@/scripts/app'
import { isDOMWidget } from '@/scripts/domWidget'
import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
import { normalizeI18nKey } from '@/utils/formatUtil'
let idleTimeout: number
@@ -33,9 +33,11 @@ const tooltipText = ref('')
const left = ref
()
const top = ref()
-const hideTooltip = () => (tooltipText.value = '')
+function hideTooltip() {
+ return (tooltipText.value = '')
+}
-const showTooltip = async (tooltip: string | null | undefined) => {
+async function showTooltip(tooltip: string | null | undefined) {
if (!tooltip) return
left.value = comfyApp.canvas.mouse[0] + 'px'
@@ -56,9 +58,9 @@ const showTooltip = async (tooltip: string | null | undefined) => {
}
}
-const onIdle = () => {
+function onIdle() {
const { canvas } = comfyApp
- const node = canvas.node_over
+ const node = canvas?.node_over
if (!node) return
const ctor = node.constructor as { title_mode?: 0 | 1 | 2 | 3 }
@@ -68,7 +70,7 @@ const onIdle = () => {
ctor.title_mode !== LiteGraph.NO_TITLE &&
canvas.graph_mouse[1] < node.pos[1] // If we are over a node, but not within the node then we are on its title
) {
- return showTooltip(nodeDef.description)
+ return showTooltip(nodeDef?.description)
}
if (node.flags?.collapsed) return
@@ -83,7 +85,7 @@ const onIdle = () => {
const inputName = node.inputs[inputSlot].name
const translatedTooltip = st(
`nodeDefs.${normalizeI18nKey(node.type ?? '')}.inputs.${normalizeI18nKey(inputName)}.tooltip`,
- nodeDef.inputs[inputName]?.tooltip ?? ''
+ nodeDef?.inputs[inputName]?.tooltip ?? ''
)
return showTooltip(translatedTooltip)
}
@@ -97,7 +99,7 @@ const onIdle = () => {
if (outputSlot !== -1) {
const translatedTooltip = st(
`nodeDefs.${normalizeI18nKey(node.type ?? '')}.outputs.${outputSlot}.tooltip`,
- nodeDef.outputs[outputSlot]?.tooltip ?? ''
+ nodeDef?.outputs[outputSlot]?.tooltip ?? ''
)
return showTooltip(translatedTooltip)
}
@@ -107,7 +109,7 @@ const onIdle = () => {
if (widget && !isDOMWidget(widget)) {
const translatedTooltip = st(
`nodeDefs.${normalizeI18nKey(node.type ?? '')}.inputs.${normalizeI18nKey(widget.name)}.tooltip`,
- nodeDef.inputs[widget.name]?.tooltip ?? ''
+ nodeDef?.inputs[widget.name]?.tooltip ?? ''
)
// Widget tooltip can be set dynamically, current translation collection does not support this.
return showTooltip(widget.tooltip ?? translatedTooltip)
@@ -134,7 +136,7 @@ useEventListener(window, 'click', hideTooltip)
pointer-events: none;
background: var(--comfy-input-bg);
border-radius: 5px;
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 0 5px rgb(0 0 0 / 0.4);
color: var(--input-text);
font-family: sans-serif;
left: 0;
diff --git a/src/components/graph/SelectionToolbox.test.ts b/src/components/graph/SelectionToolbox.test.ts
new file mode 100644
index 000000000..e8e689bb2
--- /dev/null
+++ b/src/components/graph/SelectionToolbox.test.ts
@@ -0,0 +1,493 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
+import { useExtensionService } from '@/services/extensionService'
+
+// Mock the composables and services
+vi.mock('@/renderer/core/canvas/useCanvasInteractions', () => ({
+ useCanvasInteractions: vi.fn(() => ({
+ handleWheel: vi.fn()
+ }))
+}))
+
+vi.mock('@/composables/canvas/useSelectionToolboxPosition', () => ({
+ useSelectionToolboxPosition: vi.fn(() => ({
+ visible: { value: true }
+ })),
+ resetMoreOptionsState: vi.fn()
+}))
+
+vi.mock('@/composables/element/useRetriggerableAnimation', () => ({
+ useRetriggerableAnimation: vi.fn(() => ({
+ shouldAnimate: { value: false }
+ }))
+}))
+
+vi.mock('@/renderer/extensions/minimap/composables/useMinimap', () => ({
+ useMinimap: vi.fn(() => ({
+ containerStyles: {
+ value: {
+ backgroundColor: '#ffffff'
+ }
+ }
+ }))
+}))
+
+vi.mock('@/services/extensionService', () => ({
+ useExtensionService: vi.fn(() => ({
+ extensionCommands: { value: new Map() },
+ invokeExtensions: vi.fn(() => [])
+ }))
+}))
+
+vi.mock('@/utils/litegraphUtil', () => ({
+ isLGraphNode: vi.fn(() => true),
+ isImageNode: vi.fn(() => false),
+ isLoad3dNode: vi.fn(() => false)
+}))
+
+vi.mock('@/utils/nodeFilterUtil', () => ({
+ isOutputNode: vi.fn(() => false),
+ filterOutputNodes: vi.fn((nodes) => nodes.filter(() => false))
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+ useSettingStore: () => ({
+ get: vi.fn((key: string) => {
+ if (key === 'Comfy.Load3D.3DViewerEnable') return true
+ return null
+ })
+ })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+ useCommandStore: () => ({
+ getCommand: vi.fn(() => ({ id: 'test-command', title: 'Test Command' }))
+ })
+}))
+
+let nodeDefMock = {
+ type: 'TestNode',
+ title: 'Test Node'
+} as unknown
+
+vi.mock('@/stores/nodeDefStore', () => ({
+ useNodeDefStore: () => ({
+ fromLGraphNode: vi.fn(() => nodeDefMock)
+ })
+}))
+
+describe('SelectionToolbox', () => {
+ let canvasStore: ReturnType
+
+ const i18n = createI18n({
+ legacy: false,
+ locale: 'en',
+ messages: {
+ en: {
+ g: {
+ info: 'Node Info',
+ bookmark: 'Save to Library',
+ frameNodes: 'Frame Nodes',
+ moreOptions: 'More Options',
+ refreshNode: 'Refresh Node'
+ }
+ }
+ }
+ })
+
+ const mockProvide = {
+ isVisible: { value: true },
+ selectedItems: []
+ }
+
+ beforeEach(() => {
+ setActivePinia(createPinia())
+ canvasStore = useCanvasStore()
+
+ // Mock the canvas to avoid "getCanvas: canvas is null" errors
+ canvasStore.canvas = {
+ setDirty: vi.fn(),
+ state: {
+ selectionChanged: false
+ }
+ } as any
+
+ vi.resetAllMocks()
+ })
+
+ const mountComponent = (props = {}) => {
+ return mount(SelectionToolbox, {
+ props,
+ global: {
+ plugins: [i18n, PrimeVue],
+ provide: {
+ [Symbol.for('SelectionOverlay')]: mockProvide
+ },
+ stubs: {
+ Panel: {
+ template:
+ '
',
+ props: ['pt', 'style', 'class']
+ },
+ InfoButton: { template: '' },
+ ColorPickerButton: {
+ template:
+ ''
+ },
+ FrameNodes: { template: '' },
+ PublishButton: {
+ template:
+ ''
+ },
+ BypassButton: {
+ template:
+ ''
+ },
+ PinButton: { template: '' },
+ Load3DViewerButton: {
+ template: ''
+ },
+ MaskEditorButton: { template: '' },
+ DeleteButton: {
+ template:
+ ''
+ },
+ RefreshSelectionButton: {
+ template: ''
+ },
+ ExecuteButton: { template: '' },
+ ConvertToSubgraphButton: {
+ template:
+ ''
+ },
+ ExtensionCommandButton: {
+ template: ''
+ },
+ MoreOptions: {
+ template:
+ ''
+ },
+ VerticalDivider: { template: '' }
+ }
+ }
+ })
+ }
+
+ describe('Button Visibility Logic', () => {
+ beforeEach(() => {
+ const mockExtensionService = vi.mocked(useExtensionService)
+ mockExtensionService.mockReturnValue({
+ extensionCommands: { value: new Map() },
+ invokeExtensions: vi.fn(() => [])
+ } as any)
+ })
+
+ it('should show info button only for single selections', () => {
+ // Single node selection
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+ expect(wrapper.find('.info-button').exists()).toBe(true)
+
+ // Multiple node selection
+ canvasStore.selectedItems = [
+ { type: 'TestNode1' },
+ { type: 'TestNode2' }
+ ] as any
+ wrapper.unmount()
+ const wrapper2 = mountComponent()
+ expect(wrapper2.find('.info-button').exists()).toBe(false)
+ })
+
+ it('should not show info button when node definition is not found', () => {
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ // mock nodedef and return null
+ nodeDefMock = null
+ // remount component
+ const wrapper = mountComponent()
+ expect(wrapper.find('.info-button').exists()).toBe(false)
+ })
+
+ it('should show color picker for all selections', () => {
+ // Single node selection
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+ expect(wrapper.find('[data-testid="color-picker-button"]').exists()).toBe(
+ true
+ )
+
+ // Multiple node selection
+ canvasStore.selectedItems = [
+ { type: 'TestNode1' },
+ { type: 'TestNode2' }
+ ] as any
+ wrapper.unmount()
+ const wrapper2 = mountComponent()
+ expect(
+ wrapper2.find('[data-testid="color-picker-button"]').exists()
+ ).toBe(true)
+ })
+
+ it('should show frame nodes only for multiple selections', () => {
+ // Single node selection
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+ expect(wrapper.find('.frame-nodes').exists()).toBe(false)
+
+ // Multiple node selection
+ canvasStore.selectedItems = [
+ { type: 'TestNode1' },
+ { type: 'TestNode2' }
+ ] as any
+ wrapper.unmount()
+ const wrapper2 = mountComponent()
+ expect(wrapper2.find('.frame-nodes').exists()).toBe(true)
+ })
+
+ it('should show bypass button for appropriate selections', () => {
+ // Single node selection
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+ expect(wrapper.find('[data-testid="bypass-button"]').exists()).toBe(true)
+
+ // Multiple node selection
+ canvasStore.selectedItems = [
+ { type: 'TestNode1' },
+ { type: 'TestNode2' }
+ ] as any
+ wrapper.unmount()
+ const wrapper2 = mountComponent()
+ expect(wrapper2.find('[data-testid="bypass-button"]').exists()).toBe(true)
+ })
+
+ it('should show common buttons for all selections', () => {
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+
+ expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true)
+ expect(
+ wrapper.find('[data-testid="convert-to-subgraph-button"]').exists()
+ ).toBe(true)
+ expect(wrapper.find('[data-testid="more-options-button"]').exists()).toBe(
+ true
+ )
+ })
+
+ it('should show mask editor only for single image nodes', async () => {
+ const mockUtils = await import('@/utils/litegraphUtil')
+ const isImageNodeSpy = vi.spyOn(mockUtils, 'isImageNode')
+
+ // Single image node
+ isImageNodeSpy.mockReturnValue(true)
+ canvasStore.selectedItems = [{ type: 'ImageNode' }] as any
+ const wrapper = mountComponent()
+ expect(wrapper.find('.mask-editor-button').exists()).toBe(true)
+
+ // Single non-image node
+ isImageNodeSpy.mockReturnValue(false)
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ wrapper.unmount()
+ const wrapper2 = mountComponent()
+ expect(wrapper2.find('.mask-editor-button').exists()).toBe(false)
+ })
+
+ it('should show Color picker button only for single Load3D nodes', async () => {
+ const mockUtils = await import('@/utils/litegraphUtil')
+ const isLoad3dNodeSpy = vi.spyOn(mockUtils, 'isLoad3dNode')
+
+ // Single Load3D node
+ isLoad3dNodeSpy.mockReturnValue(true)
+ canvasStore.selectedItems = [{ type: 'Load3DNode' }] as any
+ const wrapper = mountComponent()
+ expect(wrapper.find('.load-3d-viewer-button').exists()).toBe(true)
+
+ // Single non-Load3D node
+ isLoad3dNodeSpy.mockReturnValue(false)
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ wrapper.unmount()
+ const wrapper2 = mountComponent()
+ expect(wrapper2.find('.load-3d-viewer-button').exists()).toBe(false)
+ })
+
+ it('should show ExecuteButton only when output nodes are selected', async () => {
+ const mockNodeFilterUtil = await import('@/utils/nodeFilterUtil')
+ const isOutputNodeSpy = vi.spyOn(mockNodeFilterUtil, 'isOutputNode')
+ const filterOutputNodesSpy = vi.spyOn(
+ mockNodeFilterUtil,
+ 'filterOutputNodes'
+ )
+
+ // With output node selected
+ isOutputNodeSpy.mockReturnValue(true)
+ filterOutputNodesSpy.mockReturnValue([{ type: 'SaveImage' }] as any)
+ canvasStore.selectedItems = [
+ { type: 'SaveImage', constructor: { nodeData: { output_node: true } } }
+ ] as any
+ const wrapper = mountComponent()
+ expect(wrapper.find('.execute-button').exists()).toBe(true)
+
+ // Without output node selected
+ isOutputNodeSpy.mockReturnValue(false)
+ filterOutputNodesSpy.mockReturnValue([])
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ wrapper.unmount()
+ const wrapper2 = mountComponent()
+ expect(wrapper2.find('.execute-button').exists()).toBe(false)
+
+ // No selection at all
+ canvasStore.selectedItems = []
+ wrapper2.unmount()
+ const wrapper3 = mountComponent()
+ expect(wrapper3.find('.execute-button').exists()).toBe(false)
+ })
+ })
+
+ describe('Divider Visibility Logic', () => {
+ it('should show dividers between button groups when both groups have buttons', () => {
+ // Setup single node to show info + other buttons
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+
+ const dividers = wrapper.findAll('.vertical-divider')
+ expect(dividers.length).toBeGreaterThan(0)
+ })
+
+ it('should not show dividers when adjacent groups are empty', () => {
+ // No selection should show minimal buttons and dividers
+ canvasStore.selectedItems = []
+ const wrapper = mountComponent()
+
+ const buttons = wrapper.find('.panel').element.children
+ expect(buttons.length).toBeGreaterThan(0) // At least MoreOptions should show
+ })
+ })
+
+ describe('Extension Commands', () => {
+ it('should render extension command buttons when available', () => {
+ const mockExtensionService = vi.mocked(useExtensionService)
+ mockExtensionService.mockReturnValue({
+ extensionCommands: {
+ value: new Map([
+ ['test-command', { id: 'test-command', title: 'Test Command' }]
+ ])
+ },
+ invokeExtensions: vi.fn(() => ['test-command'])
+ } as any)
+
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+
+ expect(wrapper.find('.extension-command-button').exists()).toBe(true)
+ })
+
+ it('should not render extension commands when none available', () => {
+ const mockExtensionService = vi.mocked(useExtensionService)
+ mockExtensionService.mockReturnValue({
+ extensionCommands: { value: new Map() },
+ invokeExtensions: vi.fn(() => [])
+ } as any)
+
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+
+ expect(wrapper.find('.extension-command-button').exists()).toBe(false)
+ })
+ })
+
+ describe('Container Styling', () => {
+ it('should apply minimap container styles', () => {
+ const mockExtensionService = vi.mocked(useExtensionService)
+ mockExtensionService.mockReturnValue({
+ extensionCommands: { value: new Map() },
+ invokeExtensions: vi.fn(() => [])
+ } as any)
+
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+
+ const panel = wrapper.find('.panel')
+ expect(panel.exists()).toBe(true)
+ })
+
+ it('should have correct CSS classes', () => {
+ const mockExtensionService = vi.mocked(useExtensionService)
+ mockExtensionService.mockReturnValue({
+ extensionCommands: { value: new Map() },
+ invokeExtensions: vi.fn(() => [])
+ } as any)
+
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+
+ const panel = wrapper.find('.panel')
+ expect(panel.classes()).toContain('selection-toolbox')
+ expect(panel.classes()).toContain('absolute')
+ expect(panel.classes()).toContain('left-1/2')
+ expect(panel.classes()).toContain('rounded-lg')
+ })
+
+ it('should handle animation class conditionally', () => {
+ const mockExtensionService = vi.mocked(useExtensionService)
+ mockExtensionService.mockReturnValue({
+ extensionCommands: { value: new Map() },
+ invokeExtensions: vi.fn(() => [])
+ } as any)
+
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+
+ const panel = wrapper.find('.panel')
+ expect(panel.exists()).toBe(true)
+ })
+ })
+
+ describe('Event Handling', () => {
+ it('should handle wheel events', async () => {
+ const mockCanvasInteractions = vi.mocked(useCanvasInteractions)
+ const forwardEventToCanvasSpy = vi.fn()
+ mockCanvasInteractions.mockReturnValue({
+ forwardEventToCanvas: forwardEventToCanvasSpy
+ } as any)
+
+ const mockExtensionService = vi.mocked(useExtensionService)
+ mockExtensionService.mockReturnValue({
+ extensionCommands: { value: new Map() },
+ invokeExtensions: vi.fn(() => [])
+ } as any)
+
+ canvasStore.selectedItems = [{ type: 'TestNode' }] as any
+ const wrapper = mountComponent()
+
+ const panel = wrapper.find('.panel')
+ await panel.trigger('wheel')
+
+ expect(forwardEventToCanvasSpy).toHaveBeenCalled()
+ })
+ })
+
+ describe('No Selection State', () => {
+ beforeEach(() => {
+ const mockExtensionService = vi.mocked(useExtensionService)
+ mockExtensionService.mockReturnValue({
+ extensionCommands: { value: new Map() },
+ invokeExtensions: vi.fn(() => [])
+ } as any)
+ })
+
+ it('should hide most buttons when no items selected', () => {
+ canvasStore.selectedItems = []
+ const wrapper = mountComponent()
+
+ expect(wrapper.find('.info-button').exists()).toBe(false)
+ expect(wrapper.find('.color-picker-button').exists()).toBe(false)
+ expect(wrapper.find('.frame-nodes').exists()).toBe(false)
+ expect(wrapper.find('.bookmark-button').exists()).toBe(false)
+ })
+ })
+})
diff --git a/src/components/graph/SelectionToolbox.vue b/src/components/graph/SelectionToolbox.vue
index 38f0a2c0d..06626ab1e 100644
--- a/src/components/graph/SelectionToolbox.vue
+++ b/src/components/graph/SelectionToolbox.vue
@@ -2,33 +2,43 @@
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
@@ -40,20 +50,27 @@ import { computed, ref } from 'vue'
import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
+import ConfigureSubgraph from '@/components/graph/selectionToolbox/ConfigureSubgraph.vue'
import ConvertToSubgraphButton from '@/components/graph/selectionToolbox/ConvertToSubgraphButton.vue'
import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
-import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
+import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
import Load3DViewerButton from '@/components/graph/selectionToolbox/Load3DViewerButton.vue'
import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
-import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
+import PublishSubgraphButton from '@/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue'
import { useSelectionToolboxPosition } from '@/composables/canvas/useSelectionToolboxPosition'
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
import { useExtensionService } from '@/services/extensionService'
-import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
+import { useCommandStore } from '@/stores/commandStore'
+import type { ComfyCommandImpl } from '@/stores/commandStore'
+
+import FrameNodes from './selectionToolbox/FrameNodes.vue'
+import NodeOptionsButton from './selectionToolbox/NodeOptionsButton.vue'
+import VerticalDivider from './selectionToolbox/VerticalDivider.vue'
const commandStore = useCommandStore()
const canvasStore = useCanvasStore()
@@ -78,12 +95,49 @@ const extensionToolboxCommands = computed(() => {
.map((commandId) => commandStore.getCommand(commandId))
.filter((command): command is ComfyCommandImpl => command !== undefined)
})
+
+const {
+ hasAnySelection,
+ hasMultipleSelection,
+ isSingleNode,
+ isSingleSubgraph,
+ isSingleImageNode,
+ hasAny3DNodeSelected,
+ hasOutputNodesSelected,
+ nodeDef
+} = useSelectionState()
+const showInfoButton = computed(() => !!nodeDef.value)
+
+const showColorPicker = computed(() => hasAnySelection.value)
+const showConvertToSubgraph = computed(() => hasAnySelection.value)
+const showFrameNodes = computed(() => hasMultipleSelection.value)
+const showSubgraphButtons = computed(() => isSingleSubgraph.value)
+
+const showBypass = computed(
+ () =>
+ isSingleNode.value || isSingleSubgraph.value || hasMultipleSelection.value
+)
+const showLoad3DViewer = computed(() => hasAny3DNodeSelected.value)
+const showMaskEditor = computed(() => isSingleImageNode.value)
+
+const showDelete = computed(() => hasAnySelection.value)
+const showRefresh = computed(() => hasAnySelection.value)
+const showExecute = computed(() => hasOutputNodesSelected.value)
+
+const showAnyPrimaryActions = computed(
+ () =>
+ showColorPicker.value ||
+ showConvertToSubgraph.value ||
+ showFrameNodes.value ||
+ showSubgraphButtons.value
+)
+
+const showAnyControlActions = computed(() => showBypass.value)
diff --git a/src/components/graph/selectionToolbox/BypassButton.test.ts b/src/components/graph/selectionToolbox/BypassButton.test.ts
new file mode 100644
index 000000000..c966e180a
--- /dev/null
+++ b/src/components/graph/selectionToolbox/BypassButton.test.ts
@@ -0,0 +1,120 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
+import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+const mockLGraphNode = {
+ type: 'TestNode',
+ title: 'Test Node',
+ mode: LGraphEventMode.ALWAYS
+}
+
+vi.mock('@/utils/litegraphUtil', () => ({
+ isLGraphNode: vi.fn(() => true)
+}))
+
+describe('BypassButton', () => {
+ let canvasStore: ReturnType
+ let commandStore: ReturnType
+
+ const i18n = createI18n({
+ legacy: false,
+ locale: 'en',
+ messages: {
+ en: {
+ selectionToolbox: {
+ bypassButton: {
+ tooltip: 'Toggle bypass mode'
+ }
+ }
+ }
+ }
+ })
+
+ beforeEach(() => {
+ setActivePinia(createPinia())
+ canvasStore = useCanvasStore()
+ commandStore = useCommandStore()
+
+ vi.clearAllMocks()
+ })
+
+ const mountComponent = () => {
+ return mount(BypassButton, {
+ global: {
+ plugins: [i18n, PrimeVue],
+ directives: { tooltip: Tooltip },
+ stubs: {
+ 'i-lucide:ban': true
+ }
+ }
+ })
+ }
+
+ it('should render bypass button', () => {
+ canvasStore.selectedItems = [mockLGraphNode] as any
+ const wrapper = mountComponent()
+ const button = wrapper.find('button')
+ expect(button.exists()).toBe(true)
+ })
+
+ it('should have correct test id', () => {
+ canvasStore.selectedItems = [mockLGraphNode] as any
+ const wrapper = mountComponent()
+ const button = wrapper.find('[data-testid="bypass-button"]')
+ expect(button.exists()).toBe(true)
+ })
+
+ it('should execute bypass command when clicked', async () => {
+ canvasStore.selectedItems = [mockLGraphNode] as any
+ const executeSpy = vi.spyOn(commandStore, 'execute').mockResolvedValue()
+
+ const wrapper = mountComponent()
+ await wrapper.find('button').trigger('click')
+
+ expect(executeSpy).toHaveBeenCalledWith(
+ 'Comfy.Canvas.ToggleSelectedNodes.Bypass'
+ )
+ })
+
+ it('should show normal styling when node is not bypassed', () => {
+ const normalNode = { ...mockLGraphNode, mode: LGraphEventMode.ALWAYS }
+ canvasStore.selectedItems = [normalNode] as any
+
+ const wrapper = mountComponent()
+ const button = wrapper.find('button')
+
+ expect(button.classes()).not.toContain(
+ 'dark-theme:[&:not(:active)]:!bg-[#262729]'
+ )
+ })
+
+ it('should show bypassed styling when node is bypassed', async () => {
+ const bypassedNode = { ...mockLGraphNode, mode: LGraphEventMode.BYPASS }
+ canvasStore.selectedItems = [bypassedNode] as any
+ vi.spyOn(commandStore, 'execute').mockResolvedValue()
+ const wrapper = mountComponent()
+
+ // Click to trigger the reactivity update
+ await wrapper.find('button').trigger('click')
+ await wrapper.vm.$nextTick()
+
+ const button = wrapper.find('button')
+ expect(button.exists()).toBe(true)
+ })
+
+ it('should handle multiple selected items', () => {
+ vi.spyOn(commandStore, 'execute').mockResolvedValue()
+ canvasStore.selectedItems = [mockLGraphNode, mockLGraphNode] as any
+ const wrapper = mountComponent()
+ const button = wrapper.find('button')
+ expect(button.exists()).toBe(true)
+ })
+})
diff --git a/src/components/graph/selectionToolbox/BypassButton.vue b/src/components/graph/selectionToolbox/BypassButton.vue
index 7ae84f8e6..84882a285 100644
--- a/src/components/graph/selectionToolbox/BypassButton.vue
+++ b/src/components/graph/selectionToolbox/BypassButton.vue
@@ -1,6 +1,5 @@
@@ -23,9 +21,11 @@ import Button from 'primevue/button'
import { useI18n } from 'vue-i18n'
import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
const { t } = useI18n()
const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
+
+const toggleBypass = async () => {
+ await commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
+}
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.spec.ts b/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
similarity index 86%
rename from src/components/graph/selectionToolbox/ColorPickerButton.spec.ts
rename to src/components/graph/selectionToolbox/ColorPickerButton.test.ts
index dac0ed084..ccf07e8b9 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.spec.ts
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.test.ts
@@ -7,8 +7,8 @@ import { createI18n } from 'vue-i18n'
// Import after mocks
import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
// Mock the litegraph module
vi.mock('@/lib/litegraph/src/litegraph', async () => {
@@ -95,17 +95,6 @@ describe('ColorPickerButton', () => {
expect(wrapper.find('button').exists()).toBe(true)
})
- it('should not render when nothing is selected', () => {
- // Keep selectedItems empty
- canvasStore.selectedItems = []
- const wrapper = createWrapper()
- // The button exists but is hidden with v-show
- expect(wrapper.find('button').exists()).toBe(true)
- expect(wrapper.find('button').attributes('style')).toContain(
- 'display: none'
- )
- })
-
it('should toggle color picker visibility on button click', async () => {
canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
const wrapper = createWrapper()
diff --git a/src/components/graph/selectionToolbox/ColorPickerButton.vue b/src/components/graph/selectionToolbox/ColorPickerButton.vue
index df5a93cf6..8ea7b752c 100644
--- a/src/components/graph/selectionToolbox/ColorPickerButton.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerButton.vue
@@ -1,21 +1,25 @@
import Button from 'primevue/button'
import SelectButton from 'primevue/selectbutton'
+import type { Raw } from 'vue'
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
-import type { ColorOption as CanvasColorOption } from '@/lib/litegraph/src/litegraph'
+import type {
+ ColorOption as CanvasColorOption,
+ Positionable
+} from '@/lib/litegraph/src/litegraph'
import {
LGraphCanvas,
LiteGraph,
isColorable
} from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/stores/graphStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
import { adjustColor } from '@/utils/colorUtil'
import { getItemsColorOption } from '@/utils/litegraphUtil'
@@ -140,14 +148,19 @@ const localizedCurrentColorName = computed(() => {
)
return colorOption?.localizedName ?? NO_COLOR_OPTION.localizedName
})
-
+const updateColorSelectionFromNode = (
+ newSelectedItems: Raw
+) => {
+ showColorPicker.value = false
+ selectedColorOption.value = null
+ currentColorOption.value = getItemsColorOption(newSelectedItems)
+}
watch(
() => canvasStore.selectedItems,
(newSelectedItems) => {
- showColorPicker.value = false
- selectedColorOption.value = null
- currentColorOption.value = getItemsColorOption(newSelectedItems)
- }
+ updateColorSelectionFromNode(newSelectedItems)
+ },
+ { immediate: true }
)
diff --git a/src/components/graph/selectionToolbox/ConfigureSubgraph.vue b/src/components/graph/selectionToolbox/ConfigureSubgraph.vue
new file mode 100644
index 000000000..5c361aa73
--- /dev/null
+++ b/src/components/graph/selectionToolbox/ConfigureSubgraph.vue
@@ -0,0 +1,17 @@
+
+
+
+
diff --git a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
index ef6e27260..21779c35e 100644
--- a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
+++ b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
@@ -6,11 +6,12 @@
showDelay: 1000
}"
severity="secondary"
+ data-testid="convert-to-subgraph-button"
text
@click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
>
-
+
@@ -34,25 +36,15 @@ import Button from 'primevue/button'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
-import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
const { t } = useI18n()
const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
+const { isSingleSubgraph, hasAnySelection } = useSelectionState()
-const isUnpackVisible = computed(() => {
- return (
- canvasStore.selectedItems?.length === 1 &&
- canvasStore.selectedItems[0] instanceof SubgraphNode
- )
-})
-const isConvertVisible = computed(() => {
- return (
- canvasStore.groupSelected ||
- canvasStore.rerouteSelected ||
- canvasStore.nodeSelected
- )
-})
+const isUnpackVisible = isSingleSubgraph
+const isConvertVisible = computed(
+ () => hasAnySelection.value && !isSingleSubgraph.value
+)
diff --git a/src/components/graph/selectionToolbox/DeleteButton.vue b/src/components/graph/selectionToolbox/DeleteButton.vue
index 7c341614e..d2b1d1acd 100644
--- a/src/components/graph/selectionToolbox/DeleteButton.vue
+++ b/src/components/graph/selectionToolbox/DeleteButton.vue
@@ -5,9 +5,11 @@
value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
showDelay: 1000
}"
- severity="danger"
+ severity="secondary"
text
+ icon-class="w-4 h-4"
icon="pi pi-trash"
+ data-testid="delete-button"
@click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
/>
@@ -17,14 +19,15 @@ import Button from 'primevue/button'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
const { t } = useI18n()
const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
+const { selectedItems } = useSelectionState()
const isDeletable = computed(() =>
- canvasStore.selectedItems.some((x) => x.removable !== false)
+ selectedItems.value.some((x: Positionable) => x.removable !== false)
)
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.test.ts b/src/components/graph/selectionToolbox/ExecuteButton.test.ts
new file mode 100644
index 000000000..b75977b43
--- /dev/null
+++ b/src/components/graph/selectionToolbox/ExecuteButton.test.ts
@@ -0,0 +1,128 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCommandStore } from '@/stores/commandStore'
+
+// Mock the stores
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+ useCanvasStore: vi.fn()
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+ useCommandStore: vi.fn()
+}))
+
+// Mock the utils
+vi.mock('@/utils/litegraphUtil', () => ({
+ isLGraphNode: vi.fn((node) => !!node?.type)
+}))
+
+vi.mock('@/utils/nodeFilterUtil', () => ({
+ isOutputNode: vi.fn((node) => !!node?.constructor?.nodeData?.output_node)
+}))
+
+// Mock the composables
+vi.mock('@/composables/graph/useSelectionState', () => ({
+ useSelectionState: vi.fn(() => ({
+ selectedNodes: {
+ value: []
+ }
+ }))
+}))
+
+describe('ExecuteButton', () => {
+ let mockCanvas: any
+ let mockCanvasStore: any
+ let mockCommandStore: any
+ let mockSelectedNodes: any[]
+
+ const i18n = createI18n({
+ legacy: false,
+ locale: 'en',
+ messages: {
+ en: {
+ selectionToolbox: {
+ executeButton: {
+ tooltip: 'Execute selected nodes'
+ }
+ }
+ }
+ }
+ })
+
+ beforeEach(async () => {
+ setActivePinia(createPinia())
+
+ // Reset mocks
+ mockCanvas = {
+ setDirty: vi.fn()
+ }
+
+ mockSelectedNodes = []
+
+ mockCanvasStore = {
+ getCanvas: vi.fn(() => mockCanvas),
+ selectedItems: []
+ }
+
+ mockCommandStore = {
+ execute: vi.fn()
+ }
+
+ // Setup store mocks
+ vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore as any)
+ vi.mocked(useCommandStore).mockReturnValue(mockCommandStore as any)
+
+ // Update the useSelectionState mock
+ const { useSelectionState } = vi.mocked(
+ await import('@/composables/graph/useSelectionState')
+ )
+ useSelectionState.mockReturnValue({
+ selectedNodes: {
+ value: mockSelectedNodes
+ }
+ } as any)
+
+ vi.clearAllMocks()
+ })
+
+ const mountComponent = () => {
+ return mount(ExecuteButton, {
+ global: {
+ plugins: [i18n, PrimeVue],
+ directives: { tooltip: Tooltip },
+ stubs: {
+ 'i-lucide:play': { template: '' }
+ }
+ }
+ })
+ }
+
+ describe('Rendering', () => {
+ it('should be able to render', () => {
+ const wrapper = mountComponent()
+ const button = wrapper.find('button')
+ expect(button.exists()).toBe(true)
+ })
+ })
+
+ describe('Click Handler', () => {
+ it('should execute Comfy.QueueSelectedOutputNodes command on click', async () => {
+ const wrapper = mountComponent()
+ const button = wrapper.find('button')
+
+ await button.trigger('click')
+
+ expect(mockCommandStore.execute).toHaveBeenCalledWith(
+ 'Comfy.QueueSelectedOutputNodes'
+ )
+ expect(mockCommandStore.execute).toHaveBeenCalledTimes(1)
+ })
+ })
+})
diff --git a/src/components/graph/selectionToolbox/ExecuteButton.vue b/src/components/graph/selectionToolbox/ExecuteButton.vue
index 39ca28d5e..e37568a4d 100644
--- a/src/components/graph/selectionToolbox/ExecuteButton.vue
+++ b/src/components/graph/selectionToolbox/ExecuteButton.vue
@@ -1,20 +1,16 @@
@@ -23,26 +19,24 @@ import Button from 'primevue/button'
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
+import { useSelectionState } from '@/composables/graph/useSelectionState'
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
import { isLGraphNode } from '@/utils/litegraphUtil'
+import { isOutputNode } from '@/utils/nodeFilterUtil'
const { t } = useI18n()
-const canvasStore = useCanvasStore()
const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+const { selectedNodes } = useSelectionState()
const canvas = canvasStore.getCanvas()
const buttonHovered = ref(false)
-const selectedOutputNodes = computed(
- () =>
- canvasStore.selectedItems.filter(
- (item) => isLGraphNode(item) && item.constructor.nodeData?.output_node
- ) as LGraphNode[]
+const selectedOutputNodes = computed(() =>
+ selectedNodes.value.filter(isLGraphNode).filter(isOutputNode)
)
-const isDisabled = computed(() => selectedOutputNodes.value.length === 0)
-
function outputNodeStokeStyle(this: LGraphNode) {
if (
this.selected &&
diff --git a/src/components/graph/selectionToolbox/ExtensionCommandButton.vue b/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
index 3dc84f710..2e89ef7a5 100644
--- a/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
+++ b/src/components/graph/selectionToolbox/ExtensionCommandButton.vue
@@ -7,6 +7,7 @@
}"
severity="secondary"
text
+ icon-class="w-4 h-4"
:icon="typeof command.icon === 'function' ? command.icon() : command.icon"
@click="() => commandStore.execute(command.id)"
/>
@@ -16,7 +17,8 @@
import Button from 'primevue/button'
import { st } from '@/i18n'
-import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
+import type { ComfyCommand } from '@/stores/commandStore'
+import { useCommandStore } from '@/stores/commandStore'
import { normalizeI18nKey } from '@/utils/formatUtil'
defineProps<{
diff --git a/src/components/graph/selectionToolbox/FrameNodes.vue b/src/components/graph/selectionToolbox/FrameNodes.vue
new file mode 100644
index 000000000..b6a369599
--- /dev/null
+++ b/src/components/graph/selectionToolbox/FrameNodes.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/src/components/graph/selectionToolbox/HelpButton.vue b/src/components/graph/selectionToolbox/HelpButton.vue
deleted file mode 100644
index e77701bd4..000000000
--- a/src/components/graph/selectionToolbox/HelpButton.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-
-
-
-
-
diff --git a/src/components/graph/selectionToolbox/InfoButton.test.ts b/src/components/graph/selectionToolbox/InfoButton.test.ts
new file mode 100644
index 000000000..da2a13831
--- /dev/null
+++ b/src/components/graph/selectionToolbox/InfoButton.test.ts
@@ -0,0 +1,149 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
+// NOTE: The component import must come after mocks so they take effect.
+import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+const mockLGraphNode = {
+ type: 'TestNode',
+ title: 'Test Node'
+}
+
+vi.mock('@/utils/litegraphUtil', () => ({
+ isLGraphNode: vi.fn(() => true)
+}))
+
+vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
+ useNodeLibrarySidebarTab: () => ({
+ id: 'node-library'
+ })
+}))
+
+const openHelpMock = vi.fn()
+const closeHelpMock = vi.fn()
+const nodeHelpState: { currentHelpNode: any } = { currentHelpNode: null }
+vi.mock('@/stores/workspace/nodeHelpStore', () => ({
+ useNodeHelpStore: () => ({
+ openHelp: (def: any) => {
+ nodeHelpState.currentHelpNode = def
+ openHelpMock(def)
+ },
+ closeHelp: () => {
+ nodeHelpState.currentHelpNode = null
+ closeHelpMock()
+ },
+ get currentHelpNode() {
+ return nodeHelpState.currentHelpNode
+ },
+ get isHelpOpen() {
+ return nodeHelpState.currentHelpNode !== null
+ }
+ })
+}))
+
+const toggleSidebarTabMock = vi.fn((id: string) => {
+ sidebarState.activeSidebarTabId =
+ sidebarState.activeSidebarTabId === id ? null : id
+})
+const sidebarState: { activeSidebarTabId: string | null } = {
+ activeSidebarTabId: 'other-tab'
+}
+vi.mock('@/stores/workspace/sidebarTabStore', () => ({
+ useSidebarTabStore: () => ({
+ get activeSidebarTabId() {
+ return sidebarState.activeSidebarTabId
+ },
+ toggleSidebarTab: toggleSidebarTabMock
+ })
+}))
+
+describe('InfoButton', () => {
+ let canvasStore: ReturnType
+ let nodeDefStore: ReturnType
+
+ const i18n = createI18n({
+ legacy: false,
+ locale: 'en',
+ messages: {
+ en: {
+ g: {
+ info: 'Node Info'
+ }
+ }
+ }
+ })
+
+ beforeEach(() => {
+ setActivePinia(createPinia())
+ canvasStore = useCanvasStore()
+ nodeDefStore = useNodeDefStore()
+
+ vi.clearAllMocks()
+ })
+
+ const mountComponent = () => {
+ return mount(InfoButton, {
+ global: {
+ plugins: [i18n, PrimeVue],
+ directives: { tooltip: Tooltip },
+ stubs: {
+ 'i-lucide:info': true,
+ Button: {
+ template:
+ '',
+ props: ['severity', 'text', 'class'],
+ emits: ['click']
+ }
+ }
+ }
+ })
+ }
+
+ it('should handle click without errors', async () => {
+ const mockNodeDef = {
+ nodePath: 'test/node',
+ display_name: 'Test Node'
+ }
+ canvasStore.selectedItems = [mockLGraphNode] as any
+ vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+ const wrapper = mountComponent()
+ const button = wrapper.find('button')
+ await button.trigger('click')
+ expect(button.exists()).toBe(true)
+ })
+
+ it('should have correct CSS classes', () => {
+ const mockNodeDef = {
+ nodePath: 'test/node',
+ display_name: 'Test Node'
+ }
+ canvasStore.selectedItems = [mockLGraphNode] as any
+ vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+
+ const wrapper = mountComponent()
+ const button = wrapper.find('button')
+
+ expect(button.classes()).toContain('help-button')
+ expect(button.attributes('severity')).toBe('secondary')
+ })
+
+ it('should have correct tooltip', () => {
+ const mockNodeDef = {
+ nodePath: 'test/node',
+ display_name: 'Test Node'
+ }
+ canvasStore.selectedItems = [mockLGraphNode] as any
+ vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
+
+ const wrapper = mountComponent()
+ const button = wrapper.find('button')
+
+ expect(button.exists()).toBe(true)
+ })
+})
diff --git a/src/components/graph/selectionToolbox/InfoButton.vue b/src/components/graph/selectionToolbox/InfoButton.vue
new file mode 100644
index 000000000..cb771c1f0
--- /dev/null
+++ b/src/components/graph/selectionToolbox/InfoButton.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/src/components/graph/selectionToolbox/Load3DViewerButton.vue b/src/components/graph/selectionToolbox/Load3DViewerButton.vue
index b207e5018..5187f0c02 100644
--- a/src/components/graph/selectionToolbox/Load3DViewerButton.vue
+++ b/src/components/graph/selectionToolbox/Load3DViewerButton.vue
@@ -1,6 +1,5 @@
diff --git a/src/components/graph/selectionToolbox/NodeOptions.vue b/src/components/graph/selectionToolbox/NodeOptions.vue
new file mode 100644
index 000000000..9965ffa6d
--- /dev/null
+++ b/src/components/graph/selectionToolbox/NodeOptions.vue
@@ -0,0 +1,324 @@
+
+
+
+
+
diff --git a/src/components/graph/selectionToolbox/NodeOptionsButton.vue b/src/components/graph/selectionToolbox/NodeOptionsButton.vue
new file mode 100644
index 000000000..2b4e613c2
--- /dev/null
+++ b/src/components/graph/selectionToolbox/NodeOptionsButton.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
diff --git a/src/components/graph/selectionToolbox/PinButton.vue b/src/components/graph/selectionToolbox/PinButton.vue
deleted file mode 100644
index 86598339b..000000000
--- a/src/components/graph/selectionToolbox/PinButton.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
diff --git a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
index 786fe511f..ec0f44b2f 100644
--- a/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
+++ b/src/components/graph/selectionToolbox/RefreshSelectionButton.vue
@@ -1,17 +1,22 @@
+ >
+
+
diff --git a/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue b/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue
new file mode 100644
index 000000000..3fb876a02
--- /dev/null
+++ b/src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue
new file mode 100644
index 000000000..fd376df97
--- /dev/null
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+ {{ subOption.label }}
+
+
+
-
+
-
{{ item.prompt }}
+
{{ item.prompt }}
-
+
+