GitHub-JetBrains
/
compose-jb
mirror of https://github.com/JetBrains/compose-jb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Port all web examples to ComposeViewport (#5378) 

This PR prepares examples to 1.9.0 where CanvasBasedWindow is deprecated

## Testing
build all examples

## Release Notes
N/A
ok/jetstream3_hotfix v1.9.0+dev2790
Shagen Ogandzhanian 4 months ago committed by GitHub
parent
5eaf42c6f9
commit
766ac556e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 116 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      examples/chat/jsApp/src/jsMain/kotlin/main.js.kt
  2. 4
      examples/chat/jsApp/src/jsMain/resources/index.html
  3. 13
      examples/chat/jsApp/src/jsMain/resources/styles.css
  4. 4
      examples/graphics-2d/jsApp/src/jsMain/kotlin/main.js.kt
  5. 4
      examples/graphics-2d/jsApp/src/jsMain/resources/index.html
  6. 15
      examples/graphics-2d/jsApp/src/jsMain/resources/styles.css
  7. 4
      examples/imageviewer/webApp/src/jsMain/kotlin/Main.js.kt
  8. 56
      examples/imageviewer/webApp/src/jsMain/resources/index.html
  9. 4
      examples/imageviewer/webApp/src/wasmJsMain/kotlin/Main.wasm.kt
  10. 7
      examples/imageviewer/webApp/src/wasmJsMain/resources/index.html
  11. 4
      examples/jetsnack/web/src/wasmJsMain/kotlin/Main.kt
  12. 5
      examples/jetsnack/web/src/wasmJsMain/resources/index.html
  13. 6
      examples/nav_cupcake/composeApp/src/wasmJsMain/kotlin/main.kt
  14. 19
      examples/nav_cupcake/composeApp/src/wasmJsMain/resources/index.html

4
examples/chat/jsApp/src/jsMain/kotlin/main.js.kt
Unescape View File

@ -1,14 +1,14 @@
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.window.CanvasBasedWindow import androidx.compose.ui.window.ComposeViewport
import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.ExperimentalComposeUiApi
import org.jetbrains.skiko.wasm.onWasmReady import org.jetbrains.skiko.wasm.onWasmReady
@OptIn(ExperimentalComposeUiApi::class) @OptIn(ExperimentalComposeUiApi::class)
fun main() { fun main() {
onWasmReady { onWasmReady {
CanvasBasedWindow(title = "Chat") { ComposeViewport("composeApp") {
Column(modifier = Modifier.fillMaxSize()) { Column(modifier = Modifier.fillMaxSize()) {
MainView() MainView()
} }

4
examples/chat/jsApp/src/jsMain/resources/index.html
Unescape View File

@ -7,9 +7,7 @@
<link type="text/css" rel="stylesheet" href="styles.css" /> <link type="text/css" rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<div> <div id="composeApp">
<canvas id="ComposeTarget" width="600" height="600"></canvas>
</div>
<script src="jsApp.js"> </script> <script src="jsApp.js"> </script>
</body> </body>
</html> </html>

13
examples/chat/jsApp/src/jsMain/resources/styles.css
Unescape View File

@ -1,8 +1,13 @@
#root { html, body {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
margin: 0;
padding: 0;
background-color: white;
overflow: hidden;
} }
#root > .compose-web-column > div { #composeApp {
position: relative; width: 100%;
} height: 100%;
}

4
examples/graphics-2d/jsApp/src/jsMain/kotlin/main.js.kt
Unescape View File

@ -1,11 +1,11 @@
import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.CanvasBasedWindow import androidx.compose.ui.window.ComposeViewport
import org.jetbrains.skiko.wasm.onWasmReady import org.jetbrains.skiko.wasm.onWasmReady
@OptIn(ExperimentalComposeUiApi::class) @OptIn(ExperimentalComposeUiApi::class)
fun main() { fun main() {
onWasmReady { onWasmReady {
CanvasBasedWindow(title = "Graphics2D") { ComposeViewport("composeApp") {
MainView() MainView()
} }
} }

4
examples/graphics-2d/jsApp/src/jsMain/resources/index.html
Unescape View File

@ -8,9 +8,7 @@
</head> </head>
<body> <body>
<h1>compose multiplatform web demo</h1> <h1>compose multiplatform web demo</h1>
<div> <div id="composeApp" />
<canvas id="ComposeTarget" width="800" height="600"></canvas>
</div>
<script src="jsApp.js"> </script> <script src="jsApp.js"> </script>
</body> </body>
</html> </html>

15
examples/graphics-2d/jsApp/src/jsMain/resources/styles.css
Unescape View File

@ -1,8 +1,13 @@
#root { html, body {
width: 100%; width: 100%;
height: 100vh; height: 100%;
margin: 0;
padding: 0;
background-color: white;
overflow: hidden;
} }
#root > .compose-web-column > div { #composeApp {
position: relative; width: 100%;
} height: 100%;
}

4
examples/imageviewer/webApp/src/jsMain/kotlin/Main.js.kt
Unescape View File

