Jayden/wayvr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wgui: checkbox component

Browse Source
This commit is contained in:
Aleksander
2025-08-13 19:42:48 +02:00
parent faec8866c5
commit df35dba24f
8 changed files with 503 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
wgui/src/components/button.rs
View File

@@ -25,10 +25,6 @@ pub struct Params {
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 {
fn default() -> Self {
Self {
@@ -58,9 +54,9 @@ struct Data {
initial_color: drawing::Color,
initial_color2: drawing::Color,
initial_border_color: drawing::Color,
text_id: WidgetID, // Text
rect_id: WidgetID, // Rectangle
text_node: taffy::NodeId,
id_label: WidgetID, // Label
id_rect: WidgetID, // Rectangle
node_label: taffy::NodeId,
}
pub struct ComponentButton {
@@ -83,12 +79,12 @@ impl ComponentButton {
state
.widgets
.call(self.data.text_id, |label: &mut WidgetLabel| {
.call(self.data.id_label, |label: &mut WidgetLabel| {
label.set_text(&mut globals.i18n(), text);
});
alterables.mark_redraw();
alterables.mark_dirty(self.data.text_node);
alterables.mark_dirty(self.data.node_label);
}
pub fn on_click(&self, func: ButtonClickCallback) {
@@ -96,6 +92,10 @@ impl ComponentButton {
}
}
fn get_color2(color: &drawing::Color) -> drawing::Color {
color.lerp(&Color::new(0.0, 0.0, 0.0, color.a), 0.2)
}
fn anim_hover(rect: &mut WidgetRectangle, data: &Data, pos: f32, pressed: bool) {
let brightness = pos * if pressed { 0.75 } else { 0.5 };
let border_brightness = pos;
@@ -139,7 +139,7 @@ fn register_event_mouse_enter<U1, U2>(
) {
listeners.register(
listener_handles,
data.rect_id,
data.id_rect,
EventListenerKind::MouseEnter,
Box::new(move |common, event_data, _, _| {
common.alterables.trigger_haptics();
@@ -162,7 +162,7 @@ fn register_event_mouse_leave<U1, U2>(
) {
listeners.register(
listener_handles,
data.rect_id,
data.id_rect,
EventListenerKind::MouseLeave,
Box::new(move |common, event_data, _, _| {
common.alterables.trigger_haptics();
@@ -185,7 +185,7 @@ fn register_event_mouse_press<U1, U2>(
) {
listeners.register(
listener_handles,
data.rect_id,
data.id_rect,
EventListenerKind::MousePress,
Box::new(move |common, event_data, _, _| {
let mut state = state.borrow_mut();
@@ -213,7 +213,7 @@ fn register_event_mouse_release<U1, U2>(
) {
listeners.register(
listener_handles,
data.rect_id,
data.id_rect,
EventListenerKind::MouseRelease,
Box::new(move |common, event_data, _, _| {
let rect = event_data.obj.get_as_mut::<WidgetRectangle>();
@@ -256,7 +256,7 @@ pub fn construct<U1, U2>(
let globals = layout.state.globals.clone();
let (rect_id, _) = layout.add_child(
let (id_rect, _) = layout.add_child(
parent,
WidgetRectangle::create(WidgetRectangleParams {
color: params.color,
@@ -271,8 +271,8 @@ pub fn construct<U1, U2>(
let light_text = (params.color.r + params.color.g + params.color.b) < 1.5;
let (text_id, text_node) = layout.add_child(
rect_id,
let (id_label, node_label) = layout.add_child(
id_rect,
WidgetLabel::create(
&mut globals.i18n(),
WidgetLabelParams {
@@ -294,9 +294,9 @@ pub fn construct<U1, U2>(
)?;
let data = Rc::new(Data {
text_id,
rect_id,
text_node,
id_label,
id_rect,
node_label,
initial_color: params.color,
initial_color2: get_color2(&params.color),
initial_border_color: params.border_color,

381
wgui/src/components/checkbox.rs Normal file
View File

@@ -0,0 +1,381 @@
use std::{cell::RefCell, rc::Rc};
use taffy::{
AlignItems, JustifyContent,
prelude::{length, percent},
};
use crate::{
animation::{Animation, AnimationEasing},
components::{Component, ComponentBase, ComponentTrait, InitData},
drawing::Color,
event::{EventAlterables, EventListenerCollection, EventListenerKind, ListenerHandleVec},
i18n::Translation,
layout::{self, Layout, LayoutState, WidgetID},
renderer_vk::text::{FontWeight, TextStyle},
widget::{
label::{WidgetLabel, WidgetLabelParams},
rectangle::{WidgetRectangle, WidgetRectangleParams},
util::WLength,
},
};
pub struct Params {
pub text: Translation,
pub style: taffy::Style,
pub box_size: f32,
pub checked: bool,
}
impl Default for Params {
fn default() -> Self {
Self {
text: Translation::from_raw_text(""),
style: Default::default(),
box_size: 24.0,
checked: false,
}
}
}
pub struct CheckboxToggleEvent<'a> {
pub state: &'a LayoutState,
pub alterables: &'a mut EventAlterables,
pub checked: bool,
}
pub type CheckboxToggleCallback = Box<dyn Fn(CheckboxToggleEvent) -> anyhow::Result<()>>;
struct State {
checked: bool,
hovered: bool,
down: bool,
on_toggle: Option<CheckboxToggleCallback>,
}
struct Data {
id_container: WidgetID, // Rectangle, transparent if not hovered
//id_outer_box: WidgetID, // Rectangle, parent of container
id_inner_box: WidgetID, // Rectangle, parent of outer_box
id_label: WidgetID, // Label, parent of container
node_label: taffy::NodeId,
}
pub struct ComponentCheckbox {
base: ComponentBase,
data: Rc<Data>,
state: Rc<RefCell<State>>,
}
impl ComponentTrait for ComponentCheckbox {
fn base(&mut self) -> &mut ComponentBase {
&mut self.base
}
fn init(&self, _data: &mut InitData) {}
}
const COLOR_CHECKED: Color = Color::new(0.1, 0.5, 1.0, 1.0);
const COLOR_UNCHECKED: Color = Color::new(0.1, 0.5, 1.0, 0.0);
fn set_box_checked(widgets: &layout::WidgetMap, data: &Data, checked: bool) {
widgets.call(data.id_inner_box, |rect: &mut WidgetRectangle| {
rect.params.color = if checked {
COLOR_CHECKED
} else {
COLOR_UNCHECKED
}
});
}
impl ComponentCheckbox {
pub fn set_text(&self, state: &LayoutState, alterables: &mut EventAlterables, text: Translation) {
let globals = state.globals.clone();
state
.widgets
.call(self.data.id_label, |label: &mut WidgetLabel| {
label.set_text(&mut globals.i18n(), text);
});
alterables.mark_redraw();
alterables.mark_dirty(self.data.node_label);
}
pub fn set_checked(&self, state: &LayoutState, alterables: &mut EventAlterables, checked: bool) {
self.state.borrow_mut().checked = checked;
set_box_checked(&state.widgets, &self.data, checked);
alterables.mark_redraw();
}
pub fn on_toggle(&self, func: CheckboxToggleCallback) {
self.state.borrow_mut().on_toggle = Some(func);
}
}
fn anim_hover(rect: &mut WidgetRectangle, pos: f32, pressed: bool) {
let brightness = pos * if pressed { 0.6 } else { 0.4 };
rect.params.border = 2.0;
rect.params.color.a = brightness;
rect.params.border_color.a = rect.params.color.a;
if pressed {
rect.params.border_color.a += 0.4;
}
}
fn anim_hover_in(state: Rc<RefCell<State>>, widget_id: WidgetID) -> Animation {
Animation::new(
widget_id,
5,
AnimationEasing::OutQuad,
Box::new(move |common, anim_data| {
let rect = anim_data.obj.get_as_mut::<WidgetRectangle>();
anim_hover(rect, anim_data.pos, state.borrow().down);
common.alterables.mark_redraw();
}),
)
}
fn anim_hover_out(state: Rc<RefCell<State>>, widget_id: WidgetID) -> Animation {
Animation::new(
widget_id,
8,
AnimationEasing::OutQuad,
Box::new(move |common, anim_data| {
let rect = anim_data.obj.get_as_mut::<WidgetRectangle>();
anim_hover(rect, 1.0 - anim_data.pos, state.borrow().down);
common.alterables.mark_redraw();
}),
)
}
fn register_event_mouse_enter<U1, U2>(
data: Rc<Data>,
state: Rc<RefCell<State>>,
listeners: &mut EventListenerCollection<U1, U2>,
listener_handles: &mut ListenerHandleVec,
) {
listeners.register(
listener_handles,
data.id_container,
EventListenerKind::MouseEnter,
Box::new(move |common, event_data, _, _| {
common.alterables.trigger_haptics();
common
.alterables
.animate(anim_hover_in(state.clone(), event_data.widget_id));
state.borrow_mut().hovered = true;
Ok(())
}),
);
}
fn register_event_mouse_leave<U1, U2>(
data: Rc<Data>,
state: Rc<RefCell<State>>,
listeners: &mut EventListenerCollection<U1, U2>,
listener_handles: &mut ListenerHandleVec,
) {
listeners.register(
listener_handles,
data.id_container,
EventListenerKind::MouseLeave,
Box::new(move |common, event_data, _, _| {
common.alterables.trigger_haptics();
common
.alterables
.animate(anim_hover_out(state.clone(), event_data.widget_id));
state.borrow_mut().hovered = false;
Ok(())
}),
);
}
fn register_event_mouse_press<U1, U2>(
data: Rc<Data>,
state: Rc<RefCell<State>>,
listeners: &mut EventListenerCollection<U1, U2>,
listener_handles: &mut ListenerHandleVec,
) {
listeners.register(
listener_handles,
data.id_container,
EventListenerKind::MousePress,
Box::new(move |common, event_data, _, _| {
let mut state = state.borrow_mut();
let rect = event_data.obj.get_as_mut::<WidgetRectangle>();
anim_hover(rect, 1.0, true);
if state.hovered {
state.down = true;
}
common.alterables.trigger_haptics();
common.alterables.mark_redraw();
Ok(())
}),
);
}
fn register_event_mouse_release<U1, U2>(
data: Rc<Data>,
state: Rc<RefCell<State>>,
listeners: &mut EventListenerCollection<U1, U2>,
listener_handles: &mut ListenerHandleVec,
) {
listeners.register(
listener_handles,
data.id_container,
EventListenerKind::MouseRelease,
Box::new(move |common, event_data, _, _| {
let rect = event_data.obj.get_as_mut::<WidgetRectangle>();
anim_hover(rect, 1.0, false);
let mut state = state.borrow_mut();
if state.down {
state.down = false;
state.checked = !state.checked;
set_box_checked(&common.state.widgets, &data, state.checked);
if state.hovered {
if let Some(on_toggle) = &state.on_toggle {
on_toggle(CheckboxToggleEvent {
state: common.state,
alterables: common.alterables,
checked: state.checked,
})?;
}
}
}
common.alterables.trigger_haptics();
common.alterables.mark_redraw();
Ok(())
}),
);
}
pub fn construct<U1, U2>(
layout: &mut Layout,
listeners: &mut EventListenerCollection<U1, U2>,
parent: WidgetID,
params: Params,
) -> anyhow::Result<Rc<ComponentCheckbox>> {
let mut style = params.style;
// force-override style
style.flex_wrap = taffy::FlexWrap::NoWrap;
style.align_items = Some(AlignItems::Center);
style.justify_content = Some(JustifyContent::Center);
style.padding = taffy::Rect {
left: length(4.0),
right: length(8.0),
top: length(4.0),
bottom: length(4.0),
};
//style.align_self = Some(taffy::AlignSelf::Start); // do not stretch self to the parent
style.gap = length(4.0);
let globals = layout.state.globals.clone();
let (id_container, _) = layout.add_child(
parent,
WidgetRectangle::create(WidgetRectangleParams {
color: Color::new(1.0, 1.0, 1.0, 0.0),
border_color: Color::new(1.0, 1.0, 1.0, 0.0),
round: WLength::Units(5.0),
..Default::default()
})?,
style,
)?;
let box_size = taffy::Size {
width: length(params.box_size),
height: length(params.box_size),
};
let (id_outer_box, _) = layout.add_child(
id_container,
WidgetRectangle::create(WidgetRectangleParams {
border: 2.0,
border_color: Color::new(1.0, 1.0, 1.0, 1.0),
round: WLength::Units(8.0),
color: Color::new(1.0, 1.0, 1.0, 0.0),
..Default::default()
})?,
taffy::Style {
size: box_size,
padding: taffy::Rect::length(4.0),
min_size: box_size,
max_size: box_size,
..Default::default()
},
)?;
let (id_inner_box, _) = layout.add_child(
id_outer_box,
WidgetRectangle::create(WidgetRectangleParams {
round: WLength::Units(5.0),
color: if params.checked {
COLOR_CHECKED
} else {
COLOR_UNCHECKED
},
..Default::default()
})?,
taffy::Style {
size: taffy::Size {
width: percent(1.0),
height: percent(1.0),
},
..Default::default()
},
)?;
let (id_label, node_label) = layout.add_child(
id_container,
WidgetLabel::create(
&mut globals.i18n(),
WidgetLabelParams {
content: params.text,
style: TextStyle {
weight: Some(FontWeight::Bold),
..Default::default()
},
},
)?,
taffy::Style {
..Default::default()
},
)?;
let data = Rc::new(Data {
node_label,
id_container,
id_label,
id_inner_box,
});
let state = Rc::new(RefCell::new(State {
checked: params.checked,
down: false,
hovered: false,
on_toggle: None,
}));
let mut base = ComponentBase::default();
register_event_mouse_enter(data.clone(), state.clone(), listeners, &mut base.lhandles);
register_event_mouse_leave(data.clone(), state.clone(), listeners, &mut base.lhandles);
register_event_mouse_press(data.clone(), state.clone(), listeners, &mut base.lhandles);
register_event_mouse_release(data.clone(), state.clone(), listeners, &mut base.lhandles);
let checkbox = Rc::new(ComponentCheckbox { base, data, state });
layout.defer_component_init(Component(checkbox.clone()));
Ok(checkbox)
}

1
wgui/src/components/mod.rs
View File

@@ -7,6 +7,7 @@ use crate::{
};
pub mod button;
pub mod checkbox;
pub mod slider;
pub struct InitData<'a> {

7
wgui/src/components/slider.rs
View File

@@ -359,13 +359,6 @@ pub fn construct<U1, U2>(
position: taffy::Position::Absolute,
align_items: Some(taffy::AlignItems::Center),
justify_content: Some(taffy::JustifyContent::Center),
margin: taffy::Rect {
// FIXME: temporary just for testing
left: percent(0.5),
bottom: length(0.0),
right: length(0.0),
top: length(0.0),
},
..Default::default()
};