Introduce ComposeViewport function that renders content in parent con…

…tainer (#1211)
JetBrains · Mar 21, 2024 · 5741ad4 · 5741ad4
1 parent be54485
commit 5741ad4
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 36 deletions.
diff --git a/compose/mpp/demo/src/jsMain/kotlin/androidx/compose/mpp/demo/main.js.kt b/compose/mpp/demo/src/jsMain/kotlin/androidx/compose/mpp/demo/main.js.kt
@@ -2,13 +2,13 @@ package androidx.compose.mpp.demo
 
 import androidx.compose.runtime.remember
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
 import org.jetbrains.skiko.wasm.onWasmReady
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     onWasmReady {
-        CanvasBasedWindow("Compose/JS sample", canvasElementId = "canvas1") {
+        ComposeViewport(viewportContainer = "composeApplication") {
             val app = remember { App() }
             app.Content()
         }

diff --git a/compose/mpp/demo/src/jsMain/resources/index.html b/compose/mpp/demo/src/jsMain/resources/index.html
@@ -1,18 +1,32 @@
+<!--
+  ~ 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.
+  -->
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>compose multiplatform web demo</title>
-    <script src="skiko.js"> </script>
+    <meta name=“viewport” content=“width=device-width, initial-scale=1.0">
+    <title>Compose JS Demo</title>
     <link type="text/css" rel="stylesheet" href="styles.css">
+    <script src="skiko.js"> </script>
+    <script src="demo.js"> </script>
 </head>
 
 <body>
-    <h1>compose multiplatform web demo</h1>
-    <div>
-        <canvas id="canvas1"></canvas>
-    </div>
-    <script src="demo.js"> </script>
+<h1>compose multiplatform js demo</h1>
+<div id="composeApplication"/>
 </body>
 </html>
diff --git a/compose/mpp/demo/src/jsMain/resources/styles.css b/compose/mpp/demo/src/jsMain/resources/styles.css
@@ -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.
+ */
+
+
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+h1 {
+    padding: 0 16px;
+    font-size: 2em;
+}
+
+#composeApplication {
+ width: 100%;
+ height: 100%;
+}
diff --git a/compose/mpp/demo/src/wasmJsMain/kotlin/androidx/compose/mpp/demo/main.js.kt b/compose/mpp/demo/src/wasmJsMain/kotlin/androidx/compose/mpp/demo/main.js.kt
@@ -19,11 +19,11 @@ package androidx.compose.mpp.demo
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
-    CanvasBasedWindow("Compose/JS sample", canvasElementId = "canvas1") {
+    ComposeViewport(viewportContainer = "composeApplication") {
         val app = remember { App() }
         app.Content()
     }

diff --git a/compose/mpp/demo/src/wasmJsMain/resources/index.html b/compose/mpp/demo/src/wasmJsMain/resources/index.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright 2023 The Android Open Source Project
+  ~ 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.
@@ -18,24 +18,14 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>compose wasm web demo</title>
-    <script src="demo.js"> </script>
+    <meta name=“viewport” content=“width=device-width, initial-scale=1.0">
+    <title>Compose Wasm Demo</title>
     <link type="text/css" rel="stylesheet" href="styles.css">
-
-    <style>
-        html, body {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-        }
-    </style>
+    <script src="demo.js"> </script>
 </head>
 
 <body>
-    <h1>compose wasm web demo</h1>
-    <canvas id="canvas1"></canvas>
+    <h1>compose multiplatform wasm demo</h1>
+    <div id="composeApplication"/>
 </body>
 </html>
diff --git a/compose/mpp/demo/src/wasmJsMain/resources/styles.css b/compose/mpp/demo/src/wasmJsMain/resources/styles.css
@@ -1,5 +1,5 @@
 /*
- * Copyright 2023 The Android Open Source Project
+ * 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.
@@ -14,7 +14,21 @@
  * limitations under the License.
  */
 
-canvas {
-    border: 1px solid black;
+
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+h1 {
+    padding: 0 16px;
+    font-size: 2em;
 }
 
+#composeApplication {
+ width: 100%;
+ height: 100%;
+}
diff --git a/compose/ui/ui/src/webCommonW3C/kotlin/androidx/compose/ui/window/ComposeWindow.js.kt b/compose/ui/ui/src/webCommonW3C/kotlin/androidx/compose/ui/window/ComposeWindow.js.kt
@@ -52,6 +52,7 @@ import org.jetbrains.skiko.SkikoKeyboardEvent
 import org.jetbrains.skiko.SkikoKeyboardEventKind
 import org.jetbrains.skiko.SkikoPointerEventKind
 import org.w3c.dom.AddEventListenerOptions
+import org.w3c.dom.Element
 import org.w3c.dom.HTMLCanvasElement
 import org.w3c.dom.HTMLStyleElement
 import org.w3c.dom.HTMLTitleElement
@@ -83,7 +84,7 @@ private interface ComposeWindowState {
     }
 }
 
-private class DefaultWindowState : ComposeWindowState {
+private class DefaultWindowState(private val viewportContainer: Element) : ComposeWindowState {
     private val channel = Channel<IntSize>(CONFLATED)
 
     override fun init() {
@@ -99,8 +100,7 @@ private class DefaultWindowState : ComposeWindowState {
     }
 
     private fun getParentContainerBox(): IntSize {
-        val documentElement = document.documentElement ?: return IntSize(0, 0)
-        return IntSize(documentElement.clientWidth, documentElement.clientHeight)
+        return IntSize(viewportContainer.clientWidth, viewportContainer.clientHeight)
     }
 
     private fun initMediaEventListener(handler: (Double) -> Unit) {
@@ -330,6 +330,41 @@ fun CanvasBasedWindow(
     ComposeWindow(
         canvas = canvas,
         content = content,
-        state = if (requestResize == null) DefaultWindowState() else ComposeWindowState.createFromLambda(requestResize)
+        state = if (requestResize == null) DefaultWindowState(document.documentElement!!) else ComposeWindowState.createFromLambda(requestResize)
     )
-}
+}
+
+/**
+ * EXPERIMENTAL! Might be deleted or changed in the future!
+ *
+ * Creates the composition in HTML canvas created in parent container identified by [viewportContainer] id.
+ * This size of canvas is adjusted with the size of the container
+ */
+fun ComposeViewport(
+    viewportContainer: String,
+    content: @Composable () -> Unit = { }
+) {
+    ComposeViewport(document.getElementById(viewportContainer)!!, content)
+}
+
+/**
+ * EXPERIMENTAL! Might be deleted or changed in the future!
+ *
+ * Creates the composition in HTML canvas created in parent container identified by [viewportContainer] Element.
+ * This size of canvas is adjusted with the size of the container
+ */
+fun ComposeViewport(
+    viewportContainer: Element,
+    content: @Composable () -> Unit = { }
+) {
+    val canvas = document.createElement("canvas") as HTMLCanvasElement
+    canvas.setAttribute("tabindex", "0")
+
+    viewportContainer.appendChild(canvas)
+
+    ComposeWindow(
+        canvas = canvas,
+        content = content,
+        state = DefaultWindowState(viewportContainer)
+    )
+}