slider animations, ui tweaks

wgui/src/components/slider.rs

@@ -1,13 +1,17 @@
 use std::sync::Arc;
 
+use glam::{Mat4, Vec2, Vec3};
 use taffy::prelude::{length, percent};
 
 use crate::{
+	animation::{Animation, AnimationEasing},
 	components::Component,
 	drawing::{self},
-	event::{EventListenerCollection, EventListenerKind, WidgetCallback},
+	event::{self, EventListenerCollection, EventListenerKind, WidgetCallback},
 	layout::{Layout, WidgetID},
+	renderer_vk::util,
 	widget::{
+		div::Div,
 		rectangle::{Rectangle, RectangleParams},
 		util::WLength,
 	},
@@ -54,6 +58,57 @@ impl Slider {
 	}
 }
 
+const BODY_COLOR: drawing::Color = drawing::Color::new(0.6, 0.65, 0.7, 1.0);
+const BODY_BORDER_COLOR: drawing::Color = drawing::Color::new(0.4, 0.45, 0.5, 1.0);
+const HANDLE_BORDER_COLOR: drawing::Color = drawing::Color::new(0.85, 0.85, 0.85, 1.0);
+const HANDLE_BORDER_COLOR_HOVERED: drawing::Color = drawing::Color::new(0.0, 0.0, 0.0, 1.0);
+const HANDLE_COLOR: drawing::Color = drawing::Color::new(1.0, 1.0, 1.0, 1.0);
+const HANDLE_COLOR_HOVERED: drawing::Color = drawing::Color::new(0.9, 0.9, 0.9, 1.0);
+
+const SLIDER_HOVER_SCALE: f32 = 0.25;
+fn get_anim_transform(pos: f32, widget_size: Vec2) -> Mat4 {
+	util::centered_matrix(
+		widget_size,
+		&Mat4::from_scale(Vec3::splat(SLIDER_HOVER_SCALE.mul_add(pos, 1.0))),
+	)
+}
+
+fn anim_rect(rect: &mut Rectangle, pos: f32) {
+	rect.params.color = drawing::Color::lerp(&HANDLE_COLOR, &HANDLE_COLOR_HOVERED, pos);
+	rect.params.border_color =
+		drawing::Color::lerp(&HANDLE_BORDER_COLOR, &HANDLE_BORDER_COLOR_HOVERED, pos);
+}
+
+fn on_enter_anim(data: &mut event::CallbackData, handle_id: WidgetID) {
+	data.animations.push(Animation::new(
+		handle_id,
+		5,
+		AnimationEasing::OutQuad,
+		Box::new(move |data| {
+			let rect = data.obj.get_as_mut::<Rectangle>();
+			data.data.transform = get_anim_transform(data.pos, data.widget_size);
+			anim_rect(rect, data.pos);
+			data.needs_redraw = true;
+		}),
+	));
+}
+
+fn on_leave_anim(data: &mut event::CallbackData, handle_id: WidgetID) {
+	data.animations.push(Animation::new(
+		handle_id,
+		10,
+		AnimationEasing::OutQuad,
+		Box::new(move |data| {
+			let rect = data.obj.get_as_mut::<Rectangle>();
+			data.data.transform = get_anim_transform(1.0 - data.pos, data.widget_size);
+			anim_rect(rect, 1.0 - data.pos);
+			data.needs_redraw = true;
+		}),
+	));
+}
+
+const PAD_PERCENT: f32 = 0.75;
+
 pub fn construct<U1, U2>(
 	layout: &mut Layout,
 	listeners: &mut EventListenerCollection<U1, U2>,
@@ -64,35 +119,57 @@ pub fn construct<U1, U2>(
 	style.position = taffy::Position::Relative;
 	style.min_size = style.size;
 	style.max_size = style.size;
+	style.align_items = Some(taffy::AlignItems::Center);
+	style.justify_content = Some(taffy::JustifyContent::Center);
 
-	let body_color = drawing::Color::new(0.2, 0.3, 0.4, 1.0);
-	let body_border_color = drawing::Color::new(0.1, 0.2, 0.3, 1.0);
-	let handle_color = drawing::Color::new(1.0, 1.0, 1.0, 1.0);
+	let (body_id, _) = layout.add_child(parent, Div::create()?, style)?;
 
-	let (body_id, _) = layout.add_child(
-		parent,
+	let (_background_id, _) = layout.add_child(
+		body_id,
 		Rectangle::create(RectangleParams {
-			color: body_color,
+			color: BODY_COLOR,
 			round: WLength::Percent(1.0),
-			border_color: body_border_color,
+			border_color: BODY_BORDER_COLOR,
 			border: 2.0,
 			..Default::default()
 		})?,
-		style,
+		taffy::Style {
+			size: taffy::Size {
+				width: percent(1.0),
+				height: percent(PAD_PERCENT),
+			},
+			position: taffy::Position::Absolute,
+			..Default::default()
+		},
 	)?;
 
 	let mut handle_style = taffy::Style::default();
 	handle_style.size.width = length(32.0);
 	handle_style.size.height = percent(1.0);
+	handle_style.position = taffy::Position::Absolute;
+	handle_style.align_items = Some(taffy::AlignItems::Center);
+	handle_style.justify_content = Some(taffy::JustifyContent::Center);
 
-	let (slider_handle_id, slider_handle_node) = layout.add_child(
-		body_id,
+	// invisible outer handle body
+	let (slider_handle_id, slider_handle_node) =
+		layout.add_child(body_id, Div::create()?, handle_style)?;
+
+	let (slider_handle_rect_id, _) = layout.add_child(
+		slider_handle_id,
 		Rectangle::create(RectangleParams {
-			color: handle_color,
+			color: HANDLE_COLOR,
+			border_color: HANDLE_BORDER_COLOR,
+			border: 2.0,
 			round: WLength::Percent(1.0),
 			..Default::default()
 		})?,
-		handle_style,
+		taffy::Style {
+			size: taffy::Size {
+				width: percent(PAD_PERCENT),
+				height: percent(PAD_PERCENT),
+			},
+			..Default::default()
+		},
 	)?;
 
 	let slider = Arc::new(Slider {
@@ -106,7 +183,10 @@ pub fn construct<U1, U2>(
 	listeners.add(
 		body_id,
 		EventListenerKind::MouseEnter,
-		Box::new(move |_data, _, _| {}),
+		Box::new(move |data, _, _| {
+			data.trigger_haptics = true;
+			on_enter_anim(data, slider_handle_rect_id);
+		}),
 	);
 
 	listeners.add(
@@ -118,7 +198,10 @@ pub fn construct<U1, U2>(
 	listeners.add(
 		body_id,
 		EventListenerKind::MouseLeave,
-		Box::new(move |_data, _, _| {}),
+		Box::new(move |data, _, _| {
+			data.trigger_haptics = true;
+			on_leave_anim(data, slider_handle_rect_id);
+		}),
 	);
 
 	Ok(slider)