iOS SingleLayerComposeScene with feature flag #920

dima-avdeev-jb · 2023-12-04T06:49:56Z

Added basic iOS implementation for SingleLayerComposeScene.
Added feature flag to turn it on:

@OptIn(ExperimentalComposeApi::class)
ComposeUIViewController(
    configure = {
        platformLayers = true
    }
) {
    Text("Some Compose code")
}

Where are known bug with device rorattion and touch handling.
We need to merge this changes for future cooperative work. This PR contains big architecture changes in iOS ui:ui module.
By default feauture flag is turned off. And stable way to layout Popups and Dialogs will be used.

Also fixes Issue with password TextField (JetBrains/compose-multiplatform#2988)

dima-avdeev-jb · 2023-12-04T18:08:31Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/platform/SkikoUITextInputTraits.kt

+}
+
+internal fun getUITextInputTraits(currentImeOptions: ImeOptions?) =


Copied it as is

dima-avdeev-jb · 2023-12-04T18:09:29Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/platform/SkikoUITextInputTraits.kt

+            when (currentImeOptions?.keyboardType) {
+                KeyboardType.Password, KeyboardType.NumberPassword -> UITextContentTypePassword
+                KeyboardType.Email -> UITextContentTypeEmailAddress
+                KeyboardType.Phone -> UITextContentTypeTelephoneNumber
+                else -> null
+            }
+
+        override fun isSecureTextEntry(): Boolean =
+            when (currentImeOptions?.keyboardType) {
+                KeyboardType.Password, KeyboardType.NumberPassword -> true
+                else -> false
+            }


It fixes password TextField issue JetBrains/compose-multiplatform#2988

dima-avdeev-jb · 2023-12-04T18:11:22Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/platform/UIKitTextInputService.uikit.kt

+        textUIView = IntermediateTextInputUIView(
+            keyboardEventHandler = keyboardEventHandler,
+        ).also {
+            rootView.addSubview(it)
+            it.translatesAutoresizingMaskIntoConstraints = false
+            NSLayoutConstraint.activateConstraints(
+                listOf(
+                    it.leftAnchor.constraintEqualToAnchor(rootView.leftAnchor),
+                    it.rightAnchor.constraintEqualToAnchor(rootView.rightAnchor),
+                    it.topAnchor.constraintEqualToAnchor(rootView.topAnchor),
+                    it.bottomAnchor.constraintEqualToAnchor(rootView.bottomAnchor),
+                ).also { 
+                    constraints = it
+                }
+            )
+        }
+        textUIView?.input = createSkikoInput(value)
+        textUIView?.inputTraits = getUITextInputTraits(imeOptions)


textUIView it is invisible UIView with userInteraction=false.
But this textUIView can becomeFirstResponder() when Compose TextField comes to focus.

dima-avdeev-jb · 2023-12-04T18:12:48Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/platform/UIKitTextInputService.uikit.kt

+        constraints?.let {
+            NSLayoutConstraint.deactivateConstraints(it)
+        }


Maybe we can not deactivateConstraints when view removes from super view?
But I think it is good to have explicit deactivation code.

Constraints across the boundaries of detachment point are deactivated automatically.

removed this code

dima-avdeev-jb · 2023-12-04T18:13:59Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/platform/UIKitTextInputService.uikit.kt

-        _showSoftwareKeyboard()
+        textUIView?.let {
+            focusStack.pushAndFocus(it)
+        }


Keyboard appearence logic goes to FocusStack

dima-avdeev-jb · 2023-12-04T22:15:32Z

...ui/ui/src/uikitMain/kotlin/androidx/compose/ui/uikit/ComposeUIViewControllerConfiguration.kt

+    @ExperimentalComposeApi
+    var platformLayers: Boolean = false


Temporary experimental feature flag.
When we fully migrates to SingleLayerComposeScene, this flag will be removed

dima-avdeev-jb · 2023-12-04T22:21:02Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/IntermediateTextInputUIView.kt

