DPI scaling for JS/HTML (#180)

Author: cedrickcooke

element-view/src/commonMain/kotlin/AdapterState.kt

@@ -7,4 +7,5 @@ internal data class AdapterState<V : Any>(
     val root: RootElement,
     val width: Int,
     val height: Int,
+    val scale: Float = 1f,
 )

element-view/src/jsMain/kotlin/ElementViewAdapter.kt

@@ -35,8 +35,8 @@ public class ElementViewAdapter<T>(
      * The view changed size, so we should re-render the bitmap. When this happens, the RootElement
      * will be reset, so the render will have a clean slate.
      */
-    internal fun onSizeChanged(width: Int, height: Int) {
-        state.value = state.value.copy(root = RootElement(), width = width, height = height)
+    internal fun onSizeChanged(width: Int, height: Int, scale: Double) {
+        state.value = state.value.copy(root = RootElement(), width = width, height = height, scale = scale.toFloat())
     }
 
     internal fun onClick(x: Float, y: Float) {
@@ -78,12 +78,13 @@ public class ElementViewAdapter<T>(
             state.collectLatest { state ->
                 if (state.view == null) return@collectLatest
                 if (state.width == 0 || state.height == 0) return@collectLatest
-                val canvas = HtmlKanvas(state.view)
                 dataSource.collect { data ->
                     updater.update(state.root, state.width.toFloat(), state.height.toFloat(), data)
                     window.awaitAnimationFrame()
+                    val canvas = HtmlKanvas(state.view, state.scale)
                     canvas.context.clearRect(0.0, 0.0, state.width.toDouble(), state.height.toDouble())
                     state.root.draw(canvas)
+                    canvas.context.resetTransform()
                 }
             }
         }

element-view/src/jsMain/kotlin/HTMLCanvasElement.kt

@@ -1,7 +1,9 @@
 package com.juul.krayon.element.view
 
+import kotlinx.browser.window
 import org.w3c.dom.Element
 import org.w3c.dom.HTMLCanvasElement
+import kotlin.math.roundToInt
 
 private external class ResizeObserver(
     callback: (entries: Array<ResizeObserverEntry>, observer: ResizeObserver) -> Unit,
@@ -15,14 +17,21 @@ private external interface ResizeObserverEntry
 private var adapters = mutableMapOf<HTMLCanvasElement, ElementViewAdapter<*>>()
 private var observers = mutableMapOf<HTMLCanvasElement, ResizeObserver>()
 
+/**
+ * Attach an [adapter] to `this` element. When [applyDisplayScale] is `true` (the default), then
+ * the element will properly handle scaled high-DPI devices. This can be set to `false` to prevent
+ * an infinite resize loop when the element's size is defined intrinsically by the canvas size.
+ */
 public fun HTMLCanvasElement.attachAdapter(
     adapter: ElementViewAdapter<*>,
+    applyDisplayScale: Boolean = true,
 ) {
     detachAdapter()
     val observer = ResizeObserver { _, _ ->
-        width = offsetWidth
-        height = offsetHeight
-        adapter.onSizeChanged(width, height)
+        val scale = if (applyDisplayScale) window.devicePixelRatio else 1.0
+        width = (offsetWidth * scale).roundToInt()
+        height = (offsetHeight * scale).roundToInt()
+        adapter.onSizeChanged(offsetWidth, offsetHeight, scale)
     }
     observers[this] = observer
     observer.observe(this)

kanvas/src/jsMain/kotlin/HtmlKanvas.kt

@@ -23,16 +23,23 @@ private val WHITESPACE = Regex("\\s")
 
 public class HtmlKanvas(
     element: HTMLCanvasElement,
+    private val scalingFactor: Float = 1f,
 ) : Kanvas, IsPointInPath {
 
     /** The raw HTMLCanvas's 2d rendering context. */
     public val context: CanvasRenderingContext2D = element.getContext("2d") as CanvasRenderingContext2D
 
     override val width: Float
-        get() = context.canvas.width.toFloat()
+        get() = context.canvas.width / scalingFactor
 
     override val height: Float
-        get() = context.canvas.height.toFloat()
+        get() = context.canvas.height / scalingFactor
+
+    init {
+        if (scalingFactor != 1f) {
+            pushTransform(Transform.Scale(scalingFactor, scalingFactor))
+        }
+    }
 
     override fun drawArc(
         left: Float,

sample/src/jsMain/resources/index.html

@@ -9,12 +9,12 @@
 <body>
 <h1>Krayon Sample</h1>
 <h2>Line Chart</h2>
-<canvas id="line-canvas" width="854" height="480"></canvas>
+<canvas id="line-canvas" style="height: 480px; width: 854px"></canvas>
 <h2>Pie Chart</h2>
 <table>
     <tr>
         <td>
-            <canvas id="pie-canvas" width="480" height="480"></canvas>
+            <canvas id="pie-canvas" style="height: 480px; width: 480px"></canvas>
         </td>
         <td>
             <form>
@@ -37,7 +37,7 @@ <h2>Pie Chart</h2>
     </tr>
 </table>
 <h2>Interaction</h2>
-<canvas id="interaction-canvas" width="854" height="480"></canvas>
+<canvas id="interaction-canvas"  style="height: 480px; width: 854px"></canvas>
 </body>
 <script src="sample.js"></script>
 </html>