3 Commits

Author	SHA1	Message	Date
jaeone94	a3106c4d53	fix: open node info panel from context menu (#12205) ... ## Summary Replaces #12164. Right-clicking a Vue node, using the selection toolbox More Options menu, or clicking the selection toolbox Node Info button now opens the right-side Info tab only when the new-menu UI makes that panel available. Legacy-menu contexts hide the no-op action even when the legacy node library design is selected; node-library help remains isolated to the node library itself. The existing `selection_toolbox_node_info_opened` telemetry fires only after the toolbox button successfully opens node info. No new context-menu telemetry event is added in this PR. ## Changes - **What**: Share the node-info availability/action path across the context menu and selection toolbox, keep legacy-menu state out of the right-side panel public store API, tighten node-info settings tests, and add unit plus E2E regression coverage for new-menu and legacy-menu modes. - **Dependencies**: None ## Review Focus Confirm the node context menu, selection toolbox direct Info button, and selection toolbox More Options entry all respect right-side panel availability, including legacy menu + legacy node library mode, while node-library help behavior remains isolated to the node library. ## Validation - Self-review: checked production path, unit mocks, and Playwright coverage; only gap found was weak E2E coverage for the toolbox direct Info path, now strengthened. - `pnpm test:unit -- src/composables/graph/useSelectionState.test.ts src/components/graph/SelectionToolbox.test.ts src/components/graph/selectionToolbox/InfoButton.test.ts` - `pnpm test:browser:local -- --project=chromium browser_tests/tests/selectionToolboxActions.spec.ts browser_tests/tests/selectionToolboxSubmenus.spec.ts browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts --grep "info button opens the right-side info tab|info button is hidden|hides Node Info|should open node info"` - `pnpm typecheck:browser` - `pnpm exec oxlint --type-aware browser_tests/tests/selectionToolboxActions.spec.ts` - `pnpm exec eslint --cache --no-warn-ignored browser_tests/tests/selectionToolboxActions.spec.ts` - `pnpm exec oxfmt --check browser_tests/tests/selectionToolboxActions.spec.ts` - `git diff --check` - Commit hooks: lint-staged + `pnpm typecheck` + `pnpm typecheck:browser` - Push hook: `knip --cache` (existing tag hint only) ## Screenshots (if applicable) Before https://github.com/user-attachments/assets/4b1f6ddb-a01c-4958-81ab-36167f434e59 https://github.com/user-attachments/assets/83433f0d-24f1-46b7-a81d-f0f065812496 After https://github.com/user-attachments/assets/30bd61e5-f8d4-48b7-97e0-26c93e3cb362 https://github.com/user-attachments/assets/afce9f51-a43d-434f-a006-6b357a61ac8f --------- Co-authored-by: github-actions <github-actions@github.com>	2026-05-14 02:26:11 +00:00
Johnpaul Chiwetelu	e21f43f398	[feat] Replace NodeOptions with PrimeVue ContextMenu (#7114) ... ## Summary - Add `NodeContextMenu.vue` using PrimeVue ContextMenu component with native submenu support - Rename `SubmenuPopover.vue` to `ColorPickerMenu.vue` (specialized for color picker) - Delete old components: `NodeOptions.vue`, `MenuOptionItem.vue`, `useSubmenuPositioning.ts` - Wire up context menu converter in `useMoreOptionsMenu.ts` - Update tests to use hover instead of click for submenus ## Dependencies **This PR depends on #7113** - the context menu converter infrastructure PR. It should be merged after that PR. ## Benefits - Native PrimeVue submenu support with proper keyboard navigation - Constrained menu dimensions with overflow scrolling (max-h-[80vh]) - Cleaner component architecture with ~280 fewer lines of code - Better separation: ColorPickerMenu handles only the custom color picker UI ## Test plan - [x] Typecheck passes - [x] Lint passes - [x] Knip passes - [ ] Browser tests for submenu interactions pass - [ ] Manual testing of node context menu ## Screenshots (Menu UI should look the same, with improved submenu behavior) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7114-feat-Replace-NodeOptions-with-PrimeVue-ContextMenu-2be6d73d365081fda576fd691175eacf) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>	2025-12-17 06:47:28 +01:00
Johnpaul Chiwetelu	ac107b45ea	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>	2025-09-13 22:52:30 -07:00