From f871473d8b075468169c69a931fd3c918cb9d689 Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Wed, 5 Jan 2022 12:47:41 +0100
Subject: [PATCH] Attempt to have a reusable skiko block in HTMLCanvasElement -
 but so far it's failing

---
 .../src/jsMain/kotlin/com/sample/Main.kt      | 35 ++--------------
 .../org/jetbrains/compose/skiko/skiko.kt      | 42 ++++++-------------
 2 files changed, 16 insertions(+), 61 deletions(-)

diff --git a/examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt b/examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt
index cd391fe342..52f802daff 100644
--- a/examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt
+++ b/examples/web-skia/src/jsMain/kotlin/com/sample/Main.kt
@@ -1,25 +1,14 @@
 package org.jetbrains.compose.sample
 
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Button
-import androidx.compose.material.Switch
 import androidx.compose.material.Text
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.ComposeCanvas
 import org.jetbrains.compose.web.dom.Canvas
 import org.jetbrains.compose.web.renderComposable
+import org.jetbrains.compose.web.skiko.skiko
 import org.jetbrains.skiko.wasm.onWasmReady
 
 fun main() {
     onWasmReady {
         renderComposable(rootElementId = "root") {
-            var switched by remember { mutableStateOf(false) }
             Canvas({
                 attr("width", "300")
                 attr("height", "300")
@@ -27,26 +16,8 @@ fun main() {
                     property("outline", "1px solid black")
                 }
             }) {
-                DomSideEffect { canvas ->
-                    ComposeCanvas(canvas).apply {
-                        setContent {
-                            Column {
-                                Button(
-                                    modifier = Modifier.padding(16.dp),
-                                    onClick = {
-                                        println("Button clicked!")
-                                    }
-                                ) {
-                                    Text(if (switched) "🦑 press 🐙" else "Press me!")
-                                }
-                                Switch(
-                                    modifier = Modifier.padding(16.dp),
-                                    checked = switched,
-                                    onCheckedChange = { switched = it }
-                                )
-                            }
-                        }
-                    }
+                skiko {
+                    Text("Press me!")
                 }
             }
         }
diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/skiko/skiko.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/skiko/skiko.kt
index 40f88a6afd..d5be2262e0 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/skiko/skiko.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/skiko/skiko.kt
@@ -5,35 +5,19 @@
 
 package org.jetbrains.compose.web.skiko
 
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.window.ComposeCanvas
 import org.jetbrains.compose.web.dom.ElementScope
-import org.w3c.dom.HTMLCanvasElement
 import org.jetbrains.skiko.wasm.onWasmReady
-import androidx.compose.ui.window.Window
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
-import androidx.compose.material.Button
-import androidx.compose.material.Text
-import androidx.compose.foundation.layout.padding
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import org.w3c.dom.HTMLCanvasElement
 
-fun ElementScope<HTMLCanvasElement>.ping() {
-    onWasmReady {
-//        Window("whatevs") {
-//            var switched by remember { mutableStateOf(false) }
-//            Button(
-//                modifier = Modifier.padding(16.dp),
-//                onClick = {
-//                    println("Button clicked!")
-//                    switched = !switched
-//                }
-//            ) {
-//                Text(if (switched) "🦑 press 🐙" else "Press me!")
-//            }
-//        }
-    }
-}
+@Composable
+fun ElementScope<HTMLCanvasElement>.skiko(block: @Composable () -> Unit) {
+//    onWasmReady {
+        DomSideEffect { canvas ->
+            ComposeCanvas(canvas).apply {
+                setContent(block)
+            }
+        }
+//    }
+}
\ No newline at end of file