jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign the pivot overlay to a yellow crosshair

This commit is contained in:
Keavon Chambers 2023-12-30 14:51:42 -08:00
parent 134c10b543
commit 1af6252f2d
4 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
editor/src/consts.rs
View File

@ -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";

1
editor/src/messages/portfolio/document/node_graph/node_graph_message_handler/node_properties.rs
View File

@ -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,

44
editor/src/messages/portfolio/document/overlays/utility_types.rs
View File

@ -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<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();
}
}

4
editor/src/messages/tool/common_functionality/pivot.rs
View File

@ -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()
}
}