Add color pickers for background and line color

src/css.rs

@@ -109,6 +109,19 @@ impl RulesCache {
         self.rules.iter().filter(|rule| selector.matches(&rule.selector)).collect()
     }
 
+    pub fn get_matching_rules_mut(&mut self, selector: &Selector) -> Vec<&mut Rule> {
+
+        self.rules.iter_mut().filter(|rule| selector.matches(&rule.selector)).collect()
+    }
+
+    pub fn add_rule(&mut self, rule: Rule) {
+        self.rules.push(rule);
+    }
+
+    pub fn try_get_rule_mut(&mut self, selector: Selector) -> Option<&mut Rule> {
+        self.rules.iter_mut().find(|rule| selector == rule.selector)
+    }
+
     /// Updates the CSS cache from the watched file if there was any changes.
     /// 
     /// Returns whether a successful update happened.
@@ -448,6 +461,7 @@ pub struct Color {
 }
 
 impl Color {
+    pub const TRANSPARENT: Color = Color { r: 0, g: 0, b: 0, a: 0.0, };
     pub const _WHITE: Color = Color { r: 255, g: 255, b: 255, a: 1.0, };
     pub const _BLACK: Color = Color { r:   0, g:   0, b:   0, a: 1.0, };
     pub const RED:   Color = Color { r: 255, g:   0, b:   0, a: 1.0, };

src/drawing/ui.rs

@@ -1,5 +1,12 @@
+use crate::vector_tile::object::Object;
+use crate::app_state::EditableObject;
 use crate::app_state::AppState;
 use imgui::*;
+use crate::css::{
+    CSSValue,
+    Color,
+    Rule,
+};
 
 pub struct HUD {
     platform: imgui_winit_support::WinitPlatform,
@@ -65,7 +72,7 @@ impl HUD {
         {
             let window = imgui::Window::new(im_str!("Hello world"));
             window
-                .size([300.0, 100.0], imgui::Condition::FirstUseEver)
+                .size([400.0, 800.0], imgui::Condition::FirstUseEver)
                 .build(&ui, || {
                     ui.text(im_str!("{:#?}", app_state.hovered_objects.iter().map(|o| o.tags.clone()).collect::<Vec<_>>()));
                     ui.separator();
@@ -84,8 +91,8 @@ impl HUD {
 
             let window = imgui::Window::new(im_str!("Hello too"));
             window
-                .size([400.0, 200.0], Condition::FirstUseEver)
-                .position([400.0, 200.0], Condition::FirstUseEver)
+                .size([400.0, 800.0], Condition::FirstUseEver)
+                .position([520.0, 60.0], Condition::FirstUseEver)
                 .build(&ui, || {
                     let mut item: i32 = 0;
                     for i in 0..app_state.selected_objects.len() {
@@ -111,7 +118,31 @@ impl HUD {
                     }
                 });
 
-            ui.show_demo_window(&mut true);
+            let window = imgui::Window::new(im_str!("Edit Feature"));
+            window
+                .size([400.0, 800.0], Condition::FirstUseEver)
+                .position([980.0, 60.0], Condition::FirstUseEver)
+                .build(&ui, || {
+                    let objects = &mut app_state.selected_objects;
+
+                    if let Some(EditableObject {
+                        object: Object {
+                            selector,
+                            ..
+                        },
+                        ..
+                    }) = objects.iter_mut().find(|object| object.selected) {
+                        let mut rules = app_state.css_cache.get_matching_rules_mut(&selector);
+                        ui.text(im_str!("Hello world!"));
+
+                        for rule in rules.iter_mut() {
+                            add_color_picker(&ui, rule, "background-color");
+                            add_color_picker(&ui, rule, "border-color");
+                        }
+                    }
+                });
+
+            // ui.show_demo_window(&mut false);
         }
 
         self.platform.prepare_render(&ui, &window);
@@ -124,4 +155,47 @@ impl HUD {
         self.platform.handle_event(self.imgui.io_mut(), &window, &event);
         self.imgui.io().want_capture_mouse
     }
+}
+
+fn add_color_picker(ui: &Ui, rule: &mut Rule, attribute: &str) {
+    let show_block = CollapsingHeader::new(&ui, &im_str!("{:#?}", rule.selector)).build();
+    if show_block {
+        let default_color = CSSValue::Color(Color::TRANSPARENT);
+        let color = if let Some(color) = rule.kvs.get(attribute) {
+            color
+        } else {
+            &default_color
+        };
+        let color = match color {
+            CSSValue::String(string) => {
+                match &string[..] {
+                    "red" => Color::RED,
+                    "green" => Color::GREEN,
+                    "blue" => Color::BLUE,
+                    _ => Color::TRANSPARENT,
+                }
+            },
+            CSSValue::Color(color) => {
+                color.clone()
+            },
+            _ => Color::TRANSPARENT, // This should never happen, but transparent should be a decent fallback
+        };
+        let mut color = [
+            color.r as f32 / 255.0,
+            color.g as f32 / 255.0, 
+            color.b as f32 / 255.0,
+            color.a
+        ];
+        let label = im_str!("{}", attribute);
+        let cp = ColorPicker::new(&label, EditableColor::Float4(&mut color));
+        cp
+            .build(&ui);
+
+        rule.kvs.insert(attribute.to_string(), CSSValue::Color(Color {
+            r: (color[0] * 255.0) as u8,
+            g: (color[1] * 255.0) as u8,
+            b: (color[2] * 255.0) as u8,
+            a: color[3],
+        }));
+    }
 }

src/main.rs

@@ -27,14 +27,15 @@ fn main() {
     let tile_coordinate = math::deg2num(47.3769, 8.5417, z as u32);
     let zurich = math::num_to_global_space(&tile_coordinate);
 
-    let size = 600;
+    let width = 1600;
+    let height = 1000;
 
     let mut events_loop = wgpu::winit::EventsLoop::new();
     let hdpi_factor = events_loop.get_available_monitors().next().expect("No monitors found").get_hidpi_factor();
 
-    let mut app_state = app_state::AppState::new("config/style.css", zurich.clone(), size, size, z, hdpi_factor);
+    let mut app_state = app_state::AppState::new("config/style.css", zurich.clone(), width, height, z, hdpi_factor);
 
-    let mut painter = drawing::Painter::init(&events_loop, size, size, &app_state);
+    let mut painter = drawing::Painter::init(&events_loop, width, height, &app_state);
     let mut hud = drawing::ui::HUD::new(&painter.window, &mut painter.device);
 
     let mut status = true;