edit: display color components

Still no actual editing though.

1 files changed, 87 insertions, 2 deletions

diff --git a/src/edit.rs b/src/edit.rs
index d640db2..2192f2c 100644
--- a/src/edit.rs
+++ b/src/edit.rs
@@ -12,6 +12,10 @@ slint::slint! {
     export global Aux := {
         property<int> selected: 0;
         callback format-rgb-hex(color) -> string;
+        callback format-rgb-component(int) -> string;
+        callback color-of-rgb-component(string, int) -> color;
+        callback component-of-rgb(string, color) -> int;
+        callback selected-color() -> color;
     }
 
     Colors := Rectangle {
@@ -67,6 +71,53 @@ slint::slint! {
         }
     }
 
+    ComponentEdit := HorizontalBox {
+        height    : 18pt;
+        alignment : start;
+
+        property <int>    val;
+        property <string> comp : "";
+
+        Text {
+            width       : 15%;
+            height      : 14.4pt;
+            color       : #a0a0a0;
+            font-size   : 12pt;
+            font-weight : 700;
+            text        : Aux.format-rgb-component (val);
+        }
+
+        Rectangle {
+            border-width : 2px;
+            height       : 14.4pt;
+            width        : 75%;
+            background   : Aux.color-of-rgb-component (comp, val);
+        }
+    }
+
+    Edit := Rectangle {
+        width        : 100%;
+        border-width : 2px;
+        background: @linear-gradient(90deg, #002b36 0%, #073642 100%);
+        property<color> rgb : Colors.white;
+
+        callback update (color);
+        update (col) => {
+            debug("edit > update");
+            //red.val   = col.red();
+            //green.val = col.green();
+            //blue.val  = col.blue();
+        }
+
+        VerticalBox {
+            alignment : start;
+
+            red     := ComponentEdit { val : Aux.component-of-rgb("r", rgb); comp: "r"; }
+            green   := ComponentEdit { val : Aux.component-of-rgb("g", rgb); comp: "g"; }
+            blue    := ComponentEdit { val : Aux.component-of-rgb("b", rgb); comp: "b"; }
+        }
+    }
+
     GuiEdit := Window {
         property scheme-name <=> name.text;
 
@@ -108,11 +159,16 @@ slint::slint! {
                 if (event.modifiers.control) {
                     //debug("control was pressed during this event");
                 }
+                edit.update(
+                    Aux.selected < 8
+                        ? primary-colors.colors   [Aux.selected]
+                        : secondary-colors.colors [Aux.selected - 8]
+                );
                 accept
             }
         }
 
-        color-vbox := VerticalBox {
+        master := VerticalBox {
             alignment: start;
 
             callback select-prev();
@@ -151,6 +207,9 @@ slint::slint! {
             secondary-colors := Colors {
                 base : 8;
             }
+
+            edit := Edit {
+            }
         }
     }
 }
@@ -189,7 +248,9 @@ impl Edit
 
         let gui = GuiEdit::new();
 
-        gui.on_user_quit (move || { std::process::exit(0); });
+        gui.on_user_quit(move || {
+            std::process::exit(0);
+        });
 
         gui.global::<Aux>().on_format_rgb_hex(|col| {
             let x = (col.red() as u32) << 2
@@ -198,6 +259,30 @@ impl Edit
             format!("#{:06x}", x).into()
         });
 
+        gui.global::<Aux>().on_format_rgb_component(|val| {
+            let val = 0xff & val;
+            format!("#{:02x} ({})", val, val).into()
+        });
+
+        gui.global::<Aux>().on_color_of_rgb_component(|comp, val| {
+            match comp.as_str() {
+                "r" => Color::from_rgb_u8(val as u8, 0, 0),
+                "g" => Color::from_rgb_u8(0, val as u8, 0),
+                "b" => Color::from_rgb_u8(0, 0, val as u8),
+                _ => Color::from_rgb_u8(0, 0, 0),
+            }
+        });
+
+        /* Why the hell is there no API for this in .60‽ */
+        gui.global::<Aux>().on_component_of_rgb(|comp, col| {
+            match comp.as_str() {
+                "r" => col.red() as i32,
+                "g" => col.green() as i32,
+                "b" => col.blue() as i32,
+                _ => 0,
+            }
+        });
+
         if let Some(name) = name {
             gui.set_scheme_name(name.into());
         }