fix(resize): fix excessive sensitivity by converting rem to pixels
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)
This commit is contained in:
@@ -330,14 +330,17 @@ export class ResizeHandler {
|
||||
const deltaX = clientX - startX;
|
||||
const deltaY = clientY - startY;
|
||||
|
||||
// Convert rem to pixels for calculations
|
||||
const gapPx = this.gridEngine.remToPixels(this.gridEngine.gap);
|
||||
const rowHeightPx = this.gridEngine.remToPixels(this.gridEngine.rowHeight);
|
||||
|
||||
// Get column/row size in pixels (containerWidth already set by ResizeObserver in DashboardManager)
|
||||
const totalGaps = this.gridEngine.gap * (this.gridEngine.columns + 1);
|
||||
const totalGaps = gapPx * (this.gridEngine.columns + 1);
|
||||
const colWidth = (this.gridEngine.containerWidth - totalGaps) / this.gridEngine.columns;
|
||||
const rowHeight = this.gridEngine.rowHeight;
|
||||
|
||||
// Convert pixel delta to grid units
|
||||
const deltaGridX = Math.round(deltaX / (colWidth + this.gridEngine.gap));
|
||||
const deltaGridY = Math.round(deltaY / (rowHeight + this.gridEngine.gap));
|
||||
const deltaGridX = Math.round(deltaX / (colWidth + gapPx));
|
||||
const deltaGridY = Math.round(deltaY / (rowHeightPx + gapPx));
|
||||
|
||||
// Calculate new dimensions based on handle type
|
||||
let newW = startWidth;
|
||||
|
||||
Reference in New Issue
Block a user