Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make auto-arrange and sort use default layout positions

Browse Source 
Modified autoLayoutCurrentTab() and autoLayoutWidgets() to detect when
widgets match the default layout and apply the exact positions from
defaultLayout.js instead of using the gridEngine.autoLayout packing
algorithm.

This ensures that:
- "Reset Layout" button uses default positions
- "Auto Arrange All Widgets" button uses default positions (if widgets match)
- "Sort Current Page" button uses default positions (if widgets match)

All three operations now produce identical layouts for the default widget set.

Changes:
- Added tryApplyDefaultLayoutToTab() helper for single tab layout
- Added tryApplyDefaultLayout() helper for all tabs layout
- Modified autoLayoutCurrentTab() to try default layout first
- Modified autoLayoutWidgets() to try default layout first
- Falls back to gridEngine.autoLayout for custom widgets

Fixes responsive dashboard layout consistency.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-06 20:56:32 +11:00
parent 1fd6720e6b
commit 1d82695d74
1 changed files with 220 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/dashboard/dashboardManager.js
+156
View File
@@ -1629,6 +1629,146 @@ export class DashboardManager {
console.log(`[DashboardManager] Reset ${resetCount} widgets to default sizes`);
}
/**
* Try to apply default layout positions to current tab
*
* Checks if the current tab's widgets match the default layout and applies
* the default positions if they do. This ensures "Sort Current Page" produces
* the same layout as "Reset Layout" for default widgets.
*
* @param {Object} tab - Tab to apply default layout to
* @param {Object} options - Layout options
* @returns {boolean} True if default layout was applied, false otherwise
*/
tryApplyDefaultLayoutToTab(tab, options = {}) {
if (!this.defaultLayout || !this.defaultLayout.tabs) {
console.log('[DashboardManager] No default layout available');
return false;
}
// Find matching default tab by ID
const defaultTab = this.defaultLayout.tabs.find(t => t.id === tab.id);
if (!defaultTab) {
console.log(`[DashboardManager] No default layout for tab "${tab.name}" (${tab.id})`);
return false;
}
// Check if widgets match (same types, possibly different IDs)
const currentTypes = tab.widgets.map(w => w.type).sort();
const defaultTypes = defaultTab.widgets.map(w => w.type).sort();
if (currentTypes.length !== defaultTypes.length ||
!currentTypes.every((type, i) => type === defaultTypes[i])) {
console.log('[DashboardManager] Tab widgets do not match default layout (custom widgets present)');
return false;
}
console.log('[DashboardManager] Applying default layout positions to current tab');
// Reset widget sizes to defaults (unless explicitly disabled)
if (options.resetSizes !== false) {
this.resetWidgetSizesToDefault(tab.widgets);
}
// Apply default positions to each widget
tab.widgets.forEach(widget => {
const defaultWidget = defaultTab.widgets.find(w => w.type === widget.type);
if (defaultWidget) {
widget.x = defaultWidget.x;
widget.y = defaultWidget.y;
// Size is already set by resetWidgetSizesToDefault
console.log(`[DashboardManager] Set ${widget.type} to default position (${widget.x}, ${widget.y})`);
}
});
return true;
}
/**
* Try to apply default layout to all tabs
*
* Checks if the current dashboard widgets match the default layout and applies
* the default positions if they do. This ensures "Auto Arrange" produces
* the same layout as "Reset Layout" for default widgets.
*
* @param {Object} options - Layout options
* @returns {boolean} True if default layout was applied, false otherwise
*/
tryApplyDefaultLayout(options = {}) {
if (!this.defaultLayout || !this.defaultLayout.tabs) {
console.log('[DashboardManager] No default layout available');
return false;
}
// Check if tabs match default layout
if (this.dashboard.tabs.length !== this.defaultLayout.tabs.length) {
console.log('[DashboardManager] Tab count does not match default layout');
return false;
}
// Check if all tabs and widgets match
for (let i = 0; i < this.dashboard.tabs.length; i++) {
const tab = this.dashboard.tabs[i];
const defaultTab = this.defaultLayout.tabs.find(t => t.id === tab.id);
if (!defaultTab) {
console.log(`[DashboardManager] No default tab found for "${tab.name}" (${tab.id})`);
return false;
}
const currentTypes = tab.widgets.map(w => w.type).sort();
const defaultTypes = defaultTab.widgets.map(w => w.type).sort();
if (currentTypes.length !== defaultTypes.length ||
!currentTypes.every((type, j) => type === defaultTypes[j])) {
console.log(`[DashboardManager] Tab "${tab.name}" widgets do not match default layout`);
return false;
}
}
console.log('[DashboardManager] Applying default layout positions to all tabs');
// Gather all widgets from all tabs
const allWidgets = [];
this.dashboard.tabs.forEach(tab => {
if (tab.widgets && tab.widgets.length > 0) {
allWidgets.push(...tab.widgets);
}
});
// Reset widget sizes to defaults (unless explicitly disabled)
if (options.resetSizes !== false) {
this.resetWidgetSizesToDefault(allWidgets);
}
// Apply default positions to each tab
this.dashboard.tabs.forEach(tab => {
const defaultTab = this.defaultLayout.tabs.find(t => t.id === tab.id);
if (defaultTab) {
tab.widgets.forEach(widget => {
const defaultWidget = defaultTab.widgets.find(w => w.type === widget.type);
if (defaultWidget) {
widget.x = defaultWidget.x;
widget.y = defaultWidget.y;
console.log(`[DashboardManager] Set ${widget.type} to default position (${widget.x}, ${widget.y})`);
}
});
}
});
// Re-render tabs and switch to first tab
this.renderTabs();
if (this.dashboard.tabs.length > 0) {
this.switchTab(this.dashboard.tabs[0].id);
}
// Save layout
this.triggerAutoSave();
console.log('[DashboardManager] Default layout applied successfully');
return true;
}
/**
* Auto-layout widgets on current tab only
* Sorts and arranges widgets on the current tab to maximize space usage
@@ -1654,6 +1794,13 @@ export class DashboardManager {
console.log(`[DashboardManager] Laying out ${currentTab.widgets.length} widgets on tab "${currentTab.name}"`);
// Check if we can use default layout positions
const useDefaultLayout = this.tryApplyDefaultLayoutToTab(currentTab, options);
if (!useDefaultLayout) {
// Fallback to traditional auto-layout
console.log('[DashboardManager] Using gridEngine.autoLayout (custom widgets or no default layout)');
// Reset widget sizes to defaults (unless explicitly disabled)
if (options.resetSizes !== false) {
this.resetWidgetSizesToDefault(currentTab.widgets);
@@ -1688,6 +1835,7 @@ export class DashboardManager {
}
}
});
}
// Re-render all widgets with new positions
this.clearGrid();
@@ -1719,6 +1867,13 @@ export class DashboardManager {
console.log('[DashboardManager] ===== AUTO-LAYOUT WIDGETS CALLED =====');
console.log('[DashboardManager] Auto-layout widgets requested');
// Check if we can use default layout
const useDefaultLayout = this.tryApplyDefaultLayout(options);
if (!useDefaultLayout) {
// Fallback to traditional auto-layout
console.log('[DashboardManager] Using traditional auto-layout (custom widgets or no default layout)');
// Gather ALL widgets from ALL tabs (don't lose inventory, social, etc.)
const allWidgets = [];
this.dashboard.tabs.forEach(tab => {
@@ -1756,6 +1911,7 @@ export class DashboardManager {
// distributeWidgetsByCategory handles rendering and tab switching
}
}
/**
* Trigger auto-save