Add selection cycle and gray pre-selection outlines to the Path tool, and Tab to swap Select/Path tools (#2818)

* Added initial version of this feature for the path tool

* Removed debug statements

* Thickened the overlay width

* Added hover highlighting for path tool

* Experimental switch to path tool at leaf layer

* Ghost outline initial implementation

* Added tab swap for select tool -> path tool

* Minor fix for Select Tool dbl click -> Path Tool

* Added support for ghosts when using GRS in the path tool

* Fixed GRS undo bug, vastly improved hover behavior and now clearly visualize next double click target

* Fixed unused import warnings

* Updated behavior to handle mouse movement cases, reverted line width to 1px

* Fixed merge behavioral issues

* Disabled Select Tool to Path Tool double click toggle, fixed single click drill through for special case

* Clean up of unused consts and comment

* Properly cancel the drill through state when the mouse moves

* Fix some stuff

---------

Co-authored-by: Keavon Chambers <[email protected]>

Author: otdavies

editor/src/consts.rs

@@ -101,6 +101,7 @@ pub const MIN_LENGTH_FOR_SKEW_TRIANGLE_VISIBILITY: f64 = 48.;
 // PATH TOOL
 pub const MANIPULATOR_GROUP_MARKER_SIZE: f64 = 6.;
 pub const SELECTION_THRESHOLD: f64 = 10.;
+pub const DRILL_THROUGH_THRESHOLD: f64 = 10.;
 pub const HIDE_HANDLE_DISTANCE: f64 = 3.;
 pub const HANDLE_ROTATE_SNAP_ANGLE: f64 = 15.;
 pub const SEGMENT_INSERTION_DISTANCE: f64 = 5.;
@@ -134,13 +135,15 @@ pub const SCALE_EFFECT: f64 = 0.5;
 
 // COLORS
 pub const COLOR_OVERLAY_BLUE: &str = "#00a8ff";
+pub const COLOR_OVERLAY_BLUE_50: &str = "#00a8ff80";
 pub const COLOR_OVERLAY_YELLOW: &str = "#ffc848";
 pub const COLOR_OVERLAY_YELLOW_DULL: &str = "#d7ba8b";
 pub const COLOR_OVERLAY_GREEN: &str = "#63ce63";
 pub const COLOR_OVERLAY_RED: &str = "#ef5454";
 pub const COLOR_OVERLAY_GRAY: &str = "#cccccc";
+pub const COLOR_OVERLAY_GRAY_25: &str = "#cccccc40";
 pub const COLOR_OVERLAY_WHITE: &str = "#ffffff";
-pub const COLOR_OVERLAY_LABEL_BACKGROUND: &str = "#000000cc";
+pub const COLOR_OVERLAY_BLACK_75: &str = "#000000bf";
 
 // DOCUMENT
 pub const DEFAULT_DOCUMENT_NAME: &str = "Untitled Document";

editor/src/messages/input_mapper/input_mappings.rs

@@ -317,6 +317,7 @@ pub fn input_mappings() -> Mapping {
 		entry!(KeyDown(KeyX); modifiers=[Shift], action_dispatch=ToolMessage::SwapColors),
 		entry!(KeyDown(KeyC); modifiers=[Alt], action_dispatch=ToolMessage::SelectRandomWorkingColor { primary: true }),
 		entry!(KeyDown(KeyC); modifiers=[Alt, Shift], action_dispatch=ToolMessage::SelectRandomWorkingColor { primary: false }),
+		entry!(KeyDownNoRepeat(Tab); action_dispatch=ToolMessage::ToggleSelectVsPath),
 		//
 		// DocumentMessage
 		entry!(KeyDown(Space); modifiers=[Control], action_dispatch=DocumentMessage::GraphViewOverlayToggle),

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

@@ -1683,6 +1683,11 @@ impl DocumentMessageHandler {
 			})
 	}
 
+	pub fn click_list_no_parents<'a>(&'a self, ipp: &InputPreprocessorMessageHandler) -> impl Iterator<Item = LayerNodeIdentifier> + use<'a> {
+		self.click_xray(ipp)
+			.filter(move |&layer| !self.network_interface.is_artboard(&layer.to_node(), &[]) && !layer.has_children(self.network_interface.document_metadata()))
+	}
+
 	/// Find the deepest layer that has been clicked on from a location in viewport space.
 	pub fn click(&self, ipp: &InputPreprocessorMessageHandler) -> Option<LayerNodeIdentifier> {
 		self.click_list(ipp).last()

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

@@ -1,7 +1,8 @@
 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, COLOR_OVERLAY_YELLOW_DULL, COMPASS_ROSE_ARROW_SIZE, COMPASS_ROSE_HOVER_RING_DIAMETER,
-	COMPASS_ROSE_MAIN_RING_DIAMETER, COMPASS_ROSE_RING_INNER_DIAMETER, DOWEL_PIN_RADIUS, 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, COLOR_OVERLAY_YELLOW_DULL, COMPASS_ROSE_ARROW_SIZE,
+	COMPASS_ROSE_HOVER_RING_DIAMETER, COMPASS_ROSE_MAIN_RING_DIAMETER, COMPASS_ROSE_RING_INNER_DIAMETER, DOWEL_PIN_RADIUS, MANIPULATOR_GROUP_MARKER_SIZE, PIVOT_CROSSHAIR_LENGTH,
+	PIVOT_CROSSHAIR_THICKNESS, PIVOT_DIAMETER,
 };
 use crate::messages::prelude::Message;
 use bezier_rs::{Bezier, Subpath};
