Add major/minor grid lines to grids popover

editor/src/consts.rs

@@ -146,9 +146,11 @@ 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_DARK: &str = "#555555";
 pub const COLOR_OVERLAY_GRAY_25: &str = "#cccccc40";
 pub const COLOR_OVERLAY_WHITE: &str = "#ffffff";
 pub const COLOR_OVERLAY_BLACK_75: &str = "#000000bf";
+pub const COLOR_OVERLAY_TRANSPARENT: &str = "#00000000";
 
 // DOCUMENT
 pub const FILE_EXTENSION: &str = "graphite";

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

@@ -295,6 +295,70 @@ impl OverlayContext {
 		self.end_dpi_aware_transform();
 	}
 
+	pub fn pixel_snapped_dashed_line(&mut self, start: DVec2, end: DVec2, color: Option<&str>, thickness: Option<f64>, dash_width: Option<f64>, dash_gap_width: Option<f64>, dash_offset: Option<f64>) {
+		// Check if the line is horizontal or vertical
+		let is_horizontal = (start.y - end.y).abs() < f64::EPSILON;
+		let is_vertical = (start.x - end.x).abs() < f64::EPSILON;
+
+		if !is_horizontal && !is_vertical {
+			// Fall back to regular dashed line for diagonal lines
+			self.dashed_line(start, end, color, thickness, dash_width, dash_gap_width, dash_offset);
+			return;
+		}
+
+		self.start_dpi_aware_transform();
+
+		// Set the dash pattern
+		if let Some(dash_width) = dash_width {
+			let dash_gap_width = dash_gap_width.unwrap_or(1.);
+			let array = js_sys::Array::new();
+			array.push(&JsValue::from(dash_width));
+			array.push(&JsValue::from(dash_gap_width));
+
+			if let Some(dash_offset) = dash_offset {
+				if dash_offset != 0. {
+					self.render_context.set_line_dash_offset(dash_offset);
+				}
+			}
+
+			self.render_context
+				.set_line_dash(&JsValue::from(array))
+				.map_err(|error| log::warn!("Error drawing dashed line: {:?}", error))
+				.ok();
+		}
+
+		let (draw_start, draw_end) = if is_horizontal {
+			// For horizontal lines, snap to the pixel grid and offset by 0.5 for crisp lines
+			let y = start.y.round() - 0.5;
+			(DVec2::new(start.x, y), DVec2::new(end.x, y))
+		} else {
+			// For vertical lines, snap to the pixel grid and offset by 0.5 for crisp lines
+			let x = start.x.round() - 0.5;
+			(DVec2::new(x, start.y), DVec2::new(x, end.y))
+		};
+
+		self.render_context.begin_path();
+		self.render_context.move_to(draw_start.x, draw_start.y);
+		self.render_context.line_to(draw_end.x, draw_end.y);
+		self.render_context.set_line_width(thickness.unwrap_or(1.));
+		self.render_context.set_stroke_style_str(color.unwrap_or(COLOR_OVERLAY_BLUE));
+		self.render_context.stroke();
+		self.render_context.set_line_width(1.);
+
+		// Reset the dash pattern back to solid
+		if dash_width.is_some() {
+			self.render_context
+				.set_line_dash(&JsValue::from(js_sys::Array::new()))
+				.map_err(|error| log::warn!("Error drawing dashed line: {:?}", error))
+				.ok();
+		}
+		if dash_offset.is_some() && dash_offset != Some(0.) {
+			self.render_context.set_line_dash_offset(0.);
+		}
+
+		self.end_dpi_aware_transform();
+	}
+
 	#[allow(clippy::too_many_arguments)]
 	pub fn dashed_ellipse(
 		&mut self,

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

@@ -256,6 +256,12 @@ impl OverlayContext {
 		self.internal().dashed_line(start, end, color, thickness, dash_width, dash_gap_width, dash_offset);
 	}
 
+	/// Creates a dashed line with pixel-perfect snapping for crisp rendering
+	#[allow(clippy::too_many_arguments)]
+	pub fn pixel_snapped_dashed_line(&mut self, start: DVec2, end: DVec2, color: Option<&str>, thickness: Option<f64>, dash_width: Option<f64>, dash_gap_width: Option<f64>, dash_offset: Option<f64>) {
+		self.internal().pixel_snapped_dashed_line(start, end, color, thickness, dash_width, dash_gap_width, dash_offset);
+	}
+
 	pub fn hover_manipulator_handle(&mut self, position: DVec2, selected: bool) {
 		self.internal().hover_manipulator_handle(position, selected);
 	}
@@ -540,6 +546,79 @@ impl OverlayContextInternal {
 		self.scene.stroke(&stroke, transform, Self::parse_color(color.unwrap_or(COLOR_OVERLAY_BLUE)), None, &path);
 	}
 
+	/// Creates a dashed line with pixel-perfect snapping for crisp rendering
+	/// Each dash segment is individually pixel-aligned while maintaining accuracy to input FP values
+	#[allow(clippy::too_many_arguments)]
+	fn pixel_snapped_dashed_line(&mut self, start: DVec2, end: DVec2, color: Option<&str>, thickness: Option<f64>, dash_width: Option<f64>, dash_gap_width: Option<f64>, dash_offset: Option<f64>) {
+		let transform = self.get_transform();
+		let thickness = thickness.unwrap_or(1.0).round().max(1.0);
+
+		// If no dashing is specified, fall back to regular pixel-snapped line
+		let dash_width = match dash_width {
+			Some(width) => width,
+			None => {
+				let start = start.round() - DVec2::splat(0.5);
+				let end = end.round() - DVec2::splat(0.5);
+
+				let mut path = BezPath::new();
+				path.move_to(kurbo::Point::new(start.x, start.y));
+				path.line_to(kurbo::Point::new(end.x, end.y));
+
+				let stroke = kurbo::Stroke::new(thickness);
+				self.scene.stroke(&stroke, transform, Self::parse_color(color.unwrap_or(COLOR_OVERLAY_BLUE)), None, &path);
+				return;
+			}
+		};
+
+		let dash_gap = dash_gap_width.unwrap_or(1.0);
+		let dash_offset = dash_offset.unwrap_or(0.0);
+
+		// Calculate the line vector and length
+		let line_vec = end - start;
+		let line_length = line_vec.length();
+
+		if line_length < 0.001 {
+			return; // Line too short to render
+		}
+
+		let line_unit = line_vec / line_length;
+
+		// Calculate dash pattern cycle length
+		let dash_cycle = dash_width + dash_gap;
+		if dash_cycle <= 0.0 {
+			return;
+		}
+
+		let mut path = BezPath::new();
+		let mut current_distance = -dash_offset.rem_euclid(dash_cycle);
+
+		while current_distance < line_length {
+			let dash_start_distance = current_distance.max(0.0);
+			let dash_end_distance = (current_distance + dash_width).min(line_length);
+
+			if dash_start_distance < dash_end_distance {
+				// Calculate actual positions along the line
+				let dash_start_pos = start + line_unit * dash_start_distance;
+				let dash_end_pos = start + line_unit * dash_end_distance;
+
+				// Snap each dash segment to pixel boundaries
+				let snapped_start = dash_start_pos.round() - DVec2::splat(0.5);
+				let snapped_end = dash_end_pos.round() - DVec2::splat(0.5);
+
+				// Only add the dash if it has meaningful length after snapping
+				if (snapped_end - snapped_start).length() >= 0.5 {
+					path.move_to(kurbo::Point::new(snapped_start.x, snapped_start.y));
+					path.line_to(kurbo::Point::new(snapped_end.x, snapped_end.y));
+				}
+			}
+
+			current_distance += dash_cycle;
+		}
+
+		let stroke = kurbo::Stroke::new(thickness);
+		self.scene.stroke(&stroke, transform, Self::parse_color(color.unwrap_or(COLOR_OVERLAY_BLUE)), None, &path);
+	}
+
 	fn manipulator_handle(&mut self, position: DVec2, selected: bool, color: Option<&str>) {
 		let transform = self.get_transform();
 		let position = position.round() - DVec2::splat(0.5);

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

@@ -1,5 +1,5 @@
-use crate::consts::COLOR_OVERLAY_GRAY;
-use glam::DVec2;
+use crate::consts::COLOR_OVERLAY_GRAY_DARK;
+use glam::{DVec2, UVec2, UVec3};
 use graphene_std::raster::Color;
 use std::fmt;
 
@@ -213,10 +213,15 @@ pub struct GridSnapping {
 	pub origin: DVec2,
 	pub grid_type: GridType,
 	pub rectangular_spacing: DVec2,
+	pub rectangular_major_interval: UVec2,
 	pub isometric_y_spacing: f64,
 	pub isometric_angle_a: f64,
 	pub isometric_angle_b: f64,
+	/// X is the major interval along the X axis, Y is the major interval along the B axis, Z is the major interval along the A axis.
+	pub isometric_major_interval: UVec3,
 	pub grid_color: Color,
+	pub grid_color_minor: Color,
+	pub major_is_thick: bool,
 	pub dot_display: bool,
 }
 
@@ -226,25 +231,30 @@ impl Default for GridSnapping {
 			origin: DVec2::ZERO,
 			grid_type: Default::default(),
 			rectangular_spacing: DVec2::ONE,
+			rectangular_major_interval: UVec2::ONE,
 			isometric_y_spacing: 1.,
 			isometric_angle_a: 30.,
 			isometric_angle_b: 30.,
-			grid_color: Color::from_rgb_str(COLOR_OVERLAY_GRAY.strip_prefix('#').unwrap()).unwrap(),
+			isometric_major_interval: UVec3::ONE,
+			grid_color: Color::from_rgb_str(COLOR_OVERLAY_GRAY_DARK.strip_prefix('#').unwrap()).unwrap().with_alpha(0.4),
+			grid_color_minor: Color::from_rgb_str(COLOR_OVERLAY_GRAY_DARK.strip_prefix('#').unwrap()).unwrap().with_alpha(0.2),
+			major_is_thick: false,
 			dot_display: false,
 		}
 	}
 }
 
 impl GridSnapping {
 	// Double grid size until it takes up at least 10px.
-	pub fn compute_rectangle_spacing(mut size: DVec2, navigation: &PTZ) -> Option<DVec2> {
+	pub fn compute_rectangle_spacing(mut size: DVec2, major_interval: &UVec2, navigation: &PTZ) -> Option<DVec2> {
 		let mut iterations = 0;
 		size = size.abs();
 		while (size * navigation.zoom()).cmplt(DVec2::splat(10.)).any() {
 			if iterations > 100 {
 				return None;
 			}
-			size *= 2.;
+			size.x *= if iterations == 0 { major_interval.x as f64 } else { 2. };
+			size.y *= if iterations == 0 { major_interval.y as f64 } else { 2. };
 			iterations += 1;
 		}
 		Some(size)
@@ -264,6 +274,13 @@ impl GridSnapping {
 		}
 		Some(multiplier)
 	}
+
+	pub fn has_minor_lines(&self) -> bool {
+		match self.grid_type {
+			GridType::Rectangular { .. } => self.rectangular_major_interval.x > 1 || self.rectangular_major_interval.y > 1,
+			GridType::Isometric { .. } => self.isometric_major_interval.x > 1 || self.isometric_major_interval.z > 1 || self.isometric_major_interval.y > 1,
+		}
+	}
 }
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]

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

