Haalka

https://docs.rs/haalka/0.7.1/
Admin
Haalka is an ergonomic reactive Bevy UI library powered by FRP signals with alignment semantics,...
Tokens:1,208,065
Snippets:6,127
Trust Score:9.1
Update:6 months ago
Show doc for...
Tokens:
Raw
### Main Application Setup

Source: https://docs.rs/haalka/0.7.1/src/dragging/dragging.rs.html

Sets up the Bevy application, including necessary plugins and startup systems for the dragging example. It initializes the MaxZIndex resource to manage element stacking.

```rust
fn main() {
    App::new()
        .add_plugins((examples_plugin, EntropyPlugin::<WyRand>::default()))
        .add_systems(
            Startup,
            (
                |world: &mut World| {
                    ui_root().spawn(world);
                },
                camera,
            ),
        )
        .insert_resource(MaxZIndex::default())
        .run();
}
```

--------------------------------

### Responsive Menu Implementation

Source: https://docs.rs/haalka/0.7.1/src/responsive_menu/responsive_menu.rs.html

A complete example showing the setup of a responsive menu that switches between row and column layouts based on screen width, using nine-slice textures for buttons.

```rust
//! - A simple game menu, with buttons that use a nine-patch system for design (i.e., composed of
//!   images for the corners and middle segments) and an image to the right of the buttons.
//! - For normal screen sizes, the menu is centered in the middle of the screen
//! - For 400px width and lower, the buttons fill the screen width and the image is above the
//!   buttons.

mod utils;
use utils::*;

use bevy::{
    prelude::*,
    ui::{Pressed, widget::NodeImageMode},
    window::WindowResized,
};
use haalka::prelude::*;

fn main() {
    App::new()
        .add_plugins(examples_plugin)
        .add_systems(
            Startup,
            (setup, |world: &mut World| {
                ui_root().spawn(world);
            })
                .chain(),
        )
        .add_systems(Update, on_resize)
        .insert_resource(Width(0.))
        .run();
}

#[derive(Resource, Clone, Copy, Deref, DerefMut)]
struct Width(f32);

#[derive(Resource, Clone, Deref, DerefMut)]
struct NineSliceTexture(Handle<Image>);

#[derive(Resource, Clone, Deref, DerefMut)]
struct NineSliceTextureAtlasLayout(Handle<TextureAtlasLayout>);

#[derive(Resource, Clone, Deref, DerefMut)]
struct MenuImage(Handle<Image>);

const BASE_SIZE: f32 = 600.;
const GAP: f32 = 10.;
const FONT_SIZE: f32 = 33.33;

fn nine_slice_el(frame_signal: impl Signal<Item = usize> + 'static) -> El<ImageNode> {
    El::<ImageNode>::new()
        .with_builder(|builder| {
            builder.on_spawn_with_system(
                |In(entity): In<Entity>,
                 mut commands: Commands,
                 texture: Res<NineSliceTexture>,
                 layout: Res<NineSliceTextureAtlasLayout>| {
                    commands.entity(entity).insert(
                        ImageNode::from_atlas_image(
                            texture.0.clone(),
                            TextureAtlas {
                                layout: layout.0.clone(),
                                index: 0,
                            },
                        )
                        .with_mode(NodeImageMode::Sliced(TextureSlicer {
                            border: BorderRect::all(24.0),
                            center_scale_mode: SliceScaleMode::Stretch,
                            sides_scale_mode: SliceScaleMode::Stretch,
                            max_corner_scale: 1.0,
                        })),
                    );
                },
            )
        })
        .on_signal_with_image_node(frame_signal.dedupe(), move |mut image, frame| {
            if let Some(atlas) = &mut image.texture_atlas {
                atlas.index = frame;
            }
        })
}

fn nine_slice_button() -> impl Element {
    let lazy_entity = LazyEntity::new();
    let pressed = signal::from_entity(lazy_entity.clone())
        .has_component::<Pressed>()
        .dedupe();
    let hovered = signal::from_entity(lazy_entity.clone())
        .has_component::<Hovered>()
        .dedupe();
    nine_slice_el(signal::zip!(pressed, hovered).dedupe().map_in(|(pressed, hovered)| {
        if pressed {
            2
        } else if hovered {
            1
        } else {
            0
        }
    }))
    .lazy_entity(lazy_entity)
    .with_node(|mut node| {
        node.width = Val::Px(100.);
        node.height = Val::Px(50.);
    })
    .insert((Pickable::default(), Hoverable, Pressable))
    .cursor(CursorIcon::System(SystemCursorIcon::Pointer))
}

fn menu() -> impl Element {
    let width = signal::from_resource_changed::<Width>().map_in(deref_copied);
    let is_wide = width.clone().map_in(|width| width > 400.).dedupe();
    let image_el = || {
        El::<ImageNode>::new().with_builder(|builder| {
            builder.on_spawn_with_system(
                |In(entity): In<Entity>, mut commands: Commands, menu_image: Res<MenuImage>| {
                    commands.entity(entity).insert(ImageNode::new(menu_image.0.clone()));
                },
            )
        })
    };
    nine_slice_el(signal::once(3))
        .with_node(|mut node| {
            node.height = Val::Px(BASE_SIZE);
            node.padding = UiRect::all(Val::Px(GAP));
        })
        .on_signal_with_node(
            width.map_in(|width| BASE_SIZE.min(width)).dedupe().map_in(Val::Px),
            |mut node, width| node.width = width,
        )
        .child(
            Stripe::<Node>::new()
                .direction_signal(
                    is_wide
                        .clone()
                        .map_bool_in(|| stripe::Direction::Row, || stripe::Direction::Column),
                )
                .with_node(|mut node| {
```

--------------------------------

### Run examples with Cargo

Source: https://docs.rs/haalka/0.7.1/haalka/index.html

