Add X and Y offset distance overlay while dragging with the Select tool (#2814)

* Add offset overlay to select tool

* Add overlay to Dragging

* Add axis align behavior

* Style changes

* Add trim to string

* reduce code duplication

* Code review

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>

Author: Kavin006

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

@@ -1274,6 +1274,7 @@ pub(crate) fn rectangle_properties(node_id: NodeId, context: &mut NodeProperties
 
 	let mut corner_radius_row_2 = vec![Separator::new(SeparatorType::Unrelated).widget_holder()];
 	corner_radius_row_2.push(TextLabel::new("").widget_holder());
+	add_blank_assist(&mut corner_radius_row_2);
 
 	let document_node = match get_document_node(node_id, context) {
 		Ok(document_node) => document_node,
@@ -1381,8 +1382,6 @@ pub(crate) fn rectangle_properties(node_id: NodeId, context: &mut NodeProperties
 	// Size Y
 	let size_y = number_widget(ParameterWidgetsInfo::new(node_id, HeightInput::INDEX, true, context), NumberInput::default());
 
-	add_blank_assist(&mut corner_radius_row_2);
-
 	// Clamped
 	let clamped = bool_widget(ParameterWidgetsInfo::new(node_id, ClampedInput::INDEX, true, context), CheckboxInput::default());
 
@@ -1436,7 +1435,7 @@ pub(crate) fn generate_node_properties(node_id: NodeId, context: &mut NodeProper
 						if let Some(field) = graphene_std::registry::NODE_METADATA
 							.lock()
 							.unwrap()
-							.get(&proto_node_identifier)
+							.get(proto_node_identifier)
 							.and_then(|metadata| metadata.fields.get(input_index))
 						{
 							number_options = (field.number_min, field.number_max, field.number_mode_range);

editor/src/messages/portfolio/document/overlays/utility_types.rs

@@ -814,6 +814,36 @@ impl OverlayContext {
 		self.render_context.fill_text(text, 0., 0.).expect("Failed to draw the text at the calculated position");
 		self.render_context.reset_transform().expect("Failed to reset the render context transform");
 	}
+
+	pub fn translation_box(&mut self, translation: DVec2, quad: Quad, typed_string: Option<String>) {
+		if translation.x.abs() > 1e-3 {
+			self.dashed_line(quad.top_left(), quad.top_right(), None, None, Some(2.), Some(2.), Some(0.5));
+
+			let width = match typed_string {
+				Some(ref typed_string) => typed_string,
+				None => &format!("{:.2}", translation.x).trim_end_matches('0').trim_end_matches('.').to_string(),
+			};
+			let x_transform = DAffine2::from_translation((quad.top_left() + quad.top_right()) / 2.);
+			self.text(width, COLOR_OVERLAY_BLUE, None, x_transform, 4., [Pivot::Middle, Pivot::End]);
+		}
+
+		if translation.y.abs() > 1e-3 {
+			self.dashed_line(quad.top_left(), quad.bottom_left(), None, None, Some(2.), Some(2.), Some(0.5));
+
+			let height = match typed_string {
+				Some(ref typed_string) => typed_string,
+				None => &format!("{:.2}", translation.y).trim_end_matches('0').trim_end_matches('.').to_string(),
+			};
+			let y_transform = DAffine2::from_translation((quad.top_left() + quad.bottom_left()) / 2.);
+			let height_pivot = if translation.x > -1e-3 { Pivot::Start } else { Pivot::End };
+			self.text(height, COLOR_OVERLAY_BLUE, None, y_transform, 3., [height_pivot, Pivot::Middle]);
+		}
+
+		if translation.x.abs() > 1e-3 && translation.y.abs() > 1e-3 {
+			self.line(quad.top_right(), quad.bottom_right(), None, None);
+			self.line(quad.bottom_left(), quad.bottom_right(), None, None);
+		}
+	}
 }
 
 pub enum Pivot {

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

@@ -974,6 +974,14 @@ impl Fsm for SelectToolFsmState {
 					}
 				}
 
+				if let Self::Dragging { .. } = self {
+					let quad = Quad::from_box([tool_data.drag_start, tool_data.drag_current]);
+					let document_start = document.metadata().document_to_viewport.inverse().transform_point2(quad.top_left());
+					let document_current = document.metadata().document_to_viewport.inverse().transform_point2(quad.bottom_right());
+
+					overlay_context.translation_box(document_current - document_start, quad, None);
+				}
+
 				self
 			}
 			(_, SelectToolMessage::EditLayer) => {

editor/src/messages/tool/transform_layer/transform_layer_message_handler.rs

@@ -319,37 +319,15 @@ impl MessageHandler<TransformLayerMessage, TransformData<'_>> for TransformLayer
 						let translation = translation.to_dvec(self.initial_transform, self.increments);
 						let viewport_translate = document_to_viewport.transform_vector2(translation);
 						let pivot = document_to_viewport.transform_point2(self.grab_target);
-						let quad = Quad::from_box([pivot, pivot + viewport_translate]).0;
-						let e1 = (self.layer_bounding_box.0[1] - self.layer_bounding_box.0[0]).normalize_or(DVec2::X);
+						let quad = Quad::from_box([pivot, pivot + viewport_translate]);
 
 						responses.add(SelectToolMessage::PivotShift {
 							offset: Some(viewport_translate),
 							flush: false,
 						});
 
-						if matches!(axis_constraint, Axis::Both | Axis::X) && translation.x != 0. {
-							let end = if self.local { (quad[1] - quad[0]).rotate(e1) + quad[0] } else { quad[1] };
-							overlay_context.dashed_line(quad[0], end, None, None, Some(2.), Some(2.), Some(0.5));
-
-							let x_transform = DAffine2::from_translation((quad[0] + end) / 2.);
-							overlay_context.text(&format_rounded(translation.x, 3), COLOR_OVERLAY_BLUE, None, x_transform, 4., [Pivot::Middle, Pivot::End]);
-						}
-
-						if matches!(axis_constraint, Axis::Both | Axis::Y) && translation.y != 0. {
-							let end = if self.local { (quad[3] - quad[0]).rotate(e1) + quad[0] } else { quad[3] };
-							overlay_context.dashed_line(quad[0], end, None, None, Some(2.), Some(2.), Some(0.5));
-							let x_parameter = viewport_translate.x.clamp(-1., 1.);
-							let y_transform = DAffine2::from_translation((quad[0] + end) / 2. + x_parameter * DVec2::X * 0.);
-							let pivot_selection = if x_parameter >= -1e-3 { Pivot::Start } else { Pivot::End };
-							if axis_constraint != Axis::Both || self.typing.digits.is_empty() || !self.transform_operation.can_begin_typing() {
-								overlay_context.text(&format_rounded(translation.y, 2), COLOR_OVERLAY_BLUE, None, y_transform, 3., [pivot_selection, Pivot::Middle]);
-							}
-						}
-
-						if matches!(axis_constraint, Axis::Both) && translation.x != 0. && translation.y != 0. {
-							overlay_context.line(quad[1], quad[2], None, None);
-							overlay_context.line(quad[3], quad[2], None, None);
-						}
+						let typed_string = (!self.typing.digits.is_empty() && self.transform_operation.can_begin_typing()).then(|| self.typing.string.clone());
+						overlay_context.translation_box(translation, quad, typed_string);
 					}
 					TransformOperation::Scaling(scale) => {
 						let scale = scale.to_f64(self.increments);