Added canvas

app/src/main/java/com/mirenkov/ktheightmap/MainActivity.kt

@@ -5,22 +5,32 @@ import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Build
-import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme.colorScheme
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.tooling.preview.Preview
 import com.mirenkov.ktheightmap.ui.theme.KtHeightMapTheme
 
 const val TAG = "KtHeightMap"
+const val TILE_SIZE: Float = 128F
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -28,20 +38,67 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             KtHeightMapTheme {
-                Scaffold(
+                Surface {
-                    modifier = Modifier.fillMaxSize(),
+                    Scaffold(
-                    floatingActionButton = { ToolButton() }
+                        modifier = Modifier.fillMaxSize()
-                ) { innerPadding ->
+                            .safeDrawingPadding(),
-                    Greeting(
+                        floatingActionButton = { ToolButton() }
-                        name = "gryadki",
+                    ) { innerPadding ->
-                        modifier = Modifier.padding(innerPadding)
+                        MapCanvas(
-                    )
+                            gridColor = colorScheme.primary,
+                            backColor = colorScheme.background,
+                            modifier = Modifier.padding(innerPadding),
+                        )
+                    }
                 }
             }
         }
     }
 }
 
+@Composable
+fun MapCanvas(
+    backColor: Color,
+    gridColor: Color,
+    modifier: Modifier = Modifier
+) {
+    val offsetX = rememberSaveable { mutableFloatStateOf(0F) }
+    val offsetY = rememberSaveable { mutableFloatStateOf(0F) }
+    Canvas(
+        modifier = modifier.fillMaxSize()
+            .clickable {
+                offsetX.floatValue += 20
+                offsetY.floatValue += 20
+            }
+    ) {
+        drawRect(
+            color = backColor,
+            size = size
+        )
+
+
+        val strippedOffsetX = offsetX.floatValue % TILE_SIZE
+        val strippedOffsetY = offsetY.floatValue % TILE_SIZE
+
+        val offset = Offset(strippedOffsetX, strippedOffsetY)
+        val grid = size / TILE_SIZE
+        val gridWidth = grid.width.toInt()
+        val gridHeight = grid.height.toInt()
+        for (cellX in 0 .. gridWidth + 1) {
+            val offsetX = TILE_SIZE * (cellX - 1)
+            for (cellY in 0 .. gridHeight + 1) {
+                val offsetY = TILE_SIZE * (cellY - 1)
+                drawRect(
+                    color = gridColor,
+                    size = Size(TILE_SIZE, TILE_SIZE),
+                    topLeft = offset + Offset(offsetX, offsetY),
+                    style = Stroke(width = 4F)
+                )
+            }
+        }
+    }
+}
+
 @Composable
 fun Greeting(name: String, modifier: Modifier = Modifier) {
     Text(
@@ -65,4 +122,12 @@ fun GreetingPreview() {
     KtHeightMapTheme {
         Greeting("Android")
     }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ToolButtonPreview() {
+    KtHeightMapTheme {
+        ToolButton()
+    }
 }