From 2339986d8c9f3d307c5c0b805f9b19867499b874 Mon Sep 17 00:00:00 2001
From: Clinton Selke <clinuxrulz@gmail.com>
Date: Mon, 26 Feb 2024 20:20:05 +1000
Subject: [PATCH] rebasing onto main

---
 examples/invisible.rs                         | 163 +-------
 examples/multiple.rs                          |  16 +-
 examples/multiple_joysticks_mobile/src/lib.rs |  18 +-
 examples/simple.rs                            |   8 +-
 examples/simple_mobile/src/lib.rs             |  12 +-
 src/behaviour.rs                              |  53 ---
 src/bundles.rs                                |  65 ++++
 src/components.rs                             |  78 ++++
 src/input.rs                                  | 212 ----------
 src/lib.rs                                    | 154 +++-----
 src/systems.rs                                | 364 ++++++++++++++++++
 src/ui.rs                                     |   5 -
 src/ui/bundles.rs                             | 110 ------
 src/ui/components.rs                          |   0
 src/ui/systems.rs                             | 119 ------
 src/utils.rs                                  |  66 ++--
 16 files changed, 642 insertions(+), 801 deletions(-)
 delete mode 100644 src/behaviour.rs
 create mode 100644 src/bundles.rs
 create mode 100644 src/components.rs
 delete mode 100644 src/input.rs
 create mode 100644 src/systems.rs
 delete mode 100644 src/ui.rs
 delete mode 100644 src/ui/bundles.rs
 delete mode 100644 src/ui/components.rs
 delete mode 100644 src/ui/systems.rs

diff --git a/examples/invisible.rs b/examples/invisible.rs
index 42297cb..4ed8a78 100644
--- a/examples/invisible.rs
+++ b/examples/invisible.rs
@@ -1,5 +1,4 @@
 use bevy::prelude::*;
-use bevy::window::PrimaryWindow;
 use bevy_inspector_egui::quick::WorldInspectorPlugin;
 
 use virtual_joystick::*;
@@ -10,7 +9,6 @@ fn main() {
         .add_plugins(WorldInspectorPlugin::new())
         .add_plugins(VirtualJoystickPlugin::<String>::default())
         .add_systems(Startup, create_scene)
-        .add_systems(PreUpdate, update_joystick_visibility)
         .add_systems(Update, update_joystick)
         .run();
 }
@@ -19,11 +17,6 @@ fn main() {
 // Player with velocity
 struct Player(pub f32);
 
-#[derive(Component)]
-struct InvisibleJoystick;
-
-const JOYSTICK_BACKGROUND_SIZE: f32 = 150.0;
-
 fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
     cmd.spawn(Camera2dBundle {
         transform: Transform::from_xyz(0., 0., 5.0),
@@ -45,151 +38,37 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
     })
     .insert(Player(50.));
 
-    // Spawn Invisible Virtual Joystick with entire screen as active area.
-    {
-        let knob_img = asset_server.load("Knob.png");
-        let background_img = asset_server.load("Outline.png");
-        let knob_color = Some(Color::WHITE.with_a(0.0));
-        let background_color = Some(Color::WHITE.with_a(0.0));
-        let interactable_area_color = None;
-        let knob_size = Vec2::new(75., 75.);
-        let background_size = Vec2::new(JOYSTICK_BACKGROUND_SIZE, JOYSTICK_BACKGROUND_SIZE);
-        let joystick_node = VirtualJoystickNode {
-            dead_zone: 0.,
-            id: "UniqueJoystick".to_string(),
-            axis: VirtualJoystickAxis::Both,
-            behaviour: VirtualJoystickType::Floating,
-        };
-        let joystick_node_style = Style {
-            width: Val::Percent(100.0), // <-- or 50% to use 1/2 screen
-            height: Val::Percent(100.0),
+    // Spawn Virtual Joystick at horizontal center using helper function
+    create_joystick(
+        &mut cmd,
+        "UniqueJoystick".to_string(),
+        asset_server.load("Knob.png"),
+        asset_server.load("Outline.png"),
+        None,
+        None,
+        None,
+        Vec2::new(75., 75.),
+        Vec2::new(150., 150.),
+        Style {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
             position_type: PositionType::Absolute,
-            left: Val::Px(0.0),
-            bottom: Val::Px(0.0),
+            left: Val::Percent(0.),
+            bottom: Val::Percent(0.),
             ..default()
-        };
-        let mut spawn = cmd.spawn((
-            VirtualJoystickBundle::new(joystick_node).set_style(joystick_node_style),
-            InvisibleJoystick,
-        ));
-        let spawn = spawn
-            .insert(VirtualJoystickInteractionArea)
-            .with_children(|parent| {
-                parent.spawn((
-                    VirtualJoystickUIKnob,
-                    ImageBundle {
-                        image: knob_img.into(),
-                        style: Style {
-                            width: Val::Px(knob_size.x),
-                            height: Val::Px(knob_size.y),
-                            ..default()
-                        },
-                        background_color: knob_color.unwrap_or(Color::WHITE).into(),
-                        ..default()
-                    },
-                ));
-                parent.spawn((
-                    VirtualJoystickUIBackground,
-                    ImageBundle {
-                        image: background_img.into(),
-                        style: Style {
-                            width: Val::Px(background_size.x),
-                            height: Val::Px(background_size.y),
-                            ..default()
-                        },
-                        background_color: background_color.unwrap_or(Color::WHITE).into(),
-                        ..default()
-                    },
-                ));
-            });
-
-        if let Some(c) = interactable_area_color {
-            spawn.insert(BackgroundColor(c));
-        }
-    }
-}
-
-fn update_joystick_visibility(
-    mut joystick: Query<&mut Style, With<InvisibleJoystick>>,
-    mut joystick_knob_ui: Query<&mut BackgroundColor, With<VirtualJoystickUIKnob>>,
-    mut joystick_background_ui: Query<
-        &mut BackgroundColor,
-        (
-            With<VirtualJoystickUIBackground>,
-            Without<VirtualJoystickUIKnob>,
-        ),
-    >,
-    q_windows: Query<&Window, (With<PrimaryWindow>, Without<InvisibleJoystick>)>,
-    touches: Res<Touches>,
-    buttons: Res<Input<MouseButton>>,
-) {
-    let change_visibility: Option<Visibility>;
-    let mut set_location: Option<Vec2> = None;
-    if touches.any_just_pressed() || buttons.any_just_pressed([MouseButton::Left]) {
-        change_visibility = Some(Visibility::Visible);
-        if touches.any_just_pressed() {
-            for touch in touches.iter() {
-                set_location = Some(touch.position());
-                break;
-            }
-        } else if buttons.any_just_pressed([MouseButton::Left]) {
-            if let Some(position) = q_windows.single().cursor_position() {
-                set_location = Some(position);
-            }
-        }
-    } else if touches.any_just_released()
-        || touches.any_just_canceled()
-        || buttons.any_just_released([MouseButton::Left])
-    {
-        change_visibility = Some(Visibility::Hidden);
-        set_location = None;
-    } else {
-        change_visibility = None;
-        set_location = None;
-    }
-
-    if let Some(change_visibility) = change_visibility {
-        for mut joystick_style in &mut joystick {
-            if change_visibility == Visibility::Visible {
-                joystick_style.width = Val::Px(JOYSTICK_BACKGROUND_SIZE);
-                joystick_style.height = Val::Px(JOYSTICK_BACKGROUND_SIZE);
-                for mut joystick_knob_ui_color in &mut joystick_knob_ui {
-                    joystick_knob_ui_color.0.set_a(1.0);
-                }
-                for mut joystick_background_ui_color in &mut joystick_background_ui {
-                    joystick_background_ui_color.0.set_a(1.0);
-                }
-            } else if change_visibility == Visibility::Hidden {
-                joystick_style.left = Val::Px(0.0);
-                joystick_style.top = Val::Px(0.0);
-                joystick_style.width = Val::Percent(100.0);
-                joystick_style.height = Val::Percent(100.0);
-                for mut joystick_knob_ui_color in &mut joystick_knob_ui {
-                    joystick_knob_ui_color.0.set_a(0.0);
-                }
-                for mut joystick_background_ui_color in &mut joystick_background_ui {
-                    joystick_background_ui_color.0.set_a(0.0);
-                }
-            }
-        }
-    }
-
-    if let Some(set_location) = set_location {
-        for mut joystick_style in &mut joystick {
-            joystick_style.left = Val::Px(set_location.x - 0.5 * JOYSTICK_BACKGROUND_SIZE);
-            joystick_style.top = Val::Px(set_location.y - 0.5 * JOYSTICK_BACKGROUND_SIZE);
-        }
-    }
+        },
+        (JoystickInvisible, JoystickFloating),
+    );
 }
 
 fn update_joystick(
-    mut joystick_events: EventReader<VirtualJoystickEvent<String>>,
+    mut joystick: EventReader<VirtualJoystickEvent<String>>,
     mut player: Query<(&mut Transform, &Player)>,
     time_step: Res<Time>,
 ) {
     let (mut player, player_data) = player.single_mut();
 
-    for j in joystick_events.read() {
+    for j in joystick.read() {
         let Vec2 { x, y } = j.axis();
         player.translation.x += x * player_data.0 * time_step.delta_seconds();
         player.translation.y += y * player_data.0 * time_step.delta_seconds();
diff --git a/examples/multiple.rs b/examples/multiple.rs
index 2b161f2..fde814e 100644
--- a/examples/multiple.rs
+++ b/examples/multiple.rs
@@ -48,6 +48,7 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
     // Spawn Virtual Joystick on left
     create_joystick(
         &mut cmd,
+        JoystickController::MovementX,
         asset_server.load("Knob.png"),
         asset_server.load("Horizontal_Outline_Arrows.png"),
         None,
@@ -55,12 +56,6 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         Some(Color::ORANGE_RED.with_a(0.3)),
         Vec2::new(75., 75.),
         Vec2::new(150., 150.),
-        VirtualJoystickNode {
-            dead_zone: 0.,
-            id: JoystickController::MovementX,
-            axis: VirtualJoystickAxis::Horizontal,
-            behaviour: VirtualJoystickType::Fixed,
-        },
         Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
@@ -69,11 +64,13 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
             bottom: Val::Percent(15.),
             ..default()
         },
+        (JoystickFixed, JoystickHorizontalOnly),
     );
 
     // Spawn Virtual Joystick on Right
     create_joystick(
         &mut cmd,
+        JoystickController::MovementY,
         asset_server.load("Knob.png"),
         asset_server.load("Vertical_Outline_Arrows.png"),
         None,
@@ -81,12 +78,6 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         Some(Color::ORANGE_RED.with_a(0.3)),
         Vec2::new(75., 75.),
         Vec2::new(150., 150.),
-        VirtualJoystickNode {
-            dead_zone: 0.,
-            id: JoystickController::MovementY,
-            axis: VirtualJoystickAxis::Vertical,
-            behaviour: VirtualJoystickType::Fixed,
-        },
         Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
@@ -95,6 +86,7 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
             bottom: Val::Percent(15.),
             ..default()
         },
+        (JoystickFixed, JoystickVerticalOnly),
     );
 }
 
