The New popup menu UI is not displayed in full screen

[zxuanhong]

Describe the Bug

The New popup menu UI is not displayed in full screen

1. not full

2. full

Steps to Reproduce

1. Set browser content to full screen
2. clieck change type icon
3. popup menu not displayed

Expected Behavior

Environment

• Browser: [e.g. IE 11, Chrome 69] 108
• OS: [e.g. Windows 7] mac
• Library version: [e.g. 2.0.0] bpmn js 11.1.0

[nikku]

I can reproduce it if you focus a particular element (.bjs-container) for fullscreen:

const container = document.querySelector('.bjs-container');
container.requestFullscreen();

The issue is that the popup menu now lives outside the diagram canvas, outside the fullscreen element. This is a behavior we'd need to revise if we wanted to fix this.

CC @smbea.

[smbea]

Maybe I misunderstood the issue, but I couldn't reproduce it:

Screen.Recording.2022-12-28.at.18.42.29.mov

[nikku]

Reproduce using our test suite (npm start) and these steps.

Note that there seem to be other things going on.

[smbea]

Assigning it to me so I can have a look at this

[smbea]

I have looked into this and figured out that we don't necessarily need to pull it out of the bjs-container. We can simply keep using thedocumentElement for position calculations (in _ensureVisible); we already have a position: absolute in place.

I gave this a test, and here's how it looks on desktop modeler:

Screen.Recording.2023-01-05.at.10.56.53.mov

In this demo, I added the container for config.popupMenu in bpmn-js like we do for the canvas.

Wdyt @nikku ?

[nikku]

Just cross-checked #1795 (comment) in the in the Camunda Modeler. What we wanted to accomplish was more natural positioning in the viewport:

We may need to use position: fixed rather than position: absolute to accomplish that. Alternatively we could resort to applications properly using positioning attributes. You could argue that the Camunda Modeler shall not render the bjs-container with position: absolute in the first place, which it currently does.

[smbea]

We actually already use position: fixed on the direct parent - .djs-popup-backdrop-, and we use position: absolute on the .djs-popup (see here)

[nikku]

Closed via ca4559f.