-
Notifications
You must be signed in to change notification settings - Fork 70
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Introduce ComposeViewport function that renders content in parent container #1211
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,32 @@ | ||
<!-- | ||
~ Copyright 2024 The Android Open Source Project | ||
~ | ||
~ Licensed under the Apache License, Version 2.0 (the "License"); | ||
~ you may not use this file except in compliance with the License. | ||
~ You may obtain a copy of the License at | ||
~ | ||
~ http://www.apache.org/licenses/LICENSE-2.0 | ||
~ | ||
~ Unless required by applicable law or agreed to in writing, software | ||
~ distributed under the License is distributed on an "AS IS" BASIS, | ||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
~ See the License for the specific language governing permissions and | ||
~ limitations under the License. | ||
--> | ||
|
||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>compose multiplatform web demo</title> | ||
<script src="skiko.js"> </script> | ||
<meta name=“viewport” content=“width=device-width, initial-scale=1.0"> | ||
<title>Compose JS Demo</title> | ||
<link type="text/css" rel="stylesheet" href="styles.css"> | ||
<script src="skiko.js"> </script> | ||
<script src="demo.js"> </script> | ||
</head> | ||
|
||
<body> | ||
<h1>compose multiplatform web demo</h1> | ||
<div> | ||
<canvas id="canvas1"></canvas> | ||
</div> | ||
<script src="demo.js"> </script> | ||
<h1>compose multiplatform js demo</h1> | ||
<div id="composeApplication"/> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
/* | ||
* Copyright 2024 The Android Open Source Project | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
|
||
html, body { | ||
width: 100%; | ||
height: 100%; | ||
margin: 0; | ||
padding: 0; | ||
overflow: hidden; | ||
} | ||
|
||
h1 { | ||
padding: 0 16px; | ||
font-size: 2em; | ||
} | ||
|
||
#composeApplication { | ||
width: 100%; | ||
height: 100%; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,11 +19,11 @@ package androidx.compose.mpp.demo | |
import androidx.compose.runtime.Composable | ||
import androidx.compose.runtime.remember | ||
import androidx.compose.ui.ExperimentalComposeUiApi | ||
import androidx.compose.ui.window.CanvasBasedWindow | ||
import androidx.compose.ui.window.ComposeViewport | ||
|
||
@OptIn(ExperimentalComposeUiApi::class) | ||
fun main() { | ||
CanvasBasedWindow("Compose/JS sample", canvasElementId = "canvas1") { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Here I see some lines deleted, but no new API used here :) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yep, sorry, this was due to commit not being actually happened because of signup configuration |
||
ComposeViewport(viewportContainer = "composeApplication") { | ||
val app = remember { App() } | ||
app.Content() | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
<!-- | ||
~ Copyright 2023 The Android Open Source Project | ||
~ Copyright 2024 The Android Open Source Project | ||
~ | ||
~ Licensed under the Apache License, Version 2.0 (the "License"); | ||
~ you may not use this file except in compliance with the License. | ||
|
@@ -18,24 +18,14 @@ | |
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
<title>compose wasm web demo</title> | ||
<script src="demo.js"> </script> | ||
<meta name=“viewport” content=“width=device-width, initial-scale=1.0"> | ||
<title>Compose Wasm Demo</title> | ||
<link type="text/css" rel="stylesheet" href="styles.css"> | ||
|
||
<style> | ||
html, body { | ||
width: 100%; | ||
height: 100%; | ||
margin: 0; | ||
padding: 0; | ||
overflow: hidden; | ||
} | ||
</style> | ||
<script src="demo.js"> </script> | ||
</head> | ||
|
||
<body> | ||
<h1>compose wasm web demo</h1> | ||
<canvas id="canvas1"></canvas> | ||
<h1>compose multiplatform wasm demo</h1> | ||
<div id="composeApplication"/> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -49,6 +49,7 @@ import org.jetbrains.skiko.SkiaLayer | |
import org.jetbrains.skiko.SkikoKeyboardEventKind | ||
import org.jetbrains.skiko.SkikoPointerEventKind | ||
import org.w3c.dom.AddEventListenerOptions | ||
import org.w3c.dom.Element | ||
import org.w3c.dom.HTMLCanvasElement | ||
import org.w3c.dom.HTMLStyleElement | ||
import org.w3c.dom.HTMLTitleElement | ||
|
@@ -80,7 +81,7 @@ private interface ComposeWindowState { | |
} | ||
} | ||
|
||
private class DefaultWindowState : ComposeWindowState { | ||
private class DefaultWindowState(private val viewportContainer: Element) : ComposeWindowState { | ||
private val channel = Channel<IntSize>(CONFLATED) | ||
|
||
override fun init() { | ||
|
@@ -96,8 +97,7 @@ private class DefaultWindowState : ComposeWindowState { | |
} | ||
|
||
private fun getParentContainerBox(): IntSize { | ||
val documentElement = document.documentElement ?: return IntSize(0, 0) | ||
return IntSize(documentElement.clientWidth, documentElement.clientHeight) | ||
return IntSize(viewportContainer.clientWidth, viewportContainer.clientHeight) | ||
} | ||
|
||
private fun initMediaEventListener(handler: (Double) -> Unit) { | ||
|
@@ -327,6 +327,41 @@ fun CanvasBasedWindow( | |
ComposeWindow( | ||
canvas = canvas, | ||
content = content, | ||
state = if (requestResize == null) DefaultWindowState() else ComposeWindowState.createFromLambda(requestResize) | ||
state = if (requestResize == null) DefaultWindowState(document.documentElement!!) else ComposeWindowState.createFromLambda(requestResize) | ||
) | ||
} | ||
} | ||
|
||
/** | ||
* EXPERIMENTAL! Might be deleted or changed in the future! | ||
* | ||
* Creates the composition in HTML canvas created in parent container identified by [viewportContainer] id. | ||
* This size of canvas is adjusted with the size of the container | ||
*/ | ||
fun ComposeViewport( | ||
viewportContainer: String, | ||
content: @Composable () -> Unit = { } | ||
) { | ||
ComposeViewport(document.getElementById(viewportContainer)!!, content) | ||
} | ||
|
||
/** | ||
* EXPERIMENTAL! Might be deleted or changed in the future! | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It should be marked with experimental annotation instead of comment |
||
* | ||
* Creates the composition in HTML canvas created in parent container identified by [viewportContainer] Element. | ||
* This size of canvas is adjusted with the size of the container | ||
*/ | ||
fun ComposeViewport( | ||
viewportContainer: Element, | ||
content: @Composable () -> Unit = { } | ||
) { | ||
val canvas = document.createElement("canvas") as HTMLCanvasElement | ||
canvas.setAttribute("tabindex", "0") | ||
|
||
viewportContainer.appendChild(canvas) | ||
|
||
ComposeWindow( | ||
canvas = canvas, | ||
content = content, | ||
state = DefaultWindowState(viewportContainer) | ||
) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This line was necessary for proper aspect ration on mobile devices (in Chrome Android).