new items ui - images can now be rotated/scaled

README.md

@@ -15,11 +15,11 @@ Eventually, this will be a level editor... But until then, I guess it's just fun
   - [x] Show images in tree view
   - [x] Show/Hide images
   - [x] Move/Drag images around
-  - [ ] Control images Z value(so we could reorder them)
+  - [x] Control images Z value(so we could reorder them)
   - [x] Delete images
   - [x] Name images
   - [ ] Duplicate images(and also shapes maybe?)?
-  - [ ] Scale images
+  - [x] Scale images
 - [x] Show hide shapes
 - [x] Control shape Z value
 - [x] Snap to grid

src/create.rs

@@ -9,7 +9,7 @@ pub fn create_sys(
     state: Res<UiState>,
     mouse: Res<Input<MouseButton>>,
     wnds: Res<Windows>,
-    mut first_point: Local<Option<ShapeData>>,
+    mut shape: Local<Option<ShapeData>>,
     q_cam: Query<(&Camera, &GlobalTransform), With<MainCamera>>,
     mut paths: Query<&mut Path>,
     mut transforms: Query<&mut Transform>,
@@ -20,7 +20,7 @@ pub fn create_sys(
     if let Some(mouse_pos) = mouse_pos {
         let mouse_pos = snap.snap_to_grid(mouse_pos);
 
-        if let Some(sd) = &mut *first_point {
+        if let Some(sd) = &mut *shape {
             update_main_shape_creation(&mut paths, &transforms, sd, mouse_pos);
 
             if mouse.just_released(MouseButton::Left) {
@@ -50,16 +50,16 @@ pub fn create_sys(
 
                     finalize_shape_redraw(&mut paths, &transforms, sd, mouse_pos - center);
 
-                    let mut ms = coms.entity(sd.main_shape);
+                    let mut s = shape.take().unwrap();
-                    ms.add_child(sd.center.unwrap());
+                    s.name = format!("{:?} {}", s.shape, s.main_shape.id());
-                    for e in sd.edges.iter() {
+
+                    let mut ms = coms.entity(s.main_shape);
+                    ms.add_child(s.center.unwrap());
+                    for e in s.edges.iter() {
                         ms.add_child(*e);
                     }
-
+                    ms.insert(s);
-
+                    *shape = None;
-                    coms.spawn()
-                        .insert(first_point.take().unwrap());
-                    *first_point = None;
                 }
             }
             else if mouse.just_released(MouseButton::Right) {
@@ -69,14 +69,14 @@ pub fn create_sys(
                 coms.entity(sd.main_shape).despawn();
                 sd.edges.iter().for_each(|e| coms.entity(*e).despawn());
 
-                *first_point = None;
+                *shape = None;
             }
         }
     
         else if mouse.just_released(MouseButton::Left) {
             // We can now spawn a shape in the current mouse position...
             // Spawn the first point
-            *first_point = Some(create_new_shape(&mut coms, mouse_pos, state.create_shape, p_size.0));
+            *shape = Some(create_new_shape(&mut coms, mouse_pos, state.create_shape, p_size.0));
         }
     }
 }
@@ -328,5 +328,5 @@ fn create_new_shape(coms: &mut Commands, pos: Vec2, create_shape: CreateShape, p
     };
     let edges = if center.is_none() { Vec::from([fp]) } else { Vec::new() };
 
-    ShapeData { shape: create_shape, main_shape, edges, center, name: None }
+    ShapeData { shape: create_shape, main_shape, edges, center, name: "shape".to_string() }
 }

src/lib.rs

@@ -47,7 +47,7 @@ pub struct ImageSize(pub Vec2);
 
 #[derive(Component, Debug)]
 pub struct ShapeData {
-    pub name: Option<String>,
+    pub name: String,
     pub shape: CreateShape,
     pub main_shape: Entity,
     pub edges: Vec<Entity>,

src/main.rs

@@ -24,6 +24,7 @@ fn main() {
         .insert_resource(UiState::default())
         .insert_resource(PointSize(6.0))
         .insert_resource(SnapGrid::default())
+        .insert_resource(ui::SelectedItem::default())
     ;
 
     app
@@ -42,13 +43,14 @@ fn main() {
             if !ec.ctx_mut().is_pointer_over_area() && state.current_action == Action::Modify { ShouldRun::Yes } else { ShouldRun::No }
         ))
         .add_system(ui::action_bar_sys)
-        .add_system(ui::shape_tree_sys)
+        .add_system(ui::items_tree_sys)
+        .add_system(ui::inspector_sys)
+        .add_system(ui::grid_window_sys)
         .add_system(show_hide_points)
         .add_system(color_points)
         .add_system(drag_camera_sys)
         .add_system(zoom_camera_sys)
         .add_system(scale_points)
-        .add_system(ui::grid_window_sys)
     ;
     
     app.run();

src/ui.rs

@@ -4,6 +4,9 @@ use bevy_egui::{egui, EguiContext};
 use bevy_prototype_lyon::prelude::{Path, DrawMode, FillMode, StrokeMode};
 use crate::*;
 
+#[derive(Default, Deref, DerefMut, Clone)]
+pub struct SelectedItem(pub Option<Entity>);
+
 pub fn action_bar_sys(
     mut coms: Commands,
     assets: Res<AssetServer>,
@@ -103,168 +106,200 @@ pub fn grid_window_sys(
             
         });
 }
-
+/// Items tree
-pub fn shape_tree_sys(
+/// 
-    mut name_change: Local<Option<(Entity, String)>>,
+/// Select items to edit in an inspector window/panel,
-    mut coms: Commands,
+/// or just change the visibility of items
+/// 
+/// TODO: Allow drag and drop to re-order + reparent
+pub fn items_tree_sys(
+    mut selected: ResMut<SelectedItem>,
     mut egui_ctx: ResMut<EguiContext>,
-    mut shapes: Query<(Entity, &mut ShapeData)>,
+    shapes:Query<(Entity, &ShapeData)>,
+    mut visible: Query<&mut Visibility, Or<(With<Path>, With<Sprite>)>>,
+    images: Query<(Entity, &ImageName), With<Sprite>>,
+) {
+    egui::Window::new("Items")
+        .default_pos((10.0,100.0))
+        .title_bar(true)
+        .resizable(false)
+        .show(egui_ctx.ctx_mut(), |ui| {
+            for (e, sd) in shapes.iter() {
+                ui.horizontal(|hui| {
+                    let color = if let Some(se) = **selected && se == e { egui::Color32::GOLD } else { egui::Color32::WHITE };
+                    let label = egui::Label::new(egui::RichText::new(&sd.name).color(color)).sense(egui::Sense::click());
+                    if hui.add(label).clicked() {
+                        if color == egui::Color32::GOLD {
+                            **selected = None;
+                        }
+                        else {
+                            **selected = Some(e);
+                        }
+                    }
+
+                    if let Ok(mut v) = visible.get_mut(e) {
+                        let rt = egui::RichText::new("V");
+                        if hui.button(if v.is_visible { rt } else { rt.strikethrough() }).clicked() {
+                            v.is_visible ^= true;
+                        }
+                    }
+                });
+            }
+            for (e, n) in images.iter() {
+                ui.horizontal(|hui| {
+                    let color = if let Some(se) = **selected && se == e { egui::Color32::GOLD } else { egui::Color32::WHITE };
+                    let label = egui::Label::new(egui::RichText::new(&**n).color(color)).sense(egui::Sense::click());
+                    if hui.add(label).clicked() {
+                        if color == egui::Color32::GOLD {
+                            **selected = None;
+                        }
+                        else {
+                            **selected = Some(e);
+                        }
+                    }
+
+                    if let Ok(mut v) = visible.get_mut(e) {
+                        let rt = egui::RichText::new("V");
+                        if hui.button(if v.is_visible { rt } else { rt.strikethrough() }).clicked() {
+                            v.is_visible ^= true;
+                        }
+                    }
+                });
+            }
+
+        });
+}
+
+pub fn inspector_sys(
+    mut selected: ResMut<SelectedItem>, // Which item is currently selected
+    mut coms: Commands, // For deletion!
+    mut egui_ctx: ResMut<EguiContext>,
+    mut shapes: Query<&mut ShapeData>,
     mut transforms: Query<&mut Transform>,
     global_transforms: Query<&GlobalTransform>,
     mut paths: Query<&mut Path>,
     mut draw_modes: Query<&mut DrawMode, With<Path>>,
     mut visible: Query<&mut Visibility, Or<(With<Path>, With<Sprite>)>>,
-    mut images: Query<(Entity, &mut ImageName), With<Sprite>>,
+    mut images: Query<&mut ImageName, With<Sprite>>,
 ) {
-    if !shapes.is_empty() {
+    if let Some(e) = **selected {
-        egui::Window::new("Shape Tree")
+        let mut open = true;
-        .default_pos((10.0, 100.0))
-        .title_bar(true)
-        .resizable(false)
-        .show(egui_ctx.ctx_mut(), |ui| {
-            for (e, mut sd) in shapes.iter_mut () {
-                ui.push_id(e.id(), |ui| {
-                    let mut ui_func = |ui: &mut egui::Ui| {
-                        if let Ok(mut t) = transforms.get_mut(sd.main_shape) {
-                            ui.horizontal(|hui| {
-                                hui.label("Translation:");
-                                hui.add(egui::DragValue::new(&mut t.translation.x));
-                                hui.add(egui::DragValue::new(&mut t.translation.y)); 
-                            });
-                            ui.horizontal(|hui| {
-                                hui.label("Z:");
-                                hui.add(egui::DragValue::new(&mut t.translation.z).clamp_range(0..=i32::MAX));
-                            });
-                            ui.horizontal(|hui| {
-                                hui.label("Rotation:");
-                                let mut rot = t.rotation.to_euler(EulerRot::XYZ).2.to_degrees();
-                                if hui.add(egui::DragValue::new(&mut rot).suffix("°")).changed() {
-                                    t.rotation = Quat::from_rotation_z(rot.to_radians());
-                                }
-                            });
-                        }
-                        for (i, edge) in sd.edges.iter().enumerate() {
-                            ui.horizontal(|hui| {
-                                hui.label(format!("Edge {}", i));
-                                let gt = global_transforms.get(*edge).unwrap();
-                                let mut gt_x = gt.translation().x;
-                                let mut gt_y = gt.translation().y;
-                                let c1 = hui.add(egui::DragValue::new(&mut gt_x)).changed();
-                                let c2 = hui.add(egui::DragValue::new(&mut gt_y)).changed();
 
-                                if c1 || c2 {
+        egui::Window::new("Inspector")
-                                    let rot = gt.to_scale_rotation_translation().1;
+            .default_pos((350.0, 350.0))
-                                    let ang = rot.to_euler(EulerRot::XYZ).2;
+            .fixed_size((150.0, f32::INFINITY))
-                                    let delta = Mat2::from_angle(-ang) * (Vec2::new(gt_x, gt_y) - gt.translation().xy());
+            .title_bar(true)
-                                    if let Ok(mut t) = transforms.get_mut(*edge) {
+            .collapsible(false)
-                                        t.translation += delta.extend(0.0);
+            .open(&mut open)
-                                    }
+            .resizable(false)
-                                    // We need to recalculate the center, and update the points to be the new relevant point from the center
+            .show(egui_ctx.ctx_mut(), |ui| {
-                                    let center_offset = modify::calc_shape_center_offset(&transforms, &*sd);
+                if let Ok(mut sd) = shapes.get_mut(e) {
-                                    // Update each edge's offset, and then move the main shape's translation
+                    ui.horizontal(|hui| {
-                                    for edge in sd.edges.iter() {
+                        hui.label("Name:");
-                                        if let Ok(mut t) = transforms.get_mut(*edge) {
+                        hui.text_edit_singleline(&mut sd.name);
-                                            t.translation -= center_offset.extend(0.0);
+                    });
-                                        }
+                    ui.separator();
-                                    }
+                    if let Ok(mut t) = transforms.get_mut(sd.main_shape) {
-                                    if let Ok(mut t) = transforms.get_mut(sd.main_shape) {
-                                        t.translation += (Mat2::from_angle(ang) * center_offset).extend(0.0);
-                                    }
-
-                                    // Now we need to update the shape itself
-                                    modify::update_main_shape(&mut paths, &transforms, &*sd);
-                                }
-                            });
-                        }
-                    };
-                    if let Some((sde, name)) = &mut *name_change && *sde == e {
-                        // Changing the current shape's name
-                        let te = egui::TextEdit::singleline(name).desired_width(100.0);
-
-                        if ui.add(te).lost_focus() {
-                            let (_, name) = name_change.take().unwrap();
-                            sd.name = Some(name);
-                        }
-                    }
-                    else {
-                        let default_name = format!("{:?}", sd.shape);
                         ui.horizontal(|hui| {
-                            let collapse = hui.collapsing(sd.name.as_ref().unwrap_or(&default_name), |ui| {
+                            hui.label("Translation:");
-                                ui.horizontal(|hui| {
+                            hui.add(egui::DragValue::new(&mut t.translation.x));
-                                    if hui.button("E").clicked() {
+                            hui.add(egui::DragValue::new(&mut t.translation.y)); 
-                                        *name_change = Some((e, format!("{:?}", sd.shape)));
+                        
-                                    }
+                        });
-                                    if hui.button("D").clicked() {
+                        ui.horizontal(|hui| {
-                                        coms.entity(sd.main_shape).despawn_recursive();
+                            hui.label("Rotation:");
-                                        coms.entity(e).despawn();
+                            let mut rot = t.rotation.to_euler(EulerRot::XYZ).2.to_degrees();
-                                    }
+                            if hui.add(egui::DragValue::new(&mut rot).suffix("°")).changed() {
-                                    let mut v = visible.get_mut(sd.main_shape).unwrap();
+                                t.rotation = Quat::from_rotation_z(rot.to_radians());
-                                    let text = if v.is_visible { egui::RichText::new("V") } else { egui::RichText::new("V").strikethrough() };
-                                    if hui.button(text).clicked() {
-                                        v.is_visible ^= true;
-                                    }
-                                });
-                                ui_func(ui);
-                            });
-                            if collapse.fully_closed() {
-                                if hui.button("E").clicked() {
-                                    *name_change = Some((e, default_name));
-                                }
-                                if hui.button("D").clicked() {
-                                    coms.entity(sd.main_shape).despawn_recursive();
-                                    coms.entity(e).despawn();
-                                }
-                                let mut v = visible.get_mut(sd.main_shape).unwrap();
-                                let text = if v.is_visible { egui::RichText::new("V") } else { egui::RichText::new("V").strikethrough() };
-                                if hui.button(text).clicked() {
-                                    v.is_visible ^= true;
-                                }
                             }
-                            let d_normal = DrawMode::Outlined {
+                            hui.label("Z:");
-                                fill_mode: FillMode::color(Color::rgba(0.0, 0.5, 0.5, 0.4)),
+                            hui.add(egui::DragValue::new(&mut t.translation.z).clamp_range(0..=i32::MAX));
-                                outline_mode: StrokeMode::new(Color::rgba(0.0, 0.5, 0.5, 0.6), 3.0),
+                        });
-                            };
+                    }
-                            let d_open = DrawMode::Outlined {
+                    ui.separator();
-                                fill_mode: FillMode::color(Color::rgba(0.0, 0.5, 0.5, 0.4)),
+                    for (i, edge) in sd.edges.iter().enumerate() {
-                                outline_mode: StrokeMode::new(Color::GOLD, 3.0),
+                        ui.horizontal(|hui| {
-                            };
+                            hui.label(format!("Edge {}", i));
+                            let gt = global_transforms.get(*edge).unwrap();
+                            let mut gt_x = gt.translation().x;
+                            let mut gt_y = gt.translation().y;
+                            let c1 = hui.add(egui::DragValue::new(&mut gt_x)).changed();
+                            let c2 = hui.add(egui::DragValue::new(&mut gt_y)).changed();
 
-                            let wanted_dm = if collapse.fully_open() { d_open } else { d_normal };
+                            if c1 || c2 {
-                            if let Ok(mut dm) = draw_modes.get_mut(sd.main_shape) {
+                                let rot = gt.to_scale_rotation_translation().1;
-                                if *dm != wanted_dm {
+                                let ang = rot.to_euler(EulerRot::XYZ).2;
-                                    *dm = wanted_dm
+                                let delta = Mat2::from_angle(-ang) * (Vec2::new(gt_x, gt_y) - gt.translation().xy());
+                                if let Ok(mut t) = transforms.get_mut(*edge) {
+                                    t.translation += delta.extend(0.0);
                                 }
+                                // We need to recalculate the center, and update the points to be the new relevant point from the center
+                                let center_offset = modify::calc_shape_center_offset(&transforms, &*sd);
+                                // Update each edge's offset, and then move the main shape's translation
+                                for edge in sd.edges.iter() {
+                                    if let Ok(mut t) = transforms.get_mut(*edge) {
+                                        t.translation -= center_offset.extend(0.0);
+                                    }
+                                }
+                                if let Ok(mut t) = transforms.get_mut(sd.main_shape) {
+                                    t.translation += (Mat2::from_angle(ang) * center_offset).extend(0.0);
+                                }
+
+                                // Now we need to update the shape itself
+                                modify::update_main_shape(&mut paths, &transforms, &*sd);
                             }
                         });
                     }
-                });
+                    ui.separator();
-            }
+                    if let Ok(mut v) = visible.get_mut(e) {
-            for (e, mut n) in images.iter_mut() {
+                        ui.checkbox(&mut v.is_visible, "Visible");
-                if let Some((ne, name)) = &mut *name_change && *ne == e {
+                    }
-                    let te = egui::TextEdit::singleline(name);
 
-                    if ui.add(te).lost_focus() {
+                    ui.separator();
-                        let (_, name) = name_change.take().unwrap();
+                    if ui.button("Delete").clicked() {
-                        **n = name;
+                        coms.entity(e).despawn_recursive();
+                        **selected = None;
                     }
                 }
-                else {
+                else if let Ok(mut name) = images.get_mut(e) {
                     ui.horizontal(|hui| {
-                        hui.label(&**n);
+                        hui.label("Name:");
-                        if hui.button("E").clicked() {
+                        hui.text_edit_singleline(&mut **name);
-                            *name_change = Some((e, n.clone()));
-                        }
-                        if hui.button("D").clicked() {
-                            coms.entity(e).despawn();
-                        }
-                        let mut v = visible.get_mut(e).unwrap();
-                        let text = if v.is_visible { egui::RichText::new("V") } else { egui::RichText::new("V").strikethrough() };
-                        if hui.button(text).clicked() {
-                            v.is_visible ^= true;
-                        }
                     });
+                    ui.separator();
+
+                    if let Ok(mut t) = transforms.get_mut(e) {
+                        ui.horizontal(|hui| {
+                            hui.label("Translation:");
+                            hui.add(egui::DragValue::new(&mut t.translation.x));
+                            hui.add(egui::DragValue::new(&mut t.translation.y)); 
+                        
+                        });
+                        ui.horizontal(|hui| {
+                            hui.label("Rotation:");
+                            let mut rot = t.rotation.to_euler(EulerRot::XYZ).2.to_degrees();
+                            if hui.add(egui::DragValue::new(&mut rot).suffix("°")).changed() {
+                                t.rotation = Quat::from_rotation_z(rot.to_radians());
+                            }
+                            hui.label("Z:");
+                            hui.add(egui::DragValue::new(&mut t.translation.z).clamp_range(0..=i32::MAX));
+                        });
+                        ui.horizontal(|hui| {
+                            hui.label("Scale:");
+                            hui.add(egui::DragValue::new(&mut t.scale.x).speed(0.01));
+                            hui.add(egui::DragValue::new(&mut t.scale.y).speed(0.01));
+                        });
+                    }
+
+                    ui.separator();
+                    if ui.button("Delete").clicked() {
+                        coms.entity(e).despawn_recursive();
+                        **selected = None;
+                    }
                 }
-            }
+            });
-        });
+        if !open {
+            **selected = None;
+        }
     }
 }