Comfy-Org / Comfy-Org/ComfyUI_frontend

Refactor: Consolidate vueNodes event listener patterns

Open
#7,956 0 comments 0 reactions 2 assignees Claimed by @Myestery View on GitHub
area:nodes area:ui area:vue-nodes developer experience
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.