Execute specific UI examples using the cargo run command.

```bash
cargo run --example counter
cargo run --example button
cargo run --example align
cargo run --example scroll
cargo run --example scroll_grid
cargo run --example snake
cargo run --example dot_counter
cargo run --example key_values_sorted
cargo run --example calculator
cargo run --example nested_lists

# ui challenges from https://github.com/bevyengine/bevy/discussions/11100
cargo run --example main_menu
cargo run --example inventory
cargo run --example healthbar
cargo run --example responsive_menu
cargo run --example character_editor
cargo run --example futures_signals_jonmo_compat --features futures_signals_ui
```

--------------------------------

### Spawning UI Root in Bevy App (Responsive Menu Example)

Source: https://docs.rs/haalka/0.7.1/haalka/element/trait.Spawnable.html

Example of spawning a UI root element into a Bevy application's world during startup, with chained systems for setup and UI initialization. This pattern is common for initializing UI components.

```rust
fn main() {
    App::new()
        .add_plugins(examples_plugin)
        .add_systems(
            Startup,
            (setup, |world: &mut World| {
                ui_root().spawn(world);
            })
                .chain(),
        )
        .add_systems(Update, on_resize)
        .insert_resource(Width(0.))
        .run();
}
```

--------------------------------

### Run Haalka Examples with Just

Source: https://docs.rs/haalka/0.7.1/haalka

Alternatively, use the `just` command for running examples, for instance, `just example snake -r`.

```bash
just example snake -r
```

--------------------------------

### Healthbar Example Implementation

Source: https://docs.rs/haalka/0.7.1/src/healthbar/healthbar.rs.html

The main entry point and system definitions for the healthbar example, including player movement, health management, and scene setup.

```rust
//! - Simple 3D Scene with a character (sphere).
//!   - Can be moved around with WASD/arrow keys.
//! - A health bar and character name is anchored to the character in world-space.
//! - The health starts at 10 and decreases by 1 every second. The health should be stored and
//!   managed in Bevy ECS. When reaching 0 HP, the character should be despawned together with UI.

mod utils;
use utils::*;

use bevy::prelude::*;
use colorgrad::{self, Gradient};
use haalka::prelude::*;

fn main() {
    App::new()
        .add_plugins(examples_plugin)
        .add_systems(PreStartup, setup)
        .add_systems(Startup, |world: &mut World| {
            ui_root().spawn(world);
        })
        .add_systems(
            Update,
            (movement, sync_tracking_healthbar_position, decay, despawn_when_dead)
                .chain()
                .run_if(any_with_component::<Player>),
        )
        .add_observer(
            |_: On<SpawnPlayer>,
             mut meshes: ResMut<Assets<Mesh>>,
             mut materials: ResMut<Assets<StandardMaterial>>,
             mut cached: Local<Option<(Handle<Mesh>, Handle<StandardMaterial>)>>,
             mut commands: Commands| {
                let (mesh, material) = cached.get_or_insert_with(|| {
                    (
                        meshes.add(Mesh::from(Sphere { radius: RADIUS })),
                        materials.add(Color::srgb_u8(228, 147, 58)),
                    )
                });
                commands.spawn((
                    Player,
                    Health(PLAYER_HEALTH),
                    Mesh3d(mesh.clone()),
                    Transform::from_translation(PLAYER_POSITION),
                    MeshMaterial3d(material.clone()),
                ));
            },
        )
        .insert_resource(StyleData::default())
        .insert_resource(HealthTickTimer(Timer::from_seconds(
            HEALTH_TICK_RATE,
            TimerMode::Repeating,
        )))
        .run();
}

const SPEED: f32 = 10.0;
const RADIUS: f32 = 0.5;
const MINI: (f32, f32) = (200., 25.);
const MAXI: (f32, f32) = (500., 50.);
const NAME: &str = "avi";
const CAMERA_POSITION: Vec3 = Vec3::new(8., 10.5, 8.);
const PLAYER_POSITION: Vec3 = Vec3::new(0., RADIUS, 0.);
const PLAYER_HEALTH: u32 = 10;
const HEALTH_TICK_RATE: f32 = 1.;

#[derive(Clone, Copy, Default, PartialEq, Resource)]
struct StyleData {
    left: f32,
    top: f32,
    scale: f32,
}

#[derive(Component, Clone, Copy)]
struct Health(u32);

#[derive(Component)]
struct Player;

fn setup(mut meshes: ResMut<Assets<Mesh>>, mut materials: ResMut<Assets<StandardMaterial>>, mut commands: Commands) {
    commands.spawn((
        Mesh3d(meshes.add(Plane3d::default().mesh().size(50.0, 50.0))),
        MeshMaterial3d(materials.add(Color::srgb_u8(87, 108, 50))),
    ));
    commands.spawn((
        PointLight {
            shadows_enabled: true,
            intensity: 1_500_000.,
            range: 100.,
            ..default()
        },
        Transform::from_xyz(0., 8., 0.),
    ));
    commands.spawn((
        Camera3d::default(),
        Transform::from_translation(CAMERA_POSITION).looking_at(Vec3::ZERO, Vec3::Y),
    ));
    commands.trigger(SpawnPlayer);
}

fn movement(
    keys: Res<ButtonInput<KeyCode>>,
    camera: Single<&Transform, (With<Camera3d>, Without<Player>)>,
    mut player: Single<&mut Transform, With<Player>>,
    time: Res<Time>,
) {
    let mut direction = Vec3::ZERO;
    if keys.pressed(KeyCode::KeyW) || keys.pressed(KeyCode::ArrowUp) {
        direction += Vec3::from(camera.forward());
    }
    if keys.pressed(KeyCode::KeyA) || keys.pressed(KeyCode::ArrowLeft) {
        direction += Vec3::from(camera.left());
    }
    if keys.pressed(KeyCode::KeyS) || keys.pressed(KeyCode::ArrowDown) {
        direction += Vec3::from(camera.back());
    }
    if keys.pressed(KeyCode::KeyD) || keys.pressed(KeyCode::ArrowRight) {
        direction += Vec3::from(camera.right());
    }
    let movement = direction.normalize_or_zero() * SPEED * time.delta_secs();
    player.translation.x += movement.x;
    player.translation.z += movement.z;
}

#[allow(clippy::type_complexity)]
fn sync_tracking_healthbar_position(
    player_transform: Single<&Transform, (With<Health>, Or<(Changed<Transform>, Added<Transform>)>)>,
    camera_data: Single<(&Camera, &Transform), (With<Camera3d>, Without<Player>)>,
    // mut ui_scale: ResMut<UiScale>,  // wanted more local ui scaling
    mut style_data: ResMut<StyleData>,
) {
    let (camera, camera_transform) = *camera_data;
    let scale = camera_transform.translation.distance(player_transform.translation);
```

