Add the compass rose translation gizmo to the transform cage (#2277)

* Rotate pivot and squares to orient along quad

* Add compass rose UI

* Add compass rose functionality

* Refactor code and polish things

* Fix UI

* Fix crash

* More polish

* Rework arrow to use different selection method

* Adjust for rotated layer and show when within cage

* Don't show when other modes are possible

* Fix glitchy compass

* fixes

* fixes

* WIP separate pivot and compass rose (not compiling)

* Complete file moving fixes

* Code review

---------

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

Author: mTvare6

editor/Cargo.toml

@@ -2,7 +2,7 @@
 name = "graphite-editor"
 publish = false
 version = "0.0.0"
-rust-version = "1.79"
+rust-version = "1.82"
 authors = ["Graphite Authors <[email protected]>"]
 edition = "2021"
 readme = "../README.md"

editor/src/consts.rs

@@ -54,10 +54,20 @@ pub const DEFAULT_STROKE_WIDTH: f64 = 2.;
 pub const SELECTION_TOLERANCE: f64 = 5.;
 pub const DRAG_DIRECTION_MODE_DETERMINATION_THRESHOLD: f64 = 15.;
 pub const SELECTION_DRAG_ANGLE: f64 = 90.;
+
+// PIVOT
 pub const PIVOT_CROSSHAIR_THICKNESS: f64 = 1.;
 pub const PIVOT_CROSSHAIR_LENGTH: f64 = 9.;
 pub const PIVOT_DIAMETER: f64 = 5.;
 
+// COMPASS ROSE
+pub const COMPASS_ROSE_RING_INNER_DIAMETER: f64 = 13.;
+pub const COMPASS_ROSE_MAIN_RING_DIAMETER: f64 = 15.;
+pub const COMPASS_ROSE_HOVER_RING_DIAMETER: f64 = 23.;
+pub const COMPASS_ROSE_ARROW_SIZE: f64 = 5.;
+// Angle to either side of the compass arrows where they are targetted by the cursor (in degrees, must be less than 45°)
+pub const COMPASS_ROSE_ARROW_CLICK_TARGET_ANGLE: f64 = 20.;
+
 // TRANSFORM OVERLAY
 pub const ANGLE_MEASURE_RADIUS_FACTOR: f64 = 0.04;
 pub const ARC_MEASURE_RADIUS_FACTOR_RANGE: (f64, f64) = (0.05, 0.15);
@@ -108,7 +118,6 @@ pub const COLOR_OVERLAY_RED: &str = "#ef5454";
 pub const COLOR_OVERLAY_GRAY: &str = "#cccccc";
 pub const COLOR_OVERLAY_WHITE: &str = "#ffffff";
 pub const COLOR_OVERLAY_LABEL_BACKGROUND: &str = "#000000cc";
-pub const COLOR_OVERLAY_TRANSPARENT: &str = "#ffffff00";
 
 // DOCUMENT
 pub const DEFAULT_DOCUMENT_NAME: &str = "Untitled Document";

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

@@ -1,6 +1,7 @@
 use super::utility_functions::overlay_canvas_context;
 use crate::consts::{
-	COLOR_OVERLAY_BLUE, COLOR_OVERLAY_TRANSPARENT, COLOR_OVERLAY_WHITE, COLOR_OVERLAY_YELLOW, MANIPULATOR_GROUP_MARKER_SIZE, PIVOT_CROSSHAIR_LENGTH, PIVOT_CROSSHAIR_THICKNESS, PIVOT_DIAMETER,
+	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,
 };
 use crate::messages::prelude::Message;
 
@@ -9,7 +10,7 @@ use graphene_core::renderer::Quad;
 use graphene_std::vector::{PointId, SegmentId, VectorData};
 
 use core::borrow::Borrow;
-use core::f64::consts::TAU;
+use core::f64::consts::{FRAC_PI_2, TAU};
 use glam::{DAffine2, DVec2};
 use std::collections::HashMap;
 use wasm_bindgen::JsValue;
@@ -294,9 +295,15 @@ impl OverlayContext {
 
 	pub fn draw_scale(&mut self, start: DVec2, scale: f64, radius: f64, text: &str) {
 		let sign = scale.signum();
+		let mut fill_color = graphene_std::Color::from_rgb_str(crate::consts::COLOR_OVERLAY_WHITE.strip_prefix('#').unwrap())
+			.unwrap()
+			.with_alpha(0.05)
+			.rgba_hex();
+		fill_color.insert(0, '#');
+		let fill_color = Some(fill_color.as_str());
 		self.line(start + DVec2::X * radius * sign, start + DVec2::X * (radius * scale), None);
-		self.circle(start, radius, Some(COLOR_OVERLAY_TRANSPARENT), None);
-		self.circle(start, radius * scale.abs(), Some(COLOR_OVERLAY_TRANSPARENT), None);
+		self.circle(start, radius, fill_color, None);
+		self.circle(start, radius * scale.abs(), fill_color, None);
 		self.text(
 			text,
 			COLOR_OVERLAY_BLUE,
@@ -307,7 +314,77 @@ impl OverlayContext {
 		)
 	}
 
-	pub fn pivot(&mut self, position: DVec2) {
+	pub fn compass_rose(&mut self, compass_center: DVec2, angle: f64, show_compass_with_hover_ring: Option<bool>) {
+		const HOVER_RING_OUTER_RADIUS: f64 = COMPASS_ROSE_HOVER_RING_DIAMETER / 2.;
+		const MAIN_RING_OUTER_RADIUS: f64 = COMPASS_ROSE_MAIN_RING_DIAMETER / 2.;
+		const MAIN_RING_INNER_RADIUS: f64 = COMPASS_ROSE_RING_INNER_DIAMETER / 2.;
+		const ARROW_RADIUS: f64 = COMPASS_ROSE_ARROW_SIZE / 2.;
+		const HOVER_RING_STROKE_WIDTH: f64 = HOVER_RING_OUTER_RADIUS - MAIN_RING_INNER_RADIUS;
+		const HOVER_RING_CENTERLINE_RADIUS: f64 = (HOVER_RING_OUTER_RADIUS + MAIN_RING_INNER_RADIUS) / 2.;
+		const MAIN_RING_STROKE_WIDTH: f64 = MAIN_RING_OUTER_RADIUS - MAIN_RING_INNER_RADIUS;
+		const MAIN_RING_CENTERLINE_RADIUS: f64 = (MAIN_RING_OUTER_RADIUS + MAIN_RING_INNER_RADIUS) / 2.;
+
+		let Some(show_hover_ring) = show_compass_with_hover_ring else { return };
+
+		self.start_dpi_aware_transform();
+
+		let center = compass_center.round() - DVec2::splat(0.5);
+
+		// Save the old line width to restore it later
+		let old_line_width = self.render_context.line_width();
+
+		// Hover ring
+		if show_hover_ring {
+			let mut fill_color = graphene_std::Color::from_rgb_str(COLOR_OVERLAY_BLUE.strip_prefix('#').unwrap()).unwrap().with_alpha(0.5).rgba_hex();
+			fill_color.insert(0, '#');
+
+			self.render_context.set_line_width(HOVER_RING_STROKE_WIDTH);
+			self.render_context.begin_path();
+			self.render_context.arc(center.x, center.y, HOVER_RING_CENTERLINE_RADIUS, 0., TAU).expect("Failed to draw hover ring");
+			self.render_context.set_stroke_style_str(&fill_color);
+			self.render_context.stroke();
+		}
+
+		// Arrows
+		self.render_context.set_line_width(0.01);
+		for i in 0..4 {
+			let direction = DVec2::from_angle(i as f64 * FRAC_PI_2 + angle);
+			let color = if i % 2 == 0 { COLOR_OVERLAY_RED } else { COLOR_OVERLAY_GREEN };
+
+			let tip = center + direction * HOVER_RING_OUTER_RADIUS;
+			let base = center + direction * (MAIN_RING_INNER_RADIUS + MAIN_RING_OUTER_RADIUS) / 2.;
+
+			let r = (ARROW_RADIUS.powi(2) + MAIN_RING_INNER_RADIUS.powi(2)).sqrt();
+			let (cos, sin) = (MAIN_RING_INNER_RADIUS / r, ARROW_RADIUS / r);
+			let side1 = center + r * DVec2::new(cos * direction.x - sin * direction.y, sin * direction.x + direction.y * cos);
+			let side2 = center + r * DVec2::new(cos * direction.x + sin * direction.y, -sin * direction.x + direction.y * cos);
+
+			self.render_context.begin_path();
+			self.render_context.move_to(tip.x, tip.y);
+			self.render_context.line_to(side1.x, side1.y);
+			self.render_context.line_to(base.x, base.y);
+			self.render_context.line_to(side2.x, side2.y);
+			self.render_context.close_path();
+
+			self.render_context.set_fill_style_str(color);
+			self.render_context.fill();
+			self.render_context.set_stroke_style_str(color);
+			self.render_context.stroke();
+		}
+
+		// Main ring
+		self.render_context.set_line_width(MAIN_RING_STROKE_WIDTH);
+		self.render_context.begin_path();
+		self.render_context.arc(center.x, center.y, MAIN_RING_CENTERLINE_RADIUS, 0., TAU).expect("Failed to draw main ring");
+		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
+		self.render_context.stroke();
+
+		// Restore the old line width
+		self.render_context.set_line_width(old_line_width);
+	}
+
+	pub fn pivot(&mut self, position: DVec2, angle: f64) {
+		let uv = DVec2::from_angle(angle);
 		let (x, y) = (position.round() - DVec2::splat(0.5)).into();
 
 		self.start_dpi_aware_transform();
@@ -322,19 +399,19 @@ impl OverlayContext {
 		// Crosshair
 
 		// Round line caps add half the stroke width to the length on each end, so we subtract that here before halving to get the radius
-		let crosshair_radius = (PIVOT_CROSSHAIR_LENGTH - PIVOT_CROSSHAIR_THICKNESS) / 2.;
+		const CROSSHAIR_RADIUS: f64 = (PIVOT_CROSSHAIR_LENGTH - PIVOT_CROSSHAIR_THICKNESS) / 2.;
 
 		self.render_context.set_stroke_style_str(COLOR_OVERLAY_YELLOW);
 		self.render_context.set_line_cap("round");
 
 		self.render_context.begin_path();
-		self.render_context.move_to(x - crosshair_radius, y);
-		self.render_context.line_to(x + crosshair_radius, y);
+		self.render_context.move_to(x + CROSSHAIR_RADIUS * uv.x, y + CROSSHAIR_RADIUS * uv.y);
+		self.render_context.line_to(x - CROSSHAIR_RADIUS * uv.x, y - CROSSHAIR_RADIUS * uv.y);
 		self.render_context.stroke();
 
 		self.render_context.begin_path();
-		self.render_context.move_to(x, y - crosshair_radius);
-		self.render_context.line_to(x, y + crosshair_radius);
+		self.render_context.move_to(x - CROSSHAIR_RADIUS * uv.y, y + CROSSHAIR_RADIUS * uv.x);
+		self.render_context.line_to(x + CROSSHAIR_RADIUS * uv.y, y - CROSSHAIR_RADIUS * uv.x);
 		self.render_context.stroke();
 
 		self.render_context.set_line_cap("butt");

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

@@ -0,0 +1,85 @@
+use crate::consts::{COMPASS_ROSE_ARROW_CLICK_TARGET_ANGLE, COMPASS_ROSE_HOVER_RING_DIAMETER, COMPASS_ROSE_RING_INNER_DIAMETER};
+use crate::messages::prelude::DocumentMessageHandler;
+
+use glam::{DAffine2, DVec2};
+use std::f64::consts::FRAC_PI_2;
+
+#[derive(Clone, Default, Debug)]
+pub struct CompassRose {
+	compass_center: DVec2,
+}
+
+impl CompassRose {
+	pub fn refresh_transform(&mut self, document: &DocumentMessageHandler) {
+		let [min, max] = document.selected_visible_and_unlock_layers_bounding_box_viewport().unwrap_or([DVec2::ZERO, DVec2::ONE]);
+		self.compass_center = (DAffine2::from_translation(min) * DAffine2::from_scale(max - min)).transform_point2(DVec2::splat(0.5));
+	}
+
+	pub fn compass_rose_position(&self) -> DVec2 {
+		self.compass_center
+	}
+
+	pub fn compass_rose_state(&self, mouse: DVec2, angle: f64) -> CompassRoseState {
+		const COMPASS_ROSE_RING_INNER_RADIUS_SQUARED: f64 = (COMPASS_ROSE_RING_INNER_DIAMETER / 2.) * (COMPASS_ROSE_RING_INNER_DIAMETER / 2.);
+		const COMPASS_ROSE_HOVER_RING_RADIUS_SQUARED: f64 = (COMPASS_ROSE_HOVER_RING_DIAMETER / 2.) * (COMPASS_ROSE_HOVER_RING_DIAMETER / 2.);
+
+		let compass_distance_squared = mouse.distance_squared(self.compass_center);
+
+		if !(COMPASS_ROSE_RING_INNER_RADIUS_SQUARED..COMPASS_ROSE_HOVER_RING_RADIUS_SQUARED).contains(&compass_distance_squared) {
+			return CompassRoseState::None;
+		}
+
+		let angle = (mouse - self.compass_center).angle_to(DVec2::from_angle(angle)).abs();
+		let resolved_angle = (FRAC_PI_2 - angle).abs();
+		let angular_width = COMPASS_ROSE_ARROW_CLICK_TARGET_ANGLE.to_radians();
+
+		if resolved_angle < angular_width {
+			CompassRoseState::AxisY
+		} else if resolved_angle > (FRAC_PI_2 - angular_width) {
+			CompassRoseState::AxisX
+		} else {
+			CompassRoseState::Ring
+		}
+	}
+}
+
+#[derive(Clone, Debug, PartialEq)]
+pub enum CompassRoseState {
+	Ring,
+	AxisX,
+	AxisY,
+	None,
+}
+
+impl CompassRoseState {
+	pub fn can_grab(&self) -> bool {
+		matches!(self, Self::Ring | Self::AxisX | Self::AxisY)
+	}
+
+	pub fn is_ring(&self) -> bool {
+		matches!(self, Self::Ring)
+	}
+
+	pub fn axis_type(&self) -> Option<Axis> {
+		match self {
+			CompassRoseState::AxisX => Some(Axis::X),
+			CompassRoseState::AxisY => Some(Axis::Y),
+			CompassRoseState::Ring => Some(Axis::None),
+			_ => None,
+		}
+	}
+}
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash, Default)]
+pub enum Axis {
+	#[default]
+	None,
+	X,
+	Y,
+}
+
+impl Axis {
+	pub fn is_constraint(&self) -> bool {
+		matches!(self, Self::X | Self::Y)
+	}
+}

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

@@ -1,5 +1,6 @@
 pub mod auto_panning;
 pub mod color_selector;
+pub mod compass_rose;
 pub mod graph_modification_utils;
 pub mod measure;
 pub mod pivot;

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

@@ -83,10 +83,10 @@ impl Pivot {
 		}
 	}
 
-	pub fn update_pivot(&mut self, document: &DocumentMessageHandler, overlay_context: &mut OverlayContext) {
+	pub fn update_pivot(&mut self, document: &DocumentMessageHandler, overlay_context: &mut OverlayContext, angle: f64) {
 		self.recalculate_pivot(document);
 		if let Some(pivot) = self.pivot {
-			overlay_context.pivot(pivot);
+			overlay_context.pivot(pivot, angle);
 		}
 	}
 

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

@@ -1,6 +1,6 @@
 use crate::consts::{
-	BOUNDS_ROTATE_THRESHOLD, BOUNDS_SELECT_THRESHOLD, MAXIMUM_ALT_SCALE_FACTOR, MIN_LENGTH_FOR_CORNERS_VISIBILITY, MIN_LENGTH_FOR_MIDPOINT_VISIBILITY, MIN_LENGTH_FOR_RESIZE_TO_INCLUDE_INTERIOR,
-	SELECTION_DRAG_ANGLE,
+	BOUNDS_ROTATE_THRESHOLD, BOUNDS_SELECT_THRESHOLD, COLOR_OVERLAY_WHITE, MAXIMUM_ALT_SCALE_FACTOR, MIN_LENGTH_FOR_CORNERS_VISIBILITY, MIN_LENGTH_FOR_MIDPOINT_VISIBILITY,
+	MIN_LENGTH_FOR_RESIZE_TO_INCLUDE_INTERIOR, SELECTION_DRAG_ANGLE,
 };
 use crate::messages::frontend::utility_types::MouseCursorIcon;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
@@ -379,7 +379,10 @@ impl BoundingBoxManager {
 		// Draw the bounding box rectangle
 		overlay_context.quad(quad, None);
 
-		let mut draw_handle = |point: DVec2| overlay_context.square(point, Some(6.), None, None);
+		let mut draw_handle = |point: DVec2| {
+			let quad = DAffine2::from_angle_translation((quad.top_left() - quad.top_right()).to_angle(), point) * Quad::from_box([DVec2::splat(-3.), DVec2::splat(3.)]);
+			overlay_context.quad(quad, Some(COLOR_OVERLAY_WHITE));
+		};
 
 		// Draw the horizontal midpoint drag handles
 		if matches!(category, HandleDisplayCategory::Full | HandleDisplayCategory::Narrow | HandleDisplayCategory::ReducedLandscape) {