Comfy-Org / Comfy-Org/ComfyUI_frontend

refactor: extract useCanvasMenuPositionSync composable to deduplicate NodeContextMenu and SlotContextMenu positioning logic

Open
#9,795 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
area:ui
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

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.