Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UIKitView is displayed on top of all other components #3848

Closed
artsmvch opened this issue Oct 22, 2023 · 8 comments · Fixed by JetBrains/compose-multiplatform-core#1145
Closed
Labels

Comments

@artsmvch
Copy link

artsmvch commented Oct 22, 2023

Describe the bug
UIKitView is displayed on top of all other components

Affected platforms

  • iOS

Versions

  • Kotlin version*: 1.9.0
  • Compose Multiplatform version*: 1.5.10-rc01
  • OS version(s)* (required for Desktop and iOS issues): iOS 16.4
  • OS architecture (x86 or arm64): x86

To Reproduce
Here is a Compose screen for iOS.
The screen is a stack of two boxes with video players inside them. Video players are implemented via UIKitView.
But the video player from the bottom box is displayed on top of all other components (See attached screenshot).

Expected behavior
The first video is not visible at all, because it is placed under the second video and the blue background.

Screenshots

Screenshot 2023-10-22 at 23 16 09

Additional context
If I remove the top video, the bottom video will not be visible (correct behaviour).

@dima-avdeev-jb
Copy link
Contributor

Thanks for this Issue!

@KevinnZou
Copy link

@dima-avdeev-jb I think this issue is also caused by this bug

@artsmvch
Copy link
Author

Hey guys, any updates on this issue? Or when will this be fixed?

@dima-avdeev-jb
Copy link
Contributor

dima-avdeev-jb commented Jan 29, 2024

Maybe this issue is related with

@dima-avdeev-jb
Copy link
Contributor

@artsmvch Can you please wait version 1.6.0-beta02 and test it again

@dima-avdeev-jb
Copy link
Contributor

@artsmvch Can you please check it on version 1.6.0-rc03 ?

@artsmvch
Copy link
Author

artsmvch commented Feb 28, 2024

@dima-avdeev-jb it works well now, thanks!

@MatkovIvan
Copy link
Member

Great. The current state will work if it's displayed at the same time. JetBrains/compose-multiplatform-core#1145 - will solve the situation in a more generic way. Closing as the original issue is already resolved

MatkovIvan added a commit to JetBrains/compose-multiplatform-core that referenced this issue Feb 29, 2024
## Proposed Changes

Currently on both Desktop and iOS interop views are added to the view
hierarchy in order to add nodes to Compose. It works only if all
intersecting interop views were added at the same time (frame). So it's
basically last-added - above-displayed. This PR changes this behavior in
a way that it will respect the order inside Compose like regular compose
elements.

**It does NOT make any changes in the ability to display Compose content
above interop view on Desktop**, this fix was made in #915

Main changes:
- Unify a way to work with interop on Desktop (`SwingPanel`) and iOS
(`UIKitView`)
- `LocalInteropContainer` -> `LocalUIKitInteropContainer` on iOS
- `LocalLayerContainer` -> `LocalSwingInteropContainer` on Desktop
- Reduce copy-pasting by moving `OverlayLayout` and `EmptyLayout`
- Remove overriding `add` method on `ComposePanel` and
`ComposeWindowPanel` - it was required to redirect interop, but now it's
not required and it's better to avoid changing default AWT hierarchy
behaviour
- Do not use `JLayeredPane`'s layers anymore - it brings a lot of
transparency issues (faced with it on Windows too after unrelated
change). Sorting via indexes is used instead
- Add `InteropOrder` page to mpp demo

### How it works

It utilizes `TraversableNode` to traverse the tree in the right order
and calculate the index based on interop views count that placed before
the current node in the hierarchy. All interop nodes are marked via
`Modifier.trackSwingInterop`/`Modifier.trackUIKitInterop` modifier to
filter them from the `LayoutNode`s tree.

## Testing

Test: run reproducers from the issues or look at "InteropOrder" page in
mpp demo

Desktop | iOS
--- | ---
<img width="400" alt="Screenshot 2024-02-27 at 12 51 06"
src="https://github.com/JetBrains/compose-multiplatform-core/assets/1836384/534cbdc8-9671-4ab7-bd6d-b577d2004d1b">
| <img width="300" alt="Simulator Screenshot - iPhone 15 Pro -
2024-02-27 at 12 49 50"
src="https://github.com/JetBrains/compose-multiplatform-core/assets/1836384/ac7553db-c2a4-4c4a-a270-5d6dbf82fb79">


## Issues Fixed

### Desktop

Fixes JetBrains/compose-multiplatform#2926
Fixes
JetBrains/compose-multiplatform#1521 (comment)

### iOS

Fixes JetBrains/compose-multiplatform#4004
Fixes JetBrains/compose-multiplatform#3848
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants