mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-27 17:52:16 +00:00
Add node pinning functionality to Vue nodes (#5772)
## Summary Added pinning functionality to Vue nodes with hotkey support and visual indicators. ## Changes - **What**: Added node pinning feature with 'p' hotkey toggle and pin icon indicator - **Components**: Updated `LGraphNode.vue` and `NodeHeader.vue` with pin state tracking - **State Management**: Extended `useGraphNodeManager` to sync pinned flag with Vue components - **Tests**: Added E2E tests for single and multi-node pin toggling ## Review Focus Pin state persistence in graph serialization and visual indicator positioning in node header layout. Verify hotkey doesn't conflict with existing shortcuts. ## Technical Details - Pin state tracked via `flags.pinned` property in `LGraphNode` - Uses [Vue memoization](https://vuejs.org/api/reactivity-advanced.html#v-memo) for efficient header re-rendering - Integrates with existing node property change detection system - Visual indicator uses Lucide pin icon with theme-aware styling ## Screenshots (if applicable) <img width="875" height="977" alt="Screenshot from 2025-09-25 13-02-21" src="https://github.com/user-attachments/assets/51d46cea-08f0-44fb-8b07-56d1b939338f" /> <img width="875" height="977" alt="Screenshot from 2025-09-25 13-02-10" src="https://github.com/user-attachments/assets/ce247426-1e39-48c0-924b-658b65c24f52" /> ## Related - https://github.com/Comfy-Org/ComfyUI_frontend/pull/5715 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5772-Add-node-pinning-functionality-to-Vue-nodes-2796d73d36508195914bcfc986aa66b5) by [Unito](https://www.unito.io) --------- Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com>
This commit is contained in:
@@ -3398,9 +3398,7 @@ export class LGraphNode
|
||||
this.graph._version++
|
||||
this.flags.pinned = v ?? !this.flags.pinned
|
||||
this.resizable = !this.pinned
|
||||
// Delete the flag if unpinned, so that we don't get unnecessary
|
||||
// flags.pinned = false in serialized object.
|
||||
if (!this.pinned) delete this.flags.pinned
|
||||
if (!this.pinned) this.flags.pinned = undefined
|
||||
}
|
||||
|
||||
unpin(): void {
|
||||
|
||||
@@ -6,6 +6,7 @@ import type { LGraphNode } from './LGraphNode'
|
||||
const DEFAULT_TRACKED_PROPERTIES: string[] = [
|
||||
'title',
|
||||
'flags.collapsed',
|
||||
'flags.pinned',
|
||||
'mode'
|
||||
]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user