Migrate to ComposeViewport

ComposeGears · Oct 14, 2024 · 63d257d · 63d257d
1 parent eef18f4
commit 63d257d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/example/app/composeApp/src/wasmJsMain/kotlin/composegears/tiamat/example/main.kt b/example/app/composeApp/src/wasmJsMain/kotlin/composegears/tiamat/example/main.kt
@@ -13,15 +13,15 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import androidx.compose.ui.window.CanvasBasedWindow
+import androidx.compose.ui.window.ComposeViewport
 import composegears.tiamat.sample.koin.KoinLib
 
 external fun onLoadFinished()
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     KoinLib.start()
-    CanvasBasedWindow(canvasElementId = "TiamatTarget") {
+    ComposeViewport(viewportContainerId = "TiamatTarget") {
         LaunchedEffect(Unit) {
             onLoadFinished()
         }
@@ -32,7 +32,7 @@ fun main() {
                 color = Color.White,
                 fontSize = 20.sp,
                 fontWeight = FontWeight.Bold,
-                text = "Pre Alpha (Wasm)",
+                text = "Wasm Alpha",
             )
         }
     }

diff --git a/example/app/composeApp/src/wasmJsMain/resources/index.html b/example/app/composeApp/src/wasmJsMain/resources/index.html
@@ -24,7 +24,7 @@ <h3>Your browser doesn't support Wasm 🌝</h3>
         <h5>For more information, see <a href="https://kotl.in/wasm-help" style="color: #375fad">https://kotl.in/wasm-help</a>.
         </h5>
     </div>
-    <canvas id="TiamatTarget"></canvas>
+    <div id="TiamatTarget"></div>
 </div>
 </body>
 </html>
diff --git a/example/app/composeApp/src/wasmJsMain/resources/style.css b/example/app/composeApp/src/wasmJsMain/resources/style.css
@@ -12,6 +12,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
 }
 
 #warning {