Add handle visualization during point insertion in the Path tool (#2197)

0SlowPoke0 · Keavon · web-flow · commit 5aedda0ce880 · 2025-01-15T10:39:41.000Z
* added_handle_overlays

* changed color to yellow

* Rename color parameter

* Change the color to blue

---------

Co-authored-by: Keavon Chambers &lt;keavon@keavon.com&gt;
diff --git a/editor/src/messages/portfolio/document/overlays/utility_functions.rs b/editor/src/messages/portfolio/document/overlays/utility_functions.rs
@@ -41,16 +41,16 @@ pub fn path_overlays(document: &DocumentMessageHandler, shape_editor: &mut Shape
 				bezier_rs::BezierHandles::Quadratic { handle } if not_under_anchor(handle, bezier.start) && not_under_anchor(handle, bezier.end) => {
 					overlay_context.line(handle, bezier.start, None);
 					overlay_context.line(handle, bezier.end, None);
-					overlay_context.manipulator_handle(handle, is_selected(selected, ManipulatorPointId::PrimaryHandle(segment_id)));
+					overlay_context.manipulator_handle(handle, is_selected(selected, ManipulatorPointId::PrimaryHandle(segment_id)), None);
 				}
 				bezier_rs::BezierHandles::Cubic { handle_start, handle_end } => {
 					if not_under_anchor(handle_start, bezier.start) {
 						overlay_context.line(handle_start, bezier.start, None);
-						overlay_context.manipulator_handle(handle_start, is_selected(selected, ManipulatorPointId::PrimaryHandle(segment_id)));
+						overlay_context.manipulator_handle(handle_start, is_selected(selected, ManipulatorPointId::PrimaryHandle(segment_id)), None);
 					}
 					if not_under_anchor(handle_end, bezier.end) {
 						overlay_context.line(handle_end, bezier.end, None);
-						overlay_context.manipulator_handle(handle_end, is_selected(selected, ManipulatorPointId::EndHandle(segment_id)));
+						overlay_context.manipulator_handle(handle_end, is_selected(selected, ManipulatorPointId::EndHandle(segment_id)), None);
 					}
 				}
 				_ => {}
diff --git a/editor/src/messages/portfolio/document/overlays/utility_types.rs b/editor/src/messages/portfolio/document/overlays/utility_types.rs
@@ -127,7 +127,7 @@ impl OverlayContext {
 		}
 	}
 
-	pub fn manipulator_handle(&mut self, position: DVec2, selected: bool) {
+	pub fn manipulator_handle(&mut self, position: DVec2, selected: bool, color: Option<&str>) {
 		let position = position.round() - DVec2::splat(0.5);
 
 		self.render_context.begin_path();
@@ -137,7 +137,7 @@ impl OverlayContext {
 
 		let fill = if selected { COLOR_OVERLAY_BLUE } else { COLOR_OVERLAY_WHITE };
 		self.render_context.set_fill_style_str(fill);
-		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
+		self.render_context.set_stroke_style_str(color.unwrap_or(COLOR_OVERLAY_BLUE));
 		self.render_context.fill();
 		self.render_context.stroke();
 	}
diff --git a/editor/src/messages/tool/common_functionality/shape_editor.rs b/editor/src/messages/tool/common_functionality/shape_editor.rs
@@ -116,6 +116,20 @@ impl ClosestSegment {
 		(stroke_width_sq + tolerance_sq) < dist_sq
 	}
 
+	pub fn handle_positions(&self, document_metadata: &DocumentMetadata) -> (Option<DVec2>, Option<DVec2>) {
+		// Transform to viewport space
+		let transform = document_metadata.transform_to_viewport(self.layer);
+
+		// Split the Bezier at the parameter `t`
+		let [first, second] = self.bezier.split(TValue::Parametric(self.t));
+
+		// Transform the handle positions to viewport space
+		let first_handle = first.handle_end().map(|handle| transform.transform_point2(handle));
+		let second_handle = second.handle_start().map(|handle| transform.transform_point2(handle));
+
+		(first_handle, second_handle)
+	}
+
 	pub fn adjusted_insert(&self, responses: &mut VecDeque<Message>) -> PointId {
 		let layer = self.layer;
 		let [first, second] = self.bezier.split(TValue::Parametric(self.t));
diff --git a/editor/src/messages/tool/common_functionality/snapping.rs b/editor/src/messages/tool/common_functionality/snapping.rs
@@ -461,10 +461,10 @@ impl SnapManager {
 				overlay_context.line(viewport, target, None);
 			}
 			for &target in align.iter().flatten() {
-				overlay_context.manipulator_handle(target, false);
+				overlay_context.manipulator_handle(target, false, None);
 			}
 			if any_align {
-				overlay_context.manipulator_handle(viewport, false);
+				overlay_context.manipulator_handle(viewport, false, None);
 			}
 
 			if !any_align && ind.distribution_equal_distance_x.is_none() && ind.distribution_equal_distance_y.is_none() {
diff --git a/editor/src/messages/tool/tool_messages/gradient_tool.rs b/editor/src/messages/tool/tool_messages/gradient_tool.rs
@@ -257,15 +257,15 @@ impl Fsm for GradientToolFsmState {
 					let (start, end) = (transform.transform_point2(start), transform.transform_point2(end));
 
 					overlay_context.line(start, end, None);
-					overlay_context.manipulator_handle(start, dragging == Some(GradientDragTarget::Start));
-					overlay_context.manipulator_handle(end, dragging == Some(GradientDragTarget::End));
+					overlay_context.manipulator_handle(start, dragging == Some(GradientDragTarget::Start), None);
+					overlay_context.manipulator_handle(end, dragging == Some(GradientDragTarget::End), None);
 
 					for (index, (position, _)) in stops.0.into_iter().enumerate() {
 						if position.abs() < f64::EPSILON * 1000. || (1. - position).abs() < f64::EPSILON * 1000. {
 							continue;
 						}
 
-						overlay_context.manipulator_handle(start.lerp(end, position), dragging == Some(GradientDragTarget::Step(index)));
+						overlay_context.manipulator_handle(start.lerp(end, position), dragging == Some(GradientDragTarget::Step(index)), None);
 					}
 				}
 
diff --git a/editor/src/messages/tool/tool_messages/path_tool.rs b/editor/src/messages/tool/tool_messages/path_tool.rs
@@ -1,5 +1,5 @@
 use super::tool_prelude::*;
-use crate::consts::{COLOR_OVERLAY_YELLOW, DRAG_THRESHOLD, HANDLE_ROTATE_SNAP_ANGLE, INSERT_POINT_ON_SEGMENT_TOO_FAR_DISTANCE, SELECTION_THRESHOLD, SELECTION_TOLERANCE};
+use crate::consts::{COLOR_OVERLAY_BLUE, DRAG_THRESHOLD, HANDLE_ROTATE_SNAP_ANGLE, INSERT_POINT_ON_SEGMENT_TOO_FAR_DISTANCE, SELECTION_THRESHOLD, SELECTION_TOLERANCE};
 use crate::messages::portfolio::document::overlays::utility_functions::path_overlays;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
@@ -520,6 +520,7 @@ impl PathToolData {
 		handle_angle
 	}
 
+	#[allow(clippy::too_many_arguments)]
 	fn apply_snapping(
 		&mut self,
 		handle_direction: DVec2,
@@ -549,6 +550,7 @@ impl PathToolData {
 		document.metadata().document_to_viewport.transform_vector2(snap_result.snapped_point_document - handle_position)
 	}
 
+	#[allow(clippy::too_many_arguments)]
 	fn drag(
 		&mut self,
 		equidistant: bool,
@@ -622,7 +624,13 @@ impl Fsm for PathToolFsmState {
 						let state = tool_data.update_insertion(shape_editor, document, responses, input);
 
 						if let Some(closest_segment) = &tool_data.segment {
-							overlay_context.manipulator_anchor(closest_segment.closest_point_to_viewport(), false, Some(COLOR_OVERLAY_YELLOW));
+							overlay_context.manipulator_anchor(closest_segment.closest_point_to_viewport(), false, Some(COLOR_OVERLAY_BLUE));
+							if let (Some(handle1), Some(handle2)) = closest_segment.handle_positions(document.metadata()) {
+								overlay_context.line(closest_segment.closest_point_to_viewport(), handle1, Some(COLOR_OVERLAY_BLUE));
+								overlay_context.line(closest_segment.closest_point_to_viewport(), handle2, Some(COLOR_OVERLAY_BLUE));
+								overlay_context.manipulator_handle(handle1, false, Some(COLOR_OVERLAY_BLUE));
+								overlay_context.manipulator_handle(handle2, false, Some(COLOR_OVERLAY_BLUE));
+							}
 						}
 
 						responses.add(PathToolMessage::SelectedPointUpdated);
diff --git a/editor/src/messages/tool/tool_messages/pen_tool.rs b/editor/src/messages/tool/tool_messages/pen_tool.rs
@@ -602,12 +602,12 @@ impl Fsm for PenToolFsmState {
 
 					if self == PenToolFsmState::DraggingHandle && valid(next_anchor, handle_end) {
 						// Draw the handle circle for the currently-being-dragged-out incoming handle (opposite the one currently being dragged out)
-						overlay_context.manipulator_handle(handle_end, false);
+						overlay_context.manipulator_handle(handle_end, false, None);
 					}
 
 					if valid(anchor_start, handle_start) {
 						// Draw the handle circle for the most recently placed anchor's outgoing handle (which is currently influencing the currently-being-placed segment)
-						overlay_context.manipulator_handle(handle_start, false);
+						overlay_context.manipulator_handle(handle_start, false, None);
 					}
 				} else {
 					// Draw the whole path and its manipulators when the user is clicking-and-dragging out from the most recently placed anchor to set its outgoing handle, during which it would otherwise not have its overlays drawn
@@ -616,7 +616,7 @@ impl Fsm for PenToolFsmState {
 
 				if self == PenToolFsmState::DraggingHandle && valid(next_anchor, next_handle_start) {
 					// Draw the handle circle for the currently-being-dragged-out outgoing handle (the one currently being dragged out, under the user's cursor)
-					overlay_context.manipulator_handle(next_handle_start, false);
+					overlay_context.manipulator_handle(next_handle_start, false, None);
 				}
 
 				if self == PenToolFsmState::DraggingHandle {

Original file line number	Diff line number	Diff line change
`@@ -41,16 +41,16 @@ pub fn path_overlays(document: &DocumentMessageHandler, shape_editor: &mut Shape`
`41`	`41`	`bezier_rs::BezierHandles::Quadratic { handle } if not_under_anchor(handle, bezier.start) && not_under_anchor(handle, bezier.end) => {`
`42`	`42`	`overlay_context.line(handle, bezier.start, None);`
`43`	`43`	`overlay_context.line(handle, bezier.end, None);`
`44`		`- overlay_context.manipulator_handle(handle, is_selected(selected, ManipulatorPointId::PrimaryHandle(segment_id)));`
	`44`	`+ overlay_context.manipulator_handle(handle, is_selected(selected, ManipulatorPointId::PrimaryHandle(segment_id)), None);`
`45`	`45`	`}`
`46`	`46`	`bezier_rs::BezierHandles::Cubic { handle_start, handle_end } => {`
`47`	`47`	`if not_under_anchor(handle_start, bezier.start) {`
`48`	`48`	`overlay_context.line(handle_start, bezier.start, None);`
`49`		`- overlay_context.manipulator_handle(handle_start, is_selected(selected, ManipulatorPointId::PrimaryHandle(segment_id)));`
	`49`	`+ overlay_context.manipulator_handle(handle_start, is_selected(selected, ManipulatorPointId::PrimaryHandle(segment_id)), None);`
`50`	`50`	`}`
`51`	`51`	`if not_under_anchor(handle_end, bezier.end) {`
`52`	`52`	`overlay_context.line(handle_end, bezier.end, None);`
`53`		`- overlay_context.manipulator_handle(handle_end, is_selected(selected, ManipulatorPointId::EndHandle(segment_id)));`
	`53`	`+ overlay_context.manipulator_handle(handle_end, is_selected(selected, ManipulatorPointId::EndHandle(segment_id)), None);`
`54`	`54`	`}`
`55`	`55`	`}`
`56`	`56`	`_ => {}`
Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,7 @@ impl OverlayContext {`
`127`	`127`	`}`
`128`	`128`	`}`
`129`	`129`
`130`		`- pub fn manipulator_handle(&mut self, position: DVec2, selected: bool) {`
	`130`	`+ pub fn manipulator_handle(&mut self, position: DVec2, selected: bool, color: Option<&str>) {`
`131`	`131`	`let position = position.round() - DVec2::splat(0.5);`
`132`	`132`
`133`	`133`	`self.render_context.begin_path();`
`@@ -137,7 +137,7 @@ impl OverlayContext {`
`137`	`137`
`138`	`138`	`let fill = if selected { COLOR_OVERLAY_BLUE } else { COLOR_OVERLAY_WHITE };`
`139`	`139`	`self.render_context.set_fill_style_str(fill);`
`140`		`- self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);`
	`140`	`+ self.render_context.set_stroke_style_str(color.unwrap_or(COLOR_OVERLAY_BLUE));`
`141`	`141`	`self.render_context.fill();`
`142`	`142`	`self.render_context.stroke();`
`143`	`143`	`}`
Original file line number	Diff line number	Diff line change
`@@ -461,10 +461,10 @@ impl SnapManager {`
`461`	`461`	`overlay_context.line(viewport, target, None);`
`462`	`462`	`}`
`463`	`463`	`for &target in align.iter().flatten() {`
`464`		`- overlay_context.manipulator_handle(target, false);`
	`464`	`+ overlay_context.manipulator_handle(target, false, None);`
`465`	`465`	`}`
`466`	`466`	`if any_align {`
`467`		`- overlay_context.manipulator_handle(viewport, false);`
	`467`	`+ overlay_context.manipulator_handle(viewport, false, None);`
`468`	`468`	`}`
`469`	`469`
`470`	`470`	`if !any_align && ind.distribution_equal_distance_x.is_none() && ind.distribution_equal_distance_y.is_none() {`
Original file line number	Diff line number	Diff line change
`@@ -257,15 +257,15 @@ impl Fsm for GradientToolFsmState {`
`257`	`257`	`let (start, end) = (transform.transform_point2(start), transform.transform_point2(end));`
`258`	`258`
`259`	`259`	`overlay_context.line(start, end, None);`
`260`		`- overlay_context.manipulator_handle(start, dragging == Some(GradientDragTarget::Start));`
`261`		`- overlay_context.manipulator_handle(end, dragging == Some(GradientDragTarget::End));`
	`260`	`+ overlay_context.manipulator_handle(start, dragging == Some(GradientDragTarget::Start), None);`
	`261`	`+ overlay_context.manipulator_handle(end, dragging == Some(GradientDragTarget::End), None);`
`262`	`262`
`263`	`263`	`for (index, (position, _)) in stops.0.into_iter().enumerate() {`
`264`	`264`	`if position.abs() < f64::EPSILON * 1000. \|\| (1. - position).abs() < f64::EPSILON * 1000. {`
`265`	`265`	`continue;`
`266`	`266`	`}`
`267`	`267`
`268`		`- overlay_context.manipulator_handle(start.lerp(end, position), dragging == Some(GradientDragTarget::Step(index)));`
	`268`	`+ overlay_context.manipulator_handle(start.lerp(end, position), dragging == Some(GradientDragTarget::Step(index)), None);`
`269`	`269`	`}`
`270`	`270`	`}`
`271`	`271`
Original file line number	Diff line number	Diff line change
`@@ -602,12 +602,12 @@ impl Fsm for PenToolFsmState {`
`602`	`602`
`603`	`603`	`if self == PenToolFsmState::DraggingHandle && valid(next_anchor, handle_end) {`
`604`	`604`	`// Draw the handle circle for the currently-being-dragged-out incoming handle (opposite the one currently being dragged out)`
`605`		`- overlay_context.manipulator_handle(handle_end, false);`
	`605`	`+ overlay_context.manipulator_handle(handle_end, false, None);`
`606`	`606`	`}`
`607`	`607`
`608`	`608`	`if valid(anchor_start, handle_start) {`
`609`	`609`	`// Draw the handle circle for the most recently placed anchor's outgoing handle (which is currently influencing the currently-being-placed segment)`
`610`		`- overlay_context.manipulator_handle(handle_start, false);`
	`610`	`+ overlay_context.manipulator_handle(handle_start, false, None);`
`611`	`611`	`}`
`612`	`612`	`} else {`
`613`	`613`	`// Draw the whole path and its manipulators when the user is clicking-and-dragging out from the most recently placed anchor to set its outgoing handle, during which it would otherwise not have its overlays drawn`
`@@ -616,7 +616,7 @@ impl Fsm for PenToolFsmState {`
`616`	`616`
`617`	`617`	`if self == PenToolFsmState::DraggingHandle && valid(next_anchor, next_handle_start) {`
`618`	`618`	`// Draw the handle circle for the currently-being-dragged-out outgoing handle (the one currently being dragged out, under the user's cursor)`
`619`		`- overlay_context.manipulator_handle(next_handle_start, false);`
	`619`	`+ overlay_context.manipulator_handle(next_handle_start, false, None);`
`620`	`620`	`}`
`621`	`621`
`622`	`622`	`if self == PenToolFsmState::DraggingHandle {`