You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
558 lines
20 KiB
Rust
558 lines
20 KiB
Rust
// TODO: Z-index of children should be higher than parents
|
|
|
|
use bevy::prelude::*;
|
|
use monologue_trees::ui::*;
|
|
|
|
fn main() {
|
|
App::new()
|
|
.add_plugins((
|
|
DefaultPlugins.set(WindowPlugin {
|
|
primary_window: Some(Window {
|
|
title: "UI WTF".into(),
|
|
resolution: (640., 480.).into(),
|
|
..default()
|
|
}),
|
|
..default()
|
|
}),
|
|
GameUiPlugin,
|
|
))
|
|
// .init_resource::<Icon>()
|
|
.add_systems(Startup, init_ui2)
|
|
.add_systems(Update, toggle)
|
|
.add_systems(PostUpdate, selection)
|
|
// .add_systems(Startup, init_ui)
|
|
// .add_systems(Update, (cursors, container))
|
|
.run();
|
|
}
|
|
|
|
#[derive(Debug, Bundle)]
|
|
struct UiKitContainer {
|
|
node_bundle: NodeBundle,
|
|
select: Select,
|
|
}
|
|
|
|
#[derive(Copy, Clone)]
|
|
enum UiKitPosition {
|
|
Top,
|
|
Left,
|
|
Right,
|
|
}
|
|
|
|
impl UiKitContainer {
|
|
fn new(position: UiKitPosition) -> Self {
|
|
let style = match position {
|
|
UiKitPosition::Top => Style {
|
|
border: UiRect::all(Val::Px(1.0)),
|
|
top: Val::Percent(102.0),
|
|
left: Val::Px(-2.0),
|
|
flex_direction: FlexDirection::Column,
|
|
align_items: AlignItems::FlexStart,
|
|
display: Display::None,
|
|
..default()
|
|
},
|
|
UiKitPosition::Left => Style {
|
|
border: UiRect::all(Val::Px(1.0)),
|
|
left: Val::Percent(100.0),
|
|
top: Val::Px(-2.0),
|
|
flex_direction: FlexDirection::Column,
|
|
justify_items: JustifyItems::Start,
|
|
display: Display::None,
|
|
..default()
|
|
},
|
|
UiKitPosition::Right => Style {
|
|
border: UiRect::all(Val::Px(1.0)),
|
|
right: Val::Percent(104.0),
|
|
top: Val::Px(-2.0),
|
|
flex_direction: FlexDirection::Column,
|
|
justify_items: JustifyItems::Start,
|
|
display: Display::None,
|
|
..default()
|
|
},
|
|
};
|
|
UiKitContainer {
|
|
node_bundle: NodeBundle {
|
|
style,
|
|
background_color: BackgroundColor(Color::PURPLE),
|
|
border_color: BorderColor(Color::BLACK),
|
|
..default()
|
|
},
|
|
select: Select::None,
|
|
}
|
|
}
|
|
}
|
|
|
|
#[derive(Debug, Bundle)]
|
|
struct UiKitButton {
|
|
button_bundle: ButtonBundle,
|
|
select: Select,
|
|
}
|
|
|
|
impl UiKitButton {
|
|
fn new(color: Color) -> Self {
|
|
UiKitButton {
|
|
button_bundle: ButtonBundle {
|
|
style: Style {
|
|
border: UiRect::all(Val::Px(1.0)),
|
|
width: Val::Px(100.0),
|
|
height: Val::Px(50.0),
|
|
flex_direction: FlexDirection::Column,
|
|
..default()
|
|
},
|
|
background_color: BackgroundColor(color),
|
|
border_color: BorderColor(Color::BLACK),
|
|
..default()
|
|
},
|
|
select: Select::None,
|
|
}
|
|
}
|
|
}
|
|
|
|
#[derive(Debug, Component, Copy, Clone)]
|
|
enum Select {
|
|
Active,
|
|
None,
|
|
}
|
|
|
|
/// When an item is selected/de-selected change it's display accordingly
|
|
fn selection(
|
|
mut events: Query<(&mut BackgroundColor, &Select, &Children), (Changed<Select>, With<Button>)>,
|
|
mut styles: Query<&mut Style>,
|
|
) {
|
|
events
|
|
.iter_mut()
|
|
.for_each(|(mut bg_color, select, children)| {
|
|
bg_color.0 = match select {
|
|
Select::Active => Color::RED,
|
|
Select::None => Color::WHITE,
|
|
};
|
|
children.iter().for_each(|&child| {
|
|
if let Ok(mut style) = styles.get_mut(child) {
|
|
style.display = match select {
|
|
Select::Active => Display::Flex,
|
|
Select::None => Display::None,
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
/// Toggle a UI Nav tree open/closed
|
|
///
|
|
/// PERF: This is hella not performant, we just usually don't have many elements to iterate over so
|
|
/// it's tolerable.
|
|
///
|
|
// TODO: Should not be able to select multiple children in branch of tree
|
|
// TODO: Port to ui.rs
|
|
fn toggle(
|
|
events: Query<Entity, (Changed<Interaction>, With<Button>)>,
|
|
interactions: Query<&Interaction>,
|
|
mut selects: Query<&mut Select>,
|
|
children: Query<&Children>,
|
|
) {
|
|
events.iter().for_each(|entity| {
|
|
// If all interactions are inactive, set all selections to None
|
|
if interactions
|
|
.iter()
|
|
.all(|&interaction| interaction == Interaction::None)
|
|
{
|
|
selects.iter_mut().for_each(|mut select| {
|
|
*select = Select::None;
|
|
});
|
|
// Otherwise change this item's selection
|
|
} else {
|
|
let mut select = selects
|
|
.get_mut(entity)
|
|
.expect("Entity has Select component");
|
|
let interaction = interactions
|
|
.get(entity)
|
|
.expect("Entity has Interaction component");
|
|
*select = match interaction {
|
|
Interaction::Pressed | Interaction::Hovered => Select::Active,
|
|
Interaction::None => {
|
|
let children_inactive = children.iter_descendants(entity).all(|child| {
|
|
if let Ok(&c) = interactions.get(child) {
|
|
c == Interaction::None
|
|
} else {
|
|
true
|
|
}
|
|
});
|
|
if children_inactive {
|
|
Select::None
|
|
} else {
|
|
Select::Active
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// const CURSORS: [CursorIcon; 35] = [
|
|
// CursorIcon::Default,
|
|
// CursorIcon::Crosshair,
|
|
// CursorIcon::Hand,
|
|
// CursorIcon::Arrow,
|
|
// CursorIcon::Move,
|
|
// CursorIcon::Text,
|
|
// CursorIcon::Wait,
|
|
// CursorIcon::Help,
|
|
// CursorIcon::Progress,
|
|
// CursorIcon::NotAllowed,
|
|
// CursorIcon::ContextMenu,
|
|
// CursorIcon::Cell,
|
|
// CursorIcon::VerticalText,
|
|
// CursorIcon::Alias,
|
|
// CursorIcon::Copy,
|
|
// CursorIcon::NoDrop,
|
|
// CursorIcon::Grab,
|
|
// CursorIcon::Grabbing,
|
|
// CursorIcon::AllScroll,
|
|
// CursorIcon::ZoomIn,
|
|
// CursorIcon::ZoomOut,
|
|
// CursorIcon::EResize,
|
|
// CursorIcon::NResize,
|
|
// CursorIcon::NeResize,
|
|
// CursorIcon::NwResize,
|
|
// CursorIcon::SResize,
|
|
// CursorIcon::SeResize,
|
|
// CursorIcon::SwResize,
|
|
// CursorIcon::WResize,
|
|
// CursorIcon::EwResize,
|
|
// CursorIcon::NsResize,
|
|
// CursorIcon::NeswResize,
|
|
// CursorIcon::NwseResize,
|
|
// CursorIcon::ColResize,
|
|
// CursorIcon::RowResize,
|
|
// ];
|
|
|
|
fn spawn_tree(parent: &mut ChildBuilder, pos: UiKitPosition) {
|
|
let pos2 = match pos {
|
|
UiKitPosition::Top => UiKitPosition::Left,
|
|
_ => pos,
|
|
};
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos2))
|
|
.with_children(|parent| {
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
});
|
|
});
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos2))
|
|
.with_children(|parent| {
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
});
|
|
});
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos2))
|
|
.with_children(|parent| {
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
});
|
|
});
|
|
});
|
|
});
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos2))
|
|
.with_children(|parent| {
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
});
|
|
});
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos2))
|
|
.with_children(|parent| {
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
});
|
|
});
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos2))
|
|
.with_children(|parent| {
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
});
|
|
});
|
|
});
|
|
});
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos2))
|
|
.with_children(|parent| {
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
});
|
|
});
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos2))
|
|
.with_children(|parent| {
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
});
|
|
});
|
|
parent
|
|
.spawn(UiKitButton::new(Color::PINK))
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(UiKitContainer::new(pos2))
|
|
.with_children(|parent| {
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
parent.spawn(UiKitButton::new(Color::PINK));
|
|
});
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
fn init_ui2(mut commands: Commands) {
|
|
commands.spawn((
|
|
Camera2dBundle { ..default() },
|
|
UiCameraConfig { show_ui: true },
|
|
));
|
|
|
|
commands
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
width: Val::Percent(100.0),
|
|
height: Val::Percent(100.0),
|
|
justify_content: JustifyContent::SpaceEvenly,
|
|
..default()
|
|
},
|
|
background_color: BackgroundColor(Color::FUCHSIA),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
border: UiRect::all(Val::Px(1.0)),
|
|
left: Val::Px(0.0),
|
|
flex_direction: FlexDirection::Column,
|
|
position_type: PositionType::Absolute,
|
|
align_self: AlignSelf::Center,
|
|
..default()
|
|
},
|
|
background_color: BackgroundColor(Color::PURPLE),
|
|
border_color: BorderColor(Color::BLACK),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
spawn_tree(parent, UiKitPosition::Left);
|
|
});
|
|
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
border: UiRect::all(Val::Px(1.0)),
|
|
right: Val::Px(0.0),
|
|
flex_direction: FlexDirection::Column,
|
|
position_type: PositionType::Absolute,
|
|
align_self: AlignSelf::Center,
|
|
..default()
|
|
},
|
|
background_color: BackgroundColor(Color::PURPLE),
|
|
border_color: BorderColor(Color::BLACK),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
spawn_tree(parent, UiKitPosition::Right);
|
|
});
|
|
|
|
parent
|
|
.spawn(NodeBundle {
|
|
style: Style {
|
|
border: UiRect::all(Val::Px(1.0)),
|
|
top: Val::Px(0.0),
|
|
flex_direction: FlexDirection::Row,
|
|
position_type: PositionType::Absolute,
|
|
..default()
|
|
},
|
|
background_color: BackgroundColor(Color::PURPLE),
|
|
border_color: BorderColor(Color::BLACK),
|
|
..default()
|
|
})
|
|
.with_children(|parent| {
|
|
spawn_tree(parent, UiKitPosition::Top);
|
|
});
|
|
});
|
|
}
|
|
|
|
// #[derive(Debug, Component, Resource, Default)]
|
|
// struct Icon(CursorIcon);
|
|
//
|
|
// fn init_ui(mut commands: Commands) {
|
|
// commands.spawn((
|
|
// Camera2dBundle { ..default() },
|
|
// UiCameraConfig { show_ui: true },
|
|
// ));
|
|
//
|
|
// commands
|
|
// .spawn(NodeBundle {
|
|
// style: Style {
|
|
// height: Val::Percent(100.0),
|
|
// width: Val::Percent(100.0),
|
|
// justify_content: JustifyContent::Start,
|
|
// align_items: AlignItems::Start,
|
|
// ..default()
|
|
// },
|
|
// background_color: BackgroundColor(Color::GRAY),
|
|
// ..default()
|
|
// })
|
|
// .with_children(|parent| {
|
|
// parent
|
|
// .spawn((
|
|
// GameUiNav,
|
|
// // Name::new("Game Nav"),
|
|
// NodeBundle { ..default() },
|
|
// ))
|
|
// .with_children(|parent| {
|
|
// parent
|
|
// .spawn((
|
|
// GameUiTab,
|
|
// Name::new("Grow/Shrink Tab"),
|
|
// NodeBundle { ..default() },
|
|
// ))
|
|
// .with_children(|parent| {
|
|
// parent.spawn((
|
|
// UiKitContainer::new,
|
|
// GameUiSet,
|
|
// // Name::new("Grow/Shrink Set"),
|
|
// NodeBundle { ..default() },
|
|
// ));
|
|
// });
|
|
//
|
|
// parent
|
|
// .spawn((
|
|
// GameUiTab,
|
|
// Name::new("Cursor Icons Tab"),
|
|
// NodeBundle { ..default() },
|
|
// ))
|
|
// .with_children(|parent| {
|
|
// parent
|
|
// .spawn((
|
|
// GameUiSet,
|
|
// // Name::new("Cursor Icons Set"),
|
|
// NodeBundle { ..default() },
|
|
// ))
|
|
// .with_children(|parent| {
|
|
// CURSORS.iter().for_each(|&icon| {
|
|
// parent.spawn((
|
|
// GameUiButton,
|
|
// Name::new(format!("{:?}", icon)),
|
|
// NodeBundle { ..default() },
|
|
// Icon(icon),
|
|
// ));
|
|
// });
|
|
// });
|
|
// });
|
|
// });
|
|
// });
|
|
// }
|
|
//
|
|
// fn cursors(
|
|
// events: Query<(&Interaction, &Icon), (Changed<Interaction>, With<Button>)>,
|
|
// mut primary_window: Query<&mut Window, With<PrimaryWindow>>,
|
|
// mut curr: ResMut<Icon>,
|
|
// ) {
|
|
// events.iter().for_each(|(&interaction, &ref icon)| {
|
|
// let mut window = primary_window.single_mut();
|
|
//
|
|
// match interaction {
|
|
// Interaction::Hovered => {
|
|
// (*window).cursor.icon = icon.0.clone();
|
|
// }
|
|
// Interaction::Pressed => {
|
|
// curr.0 = icon.0.clone();
|
|
// }
|
|
// Interaction::None => {
|
|
// (*window).cursor.icon = curr.0.clone();
|
|
// }
|
|
// }
|
|
// })
|
|
// }
|
|
//
|
|
// #[derive(Debug, Component)]
|
|
// struct Container;
|
|
//
|
|
// fn container(
|
|
// mut events: EventReader<KeyboardInput>,
|
|
// mut commands: Commands,
|
|
// root: Query<Entity, With<container>>,
|
|
// children: Query<&Children, With<container>>,
|
|
// ) {
|
|
// events.iter().for_each(
|
|
// |KeyboardInput {
|
|
// key_code, state, ..
|
|
// }| {
|
|
// match (key_code, state) {
|
|
// (Some(KeyCode::Up), ButtonState::Pressed) => {
|
|
// commands.entity(root.single()).with_children(|parent| {
|
|
// parent.spawn((
|
|
// GameUiButton,
|
|
// Name::new("asdfwtf"),
|
|
// NodeBundle { ..default() },
|
|
// ));
|
|
// });
|
|
// }
|
|
// (Some(KeyCode::Down), ButtonState::Pressed) => {
|
|
// children.single().iter().last().iter().for_each(|&&child| {
|
|
// commands.entity(child).despawn_recursive();
|
|
// });
|
|
// }
|
|
// _ => (),
|
|
// }
|
|
// },
|
|
// )
|
|
// }
|