diff --git a/examples/multiple_joysticks_mobile/src/lib.rs b/examples/multiple_joysticks_mobile/src/lib.rs
index cd68add..5d81ead 100644
--- a/examples/multiple_joysticks_mobile/src/lib.rs
+++ b/examples/multiple_joysticks_mobile/src/lib.rs
@@ -50,11 +50,12 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         },
         ..default()
     })
-    .insert(Player(100.));
+    .insert(Player(50.));
 
     // Spawn Virtual Joystick on left
     create_joystick(
         &mut cmd,
+        JoystickController::MovementX,
         asset_server.load("Knob.png"),
         asset_server.load("Horizontal_Outline_Arrows.png"),
         None,
@@ -62,12 +63,6 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         Some(Color::ORANGE_RED.with_a(0.3)),
         Vec2::new(75., 75.),
         Vec2::new(150., 150.),
-        VirtualJoystickNode {
-            dead_zone: 0.,
-            id: JoystickController::MovementX,
-            axis: VirtualJoystickAxis::Horizontal,
-            behaviour: VirtualJoystickType::Fixed,
-        },
         Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
@@ -76,11 +71,13 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
             bottom: Val::Percent(15.),
             ..default()
         },
+        (JoystickFixed, JoystickHorizontalOnly),
     );
 
     // Spawn Virtual Joystick on Right
     create_joystick(
         &mut cmd,
+        JoystickController::MovementY,
         asset_server.load("Knob.png"),
         asset_server.load("Vertical_Outline_Arrows.png"),
         None,
@@ -88,12 +85,6 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         Some(Color::ORANGE_RED.with_a(0.3)),
         Vec2::new(75., 75.),
         Vec2::new(150., 150.),
-        VirtualJoystickNode {
-            dead_zone: 0.,
-            id: JoystickController::MovementY,
-            axis: VirtualJoystickAxis::Vertical,
-            behaviour: VirtualJoystickType::Fixed,
-        },
         Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
@@ -102,6 +93,7 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
             bottom: Val::Percent(15.),
             ..default()
         },
+        (JoystickFixed, JoystickVerticalOnly),
     );
 }
 
diff --git a/examples/simple.rs b/examples/simple.rs
index 3fe9e01..9e6f9a1 100644
--- a/examples/simple.rs
+++ b/examples/simple.rs
@@ -41,6 +41,7 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
     // Spawn Virtual Joystick at horizontal center using helper function
     create_joystick(
         &mut cmd,
+        "UniqueJoystick".to_string(),
         asset_server.load("Knob.png"),
         asset_server.load("Outline.png"),
         None,
@@ -48,12 +49,6 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         Some(Color::ORANGE_RED.with_a(0.3)),
         Vec2::new(75., 75.),
         Vec2::new(150., 150.),
-        VirtualJoystickNode {
-            dead_zone: 0.,
-            id: "UniqueJoystick".to_string(),
-            axis: VirtualJoystickAxis::Both,
-            behaviour: VirtualJoystickType::Floating,
-        },
         Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
@@ -62,6 +57,7 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
             bottom: Val::Percent(15.),
             ..default()
         },
+        (JoystickFloating),
     );
 }
 
diff --git a/examples/simple_mobile/src/lib.rs b/examples/simple_mobile/src/lib.rs
index 183bf89..8987e7e 100644
--- a/examples/simple_mobile/src/lib.rs
+++ b/examples/simple_mobile/src/lib.rs
@@ -29,6 +29,7 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         transform: Transform::from_xyz(0., 0., 5.0),
         ..default()
     });
+    // Fake Player
     cmd.spawn(SpriteBundle {
         transform: Transform {
             translation: Vec3::new(0., 0., 0.),
@@ -42,10 +43,12 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         },
         ..default()
     })
-    .insert(Player(100.));
+    .insert(Player(50.));
+
     // Spawn Virtual Joystick at horizontal center using helper function
     create_joystick(
         &mut cmd,
+        "UniqueJoystick".to_string(),
         asset_server.load("Knob.png"),
         asset_server.load("Outline.png"),
         None,
@@ -53,12 +56,6 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
         Some(Color::ORANGE_RED.with_a(0.3)),
         Vec2::new(75., 75.),
         Vec2::new(150., 150.),
-        VirtualJoystickNode {
-            dead_zone: 0.,
-            id: "UniqueJoystick".to_string(),
-            axis: VirtualJoystickAxis::Both,
-            behaviour: VirtualJoystickType::Floating,
-        },
         Style {
             width: Val::Px(150.),
             height: Val::Px(150.),
@@ -67,6 +64,7 @@ fn create_scene(mut cmd: Commands, asset_server: Res<AssetServer>) {
             bottom: Val::Percent(15.),
             ..default()
         },
+        (JoystickFloating),
     );
 }
 
