Add overlays showing each path's start, direction, index, and flows

editor/src/consts.rs

@@ -114,6 +114,26 @@ pub const SEGMENT_OVERLAY_SIZE: f64 = 10.;
 pub const SEGMENT_SELECTED_THICKNESS: f64 = 3.;
 pub const HANDLE_LENGTH_FACTOR: f64 = 0.5;
 
+// PATH DIRECTION OVERLAYS
+// Paths shorter than this on screen get no direction markers
+pub const PATH_MARKERS_MIN_LENGTH: f64 = 24.;
+// From an end anchor's center to the middle of the marker beside it
+pub const PATH_END_MARKER_DISTANCE: f64 = 7.;
+pub const PATH_END_MARKER_SIZE: f64 = 9.;
+// Between arrows, stretched or squeezed slightly so a whole number of them fit evenly along each path
+pub const PATH_DIRECTION_ARROW_SPACING: f64 = 15.625;
+pub const PATH_DIRECTION_CHEVRON_SIZE: f64 = 8.;
+// How far to the right of the path its harpoons' shafts sit, apart from the path itself
+pub const PATH_DIRECTION_HARPOON_OFFSET: f64 = 3.;
+// In viewport pixels, far finer than the arrows need to sit evenly
+pub const PATH_DIRECTION_ARC_LENGTH_ACCURACY: f64 = 0.1;
+pub const PATH_INDEX_LABEL_OFFSET: f64 = 14.;
+pub const POINT_INDEX_LABEL_OFFSET: f64 = 12.;
+// Between a path's start anchor's point index and its path index, side by side
+pub const INDEX_LABEL_GAP: f64 = 8.;
+pub const PATH_FLOW_JOIN_TICK_LENGTH: f64 = 18.;
+pub const PATH_FLOW_JOIN_TICK_THICKNESS: f64 = 2.;
+
 // GRADIENT TOOL
 pub const GRADIENT_MIDPOINT_DIAMOND_RADIUS: f64 = 4.;
 pub const GRADIENT_MIDPOINT_MIN: f64 = 0.01;
@@ -161,6 +181,7 @@ pub const COLOR_OVERLAY_GREEN: &str = "#63ce63";
 pub const COLOR_OVERLAY_GREEN_25: &str = "#63ce6340";
 pub const COLOR_OVERLAY_RED: &str = "#ef5454";
 pub const COLOR_OVERLAY_RED_25: &str = "#ef545440";
+pub const COLOR_OVERLAY_MAGENTA: &str = "#ba57bc";
 pub const COLOR_OVERLAY_GRAY: &str = "#cccccc";
 pub const COLOR_OVERLAY_GRAY_25: &str = "#cccccc40";
 pub const COLOR_OVERLAY_WHITE: &str = "#ffffff";

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

@@ -1578,6 +1578,10 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 						responses.add(PortfolioMessage::UpdateDocumentWidgets);
 					}
 					OverlaysType::Handles => visibility_settings.handles = visible,
+					OverlaysType::PointIndex => visibility_settings.point_index = visible,
+					OverlaysType::PathEnds => visibility_settings.path_ends = visible,
+					OverlaysType::PathIndex => visibility_settings.path_index = visible,
+					OverlaysType::PathDirection => visibility_settings.path_direction = visible,
 				}
 
 				responses.add(EventMessage::ToolAbort);
