Usability improvements to the NumberInput component

editor/src/consts.rs

@@ -41,6 +41,9 @@ pub const PIVOT_DIAMETER: f64 = 5.;
 pub const BOUNDS_SELECT_THRESHOLD: f64 = 10.;
 pub const BOUNDS_ROTATE_THRESHOLD: f64 = 20.;
 
+// Vector-related tools
+pub const DEFAULT_LINE_WEIGHT: f64 = 5.;
+
 // Path tool
 pub const MANIPULATOR_GROUP_MARKER_SIZE: f64 = 6.;
 pub const SELECTION_THRESHOLD: f64 = 10.;
@@ -69,6 +72,7 @@ pub const COLOR_OVERLAY_WHITE: &str = "#ffffff";
 pub const COLOR_OVERLAY_GRAY: &str = "#cccccc";
 
 // Fonts
+pub const DEFAULT_FONT_SIZE: u32 = 24;
 pub const DEFAULT_FONT_FAMILY: &str = "Cabin";
 pub const DEFAULT_FONT_STYLE: &str = "Normal (400)";
 

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

@@ -79,6 +79,7 @@ impl LayoutHolder for ExportDialogMessageHandler {
 				.unit("")
 				.min(0.)
 				.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+				.default_value(Some(1.))
 				.disabled(self.file_type == FileType::Svg)
 				.on_update(|number_input: &NumberInput| ExportDialogMessage::ScaleFactor(number_input.value.unwrap()).into())
 				.min_width(200)

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

@@ -97,6 +97,7 @@ impl LayoutHolder for NewDocumentDialogMessageHandler {
 				.unit(" px")
 				.min(0.)
 				.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+				.default_value(Some(1920.))
 				.is_integer(true)
 				.disabled(self.infinite)
 				.min_width(100)
@@ -108,6 +109,7 @@ impl LayoutHolder for NewDocumentDialogMessageHandler {
 				.unit(" px")
 				.min(0.)
 				.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+				.default_value(Some(1080.))
 				.is_integer(true)
 				.disabled(self.infinite)
 				.min_width(100)

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

@@ -179,6 +179,9 @@ pub struct NumberInput {
 	#[serde(rename = "isInteger")]
 	pub is_integer: bool,
 
+	#[serde(rename = "defaultValue")]
+	pub default_value: Option<f64>,
+
 	// Number presentation
 	#[serde(rename = "displayDecimalPlaces")]
 	#[derivative(Default(value = "2"))]

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -1295,6 +1295,7 @@ impl DocumentMessageHandler {
 				.unit("%")
 				.min(0.000001)
 				.max(1000000.)
+				.default_value(Some(100.))
 				.tooltip("Document zoom within the viewport")
 				.on_update(|number_input: &NumberInput| {
 					NavigationMessage::SetCanvasZoom {
@@ -1315,6 +1316,7 @@ impl DocumentMessageHandler {
 				NumberInput::new(Some(tilt_value))
 					.unit("°")
 					.step(15.)
+					.default_value(Some(0.))
 					.tooltip("Document tilt within the viewport")
 					.on_update(|number_input: &NumberInput| {
 						NavigationMessage::SetCanvasTilt {
@@ -1408,6 +1410,7 @@ impl DocumentMessageHandler {
 					.max(100.)
 					.range_min(Some(0.))
 					.range_max(Some(100.))
+					.default_value(Some(100.))
 					.mode_range()
 					.on_update(|number_input: &NumberInput| {
 						if let Some(value) = number_input.value {

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs

@@ -2,6 +2,7 @@
 
 use super::document_node_types::NodePropertiesContext;
 use super::FrontendGraphDataType;
+use crate::consts::DEFAULT_LINE_WEIGHT;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::prelude::*;
 
@@ -2106,7 +2107,14 @@ pub fn stroke_properties(document_node: &DocumentNode, node_id: NodeId, _context
 	let miter_limit_index = 7;
 
 	let color = color_widget(document_node, node_id, color_index, "Color", ColorButton::default(), true);
-	let weight = number_widget(document_node, node_id, weight_index, "Weight", NumberInput::default().unit("px").min(0.), true);
+	let weight = number_widget(
+		document_node,
+		node_id,
+		weight_index,
+		"Weight",
+		NumberInput::default().unit("px").min(0.).default_value(Some(DEFAULT_LINE_WEIGHT)),
+		true,
+	);
 	let dash_lengths = vec_f64_input(document_node, node_id, dash_lengths_index, "Dash Lengths", TextInput::default().centered(true), true);
 	let dash_offset = number_widget(document_node, node_id, dash_offset_index, "Dash Offset", NumberInput::default().unit("px").min(0.), true);
 	let line_cap = line_cap_widget(document_node, node_id, line_cap_index, "Line Cap", true);

editor/src/messages/tool/tool_messages/ellipse_tool.rs

@@ -1,4 +1,5 @@
 use super::tool_prelude::*;
+use crate::consts::DEFAULT_LINE_WEIGHT;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
 use crate::messages::tool::common_functionality::color_selector::{ToolColorOptions, ToolColorType};
 use crate::messages::tool::common_functionality::graph_modification_utils;
@@ -26,7 +27,7 @@ pub struct EllipseToolOptions {
 impl Default for EllipseToolOptions {
 	fn default() -> Self {
 		Self {
-			line_weight: 5.,
+			line_weight: DEFAULT_LINE_WEIGHT,
 			fill: ToolColorOptions::new_secondary(),
 			stroke: ToolColorOptions::new_primary(),
 		}
@@ -84,6 +85,7 @@ fn create_weight_widget(line_weight: f64) -> WidgetHolder {
 		.label("Weight")
 		.min(0.)
 		.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+		.default_value(Some(DEFAULT_LINE_WEIGHT))
 		.on_update(|number_input: &NumberInput| EllipseToolMessage::UpdateOptions(EllipseOptionsUpdate::LineWeight(number_input.value.unwrap())).into())
 		.widget_holder()
 }

editor/src/messages/tool/tool_messages/freehand_tool.rs

@@ -1,4 +1,5 @@
 use super::tool_prelude::*;
+use crate::consts::DEFAULT_LINE_WEIGHT;
 use crate::messages::portfolio::document::node_graph::VectorDataModification;
 use crate::messages::portfolio::document::overlays::utility_functions::path_endpoint_overlays;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
@@ -32,7 +33,7 @@ pub struct FreehandOptions {
 impl Default for FreehandOptions {
 	fn default() -> Self {
 		Self {
-			line_weight: 5.,
+			line_weight: DEFAULT_LINE_WEIGHT,
 			fill: ToolColorOptions::new_none(),
 			stroke: ToolColorOptions::new_primary(),
 		}
@@ -94,6 +95,7 @@ fn create_weight_widget(line_weight: f64) -> WidgetHolder {
 		.label("Weight")
 		.min(1.)
 		.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+		.default_value(Some(DEFAULT_LINE_WEIGHT))
 		.on_update(|number_input: &NumberInput| FreehandToolMessage::UpdateOptions(FreehandOptionsUpdate::LineWeight(number_input.value.unwrap())).into())
 		.widget_holder()
 }

editor/src/messages/tool/tool_messages/line_tool.rs

@@ -1,5 +1,5 @@
 use super::tool_prelude::*;
-use crate::consts::LINE_ROTATE_SNAP_ANGLE;
+use crate::consts::{DEFAULT_LINE_WEIGHT, LINE_ROTATE_SNAP_ANGLE};
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
 use crate::messages::tool::common_functionality::color_selector::{ToolColorOptions, ToolColorType};
@@ -26,7 +26,7 @@ pub struct LineOptions {
 impl Default for LineOptions {
 	fn default() -> Self {
 		Self {
-			line_weight: 5.,
+			line_weight: DEFAULT_LINE_WEIGHT,
 			stroke: ToolColorOptions::new_primary(),
 		}
 	}
@@ -82,6 +82,7 @@ fn create_weight_widget(line_weight: f64) -> WidgetHolder {
 		.label("Weight")
 		.min(0.)
 		.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+		.default_value(Some(DEFAULT_LINE_WEIGHT))
 		.on_update(|number_input: &NumberInput| LineToolMessage::UpdateOptions(LineOptionsUpdate::LineWeight(number_input.value.unwrap())).into())
 		.widget_holder()
 }

editor/src/messages/tool/tool_messages/pen_tool.rs

@@ -1,5 +1,5 @@
 use super::tool_prelude::*;
-use crate::consts::LINE_ROTATE_SNAP_ANGLE;
+use crate::consts::{DEFAULT_LINE_WEIGHT, LINE_ROTATE_SNAP_ANGLE};
 use crate::messages::portfolio::document::node_graph::VectorDataModification;
 use crate::messages::portfolio::document::overlays::utility_functions::path_overlays;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
@@ -32,7 +32,7 @@ pub struct PenOptions {
 impl Default for PenOptions {
 	fn default() -> Self {
 		Self {
-			line_weight: 5.,
+			line_weight: DEFAULT_LINE_WEIGHT,
 			fill: ToolColorOptions::new_secondary(),
 			stroke: ToolColorOptions::new_primary(),
 		}
@@ -104,6 +104,7 @@ fn create_weight_widget(line_weight: f64) -> WidgetHolder {
 		.label("Weight")
 		.min(0.)
 		.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+		.default_value(Some(DEFAULT_LINE_WEIGHT))
 		.on_update(|number_input: &NumberInput| PenToolMessage::UpdateOptions(PenOptionsUpdate::LineWeight(number_input.value.unwrap())).into())
 		.widget_holder()
 }

editor/src/messages/tool/tool_messages/polygon_tool.rs

@@ -1,4 +1,5 @@
 use super::tool_prelude::*;
+use crate::consts::DEFAULT_LINE_WEIGHT;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
 use crate::messages::tool::common_functionality::color_selector::{ToolColorOptions, ToolColorType};
 use crate::messages::tool::common_functionality::graph_modification_utils;
@@ -29,7 +30,7 @@ impl Default for PolygonOptions {
 	fn default() -> Self {
 		Self {
 			vertices: 5,
-			line_weight: 5.,
+			line_weight: DEFAULT_LINE_WEIGHT,
 			fill: ToolColorOptions::new_secondary(),
 			stroke: ToolColorOptions::new_primary(),
 			primitive_shape_type: PrimitiveShapeType::Polygon,
@@ -115,6 +116,7 @@ fn create_weight_widget(line_weight: f64) -> WidgetHolder {
 		.label("Weight")
 		.min(0.)
 		.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+		.default_value(Some(DEFAULT_LINE_WEIGHT))
 		.on_update(|number_input: &NumberInput| PolygonToolMessage::UpdateOptions(PolygonOptionsUpdate::LineWeight(number_input.value.unwrap())).into())
 		.widget_holder()
 }

editor/src/messages/tool/tool_messages/rectangle_tool.rs

@@ -1,4 +1,5 @@
 use super::tool_prelude::*;
+use crate::consts::DEFAULT_LINE_WEIGHT;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
 use crate::messages::tool::common_functionality::color_selector::{ToolColorOptions, ToolColorType};
 use crate::messages::tool::common_functionality::graph_modification_utils;
@@ -26,7 +27,7 @@ pub struct RectangleToolOptions {
 impl Default for RectangleToolOptions {
 	fn default() -> Self {
 		Self {
-			line_weight: 5.,
+			line_weight: DEFAULT_LINE_WEIGHT,
 			fill: ToolColorOptions::new_secondary(),
 			stroke: ToolColorOptions::new_primary(),
 		}
@@ -72,6 +73,7 @@ fn create_weight_widget(line_weight: f64) -> WidgetHolder {
 		.label("Weight")
 		.min(0.)
 		.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+		.default_value(Some(DEFAULT_LINE_WEIGHT))
 		.on_update(|number_input: &NumberInput| RectangleToolMessage::UpdateOptions(RectangleOptionsUpdate::LineWeight(number_input.value.unwrap())).into())
 		.widget_holder()
 }

editor/src/messages/tool/tool_messages/spline_tool.rs

@@ -1,5 +1,5 @@
 use super::tool_prelude::*;
-use crate::consts::DRAG_THRESHOLD;
+use crate::consts::{DEFAULT_LINE_WEIGHT, DRAG_THRESHOLD};
 use crate::messages::portfolio::document::node_graph::VectorDataModification;
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
 use crate::messages::tool::common_functionality::color_selector::{ToolColorOptions, ToolColorType};
@@ -27,7 +27,7 @@ pub struct SplineOptions {
 impl Default for SplineOptions {
 	fn default() -> Self {
 		Self {
-			line_weight: 5.,
+			line_weight: DEFAULT_LINE_WEIGHT,
 			fill: ToolColorOptions::new_none(),
 			stroke: ToolColorOptions::new_primary(),
 		}
@@ -91,6 +91,7 @@ fn create_weight_widget(line_weight: f64) -> WidgetHolder {
 		.label("Weight")
 		.min(0.)
 		.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+		.default_value(Some(DEFAULT_LINE_WEIGHT))
 		.on_update(|number_input: &NumberInput| SplineToolMessage::UpdateOptions(SplineOptionsUpdate::LineWeight(number_input.value.unwrap())).into())
 		.widget_holder()
 }

editor/src/messages/tool/tool_messages/text_tool.rs

@@ -2,7 +2,7 @@
 
 use super::tool_prelude::*;
 use crate::application::generate_uuid;
-use crate::consts::{DEFAULT_FONT_FAMILY, DEFAULT_FONT_STYLE};
+use crate::consts::{DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE};
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
 use crate::messages::tool::common_functionality::color_selector::{ToolColorOptions, ToolColorType};
@@ -32,7 +32,7 @@ pub struct TextOptions {
 impl Default for TextOptions {
 	fn default() -> Self {
 		Self {
-			font_size: 24,
+			font_size: DEFAULT_FONT_SIZE,
 			font_name: DEFAULT_FONT_FAMILY.into(),
 			font_style: DEFAULT_FONT_STYLE.into(),
 			fill: ToolColorOptions::new_primary(),
@@ -114,6 +114,7 @@ fn create_text_widgets(tool: &TextTool) -> Vec<WidgetHolder> {
 		.int()
 		.min(1.)
 		.max((1_u64 << std::f64::MANTISSA_DIGITS) as f64)
+		.default_value(Some(DEFAULT_FONT_SIZE as f64))
 		.on_update(|number_input: &NumberInput| TextToolMessage::UpdateOptions(TextOptionsUpdate::FontSize(number_input.value.unwrap() as u32)).into())
 		.widget_holder();
 	vec![

frontend/src/components/floating-menus/ColorPicker.svelte

@@ -335,6 +335,7 @@
 								strength = detail;
 								setColorRGB(channel, detail);
 							}}
+							defaultValue={255}
 							min={0}
 							max={255}
 							minWidth={56}
@@ -359,6 +360,7 @@
 								strength = detail;
 								setColorHSV(channel, detail);
 							}}
+							defaultValue={channel === "h" ? 360 : 100}
 							min={0}
 							max={channel === "h" ? 360 : 100}
 							unit={channel === "h" ? "°" : "%"}
@@ -379,6 +381,7 @@
 					if (detail !== undefined) alpha = detail / 100;
 					setColorAlphaPercent(detail);
 				}}
+				defaultValue={100}
 				min={0}
 				max={100}
 				rangeMin={0}

frontend/src/components/widgets/inputs/FieldInput.svelte

@@ -85,6 +85,8 @@
 			on:keydown={(e) => e.key === "Enter" && dispatch("textChanged")}
 			on:keydown={(e) => e.key === "Escape" && dispatch("textChangeCanceled")}
 			on:pointerdown
+			on:wheel
+			on:pointerenter
 			on:contextmenu={(e) => hideContextMenu && e.preventDefault()}
 			data-input-element
 		/>
@@ -104,11 +106,13 @@
 			on:keydown={(e) => (macKeyboardLayout ? e.metaKey : e.ctrlKey) && e.key === "Enter" && dispatch("textChanged")}
 			on:keydown={(e) => e.key === "Escape" && dispatch("textChangeCanceled")}
 			on:pointerdown
+			on:wheel
+			on:pointerenter
 			on:contextmenu={(e) => hideContextMenu && e.preventDefault()}
 		/>
 	{/if}
 	{#if label}
-		<label for={`field-input-${id}`} on:pointerdown>{label}</label>
+		<label for={`field-input-${id}`} on:pointerdown on:wheel on:pointerenter>{label}</label>
 	{/if}
 	<slot />
 </LayoutRow>