@@ -349,6 +350,7 @@ impl OverlayContext {
 		self.render_context.rect(corner.x, corner.y, size, size);
 		self.render_context.set_fill_style_str(color_fill);
 		self.render_context.set_stroke_style_str(color_stroke);
+		self.render_context.set_line_width(1.);
 		self.render_context.fill();
 		self.render_context.stroke();
 
@@ -631,11 +633,9 @@ impl OverlayContext {
 	pub fn outline_overlay_bezier(&mut self, bezier: Bezier, transform: DAffine2) {
 		self.start_dpi_aware_transform();
 
-		let color = Color::from_rgb_str(COLOR_OVERLAY_BLUE.strip_prefix('#').unwrap()).unwrap().with_alpha(0.05).to_rgba_hex_srgb();
-
 		self.render_context.begin_path();
 		self.bezier_command(bezier, transform, true);
-		self.render_context.set_stroke_style_str(&color);
+		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE_50);
 		self.render_context.set_line_width(4.);
 		self.render_context.stroke();
 
@@ -727,6 +727,7 @@ impl OverlayContext {
 
 			let color = color.unwrap_or(COLOR_OVERLAY_BLUE);
 			self.render_context.set_stroke_style_str(color);
+			self.render_context.set_line_width(1.);
 			self.render_context.stroke();
 		}
 	}

editor/src/messages/tool/common_functionality/snapping.rs

@@ -4,7 +4,7 @@ mod grid_snapper;
 mod layer_snapper;
 mod snap_results;
 
-use crate::consts::{COLOR_OVERLAY_BLUE, COLOR_OVERLAY_LABEL_BACKGROUND, COLOR_OVERLAY_WHITE};
+use crate::consts::{COLOR_OVERLAY_BLACK_75, COLOR_OVERLAY_BLUE, COLOR_OVERLAY_WHITE};
 use crate::messages::portfolio::document::overlays::utility_types::{OverlayContext, Pivot};
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
 use crate::messages::portfolio::document::utility_types::misc::{GridSnapTarget, PathSnapTarget, SnapTarget};
@@ -482,7 +482,7 @@ impl SnapManager {
 			if !any_align && ind.distribution_equal_distance_horizontal.is_none() && ind.distribution_equal_distance_vertical.is_none() {
 				let text = format!("[{}] from [{}]", ind.target, ind.source);
 				let transform = DAffine2::from_translation(viewport - DVec2::new(0., 4.));
-				overlay_context.text(&text, COLOR_OVERLAY_WHITE, Some(COLOR_OVERLAY_LABEL_BACKGROUND), transform, 4., [Pivot::Start, Pivot::End]);
+				overlay_context.text(&text, COLOR_OVERLAY_WHITE, Some(COLOR_OVERLAY_BLACK_75), transform, 4., [Pivot::Start, Pivot::End]);
 				overlay_context.square(viewport, Some(4.), Some(COLOR_OVERLAY_BLUE), Some(COLOR_OVERLAY_BLUE));
 			}
 		}

editor/src/messages/tool/tool_message.rs

@@ -87,6 +87,7 @@ pub enum ToolMessage {
 	SelectRandomWorkingColor {
 		primary: bool,
 	},
+	ToggleSelectVsPath,
 	SwapColors,
 	Undo,
 	UpdateCursor,

editor/src/messages/tool/tool_message_handler.rs

@@ -284,6 +284,16 @@ impl MessageHandler<ToolMessage, ToolMessageContext<'_>> for ToolMessageHandler
 
 				document_data.update_working_colors(responses); // TODO: Make this an event
 			}
+			ToolMessage::ToggleSelectVsPath => {
+				// If we have the select tool active, toggle to the path tool and vice versa
+				let tool_data = &mut self.tool_state.tool_data;
+				let active_tool_type = tool_data.active_tool_type;
+				if active_tool_type == ToolType::Select {
+					responses.add(ToolMessage::ActivateTool { tool_type: ToolType::Path });
+				} else {
+					responses.add(ToolMessage::ActivateTool { tool_type: ToolType::Select });
+				}
+			}
 			ToolMessage::SwapColors => {
 				let document_data = &mut self.tool_state.document_tool_data;
 
@@ -359,9 +369,12 @@ impl MessageHandler<ToolMessage, ToolMessageContext<'_>> for ToolMessageHandler
 
 			ActivateToolBrush,
 
+			ToggleSelectVsPath,
+
 			SelectRandomWorkingColor,
 			ResetColors,
 			SwapColors,
+
 			Undo,
 		);
 		list.extend(self.tool_state.tool_data.active_tool().actions());