颜色编辑面板

Author: zerofancy

src/jvmMain/kotlin/top/ntutn/floatclock/coloredit/ColorEditPanel.kt

@@ -1,14 +1,19 @@
 package top.ntutn.floatclock.coloredit
 
-import androidx.compose.material.TextField
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material.Slider
+import androidx.compose.material.SliderDefaults
+import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.awt.ComposeWindow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.sp
 import java.awt.Dimension
 import javax.swing.JFrame
 
 object ColorEditPanel
 
-fun ColorEditPanel.showEditPanel(lastColor: String, editColorCallback: (String) -> Unit) {
+fun ColorEditPanel.showEditPanel(lastColor: java.awt.Color, editColorCallback: (java.awt.Color) -> Unit) {
     ComposeWindow().also {
         it.setContent {
             ColorEditContent(lastColor, editColorCallback)
@@ -22,10 +27,32 @@ fun ColorEditPanel.showEditPanel(lastColor: String, editColorCallback: (String)
 }
 
 @Composable
-fun ColorEditContent(lastColor: String, editColorCallback: (String) -> Unit) {
-    var colorString by remember { mutableStateOf(lastColor) }
-    TextField(colorString, onValueChange = {
-        colorString = it
-        editColorCallback(it)
-    })
-}
+fun ColorEditContent(lastColor: java.awt.Color, editColorCallback: (java.awt.Color) -> Unit) {
+    Column {
+        var red by remember { mutableStateOf(0) }
+        var green by remember { mutableStateOf(0) }
+        var blue by remember { mutableStateOf(0) }
+
+        LaunchedEffect(lastColor) {
+            red = lastColor.red
+            green = lastColor.green
+            blue = lastColor.blue
+        }
+
+        Text(text = "#${Integer.toHexString(red) + Integer.toHexString(green) + Integer.toHexString(blue)}", color = Color(red, green, blue), fontSize = 20.sp)
+
+        val onSelected = {
+            editColorCallback(java.awt.Color(red, green, blue))
+        }
+
+        Slider(colors = SliderDefaults.colors(thumbColor = Color(red, 0, 0)), value = red.toFloat(), onValueChange =  {
+            red = it.toInt()
+        }, onValueChangeFinished = onSelected, valueRange = 0f..255f, steps = 256)
+        Slider(colors = SliderDefaults.colors(thumbColor = Color(0, green, 0)), value = green.toFloat(), onValueChange =  {
+            green = it.toInt()
+        }, onValueChangeFinished = onSelected, valueRange = 0f..255f, steps = 256)
+        Slider(colors = SliderDefaults.colors(thumbColor = Color(0, 0, blue)), value = blue.toFloat(), onValueChange =  {
+            blue = it.toInt()
+        }, onValueChangeFinished = onSelected, valueRange = 0f..255f, steps = 256)
+    }
+}

src/jvmMain/kotlin/top/ntutn/floatclock/component/ClockComponent.kt

@@ -42,10 +42,9 @@ abstract class ClockComponent : IClockComponent {
 
     override fun showEditColorPanel() {
         val color = textColor.value
-        val r = color.red
-        val g = color.green
-        val b = color.blue
-        ColorEditPanel.showEditPanel("#${Integer.toHexString(r) + Integer.toHexString(g) + Integer.toHexString(b)}", ::changeColor)
+        ColorEditPanel.showEditPanel(color) {
+            textColor.value = saveColor(it)
+        }
     }
 
     private fun saveColor(color: Color): Color {