diff --git a/src/behaviour.rs b/src/behaviour.rs
deleted file mode 100644
index 55cbb3a..0000000
--- a/src/behaviour.rs
+++ /dev/null
@@ -1,53 +0,0 @@
-use bevy::prelude::*;
-
-#[cfg(feature = "inspect")]
-use bevy_inspector_egui::prelude::*;
-#[cfg(feature = "serde")]
-use serde::{Deserialize, Serialize};
-
-#[derive(Reflect, Clone, Copy, Debug, Default, PartialEq, Eq)]
-#[cfg_attr(feature = "inspect", derive(InspectorOptions))]
-#[cfg_attr(feature = "serde", derive(Serialize, Deserialize))]
-#[cfg_attr(feature = "inspect", reflect(InspectorOptions))]
-pub enum VirtualJoystickAxis {
-    #[default]
-    Both,
-    Horizontal,
-    Vertical,
-}
-
-impl VirtualJoystickAxis {
-    pub fn handle(&self, pos: Vec2) -> Vec2 {
-        match self {
-            VirtualJoystickAxis::Both => pos,
-            VirtualJoystickAxis::Horizontal => Vec2::new(pos.x, 0.),
-            VirtualJoystickAxis::Vertical => Vec2::new(0., pos.y),
-        }
-    }
-
-    pub fn handle_xy(&self, x: f32, y: f32) -> Vec2 {
-        match self {
-            VirtualJoystickAxis::Both => Vec2::new(x, y),
-            VirtualJoystickAxis::Horizontal => Vec2::new(x, 0.),
-            VirtualJoystickAxis::Vertical => Vec2::new(0., y),
-        }
-    }
-
-    pub fn handle_vec3(&self, pos: Vec3) -> Vec3 {
-        self.handle_xy(pos.x, pos.y).extend(pos.z)
-    }
-}
-
-#[derive(Reflect, Clone, Copy, Debug, Default, PartialEq, Eq)]
-#[cfg_attr(feature = "inspect", derive(InspectorOptions))]
-#[cfg_attr(feature = "serde", derive(Serialize, Deserialize))]
-#[cfg_attr(feature = "inspect", reflect(InspectorOptions))]
-pub enum VirtualJoystickType {
-    /// Static position
-    Fixed,
-    #[default]
-    /// Spawn at point click
-    Floating,
-    /// Follow point on drag
-    Dynamic,
-}
diff --git a/src/bundles.rs b/src/bundles.rs
new file mode 100644
index 0000000..bd84721
--- /dev/null
+++ b/src/bundles.rs
@@ -0,0 +1,65 @@
+use bevy::{
+    ecs::bundle::Bundle,
+    prelude::default,
+    render::view::{InheritedVisibility, ViewVisibility, Visibility},
+    transform::components::{GlobalTransform, Transform},
+    ui::{Node, Style, ZIndex},
+};
+
+use crate::{VirtualJoystickID, VirtualJoystickNode};
+
+#[derive(Bundle, Debug, Default)]
+pub struct VirtualJoystickBundle<S: VirtualJoystickID> {
+    /// Describes the size of the node
+    pub(crate) node: Node,
+    /// Describes the style including flexbox settings
+    pub(crate) style: Style,
+    /// The texture atlas image of the node
+    pub(crate) joystick: VirtualJoystickNode<S>,
+    /// The transform of the node
+    pub(crate) transform: Transform,
+    /// The global transform of the node
+    pub(crate) global_transform: GlobalTransform,
+    /// Describes the visibility properties of the node
+    pub visibility: Visibility,
+    /// Inherited visibility of an entity.
+    pub inherited_visibility: InheritedVisibility,
+    /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering
+    pub view_visibility: ViewVisibility,
+    /// Indicates the depth at which the node should appear in the UI
+    pub(crate) z_index: ZIndex,
+}
+
+impl<S: VirtualJoystickID> VirtualJoystickBundle<S> {
+    pub fn new(joystick: VirtualJoystickNode<S>) -> Self {
+        Self {
+            joystick,
+            ..default()
+        }
+    }
+
+    pub fn set_node(mut self, node: Node) -> Self {
+        self.node = node;
+        self
+    }
+
+    pub fn set_style(mut self, style: Style) -> Self {
+        self.style = style;
+        self
+    }
+
+    pub fn set_transform(mut self, transform: Transform) -> Self {
+        self.transform = transform;
+        self
+    }
+
+    pub fn set_global_transform(mut self, global_transform: GlobalTransform) -> Self {
+        self.global_transform = global_transform;
+        self
+    }
+
+    pub fn set_z_index(mut self, z_index: ZIndex) -> Self {
+        self.z_index = z_index;
+        self
+    }
+}
diff --git a/src/components.rs b/src/components.rs
new file mode 100644
index 0000000..9fded0e
--- /dev/null
+++ b/src/components.rs
@@ -0,0 +1,78 @@
+use bevy::{
+    ecs::{component::Component, reflect::ReflectComponent},
+    prelude::Vec2,
+    reflect::{std_traits::ReflectDefault, Reflect},
+};
+#[cfg(feature = "inspect")]
+use bevy_inspector_egui::prelude::ReflectInspectorOptions;
+#[cfg(feature = "inspect")]
+use bevy_inspector_egui::InspectorOptions;
+
+use crate::VirtualJoystickID;
+
+#[derive(Component, Copy, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+#[cfg_attr(feature = "inspect", derive(InspectorOptions))]
+#[cfg_attr(feature = "inspect", reflect(InspectorOptions))]
+pub struct VirtualJoystickUIKnob;
+
+#[derive(Component, Copy, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+#[cfg_attr(feature = "inspect", derive(InspectorOptions))]
+#[cfg_attr(feature = "inspect", reflect(InspectorOptions))]
+pub struct VirtualJoystickUIBackground;
+
+#[derive(Component, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+pub struct VirtualJoystickNode<S: VirtualJoystickID> {
+    pub id: S,
+    pub touch_state: Option<TouchState>,
+    pub just_released: bool,
+    pub base_offset: Vec2,
+    pub delta: Vec2,
+}
+
+impl<S: VirtualJoystickID> VirtualJoystickNode<S> {
+    pub fn with_id(mut self, id: S) -> Self {
+        self.id = id;
+        self
+    }
+}
+
+#[derive(Clone, Debug, Default, Reflect)]
+#[reflect(Default)]
+pub struct TouchState {
+    pub id: u64,
+    pub is_mouse: bool,
+    pub start: Vec2,
+    pub current: Vec2,
+    pub just_pressed: bool,
+}
+
+#[derive(Component, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+pub struct JoystickDeadZone(pub f32);
+
+#[derive(Component, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+pub struct JoystickHorizontalOnly;
+
+#[derive(Component, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+pub struct JoystickVerticalOnly;
+
+#[derive(Component, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+pub struct JoystickInvisible;
+
+#[derive(Component, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+pub struct JoystickFixed;
+
+#[derive(Component, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+pub struct JoystickFloating;
+
+#[derive(Component, Clone, Debug, Default, Reflect)]
+#[reflect(Component, Default)]
+pub struct JoystickDynamic;
diff --git a/src/input.rs b/src/input.rs
deleted file mode 100644
index 81e6c17..0000000
--- a/src/input.rs
+++ /dev/null
@@ -1,212 +0,0 @@
-use bevy::{
-    input::{mouse::MouseButtonInput, ButtonState},
-    prelude::*,
-    window::PrimaryWindow,
-};
-
-use crate::VirtualJoystickID;
-use crate::{
-    ui::VirtualJoystickData, VirtualJoystickEvent, VirtualJoystickEventType, VirtualJoystickNode,
-    VirtualJoystickType,
-};
-
-#[derive(Event)]
-pub enum InputEvent {
-    StartDrag { id: u64, pos: Vec2, is_mouse: bool },
-    Dragging { id: u64, pos: Vec2, is_mouse: bool },
-    EndDrag { id: u64, pos: Vec2, is_mouse: bool },
-}
-
-fn is_some_and<T>(opt: Option<T>, cb: impl FnOnce(T) -> bool) -> bool {
-    if let Some(v) = opt {
-        return cb(v);
-    }
-    false
-}
-
-pub fn update_input<S: VirtualJoystickID>(
-    mut input_events: EventReader<InputEvent>,
-    mut send_values: EventWriter<VirtualJoystickEvent<S>>,
-    mut joysticks: Query<(
-        &VirtualJoystickNode<S>,
-        &Visibility,
-        &InheritedVisibility,
-        &ViewVisibility,
-        &mut VirtualJoystickData,
-    )>,
-) {
-    let input_events = input_events.read().collect::<Vec<&InputEvent>>();
-
-    for (node, visibility, inherited_visibility, view_visibility, mut knob) in joysticks.iter_mut()
-    {
-        if visibility == Visibility::Hidden || !inherited_visibility.get() || !view_visibility.get()
-        {
-            continue;
-        }
-        for event in &input_events {
-            match event {
-                InputEvent::StartDrag { id, pos, is_mouse } => {
-                    if let Some(current_iteraction_is_mouse) = &knob.current_iteraction_is_mouse {
-                        if *current_iteraction_is_mouse != *is_mouse {
-                            continue;
-                        }
-                    }
-                    if knob.interactable_zone_rect.contains(*pos) && knob.id_drag.is_none()
-                        || is_some_and(knob.id_drag, |i| i != *id)
-                            && knob.interactable_zone_rect.contains(*pos)
-                    {
-                        knob.id_drag = Some(*id);
-                        knob.start_pos = *pos;
-                        knob.current_pos = *pos;
-                        knob.delta = Vec2::ZERO;
-                        knob.current_iteraction_is_mouse = Some(*is_mouse);
-                        send_values.send(VirtualJoystickEvent {
-                            id: node.id.clone(),
-                            event: VirtualJoystickEventType::Press,
-                            value: Vec2::ZERO,
-                            delta: Vec2::ZERO,
-                            axis: node.axis,
-                        });
-                    }
-                }
-                InputEvent::Dragging { id, pos, is_mouse } => {
-                    if let Some(current_iteraction_is_mouse) = &knob.current_iteraction_is_mouse {
-                        if *current_iteraction_is_mouse != *is_mouse {
-                            continue;
-                        }
-                    }
-                    if !is_some_and(knob.id_drag, |i| i == *id) {
-                        continue;
-                    }
-                    knob.current_pos = *pos;
-                    let half = knob.interactable_zone_rect.half_size();
-                    if node.behaviour == VirtualJoystickType::Dynamic {
-                        let to_knob = knob.current_pos - knob.start_pos;
-                        let distance_to_knob = to_knob.length();
-                        if distance_to_knob > half.x {
-                            let excess_distance = distance_to_knob - half.x;
-                            knob.start_pos += to_knob.normalize() * excess_distance;
-                        }
-                    }
-                    let d = (knob.start_pos - knob.current_pos) / half;
-                    knob.delta = Vec2::new(
-                        d.x.signum() * d.x.abs().min(1.),
-                        d.y.signum() * d.y.abs().min(1.),
-                    );
-                }
-                InputEvent::EndDrag {
-                    id,
-                    pos: _,
-                    is_mouse,
-                } => {
-                    if let Some(current_iteraction_is_mouse) = &knob.current_iteraction_is_mouse {
-                        if *current_iteraction_is_mouse != *is_mouse {
-                            continue;
-                        }
-                    }
-                    if !is_some_and(knob.id_drag, |i| i == *id) {
-                        continue;
-                    }
-                    knob.id_drag = None;
-                    knob.start_pos = Vec2::ZERO;
-                    knob.current_pos = Vec2::ZERO;
-                    knob.delta = Vec2::ZERO;
-                    knob.current_iteraction_is_mouse = None;
-                    send_values.send(VirtualJoystickEvent {
-                        id: node.id.clone(),
-                        event: VirtualJoystickEventType::Up,
-                        value: Vec2::ZERO,
-                        delta: Vec2::ZERO,
-                        axis: node.axis,
-                    });
-                }
-            }
-        }
-
-        // Send event
-        if (knob.delta.x.abs() >= knob.dead_zone || knob.delta.y.abs() >= knob.dead_zone)
-            && knob.id_drag.is_some()
-        {
-            send_values.send(VirtualJoystickEvent {
-                id: node.id.clone(),
-                event: VirtualJoystickEventType::Drag,
-                value: node.axis.handle_xy(-knob.current_pos.x, knob.current_pos.y),
-                delta: node.axis.handle_xy(-knob.delta.x, knob.delta.y),
-                axis: node.axis,
-            });
-        }
-    }
-}
-
-pub fn update_joystick(touch_events: Res<Touches>, mut send_values: EventWriter<InputEvent>) {
-    for e in touch_events.iter() {
-        let e: &bevy::input::touch::Touch = e;
-        let id = e.id();
-        let pos = e.position();
-
-        if touch_events.just_pressed(e.id()) {
-            // Start drag
-            send_values.send(InputEvent::StartDrag {
-                id,
-                pos,
-                is_mouse: false,
-            });
-            continue;
-        }
-
-        if touch_events.just_released(e.id()) {
-            // End drag
-            send_values.send(InputEvent::EndDrag {
-                id,
-                pos,
-                is_mouse: false,
-            });
-            continue;
-        }
-        // Dragging
-        send_values.send(InputEvent::Dragging {
-            id,
-            pos,
-            is_mouse: false,
-        });
-    }
-}
-
-pub fn update_joystick_by_mouse(
-    mouse_button_input: Res<ButtonInput<MouseButton>>,
-    mut mousebtn_evr: EventReader<MouseButtonInput>,
-    mut send_values: EventWriter<InputEvent>,
-    windows: Query<&Window, With<PrimaryWindow>>,
-) {
-    let window = windows.single();
-    let pos = window.cursor_position().unwrap_or(Vec2::ZERO);
-
-    for mousebtn in mousebtn_evr.read() {
-        // End drag
-        if mousebtn.button == MouseButton::Left && mousebtn.state == ButtonState::Released {
-            send_values.send(InputEvent::EndDrag {
-                id: 0,
-                pos,
-                is_mouse: true,
-            });
-        }
-
-        // Start drag
-        if mousebtn.button == MouseButton::Left && mousebtn.state == ButtonState::Pressed {
-            send_values.send(InputEvent::StartDrag {
-                id: 0,
-                pos,
-                is_mouse: true,
-            });
-        }
-    }
-
-    // Dragging
-    if mouse_button_input.pressed(MouseButton::Left) {
-        send_values.send(InputEvent::Dragging {
-            id: 0,
-            pos,
-            is_mouse: true,
-        });
-    }
-}
diff --git a/src/lib.rs b/src/lib.rs
index 8b783c4..df68167 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,32 +1,47 @@
 use std::{hash::Hash, marker::PhantomData};
 
