Skip to content

Commit 423a5cc

Browse files
bnormbnorm
committed
Fix web example rendering
1 parent 0841835 commit 423a5cc

File tree

6 files changed

+276
-27
lines changed

6 files changed

+276
-27
lines changed

‎examples/basic/src/wasmJsMain/kotlin/main.web.kt‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,10 @@ import androidx.compose.material.darkColors
33
import androidx.compose.ui.ExperimentalComposeUiApi
44
import androidx.compose.ui.window.ComposeViewport
55
import dev.bnorm.storyboard.easel.WebEasel
6-
import kotlinx.browser.document
7-
import org.w3c.dom.HTMLCanvasElement
86

97
@OptIn(ExperimentalComposeUiApi::class)
108
fun main() {
11-
val element = document.getElementById("ComposeTarget") as HTMLCanvasElement
12-
element.focus() // Focus is required for keyboard navigation.
13-
ComposeViewport(viewportContainer = element) {
9+
ComposeViewport("composeApp") {
1410
MaterialTheme(colors = darkColors()) {
1511
WebEasel { createStoryboard() }
1612
}

‎examples/basic/src/wasmJsMain/resources/index.html‎

Lines changed: 91 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,98 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Basic Storyboard</title>
7-
<script src="basic.js"></script>
7+
<script type="application/javascript" src="basic.js"></script>
8+
<style>
9+
html, body {
10+
width: 100%;
11+
height: 100%;
12+
margin: 0;
13+
padding: 0;
14+
background-color: white;
15+
overflow: hidden;
16+
}
17+
18+
#warning {
19+
position: absolute;
20+
top: 100px;
21+
left: 100px;
22+
max-width: 830px;
23+
z-index: 100;
24+
background-color: white;
25+
font-size: initial;
26+
display: none;
27+
}
28+
#warning li {
29+
padding-bottom: 15px;
30+
}
31+
32+
#warning span.code {
33+
font-family: monospace;
34+
}
35+
36+
ul {
37+
margin-top: 0;
38+
margin-bottom: 15px;
39+
}
40+
41+
#footer {
42+
position: fixed;
43+
bottom: 0;
44+
width: 100%;
45+
z-index: 1000;
46+
background-color: white;
47+
font-size: initial;
48+
}
49+
50+
#close {
51+
position: absolute;
52+
top: 0;
53+
right: 10px;
54+
cursor: pointer;
55+
}
56+
57+
#composeApp {
58+
width: 100%;
59+
height: 100%;
60+
}
61+
</style>
862
</head>
963
<body>
10-
<canvas id="ComposeTarget"></canvas>
64+
<div id="composeApp" />
65+
66+
<div id="warning">
67+
⚠️ Please make sure that your runtime environment supports the latest version of Wasm GC and Exception-Handling proposals.
68+
For more information, see <a href="https://kotl.in/wasm-help">https://kotl.in/wasm-help</a>.
69+
<br/>
70+
<br/>
71+
<ul>
72+
<li>For <b>Chrome</b> and <b>Chromium-based</b> browsers (Edge, Brave etc.), it <b>should just work</b> since version 119.</li>
73+
<li>For <b>Firefox</b> 120 it <b>should just work</b>.</li>
74+
<li>For <b>Firefox</b> 119:
75+
<ol>
76+
<li>Open <span class="code">about:config</span> in the browser.</li>
77+
<li>Enable <strong>javascript.options.wasm_gc</strong>.</li>
78+
<li>Refresh this page.</li>
79+
</ol>
80+
</li>
81+
</ul>
82+
</div>
1183
</body>
12-
</html>
84+
85+
<script type="application/javascript" >
86+
const unhandledError = (event, error) => {
87+
if (error instanceof WebAssembly.CompileError) {
88+
document.getElementById("warning").style.display="initial";
89+
90+
// Hide a Scary Webpack Overlay which is less informative in this case.
91+
const webpackOverlay = document.getElementById("webpack-dev-server-client-overlay");
92+
if (webpackOverlay != null) webpackOverlay.style.display="none";
93+
}
94+
}
95+
addEventListener("error", (event) => unhandledError(event, event.error));
96+
addEventListener("unhandledrejection", (event) => unhandledError(event, event.reason));
97+
</script>
98+
99+
</html>

