feat: take transformed coordinates, which are more precise in animation

e2e/android/app/src/main/java/com/example/androidobservability/masking/XMLUserFormActivity.kt

@@ -1,6 +1,10 @@
 package com.example.androidobservability.masking
 
+import android.animation.ObjectAnimator
+import android.animation.ValueAnimator
 import android.os.Bundle
+import android.view.View
+import android.view.animation.LinearInterpolator
 import android.widget.Button
 import android.widget.EditText
 import android.widget.Toast
@@ -13,6 +17,13 @@ class XMLUserFormActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_user_form)
 
+        val creditCardSection = findViewById<View>(R.id.credit_card_section)
+        ObjectAnimator.ofFloat(creditCardSection, "rotationY", 0f, 360f).apply {
+            duration = 2000
+            repeatCount = ValueAnimator.INFINITE
+            interpolator = LinearInterpolator()
+        }.start()
+
         val inputCardholderName = findViewById<EditText>(R.id.input_cardholder_name)
         val inputCardNumber = findViewById<EditText>(R.id.input_card_number)
         val inputExpiry = findViewById<EditText>(R.id.input_expiry)

e2e/android/app/src/main/res/layout/activity_user_form.xml

@@ -90,101 +90,108 @@
             </LinearLayout>
 
             <!-- Credit Card Section -->
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="Credit Card Information"
-                android:textStyle="bold"
-                android:paddingBottom="8dp" />
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="Cardholder Name" />
-
-            <EditText
-                android:id="@+id/input_cardholder_name"
+            <LinearLayout
+                android:id="@+id/credit_card_section"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:hint="e.g., Jane Appleseed"
-                android:inputType="textPersonName"
-                android:paddingBottom="8dp" />
-
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="Card Number" />
+                android:orientation="vertical">
 
-            <EditText
-                android:id="@+id/input_card_number"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:hint="1234 5678 9012 3456"
-                android:inputType="number"
-                android:maxLength="19"
-                android:paddingBottom="8dp" />
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="Credit Card Information"
+                    android:textStyle="bold"
+                    android:paddingBottom="8dp" />
 
-            <LinearLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:orientation="horizontal"
-                android:weightSum="2"
-                android:paddingBottom="8dp">
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="Cardholder Name" />
 
-                <LinearLayout
-                    android:layout_width="0dp"
+                <EditText
+                    android:id="@+id/input_cardholder_name"
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_weight="1"
-                    android:orientation="vertical"
-                    android:paddingRight="8dp">
+                    android:hint="e.g., Jane Appleseed"
+                    android:inputType="textPersonName"
+                    android:paddingBottom="8dp" />
 
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:text="Expiry (MM/YY)" />
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="Card Number" />
 
-                    <EditText
-                        android:id="@+id/input_expiry"
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:hint="MM/YY"
-                        android:inputType="number" />
-                </LinearLayout>
+                <EditText
+                    android:id="@+id/input_card_number"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:hint="1234 5678 9012 3456"
+                    android:inputType="number"
+                    android:maxLength="19"
+                    android:paddingBottom="8dp" />
 
                 <LinearLayout
-                    android:layout_width="0dp"
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_weight="1"
-                    android:orientation="vertical"
-                    android:paddingLeft="8dp">
+                    android:orientation="horizontal"
+                    android:weightSum="2"
+                    android:paddingBottom="8dp">
 
-                    <TextView
-                        android:layout_width="wrap_content"
+                    <LinearLayout
+                        android:layout_width="0dp"
                         android:layout_height="wrap_content"
-                        android:text="CVV" />
-
-                    <EditText
-                        android:id="@+id/input_cvv"
-                        android:layout_width="match_parent"
+                        android:layout_weight="1"
+                        android:orientation="vertical"
+                        android:paddingRight="8dp">
+
+                        <TextView
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="Expiry (MM/YY)" />
+
+                        <EditText
+                            android:id="@+id/input_expiry"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:hint="MM/YY"
+                            android:inputType="number" />
+                    </LinearLayout>
+
+                    <LinearLayout
+                        android:layout_width="0dp"
                         android:layout_height="wrap_content"
-                        android:hint="123"
-                        android:inputType="numberPassword"
-                        android:maxLength="4" />
+                        android:layout_weight="1"
+                        android:orientation="vertical"
+                        android:paddingLeft="8dp">
+
+                        <TextView
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:text="CVV" />
+
+                        <EditText
+                            android:id="@+id/input_cvv"
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:hint="123"
+                            android:inputType="numberPassword"
+                            android:maxLength="4" />
+                    </LinearLayout>
                 </LinearLayout>
-            </LinearLayout>
 
-            <TextView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:text="ZIP / Postal Code" />
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:text="ZIP / Postal Code" />
 
-            <EditText
-                android:id="@+id/input_zip_code"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:hint="e.g., 94105"
-                android:inputType="textPostalAddress"
-                android:paddingBottom="8dp" />
+                <EditText
+                    android:id="@+id/input_zip_code"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:hint="e.g., 94105"
+                    android:inputType="textPostalAddress"
+                    android:paddingBottom="8dp" />
+            </LinearLayout>
 
             <Button
                 android:id="@+id/button_save_card"

sdk/@launchdarkly/observability-android/lib/src/main/kotlin/com/launchdarkly/observability/replay/capture/CaptureSource.kt

@@ -16,6 +16,7 @@ import android.view.Window
 import android.view.WindowManager.LayoutParams.TYPE_APPLICATION
 import android.view.WindowManager.LayoutParams.TYPE_BASE_APPLICATION
 import androidx.annotation.RequiresApi
