Comfy-Org / Comfy-Org/ComfyUI_frontend
Refactor: Consolidate vueNodes event listener patterns
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Context
The vueNodes extension has grown to include multiple event handling patterns across different components and composables. This creates maintenance challenges and can lead to subtle bugs (e.g., #7953 tooltip interaction issues).
## Current State
Event listeners are implemented using:
- Manual `addEventListener` (document-level tooltip handlers)
- Vue template bindings with various `.stop` modifiers
- VueUse composables (resize, slot interactions) ✓
- Custom `CanvasPointer` class (legacy widgets)
- Mix of mouse vs pointer events
See detailed map: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7953#discussion_r2679210167
## Refactoring Goals
1. **Consistency**: Establish standard patterns for similar use cases
2. **Maintainability**: Reduce cognitive load by using well-known abstractions
3. **Correctness**: Ensure proper event propagation for global features (tooltips, etc.)
4. **Modern**: Leverage VueUse composables per team preferences
## Proposed Work
### Phase 1: High Priority
- [ ] Migrate `CanvasPointer` in `WidgetLegacy.vue` to VueUse patterns
- [ ] Standardize widget event blocking across WidgetDOM/Legacy/Textarea/LayoutField
- [ ] Convert document-level tooltip listeners to `useEventListener`
### Phase 2: Medium Priority
- [ ] Replace manual mouse enter/leave with `useElementHover` (ImagePreview, VideoPreview)
- [ ] Audit `.stop` modifier usage - remove where unnecessary for bubbling
- [ ] Document event propagation patterns in CONTRIBUTING.md
### Phase 3: Low Priority
- [ ] Consider unified `useWidgetInteraction` composable
- [ ] Establish guidelines for capture phase usage
- [ ] Add event flow diagrams to documentation
## Success Criteria
- All components use VueUse where applicable
- Clear documentation of when/why to stop propagation
- No regression in widget interactions or tooltip behavior
- Reduced duplication in event handling code
## Related
- PR #7953 (event propagation causing tooltip issues)
---
/cc @DrJKL
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-7956-Refactor-Consolidate-vueNodes-event-listener-patterns-2e56d73d365081579446ee4fc7969105) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.