Context menu does not react to zoom and pan movements

[ilamanov]

What platform were you using when you found the bug?

• React Flow / Svelte Flow version: "@xyflow/svelte": "^0.1.15"
• Browser and version: Arc
• OS and version: Mac

Live code example

https://svelteflow.dev/examples/interaction/context-menu

Describe the Bug

SvelteFlow's context menu does not react to zoom and pan effects. This can be seen from SvelteFlow's own example:
https://svelteflow.dev/examples/interaction/context-menu

Seems like there is no way to get around this issue now. Would be great if the context menu react to zoom and to be able to hide the context menu when panning. (I can't hide the context menu on pan currently because there is no callback when pan happens)

Steps to reproduce the bug or issue

1. Go to https://svelteflow.dev/examples/interaction/context-menu
2. Right click to open context menu
3. Try to zoom and pan

Expected behavior

1. Context menu should react to scale/zoom
2. It should be hidden when panning

Screenshots or Videos

CleanShot.2024-08-22.at.14.56.47.mp4

Additional context

No response

[alexanderhorner]

Native context menus usually disappear on scroll or dragging. That's how I did it with my context menu and it feels pretty good. If you want it to move with the pane you would have to make it relative to that. Right now it's positioned relative to the container wich doesnt move.

[peterkogo]

This would be an enhancement of the showcased example as we very much encourage people to build their own context menus.

A context menu placed inside the viewport can be achieved via the ViewportPortal - but imagine being zoomed out very far, then you'd have a very tiny context menu.

I like @alexanderhorner suggestion, but this really depends on the use case. What if panning while the context menu is open is a regular occurrence in your application? Maybe translating but not scaling the context menu is the answer.

Anyway, these decisions are best left for application maintainers, but I will check with the team if we can have a better default behavior.

[moklick]

I would hide it on zoom and on pan for simplicity in this example.