--------------------------------

### Define Shared Examples Plugin

Source: https://docs.rs/haalka/0.7.1/haalka/prelude/struct.HaalkaPlugin.html

Configures default Bevy plugins, window settings, and common UI elements for examples.

```rust
pub(crate) fn examples_plugin(app: &mut App) {
    app.add_plugins((
        bevy::DefaultPlugins.set(WindowPlugin {
            primary_window: Some(Window {
                resolution: WindowResolution::new(WINDOW_WIDTH, WINDOW_HEIGHT),
                position: WindowPosition::Centered(MonitorSelection::Primary),
                #[cfg(feature = "deployed_wasm_example")]
                canvas: Some("#bevy".to_string()),
                fit_canvas_to_parent: true,
                prevent_default_event_handling: true,
                ..default()
            }),
            ..default()
        }),
        FpsOverlayPlugin,
        #[cfg(feature = "debug")]
        DebugUiPlugin,
    ));
    // Add HaalkaPlugin if not already added (allows examples to configure it first)
    if !app.is_plugin_added::<HaalkaPlugin>() {
        app.add_plugins(HaalkaPlugin::new());
    }
    app.add_systems(
        PostStartup,
        (
            mark_default_ui_camera.run_if(not(any_with_component::<IsDefaultUiCamera>)),
            |world: &mut World| {
                let mut el = Column::<Node>::new()
                    .align(Align::new().bottom().left())
                    .with_node(|mut node| node.row_gap = Val::Px(10.));
                cfg_if::cfg_if! {
                    if #[cfg(feature = "debug")] {
                        el = el.item(El::<Text>::new().text(Text::new("press f1 to toggle debug overlay")));
                    }
                }
                el = el.item(El::<Text>::new().text(Text::new("press f2 to toggle fps counter")));
                El::<Node>::new()
                    .with_node(|mut node| {
                        node.height = Val::Percent(100.);
                        node.width = Val::Percent(100.);
                        node.padding.bottom = Val::Px(FPS_PADDING);
                        node.padding.left = Val::Px(FPS_PADDING);
                    })
                    .child(el)
                    .spawn(world);
            },
        ),
    );
}
```

--------------------------------

### Configure Examples Plugin

Source: https://docs.rs/haalka/0.7.1/src/nested_lists/utils.rs.html

Initializes the Bevy application with window settings, plugins, and startup systems for UI elements.

```rust
pub(crate) const WINDOW_WIDTH: u32 = 1400;
pub(crate) const WINDOW_HEIGHT: u32 = 900;

pub(crate) fn examples_plugin(app: &mut App) {
    app.add_plugins((
        bevy::DefaultPlugins.set(WindowPlugin {
            primary_window: Some(Window {
                resolution: WindowResolution::new(WINDOW_WIDTH, WINDOW_HEIGHT),
                position: WindowPosition::Centered(MonitorSelection::Primary),
                #[cfg(feature = "deployed_wasm_example")]
                canvas: Some("#bevy".to_string()),
                fit_canvas_to_parent: true,
                prevent_default_event_handling: true,
                ..default()
            }),
            ..default()
        }),
        FpsOverlayPlugin,
        #[cfg(feature = "debug")]
        DebugUiPlugin,
    ));
    // Add HaalkaPlugin if not already added (allows examples to configure it first)
    if !app.is_plugin_added::<HaalkaPlugin>() {
        app.add_plugins(HaalkaPlugin::new());
    }
    app.add_systems(
        PostStartup,
        (
            mark_default_ui_camera.run_if(not(any_with_component::<IsDefaultUiCamera>)),
            |world: &mut World| {
                let mut el = Column::<Node>::new()
                    .align(Align::new().bottom().left())
                    .with_node(|mut node| node.row_gap = Val::Px(10.));
                cfg_if::cfg_if! {
                    if #[cfg(feature = "debug")] {
                        el = el.item(El::<Text>::new().text(Text::new("press f1 to toggle debug overlay")));
                    }
                }
                el = el.item(El::<Text>::new().text(Text::new("press f2 to toggle fps counter")));
                El::<Node>::new()
                    .with_node(|mut node| {
                        node.height = Val::Percent(100.);
                        node.width = Val::Percent(100.);
                        node.padding.bottom = Val::Px(FPS_PADDING);
                        node.padding.left = Val::Px(FPS_PADDING);
                    })
                    .child(el)
                    .spawn(world);
            },
        ),
    );
}
```

--------------------------------

### Spawning UI Root in Bevy App (Button Example)

Source: https://docs.rs/haalka/0.7.1/haalka/element/trait.Spawnable.html

Example of spawning a UI root element into a Bevy application's world during startup. This pattern is common for initializing UI components.

```rust
fn main() {
    App::new()
        .add_plugins(examples_plugin)
        .add_systems(
            Startup,
            (
                |world: &mut World| {
                    ui_root().spawn(world);
                },
                camera,
            ),
        )
        .run();
}
```

