Redesign the pivot overlay to a yellow crosshair

editor/src/consts.rs

@@ -1,5 +1,3 @@
-use graphene_core::raster::color::Color;
-
 // Viewport
 pub const VIEWPORT_ZOOM_WHEEL_RATE: f64 = (1. / 600.) * 3.;
 pub const VIEWPORT_ZOOM_MOUSE_RATE: f64 = 1. / 400.;
@@ -46,9 +44,9 @@ pub const BIG_NUDGE_AMOUNT: f64 = 10.;
 // Select tool
 pub const SELECTION_TOLERANCE: f64 = 5.;
 pub const SELECTION_DRAG_ANGLE: f64 = 90.;
-pub const PIVOT_OUTER_OUTLINE_THICKNESS: f64 = 1.;
+pub const PIVOT_CROSSHAIR_THICKNESS: f64 = 1.;
-pub const PIVOT_OUTER: f64 = 9.;
+pub const PIVOT_CROSSHAIR_LENGTH: f64 = 9.;
-pub const PIVOT_INNER: f64 = 3.;
+pub const PIVOT_DIAMETER: f64 = 5.;
 
 // Transformation cage
 pub const BOUNDS_SELECT_THRESHOLD: f64 = 10.;
@@ -74,7 +72,9 @@ pub const ASYMPTOTIC_EFFECT: f64 = 0.5;
 pub const SCALE_EFFECT: f64 = 0.5;
 
 // Colors
-pub const COLOR_ACCENT: Color = Color::from_rgbf32_unchecked(0x00 as f32 / 255., 0xA8 as f32 / 255., 0xFF as f32 / 255.);
+pub const COLOR_OVERLAY_BLUE: &str = "#00a8ff";
+pub const COLOR_OVERLAY_YELLOW: &str = "#ffc848";
+pub const COLOR_OVERLAY_WHITE: &str = "#ffffff";
 
 // Fonts
 pub const DEFAULT_FONT_FAMILY: &str = "Cabin";

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs

@@ -697,7 +697,6 @@ fn gradient_row(row: &mut Vec<WidgetHolder>, positions: &Vec<(f64, Option<Color>
 
 fn gradient_positions(rows: &mut Vec<LayoutGroup>, document_node: &DocumentNode, name: &str, node_id: NodeId, input_index: usize) {
 	let mut widgets = vec![expose_widget(node_id, input_index, FrontendGraphDataType::General, document_node.inputs[input_index].is_exposed())];
-	widgets.push(Separator::new(SeparatorType::Unrelated).widget_holder());
 	if let NodeInput::Value {
 		tagged_value: TaggedValue::GradientPositions(gradient_positions),
 		exposed: false,

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

@@ -1,5 +1,5 @@
 use super::utility_functions::overlay_canvas_context;
-use crate::consts::{COLOR_ACCENT, MANIPULATOR_GROUP_MARKER_SIZE, PIVOT_INNER, PIVOT_OUTER};
+use crate::consts::{COLOR_OVERLAY_BLUE, COLOR_OVERLAY_WHITE, COLOR_OVERLAY_YELLOW, MANIPULATOR_GROUP_MARKER_SIZE, PIVOT_CROSSHAIR_LENGTH, PIVOT_CROSSHAIR_THICKNESS, PIVOT_DIAMETER};
 use crate::messages::prelude::Message;
 
 use bezier_rs::Subpath;
@@ -27,17 +27,13 @@ impl core::hash::Hash for OverlayContext {
 }
 
 impl OverlayContext {
-	fn accent_hex() -> String {
-		format!("#{}", COLOR_ACCENT.rgb_hex())
-	}
-
 	pub fn quad(&mut self, quad: Quad) {
 		self.render_context.begin_path();
 		self.render_context.move_to(quad.0[3].x.round(), quad.0[3].y.round());
 		for i in 0..4 {
 			self.render_context.line_to(quad.0[i].x.round(), quad.0[i].y.round());
 		}
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(&Self::accent_hex()));
+		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_BLUE));
 		self.render_context.stroke();
 	}
 
@@ -45,7 +41,7 @@ impl OverlayContext {
 		self.render_context.begin_path();
 		self.render_context.move_to(start.x.round(), start.y.round());
 		self.render_context.line_to(end.x.round(), end.y.round());
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(&Self::accent_hex()));
+		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_BLUE));
 		self.render_context.stroke();
 	}
 
