From 0e751b1eeab56b84ca6bdf9d38dd32278c6258f9 Mon Sep 17 00:00:00 2001
From: Tobias Hunger <tobias.hunger@slint.dev>
Date: Wed, 18 Sep 2024 11:43:06 +0000
Subject: [PATCH] livve-preview: Make the color widget editable

... in a bare-bones fashion.
---
 tools/lsp/preview/ui.rs                | 11 +++++++++--
 tools/lsp/ui/api.slint                 |  4 ++++
 tools/lsp/ui/views/property-view.slint | 25 +++++++++++++++++++++----
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/tools/lsp/preview/ui.rs b/tools/lsp/preview/ui.rs
index 351aa7bcc..ba00350ac 100644
--- a/tools/lsp/preview/ui.rs
+++ b/tools/lsp/preview/ui.rs
@@ -81,6 +81,9 @@ pub fn create_ui(style: String, experimental: bool) -> Result<PreviewUi, Platfor
     api.on_set_string_binding(super::set_string_binding);
     api.on_property_declaration_ranges(super::property_declaration_ranges);
 
+    api.on_string_to_color(|s| string_to_color(&s.to_string()).unwrap_or_default());
+    api.on_string_is_color(|s| string_to_color(&s.to_string()).is_some());
+
     #[cfg(target_vendor = "apple")]
     api.set_control_key_name("command".into());
 
@@ -332,6 +335,10 @@ fn extract_value_with_unit_impl(
     None
 }
 
+fn string_to_color(text: &str) -> Option<slint::Color> {
+    literals::parse_color_literal(&text).map(|c| slint::Color::from_argb_encoded(c))
+}
+
 fn extract_value_with_unit(
     expression: &Option<syntax_nodes::Expression>,
     units: &[i_slint_compiler::expression_tree::Unit],
@@ -358,9 +365,9 @@ fn extract_color(
     value: &mut PropertyValue,
 ) -> bool {
     if let Some(text) = expression.child_text(SyntaxKind::ColorLiteral) {
-        if let Some(color) = literals::parse_color_literal(&text) {
+        if let Some(color) = string_to_color(&text) {
             value.kind = kind;
-            value.value_brush = slint::Brush::SolidColor(slint::Color::from_argb_encoded(color));
+            value.value_brush = slint::Brush::SolidColor(color);
             value.value_string = text.into();
             return true;
         }
diff --git a/tools/lsp/ui/api.slint b/tools/lsp/ui/api.slint
index 957a59b0f..253dac4da 100644
--- a/tools/lsp/ui/api.slint
+++ b/tools/lsp/ui/api.slint
@@ -186,6 +186,10 @@ export global Api {
 
     // # Callbacks
 
+    // ## Custom conversion functions:
+    callback string-is-color(string) -> bool;
+    callback string-to-color(string) -> color;
+
     // ## Style:
     callback style-changed();
 
diff --git a/tools/lsp/ui/views/property-view.slint b/tools/lsp/ui/views/property-view.slint
index 298750d0e..869a5d52e 100644
--- a/tools/lsp/ui/views/property-view.slint
+++ b/tools/lsp/ui/views/property-view.slint
@@ -226,7 +226,7 @@ component ColorWidget inherits HorizontalLayout {
 
         alignment: end;
 
-        Rectangle {
+        color-preview := Rectangle {
             height: 1.8rem;
             width: 2 * self.height;
             
@@ -235,9 +235,26 @@ component ColorWidget inherits HorizontalLayout {
             border-color: Palette.foreground;
         }
 
-        Text {
-            vertical-alignment: center;
-            text: property-information.value.value-string;
+        ResettingLineEdit {
+            default-text: property-information.value.value-string;
+            min-width: 10rem; // Should be enough for 9 chars;-)
+
+            edited(text) => {
+                self.can-compile = Api.string-is-color(text);
+                if self.can-compile {
+                    color-preview.background = Api.string-to-color(text);
+                }
+            }
+
+            accepted(text) => {
+                Api.set-code-binding(
+                    root.element-information.source-uri,
+                    root.element-information.source-version,
+                    root.element-information.range.start,
+                    root.property-information.name,
+                    text,
+                );
+            }
         }
     }
 }