Reusable button components with observer

[Akryum]

Hello! (I'm new to Bevy.) In the pursuit of having reusable entities (and UI node!) I came up with this code with:

• a "factory" SystemParam to create tuples of components
• a centralized button interaction system that also trigger the event on the entity itself so it can be then observed.

use bevy::{ecs::system::SystemParam, prelude::*, ui::widget::NodeImageMode};

pub struct PewUiSysButtonPlugin;

impl Plugin for PewUiSysButtonPlugin {
  fn build(&self, app: &mut App) {
    app.add_event::<BaseButtonActionEvent>();

    app.add_systems(Update, base_button_interaction);
  }
}

#[derive(Component, Default, Debug, Reflect)]
pub struct BaseButton {
  pub id: String,
}

#[derive(Event, Debug, Reflect)]
pub struct BaseButtonActionEvent {
  pub id: String,
}

#[derive(SystemParam)]
pub struct BaseButtonFactory<'w> {
  asset_server: Res<'w, AssetServer>,
  texture_atlases: ResMut<'w, Assets<TextureAtlasLayout>>,
}

impl <'w> BaseButtonFactory<'_> {
  pub fn button_components (
    &mut self,
    id: &str,
    width: Val,
    height: Val,
  )-> (Button, ImageNode, Node, BaseButton) {
    return (
      Button,
      ImageNode::from_atlas_image(
        self.asset_server.load("ui/button-slice-001.png"),
        TextureAtlas::from(self.texture_atlases.add(TextureAtlasLayout::from_grid(
          (104, 64).into(),
          2,
          1,
          None,
          None,
        ))),
      ).with_mode(NodeImageMode::Sliced(TextureSlicer {
        border: BorderRect {
          left: 50.,
          right: 50.,
          top: 30.,
          bottom: 30.,
        },
        center_scale_mode: SliceScaleMode::Stretch,
        sides_scale_mode: SliceScaleMode::Stretch,
        max_corner_scale: 1.,
      })),
      Node {
        width,
        height,
        align_items: AlignItems::Center,
        justify_content: JustifyContent::Center,
        margin: UiRect::all(Val::Px(32.)),
        ..default()
      },
      BaseButton {
        id: id.to_string(),
      },
    );
  }

  pub fn button_text_components (
    &mut self,
    text: &str,
  ) -> (Text, TextFont) {
    return (
      Text::new(text),
      TextFont {
        font_size: 24.0,
        font: self.asset_server.load("fonts/ShareTech-Regular.ttf"),
        ..default()
      },
    );
  }
}

fn base_button_interaction (
  mut commands: Commands,
  mut button_query: Query<(&Interaction, Entity, &BaseButton, &mut ImageNode)>,
  mut button_action_events: EventWriter<BaseButtonActionEvent>,
) {
  for (interaction, btn_entity, base_button, mut image_node) in button_query.iter_mut() {
    match *interaction {
      Interaction::Hovered => {
        if let Some(atlas) = &mut image_node.texture_atlas {
          atlas.index = 1;
        }
      },
      Interaction::Pressed => {
        button_action_events.send(BaseButtonActionEvent {
          id: base_button.id.clone(),
        });
        commands.entity(btn_entity).trigger(BaseButtonActionEvent {
          id: base_button.id.clone(),
        });
      },
      Interaction::None => {
        if let Some(atlas) = &mut image_node.texture_atlas {
          atlas.index = 0;
        }
      }
    }
  }
}

I can then do this to create a button easily and attach an event callback to it:

parent.spawn((
  Name::new("Continue Button"),
  button_factory.button_components(
    "level-up.continue",
    Val::Px(200.),
    Val::Px(64.),
  ),
  ContinueButton,
)).observe(|_: Trigger<BaseButtonActionEvent>, mut continue_events: EventWriter<LevelUpContinueEvent>| {
  continue_events.send(LevelUpContinueEvent);
}).with_children(|parent| {
  parent.spawn(button_factory.button_text_components("CONTINUE"));
});

Is this good practice? Anything I'm doing horribly wrong? 🐈