--------------------------------

### Example Usage of Spawnable

Source: https://docs.rs/haalka/0.7.1/haalka/futures_signals/prelude/trait.Spawnable.html

This example demonstrates spawning a UI root element into the Bevy world using the deprecated futures-signals backend. Ensure HaalkaFuturesSignalsPlugin is added.

```rust
17fn main() {
18    #[allow(deprecated)]
19    App::new()
20        .add_plugins(examples_plugin)
21        .add_plugins(haalka::futures_signals::HaalkaFuturesSignalsPlugin)
22        .add_systems(
23            Startup,
24            (
25                |world: &mut World| {
26                    ui_root().spawn(world);
27                },
28                camera,
29            ),
30        )
31        .run();
32}
```

--------------------------------

### Spawning UI Root in Bevy App (Calculator Example)

Source: https://docs.rs/haalka/0.7.1/haalka/element/trait.Spawnable.html

Example of spawning a UI root element into a Bevy application's world during startup, with resources for output and error handling. This pattern is common for initializing UI components.

```rust
fn main() {
    App::new()
        .add_plugins(examples_plugin)
        .add_systems(
            Startup,
            (
                |world: &mut World| {
                    ui_root().spawn(world);
                },
                camera,
            ),
        )
        .insert_resource(Output(String::new()))
        .insert_resource(Error)
        .run();
}
```

--------------------------------

### Example: Spawning an Element with on_spawn

Source: https://docs.rs/haalka/0.7.1/haalka/futures_signals/prelude/struct.RawHaalkaEl.html

This example demonstrates using the `on_spawn` method within a UI structure to spawn another element. Note that `RawHaalkaEl` and its related methods are deprecated.

```rust
188fn ui_root() -> impl Element {
    El::<Node>::new()
        .with_node(|mut node| {
            node.width = Val::Percent(100.);
            node.height = Val::Percent(100.);
        })
        .cursor(CursorIcon::default())
        .align_content(Align::center())
        .child(
            Row::<Node>::new()
                .with_node(|mut node| {
                    node.column_gap = Val::Px(50.);
                })
                .item(futures_signals_button())
                .item(El::<Node>::new().update_raw_el(|raw_el| {
                    raw_el.on_spawn(|world, entity| {
                        jonmo_button().into_builder().spawn_on_entity(world, entity).unwrap();
                    })
                })),
        )
}

```

--------------------------------

### Spawning UI Root in Bevy App (Many Buttons Example)

Source: https://docs.rs/haalka/0.7.1/haalka/element/trait.Spawnable.html

Example of spawning a UI root element into a Bevy application's world during startup, including additional plugins like LogDiagnosticsPlugin. This pattern is common for initializing UI components.

```rust
fn main() {
    App::new()
        .add_plugins((examples_plugin, LogDiagnosticsPlugin::default()))
        .add_systems(
            Startup,
            (
                |world: &mut World| {
                    ui_root().spawn(world);
                },
                camera,
            ),
        )
        .run();
}
```

--------------------------------

### Call a Crate Function in Rust Example

Source: https://docs.rs/haalka/0.7.1/scrape-examples-help.html

This example demonstrates how to call a documented function from a crate within a Rust project's example file.

```rust
// examples/ex.rs
fn main() {
  a_crate::a_func();
}
```

--------------------------------

### Spawning UI Root in Bevy App (Scroll Example)

Source: https://docs.rs/haalka/0.7.1/haalka/element/trait.Spawnable.html

Example of spawning a UI root element into a Bevy application's world during startup, along with systems for scrolling functionality. This pattern is common for initializing UI components.

```rust
fn main() {
    App::new()
        .add_plugins(examples_plugin)
        .add_systems(
            Startup,
            (
                |world: &mut World| {
                    ui_root().spawn(world);
                },
                camera,
            ),
        )
        .add_systems(Update, shifter)
        .insert_resource(Shifted(false))
        .run();
}
```

--------------------------------

### Example Usage: Button Element

Source: https://docs.rs/haalka/0.7.1/haalka/futures_signals/prelude/struct.El.html

An example demonstrating the creation of a button element with dynamic styling based on its pressed and hovered states, using signals. Note the use of deprecated futures-signals methods.

```APIDOC
## Example: Button Element with Futures Signals

### Description
This example showcases a button element that dynamically changes its border color, background color, and text content based on whether it is being pressed or hovered over. It utilizes signals from the `futures-signals` library, which is deprecated.

### Code Snippet

```rust
fn futures_signals_button() -> impl Element {
    let (pressed, pressed_signal) = Mutable::new_and_signal(false);
    let (hovered, hovered_signal) = Mutable::new_and_signal(false);
    let pressed_hovered = map_ref!(pressed_signal, hovered_signal => (*pressed_signal, *hovered_signal)).broadcast();

    El::<Node>::new()
        .with_node(|mut node| {
            node.width = Val::Px(150.0);
            node.height = Val::Px(65.);
            node.border = UiRect::all(Val::Px(5.0));
            node.border_radius = BorderRadius::MAX;
        })
        .align_content(Align::center())
        .border_color_signal(
            pressed_hovered
                .signal()
                .map(|(pressed, hovered)| {
                    if pressed {
                        bevy::color::palettes::basic::RED.into()
                    } else if hovered {
                        Color::WHITE
                    } else {
                        Color::BLACK
                    }
                })
                .map(BorderColor::all),
        )
        .background_color_signal(
            pressed_hovered
                .signal()
                .map(|(pressed, hovered)| {
                    if pressed {
                        PRESSED_BUTTON
                    } else if hovered {
                        HOVERED_BUTTON
                    } else {
                        NORMAL_BUTTON
                    }
                })
                .map(BackgroundColor),
        )
        .hovered_sync(hovered)
        .pressed_sync(pressed)
        .child(
            El::<Text>::new()
                .text_font(TextFont {
                    font_size: 25.0,
                    ..default()
                })
                .text_shadow(TextShadow::default())
                .text_color(TextColor(Color::srgb(0.9, 0.9, 0.9)))
                .text_signal(
                    pressed_hovered
                        .signal()
                        .map(|(pressed, hovered)| {
                            if pressed {
                                "Press"
                            } else if hovered {
                                "Hover"
                            } else {
                                "futures-signals"
                            }
                        })
                        .map(Text::new),
                ),
        )
}
```

### Deprecation Notice
This example uses `futures-signals`, which is deprecated. It is recommended to migrate to the jonmo-based reactivity system.
```

