https://kotlinlang.org logo
#compose-web
Title
# compose-web
s

SrSouza

03/17/2023, 12:51 PM
Hi folks, there is any example of using Interop between Compose Skia Canvas and Compose DOM? There is support for that? Compose DOM uses only the Compose Runtime, so should be able to use both side by side, right?
c

CLOVIS

03/17/2023, 1:11 PM
I don't think you can use both at the same time because they have different Appliers. I'm not an expert though so I could be wrong
It's maybe possible to create a
Canvas
composable to switch between them
s

SrSouza

03/17/2023, 1:19 PM
Yes, they have different appliers, I’m not looking for use a directly 1/1 used, I’m looking if is possible to use currently, if there is not issues with dependencies. I’m thinking in a API more like this:
Copy code
Box(modifer ...) {
  DomInterop(...) {
      DomDivComposable()
  }
}
Copy code
Div(...) {
  CanvasInterop(..){
     MaterialButton()
     MultiplatformComponent()
  }
}
c

CLOVIS

03/17/2023, 1:21 PM
I'm pretty sure it's possible to write a
CanvasInterop
composable but I don't know how to.
To my knowledge they are not part of the library
a

Arjan van Wieringen

03/17/2023, 1:53 PM
Here is someone who integrated Compose Canvas with Compose Web: https://kotlinlang.slack.com/archives/C01F2HV7868/p1660083398571449
o

Oliver.O

03/17/2023, 9:22 PM
The above example integrates Compose Web UI/Canvas with the browser's DOM. It does not relate to or integrate with Compose Web/DOM. While in theory, you could have multiple Composers (one for UI/Canvas, one for DOM), I'm not sure if that would currently go too much against the grain. Look at a setup sequence to get Compose up and running:
Copy code
GlobalSnapshotManager.ensureStarted(testScope)

        withContext(headlessMonotonicFrameClock(fps)) {
            val recomposer = Recomposer(coroutineContext)
            val composition = Composition(applier, recomposer)

            try {
                composition.setContent {
                    // This is the place to insert the initial Composable
                }

                recomposer.runRecomposeAndApplyChanges() // <- This method will not return
                // unless the Recomposer is closed and all effects in managed compositions
                // complete.
            } finally {
                composition.dispose()
                GlobalSnapshotManager.stop()
            }
        }
So suppose we'd use different coroutines to start up multiple Composers (which would be possible even in single-threaded environments). Then each Composer makes assumptions about how to schedule updates, and these assumptions depend on the frame clock. I'm not sure whether that works with multiple Composers unaware of each other but depending on the same frame clock.
s

shikasd

03/19/2023, 5:52 AM
Nesting different compositions with different appliers together is fairly simple and is supported already (just make sure to provide the correct applier in the constructor of composition) The problem is to arrange resulting canvas and dom visually on top of each other, which should be possible, but you'll have to play with positioning of root elements for each a little bit
37 Views