@ -1,11 +1,11 @@
import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.CanvasBasedWindow import androidx.compose.ui.window.ComposeViewport
import org.jetbrains.skiko.wasm.onWasmReady import org.jetbrains.skiko.wasm.onWasmReady
@OptIn(ExperimentalComposeUiApi::class) @OptIn(ExperimentalComposeUiApi::class)
fun main() { fun main() {
onWasmReady { onWasmReady {
CanvasBasedWindow("ImageViewer") { ComposeViewport("composeApp") {
ImageViewerWeb() ImageViewerWeb()
} }
} }

56
examples/imageviewer/webApp/src/jsMain/resources/index.html
Unescape View File

@ -5,9 +5,63 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ImageViewer</title> <title>ImageViewer</title>
<script src="skiko.js"> </script> <script src="skiko.js"> </script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: white;
overflow: hidden;
}
#warning {
position: absolute;
top: 100px;
left: 100px;
max-width: 830px;
z-index: 100;
background-color: white;
font-size: initial;
display: none;
}
#warning li {
padding-bottom: 15px;
}
#warning span.code {
font-family: monospace;
}
ul {
margin-top: 0;
margin-bottom: 15px;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
background-color: white;
font-size: initial;
}
#close {
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
}
#composeApp {
width: 100%;
height: 100%;
}
</style>
</head> </head>
<body> <body>
<canvas id="ComposeTarget"></canvas> <div id="composeApp" />
<script src="imageviewer.js"> </script> <script src="imageviewer.js"> </script>
</body> </body>
</html> </html>

4
examples/imageviewer/webApp/src/wasmJsMain/kotlin/Main.wasm.kt
Unescape View File

@ -1,5 +1,5 @@
import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.CanvasBasedWindow import androidx.compose.ui.window.ComposeViewport
import org.jetbrains.compose.resources.ExperimentalResourceApi import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.resources.configureWebResources import org.jetbrains.compose.resources.configureWebResources
@ -8,7 +8,7 @@ fun main() {
configureWebResources { configureWebResources {
resourcePathMapping { path -> "./$path" } resourcePathMapping { path -> "./$path" }
} }
CanvasBasedWindow("ImageViewer") { ComposeViewport("composeApp") {
ImageViewerWeb() ImageViewerWeb()
} }
} }

7
examples/imageviewer/webApp/src/wasmJsMain/resources/index.html
Unescape View File

@ -53,10 +53,15 @@
right: 10px; right: 10px;
cursor: pointer; cursor: pointer;
} }
#composeApp {
width: 100%;
height: 100%;
}
</style> </style>
</head> </head>
<body> <body>
<canvas id="ComposeTarget"></canvas> <div id="composeApp" />
<div id="warning"> <div id="warning">
⚠️ Please make sure that your runtime environment supports the latest version of Wasm GC and Exception-Handling proposals. ⚠️ Please make sure that your runtime environment supports the latest version of Wasm GC and Exception-Handling proposals.

4
examples/jetsnack/web/src/wasmJsMain/kotlin/Main.kt
Unescape View File

@ -7,7 +7,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.platform.Font import androidx.compose.ui.text.platform.Font
import androidx.compose.ui.window.CanvasBasedWindow import androidx.compose.ui.window.ComposeViewport
import com.example.jetsnack.JetSnackAppEntryPoint import com.example.jetsnack.JetSnackAppEntryPoint
import com.example.jetsnack.ui.components.loadImage import com.example.jetsnack.ui.components.loadImage
import com.example.jetsnack.ui.components.toByteArray import com.example.jetsnack.ui.components.toByteArray
@ -23,7 +23,7 @@ fun main() {
// same as default - this is not necessary to add here. It's here to show this feature // same as default - this is not necessary to add here. It's here to show this feature
resourcePathMapping { path -> "./$path" } resourcePathMapping { path -> "./$path" }
} }
CanvasBasedWindow("JetSnack", canvasElementId = "jetsnackCanvas") { ComposeViewport("jetsnackApp") {
var loading: Boolean by remember { mutableStateOf(true) } var loading: Boolean by remember { mutableStateOf(true) }
if (loading) { if (loading) {

5
examples/jetsnack/web/src/wasmJsMain/resources/index.html
Unescape View File

@ -56,7 +56,10 @@
</style> </style>
</head> </head>
<body> <body>
<canvas id="jetsnackCanvas"></canvas>
<div id="jetsnackApp" style="width: 100%; height: 100%; outline: 2px solid #c31414">
<canvas id="jetsnackCanvas"></canvas>
</div>
<div id="warning"> <div id="warning">
⚠️ Please make sure that your runtime environment supports the latest version of Wasm GC and Exception-Handling proposals. ⚠️ Please make sure that your runtime environment supports the latest version of Wasm GC and Exception-Handling proposals.

6
examples/nav_cupcake/composeApp/src/wasmJsMain/kotlin/main.kt
Unescape View File

@ -1,7 +1,7 @@
import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.CanvasBasedWindow import androidx.compose.ui.window.ComposeViewport
@OptIn(ExperimentalComposeUiApi::class) @OptIn(ExperimentalComposeUiApi::class)
fun main() { fun main() {
CanvasBasedWindow(canvasElementId = "ComposeTarget") { App() } ComposeViewport("composeApp") { App() }
} }

19
examples/nav_cupcake/composeApp/src/wasmJsMain/resources/index.html
Unescape View File

@ -5,8 +5,23 @@
<title>Compose App</title> <title>Compose App</title>
<script type="application/javascript" src="skiko.js"></script> <script type="application/javascript" src="skiko.js"></script>
<script type="application/javascript" src="composeApp.js"></script> <script type="application/javascript" src="composeApp.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: white;
overflow: hidden;
}
#composeApp {
width: 100%;
height: 100%;
}
</style>
</head> </head>
<body> <body>
<canvas id="ComposeTarget"></canvas> <div id="composeApp" />
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save