Use CacheDrawModifierNode, fix issue #4

.idea/inspectionProfiles/Project_Default.xml

@@ -3,15 +3,19 @@
     <option name="myName" value="Project Default" />
     <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
@@ -27,24 +31,31 @@
     </inspection_tool>
     <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewParameterProviderOnFirstParameter" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
     </inspection_tool>
     <inspection_tool class="PublicApiImplicitType" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
     <inspection_tool class="RedundantNotNullExtensionReceiverOfInline" enabled="true" level="INFORMATION" enabled_by_default="true" />

liquid-glass/src/main/java/com/kyant/liquidglass/GlassShapeElement.kt

@@ -2,7 +2,6 @@ package com.kyant.liquidglass
 
 import androidx.compose.foundation.shape.CornerBasedShape
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.CompositingStrategy
 import androidx.compose.ui.graphics.GraphicsLayerScope
 import androidx.compose.ui.layout.Measurable
 import androidx.compose.ui.layout.MeasureResult
@@ -61,7 +60,6 @@ internal class GlassShapeNode(
         }
 
     private val layerBlock: GraphicsLayerScope.() -> Unit = {
-        compositingStrategy = CompositingStrategy.Offscreen
         clip = true
         shape = this@GlassShapeNode.shape
     }

liquid-glass/src/main/java/com/kyant/liquidglass/LiquidGlassModifier.kt

@@ -11,22 +11,21 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Rect
+import androidx.compose.ui.draw.CacheDrawModifierNode
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.asAndroidColorFilter
 import androidx.compose.ui.graphics.asComposeRenderEffect
-import androidx.compose.ui.graphics.drawscope.ContentDrawScope
 import androidx.compose.ui.graphics.drawscope.translate
 import androidx.compose.ui.graphics.layer.GraphicsLayer
 import androidx.compose.ui.graphics.layer.drawLayer
 import androidx.compose.ui.layout.LayoutCoordinates
-import androidx.compose.ui.layout.boundsInRoot
-import androidx.compose.ui.node.DrawModifierNode
+import androidx.compose.ui.layout.positionOnScreen
+import androidx.compose.ui.node.DelegatingNode
 import androidx.compose.ui.node.GlobalPositionAwareModifierNode
 import androidx.compose.ui.node.ModifierNodeElement
 import androidx.compose.ui.node.ObserverModifierNode
-import androidx.compose.ui.node.invalidateDraw
 import androidx.compose.ui.node.observeReads
 import androidx.compose.ui.node.requireGraphicsContext
 import androidx.compose.ui.platform.InspectorInfo
