Add support for clicking checkboxes via their labels (#2667)

Author: Keavon

editor/src/messages/dialog/export_dialog/export_dialog_message_handler.rs

@@ -143,12 +143,14 @@ impl LayoutHolder for ExportDialogMessageHandler {
 			DropdownInput::new(entries).selected_index(Some(index as u32)).widget_holder(),
 		];
 
+		let mut checkbox_id = CheckboxId::default();
 		let transparent_background = vec![
-			TextLabel::new("Transparency").table_align(true).min_width(100).widget_holder(),
+			TextLabel::new("Transparency").table_align(true).min_width(100).for_checkbox(&mut checkbox_id).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			CheckboxInput::new(self.transparent_background)
 				.disabled(self.file_type == FileType::Jpg)
 				.on_update(move |value: &CheckboxInput| ExportDialogMessage::TransparentBackground(value.checked).into())
+				.for_label(checkbox_id.clone())
 				.widget_holder(),
 		];
 

editor/src/messages/dialog/new_document_dialog/new_document_dialog_message_handler.rs

@@ -77,11 +77,13 @@ impl LayoutHolder for NewDocumentDialogMessageHandler {
 				.widget_holder(),
 		];
 
+		let mut checkbox_id = CheckboxId::default();
 		let infinite = vec![
-			TextLabel::new("Infinite Canvas").table_align(true).min_width(90).widget_holder(),
+			TextLabel::new("Infinite Canvas").table_align(true).min_width(90).for_checkbox(&mut checkbox_id).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			CheckboxInput::new(self.infinite)
 				.on_update(|checkbox_input: &CheckboxInput| NewDocumentDialogMessage::Infinite(checkbox_input.checked).into())
+				.for_label(checkbox_id.clone())
 				.widget_holder(),
 		];
 

editor/src/messages/dialog/preferences_dialog/preferences_dialog_message_handler.rs

@@ -66,6 +66,7 @@ impl PreferencesDialogMessageHandler {
 				.widget_holder(),
 		];
 
+		let mut checkbox_id = CheckboxId::default();
 		let zoom_with_scroll_tooltip = "Use the scroll wheel for zooming instead of vertically panning (not recommended for trackpads)";
 		let zoom_with_scroll = vec![
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
@@ -78,8 +79,13 @@ impl PreferencesDialogMessageHandler {
 					}
 					.into()
 				})
+				.for_label(checkbox_id.clone())
+				.widget_holder(),
+			TextLabel::new("Zoom with Scroll")
+				.table_align(true)
+				.tooltip(zoom_with_scroll_tooltip)
+				.for_checkbox(&mut checkbox_id)
 				.widget_holder(),
-			TextLabel::new("Zoom with Scroll").table_align(true).tooltip(zoom_with_scroll_tooltip).widget_holder(),
 		];
 
 		// =======
@@ -161,6 +167,7 @@ impl PreferencesDialogMessageHandler {
 			graph_wire_style,
 		];
 
