Comfy-Org / Comfy-Org/ComfyUI_frontend
refactor: extract useCanvasMenuPositionSync composable to deduplicate NodeContextMenu and SlotContextMenu positioning logic
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Summary
The world-to-screen coordinate conversion, RAF sync loop, dirty-checking, and PrimeVue container repositioning logic is duplicated between `NodeContextMenu.vue` and `SlotContextMenu.vue`. This should be extracted into a shared composable (e.g., `useCanvasMenuPositionSync`) to eliminate the duplication.
## Duplicated pattern (appears in both components)
- `useElementBounding(lgCanvas.canvas)` for canvas bounds
- `worldPosition` ref + `lastScale`/`lastOffsetX`/`lastOffsetY` dirty check
- `updateMenuPosition()` with `menuEl.style.left/top` assignment
- `useRafFn` + `watchEffect` start/stop pattern
- `contextMenu.value as unknown as { container?: HTMLElement }` cast
## Proposed solution
Extract a composable `useCanvasMenuPositionSync` (e.g., under `src/renderer/extensions/vueNodes/composables/`) that encapsulates the above logic and can be consumed by both `NodeContextMenu.vue` and `SlotContextMenu.vue`.
## References
- PR where `SlotContextMenu.vue` was introduced: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9045
- Review comment that identified the duplication: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9045#discussion_r2924278686
Requested by @christian-byrne
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9795-refactor-extract-useCanvasMenuPositionSync-composable-to-deduplicate-NodeContextMenu--3216d73d365081bd841aff35d1afc275) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.