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

View file

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