+		let mut checkbox_id = CheckboxId::default();
 		let vello_tooltip = "Use the experimental Vello renderer (your browser must support WebGPU)";
 		let use_vello = vec![
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
@@ -169,23 +176,31 @@ impl PreferencesDialogMessageHandler {
 				.tooltip(vello_tooltip)
 				.disabled(!preferences.supports_wgpu())
 				.on_update(|checkbox_input: &CheckboxInput| PreferencesMessage::UseVello { use_vello: checkbox_input.checked }.into())
+				.for_label(checkbox_id.clone())
 				.widget_holder(),
 			TextLabel::new("Vello Renderer")
 				.table_align(true)
 				.tooltip(vello_tooltip)
 				.disabled(!preferences.supports_wgpu())
+				.for_checkbox(&mut checkbox_id)
 				.widget_holder(),
 		];
 
+		let mut checkbox_id = CheckboxId::default();
 		let vector_mesh_tooltip = "Allow tools to produce vector meshes, where more than two segments can connect to an anchor point.\n\nCurrently this does not properly handle line joins and fills.";
 		let vector_meshes = vec![
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			CheckboxInput::new(preferences.vector_meshes)
 				.tooltip(vector_mesh_tooltip)
 				.on_update(|checkbox_input: &CheckboxInput| PreferencesMessage::VectorMeshes { enabled: checkbox_input.checked }.into())
+				.for_label(checkbox_id.clone())
+				.widget_holder(),
+			TextLabel::new("Vector Meshes")
+				.table_align(true)
+				.tooltip(vector_mesh_tooltip)
+				.for_checkbox(&mut checkbox_id)
 				.widget_holder(),
-			TextLabel::new("Vector Meshes").table_align(true).tooltip(vector_mesh_tooltip).widget_holder(),
 		];
 
 		// TODO: Reenable when Imaginate is restored

editor/src/messages/layout/utility_types/widgets/input_widgets.rs

@@ -5,6 +5,8 @@ use graphene_core::Color;
 use graphene_core::raster::curve::Curve;
 use graphene_std::transform::ReferencePoint;
 use graphite_proc_macros::WidgetBuilder;
+use once_cell::sync::OnceCell;
+use std::sync::Arc;
 
 #[derive(Clone, Derivative, serde::Serialize, serde::Deserialize, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq)]
@@ -18,6 +20,9 @@ pub struct CheckboxInput {
 
 	pub tooltip: String,
 
+	#[serde(rename = "forLabel", skip_serializing_if = "checkbox_id_is_empty")]
+	pub for_label: CheckboxId,
+
 	#[serde(skip)]
 	pub tooltip_shortcut: Option<ActionKeys>,
 
@@ -39,12 +44,51 @@ impl Default for CheckboxInput {
 			icon: "Checkmark".into(),
 			tooltip: Default::default(),
 			tooltip_shortcut: Default::default(),
+			for_label: CheckboxId::default(),
 			on_update: Default::default(),
 			on_commit: Default::default(),
 		}
 	}
 }
 
+#[derive(Clone, Default, Debug, Eq, PartialEq)]
+pub struct CheckboxId(Arc<OnceCell<u64>>);
+
+impl CheckboxId {
+	pub fn fill(&mut self) {
+		let _ = self.0.set(graphene_core::uuid::generate_uuid());
+	}
+}
+impl specta::Type for CheckboxId {
+	fn inline(_type_map: &mut specta::TypeCollection, _generics: specta::Generics) -> specta::datatype::DataType {
+		// TODO: This might not be right, but it works for now. We just need the type `bigint | undefined`.
+		specta::datatype::DataType::Primitive(specta::datatype::PrimitiveType::u64)
+	}
+}
+impl serde::Serialize for CheckboxId {
+	fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+	where
+		S: serde::Serializer,
+	{
+		self.0.get().copied().serialize(serializer)
+	}
+}
+impl<'a> serde::Deserialize<'a> for CheckboxId {
+	fn deserialize<D>(deserializer: D) -> Result<Self, D::Error>
+	where
+		D: serde::Deserializer<'a>,
+	{
+		let id = u64::deserialize(deserializer)?;
+		let checkbox_id = CheckboxId(OnceCell::new().into());
+		checkbox_id.0.set(id).map_err(serde::de::Error::custom)?;
+		Ok(checkbox_id)
+	}
+}
+
+fn checkbox_id_is_empty(id: &CheckboxId) -> bool {
+	id.0.get().is_none()
+}
+
 #[derive(Clone, serde::Serialize, serde::Deserialize, Derivative, WidgetBuilder, specta::Type)]
 #[derivative(Debug, PartialEq, Default)]
 pub struct DropdownInput {

editor/src/messages/layout/utility_types/widgets/label_widgets.rs

@@ -1,3 +1,4 @@
+use super::input_widgets::CheckboxId;
 use derivative::*;
 use graphite_proc_macros::WidgetBuilder;
 
@@ -56,9 +57,21 @@ pub struct TextLabel {
 
 	pub tooltip: String,
 
+	#[serde(rename = "checkboxId")]
+	#[widget_builder(skip)]
+	pub checkbox_id: CheckboxId,
+
 	// Body
 	#[widget_builder(constructor)]
 	pub value: String,
 }
 
+impl TextLabel {
+	pub fn for_checkbox(mut self, id: &mut CheckboxId) -> Self {
+		id.fill();
+		self.checkbox_id = id.clone();
+		self
+	}
+}
+
 // TODO: Add UserInputLabel