Merge pull request #354 from thanhcong2k7/fix/ui-dock-focus-outline-zorder

UI: Draw panel focus outline after panel body to prevent clipping

crates/ui-egui/src/dock.rs

@@ -2,7 +2,7 @@
 //! thin gutters; each group has a tab strip (active tab bright, with a panel menu "≡"); the focused
 //! panel gets a blue outline. Gutters drag to resize; workspaces are serialized trees.
 
-use egui::{Align2, Rect, Sense, Stroke, StrokeKind, pos2, vec2};
+use egui::{Align2, Rect, Sense, Stroke, pos2, vec2};
 use serde::{Deserialize, Serialize};
 
 use crate::icons::{self, Icon};
@@ -990,7 +990,7 @@ fn resize_stacked(entries: &mut [StackEntry], bodies: &[f32], above: usize, belo
 /// Draw a group's frame + tab strip: one tab per panel, or per document for panels that show
 /// several (the Timeline's comps). Tab labels may name the comp or layer they show (After
 /// Effects style).
-pub fn draw_group_chrome(ui: &mut egui::Ui, g: &Group, focused: PanelKind, t: &Tokens, reg: &mut crate::automation::Registry, info: &TabInfo) -> Chrome {
+pub fn draw_group_chrome(ui: &mut egui::Ui, g: &Group, t: &Tokens, reg: &mut crate::automation::Registry, info: &TabInfo) -> Chrome {
     struct Entry {
         panel: PanelKind,
         doc: Option<u64>,
@@ -1165,10 +1165,6 @@ pub fn draw_group_chrome(ui: &mut egui::Ui, g: &Group, focused: PanelKind, t: &T
             x += w + 8.0;
         }
     }
-    // focus outline
-    if active_panel == Some(focused) {
-        painter.rect_stroke(g.rect, 0.0, Stroke::new(1.0, t.focus), StrokeKind::Inside);
-    }
     // clicking anywhere in the panel focuses it
     if let Some(p) = active_panel
         && ui.rect_contains_pointer(g.rect)

crates/ui-egui/src/dock_ui.rs

@@ -149,7 +149,7 @@ impl EffectcraftApp {
 
     fn panel_body(&mut self, ui: &mut egui::Ui, p: PanelKind, rect: Rect) {
         self.auto.add(&format!("panel.{}", p.id()), rect, p.title());
-        let mut content = rect;
+        let mut content = rect.shrink(1.0);
         let viewer = p == panels::viewers::active_panel(self);
         if viewer && !self.ui.start_screen && panels::precomp::has_flow(self) {
             // Composition Navigator: the flow of nested comps above the viewer.
@@ -194,7 +194,7 @@ impl EffectcraftApp {
         // Where each group's tabs are (tab drags show where a tab will land between them).
         let mut tab_rects: Vec<(String, Vec<(PanelKind, Rect)>)> = vec![];
         for g in &groups {
-            let c = dock::draw_group_chrome(ui, g, self.ui.focused, &t, &mut self.auto, &info);
+            let c = dock::draw_group_chrome(ui, g, &t, &mut self.auto, &info);
             actions.extend(c.actions);
             tab_rects.push((g.path.clone(), c.tabs));
         }
@@ -210,6 +210,11 @@ impl EffectcraftApp {
             }
             self.panel_body(ui, p, g.content);
         }
+        for g in &groups {
+            if g.panels.get(g.active) == Some(&self.ui.focused) {
+                ui.painter().rect_stroke(g.rect, 0.0, Stroke::new(1.0, t.focus), StrokeKind::Inside);
+            }
+        }
         // Floating groups over the dock.
         let mut float_groups: Vec<Group> = vec![];
         for i in 0..self.ui.floating.len() {
@@ -308,12 +313,15 @@ impl EffectcraftApp {
                 active: f.active.min(f.panels.len().saturating_sub(1)),
                 stacked: None,
             };
-            let c = dock::draw_group_chrome(ui, &g, self.ui.focused, &t, &mut self.auto, info);
+            let c = dock::draw_group_chrome(ui, &g, &t, &mut self.auto, info);
             actions.extend(c.actions);
-            ui.painter().rect_stroke(r, t.radius, Stroke::new(1.0, t.field_border), StrokeKind::Outside);
             if let Some(p) = g.panels.get(g.active).copied() {
                 self.panel_body(ui, p, g.content);
             }
+            ui.painter().rect_stroke(r, t.radius, Stroke::new(1.0, t.field_border), StrokeKind::Outside);
+            if g.panels.get(g.active) == Some(&self.ui.focused) {
+                ui.painter().rect_stroke(r, t.radius, Stroke::new(1.0, t.focus), StrokeKind::Inside);
+            }
             // Resize from the corner.
             let grip = Rect::from_min_max(r.max - vec2(14.0, 14.0), r.max);
             let rs = ui.interact(grip, id.with("resize"), Sense::drag());