‎examples/diagram/src/wasmJsMain/kotlin/main.web.kt‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,10 @@ import androidx.compose.material.darkColors
33
import androidx.compose.ui.ExperimentalComposeUiApi
44
import androidx.compose.ui.window.ComposeViewport
55
import dev.bnorm.storyboard.easel.WebEasel
6-
import kotlinx.browser.document
7-
import org.w3c.dom.HTMLCanvasElement
86

97
@OptIn(ExperimentalComposeUiApi::class)
108
fun main() {
11-
val element = document.getElementById("ComposeTarget") as HTMLCanvasElement
12-
element.focus() // Focus is required for keyboard navigation.
13-
ComposeViewport(viewportContainer = element) {
9+
ComposeViewport("composeApp") {
1410
MaterialTheme(colors = darkColors()) {
1511
WebEasel { createStoryboard() }
1612
}

‎examples/diagram/src/wasmJsMain/resources/index.html‎

Lines changed: 91 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,98 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Diagram Storyboard</title>
7-
<script src="diagram.js"></script>
7+
<script type="application/javascript" src="diagram.js"></script>
8+
<style>
9+
html, body {
10+
width: 100%;
11+
height: 100%;
12+
margin: 0;
13+
padding: 0;
14+
background-color: white;
15+
overflow: hidden;
16+
}
17+
18+
#warning {
19+
position: absolute;
20+
top: 100px;
21+
left: 100px;
22+
max-width: 830px;
23+
z-index: 100;
24+
background-color: white;
25+
font-size: initial;
26+
display: none;
27+
}
28+
#warning li {
29+
padding-bottom: 15px;
30+
}
31+
32+
#warning span.code {
33+
font-family: monospace;
34+
}
35+
36+
ul {
37+
margin-top: 0;
38+
margin-bottom: 15px;
39+
}
40+
41+
#footer {
42+
position: fixed;
43+
bottom: 0;
44+
width: 100%;
45+
z-index: 1000;
46+
background-color: white;
47+
font-size: initial;
48+
}
49+
50+
#close {
51+
position: absolute;
52+
top: 0;
53+
right: 10px;
54+
cursor: pointer;
55+
}
56+
57+
#composeApp {
58+
width: 100%;
59+
height: 100%;
60+
}
61+
</style>
862
</head>
963
<body>
10-
<canvas id="ComposeTarget"></canvas>
64+
<div id="composeApp" />
65+
66+
<div id="warning">
67+
⚠️ Please make sure that your runtime environment supports the latest version of Wasm GC and Exception-Handling proposals.
68+
For more information, see <a href="https://kotl.in/wasm-help">https://kotl.in/wasm-help</a>.
69+
<br/>
70+
<br/>
71+
<ul>
72+
<li>For <b>Chrome</b> and <b>Chromium-based</b> browsers (Edge, Brave etc.), it <b>should just work</b> since version 119.</li>
73+
<li>For <b>Firefox</b> 120 it <b>should just work</b>.</li>
74+
<li>For <b>Firefox</b> 119:
75+
<ol>
76+
<li>Open <span class="code">about:config</span> in the browser.</li>
77+
<li>Enable <strong>javascript.options.wasm_gc</strong>.</li>
78+
<li>Refresh this page.</li>
79+
</ol>
80+
</li>
81+
</ul>
82+
</div>
1183
</body>
12-
</html>
84+
85+
<script type="application/javascript" >
86+
const unhandledError = (event, error) => {
87+
if (error instanceof WebAssembly.CompileError) {
88+
document.getElementById("warning").style.display="initial";
89+
90+
// Hide a Scary Webpack Overlay which is less informative in this case.
91+
const webpackOverlay = document.getElementById("webpack-dev-server-client-overlay");
92+
if (webpackOverlay != null) webpackOverlay.style.display="none";
93+
}
94+
}
95+
addEventListener("error", (event) => unhandledError(event, event.error));
96+
addEventListener("unhandledrejection", (event) => unhandledError(event, event.reason));
97+
</script>
98+
99+
</html>

