【Kotlinプログラム入門】Jetpcak composeでお絵描きアプリを作成してみよう！

package com.example.drawtool

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.example.drawtool.ui.theme.DrawToolTheme
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DrawToolTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    DrawingBoard()
                }
            }
        }
    }
}

@Composable
fun DrawingBoard() {
    var lines by remember { mutableStateOf<List<List<Offset>>>(emptyList()) }
    var currentLine by remember { mutableStateOf<List<Offset>>(emptyList()) }
    var penColors by remember { mutableStateOf<List<Color>>(emptyList()) }
    var currentPenColor by remember { mutableStateOf(Color.Black) }

    Box(modifier = Modifier.fillMaxSize()) {
        Canvas(
            modifier = Modifier
                .fillMaxSize()
                .pointerInput(Unit) {
                    detectDragGestures(
                        onDragStart = {
                            currentLine = emptyList()
                            penColors = penColors + currentPenColor
                        },
                        onDrag = { change, dragAmount ->
                            val newPoint = change.position
                            currentLine = currentLine + newPoint
                        },
                        onDragEnd = {
                            lines = lines + listOf(currentLine)
                            currentLine = emptyList()
                        }
                    )
                }
        ) {
            lines.forEachIndexed { index, line ->
                val color = if (index < penColors.size) penColors[index] else Color.Black
                drawPoints(
                    points = line,
                    pointMode = androidx.compose.ui.graphics.PointMode.Polygon,
                    color = color,
                    strokeWidth = 5f
                )
            }
            drawPoints(
                points = currentLine,
                pointMode = androidx.compose.ui.graphics.PointMode.Polygon,
                color = currentPenColor,
                strokeWidth = 5f
            )
        }

        DeleteButton(
            modifier = Modifier
                .size(100.dp)
                .align(Alignment.BottomEnd)
                .padding(16.dp)
        ) {
            lines = emptyList()
            penColors = emptyList()
        }

        ColorPickerButton(
            modifier = Modifier
                .size(100.dp)
                .align(Alignment.BottomStart)
                .padding(16.dp),
            onColorSelected = { color ->
                currentPenColor = color
            }
        )
    }
}

@Composable
fun DeleteButton(modifier: Modifier = Modifier, onDelete: () -> Unit) {
    Button(
        modifier = modifier,
        onClick = onDelete
    ) {
        Text("消")
    }
}

@Composable
fun ColorPickerButton(modifier: Modifier = Modifier, onColorSelected: (Color) -> Unit) {
    var selectedColor by remember { mutableStateOf(Color.Black) }
    var showDialog by remember { mutableStateOf(false) }

    if (showDialog) {
        LaunchedEffect(Unit) {
            selectedColor = Color.Black
        }
        Dialog(onDismissRequest = { showDialog = false }) {
            Column(
                modifier = Modifier.padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                listOf(Color.Black, Color.Red, Color.Green, Color.Blue, Color.Yellow, Color.Cyan, Color.Magenta).forEach { color ->
                    Box(
                        modifier = Modifier
                            .size(50.dp)
                            .background(color)
                            .clickable {
                                selectedColor = color
                                onColorSelected(selectedColor)
                                showDialog = false
                            }
                    )
                }
            }
        }
    }

    Button(
        modifier = modifier,
        onClick = { showDialog = true }
    ) {
        Text("色")
    }
}