[wasm],[js] Trigger change scale event only once for every possible s… (#888)

samples/SkiaJsSample/build.gradle.kts

@@ -3,9 +3,9 @@ plugins {
 }
 
 repositories {
-    mavenLocal()
     mavenCentral()
     maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+    mavenLocal()
 }
 
 var version = "0.0.0-SNAPSHOT"

skiko/src/jsMain/kotlin/org/jetbrains/skiko/SkiaLayer.js.kt

 package org.jetbrains.skiko
 
 import kotlinx.browser.window
+import org.w3c.dom.AddEventListenerOptions
+import org.w3c.dom.MediaQueryListEvent
 import org.w3c.dom.events.KeyboardEvent
 import org.w3c.dom.events.UIEvent
 
@@ -13,6 +15,11 @@ actual typealias SkikoPlatformPointerEvent = UIEvent
 internal actual fun SkiaLayer.setOnChangeScaleNotifier() {
     state?.initCanvas(desiredWidth, desiredHeight, contentScale, this.pixelGeometry)
     window.matchMedia("(resolution: ${contentScale}dppx)")
-        .addEventListener("change", { setOnChangeScaleNotifier() }, true)
+        .addEventListener("change", { evt ->
+            evt as MediaQueryListEvent
+            if (!evt.matches) {
+                setOnChangeScaleNotifier()
+            }
+        }, AddEventListenerOptions(capture = true, once = true))
     onContentScaleChanged?.invoke(contentScale)
 }
\ No newline at end of file

skiko/src/wasmJsMain/kotlin/org/jetbrains/skiko/SkiaLayer.js.wasmJs.kt

 package org.jetbrains.skiko
 
 import kotlinx.browser.window
+import org.w3c.dom.AddEventListenerOptions
+import org.w3c.dom.MediaQueryListEvent
 
 import org.w3c.dom.events.KeyboardEvent
 import org.w3c.dom.events.UIEvent
@@ -14,6 +16,11 @@ actual typealias SkikoPlatformPointerEvent = UIEvent
 internal actual fun SkiaLayer.setOnChangeScaleNotifier() {
     state?.initCanvas(desiredWidth, desiredHeight, contentScale, this.pixelGeometry)
     window.matchMedia("(resolution: ${contentScale}dppx)")
-        .addEventListener("change", { setOnChangeScaleNotifier() }, true)
+        .addEventListener("change", { evt ->
+            evt as MediaQueryListEvent
+            if (!evt.matches) {
+                setOnChangeScaleNotifier()
+            }
+         }, AddEventListenerOptions(capture = true, once = true))
     onContentScaleChanged?.invoke(contentScale)
 }
\ No newline at end of file