Add workaround for invalidations not happening on Skia backed platforms (#296)

We need to re-draw children (`Modifier.hazeChild`) when the background
content `Modifier.haze`) has updated the `contentLayer`.

That works automatically on Android, as it uses `RenderNodes` which
automatically repaint when an upstream `RenderNode` is updated. The Skia
backed platforms do not do this though, so we can't rely on this
behavior.

This PR adds in a state backed `invalidationTick`, allowing the
`hazeChild` on Skia-backed platforms to know when the content layer has
been updated. Why don't we just the `contentLayer` in a state I hear you
ask? GraphicsLayers aren't state. They don't implmenent equality, so
every draw will trigger readers that the value has changed. This means
that we can easily get into invalidation loops:

1. Parent draws, creates a new GraphicsLayer and updates state.
2. Children are notified that the GL has changed. They trigger a draw
invalidation.
3. Parent is drawn, creates a new GraphicsLayer and updates state.
4. Repeat.

The invalidationTick added here would act exactly the same, but because
it's an `Int` we can use it to know when NOT to invalidate in step 2.
This is the very giant hack in this MR: we only invalidate every other
invalidation tick change.

Author: chrisbanes

gradle/build-logic/convention/src/main/kotlin/dev/chrisbanes/gradle/Kotlin.kt

@@ -9,13 +9,16 @@ import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 import org.jetbrains.kotlin.gradle.dsl.KotlinJvmCompilerOptions
 import org.jetbrains.kotlin.gradle.tasks.KotlinCompilationTask
 
