Merge pull request #1019 from muamerETS/fix/988-toolbar-flyout-carets

M7: toolbar flyout carets get a wider target clear of their tool (#988)

crates/ui-egui/src/board_ui_tests.rs

@@ -38,17 +38,18 @@ fn pill(u: &Ui) -> Rect {
     crate::toolbar::pill_rect(u.app.canvas.rect, crate::toolbar::bar_width(&u.app))
 }
 
-/// The left edge of board toolbar group `i` (button 32 wide, a 10-wide caret after the groups with
-/// flyouts, 4 between): move, ink, sticky, shapes, connector, text, section, stamp, comment.
+/// The left edge of board toolbar group `i` (button 32 wide, a 16-wide caret 2 after it on the
+/// groups with flyouts, 4 between): move, ink, sticky, shapes, connector, text, section, stamp,
+/// comment.
 fn group_x(u: &Ui, i: usize) -> f32 {
-    const WIDTHS: [f32; 9] = [46.0, 46.0, 46.0, 46.0, 36.0, 36.0, 36.0, 46.0, 36.0];
+    const WIDTHS: [f32; 9] = [54.0, 54.0, 54.0, 54.0, 36.0, 36.0, 36.0, 54.0, 36.0];
     pill(u).min.x + 8.0 + WIDTHS.iter().take(i).sum::<f32>()
 }
 
 /// Open group `i`'s flyout from its caret and click option `n` in it (a row of 32-wide cells, 4
 /// apart, 8 in from the flyout's edge, the flyout's bottom 8 above the pill).
 fn pick_option(u: &mut Ui, i: usize, n: usize) {
-    let caret = pos2(group_x(u, i) + 37.0, pill(u).center().y);
+    let caret = pos2(group_x(u, i) + 42.0, pill(u).center().y);
     click(u, caret);
     let at = pos2(group_x(u, i) + 8.0 + n as f32 * 36.0 + 16.0, pill(u).min.y - 8.0 - 24.0);
     click(u, at);
@@ -78,7 +79,7 @@ fn the_board_toolbar_picks_tools_with_their_colours_shapes_and_stamps() {
     let connector = pos2(group_x(&u, 4) + 16.0, pill(&u).center().y);
     click(&mut u, connector);
     assert_eq!(u.app.session.tool.tool, ToolId::Connector);
-    let ink_caret = pos2(group_x(&u, 1) + 37.0, pill(&u).center().y);
+    let ink_caret = pos2(group_x(&u, 1) + 42.0, pill(&u).center().y);
     click(&mut u, ink_caret);
     assert_eq!(u.app.ui.tool_flyout, Some("ink"));
 }

crates/ui-egui/src/toolbar.rs

@@ -17,6 +17,9 @@ const GLYPH: f32 = 18.0;
 /// The flyout carets: smaller than the marks, but on a box whose stroke rounds to the same width
 /// as theirs at 1×, 1.5× and 2× (a 10-point box drew them one physical pixel thinner).
 const CARET: f32 = 14.0;
+/// A flyout caret's button: wide enough to hit, a little clear of its tool's (#988).
+const FLYOUT_W: f32 = 16.0;
+const FLYOUT_GAP: f32 = 2.0;
 
 /// `GLYPH`'s box centred in `r`.
 fn glyph_rect(r: Rect) -> Rect {
@@ -130,7 +133,7 @@ pub(crate) fn bar_width(app: &FigApp) -> f32 {
 /// Actions, and the mode switcher (boards: the Design panel's button instead).
 fn main_width(groups: &[Group], board: bool) -> f32 {
     let (cell, gap) = (TOOL_CELL, 4.0);
-    let carets = groups.iter().filter(|g| g.has_flyout()).count() as f32 * 10.0;
+    let carets = groups.iter().filter(|g| g.has_flyout()).count() as f32 * (FLYOUT_GAP + FLYOUT_W);
     let end = if board { cell + 16.0 } else { 4.0 * 34.0 + 24.0 };
     groups.len() as f32 * (cell + gap) + carets + 2.0 * (cell + gap) + 16.0 + end
 }
@@ -190,7 +193,7 @@ fn group_cell(app: &mut FigApp, ui: &mut Ui, g: &Group, at: egui::Pos2, top: f32
     let mut x = at.x + TOOL_CELL;
     if g.has_flyout() {
         flyout_caret(app, ui, g, pos2(x, at.y), t);
-        x += 10.0;
+        x += FLYOUT_GAP + FLYOUT_W;
     }
     if app.ui.tool_flyout == Some(g.key) {
         if g.options == Options::None {
@@ -205,7 +208,7 @@ fn group_cell(app: &mut FigApp, ui: &mut Ui, g: &Group, at: egui::Pos2, top: f32
 /// The caret after group `g`'s button (at `at`, its left edge and middle): opens or closes its
 /// flyout.
 fn flyout_caret(app: &mut FigApp, ui: &mut Ui, g: &Group, at: egui::Pos2, t: &Tokens) {
-    let cr = Rect::from_center_size(pos2(at.x + 5.0, at.y), vec2(10.0, TOOL_CELL));
+    let cr = Rect::from_min_size(pos2(at.x + FLYOUT_GAP, at.y - TOOL_CELL / 2.0), vec2(FLYOUT_W, TOOL_CELL));
     let cresp = ui.interact(cr, ui.scope_id().with(("flyout", g.key)), Sense::click());
     let open = app.ui.tool_flyout == Some(g.key);
     a11y::menu_button(&cresp, tr(g.name), open);