--------------------------------

### UI Component Layout Example

Source: https://docs.rs/haalka/0.7.1/haalka/prelude/trait.BuilderPassThrough.html

Demonstrates the usage of Row, Align, and padding for structuring UI elements.

```APIDOC
## Row and Layout Configuration

### Description
Configures a UI layout using `Row` components with specific alignment, padding, and gaps.

### Method
N/A (Illustrative Code)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

--------------------------------

### Example Usage

Source: https://docs.rs/haalka/0.7.1/haalka/prelude/enum.ElementEither.html

Demonstrates how to use ElementEither to return different Element types based on a condition.

```APIDOC
## Example
```rust
use bevy::prelude::*
use haalka::prelude::*

fn conditional_element(use_column: bool) -> impl Element {
    if use_column {
        Column::<Node>::new().left_either()
    } else {
        Row::<Node>::new().right_either()
    }
}
```
```

--------------------------------

### UI Element and Camera Setup

Source: https://docs.rs/haalka/0.7.1/haalka/futures_signals/prelude/struct.El.html

Defines a root UI element with layout properties and spawns a 2D camera.

```rust
                            if pressed {
                                "Press"
                            } else if hovered {
                                "Hover"
                            } else {
                                "jonmo"
                            }
                        })
                        .map_in(Text::new)
                        .map_in(Some),
                ),
        )
}

fn camera(mut commands: Commands) {
    commands.spawn(Camera2d);
}

#[allow(deprecated)]
fn ui_root() -> impl Element {
    El::<Node>::new()
        .with_node(|mut node| {
            node.width = Val::Percent(100.);
            node.height = Val::Percent(100.);
        })
        .cursor(CursorIcon::default())
        .align_content(Align::center())
        .child(
            Row::<Node>::new()
                .with_node(|mut node| {
                    node.column_gap = Val::Px(50.);
                })
                .item(futures_signals_button())
                .item(El::<Node>::new().update_raw_el(|raw_el| {
                    raw_el.on_spawn(|world, entity| {
                        jonmo_button().into_builder().spawn_on_entity(world, entity).unwrap();
                    })
                })),
        )
}
```

--------------------------------

### Configure TextInput Prompt

Source: https://docs.rs/haalka/0.7.1/haalka/text_input/struct.TextInput.html

Example of configuring a text input prompt with specific text and color settings within a UI element.

```rust
.text_input_prompt(TextInputPrompt {
                    text: "name".to_string(),
                    color: Some(bevy::color::palettes::basic::GRAY.into()),
                    ..default()
                })
```

--------------------------------

### UI Root Element Setup

Source: https://docs.rs/haalka/0.7.1/haalka/futures_signals/prelude/trait.Alignable.html

Defines the root UI structure, including layout properties and child element spawning.

```rust
#[allow(deprecated)]
fn ui_root() -> impl Element {
    El::<Node>::new()
        .with_node(|mut node| {
            node.width = Val::Percent(100.);
            node.height = Val::Percent(100.);
        })
        .cursor(CursorIcon::default())
        .align_content(Align::center())
        .child(
            Row::<Node>::new()
                .with_node(|mut node| {
                    node.column_gap = Val::Px(50.);
                })
                .item(futures_signals_button())
                .item(El::<Node>::new().update_raw_el(|raw_el| {
                    raw_el.on_spawn(|world, entity| {
                        jonmo_button().into_builder().spawn_on_entity(world, entity).unwrap();
                    })
                })),
        )
}
```

--------------------------------

### Main Application Setup

Source: https://docs.rs/haalka/0.7.1/src/counter/counter.rs.html

Sets up the Bevy application, adds necessary plugins, and defines startup systems for the UI and camera. This is the entry point for the counter application.

```rust
mod utils;
use utils::*;

use bevy::prelude::*;
use haalka::prelude::*;

fn main() {
    App::new()
        .add_plugins(examples_plugin)
        .add_systems(
            Startup,
            (
                |world: &mut World| {
                    ui_root().spawn(world);
                },
                camera,
            ),
        )
        .run();
}

#[derive(Component, Clone, Deref, DerefMut)]
struct Counter(i32);

#[rustfmt::skip]
fn ui_root() -> impl Element {
    let counter_holder = LazyEntity::new();
    El::<Node>::new()
        .with_node(|mut node| {
            node.height = Val::Percent(100.);
            node.width = Val::Percent(100.);
        })
        .insert(Pickable::default())
        .cursor(CursorIcon::default())
        .align_content(Align::center())
        .child(
            Row::<Node>::new()
                .with_node(|mut node| node.column_gap = Val::Px(15.0))
                .insert(Counter(0))
                .lazy_entity(counter_holder.clone())
                .item(counter_button(counter_holder.clone(), "-", -1))
                .item(
                    El::<Text>::new()
                        .text_font(TextFont::from_font_size(25.))
                        .text_signal(
                            signal::from_component_changed::<Counter>(counter_holder.clone())
                                .map_in(deref_copied)
                                .map_in_ref(ToString::to_string)
                                .map_in(Text)
                                .map_in(Some),
                        ),
                )
                .item(counter_button(counter_holder.clone(), "+", 1)),
        )
}