@@ -56,10 +52,10 @@ impl OverlayContext {
 			.arc(position.x + 0.5, position.y + 0.5, MANIPULATOR_GROUP_MARKER_SIZE / 2., 0., PI * 2.)
 			.expect("draw circle");
 
-		let fill = if selected { Self::accent_hex() } else { "white".to_string() };
+		let fill = if selected { COLOR_OVERLAY_BLUE } else { COLOR_OVERLAY_WHITE };
 		self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(&fill));
 		self.render_context.fill();
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(&Self::accent_hex()));
+		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_BLUE));
 		self.render_context.stroke();
 	}
 
@@ -68,25 +64,37 @@ impl OverlayContext {
 		let corner = position - DVec2::splat(MANIPULATOR_GROUP_MARKER_SIZE) / 2.;
 		self.render_context
 			.rect(corner.x.round(), corner.y.round(), MANIPULATOR_GROUP_MARKER_SIZE, MANIPULATOR_GROUP_MARKER_SIZE);
-		let fill = if selected { Self::accent_hex() } else { "white".to_string() };
+		let fill = if selected { COLOR_OVERLAY_BLUE } else { COLOR_OVERLAY_WHITE };
 		self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(&fill));
 		self.render_context.fill();
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(&Self::accent_hex()));
+		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_BLUE));
 		self.render_context.stroke();
 	}
 
 	pub fn pivot(&mut self, pivot: DVec2) {
+		let x = pivot.x.round();
+		let y = pivot.y.round();
+
 		self.render_context.begin_path();
-		self.render_context.arc(pivot.x + 0.5, pivot.y + 0.5, PIVOT_OUTER / 2., 0., PI * 2.).expect("draw circle");
+		self.render_context.arc(x, y, PIVOT_DIAMETER / 2., 0., PI * 2.).expect("draw circle");
-		self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(&"white"));
+		self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_YELLOW));
 		self.render_context.fill();
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(&Self::accent_hex()));
+
+		// 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.;
+
+		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_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.stroke();
 
 		self.render_context.begin_path();
-		self.render_context.arc(pivot.x, pivot.y, PIVOT_INNER / 2., 0., PI * 2.).expect("draw circle");
+		self.render_context.move_to(x, y - crosshair_radius);
-		self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(&Self::accent_hex()));
+		self.render_context.line_to(x, y + crosshair_radius);
-		self.render_context.fill();
+		self.render_context.stroke();
 	}
 
 	pub fn outline<'a>(&mut self, subpaths: impl Iterator<Item = &'a Subpath<ManipulatorGroupId>>, transform: DAffine2) {
@@ -120,7 +128,7 @@ impl OverlayContext {
 			}
 		}
 
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(&Self::accent_hex()));
+		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_BLUE));
 		self.render_context.stroke();
 	}
 }

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

@@ -1,7 +1,7 @@
 //! Handler for the pivot overlay visible on the selected layer(s) whilst using the Select tool which controls the center of rotation/scale and origin of the layer.
 
 use super::graph_modification_utils;
-use crate::consts::PIVOT_OUTER;
+use crate::consts::PIVOT_DIAMETER;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
@@ -117,6 +117,6 @@ impl Pivot {
 
 	/// Answers if the pointer is currently positioned over the pivot.
 	pub fn is_over(&self, mouse: DVec2) -> bool {
-		self.pivot.filter(|&pivot| mouse.distance_squared(pivot) < (PIVOT_OUTER / 2.).powi(2)).is_some()
+		self.pivot.filter(|&pivot| mouse.distance_squared(pivot) < (PIVOT_DIAMETER / 2.).powi(2)).is_some()
 	}
 }