feat(dashboard): implement smart widget scaling and improved auto-layout
- Add resetWidgetSizesToDefault() to reset all widgets to default sizes before auto-arrange/reset - Implement continuous expansion algorithm that fills available space up to maxAutoSize limits - Add visible height detection to prevent widgets expanding beyond viewport (no forced scroll) - Update all widget defaultSize and maxAutoSize for optimal 1x1 compact layouts - Info widgets (calendar, weather, temp, clock): 1x1 default, 1x2 max - Location: 2x2 max (was 3x3) - Characters: 3x5 max, moved to 'scene' category (eliminates Social tab) - User Info: 2x1 max (prevents expansion) - User Mood: 1x1 default and max (compact top-right placement) - User Attributes: 3x5 max (fills bottom space) - User Stats: 3x3 max - Fix CSS scaling for 1x1 widgets - Replace viewport-based units with fixed rem values - Reduce icon/graphic sizes to fit with visible text - Add explicit gaps and padding for consistent spacing - Set line-height: 1 to prevent text overflow - Reorganize default layout - Status tab: User Info (2x1) + Mood (1x1 top right) + Stats + Attributes - Scene tab: Info widgets (1x1) + Location + Characters (all on one tab) - Inventory tab: Full inventory widget Auto-arrange and reset now properly size widgets to defaults and expand to fill available space without exceeding visible area.
This commit is contained in:
@@ -1183,6 +1183,15 @@ export class DashboardManager {
|
||||
await this.persistence.resetToDefault(this.defaultLayout);
|
||||
this.applyDashboardConfig(this.defaultLayout);
|
||||
|
||||
// Reset all widgets to default sizes
|
||||
const allWidgets = [];
|
||||
this.dashboard.tabs.forEach(tab => {
|
||||
if (tab.widgets && tab.widgets.length > 0) {
|
||||
allWidgets.push(...tab.widgets);
|
||||
}
|
||||
});
|
||||
this.resetWidgetSizesToDefault(allWidgets);
|
||||
|
||||
// Auto-layout each tab to prevent overlap (default positions may have changed)
|
||||
this.dashboard.tabs.forEach(tab => {
|
||||
if (tab.widgets && tab.widgets.length > 0) {
|
||||
@@ -1212,6 +1221,28 @@ export class DashboardManager {
|
||||
this.defaultLayout = layout;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset all widgets to their default sizes
|
||||
* @param {Array} widgets - Widgets to reset
|
||||
*/
|
||||
resetWidgetSizesToDefault(widgets) {
|
||||
let resetCount = 0;
|
||||
widgets.forEach(widget => {
|
||||
const definition = this.registry.get(widget.type);
|
||||
if (definition && definition.defaultSize) {
|
||||
const oldSize = `${widget.w}x${widget.h}`;
|
||||
widget.w = definition.defaultSize.w;
|
||||
widget.h = definition.defaultSize.h;
|
||||
const newSize = `${widget.w}x${widget.h}`;
|
||||
if (oldSize !== newSize) {
|
||||
console.log(`[DashboardManager] Reset ${widget.type} from ${oldSize} to ${newSize}`);
|
||||
resetCount++;
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(`[DashboardManager] Reset ${resetCount} widgets to default sizes`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto-layout widgets on current tab to efficiently use all available space
|
||||
*
|
||||
@@ -1221,6 +1252,7 @@ export class DashboardManager {
|
||||
*
|
||||
* @param {Object} options - Layout options
|
||||
* @param {boolean} [options.preferFullWidth=true] - Prefer full-width widgets when possible
|
||||
* @param {boolean} [options.resetSizes=true] - Reset widgets to default sizes before layout
|
||||
*/
|
||||
autoLayoutWidgets(options = {}) {
|
||||
console.log('[DashboardManager] Auto-layout widgets requested');
|
||||
@@ -1241,6 +1273,11 @@ export class DashboardManager {
|
||||
|
||||
console.log(`[DashboardManager] Total widgets to layout: ${allWidgets.length}`);
|
||||
|
||||
// Reset widget sizes to defaults (unless explicitly disabled)
|
||||
if (options.resetSizes !== false) {
|
||||
this.resetWidgetSizesToDefault(allWidgets);
|
||||
}
|
||||
|
||||
// Smart category-aware sorting BEFORE auto-layout
|
||||
const widgetsToLayout = this.sortWidgetsByCategory(allWidgets);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user