Fix Skiko backed Haze not displaying multiple Rects (#17)

chrisbanes · web-flow · commit 39f866af509e · 2023-10-31T14:31:47.000Z
Caused the runtime shaders drawing the entire content on top
of each, meaning that only the last rectangle is actually visible.

Fixed by updating the runtime effect to only draw the blurred
content, and transparent for anything else. ImageFilter.makeMerge
then draws each filter on top of each other.

Also updated the samples to include a bottom bar, validating that
this works.
diff --git a/haze/src/skikoMain/kotlin/dev/chrisbanes/haze/HazeNode.kt b/haze/src/skikoMain/kotlin/dev/chrisbanes/haze/HazeNode.kt
@@ -43,14 +43,18 @@ private const val SHADER_SKSL = """
       return length(max(q,0.0)) + min(max(q.x,q.y),0.0);
   }
 
-  vec4 main(vec2 coord) {
-    vec2 shiftRect = (rectangle.zw - rectangle.xy) / 2.0;
-    vec2 shiftCoord = coord - rectangle.xy;
-    float distanceToClosestEdge = boxSDF(shiftCoord - shiftRect, shiftRect);
+  bool rectContains(vec4 rectangle, vec2 coord) {
+      vec2 shiftRect = (rectangle.zw - rectangle.xy) / 2.0;
+      vec2 shiftCoord = coord - rectangle.xy;
+      return boxSDF(shiftCoord - shiftRect, shiftRect) <= 0.0;
+  }
 
+  vec4 main(vec2 coord) {
     vec4 c = content.eval(coord);
-    if (distanceToClosestEdge > 0.0) {
-      return c;
+
+    if (!rectContains(rectangle, coord)) {
+        // If we're not drawing in the rectangle, return transparent
+        return vec4(0.0, 0.0, 0.0, 0.0);
     }
 
     vec4 b = blur.eval(coord);
@@ -128,30 +132,35 @@ internal actual class HazeNode actual constructor(
   }
 
   private fun createBlurRenderEffect(): RenderEffect? {
-    return areas.asSequence()
-      .filterNot { it.isEmpty }
-      .map { area ->
-        val compositeShaderBuilder = RuntimeShaderBuilder(RUNTIME_SHADER).apply {
-          uniform("rectangle", area.left, area.top, area.right, area.bottom)
-          uniform("color", tint.red, tint.green, tint.blue, 1f)
-          uniform("colorShift", tint.alpha)
-
-          child("noise", NOISE_SHADER)
-        }
-
-        ImageFilter.makeRuntimeShader(
-          runtimeShaderBuilder = compositeShaderBuilder,
-          shaderNames = arrayOf("content", "blur"),
-          inputs = arrayOf(null, blurFilter),
-        )
+    val rects = areas.filterNot { it.isEmpty }
+    if (rects.isEmpty()) {
+      return null
+    }
+
+    val filters = rects.asSequence().map { area ->
+      val compositeShaderBuilder = RuntimeShaderBuilder(RUNTIME_SHADER).apply {
+        uniform("rectangle", area.left, area.top, area.right, area.bottom)
+        uniform("color", tint.red, tint.green, tint.blue, 1f)
+        uniform("colorShift", tint.alpha)
+
+        child("noise", NOISE_SHADER)
       }
-      .toList()
-      .flatten()?.asComposeRenderEffect()
-  }
-}
 
-private fun Collection<ImageFilter>.flatten(): ImageFilter? = when {
-  isEmpty() -> null
-  size == 1 -> first()
-  else -> ImageFilter.makeMerge(toTypedArray(), null)
+      ImageFilter.makeRuntimeShader(
+        runtimeShaderBuilder = compositeShaderBuilder,
+        shaderNames = arrayOf("content", "blur"),
+        inputs = arrayOf(null, blurFilter),
+      )
+    }
+
+    return ImageFilter.makeMerge(
+      buildList {
+        // We need null as the first item, which tells Skia to draw the content without any filter.
+        // The filters then draw on top, clipped to their respective areas.
+        add(null)
+        addAll(filters)
+      }.toTypedArray(),
+      null,
+    ).asComposeRenderEffect()
+  }
 }
diff --git a/sample/android/src/main/kotlin/dev/chrisbanes/haze/sample/android/HazeSample.kt b/sample/android/src/main/kotlin/dev/chrisbanes/haze/sample/android/HazeSample.kt
@@ -10,13 +10,24 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Call
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
 import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
@@ -37,6 +48,31 @@ fun HazeSample(appTitle: String) {
           modifier = Modifier.fillMaxWidth(),
         )
       },
+      bottomBar = {
+        var selectedIndex by remember { mutableIntStateOf(0) }
+
+        NavigationBar(
+          containerColor = Color.Transparent,
+          modifier = Modifier.fillMaxWidth(),
+        ) {
+          for (i in (0 until 3)) {
+            NavigationBarItem(
+              selected = selectedIndex == i,
+              onClick = { selectedIndex = i },
+              icon = {
+                Icon(
+                  imageVector = when (i) {
+                    0 -> Icons.Default.Call
+                    1 -> Icons.Default.Lock
+                    else -> Icons.Default.Search
+                  },
+                  contentDescription = null,
+                )
+              },
+            )
+          }
+        }
+      },
       modifier = Modifier.fillMaxSize(),
     ) { contentPadding ->
       BoxWithConstraints {
@@ -46,6 +82,12 @@ fun HazeSample(appTitle: String) {
             Offset(maxWidth.toPx(), contentPadding.calculateTopPadding().toPx()),
           )
         }
+        val bottomBarsBounds = with(LocalDensity.current) {
+          Rect(
+            Offset(0f, maxHeight.toPx() - contentPadding.calculateBottomPadding().toPx()),
+            Offset(maxWidth.toPx(), maxHeight.toPx()),
+          )
+        }
 
         LazyVerticalGrid(
           columns = GridCells.Adaptive(128.dp),
@@ -56,6 +98,7 @@ fun HazeSample(appTitle: String) {
             .fillMaxSize()
             .haze(
               topBarBounds,
+              bottomBarsBounds,
               backgroundColor = MaterialTheme.colorScheme.surface,
             ),
         ) {
diff --git a/sample/shared/src/commonMain/kotlin/dev/chrisbanes/haze/sample/HazeSample.kt b/sample/shared/src/commonMain/kotlin/dev/chrisbanes/haze/sample/HazeSample.kt
@@ -10,13 +10,24 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Call
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
 import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
@@ -37,6 +48,31 @@ fun HazeSample(appTitle: String) {
           modifier = Modifier.fillMaxWidth(),
         )
       },
+      bottomBar = {
+        var selectedIndex by remember { mutableIntStateOf(0) }
+
+        NavigationBar(
+          containerColor = Color.Transparent,
+          modifier = Modifier.fillMaxWidth(),
+        ) {
+          for (i in (0 until 3)) {
+            NavigationBarItem(
+              selected = selectedIndex == i,
+              onClick = { selectedIndex = i },
+              icon = {
+                Icon(
+                  imageVector = when (i) {
+                    0 -> Icons.Default.Call
+                    1 -> Icons.Default.Lock
+                    else -> Icons.Default.Search
+                  },
+                  contentDescription = null,
+                )
+              },
+            )
+          }
+        }
+      },
       modifier = Modifier.fillMaxSize(),
     ) { contentPadding ->
       BoxWithConstraints {
@@ -46,6 +82,12 @@ fun HazeSample(appTitle: String) {
             Offset(maxWidth.toPx(), contentPadding.calculateTopPadding().toPx()),
           )
         }
+        val bottomBarsBounds = with(LocalDensity.current) {
+          Rect(
+            Offset(0f, maxHeight.toPx() - contentPadding.calculateBottomPadding().toPx()),
+            Offset(maxWidth.toPx(), maxHeight.toPx()),
+          )
+        }
 
         LazyVerticalGrid(
           columns = GridCells.Adaptive(128.dp),
@@ -56,6 +98,7 @@ fun HazeSample(appTitle: String) {
             .fillMaxSize()
             .haze(
               topBarBounds,
+              bottomBarsBounds,
               backgroundColor = MaterialTheme.colorScheme.surface,
             ),
         ) {