fn counter_button(counter_holder: LazyEntity, label: &'static str, step: i32) -> impl Element {
    let lazy_entity = LazyEntity::new();
    El::<Node>::new()
        .with_node(|mut node| {
            node.width = Val::Px(45.0);
            node.border_radius = BorderRadius::MAX;
        })
        .insert((Pickable::default(), Hoverable))
        .align_content(Align::center())
        .cursor(CursorIcon::System(SystemCursorIcon::Pointer))
        .lazy_entity(lazy_entity.clone())
        .background_color_signal(
            signal::from_entity(lazy_entity)
                .has_component::<Hovered>()
                .dedupe()
                .map_bool_in(|| Color::hsl(300., 0.75, 0.85), || Color::hsl(300., 0.75, 0.75))
                .map_in(BackgroundColor)
                .map_in(Some),
        )
        .on_click(move |_: In<_>, mut counters: Query<&mut Counter>| {
            if let Ok(mut counter) = counters.get_mut(*counter_holder) {
                **counter += step;
            }
        })
        .child(
            El::<Text>::new()
                .text_font(TextFont::from_font_size(25.))
                .text(Text::new(label)),
        )
}

fn camera(mut commands: Commands) {
    commands.spawn(Camera2d);
}

```

--------------------------------

### Observe Drag Start Event

Source: https://docs.rs/haalka/0.7.1/src/haalka/pointer_event_aware.rs.html

Example of observing a drag start event and preventing its propagation. This is useful for custom drag handling logic.

```rust
El::<Node>::new()
    .on_dragged_disableable_signal(
        |In(_)| {
            // handle drag start/end
        },
        signal::once(false),
    )
    .observe(|mut drag_start: On<Pointer<DragStart>>| {
        drag_start.propagate(false);
    });
```

--------------------------------

### Main Application Setup

Source: https://docs.rs/haalka/0.7.1/src/key_values_sorted/key_values_sorted.rs.html

Sets up the Bevy application, adding necessary plugins, startup systems, and update systems for managing UI elements, input focus, and scrolling.

```rust
fn main() {
    App::new()
        .add_plugins(examples_plugin)
        .add_systems(Startup, (init, camera))
        .add_systems(
            Update,
            (
                tabber,
                escaper,
                initial_scroll.run_if(any_with_component::<NeedsInitialScroll>),
            ),
        )
        .run();
}
```

--------------------------------

### Handle Drag Event with Observer

Source: https://docs.rs/haalka/0.7.1/src/haalka/pointer_event_aware.rs.html

Example of attaching a simple drag handler and then observing the drag start event to control propagation.

```rust
El::<Node>::new()
    .on_dragged(|In((_entity, _drag))| {
        // handle drag
    })
    .observe(|mut drag_start: On<Pointer<DragStart>>| {
        drag_start.propagate(false);
    });
```

--------------------------------

### Plugin Setup for UI Systems

Source: https://docs.rs/haalka/0.7.1/src/haalka/pointer_event_aware.rs.html

Initializes the application by adding the `on_set_cursor` observer and scheduling various UI-related systems in the `PreUpdate` stage.

```rust
pub(super) fn plugin(app: &mut App) {
    app.add_observer(on_set_cursor).add_systems(
        PreUpdate,
        (
            (
                pressable_system.run_if(any_with_component::<Pressable>),
                pressed_system.run_if(any_with_component::<PressedSystems>),
            )
                .chain(),
            (dragged_system, reset_drag_data)
                .chain()
        )
    );
}
```

--------------------------------

### Setup Bevy App with Character Editor Plugins and Systems

Source: https://docs.rs/haalka/0.7.1/src/character_editor/character_editor.rs.html

Initializes the Bevy application, adding necessary plugins and startup systems for the character editor. This includes setting up the UI root and the initial 3D scene.

```rust
fn main() {
    App::new()
        .add_plugins(examples_plugin)
        .add_systems(
            Startup,
            (
                (setup, |world: &mut World| {
                    ui_root().spawn(world);
                })
                    .chain(),
                |mut materials: ResMut<Assets<StandardMaterial>>, mut commands: Commands| {
                    commands.spawn(( 
                        MeshMaterial3d(materials.add(Color::srgb_u8(87, 108, 50))),
                        Transform::from_xyz(-1., 0., 1.),
                    ));
                    commands.trigger(SetShape(Shape::Sphere));
                },
            ),
        )
        .insert_resource(SelectedShape(Shape::Cuboid))
        .add_observer(
            |event: On<SetShape>,
             character: Single<Entity, With<MeshMaterial3d<StandardMaterial>>>, 
             mut meshes: ResMut<Assets<Mesh>>,
             mut selected_shape: ResMut<SelectedShape>,
             mut commands: Commands| {
                let shape = **event;
                if let Ok(mut entity) = commands.get_entity(*character) {
                    entity.insert(Mesh3d(meshes.add(match shape {
                        Shape::Sphere => Sphere::default().mesh().ico(5).unwrap(),
                        Shape::Plane => Plane3d::default().mesh().size(1., 1.).into(),
                        Shape::Cuboid => Cuboid::default().into(),
                        Shape::Cylinder => Cylinder::default().into(),
                        Shape::Capsule3d => Capsule3d::default().into(),
                        Shape::Torus => Torus::default().into(),
                    })));
                }
                **selected_shape = shape;
            },
        )
        .run();
}
```

--------------------------------

### Initialize Alignment Demo App

Source: https://docs.rs/haalka/0.7.1/src/align/align.rs.html

Sets up the Bevy application with necessary plugins, resources, and startup systems for the alignment demonstration.

```rust
fn main() {
    App::new()
        .add_plugins(examples_plugin)
        .add_systems(
            Startup,
            (
                |world: &mut World| {
                    ui_root().spawn(world);
                },
                camera,
            ),
        )
        .insert_resource(SelfAlignmentEnabled(true))
        .insert_resource(ContentAlignmentEnabled(false))
        .insert_resource(StripeDirection(haalka::stripe::Direction::Row))
        .insert_resource(RectangleSelfAlignment::default())
        .insert_resource(RectangleContentAlignment::default())
        .run();
}
```

--------------------------------

### Configure Main Menu Application

Source: https://docs.rs/haalka/0.7.1/haalka/prelude/struct.HaalkaPlugin.html

Shows how to configure audio and graphics resources alongside UI initialization in a Haalka app.

```rust
fn main() {
    App::new()
        .add_plugins(HaalkaPlugin::new().with_jonmo(|jonmo| jonmo.with_schedule::<Update>()))
        .add_plugins(examples_plugin)
        .add_systems(
            Startup,
            (
                |world: &mut World| {
                    ui_root().spawn(world);
                },
                camera,
            ),
        )
        .add_systems(
            Update,
            (
                keyboard_menu_input_events,
                gamepad_menu_input_events,
                virtual_pressed_timer_system,
            ),
        )
        .init_resource::<ShowSubMenu>()
        .insert_resource(AudioSettings {
            master_volume: 100.,
            music_volume: 50.,
            effect_volume: 50.,
            voice_volume: 50.,
            audio_output: AudioOutput::Stereo,
            audio_language: AudioLanguage::English,
        })
        .insert_resource(GraphicsSettings {
            display_mode: DisplayMode::Fullscreen,
            vsync: true,
            resolution: Resolution::R1920x1080,
            texture_quality: Quality::Medium,
            shadow_quality: Quality::Medium,
            anti_aliasing: Some(AntiAliasing::Taa),
        })
        .run();
}
```

--------------------------------

### Example Usage of impl_haalka_methods_futures_signals

Source: https://docs.rs/haalka/0.7.1/haalka/macro.impl_haalka_methods_futures_signals.html

This example demonstrates how to use the `impl_haalka_methods_futures_signals` macro to add reactivity to a custom bundle. Note that the futures-signals backend is deprecated.

```rust
use bevy::prelude::*;
use haalka::futures_signals::prelude::*;
use haalka::impl_haalka_methods_futures_signals;

