Draw popupMenu next to target element

I’d like to display popupMenu close to the target element (not as usually close to the source element) when creating a connection.
The problem that I faced is that when we are usually opening the popupMenu from ContextPad (which is created automatically during selection) we are getting a postioin from this ContextPad to display the menu.
In my situation, I don’t have ContextPad yet and due to this have problem finding the correct coordinates to display the menu. Could you please advise how to find the coordinates of an element taking into account the scale and the offset?

Hi @catcher ,

Can you elaborate on what you are trying to achieve? I don’t quite understand what kind of popup menu you want to open after you connect two elements.

I created a code-sandbox that opens the replace menu of the target element next to it. Maybe this can help you find the missing piece in your approach :slight_smile:

Recording 2022-11-28 at 14.21.26

Hi @Martin,
Thanks for your response.
This is exactly what I’m trying to achieve. I’m trying to display a popup menu close to the target element instead of the source when creating a connection. You understood me correctly. However, I’m using pure diagram-js (I forgot to mention that).
I checked your codesandbox and it seems to me that you have the same issue as I do - when you scale the diagram popup menu is not next to the target anymore. Interesting thing is that your solution is affected only by scaling. My (which looks similar) is affected by scale too, but also by element movement (don’t know why maybe diagram-js vs. bpmn-js differences).

I see. The Context Menu expects an absolute position on the window, not the diagram coordinates. There are multiple ways to do it.

The easiest is to find the DOM element of the target element and use the position of it. Alternatives can be to calculate it from the canvas viewport or directly using pointer events.

I adjusted the example, please have another look

Recording 2022-11-28 at 15.05.51

Great thanks for your support @Martin.
I’ve checked 2 of your solutions (document.querySelector and event.originalEvent) and looks that both are working for me :+1: However, I have a minor issue with document.querySelector since I’m using web components with a shadow root and don’t have access to document from inside the web component, but I was able to use shadowRoot instead of document and check that is working.
I need to think which to choose, but it is better to have 2 solutions than none :slight_smile:
Thanks a lot. I consider this a solution.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.