feat: sketch canvas initial empty state (WPB-6960) (#2908)

features/sketch/src/main/java/com/wire/android/feature/sketch/DrawingCanvasComponent.kt

@@ -30,23 +30,24 @@ import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.graphics.nativeCanvas
-import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.graphics.vector.VectorPainter
-import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.input.pointer.AwaitPointerEventScope
 import androidx.compose.ui.input.pointer.pointerInput
-import androidx.compose.ui.input.pointer.positionChange
+import androidx.compose.ui.input.pointer.positionChangedIgnoreConsumed
 import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.res.imageResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.text.TextMeasurer
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.drawText
 import androidx.compose.ui.text.rememberTextMeasurer
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.toSize
 import com.wire.android.feature.sketch.model.DrawingMotionEvent
 import com.wire.android.feature.sketch.model.DrawingState
@@ -93,8 +94,8 @@ private fun CanvasLayout(
     val textLayoutResult = remember(emptyCanvasText) {
         textMeasurer.measure(emptyCanvasText, emptyCanvasStyle)
     }
-    val vector = ImageVector.vectorResource(id = R.drawable.ic_long_arrow)
-    val painter = rememberVectorPainter(image = vector)
+    // todo: change later this mirrored to the non mirrored, when we have the full toolbar.
+    val arrowDrawable = ImageBitmap.Companion.imageResource(id = R.drawable.ic_arrow_onboarding_mirror)
     val drawModifier = Modifier
         .fillMaxSize()
         .clipToBounds() // necessary to draw inside the canvas.
@@ -126,7 +127,7 @@ private fun CanvasLayout(
             restoreToCount(checkPoint)
         }
         if (paths.isEmpty()) {
-            emptyCanvasState(textMeasurer, emptyCanvasText, emptyCanvasStyle, textLayoutResult, painter)
+            emptyCanvasState(textMeasurer, emptyCanvasText, emptyCanvasStyle, textLayoutResult, arrowDrawable)
         }
     }
 }
@@ -136,24 +137,23 @@ private fun DrawScope.emptyCanvasState(
     emptyCanvasText: String,
     emptyCanvasStyle: TextStyle,
     textLayoutResult: TextLayoutResult,
-    painter: VectorPainter
+    arrowDrawable: ImageBitmap
 ) {
+    val textPosition = Offset(
+        x = center.x - textLayoutResult.size.width / 2,
+        y = center.y - textLayoutResult.size.height / 2
+    )
     drawText(
         textMeasurer = textMeasurer,
         text = emptyCanvasText,
         style = emptyCanvasStyle,
-        topLeft = Offset(
-            x = center.x - textLayoutResult.size.width / 2,
-            y = center.y - textLayoutResult.size.height / 2
+        topLeft = textPosition,
+
         )
+    drawImage(
+        image = arrowDrawable,
+        topLeft = textPosition.plus(Offset(x = textLayoutResult.size.width / 4f, y = textLayoutResult.size.height + 30.dp.toPx()))
     )
-    // todo. uncomment when figure it out how to position this correctly on the canvas.
-    val enabled = false
-    if (enabled) {
-        with(painter) {
-            draw(painter.intrinsicSize, alpha = .5f)
-        }
-    }
 }
 
 /**
@@ -172,10 +172,28 @@ private suspend fun AwaitPointerEventScope.handleGestures(
     do {
         val event = awaitPointerEvent()
         onDraw(event.changes.first().position)
-        val hasNewLineDraw = event.changes.first().positionChange() != Offset.Zero
+        val hasNewLineDraw = event.changes.first().positionChangedIgnoreConsumed()
         if (hasNewLineDraw) {
             event.changes.first().consume()
         }
     } while (event.changes.any { it.pressed })
     onStopDrawing()
 }
+
+@Preview(showBackground = true, device = Devices.NEXUS_10)
+@Preview(showBackground = true, device = Devices.PIXEL_2)
+@Preview(showBackground = true, device = Devices.PIXEL_7A)
+@Preview(showBackground = true)
+@Composable
+fun PreviewCanvasEmptyState() {
+    DrawingCanvasComponent(
+        state = DrawingState(),
+        onStartDrawingEvent = {},
+        onDrawEvent = {},
+        onStopDrawingEvent = {},
+        onSizeChanged = {},
+        onStartDrawing = {},
+        onDraw = {},
+        onStopDrawing = {}
+    )
+}