https://kotlinlang.org logo
Join Slack
Powered by
I am using Compose WASM, drawing a simple bordered...
# compose
l
I am using Compose WASM, drawing a simple bordered box with text. Whenever zooming into my browser with ctrl scroll wheel the canvas does not re render but everything loses quality. You can see on the images below, the result vs what is expected. Do i need to access the canvas element myself and scale accordingly?
Copy code
Box(modifier = Modifier.fillMaxSize().border(4.dp, Color.Red)) {
        Text("Hey this is a test", fontSize = 14.sp)
    }
m
That’s an interesting observation. I’ve never tried that before. I get the same effect with Cntrl-+/-. The sizes and the layout of the elements seems to change correctly but the display gets pixelated. To me this looks like a bug.
l
I agree it's a bug that makes composed somewhat unusable, I think there could be a workaround by tapping into the canvas element. Not sure exactly what has to happen though.
m
You should report the bug in YouTrack. It’s not so unusable for me as I actually did not notice this problem until you pointed it out 😉. The expected behaviour would be a sharp rendering as usual. The sizes and the layout seem to be correct which is an indication that the screen is actually recomposed. Just the rendering is not sharp for some strange reason.
l
c
The sizes and the layout seem to be correct which is an indication that the screen is actually recomposed. Just the rendering is not sharp for some strange reason.
are you sure that what you are seeing is not just the browser zooming in on a canvas which is basically an image and thats why its blurred?
m
@Chrimaeon I am pretty sure because when I zoom in the layout of the screen adjust itself correctly. You can try it yourself via this link. When you zoom in you can see how the number of cells per line changes. The only thing wich may be possible is that the content of each cell is somehow cached in a image which it should in this case.
👍🏼 1
l
Anybody know anything in relation to this?
e
there's no standard way to detect browser zoom and the browser just enlarges the canvas like an image, so afaics this is all expected behavior
l
There is a standard way to detect zoom… The blur is unacceptable for most web apps, especially in the future. There should be an easy solution implemented by Jetbrains as this is arguably a bug.
c
there is no api to hook into so nothing can be done from JetBrains side. you can disable zoom by applying the appropriate 
<meta-data>
information https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
l
They are hooking Into SKIA and messing with the canvas themselves while not exposing it to the user, so not sure wym by “no api to hook into”. Disabling zoom is not an option.
c
the browser has no api SKIA can hook into the check at what zoom level the canvas is rendered. zooming the canvas works properly; using the browser zoom to zoom on a html website is the issue you are facing.
m
If all the browser can do is scaling an image then please explain me how the layout inside this application can change when I zoom in and out via Cntrl-+/-. At least the outer-most layout of this view is correctly recomposed.
c
the layout is changed because the width and height of the canvas changes.
m
So, if I understand you correctly, the application then just sees a canvas size change but does not see a corresponding density change when it recomposes?
👌 1
c
yes, most likely.
💡 2
e
In that case could you not start with a much higher resolution canvas? Also why is it that you can zoom into the canvas then reload the page, the zoom level is retained but now it's rendered sharp. Isn't it just a matter of hooking on the width and height change and then upsizing the canvas to match that new width and height. In fact doesn't the fact that you can go max zoom, reload the page and then no matter how you zoom in and out it remains clear a sign that this is 100% a fixable problem?
m
This is an interesting observation which is new to me. I never tried reloading the page after zooming in. So it seems that the density is only calculated once when the page is loaded but not when you zoom in or out.
c
It’s again just canvas rendering. open the dev-tools and check the canvas 
width
and 
height
and style 
width
and 
height
in both scenarios. when reloading its just rendering a higher res “image” on the canvas.
s
Hey guys, this definitely can be done. There's the 
window.devicePixelRatio
property which provides the current scaling (zoom) ratio. Compose can (and should) check changes to that value on the 
resize
event (because the regular browser zoom also causes a resize), and re-render accordingly. This isn't new, Flutter already does it. Try zooming on the Material 3 flutter demo, and it'll scale accordingly: https://flutterweb-wasm.web.app/
K 1
a little demo with Kotlin/JS
Screencast from 2025-02-05 03-25-09.mp4
👍 1
l
Thank you so much, I appreciate the response.
How would I apply this to something like my example code above?
14 Views
Open in Slack
PreviousNext
Powered by