From c0bd16acdc8007ed73f762fbcc9bb61653526594 Mon Sep 17 00:00:00 2001
From: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
Date: Wed, 19 Jun 2024 19:33:24 +0200
Subject: [PATCH] Show outline around hovered/selected tiles in viewport
 (#6597)

### What
* Builds upon and merges into
https://github.com/rerun-io/rerun/pull/6596
* Closes https://github.com/rerun-io/rerun/issues/5174



https://github.com/rerun-io/rerun/assets/1148717/37b29988-9cdb-4e9a-8ac1-e7b25b3836d5


### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)
* [x] I have tested the web demo (if applicable):
* Using examples from latest `main` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6597?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6597?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG
* [x] If applicable, add a new check to the [release
checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)!

- [PR Build Summary](https://build.rerun.io/pr/6597)
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

To run all checks from `main`, comment on the PR with `@rerun-bot
full-check`.
---
 crates/re_ui/src/design_tokens.rs  |  2 +-
 crates/re_viewport/src/viewport.rs | 30 ++++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/crates/re_ui/src/design_tokens.rs b/crates/re_ui/src/design_tokens.rs
index e5c4f49998ca..dc3e247b89f6 100644
--- a/crates/re_ui/src/design_tokens.rs
+++ b/crates/re_ui/src/design_tokens.rs
@@ -172,7 +172,7 @@ impl DesignTokens {
         egui_style.visuals.widgets.inactive.fg_stroke.color = default; // button text
         egui_style.visuals.widgets.active.fg_stroke.color = strong; // strong text and active button text
 
-        let wide_stroke_width = 1.5; // Make it a bit more visible, especially important for spatial primitives.
+        let wide_stroke_width = 2.0; // Make it a bit more visible, especially important for spatial primitives.
         egui_style.visuals.widgets.active.fg_stroke.width = wide_stroke_width;
         egui_style.visuals.selection.stroke.width = wide_stroke_width;
 
diff --git a/crates/re_viewport/src/viewport.rs b/crates/re_viewport/src/viewport.rs
index 14f1cd97594b..07d1a32b6bfb 100644
--- a/crates/re_viewport/src/viewport.rs
+++ b/crates/re_viewport/src/viewport.rs
@@ -169,6 +169,36 @@ impl<'a> Viewport<'a> {
 
             // TODO(#4687): Be extra careful here. If we mark edited inappropriately we can create an infinite edit loop.
             self.tree_edited |= tab_viewer.edited;
+
+            // Outline hovered & selected tiles:
+            for contents in blueprint.contents_iter() {
+                let tile_id = contents.as_tile_id();
+                if let Some(rect) = tree.tiles.rect(tile_id) {
+                    let item = contents.as_item();
+
+                    let mut hovered = ctx.hovered().contains_item(&item);
+                    let selected = ctx.selection().contains_item(&item);
+
+                    if hovered && ui.rect_contains_pointer(rect) {
+                        // Showing a hover-outline when hovering the same thing somewhere else
+                        // (e.g. in the blueprint panel) is really helpful,
+                        // but showing a hover-outline when just dragging around the camera is
+                        // just annoying.
+                        hovered = false;
+                    }
+
+                    let stroke = if hovered {
+                        ui.ctx().hover_stroke()
+                    } else if selected {
+                        ui.ctx().selection_stroke()
+                    } else {
+                        continue;
+                    };
+
+                    ui.painter()
+                        .rect_stroke(rect.shrink(stroke.width / 2.0), 0.0, stroke);
+                }
+            }
         });
 
         self.blueprint.set_maximized(maximized, ctx);