wgui: customizable defaults

dash-frontend/assets/gui/dashboard.xml

@@ -101,7 +101,7 @@
 
           <!-- Right bottom side -->
           <div margin_right="16">
-            <label text="12:34" color="#FFFFFF" size="16" />
+            <label text="12:34" size="16" />
           </div>
         </rectangle>
       </div>

dash-frontend/assets/gui/t_menu_button.xml

@@ -16,7 +16,7 @@
         justify_content="center"
         flex_direction="column">
         <sprite src="${icon}" width="32" height="32" />
-        <label weight="bold" color="#FFFFFF" size="18" text="${text}" />
+        <label weight="bold" size="18" text="${text}" />
       </div>
     </Button>
   </template>

dash-frontend/assets/gui/tab/apps.xml

@@ -1,7 +1,7 @@
 <layout>
 
   <elements>
-    <label text="Apps" size="64" weight="bold" color="#FFFFFF" />
+    <label text="Apps" size="64" weight="bold" />
     <label text="bottom text" size="16" weight="bold" color="#FFFFFF88" />
   </elements>
 </layout>

dash-frontend/assets/gui/tab/games.xml

@@ -1,5 +1,5 @@
 <layout>
   <elements>
-    <label text="Games" size="32" weight="bold" color="#FFFFFF" />
+    <label text="Games" size="32" weight="bold" />
   </elements>
 </layout>

dash-frontend/assets/gui/tab/home.xml

@@ -3,7 +3,7 @@
 
   <elements>
     <sprite src="dashboard/wayvr_dashboard.svg" min_width="96" min_height="96" />
-    <label text="Hello, user!" size="32" weight="bold" color="#FFFFFF" />
+    <label text="Hello, user!" size="32" weight="bold" />
     <label text="Connected to wlx-overlay-s" size="16" weight="bold" color="#bbffbb" />
 
     <!-- main button list -->

dash-frontend/assets/gui/tab/monado.xml

@@ -1,5 +1,5 @@
 <layout>
   <elements>
-    <label text="Monado" size="32" weight="bold" color="#FFFFFF" />
+    <label text="Monado" size="32" weight="bold" />
   </elements>
 </layout>

dash-frontend/assets/gui/tab/processes.xml

@@ -1,5 +1,5 @@
 <layout>
   <elements>
-    <label text="Processes" size="32" weight="bold" color="#FFFFFF" />
+    <label text="Processes" size="32" weight="bold" />
   </elements>
 </layout>

dash-frontend/assets/gui/tab/settings.xml

@@ -1,5 +1,5 @@
 <layout>
   <elements>
-    <label text="Settings" size="32" weight="bold" color="#FFFFFF" />
+    <label text="Settings" size="32" weight="bold" />
   </elements>
 </layout>

dash-frontend/src/lib.rs

