Fix render order of interop views

[MatkovIvan]

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 LayoutNodes tree.

Testing

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

Desktop	iOS

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

[igordmn]

Cool!

With interopBlending=true it works with Compose in the middle:

        Box {
            if (red) {
                TestInteropView(Modifier.size(150.dp).offset(0.dp, 0.dp), Color.Red)
            }
            if (green) {
                Box(Modifier.size(150.dp).offset(75.dp, 75.dp).background(Color.Green))
            }
            if (blue) {
                TestInteropView(Modifier.size(150.dp).offset(150.dp, 150.dp), Color.Blue)
            }
        }

The code looks good to me.

[igordmn]

I tried this strange example with useInteropBlending = true on Windows:

        Box {
            if (red) {
                Box(Modifier.size(150.dp).offset(0.dp, 0.dp).background(Color.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) {
                Box(Modifier.size(150.dp).offset(150.dp, 150.dp).background(Color.Blue))
            }
        }

And sometimes it has a wrong ordering:

Sometimes correct:

Is it expected or is it a bug?

[MatkovIvan]

A bug. Fixed by adding validate/repaint after adding of interop (this PR) + Fix from #1147