Add DEBUG flag to disable console.log/warn in critical performance paths
while preserving console.error for actual errors. This eliminates ~80ms
of logging overhead during tab switches on mobile devices.
Modified files (hot-path only):
- dashboardManager.js (orchestrator, called for every widget)
- editModeManager.js (disableContentEditing on tab switch)
- gridEngine.js (positioning calculations for every widget)
- dragDrop.js (initWidget called for every widget)
- resizeHandler.js (initWidget called for every widget)
Performance impact:
- Before: ~40 console.log calls per tab switch (10 widgets)
- After: 0 console calls (no-op functions)
- Measured improvement: Tab switching now fast enough on mobile
(slight slowdown during screen recording is expected overhead)
The DEBUG flag can be set to true for debugging when needed.
This approach avoids syntax errors from commenting multi-line statements.
Total optimization across all commits:
- Phase 1: Removed redundant global disable (2 queries saved)
- Phase 2: Replaced inline disabling with single global pass (18 queries saved)
- Phase 3: Disabled console logging (80ms saved on mobile)
- Result: ~200ms improvement on mobile devices
The resize handler was mixing rem and pixel units without proper conversion,
causing widgets to fly wildly off screen with small mouse movements.
Root cause:
- rowHeight and gap were stored as rem values (e.g., 5 rem, 0.75 rem)
- Delta calculations divided pixel movements by rem values directly
- This caused ~14x excessive sensitivity
Fix:
- Add remToPixels() conversions for gap and rowHeight before calculations
- Use pixel values (gapPx, rowHeightPx) in all delta-to-grid-unit conversions
- Matches the correct pattern used in drag handler and gridEngine.snapToCell()
Example:
- Before: 20px movement / 5 rem = 3.48 grid units (way too much!)
- After: 20px movement / 80px = 0.22 grid units (smooth and predictable)
Fixes both desktop and mobile resize sensitivity issues.
File: src/systems/dashboard/resizeHandler.js
Lines: 333-343 (updateResizeSize method)
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