dioxus-gestures 0.2.1

Drag, Pinch, and Hover gestures for dioxus components.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

use std::{cell::RefCell, rc::Rc};
use dioxus::html::point_interaction::InteractionLocation;
use dioxus::{html::PointerData};

use crate::state::gestures::pointer::{IncrementalOffsetPointer, InitialPointer, OffsetPointer};

/// ```rust
/// use dioxus::{
///     html::geometry::{euclid::Point2D, ClientSpace},
///     prelude::*,
/// };
/// use dioxus_gestures::{
///     state::gestures::drag::Drag,
///     use_gestures::{use_gestures, Gestures},
/// };
///
/// const UNDRAGGED_TEXT: &str = "Drag me!";
/// const DRAGGED_TEXT: &str = "Dragging ...";
///
/// #[component]
/// pub fn DragExample() -> Element {
///     let mut position = use_signal(|| Point2D::<_, ClientSpace>::new(0.0, 0.0));
///     let mut text = use_signal(|| UNDRAGGED_TEXT);
///
///     let gestures = use_gestures(
///         Gestures::default()
///             .drag(
///                 Drag::default()
///                     .on_start(move |_| text.set(DRAGGED_TEXT))
///                     .on_update(move |data| {
///                         let movement = data.pointer.delta_movement();
///                         position.set(position() + movement);
///                     })
///                     .on_end(move |_| text.set(UNDRAGGED_TEXT))
///                     .on_cancel(move |_| text.set(UNDRAGGED_TEXT)),
///             )
///     );
///
///     rsx! {
///         div {
///         class: "target drag",
///         style: format!("
///             user-select: none;
///             touch-action: none;
///             position: relative;
///             left: {}px;
///             top: {}px;
///         ", position().x, position().y),
///         ..gestures.event_handlers(),
///             "{text}"
///         }
///     }
/// }
/// ```
#[derive(Clone)]
pub struct Drag {
    pub on_start: Option<Rc<RefCell<dyn FnMut(DragStartData)>>>,
    pub on_update: Option<Rc<RefCell<dyn FnMut(DragUpdateData)>>>,
    pub on_end: Option<Rc<RefCell<dyn FnMut(DragEndData)>>>,
    pub on_cancel: Option<Rc<RefCell<dyn FnMut(DragCancelData)>>>,
    pub has_started: Rc<dyn Fn([&PointerData; 2]) -> bool>,
}

impl Drag {
    pub fn on_start(mut self, handler: impl FnMut(DragStartData) + 'static) -> Self {
        self.on_start = Some(Rc::new(RefCell::new(handler)));
        self
    }

    pub fn on_update(mut self, handler: impl FnMut(DragUpdateData) + 'static) -> Self {
        self.on_update = Some(Rc::new(RefCell::new(handler)));
        self
    }

    pub fn on_end(mut self, handler: impl FnMut(DragEndData) + 'static) -> Self {
        self.on_end = Some(Rc::new(RefCell::new(handler)));
        self
    }

    pub fn on_cancel(mut self, handler: impl FnMut(DragCancelData) + 'static) -> Self {
        self.on_cancel = Some(Rc::new(RefCell::new(handler)));
        self
    }

    pub fn has_started(mut self, predicate: impl Fn([&PointerData; 2]) -> bool + 'static) -> Self {
        self.has_started = Rc::new(predicate);
        self
    }
}

pub struct DragStartData {
    pub pointer: InitialPointer,
}
pub struct DragUpdateData {
    pub pointer: IncrementalOffsetPointer,
}
pub struct DragEndData {
    pub pointer: OffsetPointer,
}
pub struct DragCancelData {
    pub pointer: OffsetPointer,
}

impl Default for Drag {
    fn default() -> Self {
        Self {
            on_start: Default::default(),
            on_update: Default::default(),
            on_end: Default::default(),
            on_cancel: Default::default(),
            has_started: Rc::new(|[initial, current]| {
                (current.client_coordinates() - initial.client_coordinates()).length() >= 5.0
            }),
        }
    }
}