+internal class IntermediateTextInputUIView(
+    private val keyboardEventHandler: KeyboardEventHandler,
+) : UIView(frame = CGRectZero.readValue()),
+    UIKeyInputProtocol, UITextInputProtocol {


This IntermediateTextInputUIView helps to solve password TextField problem.
Now when Compose TextField will be focused - this IntermediateTextInputUIView will be created. And removed after unfocus.
So, each new TextField keyboard behavior will be configured from scratch without cahces.

Almost all of implementation just moved from SkikoUIView. (Previously SkikoUIView was implement this behavior)

dima-avdeev-jb · 2023-12-04T22:28:43Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/KeyboardVisibilityListener.kt

+    fun keyboardWillHide(arg: NSNotification)
+}
+
+internal class KeyboardVisibilityListenerImpl(


Implementation of this class just copied moved from ComposeWindow.kt

dima-avdeev-jb · 2023-12-04T22:30:46Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/MetalRedrawer.kt

@@ -191,6 +191,7 @@ internal class InflightCommandBuffers(
 internal class MetalRedrawer(
    private val metalLayer: CAMetalLayer,
    private val callbacks: MetalRedrawerCallbacks,
+    private val transparentBackground: Boolean,


We need transparentBackground for transparent Dialogs (with rounded corners for example) and Popup's like TextFieldSelectionHandle.
But first root ComposeScene will be rendered opaque by default. It will be transparent only with usage of UIKitView as before.

dima-avdeev-jb · 2023-12-04T22:33:46Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/RootViewControllerState.kt

+import platform.UIKit.UIView
+import platform.UIKit.UIViewController
+
+internal interface RootViewControllerState<RootView, SceneView> {


We need generics for smoother migration from UIView as scene view representation to UIViewController

Let's add TODO/comment that this is temporary for transition

We decided to remove generic params. And just inlined UIViewController as RootView and UIView as SceneView
And naming also changes to Bridges suffix

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/IntermediateTextInputUIView.kt

MatkovIvan · 2023-12-05T09:59:22Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/IntermediateTextInputUIView.kt

+private fun IntRange.toUITextRange(): UITextRange =
+    IntermediateTextRange(start = start, end = endInclusive + 1)
+
+private fun NSWritingDirection.directionToStr() =


It is Long type. So better to stay it directionToStr()

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/IntermediateTextInputUIView.kt

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/LayerState.kt

MatkovIvan · 2023-12-05T10:27:09Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/SkikoUIView.kt

-    var input: IOSSkikoInput? = null
-    var inputTraits: SkikoUITextInputTraits = object : SkikoUITextInputTraits {}
+    var onAttachedToWindow: (() -> Unit)? = null
+    private val _isReadyToShowContent: MutableState<Boolean> = mutableStateOf(false)


As discussed - it's better to get rid of compose state primitives inside such classes

For now it is better to leave it here

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/SkikoUIView.kt

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/SkikoUIViewDelegate.kt

MatkovIvan · 2023-12-05T10:31:43Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/SkikoUIViewDelegate.kt

+        // The calculation is split in two instead of
+        // `(targetTimestamp * 1e9).toLong()`
+        // to avoid losing precision for fractional part


Please extract such things to separate functions. It should not be right in the render function

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/SkikoUIViewDelegate.kt

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/CreateSceneState.kt

MatkovIvan · 2023-12-07T13:00:11Z

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/platform/IOSPlatformContextImpl.uikit.kt

+
+internal class IOSPlatformContextImpl(
+    inputServices: PlatformTextInputService,
+    override val textToolbar: TextToolbar,


It looks like it's always the same as the first parameter

Yes, but it is different interfaces. So better to pass it as is.

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/ComposeUIViewController.uikit.kt

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/ComposeSceneMediator.uikit.kt

dima-avdeev-jb changed the title ~~iOS SingleLayerComposeScene by feature flag~~ iOS SingleLayerComposeScene with feature flag Dec 4, 2023

dima-avdeev-jb commented Dec 5, 2023

View reviewed changes

dima-avdeev-jb requested review from MatkovIvan and elijah-semyonov December 5, 2023 06:15

dima-avdeev-jb marked this pull request as ready for review December 5, 2023 06:35

MatkovIvan reviewed Dec 5, 2023

View reviewed changes

compose/ui/ui/src/uikitMain/kotlin/androidx/compose/ui/window/CreateSceneState.kt Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

MatkovIvan reviewed Dec 7, 2023

View reviewed changes

MatkovIvan approved these changes Dec 8, 2023

View reviewed changes

iOS SingleLayerComposeScene with feature flag

76cfbe7

dima-avdeev-jb force-pushed the dima.avdeev/ios-single-layer-compose-scene branch from 24334fd to 76cfbe7 Compare December 9, 2023 05:57

dima-avdeev-jb merged commit 5b153cc into jb-main Dec 9, 2023
4 checks passed

dima-avdeev-jb deleted the dima.avdeev/ios-single-layer-compose-scene branch December 9, 2023 06:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iOS SingleLayerComposeScene with feature flag #920

iOS SingleLayerComposeScene with feature flag #920

dima-avdeev-jb commented Dec 4, 2023 •

edited

dima-avdeev-jb Dec 4, 2023

dima-avdeev-jb Dec 4, 2023

dima-avdeev-jb Dec 4, 2023

dima-avdeev-jb Dec 4, 2023

elijah-semyonov Dec 5, 2023

dima-avdeev-jb Dec 5, 2023

dima-avdeev-jb Dec 4, 2023

dima-avdeev-jb Dec 4, 2023

dima-avdeev-jb Dec 4, 2023

dima-avdeev-jb Dec 4, 2023

dima-avdeev-jb Dec 4, 2023

dima-avdeev-jb Dec 4, 2023

MatkovIvan Dec 5, 2023

dima-avdeev-jb Dec 5, 2023

MatkovIvan Dec 5, 2023

dima-avdeev-jb Dec 5, 2023

MatkovIvan Dec 5, 2023

dima-avdeev-jb Dec 6, 2023

MatkovIvan Dec 5, 2023

This comment was marked as resolved.

MatkovIvan Dec 7, 2023

dima-avdeev-jb Dec 8, 2023

		}

		internal fun getUITextInputTraits(currentImeOptions: ImeOptions?) =

iOS SingleLayerComposeScene with feature flag #920

iOS SingleLayerComposeScene with feature flag #920

Conversation

dima-avdeev-jb commented Dec 4, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as resolved.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dima-avdeev-jb commented Dec 4, 2023 •

edited