forked from androidx/androidx
-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix render order of interop views (#1145)
## 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
- Loading branch information
1 parent
d680c84
commit 339dbd3
Showing
28 changed files
with
716 additions
and
309 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 70 additions & 0 deletions
70
compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/InteropOrder.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
/* | ||
* Copyright 2024 The Android Open Source Project | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
package androidx.compose.mpp.demo | ||
|
||
import androidx.compose.foundation.layout.Arrangement | ||
import androidx.compose.foundation.layout.Box | ||
import androidx.compose.foundation.layout.Column | ||
import androidx.compose.foundation.layout.offset | ||
import androidx.compose.foundation.layout.padding | ||
import androidx.compose.foundation.layout.size | ||
import androidx.compose.material.Button | ||
import androidx.compose.material.Text | ||
import androidx.compose.runtime.Composable | ||
import androidx.compose.runtime.getValue | ||
import androidx.compose.runtime.mutableStateOf | ||
import androidx.compose.runtime.remember | ||
import androidx.compose.runtime.setValue | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.graphics.Color | ||
import androidx.compose.ui.unit.dp | ||
|
||
@Composable | ||
fun InteropOrder() { | ||
var red by remember { mutableStateOf(true) } | ||
var green by remember { mutableStateOf(true) } | ||
var blue by remember { mutableStateOf(true) } | ||
Column( | ||
modifier = Modifier.padding(10.dp), | ||
verticalArrangement = Arrangement.spacedBy(10.dp) | ||
) { | ||
Button(onClick = { red = !red }) { | ||
Text("Red") | ||
} | ||
Button(onClick = { green = !green }) { | ||
Text("Green") | ||
} | ||
Button(onClick = { blue = !blue }) { | ||
Text("Blue") | ||
} | ||
|
||
Box { | ||
if (red) { | ||
TestInteropView(Modifier.size(150.dp).offset(0.dp, 0.dp), Color.Red) | ||
} | ||
if (green) { | ||
TestInteropView(Modifier.size(150.dp).offset(75.dp, 75.dp), Color.Green) | ||
} | ||
if (blue) { | ||
TestInteropView(Modifier.size(150.dp).offset(150.dp, 150.dp), Color.Blue) | ||
} | ||
} | ||
} | ||
} | ||
|
||
@Composable | ||
internal expect fun TestInteropView(modifier: Modifier, color: Color) |
34 changes: 34 additions & 0 deletions
34
compose/mpp/demo/src/desktopMain/kotlin/androidx/compose/mpp/demo/InteropOrder.desktop.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
/* | ||
* Copyright 2024 The Android Open Source Project | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
package androidx.compose.mpp.demo | ||
|
||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.awt.SwingPanel | ||
import androidx.compose.ui.graphics.Color | ||
import javax.swing.JPanel | ||
|
||
@Composable | ||
internal actual fun TestInteropView(modifier: Modifier, color: Color) { | ||
SwingPanel( | ||
background = color, | ||
factory = { JPanel().apply { background = color.toAwtColor() } }, | ||
modifier = modifier | ||
) | ||
} | ||
|
||
private fun Color.toAwtColor() = java.awt.Color(red, green, blue, alpha) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
39 changes: 39 additions & 0 deletions
39
compose/mpp/demo/src/uikitMain/kotlin/androidx/compose/mpp/demo/InteropOrder.uikit.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
/* | ||
* Copyright 2024 The Android Open Source Project | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
package androidx.compose.mpp.demo | ||
|
||
import androidx.compose.runtime.Composable | ||
import androidx.compose.ui.Modifier | ||
import androidx.compose.ui.graphics.Color | ||
import androidx.compose.ui.interop.UIKitView | ||
import platform.UIKit.UIColor | ||
import platform.UIKit.UIView | ||
|
||
@Composable | ||
internal actual fun TestInteropView(modifier: Modifier, color: Color) { | ||
UIKitView( | ||
factory = { UIView().apply { backgroundColor = color.toUIColor() } }, | ||
modifier = modifier, | ||
) | ||
} | ||
|
||
private fun Color.toUIColor() = UIColor( | ||
red = red.toDouble(), | ||
green = green.toDouble(), | ||
blue = blue.toDouble(), | ||
alpha = alpha.toDouble(), | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.