Browse Source

skiko calls onWasmReady inside of it

with_mpp_example
Shagen Ogandzhanian 3 years ago
parent
commit
f7b1b57b08
  1. 11
      examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt
  2. 7
      web/core/src/jsMain/kotlin/org/jetbrains/compose/skiko/skiko.kt

11
examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt

@ -8,6 +8,7 @@ import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.material.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
@ -362,6 +363,8 @@ fun SomeCanvas() {
// property("margin", "0 auto") // property("margin", "0 auto")
} }
}) { }) {
Text("xxxx")
skiko { skiko {
val radius = remember { Animatable(10f) } val radius = remember { Animatable(10f) }
LaunchedEffect(radius) { LaunchedEffect(radius) {
@ -374,6 +377,8 @@ fun SomeCanvas() {
) )
} }
Text(text = "Xxx")
Canvas( Canvas(
modifier = Modifier modifier = Modifier
.size(400.dp) .size(400.dp)
@ -460,9 +465,7 @@ fun App() {
} }
fun main() { fun main() {
onWasmReady { renderComposable(rootElementId = "root") {
renderComposable(rootElementId = "root") { App()
App()
}
} }
} }

7
web/core/src/jsMain/kotlin/org/jetbrains/compose/skiko/skiko.kt

@ -8,12 +8,15 @@ package org.jetbrains.compose.web.skiko
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.window.ComposeCanvas import androidx.compose.ui.window.ComposeCanvas
import org.jetbrains.compose.web.dom.ElementScope import org.jetbrains.compose.web.dom.ElementScope
import org.jetbrains.skiko.wasm.onWasmReady
import org.w3c.dom.HTMLCanvasElement import org.w3c.dom.HTMLCanvasElement
@Composable @Composable
fun ElementScope<HTMLCanvasElement>.skiko(block: @Composable () -> Unit) { fun ElementScope<HTMLCanvasElement>.skiko(block: @Composable () -> Unit) {
DomSideEffect { canvas -> DomSideEffect { canvas ->
val skikoCanvas = ComposeCanvas(canvas) onWasmReady {
skikoCanvas.setContent(block) val skikoCanvas = ComposeCanvas(canvas)
skikoCanvas.setContent(block)
}
} }
} }
Loading…
Cancel
Save