@@ -1,6 +1,6 @@
 use super::*;
 use crate::messages::portfolio::document::utility_types::misc::{GridSnapTarget, GridSnapping, GridType, SnapTarget};
-use glam::DVec2;
+use glam::{DVec2, UVec2};
 use graphene_std::renderer::Quad;
 
 struct Line {
@@ -18,7 +18,7 @@ impl GridSnapper {
 		let document = snap_data.document;
 		let mut lines = Vec::new();
 
-		let Some(spacing) = GridSnapping::compute_rectangle_spacing(spacing, &document.document_ptz) else {
+		let Some(spacing) = GridSnapping::compute_rectangle_spacing(spacing, &UVec2::ONE, &document.document_ptz) else {
 			return lines;
 		};
 		let origin = document.snapping_state.grid.origin;
@@ -90,7 +90,7 @@ impl GridSnapper {
 
 	fn get_snap_lines(&self, document_point: DVec2, snap_data: &mut SnapData) -> Vec<Line> {
 		match snap_data.document.snapping_state.grid.grid_type {
-			GridType::Rectangular { spacing } => self.get_snap_lines_rectangular(document_point, snap_data, spacing),
+			GridType::Rectangular { spacing, .. } => self.get_snap_lines_rectangular(document_point, snap_data, spacing),
 			GridType::Isometric { y_axis_spacing, angle_a, angle_b } => self.get_snap_lines_isometric(document_point, snap_data, y_axis_spacing, angle_a, angle_b),
 		}
 	}

frontend/src/utility-functions/icons.ts

@@ -11,6 +11,7 @@ import Checkmark from "@graphite-frontend/assets/icon-12px-solid/checkmark.svg";
 import Clipped from "@graphite-frontend/assets/icon-12px-solid/clipped.svg";
 import CloseX from "@graphite-frontend/assets/icon-12px-solid/close-x.svg";
 import Delay from "@graphite-frontend/assets/icon-12px-solid/delay.svg";
+import DotLarge from "@graphite-frontend/assets/icon-12px-solid/dot-large.svg";
 import Dot from "@graphite-frontend/assets/icon-12px-solid/dot.svg";
 import DropdownArrow from "@graphite-frontend/assets/icon-12px-solid/dropdown-arrow.svg";
 import Edit12px from "@graphite-frontend/assets/icon-12px-solid/edit-12px.svg";
@@ -58,6 +59,7 @@ const SOLID_12PX = {
 	Clipped: { svg: Clipped, size: 12 },
 	CloseX: { svg: CloseX, size: 12 },
 	Delay: { svg: Delay, size: 12 },
+	DotLarge: { svg: DotLarge, size: 12 },
 	Dot: { svg: Dot, size: 12 },
 	DropdownArrow: { svg: DropdownArrow, size: 12 },
 	Edit12px: { svg: Edit12px, size: 12 },