Skip to content

Commit 927d7dd

Browse files
singhutsav5502Keavon
singhutsav5502
and
Keavon
authored
Fix quick measuring of skewed and rotated layers by using the viewport space AABB (#2396)
* Make sure that quick measure overlays are based on AABBs drawn in the viewport local space * Draw overlays to visualise AABBs of selected and hovered shapes * use pre-existing functions to render dashed lines * Redraw selected bounds using existing BoundingBoxManager * remove unused variables * Render transform cage after overlay is drawn * Bring overlay and transform cage render calls above(before) other gizmos * Add line length tolerance and render single line for singal edge alignment with one axis overlap * Comments --------- Co-authored-by: Keavon Chambers <[email protected]>
1 parent 2bcfe5e commit 927d7dd

File tree

2 files changed

+88
-48
lines changed

2 files changed

+88
-48
lines changed

‎editor/src/messages/tool/common_functionality/measure.rs‎

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
use crate::consts::COLOR_OVERLAY_BLUE;
22
use crate::messages::portfolio::document::overlays::utility_types::{OverlayContext, Pivot};
33
use crate::messages::tool::tool_messages::tool_prelude::*;
4-
54
use graphene_std::renderer::Rect;
65

76
/// Draws a dashed line between two points transformed by the given affine transformation.
@@ -25,29 +24,50 @@ fn draw_line_with_length(line_start: DVec2, line_end: DVec2, transform: DAffine2
2524
.trim_end_matches('.')
2625
.to_string();
2726

28-
const TEXT_PADDING: f64 = 5.;
29-
// Calculate midpoint of the line
30-
let midpoint = (min_viewport + max_viewport) / 2.;
31-
32-
// Adjust text position based on line orientation and flags
33-
// Determine text position based on line orientation and flags
34-
let (pivot_x, pivot_y) = match (label_alignment.is_vertical_line, label_alignment.text_on_left, label_alignment.text_on_top) {
35-
(true, true, _) => (Pivot::End, Pivot::Middle), // Vertical line, text on the left
36-
(true, false, _) => (Pivot::Start, Pivot::Middle), // Vertical line, text on the right
37-
(false, _, true) => (Pivot::Middle, Pivot::End), // Horizontal line, text on top
38-
(false, _, false) => (Pivot::Middle, Pivot::Start), // Horizontal line, text on bottom
39-
};
40-
overlay_context.text(&length, COLOR_OVERLAY_BLUE, None, DAffine2::from_translation(midpoint), TEXT_PADDING, [pivot_x, pivot_y]);
27+
const TOLERANCE: f64 = 0.01;
28+
if transform_to_document.transform_vector2(line_end - line_start).length() >= TOLERANCE {
29+
const TEXT_PADDING: f64 = 5.;
30+
// Calculate midpoint of the line
31+
let midpoint = (min_viewport + max_viewport) / 2.;
32+
33+
// Adjust text position based on line orientation and flags
34+
// Determine text position based on line orientation and flags
35+
let (pivot_x, pivot_y) = match (label_alignment.is_vertical_line, label_alignment.text_on_left, label_alignment.text_on_top) {
36+
(true, true, _) => (Pivot::End, Pivot::Middle), // Vertical line, text on the left
37+
(true, false, _) => (Pivot::Start, Pivot::Middle), // Vertical line, text on the right
38+
(false, _, true) => (Pivot::Middle, Pivot::End), // Horizontal line, text on top
39+
(false, _, false) => (Pivot::Middle, Pivot::Start), // Horizontal line, text on bottom
40+
};
41+
overlay_context.text(&length, COLOR_OVERLAY_BLUE, None, DAffine2::from_translation(midpoint), TEXT_PADDING, [pivot_x, pivot_y]);
42+
}
43+
}
44+
45+
/// Draws a dashed outline around a rectangle to visualize the AABB
46+
fn draw_dashed_rect_outline(rect: Rect, transform: DAffine2, overlay_context: &mut OverlayContext) {
47+
let min = rect.min();
48+
let max = rect.max();
49+
50+
// Create the four corners of the rectangle
51+
let top_left = transform.transform_point2(DVec2::new(min.x, min.y));
52+
let top_right = transform.transform_point2(DVec2::new(max.x, min.y));
53+
let bottom_right = transform.transform_point2(DVec2::new(max.x, max.y));
54+
let bottom_left = transform.transform_point2(DVec2::new(min.x, max.y));
55+
56+
// Draw the four sides as dashed lines
57+
draw_dashed_line(top_left, top_right, transform, overlay_context);
58+
draw_dashed_line(top_right, bottom_right, transform, overlay_context);
59+
draw_dashed_line(bottom_right, bottom_left, transform, overlay_context);
60+
draw_dashed_line(bottom_left, top_left, transform, overlay_context);
4161
}
4262

4363
/// Checks if the selected bounds overlap with the hovered bounds on the Y-axis.
4464
fn does_overlap_y(selected_bounds: Rect, hovered_bounds: Rect) -> bool {
45-
selected_bounds.min().x < hovered_bounds.max().x && selected_bounds.max().x > hovered_bounds.min().x
65+
selected_bounds.min().x <= hovered_bounds.max().x && selected_bounds.max().x >= hovered_bounds.min().x
4666
}
4767

4868
/// Checks if the selected bounds overlap with the hovered bounds on the X-axis.
4969
fn does_overlap_x(selected_bounds: Rect, hovered_bounds: Rect) -> bool {
50-
selected_bounds.min().y < hovered_bounds.max().y && selected_bounds.max().y > hovered_bounds.min().y
70+
selected_bounds.min().y <= hovered_bounds.max().y && selected_bounds.max().y >= hovered_bounds.min().y
5171
}
5272

5373
/// Draws measurements when both X and Y axes are involved in the overlap between selected and hovered bounds.
@@ -91,8 +111,8 @@ fn draw_single_axis_zero_crossings(selected_bounds: Rect, hovered_bounds: Rect,
91111
let (selected_min, selected_max) = (selected_bounds.min(), selected_bounds.max());
92112
let (hovered_min, hovered_max) = (hovered_bounds.min(), hovered_bounds.max());
93113

94-
let overlap_y = does_overlap_y(selected_bounds, hovered_bounds);
95-
let overlap_x = does_overlap_x(selected_bounds, hovered_bounds);
114+
let overlap_y = does_overlap_y(selected_bounds, hovered_bounds) || does_overlap_y(hovered_bounds, selected_bounds);
115+
let overlap_x = does_overlap_x(selected_bounds, hovered_bounds) || does_overlap_x(hovered_bounds, selected_bounds);
96116

97117
let selected_on_bottom = selected_bounds.center().y > hovered_bounds.center().y;
98118
let selected_on_right = selected_bounds.center().x > hovered_bounds.center().x;
@@ -151,8 +171,8 @@ fn draw_single_axis_one_crossings(selected_bounds: Rect, hovered_bounds: Rect, t
151171
let selected_center = selected_bounds.center();
152172
let hovered_center = hovered_bounds.center();
153173

154-
let overlap_y = does_overlap_y(selected_bounds, hovered_bounds);
155-
let overlap_x = does_overlap_x(selected_bounds, hovered_bounds);
174+
let overlap_y = does_overlap_y(selected_bounds, hovered_bounds) || does_overlap_y(hovered_bounds, selected_bounds);
175+
let overlap_x = does_overlap_x(selected_bounds, hovered_bounds) || does_overlap_x(hovered_bounds, selected_bounds);
156176

157177
if overlap_y {
158178
let selected_facing_edge = if hovered_max.y < selected_min.y { selected_min.y } else { selected_max.y };
@@ -423,14 +443,14 @@ fn handle_two_axis_overlap(selected_bounds: Rect, hovered_bounds: Rect, transfor
423443

424444
/// Overlays measurement lines between selected and hovered bounds based on their spatial relationships.
425445
pub fn overlay(selected_bounds: Rect, hovered_bounds: Rect, transform: DAffine2, document_to_viewport: DAffine2, overlay_context: &mut OverlayContext) {
426-
// TODO: Apply object rotation to bounds before drawing lines for all cases.
427-
446+
draw_dashed_rect_outline(selected_bounds, transform, overlay_context);
447+
draw_dashed_rect_outline(hovered_bounds, transform, overlay_context);
428448
let (selected_min, selected_max) = (selected_bounds.min(), selected_bounds.max());
429449
let (hovered_min, hovered_max) = (hovered_bounds.min(), hovered_bounds.max());
430450

431451
// Determine axis overlaps
432-
let overlap_x = selected_min.x <= hovered_max.x && selected_max.x >= hovered_min.x;
433-
let overlap_y = selected_min.y <= hovered_max.y && selected_max.y >= hovered_min.y;
452+
let overlap_y = does_overlap_y(selected_bounds, hovered_bounds) || does_overlap_y(hovered_bounds, selected_bounds);
453+
let overlap_x = does_overlap_x(selected_bounds, hovered_bounds) || does_overlap_x(hovered_bounds, selected_bounds);
434454
let overlap_axes = match (overlap_x, overlap_y) {
435455
(true, true) => 2,
436456
(true, false) | (false, true) => 1,

‎editor/src/messages/tool/tool_messages/select_tool.rs‎

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -544,13 +544,56 @@ impl Fsm for SelectToolFsmState {
544544
})
545545
.reduce(graphene_core::renderer::Quad::combine_bounds);
546546

547+
// When not in Drawing State
548+
// Only highlight layers if the viewport is not being panned (middle mouse button is pressed)
549+
// TODO: Don't use `Key::MouseMiddle` directly, instead take it as a variable from the input mappings list like in all other places; or find a better way than checking the key state
550+
if !matches!(self, Self::Drawing { .. }) && !input.keyboard.get(Key::MouseMiddle as usize) {
551+
// Get the layer the user is hovering over
552+
let click = document.click(input);
553+
let not_selected_click = click.filter(|&hovered_layer| !document.network_interface.selected_nodes().selected_layers_contains(hovered_layer, document.metadata()));
554+
if let Some(layer) = not_selected_click {
555+
overlay_context.outline(document.metadata().layer_outline(layer), document.metadata().transform_to_viewport(layer));
556+
557+
// Measure with Alt held down
558+
// TODO: Don't use `Key::Alt` directly, instead take it as a variable from the input mappings list like in all other places
559+
if !matches!(self, Self::ResizingBounds { .. }) && input.keyboard.get(Key::Alt as usize) {
560+
// Get all selected layers and compute their viewport-aligned AABB
561+
let selected_bounds_viewport = document
562+
.network_interface
563+
.selected_nodes()
564+
.selected_visible_and_unlocked_layers(&document.network_interface)
565+
.filter(|layer| !document.network_interface.is_artboard(&layer.to_node(), &[]))
566+
.filter_map(|layer| {
567+
// Get the layer's bounding box in its local space
568+
let local_bounds = document.metadata().bounding_box_with_transform(layer, DAffine2::IDENTITY)?;
569+
// Transform the bounds directly to viewport space
570+
let viewport_quad = document.metadata().transform_to_viewport(layer) * Quad::from_box(local_bounds);
571+
// Convert the quad to an AABB in viewport space
572+
Some(Rect::from_box(viewport_quad.bounding_box()))
573+
})
574+
.reduce(Rect::combine_bounds);
575+
576+
// Get the hovered layer's viewport-aligned AABB
577+
let hovered_bounds_viewport = document.metadata().bounding_box_with_transform(layer, DAffine2::IDENTITY).map(|bounds| {
578+
let viewport_quad = document.metadata().transform_to_viewport(layer) * Quad::from_box(bounds);
579+
Rect::from_box(viewport_quad.bounding_box())
580+
});
581+
582+
// Use the viewport-aligned AABBs for measurement
583+
if let (Some(selected_bounds), Some(hovered_bounds)) = (selected_bounds_viewport, hovered_bounds_viewport) {
584+
// Since we're already in viewport space, use identity transform
585+
measure::overlay(selected_bounds, hovered_bounds, DAffine2::IDENTITY, DAffine2::IDENTITY, &mut overlay_context);
586+
}
587+
}
588+
}
589+
}
590+
547591
if let Some(bounds) = bounds {
548592
let bounding_box_manager = tool_data.bounding_box_manager.get_or_insert(BoundingBoxManager::default());
549593

550594
bounding_box_manager.bounds = bounds;
551595
bounding_box_manager.transform = transform;
552596
bounding_box_manager.transform_tampered = transform_tampered;
553-
554597
bounding_box_manager.render_overlays(&mut overlay_context);
555598
} else {
556599
tool_data.bounding_box_manager.take();
@@ -722,29 +765,6 @@ impl Fsm for SelectToolFsmState {
722765
(SelectionShapeType::Lasso, _) => overlay_context.polygon(polygon, fill_color),
723766
}
724767
}
725-
// Only highlight layers if the viewport is not being panned (middle mouse button is pressed)
726-
// TODO: Don't use `Key::Mmb` directly, instead take it as a variable from the input mappings list like in all other places
727-
else if !input.keyboard.get(Key::MouseMiddle as usize) {
728-
// Get the layer the user is hovering over
729-
let click = document.click(input);
730-
let not_selected_click = click.filter(|&hovered_layer| !document.network_interface.selected_nodes().selected_layers_contains(hovered_layer, document.metadata()));
731-
if let Some(layer) = not_selected_click {
732-
overlay_context.outline(document.metadata().layer_outline(layer), document.metadata().transform_to_viewport(layer));
733-
734-
// Measure with Alt held down
735-
// TODO: Don't use `Key::Alt` directly, instead take it as a variable from the input mappings list like in all other places
736-
if !matches!(self, Self::ResizingBounds { .. }) && input.keyboard.get(Key::Alt as usize) {
737-
let hovered_bounds = document
738-
.metadata()
739-
.bounding_box_with_transform(layer, transform.inverse() * document.metadata().transform_to_viewport(layer));
740-
741-
if let [Some(selected_bounds), Some(hovered_bounds)] = [bounds, hovered_bounds].map(|rect| rect.map(Rect::from_box)) {
742-
measure::overlay(selected_bounds, hovered_bounds, transform, document.metadata().document_to_viewport, &mut overlay_context);
743-
}
744-
}
745-
}
746-
}
747-
748768
self
749769
}
750770
(_, SelectToolMessage::EditLayer) => {

0 commit comments

Comments
 (0)