From 1af6252f2d2c705c77da94a685ba0e06ea8ee606 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Sat, 30 Dec 2023 14:51:42 -0800 Subject: [PATCH] Redesign the pivot overlay to a yellow crosshair --- editor/src/consts.rs | 12 ++--- .../node_properties.rs | 1 - .../document/overlays/utility_types.rs | 44 +++++++++++-------- .../tool/common_functionality/pivot.rs | 4 +- 4 files changed, 34 insertions(+), 27 deletions(-) diff --git a/editor/src/consts.rs b/editor/src/consts.rs index 40c1ebfd..94c00931 100644 --- a/editor/src/consts.rs +++ b/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_OUTER: f64 = 9.; -pub const PIVOT_INNER: f64 = 3.; +pub const PIVOT_CROSSHAIR_THICKNESS: f64 = 1.; +pub const PIVOT_CROSSHAIR_LENGTH: f64 = 9.; +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"; diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs index 54075d63..1c2a5a85 100644 --- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs +++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs @@ -697,7 +697,6 @@ fn gradient_row(row: &mut Vec, positions: &Vec<(f64, Option fn gradient_positions(rows: &mut Vec, 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, diff --git a/editor/src/messages/portfolio/document/overlays/utility_types.rs b/editor/src/messages/portfolio/document/overlays/utility_types.rs index a3cb59a1..90dbc5a9 100644 --- a/editor/src/messages/portfolio/document/overlays/utility_types.rs +++ b/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.set_fill_style(&wasm_bindgen::JsValue::from_str(&"white")); + 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(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.set_fill_style(&wasm_bindgen::JsValue::from_str(&Self::accent_hex())); - self.render_context.fill(); + self.render_context.move_to(x, y - crosshair_radius); + self.render_context.line_to(x, y + crosshair_radius); + self.render_context.stroke(); } pub fn outline<'a>(&mut self, subpaths: impl Iterator>, 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(); } } diff --git a/editor/src/messages/tool/common_functionality/pivot.rs b/editor/src/messages/tool/common_functionality/pivot.rs index 859be5c4..d10feb48 100644 --- a/editor/src/messages/tool/common_functionality/pivot.rs +++ b/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() } }