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

feat(dashboard): add auto-layout button with smart widget packing

Browse Source 
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:
Lucas 'Paperboy' Rose-Winters
2025-10-23 14:00:00 +11:00
parent e32a008f0b
commit 122bb3194a
13 changed files with 668 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/IMPLEMENTATION_PLAN.md
+10 -10
View File
@@ -708,26 +708,26 @@
**Epic 2 Status:**
**Core Widgets Implemented (Needs Testing):**
**Core Widgets Implemented (Code Complete - Needs Testing):**
- [x] Task 2.1: User Stats Widget (408 lines)
- [x] Task 2.2: Info Box Widgets - 5 modular widgets (545 lines)
- [x] Task 2.3: Present Characters Widget (377 lines)
- [x] Task 2.4: Inventory Widget (925 lines)
**Optional Widgets (Deferred to post-v2.0):**
**Remaining Widgets (To Do Next):**
- [ ] Task 2.5: Classic Stats Widget (standalone)
- [ ] Task 2.6: Dice Roller Widget
- [ ] Task 2.7: Last Roll Display Widget
**Epic 2 Complete When (TESTING IN PROGRESS):**
- [ ] TESTING: All core widgets converted and functional
- [ ] TESTING: Each widget draggable and resizable
- [ ] TESTING: All existing functionality preserved
- [ ] TESTING: Configuration options work for each widget
- [ ] TESTING: No regressions in data persistence
- [ ] TESTING: Mobile responsive behavior maintained
**Epic 2 Complete When:**
- [ ] All 7 widgets converted and functional (4 done, 3 remaining)
- [ ] Each widget draggable and resizable
- [ ] All existing functionality preserved
- [ ] Configuration options work for each widget
- [ ] No regressions in data persistence
- [ ] Mobile responsive behavior maintained
**Next Step:** Complete integration and end-to-end testing before marking Epic 2 complete
**Next Step:** Continue with Tasks 2.5, 2.6, 2.7 OR test/integrate existing widgets first (awaiting direction)
---
index.js
+8 -2
View File
@@ -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');
src/core/state.js
+3 -1
View File
@@ -84,7 +84,9 @@ export let extensionSettings = {
version: 2, // Dashboard config version
gridConfig: {
columns: 12, // Grid columns
// Columns calculated dynamically by GridEngine (2-4 based on panel width)
// Mobile (≤1000px screen): always 2 columns
// Desktop (>1000px screen): 2-4 columns based on panel width
rowHeight: 80, // Pixels per row
gap: 12, // Gap between widgets (px)
snapToGrid: true, // Auto-snap enabled
src/systems/dashboard/dashboardIntegration.js
+35 -16
View File
@@ -8,7 +8,7 @@
import { extensionName } from '../../core/config.js';
import { extensionSettings } from '../../core/state.js';
import { saveSettings } from '../../core/persistence.js';
import { renderExtensionTemplateAsync } from '../../../../../extensions.js';
import { renderExtensionTemplateAsync } from '../../../../../../extensions.js';
import { DashboardManager } from './dashboardManager.js';
import { WidgetRegistry } from './widgetRegistry.js';
@@ -136,6 +136,10 @@ function getInlineDashboardTemplate() {
<div id="rpg-dashboard-tabs" class="rpg-dashboard-tabs"></div>
</div>
<div class="rpg-dashboard-header-right">
<button id="rpg-dashboard-auto-layout" class="rpg-dashboard-btn rpg-auto-layout-btn" title="Auto-Arrange Widgets">
<i class="fa-solid fa-table-cells-large"></i>
<span>Auto-Arrange</span>
</button>
<button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Mode">
<i class="fa-solid fa-pen-to-square"></i>
<span>Edit</span>
@@ -183,6 +187,17 @@ function registerAllWidgets(registry, dependencies) {
* Set up dashboard event listeners
*/
function setupDashboardEventListeners(dependencies) {
// Auto-layout button
const autoLayoutBtn = document.querySelector('#rpg-dashboard-auto-layout');
if (autoLayoutBtn) {
autoLayoutBtn.addEventListener('click', () => {
if (dashboardManager) {
console.log('[RPG Companion] Auto-layout button clicked');
dashboardManager.autoLayoutWidgets({ preferFullWidth: true });
}
});
}
// Edit mode toggle
const editModeBtn = document.querySelector('#rpg-dashboard-edit-mode');
if (editModeBtn) {
@@ -310,28 +325,32 @@ export function createDefaultLayout(manager) {
return;
}
console.log('[RPG Companion] Creating default dashboard layout...');
console.log('[RPG Companion] Creating default dashboard layout (2-column optimized)...');
const mainTab = manager.tabManager.getActiveTabId();
// Add widgets with default positions
// Row 1: User Stats (left) + Calendar + Weather + Temperature + Clock (right)
manager.addWidget('userStats', mainTab, { x: 0, y: 0, w: 6, h: 4 });
manager.addWidget('calendar', mainTab, { x: 6, y: 0, w: 2, h: 2 });
manager.addWidget('weather', mainTab, { x: 8, y: 0, w: 3, h: 2 });
manager.addWidget('temperature', mainTab, { x: 11, y: 0, w: 2, h: 2 });
// Add widgets with 2-column layout positions
// Row 1-2: User Stats (full width)
manager.addWidget('userStats', mainTab, { x: 0, y: 0, w: 2, h: 3 });
// Row 2: Location (top right) + Clock (bottom right)
manager.addWidget('location', mainTab, { x: 6, y: 2, w: 6, h: 2 });
manager.addWidget('clock', mainTab, { x: 10, y: 2, w: 2, h: 2 });
// Row 3: Calendar (left) + Weather (right)
manager.addWidget('calendar', mainTab, { x: 0, y: 3, w: 1, h: 2 });
manager.addWidget('weather', mainTab, { x: 1, y: 3, w: 1, h: 2 });
// Row 3: Present Characters
manager.addWidget('presentCharacters', mainTab, { x: 0, y: 4, w: 12, h: 4 });
// Row 4: Temperature (left) + Clock (right)
manager.addWidget('temperature', mainTab, { x: 0, y: 5, w: 1, h: 2 });
manager.addWidget('clock', mainTab, { x: 1, y: 5, w: 1, h: 2 });
// Row 4: Inventory
manager.addWidget('inventory', mainTab, { x: 0, y: 8, w: 12, h: 6 });
// Row 5: Location (full width)
manager.addWidget('location', mainTab, { x: 0, y: 7, w: 2, h: 2 });
console.log('[RPG Companion] Default layout created');
// Row 6-7: Present Characters (full width)
manager.addWidget('presentCharacters', mainTab, { x: 0, y: 9, w: 2, h: 3 });
// Row 8-13: Inventory (full width)
manager.addWidget('inventory', mainTab, { x: 0, y: 12, w: 2, h: 6 });
console.log('[RPG Companion] Default layout created (2-column optimized)');
}
/**
src/systems/dashboard/dashboardManager.js
+145 -21
View File
@@ -95,16 +95,20 @@ export class DashboardManager {
// Create container structure
this.createContainerStructure();
// Initialize Grid Engine
// Initialize Grid Engine (columns calculated dynamically)
this.gridEngine = new GridEngine({
columns: this.config.columns,
rowHeight: this.config.rowHeight,
gap: this.config.gap,
container: this.gridContainer
container: this.gridContainer,
onColumnsChange: (newCols, oldCols) => {
console.log('[DashboardManager] Grid columns changed:', oldCols, '→', newCols);
// Re-render all widgets when column count changes
this.renderAllWidgets();
}
});
// Initialize Widget Registry
this.registry = new WidgetRegistry();
// Initialize Widget Registry (use provided registry or create new one)
this.registry = this.config.registry || new WidgetRegistry();
// Initialize Tab Manager with dashboard data structure
// Create default tab if no tabs exist
@@ -122,11 +126,11 @@ export class DashboardManager {
this.tabManager = new TabManager(this.dashboard);
// Set current tab to active tab from TabManager
this.currentTabId = this.tabManager.getActiveTabId();
this.currentTabId = this.tabManager.activeTabId;
// Register tab change listener
this.tabManager.onChange((event, data) => {
if (event === 'tabChanged') {
if (event === 'activeTabChanged') {
this.onTabChange(data.tabId);
}
});
@@ -139,9 +143,9 @@ export class DashboardManager {
// Initialize Resize Handler
this.resizeHandler = new ResizeHandler(this.gridEngine, {
minWidth: 2,
minWidth: 1,
minHeight: 2,
maxWidth: this.config.columns,
maxWidth: 4, // Max 4 columns (will be clamped to actual column count)
maxHeight: 10
});
@@ -175,6 +179,9 @@ export class DashboardManager {
// Try to load saved layout
await this.loadLayout();
// Measure container width and set up responsive sizing
this.setupContainerSizing();
console.log('[DashboardManager] All systems initialized');
this.notifyChange('initialized');
}
@@ -201,6 +208,46 @@ export class DashboardManager {
this.container.appendChild(this.gridContainer);
}
/**
* Set up container sizing and responsive behavior
* Measures container width and sets up ResizeObserver
* Also listens for viewport resize to recalculate vw/vh positions
*/
setupContainerSizing() {
// Measure actual container width
const width = this.gridContainer.clientWidth || this.gridContainer.offsetWidth || 350;
console.log('[DashboardManager] Measured container width:', width);
// Set container width in GridEngine (triggers column calculation)
this.gridEngine.setContainerWidth(width);
// Set up ResizeObserver to track container width changes
if (typeof ResizeObserver !== 'undefined') {
this.resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const newWidth = entry.contentRect.width;
console.log('[DashboardManager] Container resized to:', newWidth);
this.gridEngine.setContainerWidth(newWidth);
}
});
this.resizeObserver.observe(this.gridContainer);
console.log('[DashboardManager] ResizeObserver set up');
} else {
console.warn('[DashboardManager] ResizeObserver not supported, responsive sizing disabled');
}
// Listen for window resize to recalculate vh positions
// Viewport height changes affect vh calculations for vertical positioning
// Horizontal (%) automatically adapts to container width changes via ResizeObserver
this.viewportResizeHandler = () => {
console.log('[DashboardManager] Viewport resized, recalculating vh positions');
this.renderAllWidgets(); // Re-render with new vh values
};
window.addEventListener('resize', this.viewportResizeHandler);
console.log('[DashboardManager] Viewport resize listener added');
}
/**
* Add a new widget to the dashboard
* @param {string} type - Widget type (must be registered)
@@ -356,13 +403,13 @@ export class DashboardManager {
element.dataset.widgetId = widget.id;
element.dataset.widgetType = widget.type;
// Position widget using grid engine
const pos = this.gridEngine.getPixelPosition(widget);
// Position widget using grid engine (responsive units for scaling)
const pos = this.gridEngine.getWidgetPosition(widget);
element.style.position = 'absolute';
element.style.left = `${pos.left}px`;
element.style.top = `${pos.top}px`;
element.style.width = `${pos.width}px`;
element.style.height = `${pos.height}px`;
element.style.left = pos.left; // % of container (e.g., "5.23%")
element.style.top = pos.top; // vh units (e.g., "10.45vh")
element.style.width = pos.width; // % of container (e.g., "45.67%")
element.style.height = pos.height; // vh units (e.g., "20.12vh")
// Add to grid
this.gridContainer.appendChild(element);
@@ -418,6 +465,8 @@ export class DashboardManager {
* @param {Object} definition - Widget definition
*/
renderWidgetContent(element, widget, definition) {
console.log(`[DashboardManager] renderWidgetContent called for ${widget.type}`);
// Clear existing content (except resize handles and controls)
const handles = element.querySelector('.resize-handles');
const controls = element.querySelector('.widget-edit-controls');
@@ -427,7 +476,11 @@ export class DashboardManager {
// Call widget render function
if (definition && definition.render) {
console.log(`[DashboardManager] Calling render for ${widget.type}`, element);
definition.render(element, widget.config || {});
console.log(`[DashboardManager] After render, element children:`, element.children.length);
} else {
console.warn(`[DashboardManager] No render function for ${widget.type}`);
}
}
@@ -437,11 +490,21 @@ export class DashboardManager {
* @param {Object} widget - Widget data
*/
repositionWidget(element, widget) {
const pos = this.gridEngine.getPixelPosition(widget);
element.style.left = `${pos.left}px`;
element.style.top = `${pos.top}px`;
element.style.width = `${pos.width}px`;
element.style.height = `${pos.height}px`;
const pos = this.gridEngine.getWidgetPosition(widget);
element.style.left = pos.left;
element.style.top = pos.top;
element.style.width = pos.width;
element.style.height = pos.height;
}
/**
* Re-render all widgets (repositions all widgets with current grid calculations)
*/
renderAllWidgets() {
this.widgets.forEach((widgetData) => {
this.repositionWidget(widgetData.element, widgetData.widget);
});
console.log('[DashboardManager] Repositioned all widgets');
}
/**
@@ -491,7 +554,7 @@ export class DashboardManager {
* @param {string} tabId - Tab ID to switch to
*/
switchTab(tabId) {
this.tabManager.switchTab(tabId);
this.tabManager.setActiveTab(tabId);
}
/**
@@ -507,11 +570,17 @@ export class DashboardManager {
// Render all widgets in this tab
const tab = this.tabManager.getTab(tabId);
console.log(`[DashboardManager] Tab data:`, tab);
console.log(`[DashboardManager] Tab has ${tab?.widgets?.length || 0} widgets`);
if (tab && tab.widgets) {
tab.widgets.forEach(widget => {
console.log(`[DashboardManager] Rendering widget:`, widget.type, widget.id);
const definition = this.registry.get(widget.type);
if (definition) {
this.renderWidget(widget, definition);
} else {
console.warn(`[DashboardManager] Widget type "${widget.type}" not found in registry`);
}
});
}
@@ -748,6 +817,49 @@ export class DashboardManager {
this.defaultLayout = layout;
}
/**
* Auto-layout widgets on current tab to efficiently use all available space
*
* Sorts and packs widgets to maximize space usage with no gaps.
* Respects current panel width (responsive column count).
* Re-renders all widgets after repositioning.
*
* @param {Object} options - Layout options
* @param {boolean} [options.preferFullWidth=true] - Prefer full-width widgets when possible
*/
autoLayoutWidgets(options = {}) {
console.log('[DashboardManager] Auto-layout widgets requested');
// Get current tab
const currentTab = this.tabManager.getTab(this.currentTabId);
if (!currentTab || !currentTab.widgets || currentTab.widgets.length === 0) {
console.warn('[DashboardManager] No widgets to auto-layout');
return;
}
// Run auto-layout algorithm on widgets
const widgetsToLayout = [...currentTab.widgets];
this.gridEngine.autoLayout(widgetsToLayout, options);
// Update tab widgets with new positions
currentTab.widgets = widgetsToLayout;
// Re-render all widgets with new positions
this.clearGrid();
widgetsToLayout.forEach(widget => {
const definition = this.registry.get(widget.type);
if (definition) {
this.renderWidget(widget, definition);
}
});
console.log('[DashboardManager] Auto-layout complete, re-rendered widgets');
// Save changes
this.triggerAutoSave();
this.notifyChange('autoLayoutApplied', { tabId: this.currentTabId });
}
/**
* Trigger auto-save
*/
@@ -797,6 +909,18 @@ export class DashboardManager {
// Clear grid
this.clearGrid();
// Disconnect ResizeObserver
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
// Remove viewport resize listener
if (this.viewportResizeHandler) {
window.removeEventListener('resize', this.viewportResizeHandler);
this.viewportResizeHandler = null;
}
// Destroy systems
if (this.editManager) this.editManager.destroy();
if (this.dragHandler) this.dragHandler.destroy();
src/systems/dashboard/dashboardTemplate.html
+6
View File
@@ -8,6 +8,12 @@
</div>
<div class="rpg-dashboard-header-right">
<!-- Auto-Layout Button -->
<button id="rpg-dashboard-auto-layout" class="rpg-dashboard-btn rpg-auto-layout-btn" title="Auto-Arrange Widgets">
<i class="fa-solid fa-table-cells-large"></i>
<span>Auto-Arrange</span>
</button>
<!-- Edit Mode Toggle -->
<button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Mode">
<i class="fa-solid fa-pen-to-square"></i>
src/systems/dashboard/defaultLayout.js
+62 -13
View File
@@ -8,10 +8,13 @@
/**
* Generate default dashboard configuration
*
* Creates a two-tab layout:
* - "Status" tab: User stats, info box, present characters
* Creates a two-tab layout optimized for 2-column side panel:
* - "Status" tab: User stats, modular info widgets (calendar, weather, temp, clock, location), present characters
* - "Inventory" tab: Full inventory widget
*
* All positions sized for 2-column grid (w: 1-2, full width = 2).
* Layout will adapt if panel width increases to 3-4 columns.
*
* @returns {Object} Default dashboard configuration
*/
export function generateDefaultDashboard() {
@@ -19,7 +22,8 @@ export function generateDefaultDashboard() {
version: 2,
gridConfig: {
columns: 12,
// Columns calculated dynamically by GridEngine (2-4 based on panel width)
// Mobile: always 2, Desktop: 2-4 based on width
rowHeight: 80,
gap: 12,
snapToGrid: true,
@@ -33,35 +37,80 @@ export function generateDefaultDashboard() {
icon: '📊',
order: 0,
widgets: [
// Row 1: User Stats (full width)
{
id: 'widget-userstats',
type: 'userStats',
x: 0,
y: 0,
w: 6,
w: 2,
h: 3,
config: {
showClassicStats: true,
statBarStyle: 'gradient'
}
},
// Row 2: Calendar (left) + Weather (right)
{
id: 'widget-infobox',
type: 'infoBox',
x: 6,
y: 0,
w: 6,
id: 'widget-calendar',
type: 'calendar',
x: 0,
y: 3,
w: 1,
h: 2,
config: {}
},
{
id: 'widget-weather',
type: 'weather',
x: 1,
y: 3,
w: 1,
h: 2,
config: {
layout: 'horizontal'
compact: false
}
},
// Row 3: Temperature (left) + Clock (right)
{
id: 'widget-temperature',
type: 'temperature',
x: 0,
y: 5,
w: 1,
h: 2,
config: {
unit: 'celsius'
}
},
{
id: 'widget-clock',
type: 'clock',
x: 1,
y: 5,
w: 1,
h: 2,
config: {
format: 'digital'
}
},
// Row 4: Location (full width)
{
id: 'widget-location',
type: 'location',
x: 0,
y: 7,
w: 2,
h: 2,
config: {}
},
// Row 5-6: Present Characters (full width)
{
id: 'widget-presentchars',
type: 'presentCharacters',
x: 0,
y: 3,
w: 12,
y: 9,
w: 2,
h: 3,
config: {
cardLayout: 'grid',
@@ -81,7 +130,7 @@ export function generateDefaultDashboard() {
type: 'inventory',
x: 0,
y: 0,
w: 12,
w: 2,
h: 6,
config: {
defaultSubTab: 'onPerson',
src/systems/dashboard/gridEngine.js
+286 -8
View File
@@ -2,7 +2,8 @@
* GridEngine - Core grid layout engine for widget dashboard
*
* Handles grid-based positioning, snapping, collision detection, and auto-reflow.
* Uses a 12-column responsive grid system (default) with configurable row height.
* Uses a responsive 2-4 column grid system that adapts to panel width.
* Mobile devices (≤1000px screen width) always use 2 columns.
*
* @class GridEngine
*/
@@ -11,20 +12,25 @@ export class GridEngine {
* Initialize grid engine with configuration
*
* @param {Object} config - Grid configuration
* @param {number} [config.columns=12] - Number of grid columns
* @param {number} [config.rowHeight=80] - Height of each row in pixels
* @param {number} [config.gap=12] - Gap between widgets in pixels
* @param {boolean} [config.snapToGrid=true] - Enable auto-snapping to grid
* @param {HTMLElement} [config.container=null] - Container element
*/
constructor(config = {}) {
this.columns = config.columns || 12;
// Start with 2 columns (safest default for side panel)
this.columns = 2;
this.rowHeight = config.rowHeight || 80;
this.gap = config.gap || 12;
this.snapToGrid = config.snapToGrid !== false;
this.container = config.container || null;
// Container width will be set dynamically
this.containerWidth = 0;
// Callback for column changes (so DashboardManager can re-render)
this.onColumnsChange = config.onColumnsChange || null;
console.log('[GridEngine] Initialized:', {
columns: this.columns,
rowHeight: this.rowHeight,
@@ -33,14 +39,61 @@ export class GridEngine {
});
}
/**
* Check if we're on a mobile device
* Mobile is defined as screen width ≤ 1000px
*
* @returns {boolean} True if mobile
*/
isMobile() {
return window.innerWidth <= 1000;
}
/**
* Calculate optimal number of columns based on container width
*
* Desktop (>1000px screen):
* - < 370px: 2 columns
* - 370-449px: 3 columns
* - ≥ 450px: 4 columns
*
* Mobile (≤1000px screen):
* - Always 2 columns
*
* @param {number} containerWidth - Container width in pixels
* @returns {number} Number of columns (2-4)
*/
calculateColumns(containerWidth) {
// Mobile always uses 2 columns
if (this.isMobile()) {
return 2;
}
// Desktop: dynamic 2-4 columns based on panel width
if (containerWidth < 370) return 2;
if (containerWidth < 450) return 3;
return 4;
}
/**
* Set container width (called when container is measured or resized)
*
* Recalculates column count based on new width and notifies if changed.
*
* @param {number} width - Container width in pixels
*/
setContainerWidth(width) {
const oldColumns = this.columns;
this.containerWidth = width;
console.log('[GridEngine] Container width set to:', width);
this.columns = this.calculateColumns(width);
console.log('[GridEngine] Container width set to:', width, 'Columns:', this.columns);
// Notify if column count changed (so dashboard can re-render)
if (oldColumns !== this.columns && this.onColumnsChange) {
console.log('[GridEngine] Column count changed from', oldColumns, 'to', this.columns);
this.onColumnsChange(this.columns, oldColumns);
}
}
/**
@@ -63,8 +116,9 @@ export class GridEngine {
*/
getPixelPosition(widget) {
if (this.containerWidth === 0) {
console.warn('[GridEngine] Container width not set, using default 1200px');
this.containerWidth = 1200;
console.warn('[GridEngine] Container width not set, using default 350px (side panel estimate)');
this.containerWidth = 350;
this.columns = this.calculateColumns(350); // Recalculate columns for fallback
}
// Calculate column width
@@ -89,6 +143,91 @@ export class GridEngine {
return { left, top, width, height };
}
/**
* Calculate responsive position from grid coordinates
*
* Returns positions as % of container width (for horizontal) and vh (for vertical).
* Widgets are positioned absolutely within the container, so % is relative to container.
*
* @param {Object} widget - Widget with grid coordinates
* @param {number} widget.x - Grid column position (0-based)
* @param {number} widget.y - Grid row position (0-based)
* @param {number} widget.w - Width in grid columns
* @param {number} widget.h - Height in grid rows
* @returns {Object} Responsive coordinates {left, top, width, height}
*
* @example
* // Widget at column 0, row 0, size 2x3 in 2-column grid
* const pos = gridEngine.getViewportPosition({ x: 0, y: 0, w: 2, h: 3 });
* // Returns: { left: "3%", top: "2vh", width: "94%", height: "25vh" }
*/
getViewportPosition(widget) {
if (this.containerWidth === 0) {
console.warn('[GridEngine] Container width not set, using default 350px (side panel estimate)');
this.containerWidth = 350;
this.columns = this.calculateColumns(350);
}
console.log('[GridEngine] getViewportPosition DEBUG:', {
widgetId: widget.id,
widgetSize: `${widget.w}×${widget.h}`,
containerWidth: this.containerWidth,
columns: this.columns,
gap: this.gap
});
// Calculate column width as % of container
const gapPercent = (this.gap / this.containerWidth) * 100;
const totalGapsPercent = gapPercent * (this.columns + 1);
const colWidthPercent = (100 - totalGapsPercent) / this.columns;
console.log('[GridEngine] Calculation values:', {
gapPercent: gapPercent.toFixed(2) + '%',
totalGapsPercent: totalGapsPercent.toFixed(2) + '%',
colWidthPercent: colWidthPercent.toFixed(2) + '%'
});
// Calculate row height in vh for vertical scaling
const viewportHeight = window.innerHeight;
const rowHeightVh = (this.rowHeight / viewportHeight) * 100;
const gapVh = (this.gap / viewportHeight) * 100;
// Calculate positions
// Horizontal: % of container (since widgets are absolutely positioned within container)
const left = widget.x * (colWidthPercent + gapPercent) + gapPercent;
const width = widget.w * colWidthPercent + (widget.w - 1) * gapPercent;
console.log('[GridEngine] Position calc:', {
left: left.toFixed(2) + '%',
width: width.toFixed(2) + '%',
formula: `${widget.w} * ${colWidthPercent.toFixed(2)}% + ${widget.w - 1} * ${gapPercent.toFixed(2)}%`
});
// Vertical: vh units (scales with viewport height)
const top = widget.y * (rowHeightVh + gapVh) + gapVh;
const height = widget.h * rowHeightVh + (widget.h - 1) * gapVh;
return {
left: `${left.toFixed(2)}%`,
top: `${top.toFixed(2)}vh`,
width: `${width.toFixed(2)}%`,
height: `${height.toFixed(2)}vh`
};
}
/**
* Get widget position for CSS styling
* Returns responsive units for scaling across all screen sizes.
* Uses % of container for horizontal (adapts to panel width)
* Uses vh for vertical (adapts to viewport height)
*
* @param {Object} widget - Widget with grid coordinates
* @returns {Object} Position with %, vh units {left, top, width, height}
*/
getWidgetPosition(widget) {
return this.getViewportPosition(widget);
}
/**
* Snap pixel coordinates to nearest grid cell
*
@@ -106,8 +245,9 @@ export class GridEngine {
*/
snapToCell(pixelX, pixelY) {
if (this.containerWidth === 0) {
console.warn('[GridEngine] Container width not set, using default 1200px');
this.containerWidth = 1200;
console.warn('[GridEngine] Container width not set, using default 350px (side panel estimate)');
this.containerWidth = 350;
this.columns = this.calculateColumns(350); // Recalculate columns for fallback
}
// Calculate column width
@@ -241,4 +381,142 @@ export class GridEngine {
// Calculate total height including gaps
return maxY * (this.rowHeight + this.gap) + this.gap;
}
/**
* Auto-layout widgets to efficiently use all available space
*
* Packs widgets in reading order (left to right, top to bottom) with no gaps.
* Respects current column count (responsive to panel width).
* Scales widgets to maximize space usage while respecting minimum sizes.
*
* Strategy:
* 1. Sort widgets by area (largest first) for better packing
* 2. For each widget, try to fit full width (all columns)
* 3. If widget prefers smaller size, use that
* 4. Find first available position from top-left
* 5. Ensure no overlaps
*
* @param {Array<Object>} widgets - Array of widgets to auto-layout
* @param {Object} options - Layout options
* @param {boolean} [options.preferFullWidth=true] - Prefer full-width widgets when possible
* @param {Object} [options.minSize={w:1, h:2}] - Minimum widget size
* @returns {Array<Object>} Re-positioned widgets (same array, modified in place)
*/
autoLayout(widgets, options = {}) {
if (widgets.length === 0) return widgets;
const preferFullWidth = options.preferFullWidth !== false;
const minSize = options.minSize || { w: 1, h: 2 };
console.log('[GridEngine] Auto-layout started:', {
widgetCount: widgets.length,
columns: this.columns,
preferFullWidth,
minSize
});
// Sort widgets by area (largest first) for better packing efficiency
const sorted = [...widgets].sort((a, b) => {
const areaA = a.w * a.h;
const areaB = b.w * b.h;
if (areaB !== areaA) return areaB - areaA;
// If same area, sort by height (taller first)
return b.h - a.h;
});
// Track occupied cells in a 2D grid
const occupied = new Map(); // key: "x,y" => widget
/**
* Check if position is free
*/
const isFree = (x, y, w, h) => {
for (let row = y; row < y + h; row++) {
for (let col = x; col < x + w; col++) {
const key = `${col},${row}`;
if (occupied.has(key)) return false;
if (col >= this.columns) return false; // Out of bounds
}
}
return true;
};
/**
* Mark cells as occupied
*/
const markOccupied = (widget, x, y, w, h) => {
for (let row = y; row < y + h; row++) {
for (let col = x; col < x + w; col++) {
occupied.set(`${col},${row}`, widget.id);
}
}
};
/**
* Find first available position for widget of given size
*/
const findPosition = (w, h) => {
// Start from top-left, scan row by row
for (let y = 0; y < 1000; y++) { // Max 1000 rows (practical limit)
for (let x = 0; x <= this.columns - w; x++) {
if (isFree(x, y, w, h)) {
return { x, y };
}
}
}
// Fallback: stack at bottom (should never happen)
return { x: 0, y: 1000 };
};
// Process each widget
sorted.forEach(widget => {
// Determine optimal size for this widget
let targetW, targetH;
if (preferFullWidth) {
// Try to use full width when possible
targetW = this.columns;
targetH = widget.h;
} else {
// Keep original size or clamp to current column count
targetW = Math.min(widget.w, this.columns);
targetH = widget.h;
}
// Ensure minimum size
targetW = Math.max(minSize.w, Math.min(targetW, this.columns));
targetH = Math.max(minSize.h, targetH);
// Try to find position for preferred size
let pos = findPosition(targetW, targetH);
// If preferred size doesn't fit well, try smaller widths
if (pos.y > 100 && targetW > minSize.w) {
// Widget would be placed very far down, try narrower width
for (let tryW = targetW - 1; tryW >= minSize.w; tryW--) {
const tryPos = findPosition(tryW, targetH);
if (tryPos.y < pos.y) {
// Found better position with narrower width
pos = tryPos;
targetW = tryW;
break;
}
}
}
// Update widget position and size
widget.x = pos.x;
widget.y = pos.y;
widget.w = targetW;
widget.h = targetH;
// Mark cells as occupied
markOccupied(widget, pos.x, pos.y, targetW, targetH);
console.log(`[GridEngine] Auto-layout positioned: ${widget.id} at (${pos.x},${pos.y}) size ${targetW}×${targetH}`);
});
console.log('[GridEngine] Auto-layout complete');
return widgets;
}
}
src/systems/dashboard/widgets/infoBoxWidgets.js
+10 -10
View File
@@ -191,8 +191,8 @@ export function registerCalendarWidget(registry, dependencies) {
name: 'Calendar',
icon: '📅',
description: 'Date, weekday, month, and year display',
minSize: { w: 2, h: 2 },
defaultSize: { w: 2, h: 2 },
minSize: { w: 1, h: 2 },
defaultSize: { w: 1, h: 2 },
requiresSchema: false,
render(container, config = {}) {
@@ -277,8 +277,8 @@ export function registerWeatherWidget(registry, dependencies) {
name: 'Weather',
icon: '🌤️',
description: 'Weather emoji and forecast',
minSize: { w: 2, h: 2 },
defaultSize: { w: 3, h: 2 },
minSize: { w: 1, h: 2 },
defaultSize: { w: 1, h: 2 },
requiresSchema: false,
render(container, config = {}) {
@@ -309,8 +309,8 @@ export function registerTemperatureWidget(registry, dependencies) {
name: 'Temperature',
icon: '🌡️',
description: 'Temperature display with thermometer',
minSize: { w: 2, h: 2 },
defaultSize: { w: 2, h: 2 },
minSize: { w: 1, h: 2 },
defaultSize: { w: 1, h: 2 },
requiresSchema: false,
render(container, config = {}) {
@@ -348,8 +348,8 @@ export function registerClockWidget(registry, dependencies) {
name: 'Clock',
icon: '🕐',
description: 'Analog clock with time display',
minSize: { w: 2, h: 2 },
defaultSize: { w: 2, h: 2 },
minSize: { w: 1, h: 2 },
defaultSize: { w: 1, h: 2 },
requiresSchema: false,
render(container, config = {}) {
@@ -396,8 +396,8 @@ export function registerLocationWidget(registry, dependencies) {
name: 'Location',
icon: '📍',
description: 'Map with location display',
minSize: { w: 3, h: 2 },
defaultSize: { w: 6, h: 2 },
minSize: { w: 2, h: 2 },
defaultSize: { w: 2, h: 2 },
requiresSchema: false,
render(container, config = {}) {
src/systems/dashboard/widgets/inventoryWidget.js
+2 -2
View File
@@ -62,8 +62,8 @@ export function registerInventoryWidget(registry, dependencies) {
name: 'Inventory',
icon: '🎒',
description: 'Full inventory system with On Person, Stored, and Assets',
minSize: { w: 6, h: 4 },
defaultSize: { w: 8, h: 6 },
minSize: { w: 2, h: 4 },
defaultSize: { w: 2, h: 6 },
requiresSchema: false,
render(container, config = {}) {
src/systems/dashboard/widgets/presentCharactersWidget.js
+2 -2
View File
@@ -235,8 +235,8 @@ export function registerPresentCharactersWidget(registry, dependencies) {
name: 'Present Characters',
icon: '👥',
description: 'Character cards with avatars, traits, and relationships',
minSize: { w: 4, h: 3 },
defaultSize: { w: 6, h: 4 },
minSize: { w: 2, h: 2 },
defaultSize: { w: 2, h: 3 },
requiresSchema: false,
render(container, config = {}) {
src/systems/dashboard/widgets/userStatsWidget.js
+2 -2
View File
@@ -35,8 +35,8 @@ export function registerUserStatsWidget(registry, dependencies) {
name: 'User Stats',
icon: '❤️',
description: 'Health, energy, satiety bars and classic RPG stats',
minSize: { w: 4, h: 3 },
defaultSize: { w: 6, h: 4 },
minSize: { w: 1, h: 2 },
defaultSize: { w: 2, h: 3 },
requiresSchema: false,
/**
style.css
+97
View File
@@ -1040,6 +1040,103 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
transform: scale(0.95);
}
/* ========================================
DASHBOARD V2 WIDGET STYLES
========================================
When widgets are rendered in dashboard v2 (narrow side panel),
stack content vertically instead of side-by-side.
Modern hybrid approach:
- vw/vh: Widget layout positioning (handled by GridEngine)
- rem: Typography and spacing (accessible, user-scalable)
- px: Fixed details (borders, shadows)
- %: Container-relative sizing
======================================== */
.rpg-widget .rpg-stats-content {
display: flex;
flex-direction: column; /* Stack vertically */
gap: 0.75rem; /* rem for spacing */
}
.rpg-widget .rpg-stats-left,
.rpg-widget .rpg-stats-right {
flex: none; /* Don't split 50/50 */
width: 100%; /* Full width */
}
/* Classic stats grid - 3 columns for side panel */
.rpg-widget .rpg-classic-stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem 0.25rem; /* rem for spacing */
}
/* Classic stat cells */
.rpg-widget .rpg-classic-stat {
padding: 0.4rem 0.3rem; /* rem for spacing */
}
/* Typography - rem for accessibility */
.rpg-widget .rpg-classic-stat-label {
font-size: 0.65rem;
}
.rpg-widget .rpg-classic-stat-value {
font-size: 0.8rem;
}
.rpg-widget .rpg-classic-stat-btn {
width: 1.5rem; /* rem for button size */
height: 1.5rem;
font-size: 0.7rem;
}
/* User info - rem for typography */
.rpg-widget .rpg-user-info-row {
font-size: 0.75rem;
gap: 0.4rem;
}
.rpg-widget .rpg-user-name,
.rpg-widget .rpg-level-label,
.rpg-widget .rpg-level-value {
font-size: 0.75rem;
}
.rpg-widget .rpg-user-portrait {
width: 1.2rem;
height: 1.2rem;
}
/* Stat bars - rem for text, vh for bar height */
.rpg-widget .rpg-stat-label {
font-size: 0.75rem;
}
.rpg-widget .rpg-stat-value {
font-size: 0.8rem;
}
.rpg-widget .rpg-stat-bar {
height: 1.2vh; /* vh for layout element */
}
/* Mood - rem for text */
.rpg-widget .rpg-mood-emoji {
font-size: 1.5rem;
}
.rpg-widget .rpg-mood-conditions {
font-size: 0.75rem;
line-height: 1.3;
}
/* Progress bars - rem for spacing */
.rpg-widget .rpg-stats-grid {
gap: 0.5rem;
}
/* ============================================
INFO BOX SECTION
============================================ */