#[derive(Component, Default)]
struct MyComponentA(usize);

#[derive(Component, Default)]
struct MyComponentB {
    data: usize,
}

#[derive(Bundle, Default)]
struct MyBundle {
    my_component_a: MyComponentA,
    my_component_b: MyComponentB,
}

#[derive(Default)]
struct MyEl(El<MyBundle>);

impl ElementWrapper for MyEl {
    type EL = El<MyBundle>;
    fn element_mut(&mut self) -> &mut Self::EL {
        &mut self.0
    }
}

impl_haalka_methods_futures_signals! {
    MyEl {
       my_component_a: MyComponentA,
       some_other_component_idk: MyComponentB,
    }
}

MyEl::default()
.my_component_a(MyComponentA(1))
.with_some_other_component_idk(|mut some_other_component_idk| some_other_component_idk.data = 2)
.my_component_a_signal(always(3).map(MyComponentA))
.on_signal_with_some_other_component_idk(always(4), |mut some_other_component_idk, data| some_other_component_idk.data = data);
```

--------------------------------

### MyWidget Implementation of ElementWrapper

Source: https://docs.rs/haalka/0.7.1/haalka/futures_signals/element/trait.ElementWrapper.html

An example implementation of the ElementWrapper trait for a custom widget named MyWidget. This example is deprecated and suggests using jonmo-based reactivity.

```rust
use bevy::prelude::*;
use haalka::futures_signals::prelude::*;

struct MyWidget {
    el: El<Node>,
    data: Mutable<usize>,
}

impl ElementWrapper for MyWidget {
    type EL = El<Node>;
    fn element_mut(&mut self) -> &mut Self::EL {
        &mut self.el
    }
}

impl GlobalEventAware for MyWidget {}
impl PointerEventAware for MyWidget {}
impl ViewportMutable for MyWidget {}
impl MouseWheelScrollable for MyWidget {}
```

--------------------------------

### Example Usage of Spawnable Trait

Source: https://docs.rs/haalka/0.7.1/haalka/futures_signals/raw/trait.Spawnable.html

Demonstrates spawning a UI root element into the Bevy world using the Spawnable trait. This example utilizes the deprecated HaalkaFuturesSignalsPlugin.

```rust
fn main() {
    #[allow(deprecated)]
    App::new()
        .add_plugins(examples_plugin)
        .add_plugins(haalka::futures_signals::HaalkaFuturesSignalsPlugin)
        .add_systems(
            Startup,
            (
                |world: &mut World| {
                    ui_root().spawn(world);
                },
                camera,
            ),
        )
        .run();
}
```

--------------------------------

### Initialize and use haalka UI

Source: https://docs.rs/haalka/0.7.1/haalka/index.html

Demonstrates setting up the HaalkaPlugin and creating a reactive UI with state management using signals.

```rust
use bevy::prelude::*;
use haalka::prelude::*;

fn main() {
    App::new()
        .add_plugins((DefaultPlugins, HaalkaPlugin::new()))
        .add_systems(
            Startup,
            (
                |world: &mut World| {
                    ui_root().spawn(world);
                },
                camera,
            ),
        )
        .run();
}

#[derive(Component, Clone, Deref, DerefMut)]
struct Counter(i32);

