Road lane width card (#736)

* Show lane width in each lane card

* Stretch lane cards based on lane width, too

* lane sizing: adjust padding only - keep icon size (#738)

* road editor design tweaks (#737)

- regroup sections to avoid undesirable inner rounding
- move panel away from edge
- make tabs more obvious with "shadow" on bottom of unselected tabs

* Recalculate pathfinding before starting the route tool, since we lazily avoid doing that in the other ungap edit modes. This may become unnecessary when the route tool always does Dijkstra's with custom routing params, but we're not there yet, so it crashes currently

* Show lane width in each lane card

* Stretch lane cards based on lane width, too

* lane sizing: adjust padding only - keep icon size

previously when scaling the icons to fit, the size of the cards was
a little less obvious - plus the icons could become illegible.

Co-authored-by: Dustin Carlino <dabreegster@gmail.com>

Co-authored-by: Michael Kirk <michael.code@endoftheworl.de>

game/src/edit/roads.rs

@@ -563,11 +563,14 @@ fn make_main_panel(
     ]);
     let mut drag_drop = DragDrop::new(ctx, "lane cards");
 
+    let road_width = road.get_width(map);
     let lanes_ltr = road.lanes_ltr();
     let lanes_len = lanes_ltr.len();
+
     for (idx, (id, dir, lt)) in lanes_ltr.into_iter().enumerate() {
         let mut icon_stack = GeomBatchStack::vertical(vec![
             Image::from_path(lane_type_to_icon(lt).unwrap())
+                .dims((60.0, 50.0))
                 .build_batch(ctx)
                 .unwrap()
                 .0,
@@ -581,11 +584,15 @@ fn make_main_panel(
                 } else {
                     "system/assets/edit/backwards.svg"
                 })
+                .dims((30.0, 30.0))
                 .build_batch(ctx)
                 .unwrap()
                 .0,
             );
         }
+        let lane_width = map.get_l(id).width;
+
+        icon_stack.push(Text::from(Line(lane_width.to_string(&app.opts.units))).render(ctx));
         let icon_batch = icon_stack.batch();
         let icon_bounds = icon_batch.get_bounds();
 
@@ -599,6 +606,11 @@ fn make_main_panel(
 
         let (card_bounds, default_batch, hovering_batch, selected_batch) = {
             let card_batch = |(icon_batch, is_hovering, is_selected)| -> (GeomBatch, Bounds) {
+                let road_width_px = 700.0;
+                let icon_width = 30.0;
+                let lane_ratio_of_road = lane_width / road_width;
+                let h_padding = ((road_width_px * lane_ratio_of_road - icon_width) / 2.0).max(2.0);
+
                 Image::from_batch(icon_batch, icon_bounds)
                     // TODO: For selected/hover, rather than change the entire card's background, let's
                     // just add an outline to match the styling of the corresponding lane in the map
@@ -610,12 +622,12 @@ fn make_main_panel(
                         selected_lane_bg(ctx).dull(0.15)
                     })
                     .color(ctx.style().btn_tab.fg)
-                    .dims(60.0)
+                    .dims((30.0, 100.0))
                     .padding(EdgeInsets {
                         top: 32.0,
-                        left: 16.0,
+                        left: h_padding,
                         bottom: 32.0,
-                        right: 16.0,
+                        right: h_padding,
                     })
                     .corner_rounding(rounding)
                     .build_batch(ctx)
@@ -738,10 +750,9 @@ fn make_main_panel(
     };
 
     let total_width = {
-        let current_width = road.get_width(map);
         let line1 = Text::from_all(vec![
             Line("Total width ").secondary(),
-            Line(current_width.to_string(&app.opts.units)),
+            Line(road_width.to_string(&app.opts.units)),
         ])
         .into_widget(ctx);
         let orig_width = EditRoad::get_orig_from_osm(map.get_r(road.id), map.get_config())
@@ -754,16 +765,16 @@ fn make_main_panel(
             .btn_plain
             .btn()
             .label_styled_text(
-                Text::from(match current_width.cmp(&orig_width) {
+                Text::from(match road_width.cmp(&orig_width) {
                     std::cmp::Ordering::Equal => Line("No change").secondary(),
                     std::cmp::Ordering::Less => Line(format!(
                         "- {}",
-                        (orig_width - current_width).to_string(&app.opts.units)
+                        (orig_width - road_width).to_string(&app.opts.units)
                     ))
                     .fg(Color::GREEN),
                     std::cmp::Ordering::Greater => Line(format!(
                         "+ {}",
-                        (current_width - orig_width).to_string(&app.opts.units)
+                        (road_width - orig_width).to_string(&app.opts.units)
                     ))
                     .fg(Color::RED),
                 }),