livve-preview: Make the color widget editable

... in a bare-bones fashion.
task-jp · Sep 18, 2024 · 0e751b1 · 0e751b1
1 parent 81be4f2
commit 0e751b1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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,
+                );
+            }
         }
     }
 }