jbuehler23 be278fb1dc feat(editor): introduce reusable UI widgets for the editor interface

- Added a new module for editor UI widgets, including ScrollViewBuilder, CoreScrollArea, ExpansionButton, BasicPanel, and ScrollableContainer.
- Implemented basic theme support with EditorTheme struct.
- Created a Panel widget with collapsible and resizable features.
- Developed a scrollable area widget with mouse wheel support and content height calculation methods.
- Added examples for using scroll widgets and programmatic scrolling.
- Introduced a simple panel widget with configurable dimensions and styling.
- Implemented a simple scrollable container with mouse wheel support.
- Established a theming system compatible with bevy_feathers, including themed UI elements and a theme management plugin.

2025-07-18 14:39:07 +01:00

2.7 KiB

Raw Blame History

PR Summary: Bevy Inspector Integration for bevy_dev_tools

Overview

This PR adds a comprehensive entity and component inspector to bevy_dev_tools, providing real-time debugging capabilities for Bevy applications. The inspector features a modern UI with scrollable panels and integrates seamlessly with the existing dev tools ecosystem.

Key Features

Entity Inspector

Entity Browser: Scrollable list of all entities in the world
Real-time Updates: Live entity list that refreshes automatically
Interactive Selection: Click to select entities and view their components

Component Inspector

Detailed View: Comprehensive component data display with proper formatting
Smart Formatting: Special handling for common Bevy types (Vec2, Vec3, Transform, Color)
Scrollable Interface: Smooth scrolling through large component datasets
Expandable Data: Hierarchical display of complex component structures

Modern UI System

Native Scrolling: Integration with bevy_core_widgets for smooth scrolling
Dark Theme: Professional styling optimized for development work
Responsive Design: Proper overflow handling and window resizing
Dual Panel Layout: Entity list on left, component details on right

Remote Integration

bevy_remote Support: Built-in HTTP client for remote debugging
Connection Status: Visual indicators for connection state
Automatic Reconnection: Handles connection drops gracefully

Technical Implementation

Modular Architecture

// Add to your app for full inspector
app.add_plugins(EditorPlugin);

// Or use individual components
app.add_plugins((
    EntityListPlugin,
    ComponentInspectorPlugin,
    WidgetsPlugin,
));

Scroll System Integration

Uses Bevy's native ScrollPosition component
Integrates with bevy_core_widgets scrollbars
Prevents duplicate scrollbar creation
Smooth mouse wheel interaction

ScrollViewBuilder: High-level scrollable containers
CoreScrollArea: Low-level scroll components for custom use
Theme Integration: Consistent styling across all components

Integration with bevy_dev_tools

This inspector will be integrated into the bevy_dev_tools crate as a new debugging tool, joining:

Entity debugger
System performance monitor
Resource inspector
Event viewer

Usage

use bevy::prelude::*;
use bevy_dev_tools::inspector::InspectorPlugin;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(InspectorPlugin)
        .run();
}

The inspector provides immediate value for developers debugging entity hierarchies, component data, and application state in real-time.

2.7 KiB Raw Blame History