Floating Selection Toolbox Improvements (#5218)

* WIP * WIP: UI design for right click menu * feat: add composable for node customization and information handling * fix: correct v-show directive in MaskEditorButton and enhance MoreOptions functionality * feat: add selection and subgraph operations composables for enhanced graph management * fix: update computed properties to use 'void' for non-reactive calls and add MenuOptionItem component * feat: add composables for More Options menu and submenu positioning logic * feat: refactor MoreOptions component to use MenuOptionItem for menu rendering and streamline submenu handling * feat: implement SubmenuPopover component for enhanced submenu functionality and selection handling * feat: add 'More Options' label and enhance shape options in localization file * refactor: simplify shape name handling by removing Pascal case conversion and using localized names * refactor: enhance submenu handling by dynamically setting refs and improving key assignment * feat: implement useNodeArrangement composable for node alignment and distribution functionality * feat: enhance useMoreOptionsMenu with image node operations and alignment options * feat: localize context menu options and enhance submenu handling * refactor: improve type safety for title assignment in selection operations and enhance color option retrieval in node customization * fix: adjust component order in SelectionToolbox for improved layout * feat: update FrameNodes button visibility and tooltip, and add localization for frameNodes * feat: enhance button visibility logic in SelectionToolbox based on selection types * refactor: reorganize properties panel option in More Options menu for single nodes * remove excessive logging and alerts * fix component tests * ad browser tests * feat: enhance popover behavior in MoreOptions component to manage visibility state during selection overlay changes * refactor: update visibility logic for buttons in SelectionToolbox and ExecuteButton components * refactor: remove duplicate shape option and clean up shapeOptions array * refactor: update help toggle logic in InfoButton and useMoreOptionsMenu to manage sidebar and help state * refactor: streamline node info handling and integrate output node filtering in useNodeInfo and useMoreOptionsMenu * Added useSelectionState composable consolidating all selection-derived state and the node help toggle * Updated toolbox buttons (InfoButton, BookmarkButton, BypassButton, MaskEditorButton, ConvertToSubgraphButton, PinButton, DeleteButton, ColorPickerButton, ExecuteButton, FrameNodes, Load3DViewerButton) to remove duplicated selection logic and use useSelectionState * Introduced HideReason ('manual' | 'drag') to differentiate drag-induced hides from manual/outside hides in MoreOptions * refactor: enhance popover visibility handling during drag events using canvas state * fix: update shape option name from 'default' to 'box' and add localization for 'box' * refactor: streamline BypassButton logic and enhance MoreOptions menu with state bumping * refactor: remove toast notifications from subgraph operations for cleaner logic * refactor: ensure menu options re-compute when selection flags change * feat: Enhance MoreOptions behavior with drag-and-drop support * fix: Update mask icon class for consistent styling in MaskEditorButton * refactor: Standardize icon sizes and classes across selection toolbox buttons * refactor: Update layout and styling in SelectionToolbox and MoreOptions components * refactor: Improve selection toolbox behavior with more options state management * Refactor: Remove unused imports and conditionally add subgraph option in menu * Enhance popover behavior: add show/hide event handlers and improve positioning logic * Cleanup: Remove debug comments from popover functions for clarity * Refactor: Clean up FrameNodes component and add MenuOptionBadge for better option display * Cleanup: Remove debug comments from useSelectionToolboxPosition for clarity * Add useFrameNodes composable for grouping selected nodes * Refactor: Update shape options in useNodeCustomization and localize frame nodes label * fix tests * Cleanup: Remove packageManager entry from package.json * Refactor: Replace ILucide icons with named imports from lucide-vue-next * Refactor: Update shape selection and improve color picker behavior in selection toolbox * Update test expectations [skip ci] * feat: Enhance More Options Menu for group node management and update localization strings * refactor: Comment out PublishButton * refactor: Comment out test for bookmark button visibility in SelectionToolbox * refactor: Update class names for dark theme compatibility in ExecuteButton and MenuOptionItem components * refactor: Modularize menu options by creating dedicated composables for group, image, node, and selection operations * refactor: Update selectors in tests to match design changes * refactor: Update help button selector in Node Help tests * refactor: Update getGroupColorOptions to accept groupContext and bump parameters * Update test expectations [skip ci] * refactor: Center KSampler node before interaction in More Options submenu tests * refactor: Adjust KSampler node positioning and simplify button click in More Options submenu tests * refactor: Rename comfyPageFixture import for clarity * refactor: use gap-1 instead of the explicit gap-[4px] * refactor: Replace app.canvas with canvasStore.getCanvas for state management * refactor: Simplify prop access by removing 'props.' prefix in MenuOptionItem component * refactor: Remove explicit type annotation for item in buildSelectionSignature function * refactor: Replace Lucide icons with string-based icon references in menu options * refactor: Remove export from interface declarations for improved clarity * refactor: Simplify class binding in BypassButton component for improved readability * refactor: Update button class for consistent sizing in ExecuteButton component * refactor: Update help button locator class for consistency in Node Help tests * fix node help test * refactor: Remove unused imports and simplify visibility conditions in selection toolbox components * feat: Add 3D node selection logic and cleanup on unmount for selection toolbox * refactor: Update help button locator to use consistent data-testid in Node Help tests * fix: Correct help button locator syntax in Node Help tests * refactor: Change resetMoreOptionsState to an internal function in useSelectionToolboxPosition * test: Add Load3D node visibility logic for ColorPickerButton and remove redundant test case * fix: Increase tooltip show delay for ColorPickerButton * fix: Update selectedOutputNodes computation to filter by isLGraphNode * fix: Remove unused nodeDef reference from InfoButton and submenu trigger from MenuOptionItem * fix: Update showInfoButton logic to depend on nodeDef value * refactor: Remove deprecated getBasicNodeOptions function for cleaner code * refactor: Replace useNodeInfo with useSelectedNodeActions * refactor: Integrate useNodeDefStore for improved node definition handling in SelectionToolbox and InfoButton tests * refactor: Introduce useCanvasRefresh composable for consistent canvas refresh logic across node operations * refactor: Remove irrelevant append-to attribute from Popover * refactor: Use storeToRefs for selectedItems in useSelectionState and add tests for selection logic * refactor: Update ExecuteButton to use hasOutputNodesSelected for visibility and remove unnecessary computed property * refactor: move display of execution button tests to selectionToolbox --------- Co-authored-by: github-actions <github-actions@github.com>
2026-05-04 13:12:10 +00:00 · 2025-09-14 06:52:30 +01:00
parent f6a115e182
commit ac107b45ea
47 changed files with 3989 additions and 205 deletions
--- a/src/components/graph/selectionToolbox/BypassButton.spec.ts
+++ b/src/components/graph/selectionToolbox/BypassButton.spec.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 { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+
+const mockLGraphNode = {
+  type: 'TestNode',
+  title: 'Test Node',
+  mode: LGraphEventMode.ALWAYS
+}
+
+vi.mock('@/utils/litegraphUtil', () => ({
+  isLGraphNode: vi.fn(() => true)
+}))
+
+describe('BypassButton', () => {
+  let canvasStore: ReturnType<typeof useCanvasStore>
+  let commandStore: ReturnType<typeof useCommandStore>
+
+  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)
+  })
+})