-use bevy::{
-    prelude::*,
-    reflect::TypePath,
-    render::RenderApp,
-    ui::{RenderUiSystem, UiSystem},
-};
+use bevy::{ecs::schedule::ScheduleLabel, prelude::*, reflect::TypePath};
 
-mod behaviour;
-mod input;
-mod ui;
+mod bundles;
+mod components;
+mod systems;
 mod utils;
 
-pub use behaviour::{VirtualJoystickAxis, VirtualJoystickType};
-use input::{update_input, update_joystick, update_joystick_by_mouse, InputEvent};
-pub use ui::{
-    VirtualJoystickBundle, VirtualJoystickInteractionArea, VirtualJoystickNode,
-    VirtualJoystickUIBackground, VirtualJoystickUIKnob,
+pub use bundles::VirtualJoystickBundle;
+pub use components::{
+    JoystickDeadZone, JoystickDynamic, JoystickFixed, JoystickFloating, JoystickHorizontalOnly,
+    JoystickInvisible, JoystickVerticalOnly, VirtualJoystickNode, VirtualJoystickUIBackground,
+    VirtualJoystickUIKnob,
+};
+use systems::{
+    update_dead_zone, update_dynamic, update_fire_events, update_fixed, update_floating, update_horizontal_only, update_input, update_joystick_visible, update_ui, update_vertical_only
 };
 pub use utils::create_joystick;
 
-use ui::{extract_joystick_node, VirtualJoystickData};
+#[derive(ScheduleLabel, Clone, Debug, PartialEq, Eq, Hash)]
+pub struct UpdateKnobDelta;
+
+#[derive(ScheduleLabel, Clone, Debug, PartialEq, Eq, Hash)]
+pub struct ConstrainKnobDelta;
+
+#[derive(ScheduleLabel, Clone, Debug, PartialEq, Eq, Hash)]
+pub struct FireEvents;
+
+#[derive(ScheduleLabel, Clone, Debug, PartialEq, Eq, Hash)]
+pub struct UpdateUI;
 
 #[derive(Default)]
 pub struct VirtualJoystickPlugin<S> {
     _marker: PhantomData<S>,
 }
 
+#[derive(Event)]
+pub enum InputEvent {
+    StartDrag { id: u64, pos: Vec2, is_mouse: bool },
+    Dragging { id: u64, pos: Vec2, is_mouse: bool },
+    EndDrag { id: u64, pos: Vec2, is_mouse: bool },
+}
+
 pub trait VirtualJoystickID:
     Hash + Sync + Send + Clone + Default + Reflect + TypePath + FromReflect + 'static
 {
@@ -39,56 +54,31 @@ impl<S: Hash + Sync + Send + Clone + Default + Reflect + FromReflect + TypePath
 
 impl<S: VirtualJoystickID> Plugin for VirtualJoystickPlugin<S> {
     fn build(&self, app: &mut bevy::prelude::App) {
-        app.register_type::<VirtualJoystickInteractionArea>()
-            .register_type::<VirtualJoystickNode<S>>()
-            .register_type::<VirtualJoystickData>()
-            .register_type::<VirtualJoystickAxis>()
-            .register_type::<VirtualJoystickType>()
+        app.register_type::<VirtualJoystickNode<S>>()
             .register_type::<VirtualJoystickEventType>()
             .add_event::<VirtualJoystickEvent<S>>()
             .add_event::<InputEvent>()
-            .add_systems(PreUpdate, update_joystick.before(update_input::<S>))
+            .add_systems(PreUpdate, update_input::<S>)
             .add_systems(
-                PreUpdate,
-                update_joystick_by_mouse.before(update_input::<S>),
+                UpdateKnobDelta,
+                (update_fixed::<S>, update_floating::<S>, update_dynamic::<S>),
             )
-            .add_systems(PreUpdate, update_input::<S>)
             .add_systems(
-                PostUpdate,
-                joystick_image_node_system::<S>.before(UiSystem::Layout),
-            );
-
-        let Ok(render_app) = app.get_sub_app_mut(RenderApp) else {
-            return;
-        };
-        render_app.add_systems(
-            ExtractSchedule,
-            extract_joystick_node::<S>.after(RenderUiSystem::ExtractNode),
-        );
-    }
-}
-
-fn joystick_image_node_system<S: VirtualJoystickID>(
-    interaction_area: Query<&Node, With<VirtualJoystickInteractionArea>>,
-    mut joystick: Query<(
-        &Transform,
-        &VirtualJoystickNode<S>,
-        &mut VirtualJoystickData,
-    )>,
-) {
-    let interaction_area = interaction_area
-        .iter()
-        .map(|node| node.size())
-        .collect::<Vec<Vec2>>();
-
-    for (i, (j_pos, data, mut knob)) in joystick.iter_mut().enumerate() {
-        let j_pos = j_pos.translation.truncate();
-        let Some(size) = interaction_area.get(i) else {
-            return;
-        };
-        let interaction_area = Rect::from_center_size(j_pos, *size);
-        knob.dead_zone = data.dead_zone;
-        knob.interactable_zone_rect = interaction_area;
+                ConstrainKnobDelta,
+                (
+                    update_dead_zone::<S>,
+                    update_horizontal_only::<S>,
+                    update_vertical_only::<S>,
+                ),
+            )
+            .add_systems(FireEvents, update_fire_events::<S>)
+            .add_systems(UpdateUI, (update_joystick_visible::<S>, update_ui::<S>))
+            .add_systems(Update, |world: &mut World| {
+                world.run_schedule(UpdateKnobDelta);
+                world.run_schedule(ConstrainKnobDelta);
+                world.run_schedule(FireEvents);
+                world.run_schedule(UpdateUI);
+            });
     }
 }
 
@@ -106,7 +96,6 @@ pub struct VirtualJoystickEvent<S: VirtualJoystickID> {
     event: VirtualJoystickEventType,
     value: Vec2,
     delta: Vec2,
-    axis: VirtualJoystickAxis,
 }
 
 impl<S: VirtualJoystickID> VirtualJoystickEvent<S> {
@@ -119,11 +108,6 @@ impl<S: VirtualJoystickID> VirtualJoystickEvent<S> {
         &self.value
     }
 
-    /// Axis of Joystick see [crate::VirtualJoystickAxis]
-    pub fn direction(&self) -> VirtualJoystickAxis {
-        self.axis
-    }
-
     /// Delta value ranging from 0 to 1 in each vector (x and y)
     pub fn axis(&self) -> &Vec2 {
         &self.delta
@@ -139,33 +123,21 @@ impl<S: VirtualJoystickID> VirtualJoystickEvent<S> {
     /// the default of the dead_zone is 0.5
     pub fn snap_axis(&self, dead_zone: Option<f32>) -> Vec2 {
         let dead_zone = dead_zone.unwrap_or(0.5);
-        let x = if self.axis == VirtualJoystickAxis::Both
-            || self.axis == VirtualJoystickAxis::Horizontal
-        {
-            if self.delta.x > dead_zone {
-                1.
-            } else if self.delta.x < -dead_zone {
-                -1.
+        Vec2::new(
+            if self.delta.x < -dead_zone {
+                -1.0
+            } else if self.delta.x > dead_zone {
+                1.0
             } else {
-                0.
-            }
-        } else {
-            0.
-        };
-        let y = if self.axis == VirtualJoystickAxis::Both
-            || self.axis == VirtualJoystickAxis::Vertical
-        {
-            if self.delta.y > dead_zone {
-                1.
-            } else if self.delta.y < -dead_zone {
-                -1.
+                0.0
+            },
+            if self.delta.y < -dead_zone {
+                -1.0
+            } else if self.delta.y > dead_zone {
+                1.0
             } else {
-                0.
-            }
-        } else {
-            0.
-        };
-
-        Vec2::new(x, y)
+                0.0
+            },
+        )
     }
 }
diff --git a/src/systems.rs b/src/systems.rs
new file mode 100644
index 0000000..fe51d37
--- /dev/null
+++ b/src/systems.rs
@@ -0,0 +1,364 @@
+use bevy::{
+    ecs::{
+        event::EventWriter,
+        query::With,
+        system::{Query, Res},
+    }, hierarchy::Children, input::{mouse::MouseButton, touch::Touches, Input}, math::{Rect, Vec2}, render::view::Visibility, transform::components::GlobalTransform, ui::{Node, PositionType, Style, Val}, window::{PrimaryWindow, Window}
+};
+
+use crate::{
+    components::{TouchState, VirtualJoystickUIBackground, VirtualJoystickUIKnob}, JoystickDeadZone, JoystickDynamic, JoystickFixed, JoystickFloating, JoystickHorizontalOnly, JoystickInvisible, JoystickVerticalOnly, VirtualJoystickEvent, VirtualJoystickEventType, VirtualJoystickID, VirtualJoystickNode
+};
+use bevy::ecs::query::Without;
+
+pub fn update_input<S: VirtualJoystickID>(
+    mut joysticks: Query<(&Node, &GlobalTransform, &mut VirtualJoystickNode<S>)>,
+    mouse_buttons: Res<Input<MouseButton>>,
+    touches: Res<Touches>,
+    q_windows: Query<&Window, With<PrimaryWindow>>,
+) {
+    for (joystick_node, joystick_global_transform, mut joystick_state) in &mut joysticks {
+        joystick_state.just_released = false;
+        if let Some(touch_state) = &mut joystick_state.touch_state {
+            touch_state.just_pressed = false;
+        }
+        if joystick_state.touch_state.is_none() {
+            let rect = joystick_node.logical_rect(joystick_global_transform);
+            for touch in touches.iter() {
+                if rect.contains(touch.position()) {
+                    joystick_state.touch_state = Some(TouchState {
+                        id: touch.id(),
+                        is_mouse: false,
+                        start: touch.position(),
+                        current: touch.position(),
+                        just_pressed: true,
+                    });
+                    break;
+                }
+            }
+            if joystick_state.touch_state.is_none() && mouse_buttons.just_pressed(MouseButton::Left)
+            {
+                if let Some(mouse_pos) = q_windows.single().cursor_position() {
+                    if rect.contains(mouse_pos) {
+                        joystick_state.touch_state = Some(TouchState {
+                            id: 0,
+                            is_mouse: true,
+                            start: mouse_pos,
+                            current: mouse_pos,
+                            just_pressed: true,
+                        });
+                    }
+                }
+            }
+        } else {
+            let mut clear_touch_state = false;
+            if let Some(touch_state) = &joystick_state.touch_state {
+                if touch_state.is_mouse {
+                    if mouse_buttons.just_released(MouseButton::Left) {
+                        clear_touch_state = true;
+                    }
+                } else if touches.just_released(touch_state.id) {
+                    clear_touch_state = true;
+                }
+            }
+            if clear_touch_state {
+                joystick_state.touch_state = None;
+                joystick_state.just_released = true;
+            } else if let Some(touch_state) = &mut joystick_state.touch_state {
+                if touch_state.is_mouse {
+                    let new_current = q_windows.single().cursor_position().unwrap();
+                    if new_current != touch_state.current {
+                        touch_state.current = new_current;
+                    }
+                } else if let Some(touch) = touches.get_pressed(touch_state.id) {
+                    let touch_position = touch.position();
+                    if touch_position != touch_state.current {
+                        touch_state.current = touch_position;
+                    }
+                }
+            }
+        }
+    }
+}
+
+pub fn update_fixed<S: VirtualJoystickID>(
+    mut joysticks: Query<
+        (&mut VirtualJoystickNode<S>, &Children),
+        With<JoystickFixed>,
+    >,
+    joystick_bases: Query<(&Node, &GlobalTransform), With<VirtualJoystickUIBackground>>,
+) {
+    for (mut joystick_state, children) in &mut joysticks {
+        let mut joystick_base_rect: Option<Rect> = None;
+        for &child in children.iter() {
+            if joystick_bases.contains(child) {
+                let (joystick_base_node, joystick_base_global_transform) = joystick_bases.get(child).unwrap();
+                joystick_base_rect = Some(joystick_base_node.logical_rect(joystick_base_global_transform));
+                break;
+            }
+        }
+        if joystick_base_rect.is_none() {
+            continue;
+        }
+        let joystick_base_rect = joystick_base_rect.unwrap();
+        joystick_state.base_offset = Vec2::ZERO;
+        let new_delta: Vec2;
+        if let Some(touch_state) = &joystick_state.touch_state {
+            let mut new_delta2 = ((touch_state.current - touch_state.start)
+                / joystick_base_rect.half_size())
+            .clamp(Vec2::new(-1.0, -1.0), Vec2::new(1.0, 1.0));
+            new_delta2.y = -new_delta2.y;
+            new_delta = new_delta2;
+        } else {
+            new_delta = Vec2::ZERO;
+        }
+        joystick_state.delta = new_delta;
+    }
+}
+
+pub fn update_floating<S: VirtualJoystickID>(
+    mut joystick: Query<
+        (&mut VirtualJoystickNode<S>, &Children),
+        With<JoystickFloating>,
+    >,
+    joystick_bases: Query<(&Node, &GlobalTransform), With<VirtualJoystickUIBackground>>,
+) {
+    for (mut joystick_state, children) in &mut joystick {
+        let mut joystick_base_rect: Option<Rect> = None;
+        for &child in children.iter() {
+            if joystick_bases.contains(child) {
+                let (joystick_base_node, joystick_base_global_transform) = joystick_bases.get(child).unwrap();
+                joystick_base_rect = Some(joystick_base_node.logical_rect(joystick_base_global_transform));
+                break;
+            }
+        }
+        if joystick_base_rect.is_none() {
+            continue;
+        }
+        let joystick_base_rect = joystick_base_rect.unwrap();
+        let base_offset: Vec2;
+        let mut assign_base_offset = false;
+        if let Some(touch_state) = &joystick_state.touch_state {
+            if touch_state.just_pressed {
+                base_offset = touch_state.start - joystick_base_rect.center();
+                assign_base_offset = true;
+            } else {
+                base_offset = joystick_state.base_offset;
+            }
+        } else if joystick_state.just_released {
+            base_offset = Vec2::ZERO;
+            assign_base_offset = true;
+        } else {
+            base_offset = joystick_state.base_offset;
+        }
+        if assign_base_offset {
+            joystick_state.base_offset = base_offset;
+        }
+        let new_delta: Vec2;
+        if let Some(touch_state) = &joystick_state.touch_state {
+            let mut new_delta2 = ((touch_state.current - touch_state.start)
+                / joystick_base_rect.half_size())
+            .clamp(Vec2::new(-1.0, -1.0), Vec2::new(1.0, 1.0));
+            new_delta2.y = -new_delta2.y;
+            new_delta = new_delta2;
+        } else {
+            new_delta = Vec2::ZERO;
+        }
+        joystick_state.delta = new_delta;
+    }
+}
+
+pub fn update_dynamic<S: VirtualJoystickID>(
+    mut joysticks: Query<
+        (&Node, &GlobalTransform, &mut VirtualJoystickNode<S>, &Children),
+        With<JoystickDynamic>,
+    >,
+    joystick_bases: Query<(&Node, &GlobalTransform), With<VirtualJoystickUIBackground>>,
+) {
+    for (joystick_node, joystick_global_transform, mut joystick_state, children) in &mut joysticks {
+        let joystick_rect = joystick_node.logical_rect(joystick_global_transform);
+        let mut joystick_base_rect: Option<Rect> = None;
+        for &child in children.iter() {
+            if joystick_bases.contains(child) {
+                let (joystick_base_node, joystick_base_global_transform) = joystick_bases.get(child).unwrap();
+                joystick_base_rect = Some(joystick_base_node.logical_rect(joystick_base_global_transform));
+                break;
+            }
+        }
+        if joystick_base_rect.is_none() {
+            continue;
+        }
+        let joystick_base_rect = joystick_base_rect.unwrap();
+        let joystick_base_rect_center = joystick_base_rect.center();
+        let joystick_base_rect_half_size = joystick_base_rect.half_size();
+        let base_offset: Vec2;
+        let mut assign_base_offset = false;
+        if let Some(touch_state) = &joystick_state.touch_state {
+            if touch_state.just_pressed {
+                base_offset = touch_state.start - joystick_base_rect_center;
+                assign_base_offset = true;
+            } else {
+                base_offset = joystick_state.base_offset;
+            }
+        } else if joystick_state.just_released {
+            base_offset = Vec2::ZERO;
+            assign_base_offset = true;
+        } else {
+            base_offset = joystick_state.base_offset;
+        }
+        if assign_base_offset {
+            joystick_state.base_offset = base_offset;
+        }
+        let new_delta: Vec2;
+        let mut new_base_offset: Option<Vec2> = None;
+        if let Some(touch_state) = &joystick_state.touch_state {
+            let mut offset = touch_state.current - (joystick_rect.min + base_offset + joystick_base_rect.half_size());
+            if offset.length_squared() > joystick_base_rect_half_size.x * joystick_base_rect_half_size.x {
+                let adjustment = offset - offset * (joystick_base_rect_half_size.x / offset.length());
+                offset += adjustment;
+                new_base_offset = Some(base_offset + adjustment);
+            }
+            let mut new_delta2 = (offset / joystick_base_rect_half_size)
+                .clamp(Vec2::new(-1.0, -1.0), Vec2::new(1.0, 1.0));
+            new_delta2.y = -new_delta2.y;
+            new_delta = new_delta2;
+        } else {
+            new_delta = Vec2::ZERO;
+        }
+        joystick_state.delta = new_delta;
+        if let Some(base_offset) = new_base_offset {
+            joystick_state.base_offset = base_offset;
+        }
+    }
+}
+
+pub fn update_dead_zone<S: VirtualJoystickID>(
+    mut joystick: Query<(&JoystickDeadZone, &mut VirtualJoystickNode<S>)>,
+) {
+    for (joystick_dead_zone, mut joystick_state) in &mut joystick {
+        let dead_zone = joystick_dead_zone.0;
+        if joystick_state.delta.x.abs() < dead_zone {
+            joystick_state.delta.x = 0.0;
+        }
+        if joystick_state.delta.y.abs() < dead_zone {
+            joystick_state.delta.y = 0.0;
+        }
+    }
+}
+
+pub fn update_horizontal_only<S: VirtualJoystickID>(
+    mut joystick: Query<&mut VirtualJoystickNode<S>, With<JoystickHorizontalOnly>>,
+) {
+    for mut joystick_state in &mut joystick {
+        joystick_state.delta.y = 0.0;
+    }
+}
+
+pub fn update_vertical_only<S: VirtualJoystickID>(
+    mut joystick: Query<&mut VirtualJoystickNode<S>, With<JoystickVerticalOnly>>,
+) {
+    for mut joystick_state in &mut joystick {
+        joystick_state.delta.x = 0.0;
+    }
+}
+
+pub fn update_fire_events<S: VirtualJoystickID>(
+    joysticks: Query<&VirtualJoystickNode<S>>,
+    mut send_values: EventWriter<VirtualJoystickEvent<S>>,
+) {
+    for joystick in &joysticks {
+        if joystick.just_released {
+            send_values.send(VirtualJoystickEvent {
+                id: joystick.id.clone(),
+                event: VirtualJoystickEventType::Up,
+                value: Vec2::ZERO,
+                delta: joystick.delta,
+            });
+            continue;
+        }
+        if let Some(touch_state) = &joystick.touch_state {
+            if touch_state.just_pressed {
+                send_values.send(VirtualJoystickEvent {
+                    id: joystick.id.clone(),
+                    event: VirtualJoystickEventType::Press,
+                    value: touch_state.current,
+                    delta: joystick.delta,
+                });
+            }
+            send_values.send(VirtualJoystickEvent {
+                id: joystick.id.clone(),
+                event: VirtualJoystickEventType::Drag,
+                value: touch_state.current,
+                delta: joystick.delta,
+            });
+        }
+    }
+}
+
+pub fn update_joystick_visible<S: VirtualJoystickID>(
+    mut joysticks: Query<(&mut Visibility, &VirtualJoystickNode<S>), With<JoystickInvisible>>,
+) {
+    for (mut joystick_visibility, joystick_state) in &mut joysticks {
+        if joystick_state.just_released || *joystick_visibility != Visibility::Hidden && joystick_state.touch_state.is_none() {
+            *joystick_visibility = Visibility::Hidden;
+        }
+        if let Some(touch_state) = &joystick_state.touch_state {
+            if touch_state.just_pressed {
+                *joystick_visibility = Visibility::Inherited;
+            }
+        }
+    }
+}
+
+#[allow(clippy::complexity)]
+pub fn update_ui<S: VirtualJoystickID>(
+    joysticks: Query<(&VirtualJoystickNode<S>, &Children)>,
+    mut joystick_bases: Query<(&mut Style, &Node, &GlobalTransform), With<VirtualJoystickUIBackground>>,
+    mut joystick_knobs: Query<
+        (&mut Style, &Node, &GlobalTransform),
+        (
+            With<VirtualJoystickUIKnob>,
+            Without<VirtualJoystickUIBackground>,
+        ),
+    >,
+) {
+    for (joystick_state,  children) in &joysticks {
+        let mut joystick_base_rect: Option<Rect> = None;
+        for child in children.iter() {
+            if joystick_bases.contains(*child) {
+                let (mut joystick_base_style, joystick_base_node, joystick_base_global_transform) = joystick_bases.get_mut(*child).unwrap();
+                joystick_base_style.position_type = PositionType::Absolute;
+                joystick_base_style.left = Val::Px(joystick_state.base_offset.x);
+                joystick_base_style.top = Val::Px(joystick_state.base_offset.y);
+                joystick_base_rect = Some(joystick_base_node.logical_rect(joystick_base_global_transform));
+            }
+        }
+        if joystick_base_rect.is_none() {
+            continue;
+        }
+        let joystick_base_rect = joystick_base_rect.unwrap();
+        let joystick_base_rect_half_size = joystick_base_rect.half_size();
+        for child in children.iter() {
+            if joystick_knobs.contains(*child) {
+                let (mut joystick_knob_style, joystick_knob_node, joystick_knob_global_transform) =
+                    joystick_knobs.get_mut(*child).unwrap();
+                let joystick_knob_rect =
+                    joystick_knob_node.logical_rect(joystick_knob_global_transform);
+                let joystick_knob_half_size = joystick_knob_rect.half_size();
+                joystick_knob_style.position_type = PositionType::Absolute;
+                joystick_knob_style.left = Val::Px(
+                    joystick_state.base_offset.x
+                        + joystick_base_rect_half_size.x
+                        + joystick_knob_half_size.x
+                        + (joystick_state.delta.x - 1.0) * joystick_base_rect_half_size.x,
+                );
+                joystick_knob_style.top = Val::Px(
+                    joystick_state.base_offset.y
+                        + joystick_base_rect_half_size.y
+                        + joystick_knob_half_size.y
+                        + (-joystick_state.delta.y - 1.0) * joystick_base_rect_half_size.y,
+                );
+            }
+        }
+    }
+}
diff --git a/src/ui.rs b/src/ui.rs
deleted file mode 100644
index f88bd26..0000000
--- a/src/ui.rs
+++ /dev/null
@@ -1,5 +0,0 @@
-mod bundles;
-mod systems;
-
-pub use bundles::*;
-pub use systems::*;
diff --git a/src/ui/bundles.rs b/src/ui/bundles.rs
deleted file mode 100644
index d528d98..0000000
--- a/src/ui/bundles.rs
+++ /dev/null
@@ -1,110 +0,0 @@
-use bevy::{prelude::*, ui::RelativeCursorPosition};
-
-#[cfg(feature = "inspect")]
-use bevy_inspector_egui::prelude::*;
-
-use crate::{VirtualJoystickAxis, VirtualJoystickID, VirtualJoystickType};
-
-#[derive(Component, Clone, Debug, Default, Reflect)]
-#[reflect(Component, Default)]
-#[cfg_attr(feature = "inspect", derive(InspectorOptions))]
-#[cfg_attr(feature = "inspect", reflect(InspectorOptions))]
-pub struct VirtualJoystickInteractionArea;
-
-#[derive(Component, Copy, Clone, Debug, Default, Reflect)]
-#[reflect(Component, Default)]
-#[cfg_attr(feature = "inspect", derive(InspectorOptions))]
-#[cfg_attr(feature = "inspect", reflect(InspectorOptions))]
-pub struct VirtualJoystickUIKnob;
-
-#[derive(Component, Copy, Clone, Debug, Default, Reflect)]
-#[reflect(Component, Default)]
-#[cfg_attr(feature = "inspect", derive(InspectorOptions))]
-#[cfg_attr(feature = "inspect", reflect(InspectorOptions))]
-pub struct VirtualJoystickUIBackground;
-
-#[derive(Bundle, Debug, Default)]
-pub struct VirtualJoystickBundle<S: VirtualJoystickID> {
-    /// Describes the size of the node
-    pub(crate) node: Node,
-    /// Describes the style including flexbox settings
-    pub(crate) style: Style,
-    /// The texture atlas image of the node
-    pub(crate) joystick: VirtualJoystickNode<S>,
-    /// The transform of the node
-    pub(crate) transform: Transform,
-    /// The global transform of the node
-    pub(crate) global_transform: GlobalTransform,
-    /// Describes the visibility properties of the node
-    pub visibility: Visibility,
-    /// Inherited visibility of an entity.
-    pub inherited_visibility: InheritedVisibility,
-    /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering
-    pub view_visibility: ViewVisibility,
-    /// Indicates the depth at which the node should appear in the UI
-    pub(crate) z_index: ZIndex,
-    pub(crate) knob_data: VirtualJoystickData,
-    pub(crate) cursor_pos: RelativeCursorPosition,
-}
-
-#[derive(Component, Clone, Debug, Default, Reflect)]
-#[reflect(Component, Default)]
-pub struct VirtualJoystickNode<S: VirtualJoystickID> {
-    /// Identifier of joystick
-    pub id: S,
-    /// Zone to ignore movement
-    pub dead_zone: f32,
-    /// Define Axis for this joystick
-    pub axis: VirtualJoystickAxis,
-    /// Define the behaviour of joystick
-    pub behaviour: VirtualJoystickType,
-}
-
-#[derive(Component, Clone, Debug, Default, Reflect)]
-#[reflect(Component, Default)]
-pub struct VirtualJoystickData {
-    pub id_drag: Option<u64>,
-    pub dead_zone: f32,
-    pub start_pos: Vec2,
-    pub current_pos: Vec2,
-    pub delta: Vec2,
-    pub interactable_zone_rect: Rect,
-    /// None means no current interaction<br/>
-    /// Some(false) means current interaction is touch<br/>
-    /// Some(true) means current interaction is mouse
-    pub current_iteraction_is_mouse: Option<bool>,
-}
-
-impl<S: VirtualJoystickID> VirtualJoystickBundle<S> {
-    pub fn new(joystick: VirtualJoystickNode<S>) -> Self {
-        Self {
-            joystick,
-            ..default()
-        }
-    }
-
-    pub fn set_node(mut self, node: Node) -> Self {
-        self.node = node;
-        self
-    }
-
-    pub fn set_style(mut self, style: Style) -> Self {
-        self.style = style;
-        self
-    }
-
-    pub fn set_transform(mut self, transform: Transform) -> Self {
-        self.transform = transform;
-        self
-    }
-
-    pub fn set_global_transform(mut self, global_transform: GlobalTransform) -> Self {
-        self.global_transform = global_transform;
-        self
-    }
-
-    pub fn set_z_index(mut self, z_index: ZIndex) -> Self {
-        self.z_index = z_index;
-        self
-    }
-}
diff --git a/src/ui/components.rs b/src/ui/components.rs
deleted file mode 100644
index e69de29..0000000
diff --git a/src/ui/systems.rs b/src/ui/systems.rs
deleted file mode 100644
index ee468b3..0000000
--- a/src/ui/systems.rs
+++ /dev/null
@@ -1,119 +0,0 @@
-use bevy::{prelude::*, render::Extract, ui::ExtractedUiNodes};
-
-use crate::{
-    VirtualJoystickID, VirtualJoystickNode, VirtualJoystickType, VirtualJoystickUIBackground,
-    VirtualJoystickUIKnob,
-};
-
-use super::VirtualJoystickData;
-
-#[allow(clippy::type_complexity)]
-pub fn extract_joystick_node<S: VirtualJoystickID>(
-    mut extracted_uinodes: ResMut<ExtractedUiNodes>,
-    knob_ui_query: Extract<Query<(Entity, &Parent), With<VirtualJoystickUIKnob>>>,
-    bg_ui_query: Extract<Query<(Entity, &Parent), With<VirtualJoystickUIBackground>>>,
-    uinode_query: Extract<
-        Query<(
-            &Node,
-            &GlobalTransform,
-            &VirtualJoystickNode<S>,
-            &Visibility,
-            &InheritedVisibility,
-            &ViewVisibility,
-            &VirtualJoystickData,
-        )>,
-    >,
-) {
-    for (entity, parent) in &knob_ui_query {
-        if let Ok((
-            uinode,
-            global_transform,
-            joystick_node,
-            visibility,
-            inherited_visibility,
-            view_visibility,
-            data,
-        )) = uinode_query.get(**parent)
-        {
-            if visibility == Visibility::Hidden
-                || !inherited_visibility.get()
-                || !view_visibility.get()
-                || uinode.size().x == 0.
-                || uinode.size().y == 0.
-            {
-                continue;
-            }
-            let base_pos = get_base_pos(uinode, joystick_node.behaviour, data, global_transform);
-            let radius = uinode.size().x / 2.;
-            // ui is y down, so we flip
-            let pos = -data.delta * radius;
-            let knob_pos = base_pos + joystick_node.axis.handle_vec3(pos.extend(0.));
-
-            extracted_uinodes.uinodes.entry(entity).and_modify(|node| {
-                node.transform = Mat4::from_translation(knob_pos);
-            });
-        }
-    }
-
-    for (entity, parent) in &bg_ui_query {
-        if let Ok((
-            uinode,
-            global_transform,
-            joystick_node,
-            visibility,
-            inherited_visibility,
-            view_visibility,
-            data,
-        )) = uinode_query.get(**parent)
-        {
-            if visibility == Visibility::Hidden
-                || !inherited_visibility.get()
-                || !view_visibility.get()
-                || uinode.size().x == 0.
-                || uinode.size().y == 0.
-            {
-                continue;
-            }
-            let pos = get_base_pos(uinode, joystick_node.behaviour, data, global_transform);
-            extracted_uinodes.uinodes.entry(entity).and_modify(|node| {
-                node.transform = Mat4::from_translation(pos);
-            });
-        }
-    }
-}
-
-fn get_base_pos(
-    uinode: &Node,
-    behaviour: VirtualJoystickType,
-    joystick: &VirtualJoystickData,
-    global_transform: &GlobalTransform,
-) -> Vec3 {
-    let container_rect = Rect {
-        max: uinode.size(),
-        ..default()
-    };
-
-    match behaviour {
-        VirtualJoystickType::Fixed => global_transform
-            .compute_matrix()
-            .transform_point3((container_rect.center() - (uinode.size() / 2.)).extend(0.)),
-        VirtualJoystickType::Floating => {
-            if joystick.id_drag.is_none() {
-                global_transform
-                    .compute_matrix()
-                    .transform_point3((container_rect.center() - (uinode.size() / 2.)).extend(0.))
-            } else {
-                joystick.start_pos.extend(0.)
-            }
-        }
-        VirtualJoystickType::Dynamic => {
-            if joystick.id_drag.is_none() {
-                global_transform
-                    .compute_matrix()
-                    .transform_point3((container_rect.center() - (uinode.size() / 2.)).extend(0.))
-            } else {
-                joystick.start_pos.extend(0.)
-            }
-        }
-    }
-}
diff --git a/src/utils.rs b/src/utils.rs
index 1b9fd8a..ddba751 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -1,8 +1,8 @@
 use bevy::prelude::*;
 
 use crate::{
-    VirtualJoystickBundle, VirtualJoystickID, VirtualJoystickInteractionArea, VirtualJoystickNode,
-    VirtualJoystickUIBackground, VirtualJoystickUIKnob,
+    VirtualJoystickBundle, VirtualJoystickID, VirtualJoystickNode, VirtualJoystickUIBackground,
+    VirtualJoystickUIKnob,
 };
 
 /// This function is a simple helper to create a joystick
@@ -99,6 +99,7 @@ use crate::{
 #[allow(clippy::too_many_arguments)]
 pub fn create_joystick<I: VirtualJoystickID>(
     cmd: &mut Commands,
+    id: I,
     knob_img: Handle<Image>,
     background_img: Handle<Image>,
     knob_color: Option<Color>,
@@ -106,41 +107,44 @@ pub fn create_joystick<I: VirtualJoystickID>(
     interactable_area_color: Option<Color>,
     knob_size: Vec2,
     background_size: Vec2,
-    joystick_node: VirtualJoystickNode<I>,
     joystick_node_style: Style,
+    behaviour_components: impl Bundle,
 ) {
-    let mut spawn =
-        cmd.spawn(VirtualJoystickBundle::new(joystick_node).set_style(joystick_node_style));
-    let spawn = spawn
-        .insert(VirtualJoystickInteractionArea)
-        .with_children(|parent| {
-            parent.spawn((
-                VirtualJoystickUIKnob,
-                ImageBundle {
-                    image: knob_img.into(),
-                    style: Style {
-                        width: Val::Px(knob_size.x),
-                        height: Val::Px(knob_size.y),
-                        ..default()
-                    },
-                    background_color: knob_color.unwrap_or(Color::WHITE).into(),
+    let mut spawn = cmd.spawn((
+        VirtualJoystickBundle::new(VirtualJoystickNode::<I>::default().with_id(id))
+            .set_style(joystick_node_style),
+        behaviour_components,
+    ));
+    let spawn = spawn.with_children(|parent| {
+        parent.spawn((
+            VirtualJoystickUIKnob,
+            ImageBundle {
+                image: knob_img.into(),
+                style: Style {
+                    position_type: PositionType::Absolute,
+                    width: Val::Px(knob_size.x),
+                    height: Val::Px(knob_size.y),
                     ..default()
                 },
-            ));
-            parent.spawn((
-                VirtualJoystickUIBackground,
-                ImageBundle {
-                    image: background_img.into(),
-                    style: Style {
-                        width: Val::Px(background_size.x),
-                        height: Val::Px(background_size.y),
-                        ..default()
-                    },
-                    background_color: background_color.unwrap_or(Color::WHITE).into(),
+                background_color: knob_color.unwrap_or(Color::WHITE).into(),
+                ..default()
+            },
+        ));
+        parent.spawn((
+            VirtualJoystickUIBackground,
+            ImageBundle {
+                image: background_img.into(),
+                style: Style {
+                    position_type: PositionType::Absolute,
+                    width: Val::Px(background_size.x),
+                    height: Val::Px(background_size.y),
                     ..default()
                 },
-            ));
-        });
+                background_color: background_color.unwrap_or(Color::WHITE).into(),
+                ..default()
+            },
+        ));
+    });
 
     if let Some(c) = interactable_area_color {
         spawn.insert(BackgroundColor(c));