‎examples/interactive/src/wasmJsMain/kotlin/main.web.kt‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,10 @@ import androidx.compose.ui.ExperimentalComposeUiApi
44
import androidx.compose.ui.graphics.Color
55
import androidx.compose.ui.window.ComposeViewport
66
import dev.bnorm.storyboard.easel.WebEasel
7-
import kotlinx.browser.document
8-
import org.w3c.dom.HTMLCanvasElement
97

108
@OptIn(ExperimentalComposeUiApi::class)
119
fun main() {
12-
val element = document.getElementById("ComposeTarget") as HTMLCanvasElement
13-
element.focus() // Focus is required for keyboard navigation.
14-
ComposeViewport(viewportContainer = element) {
10+
ComposeViewport("composeApp") {
1511
MaterialTheme(colors = lightColors(background = Color.Gray)) {
1612
WebEasel { createStoryboard() }
1713
}

‎examples/interactive/src/wasmJsMain/resources/index.html‎

Lines changed: 91 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,98 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Interactive Storyboard</title>
7-
<script src="interactive.js"></script>
7+
<script type="application/javascript" src="interactive.js"></script>
8+
<style>
9+
html, body {
10+
width: 100%;
11+
height: 100%;
12+
margin: 0;
13+
padding: 0;
14+
background-color: white;
15+
overflow: hidden;
16+
}
17+
18+
#warning {
19+
position: absolute;
20+
top: 100px;
21+
left: 100px;
22+
max-width: 830px;
23+
z-index: 100;
24+
background-color: white;
25+
font-size: initial;
26+
display: none;
27+
}
28+
#warning li {
29+
padding-bottom: 15px;
30+
}
31+
32+
#warning span.code {
33+
font-family: monospace;
34+
}
35+
36+
ul {
37+
margin-top: 0;
38+
margin-bottom: 15px;
39+
}
40+
41+
#footer {
42+
position: fixed;
43+
bottom: 0;
44+
width: 100%;
45+
z-index: 1000;
46+
background-color: white;
47+
font-size: initial;
48+
}
49+
50+
#close {
51+
position: absolute;
52+
top: 0;
53+
right: 10px;
54+
cursor: pointer;
55+
}
56+
57+
#composeApp {
58+
width: 100%;
59+
height: 100%;
60+
}
61+
</style>
862
</head>
963
<body>
10-
<canvas id="ComposeTarget"></canvas>
64+
<div id="composeApp" />
65+
66+
<div id="warning">
67+
⚠️ Please make sure that your runtime environment supports the latest version of Wasm GC and Exception-Handling proposals.
68+
For more information, see <a href="https://kotl.in/wasm-help">https://kotl.in/wasm-help</a>.
69+
<br/>
70+
<br/>
71+
<ul>
72+
<li>For <b>Chrome</b> and <b>Chromium-based</b> browsers (Edge, Brave etc.), it <b>should just work</b> since version 119.</li>
73+
<li>For <b>Firefox</b> 120 it <b>should just work</b>.</li>
74+
<li>For <b>Firefox</b> 119:
75+
<ol>
76+
<li>Open <span class="code">about:config</span> in the browser.</li>
77+
<li>Enable <strong>javascript.options.wasm_gc</strong>.</li>
78+
<li>Refresh this page.</li>
79+
</ol>
80+
</li>
81+
</ul>
82+
</div>
1183
</body>
12-
</html>
84+
85+
<script type="application/javascript" >
86+
const unhandledError = (event, error) => {
87+
if (error instanceof WebAssembly.CompileError) {
88+
document.getElementById("warning").style.display="initial";
89+
90+
// Hide a Scary Webpack Overlay which is less informative in this case.
91+
const webpackOverlay = document.getElementById("webpack-dev-server-client-overlay");
92+
if (webpackOverlay != null) webpackOverlay.style.display="none";
93+
}
94+
}
95+
addEventListener("error", (event) => unhandledError(event, event.error));
96+
addEventListener("unhandledrejection", (event) => unhandledError(event, event.reason));
97+
</script>
98+
99+
</html>

0 commit comments

Comments
 (0)