wgui: button: pressed state visual feedback

This commit is contained in:
Aleksander
2025-08-13 17:32:40 +02:00
parent a79ed0839b
commit faec8866c5
2 changed files with 50 additions and 26 deletions

View File

@@ -25,6 +25,10 @@ pub struct Params {
pub text_style: TextStyle, pub text_style: TextStyle,
} }
fn get_color2(color: &drawing::Color) -> drawing::Color {
color.lerp(&Color::new(0.0, 0.0, 0.0, color.a), 0.2)
}
impl Default for Params { impl Default for Params {
fn default() -> Self { fn default() -> Self {
Self { Self {
@@ -52,6 +56,7 @@ struct State {
struct Data { struct Data {
initial_color: drawing::Color, initial_color: drawing::Color,
initial_color2: drawing::Color,
initial_border_color: drawing::Color, initial_border_color: drawing::Color,
text_id: WidgetID, // Text text_id: WidgetID, // Text
rect_id: WidgetID, // Rectangle rect_id: WidgetID, // Rectangle
@@ -91,39 +96,36 @@ impl ComponentButton {
} }
} }
fn anim_hover(rect: &mut WidgetRectangle, data: &Data, pos: f32) { fn anim_hover(rect: &mut WidgetRectangle, data: &Data, pos: f32, pressed: bool) {
let brightness = pos * 0.5; let brightness = pos * if pressed { 0.75 } else { 0.5 };
let border_brightness = pos; let border_brightness = pos;
rect.params.color.r = data.initial_color.r + brightness; rect.params.color = data.initial_color.add_rgb(brightness);
rect.params.color.g = data.initial_color.g + brightness; rect.params.color2 = data.initial_color2.add_rgb(brightness);
rect.params.color.b = data.initial_color.b + brightness; rect.params.border_color = data.initial_border_color.add_rgb(border_brightness);
rect.params.border_color.r = data.initial_border_color.r + border_brightness; rect.params.border = 2.0;
rect.params.border_color.g = data.initial_border_color.g + border_brightness;
rect.params.border_color.b = data.initial_border_color.b + border_brightness;
rect.params.border = 3.0;
} }
fn anim_hover_in(data: Rc<Data>, widget_id: WidgetID) -> Animation { fn anim_hover_in(data: Rc<Data>, state: Rc<RefCell<State>>, widget_id: WidgetID) -> Animation {
Animation::new( Animation::new(
widget_id, widget_id,
5, 5,
AnimationEasing::OutQuad, AnimationEasing::OutQuad,
Box::new(move |common, anim_data| { Box::new(move |common, anim_data| {
let rect = anim_data.obj.get_as_mut::<WidgetRectangle>(); let rect = anim_data.obj.get_as_mut::<WidgetRectangle>();
anim_hover(rect, &data, anim_data.pos); anim_hover(rect, &data, anim_data.pos, state.borrow().down);
common.alterables.mark_redraw(); common.alterables.mark_redraw();
}), }),
) )
} }
fn anim_hover_out(data: Rc<Data>, widget_id: WidgetID) -> Animation { fn anim_hover_out(data: Rc<Data>, state: Rc<RefCell<State>>, widget_id: WidgetID) -> Animation {
Animation::new( Animation::new(
widget_id, widget_id,
8, 8,
AnimationEasing::OutQuad, AnimationEasing::OutQuad,
Box::new(move |common, anim_data| { Box::new(move |common, anim_data| {
let rect = anim_data.obj.get_as_mut::<WidgetRectangle>(); let rect = anim_data.obj.get_as_mut::<WidgetRectangle>();
anim_hover(rect, &data, 1.0 - anim_data.pos); anim_hover(rect, &data, 1.0 - anim_data.pos, state.borrow().down);
common.alterables.mark_redraw(); common.alterables.mark_redraw();
}), }),
) )
@@ -141,9 +143,11 @@ fn register_event_mouse_enter<U1, U2>(
EventListenerKind::MouseEnter, EventListenerKind::MouseEnter,
Box::new(move |common, event_data, _, _| { Box::new(move |common, event_data, _, _| {
common.alterables.trigger_haptics(); common.alterables.trigger_haptics();
common common.alterables.animate(anim_hover_in(
.alterables data.clone(),
.animate(anim_hover_in(data.clone(), event_data.widget_id)); state.clone(),
event_data.widget_id,
));
state.borrow_mut().hovered = true; state.borrow_mut().hovered = true;
Ok(()) Ok(())
}), }),
@@ -162,9 +166,11 @@ fn register_event_mouse_leave<U1, U2>(
EventListenerKind::MouseLeave, EventListenerKind::MouseLeave,
Box::new(move |common, event_data, _, _| { Box::new(move |common, event_data, _, _| {
common.alterables.trigger_haptics(); common.alterables.trigger_haptics();
common common.alterables.animate(anim_hover_out(
.alterables data.clone(),
.animate(anim_hover_out(data.clone(), event_data.widget_id)); state.clone(),
event_data.widget_id,
));
state.borrow_mut().hovered = false; state.borrow_mut().hovered = false;
Ok(()) Ok(())
}), }),
@@ -181,14 +187,19 @@ fn register_event_mouse_press<U1, U2>(
listener_handles, listener_handles,
data.rect_id, data.rect_id,
EventListenerKind::MousePress, EventListenerKind::MousePress,
Box::new(move |common, _event_data, _, _| { Box::new(move |common, event_data, _, _| {
common.alterables.trigger_haptics();
let mut state = state.borrow_mut(); let mut state = state.borrow_mut();
let rect = event_data.obj.get_as_mut::<WidgetRectangle>();
anim_hover(rect, &data, 1.0, true);
if state.hovered { if state.hovered {
state.down = true; state.down = true;
} }
common.alterables.trigger_haptics();
common.alterables.mark_redraw();
Ok(()) Ok(())
}), }),
); );
@@ -204,8 +215,9 @@ fn register_event_mouse_release<U1, U2>(
listener_handles, listener_handles,
data.rect_id, data.rect_id,
EventListenerKind::MouseRelease, EventListenerKind::MouseRelease,
Box::new(move |common, _data, _, _| { Box::new(move |common, event_data, _, _| {
common.alterables.trigger_haptics(); let rect = event_data.obj.get_as_mut::<WidgetRectangle>();
anim_hover(rect, &data, 1.0, false);
let mut state = state.borrow_mut(); let mut state = state.borrow_mut();
if state.down { if state.down {
@@ -220,6 +232,10 @@ fn register_event_mouse_release<U1, U2>(
} }
} }
} }
common.alterables.trigger_haptics();
common.alterables.mark_redraw();
Ok(()) Ok(())
}), }),
); );
@@ -244,9 +260,7 @@ pub fn construct<U1, U2>(
parent, parent,
WidgetRectangle::create(WidgetRectangleParams { WidgetRectangle::create(WidgetRectangleParams {
color: params.color, color: params.color,
color2: params color2: get_color2(&params.color),
.color
.lerp(&Color::new(0.0, 0.0, 0.0, params.color.a), 0.3),
gradient: drawing::GradientMode::Vertical, gradient: drawing::GradientMode::Vertical,
round: params.round, round: params.round,
border_color: params.border_color, border_color: params.border_color,
@@ -284,6 +298,7 @@ pub fn construct<U1, U2>(
rect_id, rect_id,
text_node, text_node,
initial_color: params.color, initial_color: params.color,
initial_color2: get_color2(&params.color),
initial_border_color: params.border_color, initial_border_color: params.border_color,
}); });

View File

@@ -51,6 +51,15 @@ impl Color {
Self { r, g, b, a } Self { r, g, b, a }
} }
pub fn add_rgb(&self, n: f32) -> Self {
Self {
r: self.r + n,
g: self.g + n,
b: self.b + n,
a: self.a,
}
}
pub fn lerp(&self, other: &Color, n: f32) -> Color { pub fn lerp(&self, other: &Color, n: f32) -> Color {
Color { Color {
r: self.r * (1.0 - n) + other.r * n, r: self.r * (1.0 - n) + other.r * n,