@@ -3525,8 +3529,10 @@ impl DocumentMessageHandler {
 	fn overlays_options(&self) -> Vec<LayoutGroup> {
 		let settings = &self.overlays_visibility_settings;
 
-		let checkbox = |name: &str, overlays_type: OverlaysType, checked: bool, disabled: bool| {
+		// Without a description, a tooltip would only repeat the label beside the checkbox
+		let checkbox = |name: &str, overlays_type: OverlaysType, checked: bool, disabled: bool, description: &str| {
 			let checkbox_id = CheckboxId::new();
+			let tooltip_label = if description.is_empty() { "" } else { name };
 			vec![
 				CheckboxInput::new(checked)
 					.disabled(disabled)
@@ -3537,31 +3543,51 @@ impl DocumentMessageHandler {
 						}
 						.into()
 					})
+					.tooltip_label(tooltip_label)
+					.tooltip_description(description)
 					.for_label(checkbox_id)
 					.widget_instance(),
-				TextLabel::new(name).disabled(disabled).for_checkbox(checkbox_id).widget_instance(),
+				TextLabel::new(name)
+					.disabled(disabled)
+					.tooltip_label(tooltip_label)
+					.tooltip_description(description)
+					.for_checkbox(checkbox_id)
+					.widget_instance(),
 			]
 		};
 
+		let path_ends_description = "
+			Marks where each path starts and ends, and where its path flows join.\n\
+			\n\
+			Chevron: the start, pointing the way the path sets out.\n\
+			Bar: the end, just before its last anchor. On a closed path, this is where it arrives back at its start.\n\
+			Thick tick: an anchor where the path passes from one path flow into the next.
+		"
+		.trim();
+
 		let left = [
 			vec![TextLabel::new("General").widget_instance()],
-			checkbox("Artboard Name", OverlaysType::ArtboardName, settings.artboard_name, false),
-			checkbox("G/R/S Measurement", OverlaysType::TransformMeasurement, settings.transform_measurement, false),
+			checkbox("Artboard Name", OverlaysType::ArtboardName, settings.artboard_name, false, ""),
+			checkbox("G/R/S Measurement", OverlaysType::TransformMeasurement, settings.transform_measurement, false, ""),
 			vec![TextLabel::new("Pen & Path Tools").widget_instance()],
-			checkbox("Path", OverlaysType::Path, settings.path, false),
-			checkbox("Anchors", OverlaysType::Anchors, settings.anchors, false),
-			checkbox("Handles", OverlaysType::Handles, settings.handles, !settings.anchors),
+			checkbox("Path", OverlaysType::Path, settings.path, false, ""),
+			checkbox("Path Ends", OverlaysType::PathEnds, settings.path_ends, !settings.anchors, path_ends_description),
+			checkbox("Anchors", OverlaysType::Anchors, settings.anchors, false, ""),
+			checkbox("Handles", OverlaysType::Handles, settings.handles, !settings.anchors, ""),
+			checkbox("Point Index", OverlaysType::PointIndex, settings.point_index, !settings.anchors, ""),
+			checkbox("Path Index", OverlaysType::PathIndex, settings.path_index, !settings.anchors, ""),
+			checkbox("Path Direction", OverlaysType::PathDirection, settings.path_direction, !settings.anchors, ""),
 		];
 		let right = [
 			vec![TextLabel::new("Select Tool").widget_instance()],
-			checkbox("Quick Measurement", OverlaysType::QuickMeasurement, settings.quick_measurement, false),
-			checkbox("Transform Cage", OverlaysType::TransformCage, settings.transform_cage, false),
-			checkbox("Transform Dial", OverlaysType::CompassRose, settings.compass_rose, false),
-			checkbox("Transform Pivot", OverlaysType::Pivot, settings.pivot, false),
-			checkbox("Transform Origin", OverlaysType::Origin, settings.origin, false),
-			checkbox("Hover Outline", OverlaysType::HoverOutline, settings.hover_outline, false),
-			checkbox("Selection Outline", OverlaysType::SelectionOutline, settings.selection_outline, false),
-			checkbox("Layer Origin", OverlaysType::LayerOriginCross, settings.layer_origin_cross, false),
+			checkbox("Quick Measurement", OverlaysType::QuickMeasurement, settings.quick_measurement, false, ""),
+			checkbox("Transform Cage", OverlaysType::TransformCage, settings.transform_cage, false, ""),
+			checkbox("Transform Dial", OverlaysType::CompassRose, settings.compass_rose, false, ""),
+			checkbox("Transform Pivot", OverlaysType::Pivot, settings.pivot, false, ""),
+			checkbox("Transform Origin", OverlaysType::Origin, settings.origin, false, ""),
+			checkbox("Hover Outline", OverlaysType::HoverOutline, settings.hover_outline, false, ""),
+			checkbox("Selection Outline", OverlaysType::SelectionOutline, settings.selection_outline, false, ""),
+			checkbox("Layer Origin", OverlaysType::LayerOriginCross, settings.layer_origin_cross, false, ""),
 		];
 
 		vec![