Add pivot type selection with Custom Pivot, Origin (Average Point), and Origin (Active Object) to the Select tool (#2730)

* add origin

* cleanup pivot

* a lot of stuff

* reset pivot

* fix transform with pivot issues

* fixes

* some more cleanup

* fixes

* finally works

* origin fixes

* fix spaces

* fix using dragged_layers

* simplify pivot logic

* fix bugs

* fix the final bug

* fix in select_tool

* fix updates

* some more refactors to fix misunderstanding and refactor

* add checkboxes

* fix labels

* fix stuff which broke at merge

* update

* cargo fmt

* fix serde crash

* fix pivot not updating on move

* fix pivot not becoming last active refernce

* fix redraw issues

* add: active pivot

* cargo fmt

* fix pivot showing up in default mode

* add: pivot pin

* fix: use pin icons

* cargo: cargo lock update?

* fix: use checkbox instead of Overlays

* refactor: add dot to path_tool

* add: active origins

* UI tweaks

* add: add all of the stuff for path tool

* remove: unused layer

* fix: pivot pinning and origin angle

* fix: pin only if moved in first place

* cargo: fmt

* fix: pivot use disabled method

* fix: remove redudant NoOp

* fix: 3 stuff

* fix: select from elsewhere

* fix: compass rose wobbling around

* add: move pivot on grab

* add: move pivot on nudge

* add: move pivot on Grab

* Code review and tooltips

* fixes

* fixes

* fixes

* fix: skipping artboard on bounds calculation

* fix: by default have origin

* Fix prior fix

---------

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

Author: mTvare6

Cargo.lock

@@ -61,6 +61,7 @@ pub const SELECTION_DRAG_ANGLE: f64 = 90.;
 pub const PIVOT_CROSSHAIR_THICKNESS: f64 = 1.;
 pub const PIVOT_CROSSHAIR_LENGTH: f64 = 9.;
 pub const PIVOT_DIAMETER: f64 = 5.;
+pub const DOWEL_PIN_RADIUS: f64 = 4.;
 
 // COMPASS ROSE
 pub const COMPASS_ROSE_RING_INNER_DIAMETER: f64 = 13.;
@@ -133,8 +134,8 @@ pub const SCALE_EFFECT: f64 = 0.5;
 
 // COLORS
 pub const COLOR_OVERLAY_BLUE: &str = "#00a8ff";
-pub const COLOR_OVERLAY_BLUE_50: &str = "rgba(0, 168, 255, 0.5)";
 pub const COLOR_OVERLAY_YELLOW: &str = "#ffc848";
+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";

editor/src/consts.rs

@@ -471,6 +471,8 @@ pub struct ReferencePointInput {
 
 	pub disabled: bool,
 
+	pub tooltip: String,
+
 	// Callbacks
 	#[serde(skip)]
 	#[derivative(Debug = "ignore", PartialEq = "ignore")]

editor/src/messages/layout/utility_types/widgets/input_widgets.rs

@@ -750,6 +750,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
 				// Nudge translation without resizing
 				if !resize {
 					let transform = DAffine2::from_translation(DVec2::from_angle(-self.document_ptz.tilt()).rotate(DVec2::new(delta_x, delta_y)));
+					responses.add(SelectToolMessage::ShiftSelectedNodes { offset: transform.translation });
 
 					for layer in self.network_interface.shallowest_unique_layers(&[]).filter(|layer| can_move(*layer)) {
 						responses.add(GraphOperationMessage::TransformChange {
@@ -1185,6 +1186,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
 					OverlaysType::HoverOutline => visibility_settings.hover_outline = visible,
 					OverlaysType::SelectionOutline => visibility_settings.selection_outline = visible,
 					OverlaysType::Pivot => visibility_settings.pivot = visible,
+					OverlaysType::Origin => visibility_settings.origin = visible,
 					OverlaysType::Path => visibility_settings.path = visible,
 					OverlaysType::Anchors => {
 						visibility_settings.anchors = visible;
@@ -1716,6 +1718,14 @@ impl DocumentMessageHandler {
 			.reduce(graphene_std::renderer::Quad::combine_bounds)
 	}
 
+	pub fn selected_visible_and_unlock_layers_bounding_box_document(&self) -> Option<[DVec2; 2]> {
+		self.network_interface
+			.selected_nodes()
+			.selected_visible_and_unlocked_layers(&self.network_interface)
+			.map(|layer| self.metadata().nonzero_bounding_box(layer))
+			.reduce(graphene_std::renderer::Quad::combine_bounds)
+	}
+
 	pub fn document_network(&self) -> &NodeNetwork {
 		self.network_interface.document_network()
 	}
@@ -2269,6 +2279,24 @@ impl DocumentMessageHandler {
 							]
 						},
 					},
+					LayoutGroup::Row {
+						widgets: {
+							let mut checkbox_id = CheckboxId::default();
+							vec![
+								CheckboxInput::new(self.overlays_visibility_settings.pivot)
+									.on_update(|optional_input: &CheckboxInput| {
+										DocumentMessage::SetOverlaysVisibility {
+											visible: optional_input.checked,
+											overlays_type: Some(OverlaysType::Origin),
+										}
+										.into()
+									})
+									.for_label(checkbox_id.clone())
+									.widget_holder(),
+								TextLabel::new("Transform Origin".to_string()).for_checkbox(&mut checkbox_id).widget_holder(),
+							]
+						},
+					},
 					LayoutGroup::Row {
 						widgets: {
 							let mut checkbox_id = CheckboxId::default();

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -3,7 +3,7 @@ use crate::messages::portfolio::document::utility_types::document_metadata::Laye
 use crate::messages::portfolio::document::utility_types::network_interface::NodeTemplate;
 use crate::messages::prelude::*;
 use bezier_rs::Subpath;
-use glam::{DAffine2, DVec2, IVec2};
+use glam::{DAffine2, IVec2};
 use graph_craft::document::NodeId;
 use graphene_std::Artboard;
 use graphene_std::brush::brush_stroke::BrushStroke;
@@ -52,10 +52,6 @@ pub enum GraphOperationMessage {
 		transform_in: TransformIn,
 		skip_rerender: bool,
 	},
-	TransformSetPivot {
-		layer: LayerNodeIdentifier,
-		pivot: DVec2,
-	},
 	Vector {
 		layer: LayerNodeIdentifier,
 		modification_type: VectorModificationType,

editor/src/messages/portfolio/document/graph_operation/graph_operation_message.rs

@@ -89,15 +89,6 @@ impl MessageHandler<GraphOperationMessage, GraphOperationMessageData<'_>> for Gr
 					modify_inputs.transform_set(transform, transform_in, skip_rerender);
 				}
 			}
-			GraphOperationMessage::TransformSetPivot { layer, pivot } => {
-				if layer == LayerNodeIdentifier::ROOT_PARENT {
-					log::error!("Cannot run TransformSetPivot on ROOT_PARENT");
-					return;
-				}
-				if let Some(mut modify_inputs) = ModifyInputsContext::new_with_layer(layer, network_interface, responses) {
-					modify_inputs.pivot_set(pivot);
-				}
-			}
 			GraphOperationMessage::Vector { layer, modification_type } => {
 				if layer == LayerNodeIdentifier::ROOT_PARENT {
 					log::error!("Cannot run Vector on ROOT_PARENT");

editor/src/messages/portfolio/document/graph_operation/graph_operation_message_handler.rs

@@ -4,7 +4,7 @@ use crate::messages::portfolio::document::utility_types::document_metadata::Laye
 use crate::messages::portfolio::document::utility_types::network_interface::{self, InputConnector, NodeNetworkInterface, OutputConnector};
 use crate::messages::prelude::*;
 use bezier_rs::Subpath;
-use glam::{DAffine2, DVec2, IVec2};
+use glam::{DAffine2, IVec2};
 use graph_craft::concrete;
 use graph_craft::document::value::TaggedValue;
 use graph_craft::document::{NodeId, NodeInput};
@@ -458,12 +458,6 @@ impl<'a> ModifyInputsContext<'a> {
 		}
 	}
 
-	pub fn pivot_set(&mut self, new_pivot: DVec2) {
-		let Some(transform_node_id) = self.existing_node_id("Transform", true) else { return };
-
-		self.set_input_with_refresh(InputConnector::node(transform_node_id, 5), NodeInput::value(TaggedValue::DVec2(new_pivot), false), false);
-	}
-
 	pub fn vector_modify(&mut self, modification_type: VectorModificationType) {
 		let Some(path_node_id) = self.existing_node_id("Path", true) else { return };
 		self.network_interface.vector_modify(&path_node_id, modification_type);

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

@@ -1308,7 +1308,6 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
 						NodeInput::value(TaggedValue::F64(0.), false),
 						NodeInput::value(TaggedValue::DVec2(DVec2::ONE), false),
 						NodeInput::value(TaggedValue::DVec2(DVec2::ZERO), false),
-						NodeInput::value(TaggedValue::DVec2(DVec2::splat(0.5)), false),
 					],
 					implementation: DocumentNodeImplementation::Network(NodeNetwork {
 						exports: vec![NodeInput::node(NodeId(1), 0)],
@@ -1327,7 +1326,6 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
 									NodeInput::network(concrete!(f64), 2),
 									NodeInput::network(concrete!(DVec2), 3),
 									NodeInput::network(concrete!(DVec2), 4),
-									NodeInput::network(concrete!(DVec2), 5),
 								],
 								manual_composition: Some(concrete!(Context)),
 								implementation: DocumentNodeImplementation::ProtoNode(transform_nodes::transform::IDENTIFIER),
@@ -1395,7 +1393,6 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
 							}),
 						),
 						InputMetadata::with_name_description_override("Skew", "TODO", WidgetOverride::Custom("transform_skew".to_string())),
-						InputMetadata::with_name_description_override("Pivot", "TODO", WidgetOverride::Hidden),
 					],
 					output_names: vec!["Data".to_string()],
 					..Default::default()

editor/src/messages/portfolio/document/node_graph/document_node_definitions.rs

@@ -191,7 +191,7 @@ pub struct FrontendClickTargets {
 	pub modify_import_export: Vec<String>,
 }
 
-#[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
+#[derive(Clone, Copy, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
 pub enum Direction {
 	Up,
 	Down,

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

@@ -1,12 +1,12 @@
 use super::utility_functions::overlay_canvas_context;
 use crate::consts::{
-	COLOR_OVERLAY_BLUE, COLOR_OVERLAY_BLUE_50, 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,
+	COLOR_OVERLAY_BLUE, COLOR_OVERLAY_GREEN, COLOR_OVERLAY_RED, COLOR_OVERLAY_WHITE, COLOR_OVERLAY_YELLOW, COLOR_OVERLAY_YELLOW_DULL, COMPASS_ROSE_ARROW_SIZE, COMPASS_ROSE_HOVER_RING_DIAMETER,
+	COMPASS_ROSE_MAIN_RING_DIAMETER, COMPASS_ROSE_RING_INNER_DIAMETER, DOWEL_PIN_RADIUS, MANIPULATOR_GROUP_MARKER_SIZE, PIVOT_CROSSHAIR_LENGTH, PIVOT_CROSSHAIR_THICKNESS, PIVOT_DIAMETER,
 };
 use crate::messages::prelude::Message;
 use bezier_rs::{Bezier, Subpath};
 use core::borrow::Borrow;
-use core::f64::consts::{FRAC_PI_2, TAU};
+use core::f64::consts::{FRAC_PI_2, PI, TAU};
 use glam::{DAffine2, DVec2};
 use graphene_std::Color;
 use graphene_std::math::quad::Quad;
@@ -33,12 +33,14 @@ pub enum OverlaysType {
 	HoverOutline,
 	SelectionOutline,
 	Pivot,
+	Origin,
 	Path,
 	Anchors,
 	Handles,
 }
 
 #[derive(PartialEq, Copy, Clone, Debug, serde::Serialize, serde::Deserialize, specta::Type)]
+#[serde(default)]
 pub struct OverlaysVisibilitySettings {
 	pub all: bool,
 	pub artboard_name: bool,
@@ -49,6 +51,7 @@ pub struct OverlaysVisibilitySettings {
 	pub hover_outline: bool,
 	pub selection_outline: bool,
 	pub pivot: bool,
+	pub origin: bool,
 	pub path: bool,
 	pub anchors: bool,
 	pub handles: bool,
@@ -66,6 +69,7 @@ impl Default for OverlaysVisibilitySettings {
 			hover_outline: true,
 			selection_outline: true,
 			pivot: true,
+			origin: true,
 			path: true,
 			anchors: true,
 			handles: true,
@@ -110,6 +114,10 @@ impl OverlaysVisibilitySettings {
 		self.all && self.pivot
 	}
 
+	pub fn origin(&self) -> bool {
+		self.all && self.origin
+	}
+
 	pub fn path(&self) -> bool {
 		self.all && self.path
 	}
@@ -423,10 +431,7 @@ 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)
-			.to_rgba_hex_srgb();
+		let mut fill_color = Color::from_rgb_str(COLOR_OVERLAY_WHITE.strip_prefix('#').unwrap()).unwrap().with_alpha(0.05).to_rgba_hex_srgb();
 		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, None);
@@ -463,10 +468,7 @@ impl OverlayContext {
 
 		// 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)
-				.to_rgba_hex_srgb();
+			let mut fill_color = Color::from_rgb_str(COLOR_OVERLAY_BLUE.strip_prefix('#').unwrap()).unwrap().with_alpha(0.5).to_rgba_hex_srgb();
 			fill_color.insert(0, '#');
 
 			self.render_context.set_line_width(HOVER_RING_STROKE_WIDTH);
@@ -550,6 +552,36 @@ impl OverlayContext {
 		self.end_dpi_aware_transform();
 	}
 
+	pub fn dowel_pin(&mut self, position: DVec2, angle: f64, color: Option<&str>) {
+		let (x, y) = (position.round() - DVec2::splat(0.5)).into();
+		let color = color.unwrap_or(COLOR_OVERLAY_YELLOW_DULL);
+
+		self.start_dpi_aware_transform();
+
+		// Draw the background circle with a white fill and blue outline
+		self.render_context.begin_path();
+		self.render_context.arc(x, y, DOWEL_PIN_RADIUS, 0., TAU).expect("Failed to draw the circle");
+		self.render_context.set_fill_style_str(COLOR_OVERLAY_WHITE);
+		self.render_context.fill();
+		self.render_context.set_stroke_style_str(color);
+		self.render_context.stroke();
+
+		// Draw the two blue filled sectors
+		self.render_context.begin_path();
+		// Top-left sector
+		self.render_context.move_to(x, y);
+		self.render_context.arc(x, y, DOWEL_PIN_RADIUS, FRAC_PI_2 + angle, PI + angle).expect("Failed to draw arc");
+		self.render_context.close_path();
+		// Bottom-right sector
+		self.render_context.move_to(x, y);
+		self.render_context.arc(x, y, DOWEL_PIN_RADIUS, PI + FRAC_PI_2 + angle, TAU + angle).expect("Failed to draw arc");
+		self.render_context.close_path();
+		self.render_context.set_fill_style_str(color);
+		self.render_context.fill();
+
+		self.end_dpi_aware_transform();
+	}
+
 	/// Used by the Pen and Path tools to outline the path of the shape.
 	pub fn outline_vector(&mut self, vector_data: &VectorData, transform: DAffine2) {
 		self.start_dpi_aware_transform();
@@ -599,9 +631,11 @@ impl OverlayContext {
 	pub fn outline_overlay_bezier(&mut self, bezier: Bezier, transform: DAffine2) {
 		self.start_dpi_aware_transform();
 
+		let color = Color::from_rgb_str(COLOR_OVERLAY_BLUE.strip_prefix('#').unwrap()).unwrap().with_alpha(0.05).to_rgba_hex_srgb();
+
 		self.render_context.begin_path();
 		self.bezier_command(bezier, transform, true);
-		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE_50);
+		self.render_context.set_stroke_style_str(&color);
 		self.render_context.set_line_width(4.);
 		self.render_context.stroke();
 
@@ -731,11 +765,11 @@ impl OverlayContext {
 		// └──┴──┴──┴──┘
 		let pixels = [(0, 0), (2, 2)];
 		for &(x, y) in &pixels {
-			let index = (x + y * PATTERN_WIDTH as usize) * 4;
+			let index = (x + y * PATTERN_WIDTH) * 4;
 			data[index..index + 4].copy_from_slice(&color.to_rgba8_srgb());
 		}
 
-		let image_data = web_sys::ImageData::new_with_u8_clamped_array_and_sh(wasm_bindgen::Clamped(&mut data), PATTERN_WIDTH as u32, PATTERN_HEIGHT as u32).unwrap();
+		let image_data = web_sys::ImageData::new_with_u8_clamped_array_and_sh(wasm_bindgen::Clamped(&data), PATTERN_WIDTH as u32, PATTERN_HEIGHT as u32).unwrap();
 		pattern_context.put_image_data(&image_data, 0., 0.).unwrap();
 		let pattern = self.render_context.create_pattern_with_offscreen_canvas(&pattern_canvas, "repeat").unwrap().unwrap();