Merge pull request #215 from Qawaz/web

web module working and added

gradle.properties

@@ -15,3 +15,4 @@ kotlin.code.style=official
 org.gradle.jvmargs=-Xmx2048M -Dkotlin.daemon.jvm.options\="-Xmx2048M"
 android.useAndroidX=true
 
+org.jetbrains.compose.experimental.jscanvas.enabled=true

reorderable/build.gradle.kts

@@ -12,6 +12,10 @@ version = "0.9.7"
 
 kotlin {
     jvm()
+    js(IR) {
+        browser()
+        binaries.executable()
+    }
     sourceSets {
         val commonMain by getting {
             dependencies {

settings.gradle.kts

@@ -13,4 +13,5 @@ rootProject.name = "ComposeReorderList"
 include(":android")
 include(":desktop")
 include(":reorderable")
+include(":web")
 

web/.gitignore

@@ -0,0 +1 @@
+/build

web/build.gradle.kts

@@ -0,0 +1,57 @@
+import org.jetbrains.compose.compose
+import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
+import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension
+
+plugins {
+    kotlin("multiplatform")
+    id("org.jetbrains.compose")
+}
+
+repositories {
+    google()
+    mavenCentral()
+    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+}
+
+kotlin {
+    js(IR) {
+        browser {
+            testTask {
+                testLogging.showStandardStreams = true
+                useKarma {
+                    useChromeHeadless()
+                    useFirefox()
+                }
+            }
+        }
+        binaries.executable()
+    }
+    sourceSets {
+        val jsMain by getting {
+            dependencies {
+                implementation(compose.web.core)
+                implementation(compose.runtime)
+                implementation(compose.material)
+                implementation(project(":reorderable"))
+            }
+        }
+        val jsTest by getting {
+            dependencies {
+                implementation(kotlin("test-js"))
+            }
+        }
+    }
+}
+
+compose.experimental {
+    web.application {}
+}
+
+afterEvaluate {
+    rootProject.extensions.configure<NodeJsRootExtension> {
+//        versions.webpackDevServer.version = "4.0.0"
+//        versions.webpackCli.version = "4.9.0"
+//        nodeVersion = "16.0.0"
+    }
+}

web/src/jsMain/kotlin/BrowserViewportWindow.kt

@@ -0,0 +1,77 @@
+// From Slack by OliverO
+// See: https://kotlinlang.slack.com/archives/C01F2HV7868/p1660083429206369?thread_ts=1660083398.571449&cid=C01F2HV7868
+
+@file:Suppress(
+    "INVISIBLE_MEMBER",
+    "INVISIBLE_REFERENCE",
+    "EXPOSED_PARAMETER_TYPE"
+) // WORKAROUND: ComposeWindow and ComposeLayer are internal
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.window.ComposeWindow
+import kotlinx.browser.document
+import kotlinx.browser.window
+import org.w3c.dom.HTMLCanvasElement
+import org.w3c.dom.HTMLStyleElement
+import org.w3c.dom.HTMLTitleElement
+
+private const val CANVAS_ELEMENT_ID = "ComposeTarget" // Hardwired into ComposeWindow
+
+/**
+ * A Skiko/Canvas-based top-level window using the browser's entire viewport. Supports resizing.
+ */
+fun BrowserViewportWindow(
+    title: String = "Untitled",
+    content: @Composable ComposeWindow.() -> Unit
+) {
+    val htmlHeadElement = document.head!!
+    htmlHeadElement.appendChild(
+        (document.createElement("style") as HTMLStyleElement).apply {
+            type = "text/css"
+            appendChild(
+                document.createTextNode(
+                    """
+                    html, body {
+                        overflow: hidden;
+                        margin: 0 !important;
+                        padding: 0 !important;
+                    }
+                    #$CANVAS_ELEMENT_ID {
+                        outline: none;
+                    }
+                    """.trimIndent()
+                )
+            )
+        }
+    )
+
+    fun HTMLCanvasElement.fillViewportSize() {
+        setAttribute("width", "${window.innerWidth}")
+        setAttribute("height", "${window.innerHeight}")
+    }
+
+    val canvas = (document.getElementById(CANVAS_ELEMENT_ID) as HTMLCanvasElement).apply {
+        fillViewportSize()
+    }
+
+    ComposeWindow().apply {
+        window.addEventListener("resize", {
+            canvas.fillViewportSize()
+            layer.layer.attachTo(canvas)
+            val scale = layer.layer.contentScale
+            layer.setSize((canvas.width / scale).toInt(), (canvas.height / scale).toInt())
+            layer.layer.needRedraw()
+        })
+
+        // WORKAROUND: ComposeWindow does not implement `setTitle(title)`
+        val htmlTitleElement = (
+                htmlHeadElement.getElementsByTagName("title").item(0)
+                    ?: document.createElement("title").also { htmlHeadElement.appendChild(it) }
+                ) as HTMLTitleElement
+        htmlTitleElement.textContent = title
+
+        setContent {
+            content(this)
+        }
+    }
+}

web/src/jsMain/kotlin/main.js.kt

@@ -0,0 +1,86 @@
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.VerticalScrollbar
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Divider
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.unit.dp
+import org.burnoutcrew.reorderable.ReorderableItem
+import org.burnoutcrew.reorderable.detectReorder
+import org.burnoutcrew.reorderable.rememberReorderableLazyListState
+import org.burnoutcrew.reorderable.reorderable
+import org.jetbrains.skiko.wasm.onWasmReady
+
+fun main() {
+    onWasmReady {
+        BrowserViewportWindow("ComposeReorderableDemo") {
+            MaterialTheme {
+                Box(modifier = Modifier.fillMaxSize()) {
+                    VerticalReorderList()
+                }
+            }
+        }
+    }
+}
+
+
+@Composable
+fun VerticalReorderList() {
+    val items = remember { mutableStateOf(List(100) { it }) }
+    val state = rememberReorderableLazyListState(onMove = { from, to ->
+        items.value = items.value.toMutableList().apply {
+            add(to.index, removeAt(from.index))
+        }
+    })
+    Box {
+        LazyColumn(
+            state = state.listState,
+            modifier = Modifier.reorderable(state)
+        ) {
+            items(items.value, { it }) { item ->
+                ReorderableItem(state, orientationLocked = false, key = item) { isDragging ->
+                    val elevation = animateDpAsState(if (isDragging) 8.dp else 0.dp)
+                    Column(
+                        modifier = Modifier
+                            .shadow(elevation.value)
+                            .background(MaterialTheme.colors.surface)
+                    ) {
+                        Row(
+                            verticalAlignment = Alignment.CenterVertically,
+                            modifier = Modifier.padding(16.dp)
+                        ) {
+                            Image(
+                                imageVector = Icons.Filled.Menu,
+                                contentDescription = "",
+                                modifier = Modifier.detectReorder(state)
+                            )
+                            Text(
+                                text = item.toString(),
+                                modifier = Modifier.padding(start = 8.dp)
+                            )
+                        }
+                        Divider()
+                    }
+                }
+            }
+        }
+        VerticalScrollbar(
+            modifier = Modifier.align(Alignment.CenterEnd)
+                .fillMaxHeight(),
+            adapter = rememberScrollbarAdapter(state.listState)
+        )
+    }
+}

web/src/jsMain/resources/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ComposeReorderableDemo</title>
+    <script src="skiko.js"></script>
+    <link type="text/css" rel="stylesheet" href="styles.css"/>
+</head>
+<body>
+<div>
+    <canvas id="ComposeTarget" width="600" height="600"></canvas>
+</div>
+<script src="web.js"></script>
+</body>
+</html>

web/src/jsMain/resources/styles.css

@@ -0,0 +1,8 @@
+#root {
+    width: 100%;
+    height: 100vh;
+}
+
+#root > .compose-web-column > div {
+    position: relative;
+}