BREAKING CHANGE: applyDashboardConfig() now accepts optional second parameter for optimization
Add auto-arrange confirmation dialog:
- Add warning popup before auto-arranging widgets across all tabs
- Follows same pattern as reset layout confirmation
- Prevents accidental destructive operations
Fix text selection interference:
- Apply user-select: none to entire .rpg-widget in edit mode
- Previously only applied to .rpg-widget-content
- Prevents text selection when dragging widgets, especially in attribute boxes
- Improves drag interaction on both desktop and mobile
Fix edit controls visibility:
- Add CSS rule to completely hide edit controls outside edit mode
- Controls now properly hidden when not in edit mode
- Settings button (⚙) kept for future widget configuration
Fix input disabling in edit mode:
- Call disableContentEditing() after tab switches in onTabChange()
- Call disableContentEditing() in syncAllControls()
- Ensures text fields remain non-editable in edit mode after all operations
Fix resize grid background rendering:
- Copy drag handler grid logic EXACTLY to resize handler
- Use gridEngine.calculateGridHeight(widgets) instead of manual calculation
- Add proper remToPixels() conversions for gap and rowHeight
- Pass widgets array through initWidget() and startResize()
- Grid now renders correctly during resize, matching drag behavior
Optimize layout operations:
- Add skipInitialSwitch option to applyDashboardConfig()
- Prevents redundant clearGrid() calls during resetLayout()
- Defers rendering until after layout calculations complete
Files modified:
- dashboardIntegration.js: Auto-arrange confirmation
- dashboardManager.js: skipInitialSwitch option, input disabling, widgets array
- editModeManager.js: Input disabling in syncAllControls()
- resizeHandler.js: Grid rendering fixes with proper unit conversions
- style.css: Text selection prevention, edit controls visibility
- Add lock/unlock button to dashboard header (always visible)
- Lock state prevents dragging in both normal and edit modes
- Lock state prevents resizing in edit mode
- Icon changes: lock-open (unlocked) ↔ lock (locked)
- Hide resize handles and prevent grab cursor when locked
- Lock state persists across edit mode toggles
- Integrate lock checks in DragDropHandler and ResizeHandler
- Pass editManager reference to drag/resize handlers for lock state access
- Change .rpg-widget overflow from hidden to visible to prevent handle clipping
- Reduce horizontal handle offset from -6px to -3px to prevent overlap
- Keep vertical offset at -6px (adequate gap between rows)
- Handles now have 6px clearance when widgets are side-by-side (12px gap - 3px - 3px)
Multiple critical fixes for dashboard v2:
**1. ResizeHandler error - updateContainerWidth is not a function**
- resizeHandler.js:288 was calling non-existent method
- Removed call - containerWidth tracked by ResizeObserver
- Resizing now functional
**2. DragDrop bug - widgets can't be released**
- endDrag() destructured widgets, originalX, originalY from dragState
- These fields were never added in startDrag()
- Added widgets parameter to initWidget() and startDrag()
- Store originalX, originalY, widgets in dragState
- dashboardManager now passes current tab widgets
- Widgets can now be dropped properly
**3. Widget content overflow**
- Added base .rpg-widget CSS: overflow: hidden, box-sizing: border-box
- Prevents content extending beyond widget bounds
- max-width: 100% on children
**4. Automatic layout migration**
- Old 12-column layouts (w: 8, w: 12) cause 500%+ widths in 2-4 column grid
- Added migrateOldLayouts() method
- Detects widgets with w > current column count
- Runs auto-layout to reposition for responsive grid
- Clears and re-renders current tab with new positions
- Saves migrated layout automatically
**5. Tab rendering**
- Implemented renderTabs() method
- Displays tab buttons with icons and names
- Active state highlighting
- Click handlers to switch tabs
**6. Collision prevention**
- Modified dragDrop endDrag() to check collisions
- Same-size widgets: swap positions
- Different sizes: revert to original
- Prevents overlapping widgets
**7. Edit mode fixes**
- Fixed edit button to call toggleEditMode()
- Added CSS to hide resize handles when not in edit mode
- Handles only visible in edit mode
**8. Icon-only header buttons**
- Auto-Arrange and Edit buttons now icon-only
- Saves horizontal space in header
All issues from user testing resolved.
- Add ResizeHandler class with 8 resize handles (4 corners + 4 edges)
- Implement unified mouse + touch resize events
- Add real-time dimension overlay showing current size
- Grid overlay with cell highlighting during resize
- Enforce min/max size constraints (2×2 to 12×10)
- Support resizing from all 8 directions with proper cursors
- Escape key cancels resize and restores original size
- Handle position adjustment when resizing from top/left
- Touch delay (150ms) for mobile scroll compatibility
- Create mobile-ready test harness with:
- Hover-activated resize handles with fade transitions
- Touch-optimized UI
- Real-time statistics
- Event logging
- Works on desktop and mobile
- 550 lines core code, 920 lines test suite
- Comprehensive JSDoc documentation
Lucas 'Paperboy' Rose-Winters