fn ui_root() -> impl Element {
    let counter_holder = LazyEntity::new();
    El::<Node>::new()
        .with_node(|mut node| {
            node.height = Val::Percent(100.);
            node.width = Val::Percent(100.);
        })
        .insert(Pickable::default())
        .cursor(CursorIcon::default())
        .align_content(Align::center())
        .child(
            Row::<Node>::new()
                .with_node(|mut node| node.column_gap = Val::Px(15.0))
                .insert(Counter(0))
                .lazy_entity(counter_holder.clone())
                .item(counter_button(counter_holder.clone(), "-", -1))
                .item(
                    El::<Text>::new()
                        .text_font(TextFont::from_font_size(25.))
                        .text_signal(
                            signal::from_component_changed::<Counter>(counter_holder.clone())
                                .map_in(deref_copied)
                                .map_in_ref(ToString::to_string)
                                .map_in(Text)
                                .map_in(Some),
                        ),
                )
                .item(counter_button(counter_holder.clone(), "+", 1)),
        )
}

fn counter_button(counter_holder: LazyEntity, label: &'static str, step: i32) -> impl Element {
    let lazy_entity = LazyEntity::new();
    El::<Node>::new()
        .with_node(|mut node| {
            node.width = Val::Px(45.0);
            node.border_radius = BorderRadius::MAX;
        })
        .insert((Pickable::default(), Hoverable))
        .align_content(Align::center())
        .cursor(CursorIcon::System(SystemCursorIcon::Pointer))
        .lazy_entity(lazy_entity.clone())
        .background_color_signal(
            signal::from_entity(lazy_entity)
                .has_component::<Hovered>()
                .dedupe()
                .map_bool_in(|| Color::hsl(300., 0.75, 0.85), || Color::hsl(300., 0.75, 0.75))
                .map_in(BackgroundColor)
                .map_in(Some),
        )
        .on_click(move |_: In<_>, mut counters: Query<&mut Counter>| {
            if let Ok(mut counter) = counters.get_mut(*counter_holder) {
                **counter += step;
            }
        })
        .child(
            El::<Text>::new()
                .text_font(TextFont::from_font_size(25.))
                .text(Text::new(label)),
        )
}

fn camera(mut commands: Commands) {
    commands.spawn(Camera2d);
}
```

--------------------------------

### Setup Scene with Light and Camera

Source: https://docs.rs/haalka/0.7.1/src/character_editor/character_editor.rs.html

Initializes the Bevy scene by spawning a point light with shadows and a 3D camera positioned to look at the origin.

```rust
fn setup(mut commands: Commands) {
    commands.spawn(( 
        PointLight {
            intensity: 1_500_000.,
            shadows_enabled: true,
            ..default()
        },
        Transform::from_xyz(0., 8., 0.),
    ));
    commands.spawn(( 
        Camera3d::default(),
        Transform::from_xyz(3., 3., 3.).looking_at(Vec3::new(0., 0., 0.), Vec3::Y),
    ));
}
```

--------------------------------

### Initialize Haalka Inventory Application

Source: https://docs.rs/haalka/0.7.1/haalka/prelude/struct.HaalkaPlugin.html

Demonstrates setting up a Bevy app with Haalka, loading states, and UI spawning.

```rust
fn main() {
    App::new()
        .add_plugins(HaalkaPlugin::new().with_jonmo(|jonmo| jonmo.with_schedule::<Update>()))
        .add_plugins((examples_plugin, EntropyPlugin::<WyRand>::default()))
        .init_state::<AssetState>()
        .add_loading_state(
            LoadingState::new(AssetState::Loading)
                .continue_to_state(AssetState::Loaded)
                .load_collection::<RpgIconSheet>(),
        )
        .insert_resource(PointerPosition::default())
        // .add_systems(Startup, character_camera)
        // .add_systems(Startup, setup_3d)
        // .add_systems(Update, rotate_prism)
        .add_systems(Startup, |mut commands: Commands| {
            commands.spawn((Camera2d, IsDefaultUiCamera));
        })
        .add_systems(
            OnEnter(AssetState::Loaded),
            (|world: &mut World| {
                ui_root().spawn(world);
            })
            .chain(),
        )
        .run();
}
```

--------------------------------

### Example Usage in main_menu.rs

Source: https://docs.rs/haalka/0.7.1/haalka/prelude/trait.PointerEventAware.html

This example demonstrates how to use the `on_dragged_change` method within the `El::<Node>::new()` builder to modify application state based on drag events.

```APIDOC
## El::<Node>::new().on_dragged_change(...)

### Description
This snippet shows the implementation of `on_dragged_change` for a UI element. When the element's dragged state changes, it checks the `dragged_data.dragged` boolean. If true, it inserts the `CursorableDisabled` resource; otherwise, it removes it.

### Method
This is a method chained within a builder pattern.

### Endpoint
N/A (Method within a builder pattern)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```rust
El::<Node>::new()
    .lazy_entity(lazy_entity.clone())
    .insert((Pickable::default(), Hoverable, Pressable, Draggable))
    .with_node(|mut node| {
        node.height = Val::Px(DEFAULT_BUTTON_HEIGHT);
        node.border = UiRect::all(Val::Px(BASE_BORDER_WIDTH));
    })
    .cursor(CursorIcon::System(SystemCursorIcon::Pointer))
    .on_dragged_change(
        |In((_, dragged_data)): In<(Entity, DragData)>, mut commands: Commands| {
            if dragged_data.dragged {
                commands.insert_resource(CursorableDisabled);
            } else {
                commands.remove_resource::<CursorableDisabled>();
            }
        },
    )
    // ... other configurations
```

### Response
Returns the modified element builder (`Self`).

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Initialize UI Root

Source: https://docs.rs/haalka/0.7.1/haalka/prelude/trait.BuilderPassThrough.html

Sets up the root container for the UI layout.

```rust
fn ui_root() -> impl Element {
    Column::<Node>::new()
        .ui_root()
        .insert(Pickable::default())
        .with_node(|mut node| {
            node.width = Val::Percent(100.);
```
Tokens:
Raw