+import android.graphics.Path
 import com.launchdarkly.logging.LDLogger
 import com.launchdarkly.observability.coroutines.DispatcherProviderHolder
 import com.launchdarkly.observability.replay.masking.MaskMatcher
@@ -32,6 +33,7 @@ import kotlin.coroutines.resume
 import androidx.core.graphics.withTranslation
 import com.launchdarkly.observability.replay.masking.Mask
 import androidx.core.graphics.createBitmap
+import com.launchdarkly.observability.replay.masking.draw
 
 /**
  * A source of [CaptureEvent]s taken from the lowest visible window. Captures
@@ -86,7 +88,10 @@ class CaptureSource(
                     }
                 }
             }
-
+
+            val timestamp = System.currentTimeMillis()
+            val session = sessionManager.getSessionId()
+
             val windowsEntries = windowInspector.appWindows()
             if (windowsEntries.isEmpty()) {
                 return@withContext null
@@ -104,8 +109,6 @@ class CaptureSource(
             // TODO: O11Y-625 - see if holding bitmap is more efficient than base64 encoding immediately after compression
             // TODO: O11Y-628 - use captureQuality option for scaling and adjust this bitmap accordingly, may need to investigate power of 2 rounding for performance
             // Create a bitmap with the window dimensions
-            val timestamp = System.currentTimeMillis()
-            val session = sessionManager.getSessionId()
             val baseResult = captureViewResult(baseWindowEntry) ?: return@withContext null
 
             // capture rest of views on top of base
@@ -169,6 +172,7 @@ class CaptureSource(
     private suspend fun captureViewResult(windowEntry: WindowEntry): CaptureResult? {
         val bitmap = captureViewBitmap(windowEntry) ?: return null
         val masks = maskCollector.collectMasks(windowEntry.rootView, maskMatchers)
+
         return CaptureResult(windowEntry, bitmap, masks)
     }
 
@@ -281,14 +285,31 @@ class CaptureSource(
      * @param masks areas that will be masked
      */
     private fun drawMasks(canvas: Canvas, masks: List<Mask>) {
+        val path = Path()
         masks.forEach { mask ->
-            val integerRect = Rect(
-                mask.rect.left.toInt(),
-                mask.rect.top.toInt(),
-                mask.rect.right.toInt(),
-                mask.rect.bottom.toInt()
-            )
-            canvas.drawRect(integerRect, maskPaint)
+            mask.draw(path, canvas, maskPaint)
+        }
+    }
+
+    val maskIntRect = Rect()
+    fun drawMask(mask: Mask, path: Path, canvas: Canvas, paint: Paint) {
+        if (mask.points != null) {
+            val pts = mask.points
+
+            path.reset()
+            path.moveTo(pts[0], pts[1])
+            path.lineTo(pts[2], pts[3])
+            path.lineTo(pts[4], pts[5])
+            path.lineTo(pts[6], pts[7])
+            path.close()
+
+            canvas.drawPath(path, paint)
+        } else {
+            maskIntRect.left = mask.rect.left.toInt()
+            maskIntRect.top = mask.rect.top.toInt()
+            maskIntRect.right = mask.rect.right.toInt()
+            maskIntRect.bottom =  mask.rect.bottom.toInt()
+            canvas.drawRect(maskIntRect, paint)
         }
     }
 }

sdk/@launchdarkly/observability-android/lib/src/main/kotlin/com/launchdarkly/observability/replay/masking/ComposeMaskTarget.kt

@@ -1,6 +1,8 @@
 package com.launchdarkly.observability.replay.masking
 
+import android.os.Build
 import android.view.View
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.toAndroidRectF
 import androidx.compose.ui.platform.AbstractComposeView
 import androidx.compose.ui.semantics.SemanticsNode
@@ -73,12 +75,14 @@ data class ComposeMaskTarget(
         return config.contains(SemanticsProperties.Text)
     }
 
-    override fun mask(): Mask? {
+    override fun mask(context: MaskContext): Mask? {
         val rect = boundsInWindow.toAndroidRectF()
         if (rect.width() <= 0f || rect.height() <= 0f) {
             return null
         }
-        return Mask(boundsInWindow.toAndroidRectF(), view.id)
+
+        val points: FloatArray? = points(context)
+        return Mask(boundsInWindow.toAndroidRectF(), view.id, points)
     }
 
     override fun hasLDMask(): Boolean {
@@ -103,6 +107,41 @@ data class ComposeMaskTarget(
         return hasSensitiveDescription
     }
 
+    // return 4 points of polygon under transformations
+    private fun points(context: MaskContext): FloatArray? {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) {
+            return null
+        }
+
+        val coordinates = rootNode.layoutInfo.coordinates
+        if (!coordinates.isAttached) {
+            return null
+        }
+
+        val size = coordinates.size
+        if (size.width <= 0 || size.height <= 0) {
+            return null
+        }
+
+        val t1 = coordinates.localToScreen(Offset(0f, 0f))
+        val t2 = coordinates.localToScreen(Offset(size.width.toFloat(), 0f))
+        val t3 = coordinates.localToScreen(Offset(size.width.toFloat(), size.height.toFloat()))
+        val t4 = coordinates.localToScreen(Offset(0f, size.height.toFloat()))
+
+        val pts = floatArrayOf(
+            t1.x, t1.y,
+            t2.x, t2.y,
+            t3.x, t3.y,
+            t4.x, t4.y
+        )
+
+        for (i in pts.indices step 2) {
+            pts[i] -= context.rootX
+            pts[i + 1] -= context.rootY
+        }
+
+        return pts
+    }
 }