Use only the right click to interact with the Slider (#121)

This commit is contained in:
Yohan Boogaert 2021-08-02 18:36:09 +02:00 committed by GitHub
parent e50b3467f7
commit 649be4432d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 18 deletions

View file

@ -61,6 +61,19 @@ pub use tree::*;
use yew::Classes;
// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
#[allow(dead_code)]
const MOUSE_EVENT_BUTTONS_NONE: u16 = 0;
const MOUSE_EVENT_BUTTONS_PRIMARY: u16 = 1;
#[allow(dead_code)]
const MOUSE_EVENT_BUTTONS_SECONDARY: u16 = 2;
#[allow(dead_code)]
const MOUSE_EVENT_BUTTONS_AUXILIARY: u16 = 4;
#[allow(dead_code)]
const MOUSE_EVENT_BUTTONS_FOURTH: u16 = 8;
#[allow(dead_code)]
const MOUSE_EVENT_BUTTONS_FIFTH: u16 = 16;
#[macro_export]
macro_rules! if_html {
(let $pat:pat = $cond:expr => $($body:tt)+) => {

View file

@ -90,25 +90,28 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
}
Msg::StartChange => false,
Msg::Mouse(event) if self.props.values.len() > 1 => {
let track_rect = self.track_ref.cast::<Element>().expect("no track ref");
let tick_size = (track_rect.client_width() as f64)
/ self.props.values.len().saturating_sub(1) as f64;
let pixel_delta =
(event.client_x() as f64) - track_rect.get_bounding_client_rect().left();
if event.buttons() == crate::MOUSE_EVENT_BUTTONS_PRIMARY {
let track_rect = self.track_ref.cast::<Element>().expect("no track ref");
let tick_size = (track_rect.client_width() as f64)
/ self.props.values.len().saturating_sub(1) as f64;
let pixel_delta =
(event.client_x() as f64) - track_rect.get_bounding_client_rect().left();
let position = (pixel_delta / tick_size).round() as usize;
let position = (pixel_delta / tick_size).round() as usize;
let (value, _) = self
.props
.values
.get(position)
.unwrap_or_else(|| self.props.values.last().expect("No value in the vec"));
let (value, _) =
self.props.values.get(position).unwrap_or_else(|| {
self.props.values.last().expect("No value in the vec")
});
if Some(value) != self.props.selected.as_ref() {
self.props.onchange.emit(value.clone());
if Some(value) != self.props.selected.as_ref() {
self.props.onchange.emit(value.clone());
}
true
} else {
false
}
true
}
Msg::Mouse(_) => false,
Msg::StopChange => {
@ -238,7 +241,15 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
)
onmousedown=(self.props.values.len() > 1).then(
|| self.link.batch_callback(
|event: MouseEvent| vec![Msg::StartChange, Msg::Mouse(event)]
|event: MouseEvent| {
if event.buttons() ==
crate::MOUSE_EVENT_BUTTONS_PRIMARY
{
vec![Msg::StartChange, Msg::Mouse(event)]
} else {
vec![]
}
}
)
)
>
@ -308,7 +319,14 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
100.0 * (index as f64)
/ (self.props.values.len() as f64 - 1.0),
)
onmousedown=self.link.callback(|_| Msg::StartChange)
onmousedown=self.link.batch_callback(
|event: MouseEvent| {
if event.buttons() == crate::MOUSE_EVENT_BUTTONS_PRIMARY {
vec![Msg::StartChange]
} else {
vec![]
}
})
onkeydown=self.link.callback(|event| Msg::Keyboard(event))
tabindex=0
>

View file

@ -135,7 +135,7 @@ impl<T: Clone + PartialEq + Hash + 'static> Component for Tabs<T> {
.reform(move |_| tab_id.clone())
})}
key=*id
ref=self.tab_refs[&id].clone()
ref=self.tab_refs[id].clone()
>
{ props.title.clone() }
</div>