Add segment editing mode to the Path tool (#2712)

* Segment select mode upto dragging

* Lasso select for segment editing

* Formatting

* Compatibility with point selection mode

* Add delete segment support and drawing from inside of shape

* Add GRS support for selected segments

* Cleanup and add dynamic hints

* Fix double click behaviour and overlays

* Format code

* Fix merge

* Fix Lint

* Fix formatting

* Fix lasso bug

* Code review

---------

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

Author: 4adex

editor/Cargo.toml

@@ -36,9 +36,9 @@ thiserror = { workspace = true }
 serde = { workspace = true }
 serde_json = { workspace = true }
 bezier-rs = { workspace = true }
+kurbo = { workspace = true }
 futures = { workspace = true }
 glam = { workspace = true }
-kurbo = { workspace = true }
 derivative = { workspace = true }
 specta = { workspace = true }
 dyn-any = { workspace = true }

editor/src/consts.rs

@@ -102,7 +102,7 @@ pub const MANIPULATOR_GROUP_MARKER_SIZE: f64 = 6.;
 pub const SELECTION_THRESHOLD: f64 = 10.;
 pub const HIDE_HANDLE_DISTANCE: f64 = 3.;
 pub const HANDLE_ROTATE_SNAP_ANGLE: f64 = 15.;
-pub const SEGMENT_INSERTION_DISTANCE: f64 = 8.;
+pub const SEGMENT_INSERTION_DISTANCE: f64 = 5.;
 pub const SEGMENT_OVERLAY_SIZE: f64 = 10.;
 pub const HANDLE_LENGTH_FACTOR: f64 = 0.5;
 
@@ -133,6 +133,7 @@ pub const SCALE_EFFECT: f64 = 0.5;
 
 // COLORS
 pub const COLOR_OVERLAY_BLUE: &str = "#00a8ff";
+pub const COLOR_OVERLAY_BLUE_50: &str = "rgba(0, 168, 255, 0.5)";
 pub const COLOR_OVERLAY_YELLOW: &str = "#ffc848";
 pub const COLOR_OVERLAY_GREEN: &str = "#63ce63";
 pub const COLOR_OVERLAY_RED: &str = "#ef5454";

editor/src/messages/input_mapper/input_mappings.rs

@@ -212,7 +212,7 @@ pub fn input_mappings() -> Mapping {
 		entry!(KeyDown(Delete); modifiers=[Shift], action_dispatch=PathToolMessage::BreakPath),
 		entry!(KeyDown(Backspace); modifiers=[Shift], action_dispatch=PathToolMessage::BreakPath),
 		entry!(KeyDownNoRepeat(Tab); action_dispatch=PathToolMessage::SwapSelectedHandles),
-		entry!(KeyDown(MouseLeft); action_dispatch=PathToolMessage::MouseDown { extend_selection: Shift, lasso_select: Control, handle_drag_from_anchor: Alt, drag_restore_handle: Control }),
+		entry!(KeyDown(MouseLeft); action_dispatch=PathToolMessage::MouseDown { extend_selection: Shift, lasso_select: Control, handle_drag_from_anchor: Alt, drag_restore_handle: Control, molding_in_segment_edit: KeyA }),
 		entry!(KeyDown(MouseRight); action_dispatch=PathToolMessage::RightClick),
 		entry!(KeyDown(Escape); action_dispatch=PathToolMessage::Escape),
 		entry!(KeyDown(KeyG); action_dispatch=PathToolMessage::GRS { key: KeyG }),

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

@@ -124,8 +124,19 @@ pub fn path_overlays(document: &DocumentMessageHandler, draw_handles: DrawHandle
 			overlay_context.outline_vector(&vector_data, transform);
 		}
 
+		// Get the selected segments and then add a bold line overlay on them
+		for (segment_id, bezier, _, _) in vector_data.segment_bezier_iter() {
+			let Some(selected_shape_state) = shape_editor.selected_shape_state.get_mut(&layer) else {
+				continue;
+			};
+
+			if selected_shape_state.is_segment_selected(segment_id) {
+				overlay_context.outline_select_bezier(bezier, transform);
+			}
+		}
+
 		let selected = shape_editor.selected_shape_state.get(&layer);
-		let is_selected = |point: ManipulatorPointId| selected.is_some_and(|selected| selected.is_selected(point));
+		let is_selected = |point: ManipulatorPointId| selected.is_some_and(|selected| selected.is_point_selected(point));
 
 		if display_handles {
 			let opposite_handles_data: Vec<(PointId, SegmentId)> = shape_editor.selected_points().filter_map(|point_id| vector_data.adjacent_segment(point_id)).collect();
@@ -187,7 +198,7 @@ pub fn path_endpoint_overlays(document: &DocumentMessageHandler, shape_editor: &
 		//let document_to_viewport = document.navigation_handler.calculate_offset_transform(overlay_context.size / 2., &document.document_ptz);
 		let transform = document.metadata().transform_to_viewport(layer);
 		let selected = shape_editor.selected_shape_state.get(&layer);
-		let is_selected = |selected: Option<&SelectedLayerState>, point: ManipulatorPointId| selected.is_some_and(|selected| selected.is_selected(point));
+		let is_selected = |selected: Option<&SelectedLayerState>, point: ManipulatorPointId| selected.is_some_and(|selected| selected.is_point_selected(point));
 
 		for point in vector_data.extendable_points(preferences.vector_meshes) {
 			let Some(position) = vector_data.point_domain.position_from_id(point) else { continue };

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

@@ -1,7 +1,7 @@
 use super::utility_functions::overlay_canvas_context;
 use crate::consts::{
-	COLOR_OVERLAY_BLUE, COLOR_OVERLAY_GREEN, COLOR_OVERLAY_RED, COLOR_OVERLAY_WHITE, COLOR_OVERLAY_YELLOW, COMPASS_ROSE_ARROW_SIZE, COMPASS_ROSE_HOVER_RING_DIAMETER, COMPASS_ROSE_MAIN_RING_DIAMETER,
-	COMPASS_ROSE_RING_INNER_DIAMETER, MANIPULATOR_GROUP_MARKER_SIZE, PIVOT_CROSSHAIR_LENGTH, PIVOT_CROSSHAIR_THICKNESS, PIVOT_DIAMETER,
+	COLOR_OVERLAY_BLUE, COLOR_OVERLAY_BLUE_50, COLOR_OVERLAY_GREEN, COLOR_OVERLAY_RED, COLOR_OVERLAY_WHITE, COLOR_OVERLAY_YELLOW, COMPASS_ROSE_ARROW_SIZE, COMPASS_ROSE_HOVER_RING_DIAMETER,
+	COMPASS_ROSE_MAIN_RING_DIAMETER, COMPASS_ROSE_RING_INNER_DIAMETER, MANIPULATOR_GROUP_MARKER_SIZE, PIVOT_CROSSHAIR_LENGTH, PIVOT_CROSSHAIR_THICKNESS, PIVOT_DIAMETER,
 };
 use crate::messages::prelude::Message;
 use bezier_rs::{Bezier, Subpath};
@@ -581,6 +581,35 @@ impl OverlayContext {
 		self.end_dpi_aware_transform();
 	}
 
+	/// Used by the path tool segment mode in order to show the selected segments.
+	pub fn outline_select_bezier(&mut self, bezier: Bezier, transform: DAffine2) {
+		self.start_dpi_aware_transform();
+
+		self.render_context.begin_path();
+		self.bezier_command(bezier, transform, true);
+		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
+		self.render_context.set_line_width(4.);
+		self.render_context.stroke();
+
+		self.render_context.set_line_width(1.);
+
+		self.end_dpi_aware_transform();
+	}
+
+	pub fn outline_overlay_bezier(&mut self, bezier: Bezier, transform: DAffine2) {
+		self.start_dpi_aware_transform();
+
+		self.render_context.begin_path();
+		self.bezier_command(bezier, transform, true);
+		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE_50);
+		self.render_context.set_line_width(4.);
+		self.render_context.stroke();
+
+		self.render_context.set_line_width(1.);
+
+		self.end_dpi_aware_transform();
+	}
+
 	fn bezier_command(&self, bezier: Bezier, transform: DAffine2, move_to: bool) {
 		self.start_dpi_aware_transform();
 

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

@@ -88,6 +88,18 @@ impl OriginalTransforms {
 					let Some(selected_points) = shape_editor.selected_points_in_layer(layer) else {
 						continue;
 					};
+					let Some(selected_segments) = shape_editor.selected_segments_in_layer(layer) else {
+						continue;
+					};
+
+					let mut selected_points = selected_points.clone();
+
+					for (segment_id, _, start, end) in vector_data.segment_bezier_iter() {
+						if selected_segments.contains(&segment_id) {
+							selected_points.insert(ManipulatorPointId::Anchor(start));
+							selected_points.insert(ManipulatorPointId::Anchor(end));
+						}
+					}
 
 					// Anchors also move their handles
 					let anchor_ids = selected_points.iter().filter_map(|point| point.as_anchor());