feat(dashboard): add auto-layout button with smart widget packing
Implements intelligent auto-layout system that efficiently arranges widgets to maximize space usage while respecting panel width constraints. **Key Features:** - Smart packing algorithm that sorts by widget area and finds optimal positions - Respects responsive column count (2-4 columns based on panel width) - Prefers full-width widgets when possible to eliminate gaps - Fallback to narrower widths for better vertical packing - Maintains minimum widget sizes **Implementation:** - GridEngine.autoLayout() - Core packing algorithm with collision detection - DashboardManager.autoLayoutWidgets() - High-level API that re-renders after layout - Auto-Arrange button in dashboard header (uses fa-table-cells-large icon) - Event handler wired to call autoLayoutWidgets with preferFullWidth=true **Algorithm Strategy:** 1. Sort widgets by area (largest first) for efficient packing 2. For each widget, try full-width placement first 3. Find first available position using row-by-row scan 4. If position is too far down, try narrower widths 5. Mark cells as occupied to prevent overlaps **Testing Notes:** - Works with current responsive column system (2-4 columns) - Respects minimum sizes and column constraints - Re-renders all widgets after repositioning - Auto-saves layout changes Part of Epic 2: Dashboard Widget Library
This commit is contained in:
@@ -547,15 +547,21 @@ async function initUI() {
|
||||
};
|
||||
|
||||
// Initialize dashboard
|
||||
console.log('[RPG Companion] Current dashboard settings:', extensionSettings.dashboard);
|
||||
const manager = await initializeDashboard(dashboardDependencies);
|
||||
|
||||
if (manager) {
|
||||
console.log('[RPG Companion] Dashboard v2 initialized successfully');
|
||||
console.log('[RPG Companion] Manager instance:', manager);
|
||||
|
||||
// Check if this is first time - create default layout
|
||||
if (!extensionSettings.dashboard || !extensionSettings.dashboard.tabs) {
|
||||
// Check if this is first time OR if dashboard is empty - create default layout
|
||||
if (!extensionSettings.dashboard || !extensionSettings.dashboard.tabs || extensionSettings.dashboard.tabs.length === 0) {
|
||||
console.log('[RPG Companion] Creating default dashboard layout...');
|
||||
createDefaultLayout(manager);
|
||||
} else {
|
||||
console.log('[RPG Companion] Loading saved dashboard layout with', extensionSettings.dashboard.tabs.length, 'tabs');
|
||||
// Apply the saved layout to the manager
|
||||
manager.applyDashboardConfig(extensionSettings.dashboard);
|
||||
}
|
||||
} else {
|
||||
console.warn('[RPG Companion] Dashboard initialization returned null, falling back to legacy rendering');
|
||||
|
||||
Reference in New Issue
Block a user