ui: add LayoutDebugFrame widget.

This will assist with diagnosing mysterious misalignment and margins.

all-is-cubes-ui/src/vui/layout.rs

@@ -1,5 +1,6 @@
 use alloc::rc::Rc;
 use alloc::sync::Arc;
+use core::fmt;
 
 use all_is_cubes::euclid;
 use all_is_cubes::euclid::Vector3D;
@@ -8,6 +9,7 @@ use all_is_cubes::math::{
 };
 use all_is_cubes::space::{Space, SpaceBuilder, SpaceTransaction};
 use all_is_cubes::transaction::{self, Merge as _, Transaction as _};
+use all_is_cubes::util::{ConciseDebug, Fmt};
 
 use crate::vui::{InstallVuiError, Widget, WidgetBehavior};
 
@@ -59,6 +61,13 @@ impl LayoutRequest {
     };
 }
 
+impl Fmt<ConciseDebug> for LayoutRequest {
+    fn fmt(&self, fmt: &mut fmt::Formatter<'_>, _: &ConciseDebug) -> core::fmt::Result {
+        let &Self { minimum } = self;
+        write!(fmt, "{:?}", minimum.to_array())
+    }
+}
+
 /// Region a widget has been given by the layout algorithm, based on its
 /// [`LayoutRequest`].
 #[derive(Clone, Copy, Debug, Eq, PartialEq)]

all-is-cubes-ui/src/vui/widgets.rs

@@ -16,6 +16,8 @@ mod text;
 pub use text::*;
 mod button;
 pub use button::*;
+mod debug;
+pub use debug::*;
 mod theme;
 pub use theme::*;
 mod toolbar;

all-is-cubes-ui/src/vui/widgets/debug.rs

@@ -0,0 +1,68 @@
+use all_is_cubes::math::GridAab;
+use alloc::sync::Arc;
+
+use all_is_cubes::block::{self, text, Block, Resolution::R64};
+use all_is_cubes::space::{CubeTransaction, SpaceTransaction};
+use all_is_cubes::util::{ConciseDebug, Refmt};
+
+use crate::vui::widgets::WidgetTheme;
+use crate::vui::{self, Layoutable as _};
+
+/// Widget that uses another widget's [`Layoutable`] parameters, but instead of displaying that
+/// widget, displays a bounding box of the area it's granted, and data as text.
+#[derive(Debug)]
+#[doc(hidden)] // experimental
+pub struct LayoutDebugFrame {
+    theme: WidgetTheme,
+    widget: Arc<dyn vui::Widget>,
+}
+
+impl LayoutDebugFrame {
+    pub fn new(theme: WidgetTheme, widget: Arc<dyn vui::Widget>) -> Arc<Self> {
+        Arc::new(Self { theme, widget })
+    }
+}
+
+impl vui::Layoutable for LayoutDebugFrame {
+    fn requirements(&self) -> vui::LayoutRequest {
+        self.widget.requirements()
+    }
+}
+
+impl vui::Widget for LayoutDebugFrame {
+    fn controller(self: Arc<Self>, grant: &vui::LayoutGrant) -> Box<dyn vui::WidgetController> {
+        let box_style = &self.theme.layout_debug_box_style;
+        let bounds = grant.bounds;
+
+        let mut info_text = text::Text::new(
+            all_is_cubes::arcstr::format!(
+                "Req {:?}\nGrant {:?}\nGrav {:?}",
+                self.requirements().refmt(&ConciseDebug),
+                grant.bounds,
+                grant.gravity.to_array(),
+            ),
+            text::Font::System16,
+            text::Positioning {
+                x: text::PositioningX::Left,
+                line_y: text::PositioningY::BodyMiddle,
+                z: text::PositioningZ::Front,
+            },
+        );
+        info_text.set_layout_bounds(R64, GridAab::for_block(R64));
+
+        super::OneshotController::new(SpaceTransaction::filling(bounds, |cube| {
+            // not bothering to skip outside text bounds.
+            let text_block = Block::from_primitive(block::Primitive::Text {
+                text: info_text.clone(),
+                offset: cube.lower_bounds() - bounds.lower_bounds(),
+            });
+            let block: Block = if let Some(box_block) = box_style.cube_at(bounds, cube).cloned() {
+                block::Composite::new(text_block, block::CompositeOperator::Over)
+                    .compose_or_replace(box_block)
+            } else {
+                text_block
+            };
+            CubeTransaction::replacing(None, Some(block))
+        }))
+    }
+}

all-is-cubes-ui/src/vui/widgets/theme.rs

@@ -23,6 +23,7 @@ use crate::vui::widgets::{BoxStyle, ButtonBase as _, ButtonVisualState, ToggleBu
 pub struct WidgetTheme {
     pub(crate) widget_blocks: BlockProvider<WidgetBlocks>,
     pub(crate) dialog_box_style: BoxStyle,
+    pub(crate) layout_debug_box_style: BoxStyle,
 }
 
 impl WidgetTheme {
@@ -37,10 +38,15 @@ impl WidgetTheme {
 
         let dialog_box_style =
             BoxStyle::from_nine_and_thin(&widget_blocks[WidgetBlocks::DialogBackground]);
+        let layout_debug_box_style = BoxStyle::from_composited_corner_and_edge(
+            widget_blocks[WidgetBlocks::LayoutDebugBoxCorner].clone(),
+            widget_blocks[WidgetBlocks::LayoutDebugBoxEdge].clone(),
+        );
 
         Ok(Self {
             widget_blocks,
             dialog_box_style,
+            layout_debug_box_style,
         })
     }
 
@@ -75,6 +81,9 @@ pub enum WidgetBlocks {
     ActionButton(ButtonVisualState),
     /// Appearance of a [`widgets::ToggleButton`] without label.
     ToggleButton(ToggleButtonVisualState),
+
+    LayoutDebugBoxCorner,
+    LayoutDebugBoxEdge,
 }
 
 impl BlockModule for WidgetBlocks {
@@ -94,6 +103,8 @@ impl fmt::Display for WidgetBlocks {
             WidgetBlocks::DialogBackground => write!(f, "dialog-background"),
             WidgetBlocks::ActionButton(state) => write!(f, "action-button/{state}"),
             WidgetBlocks::ToggleButton(state) => write!(f, "toggle-button/{state}"),
+            WidgetBlocks::LayoutDebugBoxCorner => write!(f, "layout-debug-box-corner"),
+            WidgetBlocks::LayoutDebugBoxEdge => write!(f, "layout-debug-box-edge"),
         }
     }
 }
@@ -169,6 +180,29 @@ impl WidgetBlocks {
 
                 WidgetBlocks::ActionButton(state) => state.button_block(universe)?,
                 WidgetBlocks::ToggleButton(state) => state.button_block(universe)?,
+
+                WidgetBlocks::LayoutDebugBoxCorner => Block::builder()
+                    .display_name("LayoutDebugBoxCorner")
+                    .voxels_ref(
+                        R32,
+                        universe.insert_anonymous(space_from_image(
+                            include_image!("theme/layout-debug-box-corner.png"),
+                            GridRotation::RXyZ,
+                            default_srgb,
+                        )?),
+                    )
+                    .build(),
+                WidgetBlocks::LayoutDebugBoxEdge => Block::builder()
+                    .display_name("LayoutDebugBoxEdge")
+                    .voxels_ref(
+                        R32,
+                        universe.insert_anonymous(space_from_image(
+                            include_image!("theme/layout-debug-box-edge.png"),
+                            GridRotation::RZyX,
+                            default_srgb,
+                        )?),
+                    )
+                    .build(),
             })
         })
         .await