-fun Project.configureKotlin() {
+fun Project.configureKotlin(enableAllWarningsAsErrors: Boolean = false) {
   // Configure Java to use our chosen language level. Kotlin will automatically pick this up
   configureJava()
 
   tasks.withType<KotlinCompilationTask<*>>().configureEach {
     compilerOptions {
-      allWarningsAsErrors.set(true)
+      // Blocked by https://youtrack.jetbrains.com/issue/KT-69701/
+      if (enableAllWarningsAsErrors) {
+        allWarningsAsErrors.set(true)
+      }
 
       if (this is KotlinJvmCompilerOptions) {
         // Target JVM 11 bytecode

haze/src/androidMain/kotlin/dev/chrisbanes/haze/HazeEffect.android.kt

@@ -0,0 +1,8 @@
+// Copyright 2024, Christopher Banes and the Haze project contributors
+// SPDX-License-Identifier: Apache-2.0
+
+package dev.chrisbanes.haze
+
+internal actual fun HazeEffectNode.observeInvalidationTick() {
+  // No need to do anything on Android
+}

haze/src/androidMain/kotlin/dev/chrisbanes/haze/Log.android.kt

@@ -0,0 +1,12 @@
+// Copyright 2024, Christopher Banes and the Haze project contributors
+// SPDX-License-Identifier: Apache-2.0
+
+package dev.chrisbanes.haze
+
+import android.util.Log
+
+internal actual fun log(tag: String, message: () -> String) {
+  if (LOG_ENABLED && Log.isLoggable(tag, Log.DEBUG)) {
+    Log.d(tag, message())
+  }
+}

haze/src/commonMain/kotlin/dev/chrisbanes/haze/Haze.kt

@@ -6,6 +6,7 @@ package dev.chrisbanes.haze
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
@@ -36,6 +37,8 @@ class HazeState {
    */
   var contentLayer: GraphicsLayer? = null
     internal set
+
+  internal var invalidateTick by mutableIntStateOf(Int.MIN_VALUE)
 }
 
 @Stable

haze/src/commonMain/kotlin/dev/chrisbanes/haze/HazeChild.kt

@@ -11,10 +11,8 @@ import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.drawscope.ContentDrawScope
 import androidx.compose.ui.layout.LayoutCoordinates
 import androidx.compose.ui.node.ModifierNodeElement
-import androidx.compose.ui.node.invalidateDraw
 import androidx.compose.ui.platform.InspectorInfo
 import androidx.compose.ui.unit.toSize
-import kotlinx.coroutines.launch
 
 /**
  * Mark this composable as being a Haze child composable.
@@ -46,9 +44,6 @@ fun Modifier.hazeChild(
  * This will update the given [HazeState] whenever the layout is placed, enabling any layouts using
  * [Modifier.haze] to blur any content behind the host composable.
  *
- * @param shape The shape of the content. This will affect the the bounds and outline of
- * the content. Please be aware that using non-rectangular shapes has an effect on performance,
- * since we need to use path clipping.
  * @param style The [HazeStyle] to use on this content. Any specified values in the given
  * style will override that value from the default style, provided to [haze].
  * @param mask An optional mask which allows effects such as fading via [Brush.verticalGradient] or similar.
@@ -90,8 +85,6 @@ private class HazeChildNode(
     HazeArea(style = style, mask = mask)
   }
 
-  private var drawWithoutContentLayerCount = 0
-
   override fun update() {
     area.style = style
     area.mask = mask
@@ -112,9 +105,12 @@ private class HazeChildNode(
   }
 
   override fun ContentDrawScope.draw() {
+    log(TAG) { "-> HazeChild. start draw()" }
+
     if (effects.isEmpty()) {
       // If we don't have any effects, just call drawContent and return early
       drawContent()
+      log(TAG) { "-> HazeChild. end draw()" }
       return
     }
 
@@ -126,23 +122,21 @@ private class HazeChildNode(
     if (USE_GRAPHICS_LAYERS) {
       val contentLayer = state.contentLayer
       if (contentLayer != null) {
-        drawWithoutContentLayerCount = 0
         drawEffectsWithGraphicsLayer(contentLayer)
-      } else {
-        // The content layer has not have been drawn yet (draw order matters here). If it hasn't
-        // there's not much we do other than invalidate and wait for the next frame.
-        // We only want to force a few frames, otherwise we're causing a draw loop.
-        if (++drawWithoutContentLayerCount <= 2) {
-          coroutineScope.launch { invalidateDraw() }
-        }
       }
     } else {
       drawEffectsWithScrim()
     }
 
     // Finally we draw the content
     drawContent()
+
+    log(TAG) { "-> HazeChild. end draw()" }
   }
 
   override fun calculateHazeAreas(): Sequence<HazeArea> = sequenceOf(area)
+
+  private companion object {
+    const val TAG = "HazeChild"
+  }
 }

haze/src/commonMain/kotlin/dev/chrisbanes/haze/HazeEffect.kt

@@ -55,6 +55,8 @@ internal abstract class HazeEffectNode :
 
   override val shouldAutoInvalidate: Boolean = false
 
+  internal var lastInvalidationTick = Int.MIN_VALUE
+
   open fun update() {
     onObservedReadsChanged()
   }
@@ -65,9 +67,8 @@ internal abstract class HazeEffectNode :
 
   override fun onObservedReadsChanged() {
     observeReads {
-      if (updateEffects()) {
-        invalidateDraw()
-      }
+      updateEffects()
+      observeInvalidationTick()
     }
   }
 
@@ -77,7 +78,7 @@ internal abstract class HazeEffectNode :
 
   override fun onGloballyPositioned(coordinates: LayoutCoordinates) = onPlaced(coordinates)
 
-  protected open fun updateEffects(): Boolean {
+  protected open fun updateEffects() {
     val currentEffectsIsEmpty = effects.isEmpty()
     val currentEffects = effects.associateByTo(mutableMapOf(), HazeEffect::area)
 
@@ -118,7 +119,9 @@ internal abstract class HazeEffectNode :
 
     // Invalidate if any of the effects triggered an invalidation, or we now have zero
     // effects but were previously showing some
-    return needInvalidate || (effects.isEmpty() != currentEffectsIsEmpty)
+    if (needInvalidate || (effects.isEmpty() != currentEffectsIsEmpty)) {
+      invalidateDraw()
+    }
   }
 
   protected fun DrawScope.drawEffectsWithGraphicsLayer(contentLayer: GraphicsLayer) {
@@ -205,6 +208,8 @@ internal expect fun HazeEffectNode.createRenderEffect(
   density: Density,
 ): RenderEffect?
 
+internal expect fun HazeEffectNode.observeInvalidationTick()
+
 internal class HazeEffect(val area: HazeArea) {
   var renderEffect: RenderEffect? = null
   var renderEffectDirty: Boolean = true

haze/src/commonMain/kotlin/dev/chrisbanes/haze/HazeNode.kt

@@ -51,6 +51,8 @@ internal class HazeNode(
   override val shouldAutoInvalidate: Boolean = false
 
   override fun ContentDrawScope.draw() {
+    log(TAG) { "start draw()" }
+
     if (!USE_GRAPHICS_LAYERS) {
       // If we're not using graphics layers, just call drawContent and return early
       drawContent()
@@ -59,8 +61,9 @@ internal class HazeNode(
 
     val graphicsContext = currentValueOf(LocalGraphicsContext)
 
-    val contentLayer = state.contentLayer ?: graphicsContext.createGraphicsLayer()
-    state.contentLayer = contentLayer
+    val contentLayer = state.contentLayer
+      ?.takeUnless { it.isReleased }
+      ?: graphicsContext.createGraphicsLayer().also { state.contentLayer = it }
 
     // First we draw the composable content into a graphics layer
     contentLayer.record {
@@ -69,6 +72,11 @@ internal class HazeNode(
 
     // Now we draw `content` into the window canvas
     drawLayer(contentLayer)
+
+    val tick = Snapshot.withoutReadObservation { state.invalidateTick }
+    state.invalidateTick = tick + 1
+
+    log(TAG) { "end draw()" }
   }
 
   override fun onDetach() {
@@ -79,6 +87,10 @@ internal class HazeNode(
     }
     state.contentLayer = null
   }
+
+  private companion object {
+    const val TAG = "HazeNode"
+  }
 }
 
 internal expect val USE_GRAPHICS_LAYERS: Boolean

haze/src/commonMain/kotlin/dev/chrisbanes/haze/Log.kt

@@ -0,0 +1,8 @@
+// Copyright 2024, Christopher Banes and the Haze project contributors
+// SPDX-License-Identifier: Apache-2.0
+
+package dev.chrisbanes.haze
+
+internal const val LOG_ENABLED = false
+
+internal expect fun log(tag: String, message: () -> String)

haze/src/iosMain/kotlin/dev/chrisbanes/haze/Log.ios.kt

@@ -0,0 +1,12 @@
+// Copyright 2024, Christopher Banes and the Haze project contributors
+// SPDX-License-Identifier: Apache-2.0
+
+package dev.chrisbanes.haze
+
+import platform.Foundation.NSLog
+
+internal actual fun log(tag: String, message: () -> String) {
+  if (LOG_ENABLED) {
+    NSLog("[%s] %s", tag, message())
+  }
+}

haze/src/jsMain/kotlin/dev/chrisbanes/haze/Log.js.kt

@@ -0,0 +1,10 @@
+// Copyright 2024, Christopher Banes and the Haze project contributors
+// SPDX-License-Identifier: Apache-2.0
+
+package dev.chrisbanes.haze
+
+internal actual fun log(tag: String, message: () -> String) {
+  if (LOG_ENABLED) {
+    println("[$tag] ${message()}")
+  }
+}

haze/src/jvmMain/kotlin/dev/chrisbanes/haze/Log.jvm.kt

@@ -0,0 +1,10 @@
+// Copyright 2024, Christopher Banes and the Haze project contributors
+// SPDX-License-Identifier: Apache-2.0
+
+package dev.chrisbanes.haze
+
+internal actual fun log(tag: String, message: () -> String) {
+  if (LOG_ENABLED) {
+    println("[$tag] ${message()}")
+  }
+}

haze/src/skikoMain/kotlin/dev/chrisbanes/haze/HazeEffect.skiko.kt

@@ -0,0 +1,23 @@
+// Copyright 2024, Christopher Banes and the Haze project contributors
+// SPDX-License-Identifier: Apache-2.0
+
+package dev.chrisbanes.haze
+
+import androidx.compose.ui.node.invalidateDraw
+
+internal actual fun HazeEffectNode.observeInvalidationTick() {
+  // Yes, this is very very gross. The HazeNode will update the contentLayer in it's draw
+  // function. HazeNode and also updates `state.invalidateTick` as a way for HazeChild[ren] to
+  // know when the contentLayer has been updated. All fine so far, but for us to draw with the
+  // updated `contentLayer` we need to invalidate. Invalidating ourselves will trigger us to
+  // draw, but it will also trigger `contentLayer` to invalidate, and here's an infinite
+  // draw loop we trigger.
+  //
+  // This is a huge giant hack, but by skipping every other invalidation caused by a
+  // `invalidationTick` change, we break the loop.
+  val tick = state.invalidateTick
+  if (tick != lastInvalidationTick && tick % 2 == 0) {
+    invalidateDraw()
+  }
+  lastInvalidationTick = tick
+}

haze/src/wasmJsMain/kotlin/dev/chrisbanes/haze/Log.wasmJs.kt

@@ -0,0 +1,10 @@
+// Copyright 2024, Christopher Banes and the Haze project contributors
+// SPDX-License-Identifier: Apache-2.0
+
+package dev.chrisbanes.haze
+
+internal actual fun log(tag: String, message: () -> String) {
+  if (LOG_ENABLED) {
+    println("[$tag] ${message()}")
+  }
+}