@@ -3,6 +3,7 @@ use std::{cell::RefCell, collections::VecDeque, rc::Rc};
 use glam::Vec2;
 use wgui::{
 	components::button::ComponentButton,
+	drawing,
 	event::EventListenerCollection,
 	globals::WguiGlobals,
 	layout::{LayoutParams, RcLayout},
@@ -41,7 +42,12 @@ pub struct FrontendParams<'a> {
 
 impl Frontend {
 	pub fn new(params: FrontendParams) -> anyhow::Result<(RcFrontend, RcLayout)> {
-		let globals = WguiGlobals::new(Box::new(assets::Asset {}))?;
+		let globals = WguiGlobals::new(
+			Box::new(assets::Asset {}),
+			wgui::globals::Defaults {
+				text_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0),
+			},
+		)?;
 
 		let (layout, state) = wgui::parser::new_layout_from_assets(
 			params.listeners,

uidev/assets/gui/anchor.xml

@@ -1,123 +1,5 @@
 <layout>
-  <include src="theme.xml" />
-
-  <theme>
-    <var key="side_sprite_size" value="26" />
-  </theme>
-
   <elements>
-    <!-- background for testing -->
+    <!-- TODO -->
-    <rectangle position="absolute" color="#333333" width="100%" height="100%" />
-
-    <!-- left/right separator (menu and rest) -->
-    <div flex_direction="row" width="100%" height="100%" gap="8">
-      <!-- LEFT MENU -->
-      <div id="menu" width="48" min_width="48" max_width="48" height="100%" align_items="center" justify_content="center">
-        <rectangle
-          width="100%"
-          round="100%"
-          color="~menu_dark"
-          flex_direction="column"
-          justify_content="center"
-          align_items="center"
-          gap="24"
-          padding_top="16"
-          padding_bottom="16"
-        >
-          <sprite src="dashboard/wayvr_dashboard_mono.svg" width="~side_sprite_size" height="~side_sprite_size" />
-          <sprite src="dashboard/apps.svg" width="~side_sprite_size" height="~side_sprite_size" />
-          <sprite src="dashboard/games.svg" width="~side_sprite_size" height="~side_sprite_size" />
-          <sprite src="dashboard/monado.svg" width="~side_sprite_size" height="~side_sprite_size" />
-          <sprite src="dashboard/window.svg" width="~side_sprite_size" height="~side_sprite_size" />
-          <rectangle height="2" color="#FFFFFF33" width="~side_sprite_size" />
-          <sprite src="dashboard/settings.svg" width="~side_sprite_size" height="~side_sprite_size" />
-        </rectangle>
-      </div>
-      <!-- REST -->
-      <!-- content/bottom panel separator -->
-      <div flex_direction="column" gap="8" flex_grow="1">
-        <!-- CONTENT -->
-        <rectangle
-          color2="#0d131acc" color="#244179aa" gradient="vertical" round="8" overflow_y="hidden"
-          justify_content="center"
-          flex_grow="1"
-        >
-          <div
-            id="content"
-            overflow_x="scroll"
-            overflow_y="scroll"
-            align_items="center"
-            justify_content="center"
-            flex_direction="column"
-            gap="24"
-          >
-            <sprite src="dashboard/wayvr_dashboard.svg" min_width="96" min_height="96" />
-            <label text="Hello, user!" size="32" weight="bold" color="#FFFFFF" />
-            <label text="Connected to wlx-overlay-s" size="16" weight="bold" color="#bbffbb" />
-
-            <!-- main button list -->
-            <div flex_direction="row" gap="8" margin_top="32">
-              <rectangle width="120" height="82" round="8" border="2" border_color="#FFFFFF77" color="#00000033" align_items="center" justify_content="center" flex_direction="column" gap="8">
-                <sprite src="dashboard/apps.svg" width="32" height="32" />
-                <label weight="bold" color="#FFFFFF" size="18" text="Apps" />
-              </rectangle>
-              <rectangle width="120" height="82" round="8" border="2" border_color="#FFFFFF77" color="#00000033" align_items="center" justify_content="center" flex_direction="column" gap="8">
-                <sprite src="dashboard/games.svg" width="32" height="32" />
-                <label weight="bold" color="#FFFFFF" size="18" text="Games" />
-              </rectangle>
-              <rectangle width="120" height="82" round="8" border="2" border_color="#FFFFFF77" color="#00000033" align_items="center" justify_content="center" flex_direction="column" gap="8">
-                <sprite src="dashboard/monado.svg" width="32" height="32" />
-                <label weight="bold" color="#FFFFFF" size="18" text="Monado" />
-              </rectangle>
-              <rectangle width="120" height="82" round="8" border="2" border_color="#FFFFFF77" color="#00000033" align_items="center" justify_content="center" flex_direction="column" gap="8">
-                <sprite src="dashboard/window.svg" width="32" height="32" />
-                <label weight="bold" color="#FFFFFF" size="18" text="Processes" />
-              </rectangle>
-              <rectangle width="120" height="82" round="8" border="2" border_color="#FFFFFF77" color="#00000033" align_items="center" justify_content="center" flex_direction="column" gap="8">
-                <sprite src="dashboard/settings.svg" width="32" height="32" />
-                <label weight="bold" color="#FFFFFF" size="18" text="Settings" />
-              </rectangle>
-            </div>
-          </div>
-        </rectangle>
-        <!-- BOTTOM PANEL -->
-        <rectangle
-          width="100%"
-          height="48"
-          box_sizing="border_box"
-          round="8"
-          flex_direction="row"
-          align_items="center"
-          justify_content="space_between"
-          color="~bottom_panel"
-        >
-          <!-- left gradient -->
-          <div position="absolute" width="100%" height="100%" justify_content="start">
-            <rectangle position="absolute" width="40%" height="100%" color="#0a0a0a" color2="#0a0a0a00" round="8" gradient="horizontal" />
-          </div>
-
-          <!-- right gradient -->
-          <div position="absolute" width="100%" height="100%" justify_content="end">
-            <rectangle position="absolute" width="40%" height="100%" color2="#0a0a0a" color="#0a0a0a00" round="8" gradient="horizontal" />
-          </div>
-
-          <!-- top shine -->
-          <div position="absolute" width="100%" height="100%" justify_content="center">
-            <rectangle position="absolute" width="99%" height="2" color="#FFFFFF66" round="4" />
-          </div>
-
-          <!-- Left bottom side -->
-          <div margin_left="8">
-            <sprite src="dashboard/volume.svg" width="24" height="24" margin="8" />
-            <sprite src="dashboard/recenter.svg" width="24" height="24" margin="8" />
-          </div>
-
-          <!-- Right bottom side -->
-          <div margin_right="16">
-            <label text="12:34" color="#FFFFFF" size="16" />
-          </div>
-        </rectangle>
-      </div>
-    </div>
   </elements>
 </layout>

uidev/src/testbed/testbed_any.rs

@@ -21,7 +21,7 @@ impl TestbedAny {
 	pub fn new(name: &str, listeners: &mut EventListenerCollection<(), ()>) -> anyhow::Result<Self> {
 		let path = format!("gui/{name}.xml");
 
-		let globals = WguiGlobals::new(Box::new(assets::Asset {}))?;
+		let globals = WguiGlobals::new(Box::new(assets::Asset {}), Default::default())?;
 
 		let (layout, state) = wgui::parser::new_layout_from_assets(
 			listeners,

uidev/src/testbed/testbed_generic.rs

@@ -60,7 +60,7 @@ impl TestbedGeneric {
 	pub fn new(listeners: &mut EventListenerCollection<(), ()>) -> anyhow::Result<Self> {
 		const XML_PATH: &str = "gui/various_widgets.xml";
 
-		let globals = WguiGlobals::new(Box::new(assets::Asset {}))?;
+		let globals = WguiGlobals::new(Box::new(assets::Asset {}), Default::default())?;
 
 		let extra = ParseDocumentExtra {
 			on_custom_attrib: Some(Box::new(move |par| {

wgui/src/components/button.rs

@@ -82,9 +82,7 @@ impl ComponentButton {
 	pub fn set_text(&self, state: &LayoutState, alterables: &mut EventAlterables, text: Translation) {
 		let globals = state.globals.clone();
 
-		state
+		state.widgets.call(self.data.id_label, |label: &mut WidgetLabel| {
-			.widgets
-			.call(self.data.id_label, |label: &mut WidgetLabel| {
 			label.set_text(&mut globals.i18n(), text);
 		});
 
@@ -107,9 +105,7 @@ fn anim_hover(rect: &mut WidgetRectangle, data: &Data, pos: f32, pressed: bool)
 
 	rect.params.color = bgcolor;
 	rect.params.color2 = get_color2(&bgcolor);
-	rect.params.border_color = data
+	rect.params.border_color = data.initial_border_color.lerp(&data.initial_hover_border_color, mult);
-		.initial_border_color
-		.lerp(&data.initial_hover_border_color, mult);
 	rect.params.border = 2.0;
 }
 
@@ -151,11 +147,9 @@ fn register_event_mouse_enter<U1, U2>(
 		EventListenerKind::MouseEnter,
 		Box::new(move |common, event_data, _, _| {
 			common.alterables.trigger_haptics();
-			common.alterables.animate(anim_hover_in(
+			common
-				data.clone(),
+				.alterables
-				state.clone(),
+				.animate(anim_hover_in(data.clone(), state.clone(), event_data.widget_id));
-				event_data.widget_id,
-			));
 			state.borrow_mut().hovered = true;
 			Ok(())
 		}),
@@ -174,11 +168,9 @@ fn register_event_mouse_leave<U1, U2>(
 		EventListenerKind::MouseLeave,
 		Box::new(move |common, event_data, _, _| {
 			common.alterables.trigger_haptics();
-			common.alterables.animate(anim_hover_out(
+			common
-				data.clone(),
+				.alterables
-				state.clone(),
+				.animate(anim_hover_out(data.clone(), state.clone(), event_data.widget_id));
-				event_data.widget_id,
-			));
 			state.borrow_mut().hovered = false;
 			Ok(())
 		}),
@@ -283,7 +275,7 @@ pub fn construct<U1, U2>(
 	let (id_label, node_label) = layout.add_child(
 		id_rect,
 		WidgetLabel::create(
-			&mut globals.i18n(),
+			&mut globals.get(),
 			WidgetLabelParams {
 				content: params.text,
 				style: TextStyle {

wgui/src/components/checkbox.rs

@@ -80,11 +80,7 @@ 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 {
+		rect.params.color = if checked { COLOR_CHECKED } else { COLOR_UNCHECKED }
-			COLOR_CHECKED
-		} else {
-			COLOR_UNCHECKED
-		}
 	});
 }
 
@@ -92,9 +88,7 @@ impl ComponentCheckbox {
 	pub fn set_text(&self, state: &LayoutState, alterables: &mut EventAlterables, text: Translation) {
 		let globals = state.globals.clone();
 
-		state
+		state.widgets.call(self.data.id_label, |label: &mut WidgetLabel| {
-			.widgets
-			.call(self.data.id_label, |label: &mut WidgetLabel| {
 			label.set_text(&mut globals.i18n(), text);
 		});
 
@@ -321,11 +315,7 @@ pub fn construct<U1, U2>(
 		id_outer_box,
 		WidgetRectangle::create(WidgetRectangleParams {
 			round: WLength::Units(5.0),
-			color: if params.checked {
+			color: if params.checked { COLOR_CHECKED } else { COLOR_UNCHECKED },
-				COLOR_CHECKED
-			} else {
-				COLOR_UNCHECKED
-			},
 			..Default::default()
 		}),
 		taffy::Style {
@@ -340,7 +330,7 @@ pub fn construct<U1, U2>(
 	let (id_label, node_label) = layout.add_child(
 		id_container,
 		WidgetLabel::create(
-			&mut globals.i18n(),
+			&mut globals.get(),
 			WidgetLabelParams {
 				content: params.text,
 				style: TextStyle {

wgui/src/components/slider.rs

@@ -7,10 +7,7 @@ use crate::{
 	animation::{Animation, AnimationEasing},
 	components::{Component, ComponentBase, ComponentTrait, InitData},
 	drawing::{self},
-	event::{
+	event::{self, CallbackDataCommon, EventAlterables, EventListenerCollection, EventListenerKind, ListenerHandleVec},
-		self, CallbackDataCommon, EventAlterables, EventListenerCollection, EventListenerKind,
-		ListenerHandleVec,
-	},
 	i18n::{I18n, Translation},
 	layout::{Layout, LayoutState, WidgetID},
 	renderer_vk::{
@@ -133,19 +130,10 @@ impl State {
 
 	fn update_text(i18n: &mut I18n, text: &mut WidgetLabel, value: f32) {
 		// round displayed value, should be sufficient for now
-		text.set_text(
+		text.set_text(i18n, Translation::from_raw_text(&format!("{}", value.round())));
-			i18n,
-			Translation::from_raw_text(&format!("{}", value.round())),
-		);
 	}
 
-	fn set_value(
+	fn set_value(&mut self, state: &LayoutState, data: &Data, alterables: &mut EventAlterables, value: f32) {
-		&mut self,
-		state: &LayoutState,
-		data: &Data,
-		alterables: &mut EventAlterables,
-		value: f32,
-	) {
 		//common.call_on_widget(data.slider_handle_id, |_div: &mut Div| {});
 		self.values.value = value;
 		let mut style = state.tree.style(data.slider_handle_node).unwrap().clone();
@@ -153,9 +141,7 @@ impl State {
 		alterables.mark_dirty(data.slider_handle_node);
 		alterables.mark_redraw();
 		alterables.set_style(data.slider_handle_node, style);
-		state
+		state.widgets.call(data.slider_text_id, |label: &mut WidgetLabel| {
-			.widgets
-			.call(data.slider_text_id, |label: &mut WidgetLabel| {
 			Self::update_text(&mut state.globals.i18n(), label, value);
 		});
 	}
@@ -178,8 +164,7 @@ fn get_anim_transform(pos: f32, widget_size: Vec2) -> Mat4 {
 
 fn anim_rect(rect: &mut WidgetRectangle, pos: f32) {
 	rect.params.color = drawing::Color::lerp(&HANDLE_COLOR, &HANDLE_COLOR_HOVERED, pos);
-	rect.params.border_color =
+	rect.params.border_color = drawing::Color::lerp(&HANDLE_BORDER_COLOR, &HANDLE_BORDER_COLOR_HOVERED, pos);
-		drawing::Color::lerp(&HANDLE_BORDER_COLOR, &HANDLE_BORDER_COLOR_HOVERED, pos);
 }
 
 fn on_enter_anim(common: &mut event::CallbackDataCommon, handle_id: WidgetID) {
@@ -364,8 +349,7 @@ pub fn construct<U1, U2>(
 	};
 
 	// invisible outer handle body
-	let (slider_handle_id, slider_handle_node) =
+	let (slider_handle_id, slider_handle_node) = layout.add_child(body_id, WidgetDiv::create(), slider_handle_style)?;
-		layout.add_child(body_id, WidgetDiv::create(), slider_handle_style)?;
 
 	let (slider_handle_rect_id, _) = layout.add_child(
 		slider_handle_id,
@@ -393,12 +377,11 @@ pub fn construct<U1, U2>(
 	};
 
 	let globals = layout.state.globals.clone();
-	let mut i18n = globals.i18n();
 
 	let (slider_text_id, _) = layout.add_child(
 		slider_handle_id,
 		WidgetLabel::create(
-			&mut i18n,
+			&mut globals.get(),
 			WidgetLabelParams {
 				content: Translation::default(),
 				style: TextStyle {

wgui/src/globals.rs

@@ -3,21 +3,34 @@ use std::{
 	rc::Rc,
 };
 
-use crate::{assets::AssetProvider, i18n::I18n};
+use crate::{assets::AssetProvider, drawing, i18n::I18n};
+
+pub struct Defaults {
+	pub text_color: drawing::Color,
+}
+
+impl Default for Defaults {
+	fn default() -> Self {
+		Self {
+			text_color: drawing::Color::new(0.0, 0.0, 0.0, 1.0),
+		}
+	}
+}
 
 pub struct Globals {
 	pub assets: Box<dyn AssetProvider>,
 	pub i18n: I18n,
+	pub defaults: Defaults,
 }
 
 #[derive(Clone)]
 pub struct WguiGlobals(Rc<RefCell<Globals>>);
 
 impl WguiGlobals {
-	pub fn new(mut assets: Box<dyn AssetProvider>) -> anyhow::Result<Self> {
+	pub fn new(mut assets: Box<dyn AssetProvider>, defaults: Defaults) -> anyhow::Result<Self> {
 		let i18n = I18n::new(&mut assets)?;
 
-		Ok(Self(Rc::new(RefCell::new(Globals { assets, i18n }))))
+		Ok(Self(Rc::new(RefCell::new(Globals { assets, i18n, defaults }))))
 	}
 
 	pub fn get(&self) -> RefMut<Globals> {

wgui/src/parser/widget_label.rs

@@ -31,12 +31,10 @@ pub fn parse_widget_label<'a, U1, U2>(
 	}
 
 	let globals = ctx.layout.state.globals.clone();
-	let mut i18n = globals.i18n();
 
-	let (new_id, _) =
+	let (new_id, _) = ctx
-		ctx
 		.layout
-			.add_child(parent_id, WidgetLabel::create(&mut i18n, params), style)?;
+		.add_child(parent_id, WidgetLabel::create(&mut globals.get(), params), style)?;
 
 	parse_widget_universal(file, ctx, node, new_id);
 	parse_children(file, ctx, node, new_id)?;

wgui/src/widget/label.rs

@@ -5,6 +5,7 @@ use taffy::AvailableSpace;
 
 use crate::{
 	drawing::{self, Boundary},
+	globals::Globals,
 	i18n::{I18n, Translation},
 	renderer_vk::text::{FONT_SYSTEM, TextStyle},
 };
@@ -24,7 +25,11 @@ pub struct WidgetLabel {
 }
 
 impl WidgetLabel {
-	pub fn create(i18n: &mut I18n, params: WidgetLabelParams) -> WidgetState {
+	pub fn create(globals: &mut Globals, mut params: WidgetLabelParams) -> WidgetState {
+		if params.style.color.is_none() {
+			params.style.color = Some(globals.defaults.text_color);
+		}
+
 		let metrics = Metrics::from(&params.style);
 		let attrs = Attrs::from(&params.style);
 		let wrap = Wrap::from(&params.style);
@@ -36,7 +41,7 @@ impl WidgetLabel {
 			buffer.set_wrap(wrap);
 
 			buffer.set_rich_text(
-				[(params.content.generate(i18n).as_ref(), attrs)],
+				[(params.content.generate(&mut globals.i18n).as_ref(), attrs)],
 				&Attrs::new(),
 				Shaping::Advanced,
 				params.style.align.map(Into::into),
@@ -78,11 +83,7 @@ impl WidgetObj for WidgetLabel {
 			self.last_boundary = boundary;
 			let mut font_system = FONT_SYSTEM.lock();
 			let mut buffer = self.buffer.borrow_mut();
-			buffer.set_size(
+			buffer.set_size(&mut font_system, Some(boundary.size.x), Some(boundary.size.y));
-				&mut font_system,
-				Some(boundary.size.x),
-				Some(boundary.size.y),
-			);
 		}
 
 		state.primitives.push(drawing::RenderPrimitive {
@@ -111,9 +112,7 @@ impl WidgetObj for WidgetLabel {
 		buffer.set_size(&mut font_system, width_constraint, None);
 
 		// Determine measured size of text
-		let (width, total_lines) = buffer
+		let (width, total_lines) = buffer.layout_runs().fold((0.0, 0usize), |(width, total_lines), run| {
-			.layout_runs()
-			.fold((0.0, 0usize), |(width, total_lines), run| {
 			(run.line_w.max(width), total_lines + 1)
 		});
 		let height = total_lines as f32 * buffer.metrics().line_height;

wlx-overlay-s/src/overlays/toast.rs

@@ -170,7 +170,6 @@ fn new_toast(toast: Toast, app: &mut AppState) -> Option<(OverlayState, Box<dyn
     let mut panel = GuiPanel::new_blank(app, ()).ok()?;
 
     let globals = panel.layout.state.globals.clone();
-    let mut i18n = globals.i18n();
 
     let (rect, _) = panel
         .layout
@@ -196,7 +195,7 @@ fn new_toast(toast: Toast, app: &mut AppState) -> Option<(OverlayState, Box<dyn
     let _ = panel.layout.add_child(
         rect,
         WidgetLabel::create(
-            &mut i18n,
+            &mut globals.get(),
             WidgetLabelParams {
                 content: Translation::from_raw_text(&title),
                 style: TextStyle {
@@ -218,7 +217,7 @@ fn new_toast(toast: Toast, app: &mut AppState) -> Option<(OverlayState, Box<dyn
     let _ = panel.layout.add_child(
         rect,
         WidgetLabel::create(
-            &mut i18n,
+            &mut globals.get(),
             WidgetLabelParams {
                 content: Translation::from_raw_text(&toast.body),
                 style: TextStyle {

wlx-overlay-s/src/state.rs

@@ -90,7 +90,12 @@ impl AppState {
             screens: smallvec![],
             anchor: Affine3A::IDENTITY,
             toast_sound: toast_sound_wav,
-            wgui_globals: WguiGlobals::new(Box::new(gui::asset::GuiAsset {}))?,
+            wgui_globals: WguiGlobals::new(
+                Box::new(gui::asset::GuiAsset {}),
+                wgui::globals::Defaults {
+                    text_color: wgui::drawing::Color::new(1.0, 1.0, 1.0, 1.0),
+                },
+            )?,
 
             #[cfg(feature = "osc")]
             osc_sender,