@@ -162,11 +161,11 @@ private class LiquidGlassNode(
     var state: LiquidGlassProviderState,
     var style: () -> GlassStyle,
     val luminanceSampler: LuminanceSampler?
-) : DrawModifierNode, GlobalPositionAwareModifierNode, ObserverModifierNode, Modifier.Node() {
+) : GlobalPositionAwareModifierNode, ObserverModifierNode, DelegatingNode() {
 
     override val shouldAutoInvalidate: Boolean = false
 
-    private var rect: Rect? by mutableStateOf(null)
+    private var position: Offset by mutableStateOf(Offset.Zero)
     private var graphicsLayer: GraphicsLayer? = null
     private var samplerJob: Job? = null
 
@@ -188,15 +187,14 @@ private class LiquidGlassNode(
 
     private var _renderEffect: androidx.compose.ui.graphics.RenderEffect? = null
 
-    private var _rect: Rect? = null
+    private var _position: Offset? = null
 
-    override fun ContentDrawScope.draw() {
+    private val drawNode = delegate(CacheDrawModifierNode {
         val style = currentStyle
 
-        var colorFilterChanged = false
         val colorFilter = style.material.colorFilter
-        if (_colorFilter != colorFilter) {
-            colorFilterChanged = true
+        val colorFilterChanged = _colorFilter != colorFilter
+        if (colorFilterChanged) {
             _colorFilter = colorFilter
             _colorFilterEffect =
                 if (colorFilter != null) {
@@ -233,12 +231,9 @@ private class LiquidGlassNode(
         }
         val blurRenderEffect = _blurRenderEffect
 
-        var sizeChanged = false
         val size = size
-        if (_size != size) {
-            sizeChanged = true
-            _size = size
-        }
+        val sizeChanged = _size != size
+        _size = size
 
         val cornerRadiusPx = style.shape.topStart.toPx(size, this)
         val cornerRadiusChanged = _cornerRadiusPx != cornerRadiusPx
@@ -253,6 +248,9 @@ private class LiquidGlassNode(
                     _innerRefractionAmount != innerRefractionAmount ||
                     _eccentricFactor != eccentricFactor
         if (innerRefractionChanged) {
+            _innerRefractionHeight = innerRefractionHeight
+            _innerRefractionAmount = innerRefractionAmount
+            _eccentricFactor = eccentricFactor
             _innerRefractionRenderEffect =
                 RenderEffect.createRuntimeShaderEffect(
                     refractionShader.apply {
@@ -268,7 +266,8 @@ private class LiquidGlassNode(
         }
         val innerRefractionRenderEffect = _innerRefractionRenderEffect!!
 
-        if (blurRadiusChanged || innerRefractionChanged) {
+        val renderEffectChanged = blurRadiusChanged || innerRefractionChanged
+        if (renderEffectChanged) {
             _renderEffect =
                 if (blurRenderEffect != null) {
                     RenderEffect.createChainEffect(
@@ -283,25 +282,28 @@ private class LiquidGlassNode(
         graphicsLayer?.let { layer ->
             layer.renderEffect = _renderEffect
 
-            val rect = rect!!
-            if (innerRefractionChanged || _rect != rect) {
-                _rect = rect
+            val position = position
+            if (renderEffectChanged || _position != position) {
+                _position = position
                 layer.record {
-                    translate(-rect.left, -rect.top) {
+                    translate(-position.x, -position.y) {
                         drawLayer(state.graphicsLayer)
                     }
                 }
             }
-
-            drawLayer(layer)
         }
 
-        drawContent()
-    }
+        onDrawBehind {
+            graphicsLayer?.let { layer ->
+                drawLayer(layer)
+            }
+        }
+    })
 
     override fun onGloballyPositioned(coordinates: LayoutCoordinates) {
-        rect = state.rect?.let {
-            coordinates.boundsInRoot().translate(-it.topLeft)
+        if (coordinates.isAttached) {
+            val providerPosition = state.position
+            position = coordinates.positionOnScreen() - providerPosition
         }
     }
 
@@ -359,6 +361,6 @@ private class LiquidGlassNode(
 
     private fun updateStyle() {
         observeReads { currentStyle = style() }
-        invalidateDraw()
+        drawNode.invalidateDrawCache()
     }
 }

liquid-glass/src/main/java/com/kyant/liquidglass/LiquidGlassProviderModifier.kt

@@ -5,7 +5,7 @@ import androidx.annotation.RequiresApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.drawscope.ContentDrawScope
 import androidx.compose.ui.layout.LayoutCoordinates
-import androidx.compose.ui.layout.boundsInRoot
+import androidx.compose.ui.layout.positionOnScreen
 import androidx.compose.ui.node.DrawModifierNode
 import androidx.compose.ui.node.GlobalPositionAwareModifierNode
 import androidx.compose.ui.node.ModifierNodeElement
@@ -69,7 +69,9 @@ internal class LiquidGlassProviderNode(
     }
 
     override fun onGloballyPositioned(coordinates: LayoutCoordinates) {
-        state.rect = coordinates.boundsInRoot()
+        if (coordinates.isAttached) {
+            state.position = coordinates.positionOnScreen()
+        }
     }
 
     fun update(

liquid-glass/src/main/java/com/kyant/liquidglass/LiquidGlassProviderState.kt

@@ -6,7 +6,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.geometry.Rect
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.layer.GraphicsLayer
 import androidx.compose.ui.graphics.rememberGraphicsLayer
@@ -30,5 +30,5 @@ class LiquidGlassProviderState internal constructor(
     internal val graphicsLayer: GraphicsLayer
 ) {
 
-    internal var rect: Rect? by mutableStateOf(null)
+    internal var position: Offset by mutableStateOf(Offset.Zero)
 }

liquid-glass/src/main/java/com/kyant/liquidglass/highlight/GlassHighlightElement.kt

@@ -1,7 +1,7 @@
 package com.kyant.liquidglass.highlight
 
 import androidx.compose.foundation.shape.CornerBasedShape
-import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.CacheDrawModifierNode
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
@@ -9,7 +9,6 @@ import androidx.compose.ui.graphics.Outline
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.graphics.asComposeRenderEffect
 import androidx.compose.ui.graphics.drawOutline
-import androidx.compose.ui.graphics.drawscope.ContentDrawScope
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.graphics.drawscope.draw
 import androidx.compose.ui.graphics.drawscope.translate
@@ -17,10 +16,9 @@ import androidx.compose.ui.graphics.isSpecified
 import androidx.compose.ui.graphics.layer.CompositingStrategy
 import androidx.compose.ui.graphics.layer.GraphicsLayer
 import androidx.compose.ui.graphics.layer.drawLayer
-import androidx.compose.ui.node.DrawModifierNode
+import androidx.compose.ui.node.DelegatingNode
 import androidx.compose.ui.node.ModifierNodeElement
 import androidx.compose.ui.node.ObserverModifierNode
-import androidx.compose.ui.node.invalidateDraw
 import androidx.compose.ui.node.observeReads
 import androidx.compose.ui.node.requireGraphicsContext
 import androidx.compose.ui.platform.InspectorInfo
@@ -65,7 +63,7 @@ internal class GlassHighlightElement(
 
 internal class GlassHighlightNode(
     var style: () -> GlassStyle
-) : DrawModifierNode, ObserverModifierNode, Modifier.Node() {
+) : ObserverModifierNode, DelegatingNode() {
 
     override val shouldAutoInvalidate: Boolean = false
 
@@ -73,7 +71,7 @@ internal class GlassHighlightNode(
         set(value) {
             if (field != value) {
                 field = value
-                invalidateDraw()
+                drawNode.invalidateDrawCache()
             }
         }
 
@@ -81,7 +79,7 @@ internal class GlassHighlightNode(
         set(value) {
             if (field != value) {
                 field = value
-                invalidateDraw()
+                drawNode.invalidateDrawCache()
             }
         }
 
@@ -98,10 +96,9 @@ internal class GlassHighlightNode(
 
     private var _cornerRadiusPx = Float.NaN
 
-    override fun ContentDrawScope.draw() {
+    private val drawNode = delegate(CacheDrawModifierNode {
         if (highlight == GlassHighlight.None) {
-            drawContent()
-            return
+            return@CacheDrawModifierNode onDrawBehind {}
         }
 
         val size = size
@@ -156,7 +153,7 @@ internal class GlassHighlightNode(
 
                     layer.record(this, layoutDirection, size.toIntSize()) {
                         draw(
-                            this@draw,
+                            this@CacheDrawModifierNode,
                             layoutDirection,
                             drawContext.canvas,
                             drawContext.size,
@@ -172,13 +169,17 @@ internal class GlassHighlightNode(
                         }
                     }
                 }
-
-                drawLayer(layer)
             }
         }
 
-        drawContent()
-    }
+        onDrawBehind {
+            if (outline != null) {
+                graphicsLayer?.let { layer ->
+                    drawLayer(layer)
+                }
+            }
+        }
+    })
 
     override fun onObservedReadsChanged() {
         updateHighlight()