Drag and drop proof of concept

examples/drag_and_drop_ui.rs

@@ -0,0 +1,44 @@
+use bevy::prelude::*;
+use bevy_mod_picking::prelude::*;
+
+fn main() {
+	App::new()
+		.add_plugins((
+			DefaultPlugins,
+			DefaultPickingPlugins,
+		))
+		.add_systems(Startup, init_ui)
+		.run();
+}
+
+fn init_ui(
+	mut commands: Commands,
+) {
+	commands.spawn(Camera3dBundle { ..default() });
+
+	commands.spawn((
+		NodeBundle {
+			style: Style {
+				width: Val::Px(100.0),
+				height: Val::Px(100.0),
+				top: Val::Px(0.0),
+				left: Val::Px(0.0),
+				position_type: PositionType::Absolute,
+				..default()
+			},
+			background_color: Color::WHITE.into(),
+			..default()
+		},
+		PickableBundle::default(),
+		On::<Pointer<Drag>>::target_component_mut::<Style>(|drag, style| {
+			match style.left {
+				Val::Px(curr) => style.left = Val::Px(curr + drag.delta.x),
+				_ => panic!("Drag UI only applies to Val::Px"),
+			}
+			match style.top {
+				Val::Px(curr) => style.top = Val::Px(curr + drag.delta.y),
+				_ => panic!("Drag UI only applies to Val::Px"),
+			}
+		}),
+	));
+}

src/editor.rs

@@ -6,6 +6,7 @@ pub(crate) struct EditorPlugin;
 impl Plugin for EditorPlugin {
     fn build(&self, app: &mut App) {
         app.init_state::<EditorState>();
+		app.init_resource::<EditorInfo>();
         app.add_systems(Startup, init_editor);
         app.add_systems(
             Update,
@@ -32,11 +33,20 @@ enum EditorState {
 #[derive(Component)]
 struct Editor;
 
+#[derive(Resource, Default)]
+struct EditorInfo {
+	camera: Option<Entity>,
+}
+
+/// Simple struct for tracking which entity the editor is displaying info for
+#[derive(Component)]
+struct TargetEntity(Option<Entity>);
+
 /// Spawns all base editor entities including window, camera, and UI elements
-fn init_editor(mut commands: Commands) {
+fn init_editor(mut commands: Commands, mut editor_info: ResMut<EditorInfo>) {
     // Spawn root editor entity hierarchy
     commands
-        .spawn(SpatialBundle { ..default() })
+        .spawn((Editor, SpatialBundle { ..default() }))
         .with_children(|parent| {
             let editor_window = parent
                 .spawn((
@@ -51,7 +61,7 @@ fn init_editor(mut commands: Commands) {
                 .id();
 
             // Spawn editor camera
-            let _editor_camera = parent
+            let editor_camera = parent
                 .spawn((
                     Editor,
                     FlyCamera,
@@ -66,7 +76,35 @@ fn init_editor(mut commands: Commands) {
                     },
                 ))
                 .id();
+			
+			let _ = editor_info.camera.insert(editor_camera);
         });
+	if let Some(c) = editor_info.camera {
+		commands.spawn((
+			Editor,
+			TargetCamera(c),
+			TargetEntity(None),
+		))
+		.add(UiContainer)
+		.insert((
+			Style {
+				top: Val::Px(0.0),
+				left: Val::Px(0.0),
+				max_width: Val::Percent(33.3),
+				..default()
+			},
+			BackgroundColor(Color::BLACK.with_a(0.8)),
+			On::<Pointer<Drag>>::target_component_mut::<Transform>(|drag, mut transform| {
+				transform.translation += Vec3::new(drag.delta.x, drag.delta.y, 0.0);
+			}),
+			PickableBundle { ..default() },
+		))
+		.with_children(|parent| {
+			parent
+				.spawn_empty()
+				.add(UiTitle { text: "EntityInfo", color: Color::WHITE });
+		});
+	}
 }
 
 fn open_editor(mut ws: Query<&mut Window, With<Editor>>) {
@@ -120,3 +158,9 @@ fn world_plane(mut gizmos: Gizmos) {
         });
     });
 }
+
+fn selected_entity_info(
+	query: Query<Entity, With<PickSelection>>
+) {
+	todo!();
+}

src/game/dice.rs

@@ -61,7 +61,7 @@ fn init_dice_ui(mut commands: Commands) {
         .with_children(|parent| {
             parent
                 .spawn_empty()
-                .add(UiTitle { text: "Dice" })
+                .add(UiTitle { text: "Dice", ..default() })
                 .add(UiStyle(Style {
                     position_type: PositionType::Absolute,
                     top: Val::Px(0.0),

src/menu.rs

@@ -34,6 +34,7 @@ fn init_menu_ui(mut commands: Commands) {
         .with_children(|parent| {
             parent.spawn_empty().add(UiTitle {
                 text: "Game Jam Casino",
+                ..default()
             });
             parent
                 .spawn(SetState(GameChoice::Dice))

src/ui.rs

@@ -95,12 +95,22 @@ pub(crate) mod title {
 
     pub(crate) struct UiTitle {
         pub text: &'static str,
+        pub color: Color,
+    }
+
+    impl Default for UiTitle {
+        fn default() -> UiTitle {
+            UiTitle {
+                text: "",
+                color: Color::BLACK,
+            }
+        }
     }
 
     impl EntityCommand for UiTitle {
         fn apply(self, id: Entity, world: &mut World) {
             let title_text_style = TextStyle {
-                color: Color::BLACK,
+                color: self.color,
                 font_size: 32.0,
                 ..default()
             };